datocms-react-ui 2.1.4 → 2.2.0-alpha.1

package/dist/esm/Canvas/index.js

@@ -12,283 +12,186 @@ 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
- * CSS variables, allowing you to conform to the theme of the current
- * environment:
+ * Inside `Canvas`, the host exposes a full semantic color palette as CSS
+ * custom properties. Components should reference these tokens directly —
+ * they adapt to the user's active theme (including dark mode)
+ * automatically.
+ *
+ * ### How to read a token name
+ *
+ * ```
+ * --color--{property}                 // standalone (one -- after color)
+ * --color--{context}--{property}      // context pair (two -- after color)
+ * ```
+ *
+ * **Properties** — `surface` (backgrounds), `ink` (text/icons),
+ * `border` (1px lines), `outline` (focus rings), plus `fill` / `track`
+ * for progress bars.
+ *
+ * **Standalone** tokens work on any neutral page. **Contexts** are
+ * self-contained environments: always pair a `surface` with the `ink`,
+ * `border`, and hover states from the *same* context. Never mix — e.g.
+ * don't put `--color--primary--ink` on `--color--danger--surface`.
+ *
+ * Non-color tokens `--shadow--raised` / `--shadow--floating` /
+ * `--shadow--lifted` / `--shadow--ambient` are ready-made `box-shadow`
+ * composites.
  *
  * ```js
  * <Canvas ctx={ctx}>
- *   <Section title="Text colors">
- *     <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>
+ *   <Section title="Standalone — use on any neutral page">
+ *     <table><tbody>
+ *       {[
+ *         ['--color--surface',          'Default page background'],
+ *         ['--color--surface-hover',    'Hovered row / list item'],
+ *         ['--color--surface-muted',    'Muted section / card background'],
+ *         ['--color--ink',              'Primary text'],
+ *         ['--color--ink-subtle',       'Secondary text / captions'],
+ *         ['--color--ink-hover',        'Text under hover'],
+ *         ['--color--ink-muted',        'De-emphasized text'],
+ *         ['--color--ink-placeholder',  'Input placeholder text'],
+ *         ['--color--ink-primary',      'Brand-highlighted text / icons'],
+ *         ['--color--ink-accent',       'Links / accent text'],
+ *         ['--color--ink-disabled',     'Disabled text'],
+ *         ['--color--border',           'Default 1px border'],
+ *         ['--color--border-hover',     'Border under hover'],
+ *       ].map(([t, d]) => (
+ *         <tr key={t}>
+ *           <td><code>{t}</code></td>
+ *           <td style={{ color: 'var(--color--ink-subtle)' }}>{d}</td>
+ *           <td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></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>
- *       </tbody>
- *     </table>
+ *       ))}
+ *     </tbody></table>
  *   </Section>
- *   <Section title="UI colors">
- *     <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>
- *       </tbody>
- *     </table>
+ *
+ *   <Section title="Context: raised — modals, dropdowns, popovers">
+ *     <table><tbody>
+ *       {['--color--raised--surface', '--color--raised--surface-hover', '--color--raised--surface-active']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
  *   </Section>
- *   <Section title="Project-specific colors">
- *     <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>
- *       </tbody>
- *     </table>
+ *
+ *   <Section title="Context: primary — main call-to-action buttons, badges, nav">
+ *     <table><tbody>
+ *       {['--color--primary--surface', '--color--primary--surface-hover', '--color--primary--surface-active', '--color--primary--surface-muted', '--color--primary--ink', '--color--primary--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: tinted — subtle brand-tinted surfaces">
+ *     <table><tbody>
+ *       {['--color--tinted--surface', '--color--tinted--surface-hover', '--color--tinted--surface-active', '--color--tinted--ink', '--color--tinted--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: accent, selected, disabled, danger">
+ *     <table><tbody>
+ *       {['--color--accent--surface', '--color--accent--ink',
+ *         '--color--selected--surface', '--color--selected--ink', '--color--selected--border',
+ *         '--color--disabled--surface', '--color--disabled--ink',
+ *         '--color--danger--surface', '--color--danger--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: focus — focus rings and outlines">
+ *     <table><tbody>
+ *       {['--color--focus--border', '--color--focus--outline']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Feedback — validation and form states">
+ *     <table><tbody>
+ *       {['--color--feedback-fail--ink', '--color--feedback-fail--border', '--color--feedback-fail--outline', '--color--feedback-fail--surface',
+ *         '--color--feedback-warning--ink', '--color--feedback-warning--border', '--color--feedback-warning--outline', '--color--feedback-warning--surface',
+ *         '--color--feedback-success--ink', '--color--feedback-success--border', '--color--feedback-success--outline', '--color--feedback-success--surface']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Context: highlight — rich text inline highlights">
+ *     <table><tbody>
+ *       {['--color--highlight--surface']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Diffs — content versioning (added / removed / changed)">
+ *     <table><tbody>
+ *       {['--color--diff-added--surface', '--color--diff-added--outline', '--color--diff-added--ink', '--color--diff-added--ink-subtle',
+ *         '--color--diff-removed--surface', '--color--diff-removed--outline', '--color--diff-removed--ink', '--color--diff-removed--ink-subtle',
+ *         '--color--diff-changed--surface', '--color--diff-changed--outline']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Status — publishing workflow badges (ink-only)">
+ *     <table><tbody>
+ *       {['--color--status-draft--ink', '--color--status-outdated--ink', '--color--status-published--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td><span style={{ color: `var(${t})`, fontWeight: 'bold' }}>Sample text</span></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Backdrop & overlay — scrims and floating UI">
+ *     <table><tbody>
+ *       {['--color--backdrop--surface', '--color--backdrop--ink',
+ *         '--color--overlay--surface', '--color--overlay--surface-hover', '--color--overlay--surface-active', '--color--overlay--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Stacked — dark layered UI (uploaders, media players)">
+ *     <p>Stacked gives you layered dark surfaces (base → upper) plus action buttons, borders and ink tones. Use it when a dark inline panel needs internal hierarchy.</p>
+ *     <table><tbody>
+ *       {['--color--stacked--surface', '--color--stacked--surface-upper',
+ *         '--color--stacked--surface-action', '--color--stacked--surface-action-hover', '--color--stacked--surface-action-active',
+ *         '--color--stacked--ink', '--color--stacked--ink-subtle', '--color--stacked--border']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Progress — bar track and fill">
+ *     <table><tbody>
+ *       {['--color--progress--track', '--color--progress--fill', '--color--progress--fill-hover']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Tooltip — small dark floating labels">
+ *     <table><tbody>
+ *       {['--color--tooltip--surface', '--color--tooltip--surface-hover', '--color--tooltip--ink', '--color--tooltip--ink-subtle']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Code — dark code blocks, logs, error traces">
+ *     <table><tbody>
+ *       {['--color--code--surface', '--color--code--ink']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Scrollbar">
+ *     <table><tbody>
+ *       {['--color--scrollbar--fill']
+ *         .map((t) => (<tr key={t}><td><code>{t}</code></td><td width="40"><div style={{ width: '30px', height: '30px', background: `var(${t})`, border: '1px solid var(--color--border)' }} /></td></tr>))}
+ *     </tbody></table>
+ *   </Section>
+ *
+ *   <Section title="Shadow composites — drop-in box-shadow values">
+ *     <div style={{ display: 'flex', gap: 'var(--spacing-l)', padding: 'var(--spacing-l)' }}>
+ *       {['--shadow--raised', '--shadow--floating', '--shadow--lifted', '--shadow--ambient'].map((t) => (
+ *         <div key={t} style={{ textAlign: 'center' }}>
+ *           <div style={{ width: '80px', height: '80px', background: 'var(--color--surface)', borderRadius: '4px', boxShadow: `var(${t})` }} />
+ *           <code style={{ display: 'block', marginTop: 'var(--spacing-s)', fontSize: 'var(--font-size-xs)' }}>{t}</code>
+ *         </div>
+ *       ))}
+ *     </div>
  *   </Section>
  * </Canvas>;
  * ```
