Add initial version of new spectrum table component

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -98,7 +98,7 @@ const createScreen = table => {
       limit: 1,
     })
 
-  const repeater = new Component("@budibase/standard-components/list")
+  const repeater = new Component("@budibase/standard-components/repeater")
     .instanceName("Repeater")
     .customProps({
       dataProvider: `{{ literal ${makePropSafe(provider._json._id)} }}`,

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -2,7 +2,8 @@
   "container",
   "dataprovider",
   "datagrid",
-  "list",
+  "table",
+  "repeater",
   "button",
   "search",
   {

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FieldSelect.svelte

@@ -11,6 +11,7 @@
   export let value = ""
   export let onChange = () => {}
   export let multiselect = false
+  export let placeholder
 
   $: datasource = getDatasourceForProvider($currentAsset, componentInstance)
   $: schema = getSchemaForDatasource(datasource).schema
@@ -18,7 +19,7 @@
 </script>
 
 {#if multiselect}
-  <MultiOptionSelect {value} {onChange} {options} />
+  <MultiOptionSelect {value} {onChange} {options} {placeholder} />
 {:else}
-  <OptionSelect {value} {onChange} {options} />
+  <OptionSelect {value} {onChange} {options} {placeholder} />
 {/if}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/MultiOptionSelect.svelte

@@ -4,6 +4,7 @@
   export let options = []
   export let value = []
   export let onChange = () => {}
+  export let placeholder
 
   let boundValue = getValidOptions(value, options)
 
@@ -26,6 +27,7 @@
     align="right"
     extraThin
     secondary
+    {placeholder}
     value={boundValue}
     on:change={setValue}>
     {#each options as option}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/OptionSelect.svelte

@@ -7,6 +7,7 @@
   export let value = ""
   export let styleBindingProperty
   export let onChange = () => {}
+  export let placeholder
 
   let open = null
   let rotate = ""
@@ -108,7 +109,7 @@
   $: displayLabel =
     selectedOption && selectedOption.label
       ? selectedOption.label
-      : value || "Choose option"
+      : value || placeholder || "Choose option"
 </script>
 
 <div

packages/standard-components/manifest.json

@@ -78,7 +78,7 @@
       }
     ]
   },
-  "list": {
+  "repeater": {
     "name": "Repeater",
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "ri-list-check-2",
@@ -1509,5 +1509,70 @@
         }
       ]
     }
+  },
+  "table": {
+    "name": "Table",
+    "icon": "ri-table-line",
+    "styleable": true,
+    "settings": [
+      {
+        "type": "dataProvider",
+        "label": "Data Provider",
+        "key": "dataProvider"
+      },
+      {
+        "type": "multifield",
+        "label": "Columns",
+        "key": "columns",
+        "dependsOn": "dataProvider",
+        "placeholder": "All columns"
+      },
+      {
+        "type": "boolean",
+        "label": "Show Auto Cols.",
+        "key": "showAutoColumns",
+        "defaultValue": false
+      },
+      {
+        "type": "select",
+        "label": "Theme",
+        "key": "theme",
+        "defaultValue": "spectrum--light",
+        "options": [
+          {
+            "label": "Lightest",
+            "value": "spectrum--lightest"
+          },
+          {
+            "label": "Light",
+            "value": "spectrum--light"
+          },
+          {
+            "label": "Dark",
+            "value": "spectrum--dark"
+          },
+          {
+            "label": "Darkest",
+            "value": "spectrum--darkest"
+          }
+        ]
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
+      }
+    ]
   }
 }

packages/standard-components/package.json

@@ -42,20 +42,23 @@
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
     "@budibase/bbui": "^1.58.13",
     "@budibase/svelte-ag-grid": "^1.0.4",
