npm - @workday/canvas-kit-react - Versions diffs - 16.0.0-alpha.0499-next.0 → 16.0.0 - Mend

@workday/canvas-kit-react 16.0.0-alpha.0499-next.0 → 16.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (325) hide show

package/dist/commonjs/common/lib/theming/sanaTheme.js ADDED Viewed

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme = void 0;
+/**
+ * Sana Canvas theme presets.
+ *
+ * Sana is a distinct theme from classic Canvas — not a delta on `defaultCanvasTheme`.
+ * Full visual treatment (fonts, shapes, system surfaces) comes from global CSS:
+ * import `@workday/canvas-tokens-web/css/sana/_variables.css` and set
+ * `data-theme="sana-canvas"` on `<html>`.
+ *
+ * These JS presets reference Sana brand CSS variables so `CanvasProvider` can forward
+ * them to popup containers (menus, selects, modals). Keep in sync with
+ * `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ *
+ * | Preset | Use case |
+ * |--------|----------|
+ * | `sanaCanvasNumericalTheme` | Numerical `brand` shape for popup forwarding |
+ * | `sanaCanvasProviderTheme` | Same — pass to root `CanvasProvider` when `<html>` is unavailable |
+ */
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+/** Reference a canvas-tokens CSS variable (resolves under `[data-theme="sana-canvas"]`). */
+const varRef = (token) => `var(${token})`;
+/**
+ * Sana extends the neutral ramp with steps not yet exported from canvas-tokens-web JS.
+ * Defined in `@workday/canvas-tokens-web/css/sana/_variables.css`.
+ */
+const sanaBrandNeutral = {
+    '150': '--cnvs-brand-neutral-150',
+    '850': '--cnvs-brand-neutral-850',
+    A150: '--cnvs-brand-neutral-a150',
+};
+/**
+ * Sana Canvas brand tokens for scoped `CanvasProvider` / popup forwarding.
+ * Values are `var()` references to Sana brand variables — not merged from `defaultCanvasTheme`.
+ */
+exports.sanaCanvasNumericalTheme = {
+    // Explicit brand vars only — multi-key ramps write 1:1; no system shortcut bundles run.
+    themeScope: 'brand',
+    brand: {
+        action: {
+            base: varRef(canvas_tokens_web_1.brand.neutral975),
+            dark: varRef(canvas_tokens_web_1.brand.neutral950),
+            darkest: varRef(canvas_tokens_web_1.brand.neutral900),
+            accent: varRef(canvas_tokens_web_1.base.neutral0),
+            lightest: varRef(canvas_tokens_web_1.brand.neutral25),
+            lighter: varRef(canvas_tokens_web_1.brand.neutral50),
+            light: varRef(canvas_tokens_web_1.brand.neutral200),
+        },
+        neutral: {
+            '25': varRef(canvas_tokens_web_1.brand.neutral25),
+            '50': varRef(canvas_tokens_web_1.brand.neutral50),
+            '100': varRef(canvas_tokens_web_1.brand.neutral100),
+            '150': varRef(sanaBrandNeutral['150']),
+            '200': varRef(canvas_tokens_web_1.brand.neutral200),
+            '300': varRef(canvas_tokens_web_1.brand.neutral300),
+            '400': varRef(canvas_tokens_web_1.brand.neutral400),
+            '500': varRef(canvas_tokens_web_1.brand.neutral500),
+            '600': varRef(canvas_tokens_web_1.brand.neutral600),
+            '700': varRef(canvas_tokens_web_1.brand.neutral700),
+            '800': varRef(canvas_tokens_web_1.brand.neutral800),
+            '850': varRef(sanaBrandNeutral['850']),
+            '900': varRef(canvas_tokens_web_1.brand.neutral900),
+            '950': varRef(canvas_tokens_web_1.brand.neutral950),
+            '975': varRef(canvas_tokens_web_1.brand.neutral975),
+            A25: varRef(canvas_tokens_web_1.brand.neutralA25),
+            A50: varRef(canvas_tokens_web_1.brand.neutralA50),
+            A100: varRef(canvas_tokens_web_1.brand.neutralA100),
+            A150: varRef(sanaBrandNeutral.A150),
+            A200: varRef(canvas_tokens_web_1.brand.neutralA200),
+        },
+        primary: {
+            '500': varRef(canvas_tokens_web_1.brand.primary500),
+            '600': varRef(canvas_tokens_web_1.brand.primary600),
+            '700': varRef(canvas_tokens_web_1.brand.primary700),
+            A25: varRef(canvas_tokens_web_1.brand.primaryA25),
+            A50: varRef(canvas_tokens_web_1.brand.primaryA50),
+            A100: varRef(canvas_tokens_web_1.brand.primaryA100),
+        },
+        critical: {
+            '500': varRef(canvas_tokens_web_1.brand.critical500),
+            '600': varRef(canvas_tokens_web_1.brand.critical600),
+            '700': varRef(canvas_tokens_web_1.brand.critical700),
+            A25: varRef(canvas_tokens_web_1.brand.criticalA25),
+            A50: varRef(canvas_tokens_web_1.brand.criticalA50),
+        },
+        caution: {
+            '400': varRef(canvas_tokens_web_1.brand.caution400),
+            '500': varRef(canvas_tokens_web_1.brand.caution500),
+            A25: varRef(canvas_tokens_web_1.brand.cautionA25),
+            A50: varRef(canvas_tokens_web_1.brand.cautionA50),
+        },
+        positive: {
+            '600': varRef(canvas_tokens_web_1.brand.positive600),
+            '800': varRef(canvas_tokens_web_1.brand.positive800),
+            A25: varRef(canvas_tokens_web_1.brand.positiveA25),
+            A50: varRef(canvas_tokens_web_1.brand.positiveA50),
+        },
+    },
+    selected: {
+        fg: varRef(canvas_tokens_web_1.brand.neutralA900),
+        surface: varRef(canvas_tokens_web_1.brand.neutralA100),
+    },
+};
+/**
+ * Pass to root `CanvasProvider` to forward Sana brand CSS variables onto popup containers
+ * (menus, selects, modals, tooltips).
+ *
+ * **When to use it**
+ * - **Required** when you cannot set `data-theme="sana-canvas"` on `<html>` (embedded apps,
+ *   microfrontends, third-party shells). Popups portal to `document.body` and will not inherit
+ *   a nested `data-theme` — this preset copies Sana brand vars onto the popup stack container.
+ * - Also useful in tests without global Sana CSS, or custom popup hosts outside normal cascade.
+ *
+ * **When you can skip it**
+ * - Prefer setting `data-theme="sana-canvas"` on `<html>` with Sana CSS imported. Popups then
+ *   inherit brand variables from the document and no `theme` prop is needed.
+ *
+ * @example
+ * ```tsx
+ * // Preferred — control <html>
+ * import '@workday/canvas-tokens-web/css/sana/_variables.css';
+ * // <html data-theme="sana-canvas">
+ * <CanvasProvider><App /></CanvasProvider>
+ *
+ * // No access to <html> — required for popup parity
+ * <CanvasProvider theme={sanaCanvasProviderTheme}><App /></CanvasProvider>
+ * ```
+ */
+exports.sanaCanvasProviderTheme = exports.sanaCanvasNumericalTheme;

