@workday/canvas-kit-preview-react 12.2.2 → 12.3.1

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

@@ -32,7 +32,7 @@ exports.dividerStencil = (0, canvas_kit_styling_1.createStencil)({
     vars: {
         space: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x4),
     },
-    base: { name: "d3kq2", styles: "--space-divider-156e29: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-156e29) / 2) 0;" }
+    base: { name: "mrkq2", styles: "--space-divider-156e29: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-156e29) / 2) 0;" }
 }, "divider-156e29");
 /**
  * # Divider

package/dist/commonjs/index.d.ts

@@ -11,4 +11,5 @@ export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
+export * from './information-highlight';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,yBAAyB,CAAC"}

package/dist/commonjs/index.js

@@ -27,3 +27,4 @@ __exportStar(require("./side-panel"), exports);
 __exportStar(require("./status-indicator"), exports);
 __exportStar(require("./text-area"), exports);
 __exportStar(require("./text-input"), exports);
+__exportStar(require("./information-highlight"), exports);

package/dist/commonjs/information-highlight/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/InformationHighlight';
+export * from './lib/parts/Body';
+export * from './lib/parts/Heading';
+export * from './lib/parts/Icon';
+export * from './lib/parts/Link';
+//# sourceMappingURL=index.d.ts.map

package/dist/commonjs/information-highlight/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../information-highlight/index.tsx"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

package/dist/commonjs/information-highlight/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./lib/InformationHighlight"), exports);
+__exportStar(require("./lib/parts/Body"), exports);
+__exportStar(require("./lib/parts/Heading"), exports);
+__exportStar(require("./lib/parts/Icon"), exports);
+__exportStar(require("./lib/parts/Link"), exports);

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

@@ -0,0 +1,76 @@
+import { CSProps } from '@workday/canvas-kit-styling';
+interface InformationHighlightProps extends CSProps {
+}
+export declare const informationHighlightStencil: import("@workday/canvas-kit-styling").Stencil<{
+    informational: {
+        low: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-sys-color-bg-alt-soft";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: string;
+            };
+        };
+        high: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-base-palette-blueberry-100";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: "--cnvs-sys-color-bg-primary-default" | "--cnvs-sys-color-icon-inverse";
+            };
+        };
+    };
+    caution: {
+        low: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-sys-color-bg-alt-soft";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: string;
+            };
+        };
+        high: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-base-palette-sour-lemon-100";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-fg-contrast-default";
+            };
+        };
+    };
+    critical: {
+        low: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-sys-color-bg-alt-soft";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: string;
+            };
+        };
+        high: {
+            borderInlineStart: string;
+            backgroundColor: "--cnvs-base-palette-peach-100";
+            '& [data-part="information-highlight-icon"]': {
+                [x: string]: "--cnvs-sys-color-icon-inverse" | "--cnvs-sys-color-bg-critical-default";
+            };
+        };
+    };
+}, {}, never, never>;
+export declare const InformationHighlight: import("@workday/canvas-kit-react/common").ElementComponentM<"section", InformationHighlightProps & Partial<{
+    variant: "informational" | "caution" | "critical";
+    emphasis: "high" | "low";
+}> & {} & {}, {
+    state: {
+        variant: "informational" | "caution" | "critical";
+        emphasis: "high" | "low";
+    };
+    events: {};
+}> & {
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./parts/Icon").IconProps, {
+        state: {
+            variant: "informational" | "caution" | "critical";
+            emphasis: "high" | "low";
+        };
+        events: {};
+    }>;
+    Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", import("./parts/Heading").InformationHighlightHeadingProps>;
+    Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("@workday/canvas-kit-react/text").TextProps>;
+    Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
+};
+export {};
+//# sourceMappingURL=InformationHighlight.d.ts.map

package/dist/commonjs/information-highlight/lib/InformationHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InformationHighlight.d.ts","sourceRoot":"","sources":["../../../../information-highlight/lib/InformationHighlight.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAUzF,UAAU,yBAA0B,SAAQ,OAAO;CAAG;AAEtD,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAmFtC,CAAC;AAEH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}

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

@@ -0,0 +1,65 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformationHighlight = exports.informationHighlightStencil = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const Heading_1 = require("./parts/Heading");
+const Body_1 = require("./parts/Body");
+const Icon_1 = require("./parts/Icon");
+const Link_1 = require("./parts/Link");
+const useInformationHighlightModel_1 = require("./hooks/useInformationHighlightModel");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+exports.informationHighlightStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "mrkq1z", 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);" },
+    modifiers: {
+        informational: {
+            low: { name: "mrkq20", 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-212f69:var(--cnvs-sys-color-bg-primary-default);--color-system-icon-212f69:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-212f69:none;}" },
+            high: { name: "mrkq21", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-bg-primary-default);background-color:var(--cnvs-base-palette-blueberry-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-212f69:var(--cnvs-sys-color-icon-inverse);--color-system-icon-212f69:var(--cnvs-sys-color-bg-primary-default);--backgroundColor-system-icon-212f69:var(--cnvs-sys-color-bg-primary-default);}" }
+        },
+        caution: {
+            low: { name: "mrkq22", 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-212f69:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-212f69:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-212f69:none;}" },
+            high: { name: "mrkq23", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-caution-default);background-color:var(--cnvs-base-palette-sour-lemon-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-212f69:var(--cnvs-sys-color-icon-inverse);--color-system-icon-212f69:var(--cnvs-sys-color-fg-contrast-default);--backgroundColor-system-icon-212f69:var(--cnvs-sys-color-fg-contrast-default);}" }
+        },
+        critical: {
+            low: { name: "mrkq24", 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-212f69:var(--cnvs-sys-color-bg-critical-default);--color-system-icon-212f69:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-212f69:none;}" },
+            high: { name: "mrkq25", styles: "border-inline-start:solid var(--cnvs-sys-space-x1) var(--cnvs-sys-color-border-critical-default);background-color:var(--cnvs-base-palette-peach-100);& [data-part=\"information-highlight-icon\"]{--accentColor-system-icon-212f69:var(--cnvs-sys-color-icon-inverse);--color-system-icon-212f69:var(--cnvs-sys-color-bg-critical-default);--backgroundColor-system-icon-212f69:var(--cnvs-sys-color-bg-critical-default);}" }
+        }
+    }
+}, "information-highlight-609103");
+exports.InformationHighlight = (0, common_1.createContainer)('section')({
+    displayName: 'InformationHighlight',
+    modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
+    subComponents: {
+        Icon: Icon_1.Icon,
+        Heading: Heading_1.InformationHighlightHeading,
+        Body: Body_1.Body,
+        Link: Link_1.Link,
+    },
+})(({ ...elemProps }, Element, model) => {
+    return (React.createElement(Element, { ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, (0, exports.informationHighlightStencil)({ [model.state.variant]: model.state.emphasis })) }));
+});

package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts

@@ -0,0 +1,23 @@
+export declare const useInformationHighlightModel: (<TT_Special_Generic>(config?: (Partial<{
+    variant: "informational" | "caution" | "critical";
+    emphasis: "high" | "low";
+}> & {} & {}) | undefined) => {
+    state: {
+        variant: "informational" | "caution" | "critical";
+        emphasis: "high" | "low";
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    variant: "informational" | "caution" | "critical";
+    emphasis: "high" | "low";
+}, {}, {
+    variant: "informational" | "caution" | "critical";
+    emphasis: "high" | "low";
+}, {}, {
+    state: {
+        variant: "informational" | "caution" | "critical";
+        emphasis: "high" | "low";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=useInformationHighlightModel.d.ts.map

package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInformationHighlightModel.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/hooks/useInformationHighlightModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;;;EAavC,CAAC"}

package/dist/commonjs/information-highlight/lib/hooks/useInformationHighlightModel.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInformationHighlightModel = void 0;
+const common_1 = require("@workday/canvas-kit-react/common");
+exports.useInformationHighlightModel = (0, common_1.createModelHook)({
+    defaultConfig: {
+        variant: 'informational',
+        emphasis: 'low',
+    },
+})(config => {
+    return {
+        state: {
+            variant: config.variant,
+            emphasis: config.emphasis,
+        },
+        events: {},
+    };
+});

package/dist/commonjs/information-highlight/lib/parts/Body.d.ts

@@ -0,0 +1,2 @@
+export declare const Body: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("@workday/canvas-kit-react/text").TextProps>;
+//# sourceMappingURL=Body.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Body.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,IAAI,sHAWf,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Body.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Body = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const text_1 = require("@workday/canvas-kit-react/text");
+const informationHighlightBodyStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "mrkq1x", 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);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin:0 0 var(--cnvs-sys-space-x2) 0;" }
+}, "information-highlight-body-772923");
+exports.Body = (0, common_1.createComponent)('p')({
+    displayName: 'Body',
+    Component: ({ ...elemProps }, ref, Element) => {
+        return (React.createElement(text_1.Text, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightBodyStencil()) }));
+    },
+});

package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts

@@ -0,0 +1,6 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Heading } from '@workday/canvas-kit-react/text';
+export interface InformationHighlightHeadingProps extends Partial<ExtractProps<typeof Heading, never>> {
+}
+export declare const InformationHighlightHeading: import("@workday/canvas-kit-react/common").ElementComponent<"h3", InformationHighlightHeadingProps>;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Heading.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAG/E,OAAO,EAAC,OAAO,EAAC,MAAM,gCAAgC,CAAC;AAevD,MAAM,WAAW,gCACf,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,OAAO,EAAE,KAAK,CAAC,CAAC;CAAG;AAEzD,eAAO,MAAM,2BAA2B,qGAYtC,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Heading.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InformationHighlightHeading = void 0;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const text_1 = require("@workday/canvas-kit-react/text");
+const informationHighlightHeadingStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "mrkq1w", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);line-height:var(--cnvs-sys-line-height-body-small);font-size:var(--cnvs-sys-font-size-body-small);letter-spacing:var(--cnvs-base-letter-spacing-200);color:var(--cnvs-sys-color-text-strong);grid-column:2;margin-top:var(--cnvs-sys-space-zero);margin-bottom:var(--cnvs-sys-space-zero);" }
+}, "information-highlight-heading-142e5f");
+exports.InformationHighlightHeading = (0, common_1.createComponent)('h3')({
+    displayName: 'Heading',
+    Component: ({ size = 'small', ...elemProps }, ref, Element) => {
+        return (React.createElement(text_1.Heading, { as: Element, ref: ref, size: size, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightHeadingStencil()) }));
+    },
+});

package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts

@@ -0,0 +1,12 @@
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+export interface IconProps extends Partial<ExtractProps<typeof SystemIcon, never>> {
+}
+export declare const Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", IconProps, {
+    state: {
+        variant: "informational" | "caution" | "critical";
+        emphasis: "high" | "low";
+    };
+    events: {};
+}>;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Icon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAQlF,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,CAAC;CAAG;AAOrF,eAAO,MAAM,IAAI;;;;;;EAYf,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Icon.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const React = __importStar(require("react"));
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const useInformationHighlightModel_1 = require("../hooks/useInformationHighlightModel");
+const defaultIcons = {
+    informational: canvas_system_icons_web_1.infoIcon,
+    caution: canvas_system_icons_web_1.exclamationTriangleIcon,
+    critical: canvas_system_icons_web_1.exclamationCircleIcon,
+};
+exports.Icon = (0, common_1.createSubcomponent)('span')({
+    displayName: 'Icon',
+    modelHook: useInformationHighlightModel_1.useInformationHighlightModel,
+})(({ icon, ...props }, Element, model) => {
+    return (React.createElement(icon_1.SystemIcon, { as: Element, icon: icon ? icon : defaultIcons[model.state.variant], "data-part": "information-highlight-icon", ...props }));
+});

package/dist/commonjs/information-highlight/lib/parts/Link.d.ts

@@ -0,0 +1,2 @@
+export declare const Link: import("@workday/canvas-kit-react/common").ElementComponent<"a", import("@workday/canvas-kit-react/button").HyperlinkProps>;
+//# sourceMappingURL=Link.d.ts.map

package/dist/commonjs/information-highlight/lib/parts/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../information-highlight/lib/parts/Link.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,IAAI,6HAWf,CAAC"}

package/dist/commonjs/information-highlight/lib/parts/Link.js

@@ -0,0 +1,40 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const React = __importStar(require("react"));
+const button_1 = require("@workday/canvas-kit-react/button");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const informationHighlightLinkStencil = (0, canvas_kit_styling_1.createStencil)({
+    base: { name: "mrkq1y", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-bold);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);grid-column:2;justify-self:start;color:var(--cnvs-sys-color-text-strong);" }
+}, "information-highlight-link-5ac480");
+exports.Link = (0, common_1.createComponent)('a')({
+    displayName: 'Link',
+    Component: ({ ...elemProps }, ref, Element) => {
+        return (React.createElement(button_1.Hyperlink, { as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, informationHighlightLinkStencil()) }));
+    },
+});

package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js

@@ -49,15 +49,15 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "d3kq3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = (0, canvas_kit_styling_1.createStyles)({ name: "d3kq4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-d3kq3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
+const LOADING_ANIMATION = (0, canvas_kit_styling_1.keyframes)({ name: "mrkq3", styles: "0%, 79%, 100%{opacity:0.2;transform:scale(0.55);}27%{opacity:1;transform:scale(1);}53%{opacity:0.6;transform:scale(0.7);}" });
+const loadingSparklesIconStyles = (0, canvas_kit_styling_1.createStyles)({ name: "mrkq4", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-mrkq3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230ms * (1/3));}&:nth-child(3){animation-delay:calc(1230ms * (2/3));}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
     return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x3) }));
 };
-const loadingSparklesStyles = (0, canvas_kit_styling_1.createStyles)({ name: "d3kq5", styles: "display:inline-flex;gap:0.0625rem;" });
+const loadingSparklesStyles = (0, canvas_kit_styling_1.createStyles)({ name: "mrkq5", styles: "display:inline-flex;gap:0.0625rem;" });
 /**
  * A simple component that displays three horizontal sparkles, to be used when an AI operation is in progress.
  */