-    "@spectrum-css/actionbutton": "^1.0.0-beta.1",
-    "@spectrum-css/button": "^3.0.0-beta.6",
-    "@spectrum-css/checkbox": "^3.0.0-beta.6",
-    "@spectrum-css/fieldlabel": "^3.0.0-beta.7",
-    "@spectrum-css/icon": "^3.0.0-beta.2",
-    "@spectrum-css/inputgroup": "^3.0.0-beta.7",
-    "@spectrum-css/menu": "^3.0.0-beta.5",
-    "@spectrum-css/page": "^3.0.0-beta.0",
-    "@spectrum-css/picker": "^1.0.0-beta.3",
-    "@spectrum-css/popover": "^3.0.0-beta.6",
-    "@spectrum-css/stepper": "^3.0.0-beta.7",
-    "@spectrum-css/textfield": "^3.0.0-beta.6",
-    "@spectrum-css/vars": "^3.0.0-beta.2",
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/checkbox": "^3.0.1",
+    "@spectrum-css/fieldlabel": "^3.0.1",
+    "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/inputgroup": "^3.0.1",
+    "@spectrum-css/label": "^2.0.9",
+    "@spectrum-css/menu": "^3.0.1",
+    "@spectrum-css/page": "^3.0.1",
+    "@spectrum-css/picker": "^1.0.1",
+    "@spectrum-css/popover": "^3.0.1",
+    "@spectrum-css/stepper": "^3.0.1",
+    "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/textfield": "^3.0.1",
+    "@spectrum-css/vars": "^3.0.1",
     "apexcharts": "^3.22.1",
+    "dayjs": "^1.10.4",
     "flatpickr": "^4.6.6",
     "loadicons": "^1.0.0",
     "lodash.debounce": "^4.0.8",

packages/standard-components/src/index.js

@@ -17,7 +17,7 @@ export { default as dataprovider } from "./DataProvider.svelte"
 export { default as datagrid } from "./grid/Component.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"
-export { default as list } from "./List.svelte"
+export { default as repeater } from "./Repeater.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as text } from "./Text.svelte"
@@ -34,3 +34,4 @@ export { default as search } from "./Search.svelte"
 export { default as backgroundimage } from "./BackgroundImage.svelte"
 export * from "./charts"
 export * from "./forms"
+export * from "./table"

packages/standard-components/src/table/AttachmentRenderer.svelte

@@ -0,0 +1,5 @@
+<script>
+  export let value
+</script>
+
+{value}

packages/standard-components/src/table/BooleanRenderer.svelte

@@ -0,0 +1,37 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+
+  export let value
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-Checkbox--emphasized">
+  <input
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    id="checkbox-1"
+    checked={!!value} />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true">
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+</label>
+
+<style>
+  .spectrum-Checkbox {
+    min-height: 0;
+  }
+  .spectrum-Checkbox-box {
+    margin: 0;
+  }
+</style>

packages/standard-components/src/table/CellRenderer.svelte