package/dist/commonjs/common/lib/theming/types.d.ts CHANGED Viewed

@@ -273,5 +273,167 @@ declare module '@emotion/react' {
 export type EmotionCanvasTheme = {
     canvas: CanvasTheme;
 };
+/**
+ * Numerical brand ramp keys. Each key maps 1:1 to a `--cnvs-brand-{family}-{key}` CSS variable.
+ *
+ * Common keys:
+ * - `'600'` — main accent / button fill / default brand fg
+ * - `'700'` — strong fg / selected text (when not using `selected.fg`)
+ * - `'500'` — focus rings and border primary (independent of `'600'`)
+ * - `'A50'` — selected surface tint (when not using `selected.surface`)
+ * - `'25'` / `'A25'` — subtle brand surfaces
+ *
+ * Neutral-only Sana steps (`'150'`, `'850'`, `'A150'`) live on {@link CanvasNeutralBrandRamp}.
+ */
+export type CanvasBrandRamp = Partial<Record<'25' | '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | '975' | 'A25' | 'A50' | 'A100' | 'A200', string>>;
+/**
+ * Neutral brand ramp — includes Sana-only steps (`150` / `850` / `A150`) that are not
+ * exported for primary/critical/caution/positive families.
+ */
+export type CanvasNeutralBrandRamp = CanvasBrandRamp & Partial<Record<'150' | '850' | 'A150', string>>;
+/** Semantic keys for `brand.action.*` CSS variables (PrimaryButton, etc.). */
+export type CanvasActionBrandRamp = Partial<Record<'base' | 'lightest' | 'lighter' | 'light' | 'dark' | 'darkest' | 'darker' | 'accent', string>>;
+/**
+ * Controls how partial theme input is expanded.
+ *
+ * - `'brand'` (default): predictable, design-aligned behavior. Setting only
+ *   `brand.primary['600']` themes PrimaryButton and selected list/menu
+ *   states. Other keys write only their CSS variable — no auto-generated ramps.
+ * - `'full'`: legacy behavior for the deprecated `canvas.palette` shape — auto-fills
+ *   lightest→darkest via `shiftColor` and forwards to many `system.color.brand.*`
+ *   tokens. On the numerical `brand` shape, `'full'` disables the primary shortcut
+ *   and writes each ramp key literally.
+ */
+export type CanvasThemingScope = 'brand' | 'full';
+/**
+ * Preferred theme input for `CanvasProvider`. Each value maps directly to brand CSS
+ * variables unless noted as a shortcut below.
+ *
+ * @example Minimal — brand buttons + selected states only
+ * ```tsx
+ * <CanvasProvider theme={{brand: {primary: {'600': base.magenta600}}}} />
+ * ```
+ *
+ * @example Explicit — focus independent of primary
+ * ```tsx
+ * <CanvasProvider theme={{
+ *   brand: {primary: {'600': base.red600, '500': base.blue500}},
+ *   selected: {fg: base.red700, surface: base.redA50},
+ * }} />
+ * ```
+ *
+ * @see sanaCanvasProviderTheme when `<html>` is unavailable and popups need Sana brand forwarding
+ */
+export interface CanvasNumericalBrandTheme {
+    brand?: {
+        /**
+         * Primary brand ramp (`--cnvs-brand-primary-*`).
+         *
+         * **Shortcut (brand scope only):** when `'600'` is the only key under `primary`,
+         * also sets:
+         * - `PrimaryButton` — `brand.action.base`, `accent.primary`, `accent.action`
+         * - Selected `Menu.Item` — `system.color.brand.fg.selected`, `surface.selected`
+         *
+         * Does **not** set focus rings — use `'500'` or `canvas.palette.common.focusOutline`.
+         *
+         * | Key | CSS variable | Typical consumers |
+         * |-----|--------------|-------------------|
+         * | `'600'` | `--cnvs-brand-primary-600` | PrimaryButton, brand links, accent.primary |
+         * | `'700'` | `--cnvs-brand-primary-700` | Strong primary fg, selected text |
+         * | `'500'` | `--cnvs-brand-primary-500` | Focus rings, border primary |
+         * | `'A50'` | `--cnvs-brand-primary-A50` | Selected/hover surfaces |
+         */
+        primary?: CanvasBrandRamp;
+        /**
+         * Button-specific ramp (`--cnvs-brand-action-*`). PrimaryButton reads
+         * these **before** `brand.primary`.
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `base` | PrimaryButton background |
+         * | `dark` / `darkest` | PrimaryButton hover / pressed |
+         * | `accent` | PrimaryButton label color |
+         */
+        action?: CanvasActionBrandRamp;
+        /**
+         * Critical/error ramp (`--cnvs-brand-critical-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | TextInput error, DeleteButton, critical fg |
+         * | `'500'` | Critical focus ring, error border |
+         * | `'A25'` / `'A50'` | Error surface tints |
+         */
+        critical?: CanvasBrandRamp;
+        /**
+         * Caution/warning ramp (`--cnvs-brand-caution-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'400'` | Caution accent, TextInput caution |
+         * | `'500'` | Caution focus outer, caution border |
+         * | `'A25'` / `'A50'` | Caution surface tints |
+         */
+        caution?: CanvasBrandRamp;
+        /**
+         * Positive/success ramp (`--cnvs-brand-positive-*`).
+         *
+         * | Key | Typical consumers |
+         * |-----|-------------------|
+         * | `'600'` | Checkbox/Radio checked, success fg |
+         * | `'A25'` / `'A50'` | Success surface tints |
+         */
+        positive?: CanvasBrandRamp;
+        /**
+         * Neutral brand ramp (`--cnvs-brand-neutral-*`). Sana Canvas uses `base.neutral*`
+         * instead of legacy `base.slate*` — see {@link sanaCanvasNumericalTheme}.
+         *
+         * Affects brand-neutral text, borders, and surfaces where components reference
+         * `brand.neutral.*` or `system.color.brand` tokens tied to neutral.
+         */
+        neutral?: CanvasNeutralBrandRamp;
+    };
+    /**
+     * Selected-state shortcuts. Prefer these over indirect `brand.primary['700']` /
+     * `brand.primary.A50` when customizing list/menu selection.
+     *
+     * | Key | CSS variable | Typical consumers |
+     * |-----|--------------|-------------------|
+     * | `fg` | `--cnvs-sys-color-brand-fg-selected` | Menu.Item, SegmentedControl selected text |
+     * | `surface` | `--cnvs-sys-color-brand-surface-selected` | Menu.Item, list selected background |
+     */
+    selected?: {
+        /** Selected text/icon color */
+        fg?: string;
+        /** Selected row/chip background */
+        surface?: string;
+    };
+    /**
+     * Escape hatch for `system.color.brand.*` tokens not covered by `brand` ramps.
+     * Keys mirror the token path, e.g. `{color: {brand: {focus: {primary: '#00f'}}}}`.
+     */
+    system?: {
+        color?: {
+            brand?: Record<string, unknown>;
+        };
+    };
+    /** Text direction for the provider subtree. */
+    direction?: ContentDirection;
+    /**
+     * @default 'brand'
+     * @see CanvasThemingScope
+     */
+    themeScope?: CanvasThemingScope;
+}
+/**
+ * Theme input accepted by {@link CanvasProvider}.
+ * - Numerical `brand` shape (preferred)
+ * - Deprecated `canvas.palette` shape (legacy)
+ */
+export type CanvasProviderTheme = (PartialEmotionCanvasTheme & {
+    themeScope?: CanvasThemingScope;
+}) | CanvasNumericalBrandTheme;
+export declare function isNumericalTheme(theme: CanvasProviderTheme | undefined): theme is CanvasNumericalBrandTheme;
+export declare function resolveThemingScope(theme: CanvasProviderTheme | undefined): CanvasThemingScope;
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/commonjs/common/lib/theming/types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;;GAGG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;GAGG;AACH,KAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAE7E,MAAM,MAAM,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AAEtE,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,MAAM,EAAE,WAAW,CAAC;KACrB;CACF;AAED;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
1	+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"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"}