@@ -421,7 +324,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 +338,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 +352,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 +366,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 +380,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 +394,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0YG;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_2dr1w_1", "canvas": "_canvas_2dr1w_70" }
+{ "themeVariables": "_themeVariables_1evrh_1", "canvas": "_canvas_1evrh_85" }

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_1bzh8_1", "Dropdown__spacer": "_Dropdown__spacer_1bzh8_5", "Dropdown__menu__search": "_Dropdown__menu__search_1bzh8_11", "Dropdown__menu__search__input": "_Dropdown__menu__search__input_1bzh8_16", "Dropdown__menu-container": "_Dropdown__menu-container_1bzh8_47", "Dropdown__menu": "_Dropdown__menu_1bzh8_11", "Dropdown__menu__inner": "_Dropdown__menu__inner_1bzh8_63", "Dropdown__menu__group__title": "_Dropdown__menu__group__title_1bzh8_67", "Dropdown__menu__group__content": "_Dropdown__menu__group__content_1bzh8_75", "Dropdown__menu__text": "_Dropdown__menu__text_1bzh8_79", "Dropdown__menu__option": "_Dropdown__menu__option_1bzh8_88", "Dropdown__menu__option--is-selected": "_Dropdown__menu__option--is-selected_1bzh8_110", "Dropdown__menu__option--is-disabled": "_Dropdown__menu__option--is-disabled_1bzh8_114", "Dropdown__menu__option__content": "_Dropdown__menu__option__content_1bzh8_117", "Dropdown__menu__option--is-dangerous": "_Dropdown__menu__option--is-dangerous_1bzh8_122", "Dropdown__menu__option--is-active": "_Dropdown__menu__option--is-active_1bzh8_140", "Dropdown__menu__option--is-valid": "_Dropdown__menu__option--is-valid_1bzh8_149", "Dropdown__menu__option--is-invalid": "_Dropdown__menu__option--is-invalid_1bzh8_153", "Dropdown__menu__option__icons": "_Dropdown__menu__option__icons_1bzh8_196", "Dropdown__menu__option__icon": "_Dropdown__menu__option__icon_1bzh8_196", "Dropdown__menu__option__icon--delete": "_Dropdown__menu__option__icon--delete_1bzh8_243", "Dropdown__menu__separator": "_Dropdown__menu__separator_1bzh8_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" }