@@ -0,0 +1,26 @@
+<script>
+  import BooleanRenderer from "./BooleanRenderer.svelte"
+  import DateTimeRenderer from "./DateTimeRenderer.svelte"
+  import RelationshipRenderer from "./RelationshipRenderer.svelte"
+  import AttachmentRenderer from "./AttachmentRenderer.svelte"
+
+  export let schema
+  export let value
+
+  const plainTypes = ["string", "options", "number", "longform"]
+  $: type = schema?.type ?? "string"
+</script>
+
+{#if value != null && value !== ''}
+  {#if plainTypes.includes(type)}
+    {value}
+  {:else if type === 'boolean'}
+    <BooleanRenderer {value} />
+  {:else if type === 'datetime'}
+    <DateTimeRenderer {value} />
+  {:else if type === 'link'}
+    <RelationshipRenderer {value} />
+  {:else if type === 'attachment'}
+    <AttachmentRenderer {value} />
+  {/if}
+{/if}

packages/standard-components/src/table/DateTimeRenderer.svelte

@@ -0,0 +1,7 @@
+<script>
+  import dayjs from "dayjs"
+
+  export let value
+</script>
+
+{dayjs(value).format('MMMM D YYYY, HH:mm')}

packages/standard-components/src/table/RelationshipRenderer.svelte

@@ -0,0 +1,15 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+
+  export let value
+</script>
+
+{#if value && value.length}
+  {#each value as item}
+    {#if item && item.primaryDisplay}
+      <span class="spectrum-Label spectrum-Label--grey">
+        {item.primaryDisplay}
+      </span>
+    {/if}
+  {/each}
+{/if}

packages/standard-components/src/table/Table.svelte

@@ -0,0 +1,136 @@
+<script>
+  import "@spectrum-css/table/dist/index-vars.css"
+  import { getContext } from "svelte"
+  import CellRenderer from "./CellRenderer.svelte"
+
+  export let theme
+  export let size
+  export let dataProvider
+  export let columns
+  export let showAutoColumns
+
+  const component = getContext("component")
+  const { styleable } = getContext("sdk")
+
+  let sortColumn
+  let sortOrder
+
+  $: rows = dataProvider?.rows ?? []
+  $: sortedRows = sortRows(rows, sortColumn, sortOrder)
+  $: loaded = dataProvider?.loaded ?? false
+  $: schema = dataProvider?.schema ?? {}
+  $: fields = getFields(schema, columns, showAutoColumns)
+
+  const sortRows = (rows, sortColumn, sortOrder) => {
+    if (!sortColumn || !sortOrder) {
+      return rows
+    }
+    return rows.slice().sort((a, b) => {
+      const colA = a[sortColumn]
+      const colB = b[sortColumn]
+      if (sortOrder === "Descending") {
+        return colA > colB ? -1 : 1
+      } else {
+        return colA > colB ? 1 : -1
+      }
+    })
+  }
+
+  const sortBy = field => {
+    if (field === sortColumn) {
+      sortOrder = sortOrder === "Descending" ? "Ascending" : "Descending"
+    } else {
+      sortColumn = field
+      sortOrder = "Descending"
+    }
+  }
+
+  const getFields = (schema, customColumns, showAutoColumns) => {
+    if (customColumns?.length) {
+      return customColumns
+    }
+    let columns = []
+    Object.entries(schema).forEach(([field, fieldSchema]) => {
+      console.log(fieldSchema)
+      if (showAutoColumns || !fieldSchema?.autocolumn) {
+        columns.push(field)
+      }
+    })
+    return columns
+  }
+</script>
+
+<div
+  lang="en"
+  dir="ltr"
+  use:styleable={$component.styles}
+  class={`spectrum ${size || 'spectrum--medium'} ${theme || 'spectrum--light'}`}>
+  <table class="spectrum-Table">
+    <thead class="spectrum-Table-head">
+      <tr>
+        {#each fields as field}
+          <th
+            class="spectrum-Table-headCell is-sortable"
+            class:is-sorted-desc={sortColumn === field && sortOrder === 'Descending'}
+            class:is-sorted-asc={sortColumn === field && sortOrder === 'Ascending'}
+            on:click={() => sortBy(field)}>
+            <div class="spectrum-Table-headCell-content">
+              {schema[field]?.name}
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-ArrowDown100 spectrum-Table-sortedIcon"
+                class:visible={sortColumn === field}
+                focusable="false"
+                aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Arrow100" />
+              </svg>
+            </div>
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody class="spectrum-Table-body">
+      {#each sortedRows as row}
+        <tr class="spectrum-Table-row">
+          {#each fields as field}
+            <td class="spectrum-Table-cell" tabindex="0">
+              <div class="spectrum-Table-cell-content">
+                <CellRenderer schema={schema[field]} value={row[field]} />
+              </div>
+            </td>
+          {/each}
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
+
+<style>
+  .spectrum-Table-headCell-content {
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    user-select: none;
+  }
+  .spectrum-Table-cell {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .spectrum-Table-cell-content {
+    height: 55px;
+    white-space: nowrap;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 4px;
+  }
+  .spectrum-Table-sortedIcon {
+    opacity: 0;
+    display: block !important;
+  }
+  .spectrum-Table-sortedIcon.visible {
+    opacity: 1;
+  }
+</style>

packages/standard-components/src/table/index.js

@@ -0,0 +1 @@
+export { default as table } from "./Table.svelte"

packages/standard-components/yarn.lock

@@ -132,72 +132,82 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@spectrum-css/actionbutton@^1.0.0-beta.1":
-  version "1.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.0-beta.1.tgz#a6684cac108d4a9daefe0be6df8201d3c369a0d6"
-  integrity sha512-QbrPMTkbkmh+dEBP66TFXmF5z3qSde+BnLR5hnlo2XMvKvnblX2VJStEbQ+hTKuSZXCRFADXyXD5o0NOYDTByQ==
-
-"@spectrum-css/button@^3.0.0-beta.6":
-  version "3.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.0-beta.6.tgz#007919d3e7a6692e506dc9addcd46aee6b203b1a"
-  integrity sha512-ZoJxezt5Pc006RR7SMG7PfC0VAdWqaGDpd21N8SEykGuz/KmNulqGW8RiSZQGMVX/jk5ZCAthPrH8cI/qtKbMg==
-
-"@spectrum-css/checkbox@^3.0.0-beta.6":
-  version "3.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.0-beta.6.tgz#338c4e58c4570ac8023f7332794fcb45f5ae9374"
-  integrity sha512-Z0Mwu7yn2b+QcZaBqMpKhliTQiF8T/cRyKgTyaIACtJ0FAK5NBJ4h/X6SWW3iXtoUWCH4+p/Hdtq1iQHAFi1qQ==
-
-"@spectrum-css/fieldlabel@^3.0.0-beta.7":
-  version "3.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.0-beta.7.tgz#f37797565e21b3609b8fbc2dafcea8ea41ffa114"
-  integrity sha512-0pseiPghqlOdALsRtidveWyt2YjfSXTZWDlSkcne/J0/QXBJOQH/7Qfy7TmROQZYRB2LqH1VzmE1zbvGwr5Aog==
-
-"@spectrum-css/icon@^3.0.0-beta.2":
-  version "3.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.0-beta.2.tgz#2dd7258ded74501b56e5fc42d0b6f0a3f4936aeb"
-  integrity sha512-BEHJ68YIXSwsNAqTdq/FrS4A+jtbKzqYrsGKXdDf93ql+fHWYXRCh1EVYGHx/1696mY73DhM4snMpKGIFtXGFA==
-
-"@spectrum-css/inputgroup@^3.0.0-beta.7":
-  version "3.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.0-beta.7.tgz#9829812e349bf973fb8835f0586bf013c8c38d23"
-  integrity sha512-pZDpYhtTKZUVG31Rtx7imdwK2ohLyVuTEsl+mj2yDKn+2TOwYRxr6LdbfNhFN4xd0GtSqapKYfbgKBWYpIyiSw==
-
-"@spectrum-css/menu@^3.0.0-beta.5":
-  version "3.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.0-beta.5.tgz#99d5ea7f6760b7a89d5d732f4e91b98dd3f82d74"
-  integrity sha512-jvPD5GbNdX31rdFBLxCG7KoUVGeeNYLzNXDpiGZsWme/djVTwitljgNe7bhVwCVlXZE7H20Ti/YrdafnE154Rw==
-
-"@spectrum-css/page@^3.0.0-beta.0":
-  version "3.0.0-beta.0"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.0-beta.0.tgz#885ea41b44861c5dc3aac904536f9e93c9109b58"
-  integrity sha512-+OD+l3aLisykxJnHfLkdkxMS1Uj1vKGYpKil7W0r5lSWU44eHyRgb8ZK5Vri1+sUO5SSf/CTybeVwtXME9wMLA==
-  dependencies:
-    "@spectrum-css/vars" "^3.0.0-beta.2"
-
-"@spectrum-css/picker@^1.0.0-beta.3":
-  version "1.0.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.0-beta.3.tgz#476593597b5a9e0105397e4e39350869cf6e7965"
-  integrity sha512-jHzFnS5Frd3JSwZ6B8ymH/sVnNqAUBo9p93Zax4VHTUDsPTtTkvxj/Vxo4POmrJEL9v3qUB2Yk13rD2BSfEzLQ==
-
-"@spectrum-css/popover@^3.0.0-beta.6":
-  version "3.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.0-beta.6.tgz#787611f020e091234e6ba7e946b0dbd0ed1a2fa2"
-  integrity sha512-dUJlwxoNpB6jOR0g/ywH2cPoUz2FVsL6xPfkm6BSsLp9ejhYy0/OFF4w0Q32Fu9qJDbWJ9qaoOlPpt7IjQ+/GQ==
-
-"@spectrum-css/stepper@^3.0.0-beta.7":
-  version "3.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.0-beta.7.tgz#fc78435ce878c5e233af13e43ed2c3e8671a2bbc"
-  integrity sha512-TQL2OBcdEgbHBwehMGgqMuWdKZZQPGcBRV5FlF0TUdOT58lEqFAO43Gajqvyte1P23lNmnX8KuMwkRfQdn0RzA==
-
-"@spectrum-css/textfield@^3.0.0-beta.6":
-  version "3.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.0-beta.6.tgz#30c044ceb403d6ea82d8046fb8f767f7fe455da6"
-  integrity sha512-U7P8C3Xx8h5X+r+dZu1qbxceIxBn7ZSmMvJyC7MPSPcU3EwdzCUepERNGX7NrQdcX91XSNlPUOF7hZUognBwhQ==
-
-"@spectrum-css/vars@^3.0.0-beta.2":
-  version "3.0.0-beta.2"
-  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.0-beta.2.tgz#f0b3a2db44aa57b1a82e47ab392c716a3056a157"
-  integrity sha512-HpcRDUkSjKVWUi7+jf6zp33YszXs3qFljaaNVTVOf0m0mqjWWXHxgLrvYlFFlHp5ITbNXds5Cb7EgiXCKmVIpA==
+"@spectrum-css/actionbutton@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
+  integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
+
+"@spectrum-css/button@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/button/-/button-3.0.1.tgz#6db8c3e851baecd0f1c2d88fef37d49d01c6e643"
+  integrity sha512-YXrBtjIYisk4Vaxnp0RiE4gdElQX04P2mc4Pi2GlQ27dJKlHmufYcF+kAqGdtiyK5yjdN/vKRcC8y13aA4rusA==
+
+"@spectrum-css/checkbox@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/checkbox/-/checkbox-3.0.1.tgz#6f36377d8bd556989ddd1dec2506dc295c5fcda8"
+  integrity sha512-fI0q2Cp6yU4ORyE6JWUSMYNgEtGf6AjYViZ2Weg3UPTYBQuWdQd8J0ZTcH38pDMyARFPRdiXgQ3KnyX5Hk5huw==
+
+"@spectrum-css/fieldlabel@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/fieldlabel/-/fieldlabel-3.0.1.tgz#39f7c0f25cc2ff402afeff005341b0832f7c588c"
+  integrity sha512-LMfwrwIq8wEEvxFLobdLvXRwKrp8o9Fty4iJ9aYl2Rj1uXkfRd8qLz9HGZjLEE1OuJgoTBgamYABl7EvoA5PLw==
+
+"@spectrum-css/icon@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/icon/-/icon-3.0.1.tgz#e300a6fc353c85c6b5d6e7a364408a940c31b177"
+  integrity sha512-cGFtIrcQ/7tthdkHK1npuEFiCdYVHLqwmLxghUYQw8Tb8KgJaw3OBO1tpjgsUizexNgu26BjVRIbGxNWuBXIHQ==
+
+"@spectrum-css/inputgroup@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/inputgroup/-/inputgroup-3.0.1.tgz#8c5b257b57b3b2cf04e99355709365fa0d6838cc"
+  integrity sha512-asBRa1jTlld6plkcq4ySO+xl+OJlCMSOLoAFdSSIJowcSlCV0yDy7oeOhf5YQv9mMHFWTKlWUSoAKDZTguIPxA==
+
+"@spectrum-css/label@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/label/-/label-2.0.9.tgz#792f34b906ba81118f4d0edcc81a18da1ecd57cb"
+  integrity sha512-0vXhWIZoQDTg+I6MyMpwmeJ+yQHtxkZ7lLcEqxhJ2y7JXP2ftblz2sO4+9jB11ljepeVlV+B6LF1drU8mMu82A==
+
+"@spectrum-css/menu@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
+  integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
+
+"@spectrum-css/page@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/page/-/page-3.0.1.tgz#5e1c3dd5b1a1ee591f9d636b75f03665f542d846"
+  integrity sha512-LAlKF8km5BlsGPpZ2SNtwKOQIHn1lz0X93aczGZVZceOg73O4gyeoT5cx4vi1z+KtBRY5VMDWx3XgGtUwwjqwA==
+  dependencies:
+    "@spectrum-css/vars" "^3.0.1"
+
+"@spectrum-css/picker@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/picker/-/picker-1.0.1.tgz#98991198576d26bd14160824e7b6f3c278ff930b"
+  integrity sha512-Rv4/UBOdNW1gs7WVBCJnPD5VFly8MqP++psDX6kcugUIcfJy0GC3acvElotmKRlCDk8Qxks2W2A0jKeSgphTmA==
+
+"@spectrum-css/popover@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/popover/-/popover-3.0.1.tgz#5863c1efc53f98f9aba2de9186666780041303fc"
+  integrity sha512-LmOSj/yCwQQ9iGmCYnHiJsJR/HfPiGqI1Jl7pkKxBOCxYBMS/5+ans9vfCN2Qnd0eK7WSbfPg72S6mjye7db2Q==
+
+"@spectrum-css/stepper@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/stepper/-/stepper-3.0.1.tgz#7f270f53505e7dbe082591e8ea1c4c8f397e045a"
+  integrity sha512-IvZlGFJ8QPr9tUz5xvVN4hASaTRDPdKu9IIp25q/x0ecgSrKAM55e3EBWEYWy1H1JI3h+zlPnNRuK0VLhDbCYA==
+
+"@spectrum-css/table@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
+  integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
+
+"@spectrum-css/textfield@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/textfield/-/textfield-3.0.1.tgz#e875b8e37817378ad08fc4af7d53026df38911e5"
+  integrity sha512-MUV5q87CVxbkNdSNoxGrFbgyKc51ft/WWf3aVEoPdPw5yBnXqFe1w1YmAit5zYDOOhhs58sCLAlUcCMlOpkgrA==
+
+"@spectrum-css/vars@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/vars/-/vars-3.0.1.tgz#561fd69098f896a647242dd8d6108af603bfa31e"
+  integrity sha512-l4oRcCOqInChYXZN6OQhpe3isk6l4OE6Ys8cgdlsiKp53suNoQxyyd9p/eGRbCjZgH3xQ8nK0t4DHa7QYC0S6w==
 
 "@types/color-name@^1.1.1":
   version "1.1.1"
@@ -864,6 +874,11 @@ csso@^4.0.2:
   dependencies:
     css-tree "1.0.0-alpha.39"
 
+dayjs@^1.10.4:
+  version "1.10.4"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
+  integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
+
 deep-equal@^1.0.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.1.tgz#b5c98c942ceffaf7cb051e24e1434a25a2e6076a"