package/dist/commonjs/common/lib/theming/types.js CHANGED Viewed

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentDirection = void 0;
+exports.resolveThemingScope = exports.isNumericalTheme = exports.ContentDirection = void 0;
 /**
  * Direction of page content for internationalization
  * @deprecated ⚠️ `ContentDirection` is deprecated. Use the `:dir()` CSS pseudo-class selector and CSS logical properties instead. For more information, see [MDN :dir()](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) and [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
@@ -10,3 +10,83 @@ var ContentDirection;
     ContentDirection["LTR"] = "ltr";
     ContentDirection["RTL"] = "rtl";
 })(ContentDirection = exports.ContentDirection || (exports.ContentDirection = {}));
+function isNumericalTheme(theme) {
+    if (!theme) {
+        return false;
+    }
+    if ('canvas' in theme) {
+        return false;
+    }
+    // `direction` / `themeScope` alone are valid numerical themes (e.g. RTL-only).
+    return ('brand' in theme ||
+        'system' in theme ||
+        'selected' in theme ||
+        'direction' in theme ||
+        'themeScope' in theme);
+}
+exports.isNumericalTheme = isNumericalTheme;
+const EXTENDED_RAMP_KEYS = new Set([
+    '25',
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+    '975',
+    'A25',
+    'A50',
+    'A100',
+    'A200',
+    'lightest',
+    'lighter',
+    'light',
+    'main',
+    'dark',
+    'darkest',
+    'contrast',
+]);
+function resolveThemingScope(theme) {
+    var _a, _b;
+    if (!theme) {
+        return 'brand';
+    }
+    if (theme.themeScope) {
+        return theme.themeScope;
+    }
+    if (isNumericalTheme(theme)) {
+        return (_a = theme.themeScope) !== null && _a !== void 0 ? _a : 'brand';
+    }
+    const palette = (_b = theme.canvas) === null || _b === void 0 ? void 0 : _b.palette;
+    if (!palette) {
+        return 'brand';
+    }
+    if (palette.common && Object.keys(palette.common).length > 0) {
+        const commonOnlyFocus = Object.keys(palette.common).length === 1 && palette.common.focusOutline != null;
+        if (!commonOnlyFocus) {
+            return 'full';
+        }
+    }
+    for (const color of ['primary', 'error', 'alert', 'success', 'neutral']) {
+        const colorPalette = palette[color];
+        if (!colorPalette) {
+            continue;
+        }
+        for (const key of Object.keys(colorPalette)) {
+            // `main` alone uses brand-scope bundles for every semantic palette color.
+            if (key === 'main') {
+                continue;
+            }
+            if (EXTENDED_RAMP_KEYS.has(key)) {
+                return 'full';
+            }
+        }
+    }
+    return 'brand';
+}
+exports.resolveThemingScope = resolveThemingScope;

package/dist/commonjs/expandable/lib/Expandable.js CHANGED Viewed

@@ -13,7 +13,7 @@ const ExpandableTarget_1 = require("./ExpandableTarget");
 const ExpandableTitle_1 = require("./ExpandableTitle");
 const useExpandableModel_1 = require("./hooks/useExpandableModel");
 exports.expandableContainerStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "2hlhul", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "3yia40", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-container-f664d5");
 /**
  * `Expandable` wraps an `Expandable.Target` and an `Expandable.Content`. By default, it provides a

package/dist/commonjs/expandable/lib/ExpandableAvatar.js CHANGED Viewed

@@ -8,7 +8,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 exports.expandableAvatarStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: avatar_1.avatarStencil,
-    base: { name: "1s2lbn", styles: "box-sizing:border-box;flex-shrink:0;" }
+    base: { name: "2yzn5j", styles: "box-sizing:border-box;flex-shrink:0;" }
 }, "expandable-avatar-65308e");
 // When the component is created, it needs to be a button element to match AvatarProps.
 // Once Avatar becomes a `createComponent` we can default the element type to a `div`

package/dist/commonjs/expandable/lib/ExpandableContent.js CHANGED Viewed

@@ -9,7 +9,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const useExpandableContent_1 = require("./hooks/useExpandableContent");
 const useExpandableModel_1 = require("./hooks/useExpandableModel");
 exports.expandableContentStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "ziml1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "14v9g1", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "expandable-content-25e157");
 exports.ExpandableContent = (0, common_1.createSubcomponent)('div')({
     modelHook: useExpandableModel_1.useExpandableModel,

package/dist/commonjs/expandable/lib/ExpandableIcon.js CHANGED Viewed

@@ -12,34 +12,34 @@ const useExpandableIcon_1 = require("./hooks/useExpandableIcon");
 const useExpandableModel_1 = require("./hooks/useExpandableModel");
 exports.expandableIconStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: icon_1.systemIconStencil,
-    base: { name: "3wzc6o", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
+    base: { name: "23htqs", styles: "box-sizing:border-box;padding:var(--cnvs-sys-padding-xxs, var(--cnvs-sys-space-x1, 0.25rem));--color-system-icon-c9acc3:var(--cnvs-sys-color-fg-default);--size-svg-bca693:var(--cnvs-component-system-icon-size-md, var(--cnvs-sys-space-x5, 1.25rem));" },
     modifiers: {
         isExpanded: {
-            true: { name: "1yxxbw", styles: "" },
-            false: { name: "3mmgjd", styles: "" }
+            true: { name: "2324ww", styles: "" },
+            false: { name: "38lxsb", styles: "" }
         },
         position: {
-            start: { name: "38glk6", styles: "" },
-            end: { name: "2550f5", styles: "" },
-            only: { name: "1kt48r", styles: "" }
+            start: { name: "35ppft", styles: "" },
+            end: { name: "45s3pz", styles: "" },
+            only: { name: "3f81ys", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { position: 'end', isExpanded: false },
-            styles: { name: "2728bp", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "24pnc9", styles: "margin-inline-start:auto;transform:rotate(180deg);padding-inline-end:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'end', isExpanded: true },
-            styles: { name: "17vqrt", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
+            styles: { name: "4dbcj4", styles: "margin-inline-start:auto;padding-inline-start:var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));" }
         },
         {
             modifiers: { position: 'start', isExpanded: false },
-            styles: { name: "1u7vqi", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
+            styles: { name: "3evgi4", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(90deg);:dir(rtl){transform:rotate(-90deg);}" }
         },
         {
             modifiers: { position: 'start', isExpanded: true },
-            styles: { name: "10h5l5", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
+            styles: { name: "549og", styles: "margin-inline-end:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));transform:rotate(180deg);" }
         }
     ]
 }, "expandable-icon-af0853");

package/dist/commonjs/expandable/lib/ExpandableTarget.js CHANGED Viewed

@@ -11,7 +11,7 @@ const useExpandableModel_1 = require("./hooks/useExpandableModel");
 const useExpandableTarget_1 = require("./hooks/useExpandableTarget");
 exports.expandableTargetStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "g4p5q", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
+    base: { name: "30nzun", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));border-color:var(--cnvs-sys-color-border-transparent);--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);border-width:0;display:flex;align-items:center;flex-direction:row;gap:var(--cnvs-sys-gap-none, var(--cnvs-sys-space-zero, 0));justify-content:start;padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));cursor:pointer;width:100%;&:hover, &.hover{background-color:var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));}&:focus-visible, &.focus{outline:0.125rem solid var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));}" }
 }, "expandable-target-6f2998");
 exports.ExpandableTarget = (0, common_1.createSubcomponent)('button')({
     modelHook: useExpandableModel_1.useExpandableModel,

package/dist/commonjs/expandable/lib/ExpandableTitle.js CHANGED Viewed

@@ -7,7 +7,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.expandableTitleStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "125f4n", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
+    base: { name: "2el8zc", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);line-height:var(--cnvs-sys-line-height-body-md, var(--cnvs-sys-line-height-body-medium, 1.75rem));font-size:var(--cnvs-sys-font-size-body-md, var(--cnvs-sys-font-size-body-medium, 1.125rem));font-weight:var(--cnvs-sys-font-weight-bold);color:var(--cnvs-sys-color-fg-strong);padding:0.125rem var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));text-align:left;" }
 }, "expandable-title-afdcf8");
 exports.ExpandableTitle = (0, common_1.createComponent)('div')({
     displayName: 'Expandable.Title',

package/dist/commonjs/form-field/lib/FormFieldField.js CHANGED Viewed

@@ -7,7 +7,7 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "1ee6lj", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
+    base: { name: "38mzgs", styles: "box-sizing:border-box;display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));" }
 }, "form-field-field-a35e82");
 exports.FormFieldField = (0, common_1.createSubcomponent)('div')({
     displayName: 'FormField.Field',

package/dist/commonjs/form-field/lib/FormFieldGroupLabel.js CHANGED Viewed

@@ -10,15 +10,15 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldGroupLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "3fwbgv", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "5ra1j", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "43fnsd", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
+            true: { name: "3jf22", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            vertical: { name: "1bjsjc", styles: "width:100%;" },
-            horizontalStart: { name: "2cfrts", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
-            horizontalEnd: { name: "3ljyyr", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
+            vertical: { name: "n18tj", styles: "width:100%;" },
+            horizontalStart: { name: "34cxut", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "3t0dd", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/form-field/lib/FormFieldGroupList.js CHANGED Viewed

@@ -8,11 +8,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 const formFieldGroupListStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: common_1.cornerShapeStencil,
-    base: { name: "2cximx", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "17t6m4", styles: "box-sizing:border-box;--shape-corner-shape-ccab68:var(--cnvs-sys-shape-lg, 0.75rem);display:flex;flex-direction:column;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));padding:var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));margin:0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "1vczz2", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
-            caution: { name: "c3dzf", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
+            error: { name: "157r8l", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" },
+            caution: { name: "328ecw", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1))), inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));@media (forced-colors: active){outline:solid 0.125rem ButtonBorder;}" }
         }
     }
 }, "form-field-group-list-284850");

package/dist/commonjs/form-field/lib/FormFieldHint.js CHANGED Viewed

@@ -10,11 +10,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldHintStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "3tzhfi", styles: "box-sizing:border-box;margin:0;" },
+    base: { name: "23p41k", styles: "box-sizing:border-box;margin:0;" },
     modifiers: {
         error: {
-            error: { name: "xrqpm", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
-            caution: { name: "1vb78p", styles: "color:var(--cnvs-sys-color-fg-default);" }
+            error: { name: "p0xde", styles: "color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));" },
+            caution: { name: "3176zr", styles: "color:var(--cnvs-sys-color-fg-default);" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/form-field/lib/FormFieldLabel.js CHANGED Viewed

@@ -10,18 +10,18 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const hooks_1 = require("./hooks");
 exports.formFieldLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "2mv0hb", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
+    base: { name: "3b3bt6", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-medium);color:var(--cnvs-sys-color-fg-default);padding-inline-start:0;display:flex;align-items:center;min-width:11.25rem;" },
     modifiers: {
         isRequired: {
-            true: { name: "1mxbck", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
+            true: { name: "1ptdsa", styles: "&::after{content:\"*\";font-size:var(--cnvs-sys-font-size-body-lg, var(--cnvs-sys-font-size-body-large, 1.25rem));font-weight:var(--cnvs-sys-font-weight-normal);color:var(--cnvs-sys-color-brand-fg-critical-default, var(--cnvs-brand-error-base, oklch(0.5342 0.2172 29.53 / 1)));text-decoration:unset;margin-inline-start:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));}" }
         },
         orientation: {
-            horizontalStart: { name: "rgvio", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
-            horizontalEnd: { name: "3jdfmq", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
-            vertical: { name: "1r9qp7", styles: "width:100%;" }
+            horizontalStart: { name: "3iuynw", styles: "justify-content:flex-start;float:left;max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));" },
+            horizontalEnd: { name: "q6spo", styles: "max-height:var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));float:left;justify-content:flex-end;" },
+            vertical: { name: "10n3qr", styles: "width:100%;" }
         },
         isHidden: {
-            true: { name: "214gyp", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
+            true: { name: "39bjqr", styles: "clip:rect(1px, 1px, 1px, 1px);clip-path:polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);position:absolute;overflow:hidden;white-space:nowrap;height:1px;min-height:1px;width:1px;min-width:1px;margin:-1px;padding:0;border:0;" }
         }
     },
     defaultModifiers: {

package/dist/commonjs/form-field/lib/formFieldStencil.js CHANGED Viewed

@@ -4,22 +4,22 @@ exports.formFieldStencil = void 0;
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.formFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "4a1siw", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
+    base: { name: "3oiclz", styles: "box-sizing:border-box;display:flex;border:none;padding:0;margin:0 0 var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));" },
     modifiers: {
         grow: {
-            true: { name: "cjr7o", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
+            true: { name: "21vc1o", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}&:has(div[data-width=\"ck-formfield-width\"]){width:100%;}" }
         },
         orientation: {
-            horizontalStart: { name: "40fb4d", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
-            horizontalEnd: { name: "13xk3", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
-            vertical: { name: "6b3ah", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
+            horizontalStart: { name: "3aiud9", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            horizontalEnd: { name: "2pea3k", styles: "flex-direction:row;gap:var(--cnvs-sys-gap-xl, var(--cnvs-sys-space-x8, 2rem));width:100%;" },
+            vertical: { name: "6d9iq", styles: "flex-direction:column;gap:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));align-items:flex-start;" }
         },
         required: {
-            true: { name: "lo8zk", styles: "" }
+            true: { name: "2ayn7", styles: "" }
         },
         error: {
-            error: { name: "1j8oji", styles: "" },
-            caution: { name: "46dyt2", styles: "" }
+            error: { name: "26rze9", styles: "" },
+            caution: { name: "40trbh", styles: "" }
         }
     },
     defaultModifiers: {