datocms-react-ui 2.1.3 → 3.0.0-alpha.0

package/dist/esm/Canvas/index.js

@@ -12,281 +12,84 @@ export function useCtx() {
     return ctx;
 }
 /**
- * @example Color palette CSS variables
+ * @example Semantic color token CSS variables
  *
- * Within the `Canvas` component, a color palette is made available as a set of
+ * Within the `Canvas` component, semantic color tokens are made available as
  * CSS variables, allowing you to conform to the theme of the current
- * environment:
+ * environment (including dark mode):
  *
  * ```js
  * <Canvas ctx={ctx}>
- *   <Section title="Text colors">
+ *   <Section title="Standalone">
  *     <table>
  *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--base-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--base-body-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--light-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-body-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--placeholder-body-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--placeholder-body-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
+ *         {[
+ *           '--color--surface',
+ *           '--color--surface-hover',
+ *           '--color--surface-muted',
+ *           '--color--ink',
+ *           '--color--ink-subtle',
+ *           '--color--ink-placeholder',
+ *           '--color--ink-accent',
+ *           '--color--border',
+ *           '--color--border-hover',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
- *   <Section title="UI colors">
+ *   <Section title="Contexts">
  *     <table>
  *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--light-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--lighter-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--lighter-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--disabled-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--disabled-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--border-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--border-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--darker-border-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--darker-border-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--alert-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--alert-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--warning-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--warning-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--notice-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--notice-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--warning-bg-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--warning-bg-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--add-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--add-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--remove-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--remove-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
+ *         {[
+ *           '--color--primary--surface',
+ *           '--color--primary--ink',
+ *           '--color--tinted--surface',
+ *           '--color--tinted--ink',
+ *           '--color--accent--surface',
+ *           '--color--accent--ink',
+ *           '--color--selected--surface',
+ *           '--color--danger--surface',
+ *           '--color--danger--ink',
+ *           '--color--disabled--surface',
+ *           '--color--disabled--ink',
+ *           '--color--focus--border',
+ *           '--color--focus--outline',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
- *   <Section title="Project-specific colors">
+ *   <Section title="Feedback">
  *     <table>
  *       <tbody>
- *         <tr>
- *           <td>
- *             <code>--accent-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--accent-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--primary-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--primary-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--light-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--light-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
- *         <tr>
- *           <td>
- *             <code>--dark-color</code>
- *           </td>
- *           <td width="30%">
- *             <div
- *               style={{
- *                 width: '30px',
- *                 height: '30px',
- *                 background: 'var(--dark-color)',
- *               }}
- *             />
- *           </td>
- *         </tr>
+ *         {[
+ *           '--color--feedback-fail--ink',
+ *           '--color--feedback-fail--border',
+ *           '--color--feedback-warning--ink',
+ *           '--color--feedback-warning--surface',
+ *           '--color--feedback-success--ink',
+ *           '--color--feedback-success--border',
+ *         ].map((v) => (
+ *           <tr key={v}>
+ *             <td><code>{v}</code></td>
+ *             <td width="30%">
+ *               <div style={{ width: '30px', height: '30px', background: `var(${v})` }} />
+ *             </td>
+ *           </tr>
+ *         ))}
  *       </tbody>
  *     </table>
  *   </Section>
@@ -421,7 +224,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-s)',
  *               height: 'var(--spacing-s)',
  *             }}
@@ -435,7 +238,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-m)',
  *               height: 'var(--spacing-m)',
  *             }}
@@ -449,7 +252,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-l)',
  *               height: 'var(--spacing-l)',
  *             }}
@@ -463,7 +266,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xl)',
  *               height: 'var(--spacing-xl)',
  *             }}
@@ -477,7 +280,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxl)',
  *               height: 'var(--spacing-xxl)',
  *             }}
@@ -491,7 +294,7 @@ export function useCtx() {
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxxl)',
  *               height: 'var(--spacing-xxxl)',
  *             }}

package/dist/esm/Canvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAKpC,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,UAAU,EACV,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAIzC,8DAA8D;AAC9D,MAAM,CAAC,IAAM,UAAU,GAAG,aAAa,CAAiB,IAAI,CAAC,CAAC;AAE9D,MAAM,UAAU,MAAM;IACpB,IAAM,GAAG,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2eG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,SAAS,CAAC;QACR,IAAI,CAAC,aAAa,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC/C,IAAM,oBAAkB,GAAG,GAAiC,CAAC;YAC7D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAKpC,OAAO,KAAK,EAAE,EACZ,aAAa,EAEb,UAAU,EACV,SAAS,GACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAIzC,8DAA8D;AAC9D,MAAM,CAAC,IAAM,UAAU,GAAG,aAAa,CAAiB,IAAI,CAAC,CAAC;AAE9D,MAAM,UAAU,MAAM;IACpB,IAAM,GAAG,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsSG;AAEH,MAAM,UAAU,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,SAAS,CAAC;QACR,IAAI,CAAC,aAAa,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC/C,IAAM,oBAAkB,GAAG,GAAiC,CAAC;YAC7D,oBAAkB,CAAC,gBAAgB,EAAE,CAAC;YAEtC,OAAO;gBACL,oBAAkB,CAAC,eAAe,EAAE,CAAC;YACvC,CAAC,CAAC;SACH;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,oBAAC,UAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,oBAAoB,CAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC"}

package/dist/esm/Canvas/styles.module.css.json

@@ -1 +1 @@
-{ "themeVariables": "_themeVariables_pqxmo_1", "canvas": "_canvas_pqxmo_70" }
+{ "themeVariables": "_themeVariables_fb3bs_1", "canvas": "_canvas_fb3bs_128" }

package/dist/esm/ContextInspector/styles.module.css.json

@@ -1 +1 @@
-{ "inspector": "_inspector_u6041_1", "panel": "_panel_u6041_5", "panelHandle": "_panelHandle_u6041_9", "panelBody": "_panelBody_u6041_25", "groupDescription": "_groupDescription_u6041_31", "propertyGroup": "_propertyGroup_u6041_37", "propertyOrMethod": "_propertyOrMethod_u6041_42", "propertyOrMethodBody": "_propertyOrMethodBody_u6041_51", "propertyOrMethodExample": "_propertyOrMethodExample_u6041_55", "propertyOrMethodName": "_propertyOrMethodName_u6041_68", "propertyOrMethodExampleActions": "_propertyOrMethodExampleActions_u6041_82" }
+{ "inspector": "_inspector_4pnoo_1", "panel": "_panel_4pnoo_5", "panelHandle": "_panelHandle_4pnoo_9", "panelBody": "_panelBody_4pnoo_25", "groupDescription": "_groupDescription_4pnoo_31", "propertyGroup": "_propertyGroup_4pnoo_37", "propertyOrMethod": "_propertyOrMethod_4pnoo_42", "propertyOrMethodBody": "_propertyOrMethodBody_4pnoo_51", "propertyOrMethodExample": "_propertyOrMethodExample_4pnoo_55", "propertyOrMethodName": "_propertyOrMethodName_4pnoo_68", "propertyOrMethodExampleActions": "_propertyOrMethodExampleActions_4pnoo_82" }

package/dist/esm/Dropdown/styles.module.css.json

@@ -1 +1 @@
-{ "Dropdown": "_Dropdown_nie0g_1", "Dropdown__spacer": "_Dropdown__spacer_nie0g_5", "Dropdown__menu__search": "_Dropdown__menu__search_nie0g_11", "Dropdown__menu__search__input": "_Dropdown__menu__search__input_nie0g_16", "Dropdown__menu-container": "_Dropdown__menu-container_nie0g_45", "Dropdown__menu": "_Dropdown__menu_nie0g_11", "Dropdown__menu__inner": "_Dropdown__menu__inner_nie0g_61", "Dropdown__menu__group__title": "_Dropdown__menu__group__title_nie0g_65", "Dropdown__menu__group__content": "_Dropdown__menu__group__content_nie0g_73", "Dropdown__menu__text": "_Dropdown__menu__text_nie0g_77", "Dropdown__menu__option": "_Dropdown__menu__option_nie0g_86", "Dropdown__menu__option--is-selected": "_Dropdown__menu__option--is-selected_nie0g_108", "Dropdown__menu__option--is-disabled": "_Dropdown__menu__option--is-disabled_nie0g_112", "Dropdown__menu__option__content": "_Dropdown__menu__option__content_nie0g_115", "Dropdown__menu__option--is-dangerous": "_Dropdown__menu__option--is-dangerous_nie0g_120", "Dropdown__menu__option--is-active": "_Dropdown__menu__option--is-active_nie0g_138", "Dropdown__menu__option--is-valid": "_Dropdown__menu__option--is-valid_nie0g_147", "Dropdown__menu__option--is-invalid": "_Dropdown__menu__option--is-invalid_nie0g_151", "Dropdown__menu__option__icons": "_Dropdown__menu__option__icons_nie0g_194", "Dropdown__menu__option__icon": "_Dropdown__menu__option__icon_nie0g_194", "Dropdown__menu__option__icon--delete": "_Dropdown__menu__option__icon--delete_nie0g_241", "Dropdown__menu__separator": "_Dropdown__menu__separator_nie0g_248" }
+{ "Dropdown": "_Dropdown_dz2gh_1", "Dropdown__spacer": "_Dropdown__spacer_dz2gh_5", "Dropdown__menu__search": "_Dropdown__menu__search_dz2gh_11", "Dropdown__menu__search__input": "_Dropdown__menu__search__input_dz2gh_16", "Dropdown__menu-container": "_Dropdown__menu-container_dz2gh_47", "Dropdown__menu": "_Dropdown__menu_dz2gh_11", "Dropdown__menu__inner": "_Dropdown__menu__inner_dz2gh_63", "Dropdown__menu__group__title": "_Dropdown__menu__group__title_dz2gh_67", "Dropdown__menu__group__content": "_Dropdown__menu__group__content_dz2gh_75", "Dropdown__menu__text": "_Dropdown__menu__text_dz2gh_79", "Dropdown__menu__option": "_Dropdown__menu__option_dz2gh_88", "Dropdown__menu__option--is-selected": "_Dropdown__menu__option--is-selected_dz2gh_110", "Dropdown__menu__option--is-disabled": "_Dropdown__menu__option--is-disabled_dz2gh_114", "Dropdown__menu__option__content": "_Dropdown__menu__option__content_dz2gh_117", "Dropdown__menu__option--is-dangerous": "_Dropdown__menu__option--is-dangerous_dz2gh_122", "Dropdown__menu__option--is-active": "_Dropdown__menu__option--is-active_dz2gh_140", "Dropdown__menu__option--is-valid": "_Dropdown__menu__option--is-valid_dz2gh_149", "Dropdown__menu__option--is-invalid": "_Dropdown__menu__option--is-invalid_dz2gh_153", "Dropdown__menu__option__icons": "_Dropdown__menu__option__icons_dz2gh_196", "Dropdown__menu__option__icon": "_Dropdown__menu__option__icon_dz2gh_196", "Dropdown__menu__option__icon--delete": "_Dropdown__menu__option__icon--delete_dz2gh_243", "Dropdown__menu__separator": "_Dropdown__menu__separator_dz2gh_250" }

package/dist/esm/FieldError/styles.module.css.json

@@ -1 +1 @@
-{ "fieldError": "_fieldError_qi0xk_1" }
+{ "fieldError": "_fieldError_93pv2_1" }

package/dist/esm/FieldHint/styles.module.css.json

@@ -1 +1 @@
-{ "fieldHint": "_fieldHint_1avon_1" }
+{ "fieldHint": "_fieldHint_1q1d1_1" }

package/dist/esm/FormLabel/styles.module.css.json

@@ -1 +1 @@
-{ "formLabel": "_formLabel_tcjrv_1", "formLabel__code": "_formLabel__code_tcjrv_8", "formLabel--error": "_formLabel--error_tcjrv_14", "formLabel__label": "_formLabel__label_tcjrv_18", "formLabel__required": "_formLabel__required_tcjrv_30" }
+{ "formLabel": "_formLabel_1qzmk_1", "formLabel__code": "_formLabel__code_1qzmk_8", "formLabel--error": "_formLabel--error_1qzmk_14", "formLabel__label": "_formLabel__label_1qzmk_18", "formLabel__required": "_formLabel__required_1qzmk_30" }

package/dist/esm/HotKey/styles.module.css.json

@@ -1 +1 @@
-{ "hotKey": "_hotKey_1eko8_1", "label": "_label_1eko8_7", "keys": "_keys_1eko8_12", "hotKeyKey": "_hotKeyKey_1eko8_18" }
+{ "hotKey": "_hotKey_hlj7l_1", "label": "_label_hlj7l_7", "keys": "_keys_hlj7l_12", "hotKeyKey": "_hotKeyKey_hlj7l_18" }

package/dist/esm/Section/styles.module.css.json

@@ -1 +1 @@
-{ "Section": "_Section_zh95u_1", "Section--highlighted": "_Section--highlighted_zh95u_5", "pageContentSectionHighligh": "_pageContentSectionHighligh_zh95u_1", "Section__header": "_Section__header_zh95u_19", "Section__title": "_Section__title_zh95u_38", "Section__title__content": "_Section__title__content_zh95u_52", "Section__arrow": "_Section__arrow_zh95u_55", "Section__arrow--is-open": "_Section__arrow--is-open_zh95u_82" }
+{ "Section": "_Section_17d0k_1", "Section--highlighted": "_Section--highlighted_17d0k_5", "pageContentSectionHighligh": "_pageContentSectionHighligh_17d0k_1", "Section__header": "_Section__header_17d0k_19", "Section__title": "_Section__title_17d0k_38", "Section__title__content": "_Section__title__content_17d0k_52", "Section__arrow": "_Section__arrow_17d0k_55", "Section__arrow--is-open": "_Section__arrow--is-open_17d0k_82" }

package/dist/esm/SelectInput/index.js

@@ -25,19 +25,19 @@ import RawSelect from 'react-select';
 import RawAsyncSelect from 'react-select/async';
 import RawAsyncCreatableSelect from 'react-select/async-creatable';
 import RawCreatableSelect from 'react-select/creatable';
-var themeConfig = function (existing) { return (__assign(__assign({}, existing), { borderRadius: 0, colors: __assign(__assign({}, existing.colors), { primary25: 'var(--semi-transparent-accent-color)', 
+var themeConfig = function (existing) { return (__assign(__assign({}, existing), { borderRadius: 0, colors: __assign(__assign({}, existing.colors), { primary25: 'var(--color--surface-hover)', 
         // disabled
-        neutral10: 'var(--border-color)', 
+        neutral10: 'var(--color--border)', 
         // normal
-        neutral20: 'var(--border-color)', 
+        neutral20: 'var(--color--border)', 
         // focused
-        primary: 'var(--accent-color)', 
+        primary: 'var(--color--focus--border)', 
         // hover
-        neutral30: 'var(--darker-border-color)' }) })); };
+        neutral30: 'var(--color--border-hover)' }) })); };
 var useStyles = function (isDisabled, error) {
     return useMemo(function () {
         return {
-            placeholder: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--placeholder-body-color)' })); },
+            placeholder: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--color--ink-placeholder)' })); },
             container: function (provided) {
                 return __assign(__assign({}, provided), { fontSize: 'inherit' });
             },
@@ -46,30 +46,46 @@ var useStyles = function (isDisabled, error) {
                 var result = provided;
                 result = __assign(__assign({}, result), { minHeight: 40 });
                 if (isFocused) {
-                    return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', boxShadow: "0 0 0 3px ".concat(error
-                            ? 'rgba(var(--alert-color-rgb-components), 0.2)'
-                            : 'var(--semi-transparent-accent-color)'), '&:hover': {
-                            borderColor: error ? 'var(--alert-color)' : 'var(--accent-color)',
+                    return __assign(__assign({}, result), { borderColor: error
+                            ? 'var(--color--feedback-fail--border)'
+                            : 'var(--color--focus--border)', backgroundColor: isDisabled
+                            ? 'var(--color--disabled--surface)'
+                            : 'var(--color--surface)', boxShadow: "0 0 0 3px ".concat(error
+                            ? 'var(--color--feedback-fail--outline)'
+                            : 'var(--color--focus--outline)'), '&:hover': {
+                            borderColor: error
+                                ? 'var(--color--feedback-fail--border)'
+                                : 'var(--color--focus--border)',
                         } });
                 }
-                return __assign(__assign({}, result), { borderColor: error ? 'var(--alert-color)' : 'var(--border-color)', backgroundColor: isDisabled ? 'var(--disabled-color)' : 'white', '&:hover': {
+                return __assign(__assign({}, result), { borderColor: error
+                        ? 'var(--color--feedback-fail--border)'
+                        : 'var(--color--border)', backgroundColor: isDisabled
+                        ? 'var(--color--disabled--surface)'
+                        : 'var(--color--surface)', '&:hover': {
                         borderColor: error
-                            ? 'var(--alert-color)'
-                            : 'var(--darker-border-color)',
+                            ? 'var(--color--feedback-fail--border)'
+                            : 'var(--color--border-hover)',
                     } });
             },
             multiValueRemove: function (provided) { return (__assign(__assign({}, provided), { cursor: 'pointer' })); },
             menu: function (provided) {
-                return __assign(__assign({}, provided), { zIndex: 1000, minWidth: 250 });
+                return __assign(__assign({}, provided), { zIndex: 1000, minWidth: 250, backgroundColor: 'var(--color--raised--surface)' });
             },
-            input: function (provided) {
-                var result = __assign(__assign({}, provided), { boxShadow: 'none', 'input:focus': {
-                        boxShadow: 'none',
-                    } });
-                return result;
+            singleValue: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--color--ink)' })); },
+            input: function (provided) { return (__assign(__assign({}, provided), { color: 'var(--color--ink)', boxShadow: 'none', 'input:focus': {
+                    boxShadow: 'none',
+                } })); },
+            option: function (provided, _a) {
+                var isFocused = _a.isFocused, isSelected = _a.isSelected;
+                return (__assign(__assign({}, provided), { backgroundColor: isSelected
+                        ? 'var(--color--selected--surface)'
+                        : isFocused
+                            ? 'var(--color--surface-hover)'
+                            : undefined, color: 'var(--color--ink)' }));
             },
             multiValue: function (provided) {
-                return __assign(__assign({}, provided), { zIndex: 100, backgroundColor: 'var(--light-color)', userSelect: 'none' });
+                return __assign(__assign({}, provided), { zIndex: 100, backgroundColor: 'var(--color--tinted--surface)', userSelect: 'none' });
             },
             multiValueLabel: function (provided) { return (__assign(__assign({}, provided), { fontSize: 'inherit', padding: 3 })); },
         };

package/dist/esm/SelectInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/esm/SidebarPanel/index.d.ts

@@ -14,7 +14,7 @@ export declare type SidebarPanelProps = {
  *     <div
  *       style={{
  *         width: '300px',
- *         borderRight: '1px solid var(--border-color)',
+ *         borderRight: '1px solid var(--color--border)',
  *       }}
  *     >
  *       <SidebarPanel title="Default">Content</SidebarPanel>
@@ -31,7 +31,7 @@ export declare type SidebarPanelProps = {
  *         display: 'flex',
  *         justifyContent: 'center',
  *         alignItems: 'center',
- *         background: 'var(--light-bg-color)',
+ *         background: 'var(--color--surface-muted)',
  *       }}
  *     >
  *       Main content

package/dist/esm/SidebarPanel/index.js

@@ -1,14 +1,7 @@
 import classNames from 'classnames';
 import React, { useState } from 'react';
+import { CaretDownIcon, CaretUpIcon } from '../icons';
 import s from './styles.module.css.json';
-function ChevronDownIcon() {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
-        React.createElement("path", { d: "M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" })));
-}
-function ChevronUpIcon() {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
-        React.createElement("path", { d: "M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z" })));
-}
 /**
  * @example Basic example
  *
@@ -18,7 +11,7 @@ function ChevronUpIcon() {
  *     <div
  *       style={{
  *         width: '300px',
- *         borderRight: '1px solid var(--border-color)',
+ *         borderRight: '1px solid var(--color--border)',
  *       }}
  *     >
  *       <SidebarPanel title="Default">Content</SidebarPanel>
@@ -35,7 +28,7 @@ function ChevronUpIcon() {
  *         display: 'flex',
  *         justifyContent: 'center',
  *         alignItems: 'center',
- *         background: 'var(--light-bg-color)',
+ *         background: 'var(--color--surface-muted)',
  *       }}
  *     >
  *       Main content
@@ -54,7 +47,7 @@ export function SidebarPanel(_a) {
     return (React.createElement("div", { className: s.SidebarPanel },
         title && (React.createElement("button", { type: "button", className: s.SidebarPanel__header, onClick: handleToggle },
             React.createElement("div", { className: s.SidebarPanel__header__title }, title),
-            React.createElement("div", { className: s.SidebarPanel__header__chevron }, open ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronUpIcon, null)))),
+            React.createElement("div", { className: s.SidebarPanel__header__chevron }, open ? React.createElement(CaretDownIcon, null) : React.createElement(CaretUpIcon, null)))),
         open && (React.createElement("div", { className: classNames(s.SidebarPanel__content, (_b = {},
                 _b[s['SidebarPanel__content--no-padding']] = noPadding,
                 _b)) }, children))));

package/dist/esm/SidebarPanel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AAEzC,SAAS,eAAe;IACtB,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,8BAAM,CAAC,EAAC,yRAAyR,GAAG,CAChS,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,8BAAM,CAAC,EAAC,8RAA8R,GAAG,CACrS,CACP,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,QAAQ,CAAC,SAAS,CAAC,EAApC,IAAI,QAAA,EAAE,OAAO,QAAuB,CAAC;IAE5C,IAAM,YAAY,GAAG;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,CAAC,CAAC,YAAY;QAC3B,KAAK,IAAI,CACR,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,oBAAoB,EACjC,OAAO,EAAE,YAAY;YAErB,6BAAK,SAAS,EAAE,CAAC,CAAC,2BAA2B,IAAG,KAAK,CAAO;YAC5D,6BAAK,SAAS,EAAE,CAAC,CAAC,6BAA6B,IAC5C,IAAI,CAAC,CAAC,CAAC,oBAAC,eAAe,OAAG,CAAC,CAAC,CAAC,oBAAC,aAAa,OAAG,CAC3C,CACC,CACV;QACA,IAAI,IAAI,CACP,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,qBAAqB;gBAC3C,GAAC,CAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,EAAE,EAAkB,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,CAAC,MAAM,0BAA0B,CAAC;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,UAAU,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,QAAQ,CAAC,SAAS,CAAC,EAApC,IAAI,QAAA,EAAE,OAAO,QAAuB,CAAC;IAE5C,IAAM,YAAY,GAAG;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO,CACL,6BAAK,SAAS,EAAE,CAAC,CAAC,YAAY;QAC3B,KAAK,IAAI,CACR,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,CAAC,CAAC,oBAAoB,EACjC,OAAO,EAAE,YAAY;YAErB,6BAAK,SAAS,EAAE,CAAC,CAAC,2BAA2B,IAAG,KAAK,CAAO;YAC5D,6BAAK,SAAS,EAAE,CAAC,CAAC,6BAA6B,IAC5C,IAAI,CAAC,CAAC,CAAC,oBAAC,aAAa,OAAG,CAAC,CAAC,CAAC,oBAAC,WAAW,OAAG,CACvC,CACC,CACV;QACA,IAAI,IAAI,CACP,6BACE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,qBAAqB;gBAC3C,GAAC,CAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/SidebarPanel/styles.module.css.json

@@ -1 +1 @@
-{ "SidebarPanel": "_SidebarPanel_4uwco_1", "SidebarPanel__header": "_SidebarPanel__header_4uwco_5", "SidebarPanel__header__title": "_SidebarPanel__header__title_4uwco_30", "SidebarPanel__header__chevron": "_SidebarPanel__header__chevron_4uwco_36", "SidebarPanel__content": "_SidebarPanel__content_4uwco_42", "SidebarPanel__content--no-padding": "_SidebarPanel__content--no-padding_4uwco_47" }
+{ "SidebarPanel": "_SidebarPanel_q32h5_1", "SidebarPanel__header": "_SidebarPanel__header_q32h5_5", "SidebarPanel__header__title": "_SidebarPanel__header__title_q32h5_30", "SidebarPanel__header__chevron": "_SidebarPanel__header__chevron_q32h5_36", "SidebarPanel__content": "_SidebarPanel__content_q32h5_42", "SidebarPanel__content--no-padding": "_SidebarPanel__content--no-padding_q32h5_47" }