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

package/dist/cjs/Button/styles.module.css.json

@@ -1 +1 @@
-{ "button": "_button_474wk_1", "disabled": "_disabled_474wk_30", "buttonType-muted": "_buttonType-muted_474wk_34", "buttonType-primary": "_buttonType-primary_474wk_50", "buttonType-negative": "_buttonType-negative_474wk_71", "buttonSize-xxs": "_buttonSize-xxs_474wk_88", "buttonSize-xs": "_buttonSize-xs_474wk_93", "buttonSize-s": "_buttonSize-s_474wk_98", "buttonSize-m": "_buttonSize-m_474wk_103", "buttonSize-l": "_buttonSize-l_474wk_108", "buttonSize-xl": "_buttonSize-xl_474wk_113", "fullWidth": "_fullWidth_474wk_118", "button__leftIcon": "_button__leftIcon_474wk_124", "button__rightIcon": "_button__rightIcon_474wk_125" }
+{ "button": "_button_1kk5u_1", "disabled": "_disabled_1kk5u_30", "buttonType-muted": "_buttonType-muted_1kk5u_34", "buttonType-primary": "_buttonType-primary_1kk5u_50", "buttonType-negative": "_buttonType-negative_1kk5u_71", "buttonSize-xxs": "_buttonSize-xxs_1kk5u_88", "buttonSize-xs": "_buttonSize-xs_1kk5u_93", "buttonSize-s": "_buttonSize-s_1kk5u_98", "buttonSize-m": "_buttonSize-m_1kk5u_103", "buttonSize-l": "_buttonSize-l_1kk5u_108", "buttonSize-xl": "_buttonSize-xl_1kk5u_113", "fullWidth": "_fullWidth_1kk5u_118", "button__leftIcon": "_button__leftIcon_1kk5u_124", "button__rightIcon": "_button__rightIcon_1kk5u_125" }

package/dist/cjs/ButtonGroup/Button/styles.module.css.json

@@ -1 +1 @@
-{ "Button": "_Button_1h1w1_1", "Button--s": "_Button--s_1h1w1_32", "Button--disabled": "_Button--disabled_1h1w1_36", "Button--selected": "_Button--selected_1h1w1_45" }
+{ "Button": "_Button_9ae1c_1", "Button--s": "_Button--s_9ae1c_30", "Button--disabled": "_Button--disabled_9ae1c_34", "Button--selected": "_Button--selected_9ae1c_43" }

package/dist/cjs/ButtonGroup/Group/styles.module.css.json

@@ -1 +1 @@
-{ "Group": "_Group_10mj4_1" }
+{ "Group": "_Group_1b5yn_1" }

package/dist/cjs/Canvas/index.js