package/dist/commonjs/multi-select/lib/MultiSelectInput.js

@@ -15,7 +15,7 @@ const combobox_1 = require("@workday/canvas-kit-react/combobox");
 const useMultiSelectModel_1 = require("./useMultiSelectModel");
 const MultiSelectedList_1 = require("./MultiSelectedList");
 exports.multiSelectStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d3kq1w", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
+    base: { name: "mrkq26", styles: "box-sizing:border-box;border:1px solid var(--cnvs-sys-color-border-input-default);display:flex;flex-direction:column;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);min-height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;margin:0;&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-within{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);}& [data-part=\"user-input\"]{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);background-color:var(--cnvs-sys-color-bg-transparent);border-radius:var(--cnvs-sys-shape-x1);border:none !important;box-shadow:none !important;outline-width:0px;&:where(:not([aria-autocomplete])){caret-color:transparent;cursor:default;&::selection{background-color:transparent;}}}& :where([data-part=\"form-input\"]){position:absolute;top:var(--cnvs-sys-space-zero);bottom:var(--cnvs-sys-space-zero);left:var(--cnvs-sys-space-zero);right:var(--cnvs-sys-space-zero);opacity:var(--cnvs-sys-opacity-zero);cursor:default;pointer-events:none;}& :where([data-part=\"separator\"]){background-color:var(--cnvs-sys-color-border-divider);height:1px;margin:var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);}& :where([data-part=\"list\"]){display:flex;gap:var(--cnvs-sys-space-x2);padding:var(--cnvs-sys-space-x2);flex-wrap:wrap;}" }
 }, "multi-select-5f5351");
 exports.useMultiSelectInput = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useMultiSelectModel_1.useMultiSelectModel)((model, ref) => {
     return {

package/dist/commonjs/radio/lib/RadioGroup.js

@@ -16,11 +16,11 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Styles for RadioGroup
  */
 const radioGroupStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d3kqw", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "mrkqw", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "d3kqx", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "d3kqy", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
+            error: { name: "mrkqx", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "mrkqy", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
 }, "radio-group-ce2b62");

package/dist/commonjs/radio/lib/RadioLabel.js

@@ -13,7 +13,7 @@ const RadioText_1 = require("./RadioText");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const radioLabelStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d3kqv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+    base: { name: "mrkqv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
 }, "radio-label-0cca27");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = (0, common_1.createSubcomponent)('label')({

package/dist/commonjs/radio/lib/RadioText.js

@@ -14,19 +14,19 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const radioTextStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: text_1.textStencil,
-    base: { name: "d3kqr", styles: "box-sizing:border-box;cursor:pointer;" },
+    base: { name: "mrkqr", styles: "box-sizing:border-box;cursor:pointer;" },
     modifiers: {
         variant: {
-            inverse: { name: "d3kqs", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            inverse: { name: "mrkqs", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         },
         disabled: {
-            true: { name: "d3kqt", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "mrkqt", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "d3kqu", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
+            styles: { name: "mrkqu", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     ],
     defaultModifiers: {

package/dist/commonjs/radio/lib/StyledRadioButton.js

@@ -13,10 +13,10 @@ const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d3kq6", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+    base: { name: "mrkq6", styles: "box-sizing:border-box;cursor:pointer;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round);position:absolute;margin:var(--cnvs-sys-space-zero);&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);background-color:var(--cnvs-sys-color-bg-alt-softer);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-round);box-sizing:border-box;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:var(--cnvs-sys-opacity-full);}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-primary-default);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-inverse), 0 0 0 1px var(--cnvs-brand-common-focus-outline);}&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{outline:transparent;}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent);border:0.3125rem solid var(--cnvs-brand-primary-base);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{outline:transparent;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         variant: {
-            inverse: { name: "d3kq7", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
+            inverse: { name: "mrkq7", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-inverse);}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);+ .cnvs-radio-check{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);opacity:var(--cnvs-sys-opacity-disabled);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-sys-color-border-input-inverse);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base);border-color:var(--cnvs-sys-color-border-inverse);}&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check{box-shadow:0 0 0 0px var(--cnvs-sys-color-border-contrast-default), 0 0 0 2px var(--cnvs-sys-color-border-inverse);}&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check{box-shadow:0 0 0 2px var(--cnvs-sys-color-border-contrast-default), 0 0 0 4px var(--cnvs-sys-color-border-inverse);}" }
         }
     }
 }, "radio-input-f05aaa");
@@ -27,13 +27,13 @@ const StyledRadioInput = (0, common_1.createComponent)('input')({
     },
 });
 const radioInputWrapperStyles = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "d3kq8", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
+    base: { name: "mrkq8", styles: "box-sizing:border-box;height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round);height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:var(--cnvs-sys-opacity-full);}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);}" },
     modifiers: {
         variant: {
-            inverse: { name: "d3kq9", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
+            inverse: { name: "mrkq9", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled);}" }
         },
         disabled: {
-            true: { name: "d3kqa", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+            true: { name: "mrkqa", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
         }
     }
 }, "radio-input-wrapper-styles-fce2c4");