@workday/canvas-kit-preview-react 14.0.0-alpha.1206-next.0 → 14.0.0-alpha.1210-next.0

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -34,35 +34,35 @@ const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 exports.sidePanelToggleButtonStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "86e5b", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
+    base: { name: "2l5puv", styles: "box-sizing:border-box;position:absolute;top:var(--cnvs-sys-space-x6);width:var(--cnvs-sys-space-x8);inset-inline-end:var(--cnvs-sys-space-x4);" },
     modifiers: {
         state: {
-            collapsing: { name: "3dhkvh", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            collapsed: { name: "24gac9", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
-            expanded: { name: "8prxh", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
-            expanding: { name: "2q7d3m", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
+            collapsing: { name: "42oadq", styles: "margin:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            collapsed: { name: "4f0s53", styles: "margin:auto;inset-inline-start:0;inset-inline-end:0;transform:scaleX(1);:dir(rtl){transform:scaleX(-1);}" },
+            expanded: { name: "459tdt", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" },
+            expanding: { name: "47y3jt", styles: "margin:0;transform:scaleX(-1);:dir(rtl){transform:scaleX(1);}" }
         },
         origin: {
-            left: { name: "17d06z", styles: "" },
-            right: { name: "2srded", styles: "" }
+            left: { name: "9m32i", styles: "" },
+            right: { name: "1m3qbz", styles: "" }
         }
     },
     compound: [
         {
             modifiers: { state: 'collapsed', origin: 'right' },
-            styles: { name: "4ctt3x", styles: "transform:scaleX(-1);" }
+            styles: { name: "3i0lrw", styles: "transform:scaleX(-1);" }
         },
         {
             modifiers: { state: 'collapsing', origin: 'right' },
-            styles: { name: "1twpfw", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "2ucnx7", styles: "transform:scaleX(-1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanded', origin: 'right' },
-            styles: { name: "1h723q", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "2o1s85", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         },
         {
             modifiers: { state: 'expanding', origin: 'right' },
-            styles: { name: "cd5i8", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
+            styles: { name: "2yntb0", styles: "transform:scaleX(1);inset-inline-start:var(--cnvs-sys-space-x4);" }
         }
     ]
 }, "side-panel-toggle-button-da8098");

package/dist/commonjs/status-indicator/index.d.ts

@@ -1,2 +1,2 @@
-export { StatusIndicator, StatusIndicatorProps, StatusIndicatorVariant } from './lib/StatusIndicator';
+export { StatusIndicator, type StatusIndicatorProps, type StatusIndicatorVariant, } from './lib/StatusIndicator';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/status-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAE,sBAAsB,EAAC,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,sBAAsB,GAC5B,MAAM,uBAAuB,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts

@@ -1,18 +1,24 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { ExtractStencilProps } from '@workday/canvas-kit-styling';
 import { Flex } from '@workday/canvas-kit-react/layout';
-export type StatusIndicatorVariant = 'gray' | 'orange' | 'blue' | 'green' | 'red' | 'transparent';
-export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
-    /**
-     * Defines the emphasis of the `StatusIndicator`.
-     * `high` emphasis will create more contrast between the background and text colors.
-     * `low` emphasis will create less contrast between the background and text colors.
-     * @default 'low'
-     */
-    emphasis?: 'high' | 'low';
+/**
+ * @deprecated This is being deprecated and will be removed in a future release. Use
+ * `StatusIndicatorProps['variant']` instead.
+ */
+export type StatusIndicatorVariant = 'info' | 'neutral' | 'caution' | 'positive' | 'critical' | 'ai' | 'transparent' | 'blue' | 'green' | 'orange' | 'red' | 'gray';
+export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never>, Omit<ExtractStencilProps<typeof statusIndicatorStencil>, 'variant'> {
     /**
      * Defines the color of the `StatusIndicator`.
-     * @default 'gray'
+     * * `info` | `blue` - Uses the info system color and is used for informational status indications
+     * * `positive` | `green` - Uses the positive system color and is used for positive status indications
+     * * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions
+     * * `critical` | `red` - Uses the error system color and is used for critical or negative status indications
+     * * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations
+     * * `illuminate` - Uses the AI system color and is used for AI generated content
+     * * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos
+     *
+     * @default 'neutral'
      */
     variant?: StatusIndicatorVariant;
     /**
@@ -20,20 +26,81 @@ export interface StatusIndicatorProps extends ExtractProps<typeof Flex, never> {
      */
     children: React.ReactNode;
 }
+declare const statusIndicatorStencil: import("@workday/canvas-kit-styling").Stencil<{
+    /**
+     * Defines the color of the `StatusIndicator`.
+     * * `info` | `blue` - Uses the info system color and is used for informational status indications
+     * * `positive` | `green` - Uses the positive system color and is used for positive status indications
+     * * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions
+     * * `critical` | `red` - Uses the error system color and is used for critical or negative status indications
+     * * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations
+     * * `illuminate` - Uses the AI system color and is used for AI generated content
+     * * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos
+     *
+     * @default 'neutral'
+     */
+    variant: {
+        info: {
+            color: "--cnvs-sys-color-fg-info-strong";
+            backgroundColor: "--cnvs-sys-color-bg-info-softer";
+        };
+        positive: {
+            color: "--cnvs-sys-color-fg-positive-strong";
+            backgroundColor: "--cnvs-sys-color-fg-positive-softer";
+        };
+        caution: {
+            color: "--cnvs-sys-color-fg-caution-soft";
+            backgroundColor: "--cnvs-sys-color-bg-caution-softer";
+        };
+        critical: {
+            color: "--cnvs-sys-color-fg-critical-strong";
+            backgroundColor: "--cnvs-sys-color-bg-critical-softer";
+        };
+        neutral: {
+            color: "--cnvs-sys-color-fg-muted-strong";
+            backgroundColor: "--cnvs-sys-color-bg-alt-default";
+        };
+        ai: {
+            color: "--cnvs-sys-color-fg-ai";
+            backgroundColor: "--cnvs-sys-color-bg-ai-default";
+        };
+        transparent: {
+            color: "--cnvs-sys-color-fg-inverse";
+            backgroundColor: "--cnvs-sys-color-bg-translucent";
+        };
+    };
+    /**
+     * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
+     * `high` is being deprecated and will be removed in a future release.
+     * * `low` - Normal emphasis and will visually fit in with other components.
+     * * `high` - High emphasis has been used to make the `StatusIndicator` stand out more, but
+     *   tends to overpower other components. It will be removed and should not be used.
+     *
+     * @default 'low'
+     *
+     * @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
+     */
+    emphasis: {
+        low: {};
+        /**
+         * @deprecated This is being deprecated and will be removed in a future release.
+         */
+        high: {};
+    };
+}, {}, {}, never, never>;
 /**
- * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
- * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ * `StatusIndicator` is a container component has a default maximum width of `200px`.
  *
  * ```tsx
- * <StatusIndicator emphasis="low" variant="blue">
+ * <StatusIndicator variant="info">
  *   {Child components}
  * </StatusIndicator>
  * ```
  */
 export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponent<"div", StatusIndicatorProps> & {
     /**
-     * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
-     * contents exceed the component's maximum width.
+     * `StatusIndicator.Label` will apply an ellipsis if its contents exceed the component's maximum
+     * width.
      *
      * ```tsx
      * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
@@ -50,4 +117,5 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
      */
     Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("@workday/canvas-kit-react/icon").SystemIconProps>;
 };
+export {};
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,aAAa,CAAC;AAElG,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAyFD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAcL,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,mBAAmB,EAAwB,MAAM,6BAA6B,CAAC;AAEvF,OAAO,EAAC,IAAI,EAAc,MAAM,kCAAkC,CAAC;AAKnE;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAC9B,MAAM,GACN,SAAS,GACT,SAAS,GACT,UAAU,GACV,UAAU,GACV,IAAI,GACJ,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAC;AAEX,MAAM,WAAW,oBACf,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC,EACtC,IAAI,CAAC,mBAAmB,CAAC,OAAO,sBAAsB,CAAC,EAAE,SAAS,CAAC;IACrE;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAWD,QAAA,MAAM,sBAAsB;IAaxB;;;;;;;;;;;OAWG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA+BH;;;;;;;;;;OAUG;;;QAGD;;WAEG;;;wBA4DP,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe;IAGxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;CAuBL,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -9,41 +9,104 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const StatusIndicatorIcon_1 = require("./StatusIndicatorIcon");
 const StatusIndicatorLabel_1 = require("./StatusIndicatorLabel");
+// TODO: Remove this in a future release
+const deprecatedVariantsMap = {
+    blue: 'info',
+    green: 'positive',
+    orange: 'caution',
+    red: 'critical',
+    gray: 'neutral',
+};
 const statusIndicatorStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "202euy", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-half);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x1);outline:0.0625rem solid transparent;" },
+    base: { name: "4ar91m", styles: "box-sizing:border-box;display:inline-flex;gap:var(--cnvs-sys-space-x1);max-width:12.5rem;align-items:center;border-radius:var(--cnvs-sys-shape-round);height:1.25rem;padding:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);outline:0.0625rem solid transparent;--color-system-icon-3a4847:currentColor;" },
     modifiers: {
-        gray: {
-            high: { name: "4ffzzy", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "1rea3m", styles: "color:var(--cnvs-sys-color-fg-muted-default);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-bg-alt-softer);" }
+        /**
+         * Defines the color of the `StatusIndicator`.
+         * * `info` | `blue` - Uses the info system color and is used for informational status indications
+         * * `positive` | `green` - Uses the positive system color and is used for positive status indications
+         * * `caution` | `orange` - Uses the caution system color and is used for warnings or required actions
+         * * `critical` | `red` - Uses the error system color and is used for critical or negative status indications
+         * * `neutral` | `gray` - Uses the neutral system color and generally doesn't have positive or negative connotations
+         * * `illuminate` - Uses the AI system color and is used for AI generated content
+         * * `transparent` - Uses the transparent system color and is used for overlays on top of images or videos
+         *
+         * @default 'neutral'
+         */
+        variant: {
+            info: { name: "u566s", styles: "color:var(--cnvs-sys-color-fg-info-strong);background-color:var(--cnvs-sys-color-bg-info-softer);" },
+            positive: { name: "1it0c3", styles: "color:var(--cnvs-sys-color-fg-positive-strong);background-color:var(--cnvs-sys-color-fg-positive-softer);" },
+            caution: { name: "3lnrys", styles: "color:var(--cnvs-sys-color-fg-caution-soft);background-color:var(--cnvs-sys-color-bg-caution-softer);" },
+            critical: { name: "kyqxd", styles: "color:var(--cnvs-sys-color-fg-critical-strong);background-color:var(--cnvs-sys-color-bg-critical-softer);" },
+            neutral: { name: "3hiv6f", styles: "color:var(--cnvs-sys-color-fg-muted-strong);background-color:var(--cnvs-sys-color-bg-alt-default);" },
+            ai: { name: "4cat41", styles: "color:var(--cnvs-sys-color-fg-ai);background-color:var(--cnvs-sys-color-bg-ai-default);" },
+            transparent: { name: "rm6jo", styles: "color:var(--cnvs-sys-color-fg-inverse);background-color:var(--cnvs-sys-color-bg-translucent);" }
         },
-        orange: {
-            high: { name: "1awv9c", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-3a4847:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-amber-default);" },
-            low: { name: "jb79o", styles: "color:var(--cnvs-sys-color-static-amber-strongest);--color-system-icon-3a4847:var(--cnvs-sys-color-static-amber-strongest);background:var(--cnvs-sys-color-static-amber-softer);" }
+        /**
+         * Defines the emphasis of the `StatusIndicator`. `low` should be used in almost all cases.
+         * `high` is being deprecated and will be removed in a future release.
+         * * `low` - Normal emphasis and will visually fit in with other components.
+         * * `high` - High emphasis has been used to make the `StatusIndicator` stand out more, but
+         *   tends to overpower other components. It will be removed and should not be used.
+         *
+         * @default 'low'
+         *
+         * @deprecated This is being deprecated and will be removed in a future release. `high` is being removed
+         */
+        emphasis: {
+            low: { name: "232b15", styles: "" },
+            /**
+             * @deprecated This is being deprecated and will be removed in a future release.
+             */
+            high: { name: "2oxxn1", styles: "" }
+        }
+    },
+    compound: [
+        {
+            modifiers: {
+                variant: 'info',
+                emphasis: 'high',
+            },
+            styles: { name: "4c7ptp", styles: "background-color:var(--cnvs-sys-color-bg-info-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
-        blue: {
-            high: { name: "1sc7tp", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "2ilalg", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-softer);" }
+        {
+            modifiers: {
+                variant: 'positive',
+                emphasis: 'high',
+            },
+            styles: { name: "h7oux", styles: "background-color:var(--cnvs-sys-color-bg-positive-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
-        green: {
-            high: { name: "2xckpo", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "1xbrrf", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-softer);" }
+        {
+            modifiers: {
+                variant: 'caution',
+                emphasis: 'high',
+            },
+            styles: { name: "2ya3jf", styles: "background-color:var(--cnvs-sys-color-bg-caution-default);color:var(--cnvs-sys-color-fg-caution-strong);" }
         },
-        red: {
-            high: { name: "213rgr", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "3egmtm", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-3a4847:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-softer);" }
+        {
+            modifiers: {
+                variant: 'critical',
+                emphasis: 'high',
+            },
+            styles: { name: "py0vx", styles: "background-color:var(--cnvs-sys-color-bg-critical-default);color:var(--cnvs-sys-color-fg-inverse);" }
         },
-        transparent: {
-            high: { name: "cixjo", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "mn7ea", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-3a4847:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+        {
+            modifiers: {
+                variant: 'neutral',
+                emphasis: 'high',
+            },
+            styles: { name: "20cwyw", styles: "background-color:var(--cnvs-sys-color-bg-muted-default);color:var(--cnvs-sys-color-fg-inverse);" }
         }
+    ],
+    defaultModifiers: {
+        variant: 'neutral',
+        emphasis: 'low',
     }
-}, "status-indicator-1a565e");
+}, "status-indicator-c55f02");
 /**
- * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
- * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ * `StatusIndicator` is a container component has a default maximum width of `200px`.
  *
  * ```tsx
- * <StatusIndicator emphasis="low" variant="blue">
+ * <StatusIndicator variant="info">
  *   {Child components}
  * </StatusIndicator>
  * ```
@@ -52,8 +115,8 @@ exports.StatusIndicator = (0, common_1.createComponent)('div')({
     displayName: 'StatusIndicator',
     subComponents: {
         /**
-         * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
-         * contents exceed the component's maximum width.
+         * `StatusIndicator.Label` will apply an ellipsis if its contents exceed the component's maximum
+         * width.
          *
          * ```tsx
          * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
@@ -70,7 +133,14 @@ exports.StatusIndicator = (0, common_1.createComponent)('div')({
          */
         Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
     },
-    Component: ({ emphasis = 'low', variant = 'gray', children, ...elemProps }, ref, Element) => {
-        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, statusIndicatorStencil({ [variant]: emphasis })), children: children }));
+    Component: ({ variant, emphasis, children, ...elemProps }, ref, Element) => {
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, statusIndicatorStencil({
+                variant: 
+                // collapse the type to only the allowed modifiers. Look them up in the map, then
+                // fallback to the passed variant.
+                deprecatedVariantsMap[variant] ||
+                    variant,
+                emphasis,
+            })), children: children }));
     },
 });

package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js

@@ -9,7 +9,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const statusIndicatorLabelStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "q20is", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
+    base: { name: "2i1xii", styles: "box-sizing:border-box;font-weight:var(--cnvs-sys-font-weight-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:capitalize;color:inherit;" },
     defaultModifiers: { typeLevel: 'subtext.large' }
 }, "status-indicator-label-63258e");
 exports.StatusIndicatorLabel = (0, common_1.createComponent)('span')({

package/dist/commonjs/text-area/lib/TextArea.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
 /**
- * @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @deprecated ⚠️ `TextAreaProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead.
  */
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
     /**
@@ -12,7 +12,7 @@ export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
 }
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead.
  */
 export declare const TextArea: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TextAreaProps & Partial<{
     error: "error" | "alert" | undefined;

package/dist/commonjs/text-area/lib/TextArea.js

@@ -9,7 +9,7 @@ const TextAreaField_1 = require("./TextAreaField");
 const text_input_1 = require("@workday/canvas-kit-preview-react/text-input");
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextArea` in Preview has been deprecated and will be removed in a future major version. Please use [`TextArea` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs) instead.
  */
 exports.TextArea = (0, common_1.createContainer)('div')({
     displayName: 'TextArea',

package/dist/commonjs/text-area/lib/TextAreaField.d.ts

@@ -1,5 +1,5 @@
 /**
- * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead.
  */
 export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {

package/dist/commonjs/text-area/lib/TextAreaField.js

@@ -31,7 +31,7 @@ const baseStyles = {
     },
 };
 /**
- * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) in Preview instead.
+ * @deprecated ⚠️ `TextAreaField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField`](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) in Preview instead.
  */
 exports.TextAreaField = (0, common_1.createSubcomponent)('textarea')({
     displayName: 'TextArea.Field',

package/dist/commonjs/text-input/lib/TextInput.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
 /**
- * @deprecated ⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInputProps` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs) instead.
  */
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
     /**
@@ -12,7 +12,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
 }
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textinput--docs) instead.
  */
 export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-react/form-field").FormFieldProps & Partial<{
     error: "error" | "alert" | undefined;

package/dist/commonjs/text-input/lib/TextInput.js

@@ -8,7 +8,7 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 const TextInputField_1 = require("./TextInputField");
 /**
  * @stencil formFieldStencil
- * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInput` in Preview has been deprecated and will be removed in a future major version. Please use [`TextInput` in Main](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textinput--docs) instead.
  */
 exports.TextInput = (0, common_1.createContainer)('div')({
     displayName: 'TextInput',

package/dist/commonjs/text-input/lib/TextInputField.d.ts

@@ -1,5 +1,5 @@
 /**
- * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) instead.
  */
 export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-styling").CSProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {

package/dist/commonjs/text-input/lib/TextInputField.js

@@ -9,16 +9,16 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const hooks_1 = require("./hooks");
 const textInputFieldStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "3gdvi4", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);transition:0.2s box-shadow, 0.2s border-color;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);padding:var(--cnvs-sys-space-x2);margin:0;display:block;height:var(--cnvs-sys-space-x10);min-width:17.5rem;border-radius:var(--cnvs-sys-shape-x1);background-color:var(--cnvs-sys-color-bg-default);&::placeholder{color:var(--cnvs-sys-color-text-default);}&:hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus:not([disabled]){outline:none;}&:disabled{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}::-ms-clear{display:none;}" },
+    base: { name: "1vx3rt", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);transition:0.2s box-shadow, 0.2s border-color;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);padding:var(--cnvs-sys-space-x2);margin:0;display:block;height:var(--cnvs-sys-space-x10);min-width:17.5rem;border-radius:var(--cnvs-sys-shape-x1);background-color:var(--cnvs-sys-color-bg-default);&::placeholder{color:var(--cnvs-sys-color-text-default);}&:hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus:not([disabled]){outline:none;}&:disabled{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-fg-disabled);&::placeholder{color:var(--cnvs-sys-color-fg-disabled);}}::-ms-clear{display:none;}" },
     modifiers: {
         error: {
-            error: { name: "melhy", styles: "background-color:var(--cnvs-brand-error-lightest);" },
-            alert: { name: "7zw5f", styles: "background-color:var(--cnvs-brand-alert-lightest);" }
+            error: { name: "2m2z9v", styles: "background-color:var(--cnvs-brand-error-lightest);" },
+            alert: { name: "3oljbn", styles: "background-color:var(--cnvs-brand-alert-lightest);" }
         }
     }
 }, "text-input-field-d4e5d8");
 /**
- * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/story/preview-inputs-form-field--basic) instead.
+ * @deprecated ⚠️ `TextInputField` in Preview has been deprecated and will be removed in a future major version. Please use [`FormField` in Preview](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-form-field--docs) instead.
  */
 exports.TextInputField = (0, common_1.createSubcomponent)('input')({
     displayName: 'TextInput.Field',

package/dist/es6/color-picker/lib/ColorPicker.js

@@ -73,7 +73,7 @@ export const colorPickerStencil = createStencil({
         hexInput: 'color-picker-hex-input',
         inputWrapper: 'color-picker-input-wrapper',
     },
-    base: { name: "4fooeo", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-space-x4);}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:var(--cnvs-sys-space-zero);}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
+    base: { name: "1pfxvp", styles: "box-sizing:border-box;width:13.5rem;[data-part=\"color-picker-form\"]{width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-block-start:var(--cnvs-sys-space-x4);}[data-part=\"color-picker-input-wrapper\"]{display:flex;flex-direction:column;margin:var(--cnvs-sys-space-zero);}[data-part=\"color-picker-button\"]{align-self:flex-end;}[data-part=\"color-picker-hex-input\"]{width:10.5rem;}" }
 }, "color-picker-c9dd1d");
 const isCustomColor = (colors, hexCode) => {
     if (!hexCode) {

package/dist/es6/color-picker/lib/parts/ColorReset.js

@@ -8,7 +8,7 @@ export const resetButtonStencil = createStencil({
     parts: {
         label: 'reset-button-label',
     },
-    base: { name: "2vh9a5", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-space-x8));height:var(--cnvs-sys-space-x8);margin:calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);padding:0 var(--cnvs-sys-space-x4);white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-bg-alt-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-space-x2);}" }
+    base: { name: "fvi06", styles: "box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;width:calc(100% + var(--cnvs-sys-space-x8));height:var(--cnvs-sys-space-x8);margin:calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);padding:0 var(--cnvs-sys-space-x4);white-space:nowrap;border:none;outline:none;background:none;cursor:pointer;transition:color 120ms ease, background-color 120ms ease;&:hover, &.hover{background-color:var(--cnvs-sys-color-bg-alt-default);}&:active, &.active{background-color:var(--cnvs-sys-color-bg-alt-strong);}&:focus-visible, &.focus{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}[data-part=\"reset-button-label\"]{margin-left:var(--cnvs-sys-space-x2);}" }
 }, "reset-button-af92a8");
 export const ResetButton = ({ onClick, resetColor, label }) => {
     const handleResetColor = () => onClick(resetColor);

package/dist/es6/color-picker/lib/parts/SwatchBook.js

@@ -10,7 +10,7 @@ const colorPickerSwatchBookStencil = createStencil({
     parts: {
         tile: 'color-picker-swatch-book-tile',
     },
-    base: { name: "26uaaz", styles: "--shadow-color-picker-swatch-book-a4010d:var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:1.25rem;height:1.25rem;cursor:pointer;border-radius:var(--cnvs-sys-shape-half);transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}}}" }
+    base: { name: "igbvx", styles: "--shadow-color-picker-swatch-book-a4010d:var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem, var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;box-sizing:border-box;display:flex;flex-wrap:wrap;margin:0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;[data-part=\"color-picker-swatch-book-tile\"]{display:flex;width:1.25rem;height:1.25rem;cursor:pointer;border-radius:var(--cnvs-sys-shape-half);transition:box-shadow 120ms ease;margin:0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}&:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&[aria-selected=\"true\"]{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);&:focus-visible{animation:none;box-shadow:none;}&:hover{box-shadow:var(--shadow-color-picker-swatch-book-a4010d);}}}" }
 }, "color-picker-swatch-book-a4010d");
 export const SwatchBook = ({ colors, value, onSelect }) => {
     return (_jsx("div", { ...colorPickerSwatchBookStencil(), children: colors.map((color, index) => {

package/dist/es6/divider/lib/Divider.js

@@ -6,7 +6,7 @@ export const dividerStencil = createStencil({
     vars: {
         space: cssVar(system.space.x4),
     },
-    base: { name: "4cfzd7", styles: "--space-divider-a2c50d:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-a2c50d) / 2) 0;" }
+    base: { name: "1jru6q", styles: "--space-divider-a2c50d:var(--cnvs-sys-space-x4);box-sizing:border-box;display:block;height:0.0625rem;border:none;border-top:1px solid var(--cnvs-sys-color-border-divider);margin:calc(var(--space-divider-a2c50d) / 2) 0;" }
 }, "divider-a2c50d");
 /**
  * # Divider

package/dist/es6/information-highlight/lib/InformationHighlight.d.ts

@@ -46,24 +46,24 @@ export declare const informationHighlightStencil: import("@workday/canvas-kit-st
             borderInlineStart: string;
             backgroundColor: "--cnvs-sys-color-bg-critical-softest";
             '& [data-part="information-highlight-icon"]': {
-                [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-bg-critical-default" | "--cnvs-sys-color-fg-critical-default";
+                [x: string]: "--cnvs-sys-color-bg-critical-default" | "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-critical-default";
             };
         };
     };
 }, {}, {}, never, never>;
 export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
-    variant: "informational" | "caution" | "critical";
+    variant: "caution" | "critical" | "informational";
     emphasis: "high" | "low";
 }> & {} & {}, {
     state: {
-        variant: "informational" | "caution" | "critical";
+        variant: "caution" | "critical" | "informational";
         emphasis: "high" | "low";
     };
     events: {};
 }> & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
         state: {
-            variant: "informational" | "caution" | "critical";
+            variant: "caution" | "critical" | "informational";
             emphasis: "high" | "low";
         };
         events: {};

package/dist/es6/information-highlight/lib/InformationHighlight.js

@@ -9,19 +9,19 @@ import { Link } from './parts/Link';
 import { useInformationHighlightModel } from './hooks/useInformationHighlightModel';
 import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 export const informationHighlightStencil = createStencil({
-    base: { name: "1lz2ys", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
+    base: { name: "3nha1s", styles: "box-sizing:border-box;display:grid;grid-template-columns:min-content;column-gap:var(--cnvs-sys-space-x4);row-gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x4);border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;" },
     modifiers: {
         informational: {
-            low: { name: "224rld", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "2psesh", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
+            low: { name: "4aau2l", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "2n5459", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-sys-color-bg-primary-softer);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-bg-primary-default);}" }
         },
         caution: {
-            low: { name: "3l6mvu", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "3nqbr8", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
+            low: { name: "487vup", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "28eqoa", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-sys-color-bg-caution-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}" }
         },
         critical: {
-            low: { name: "3okdke", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
-            high: { name: "ls533", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical-default);}" }
+            low: { name: "ngjn4", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-alt-soft);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:none;}" },
+            high: { name: "12n02w", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-sys-color-bg-critical-softest);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-3a4847:var(--cnvs-sys-color-icon-inverse);--color-system-icon-3a4847:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-3a4847:var(--cnvs-sys-color-fg-critical-default);}" }
         }
     }
 }, "information-highlight-520f38");