@@ -42,281 +42,84 @@ function useCtx() {
 }
 exports.useCtx = useCtx;
 /**
- * @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>
@@ -451,7 +254,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-s)',
  *               height: 'var(--spacing-s)',
  *             }}
@@ -465,7 +268,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-m)',
  *               height: 'var(--spacing-m)',
  *             }}
@@ -479,7 +282,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-l)',
  *               height: 'var(--spacing-l)',
  *             }}
@@ -493,7 +296,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xl)',
  *               height: 'var(--spacing-xl)',
  *             }}
@@ -507,7 +310,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxl)',
  *               height: 'var(--spacing-xxl)',
  *             }}
@@ -521,7 +324,7 @@ exports.useCtx = useCtx;
  *         <td>
  *           <div
  *             style={{
- *               background: 'var(--accent-color)',
+ *               background: 'var(--color--accent--surface)',
  *               width: 'var(--spacing-xxxl)',
  *               height: 'var(--spacing-xxxl)',
  *             }}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AAKpC,6CAKe;AACf,gEAA+D;AAC/D,oFAAyC;AAIzC,8DAA8D;AACjD,QAAA,UAAU,GAAG,IAAA,qBAAa,EAAiB,IAAI,CAAC,CAAC;AAE9D,SAAgB,MAAM;IACpB,IAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,kBAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AARD,wBAQC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2eG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,IAAA,iBAAS,EAAC;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,8BAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,cAAc,EAAE,gCAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,IAAA,2CAAoB,EAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC;AA9BD,wBA8BC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Canvas/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AAKpC,6CAKe;AACf,gEAA+D;AAC/D,oFAAyC;AAIzC,8DAA8D;AACjD,QAAA,UAAU,GAAG,IAAA,qBAAa,EAAiB,IAAI,CAAC,CAAC;AAE9D,SAAgB,MAAM;IACpB,IAAM,GAAG,GAAG,IAAA,kBAAU,EAAC,kBAAU,CAAC,CAAC;IAEnC,IAAI,CAAC,GAAG,EAAE;QACR,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;KAChD;IAED,OAAO,GAAQ,CAAC;AAClB,CAAC;AARD,wBAQC;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsSG;AAEH,SAAgB,MAAM,CAAC,EAIT;QAHZ,GAAG,SAAA,EACH,QAAQ,cAAA,EACR,aAAa,mBAAA;IAEL,IAAA,IAAI,GAAK,GAAkC,KAAvC,CAAwC;IAEpD,IAAA,iBAAS,EAAC;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,8BAAC,kBAAU,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG;QAC7B,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,cAAc,EAAE,gCAAC,CAAC,MAAM,CAAC,EACjD,KAAK,EAAE,IAAA,2CAAoB,EAAC,GAAG,CAAC,IAE/B,QAAQ,CACL,CACc,CACvB,CAAC;AACJ,CAAC;AA9BD,wBA8BC"}

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

@@ -1 +1 @@
-{ "themeVariables": "_themeVariables_2dr1w_1", "canvas": "_canvas_2dr1w_70" }
+{ "themeVariables": "_themeVariables_fb3bs_1", "canvas": "_canvas_fb3bs_128" }

package/dist/cjs/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/cjs/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/cjs/FieldError/styles.module.css.json

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

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

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/SelectInput/index.js

@@ -54,19 +54,19 @@ var react_select_1 = __importDefault(require("react-select"));
 var async_1 = __importDefault(require("react-select/async"));
 var async_creatable_1 = __importDefault(require("react-select/async-creatable"));
 var creatable_1 = __importDefault(require("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 (0, react_1.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' });
             },
@@ -75,30 +75,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/cjs/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/cjs/SidebarPanel/index.js

@@ -29,15 +29,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarPanel = void 0;
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
+var icons_1 = require("../icons");
 var styles_module_css_json_1 = __importDefault(require("./styles.module.css.json"));
-function ChevronDownIcon() {
-    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
-        react_1.default.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_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: "1em", height: "1em" },
-        react_1.default.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
  *
@@ -47,7 +40,7 @@ function ChevronUpIcon() {
  *     <div
  *       style={{
  *         width: '300px',
- *         borderRight: '1px solid var(--border-color)',
+ *         borderRight: '1px solid var(--color--border)',
  *       }}
  *     >
  *       <SidebarPanel title="Default">Content</SidebarPanel>
@@ -64,7 +57,7 @@ function ChevronUpIcon() {
  *         display: 'flex',
  *         justifyContent: 'center',
  *         alignItems: 'center',
- *         background: 'var(--light-bg-color)',
+ *         background: 'var(--color--surface-muted)',
  *       }}
  *     >
  *       Main content
@@ -83,7 +76,7 @@ function SidebarPanel(_a) {
     return (react_1.default.createElement("div", { className: styles_module_css_json_1.default.SidebarPanel },
         title && (react_1.default.createElement("button", { type: "button", className: styles_module_css_json_1.default.SidebarPanel__header, onClick: handleToggle },
             react_1.default.createElement("div", { className: styles_module_css_json_1.default.SidebarPanel__header__title }, title),
-            react_1.default.createElement("div", { className: styles_module_css_json_1.default.SidebarPanel__header__chevron }, open ? react_1.default.createElement(ChevronDownIcon, null) : react_1.default.createElement(ChevronUpIcon, null)))),
+            react_1.default.createElement("div", { className: styles_module_css_json_1.default.SidebarPanel__header__chevron }, open ? react_1.default.createElement(icons_1.CaretDownIcon, null) : react_1.default.createElement(icons_1.CaretUpIcon, null)))),
         open && (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles_module_css_json_1.default.SidebarPanel__content, (_b = {},
                 _b[styles_module_css_json_1.default['SidebarPanel__content--no-padding']] = noPadding,
                 _b)) }, children))));

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AACpC,6CAAwD;AACxD,oFAAyC;AAEzC,SAAS,eAAe;IACtB,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,wCAAM,CAAC,EAAC,yRAAyR,GAAG,CAChS,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK;QAEZ,wCAAM,CAAC,EAAC,8RAA8R,GAAG,CACrS,CACP,CAAC;AACJ,CAAC;AASD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAgB,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,IAAA,gBAAQ,EAAC,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,uCAAK,SAAS,EAAE,gCAAC,CAAC,YAAY;QAC3B,KAAK,IAAI,CACR,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gCAAC,CAAC,oBAAoB,EACjC,OAAO,EAAE,YAAY;YAErB,uCAAK,SAAS,EAAE,gCAAC,CAAC,2BAA2B,IAAG,KAAK,CAAO;YAC5D,uCAAK,SAAS,EAAE,gCAAC,CAAC,6BAA6B,IAC5C,IAAI,CAAC,CAAC,CAAC,8BAAC,eAAe,OAAG,CAAC,CAAC,CAAC,8BAAC,aAAa,OAAG,CAC3C,CACC,CACV;QACA,IAAI,IAAI,CACP,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,qBAAqB;gBAC3C,GAAC,gCAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC;AArCD,oCAqCC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/SidebarPanel/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,0DAAoC;AACpC,6CAAwD;AACxD,kCAAsD;AACtD,oFAAyC;AASzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAgB,YAAY,CAAC,EAKT;;QAJlB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,SAAS,eAAA;IAEH,IAAA,KAAkB,IAAA,gBAAQ,EAAC,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,uCAAK,SAAS,EAAE,gCAAC,CAAC,YAAY;QAC3B,KAAK,IAAI,CACR,0CACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,gCAAC,CAAC,oBAAoB,EACjC,OAAO,EAAE,YAAY;YAErB,uCAAK,SAAS,EAAE,gCAAC,CAAC,2BAA2B,IAAG,KAAK,CAAO;YAC5D,uCAAK,SAAS,EAAE,gCAAC,CAAC,6BAA6B,IAC5C,IAAI,CAAC,CAAC,CAAC,8BAAC,qBAAa,OAAG,CAAC,CAAC,CAAC,8BAAC,mBAAW,OAAG,CACvC,CACC,CACV;QACA,IAAI,IAAI,CACP,uCACE,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAC,CAAC,qBAAqB;gBAC3C,GAAC,gCAAC,CAAC,mCAAmC,CAAC,IAAG,SAAS;oBACnD,IAED,QAAQ,CACL,CACP,CACG,CACP,CAAC;AACJ,CAAC;AArCD,oCAqCC"}