@workday/canvas-kit-preview-react 13.0.0-alpha.996-next.0 → 13.0.0

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
@@ -7,31 +7,31 @@ import { systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { StatusIndicatorIcon } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 const statusIndicatorStencil = createStencil({
-    base: { name: "s7ax1g", 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);" },
+    base: { name: "ndjk3z", 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;" },
     modifiers: {
         gray: {
-            high: { name: "s7ax1k", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
-            low: { name: "s7ax1l", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
+            high: { name: "ndjk40", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-gray-default);" },
+            low: { name: "ndjk41", styles: "color:var(--cnvs-sys-color-static-gray-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-strong);background:var(--cnvs-sys-color-static-gray-soft);" }
         },
         orange: {
-            high: { name: "s7ax1m", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
-            low: { name: "s7ax1n", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-212f69:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
+            high: { name: "ndjk42", styles: "color:var(--cnvs-sys-color-static-gray-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gray-stronger);background:var(--cnvs-sys-color-static-orange-default);" },
+            low: { name: "ndjk43", styles: "color:var(--cnvs-sys-color-static-gold-stronger);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-gold-stronger);background:var(--cnvs-sys-color-static-orange-soft);" }
         },
         blue: {
-            high: { name: "s7ax1o", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
-            low: { name: "s7ax1p", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
+            high: { name: "ndjk44", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-blue-default);" },
+            low: { name: "ndjk45", styles: "color:var(--cnvs-sys-color-static-blue-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-blue-strong);background:var(--cnvs-sys-color-static-blue-soft);" }
         },
         green: {
-            high: { name: "s7ax1q", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
-            low: { name: "s7ax1r", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
+            high: { name: "ndjk46", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-green-strong);" },
+            low: { name: "ndjk47", styles: "color:var(--cnvs-sys-color-static-green-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-green-strong);background:var(--cnvs-sys-color-static-green-soft);" }
         },
         red: {
-            high: { name: "s7ax1s", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
-            low: { name: "s7ax1t", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-212f69:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
+            high: { name: "ndjk48", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-static-red-default);" },
+            low: { name: "ndjk49", styles: "color:var(--cnvs-sys-color-static-red-strong);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-red-strong);background:var(--cnvs-sys-color-static-red-soft);" }
         },
         transparent: {
-            high: { name: "s7ax1u", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
-            low: { name: "s7ax1v", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-212f69:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
+            high: { name: "ndjk4a", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" },
+            low: { name: "ndjk4b", styles: "color:var(--cnvs-sys-color-static-white);--color-system-icon-99ce3e:var(--cnvs-sys-color-static-white);background:var(--cnvs-sys-color-bg-translucent);" }
         }
     }
 }, "status-indicator-1a565e");
@@ -68,6 +68,6 @@ export const StatusIndicator = createComponent('div')({
         Icon: StatusIndicatorIcon,
     },
     Component: ({ emphasis = 'low', variant = 'gray', children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, statusIndicatorStencil({ [variant]: emphasis })) }, children));
+        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, statusIndicatorStencil({ [variant]: emphasis })), children: children }));
     },
 });

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAEpE,eAAO,MAAM,mBAAmB,sFAK9B,CAAC"}
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAE3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAEpE,eAAO,MAAM,mBAAmB,sFAK9B,CAAC"}

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 export const StatusIndicatorIcon = createComponent('span')({
     displayName: 'StatusIndicatorIcon',
     Component: (elemProps, ref, Element) => {
-        return React.createElement(SystemIcon, { as: Element, ref: ref, size: 20, role: "img", ...elemProps });
+        return _jsx(SystemIcon, { as: Element, ref: ref, size: 20, role: "img", ...elemProps });
     },
 });

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAKtE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAe/D,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}
+{"version":3,"file":"StatusIndicatorLabel.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,SAAS,EAAc,MAAM,gCAAgC,CAAC;AAKtE,MAAM,WAAW,yBAA0B,SAAQ,SAAS;CAAG;AAe/D,eAAO,MAAM,oBAAoB,gGAS/B,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { textStencil } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
@@ -6,12 +6,12 @@ import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { system } from '@workday/canvas-tokens-web';
 const statusIndicatorLabelStencil = createStencil({
     extends: textStencil,
-    base: { name: "s7ax1f", 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: "ndjk3y", 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-fbd39a");
+}, "status-indicator-label-63258e");
 export const StatusIndicatorLabel = createComponent('span')({
     displayName: 'StatusIndicator.Label',
     Component: ({ children, typeLevel, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, { ref: ref, ...mergeStyles(elemProps, statusIndicatorLabelStencil({ typeLevel })) }, children));
+        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, statusIndicatorLabelStencil({ typeLevel })), children: children }));
     },
 });

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

@@ -18,13 +18,13 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
     error: "error" | "alert" | undefined;
     id: string;
     isRequired: boolean;
-    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
 }> & {} & {}, {
     state: {
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }> & {
@@ -33,7 +33,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }, {}>, {
@@ -41,7 +41,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;
@@ -50,7 +50,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;
@@ -59,7 +59,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { FormField, formFieldStencil } from '@workday/canvas-kit-react/form-field';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -17,10 +17,10 @@ export const TextArea = createContainer('div')({
         Hint: FormField.Hint,
     },
 })(({ children, grow, orientation, ...elemProps }, Element, model) => {
-    return (React.createElement(Element, { ...mergeStyles(elemProps, formFieldStencil({
+    return (_jsx(Element, { ...mergeStyles(elemProps, formFieldStencil({
             grow,
-            orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation,
+            orientation: orientation,
             error: model.state.error,
             required: model.state.isRequired,
-        })) }, children));
+        })), children: children }));
 });

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

@@ -6,7 +6,7 @@ export declare const TextAreaField: import("@workday/canvas-kit-react/common").E
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }, {}>, {
@@ -14,7 +14,7 @@ export declare const TextAreaField: import("@workday/canvas-kit-react/common").E
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }>;

package/dist/es6/text-area/lib/TextAreaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA8CA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;EAiCxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA0CA;;GAEG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;EAiCxB,CAAC"}

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

@@ -1,6 +1,4 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { borderRadius, colors, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
@@ -46,5 +44,5 @@ export const TextAreaField = createSubcomponent('textarea')({
                 boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             },
         };
-    return (jsx(FormField.Input, { as: Element, ...type.levels.subtext.large, css: [baseStyles, focusStyles], ...elemProps, border: `1px solid ${inputColors.border}`, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: space.xxs, margin: 0 }));
+    return (_jsx(FormField.Input, { as: Element, ...type.levels.subtext.large, cs: [baseStyles, focusStyles], ...elemProps, border: `1px solid ${inputColors.border}`, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: space.xxs, margin: 0 }));
 });

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

@@ -18,13 +18,13 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
     error: "error" | "alert" | undefined;
     id: string;
     isRequired: boolean;
-    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
 }> & {} & {} & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }, {}>, {
@@ -32,7 +32,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }> & {
@@ -41,7 +41,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }, {}>, {
@@ -49,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;
@@ -58,7 +58,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;
@@ -67,7 +67,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
             id: string;
             error: "error" | "alert" | undefined;
             isRequired: boolean;
-            orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+            orientation: "vertical" | "horizontalEnd" | "horizontalStart";
         };
         events: {};
     }>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { FormField, useFormFieldModel, formFieldStencil } from '@workday/canvas-kit-react/form-field';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -16,10 +16,10 @@ export const TextInput = createContainer('div')({
         Hint: FormField.Hint,
     },
 })(({ children, orientation, grow, ...elemProps }, Element, model) => {
-    return (React.createElement(Element, { ...mergeStyles(elemProps, formFieldStencil({
+    return (_jsx(Element, { ...mergeStyles(elemProps, formFieldStencil({
             grow,
-            orientation: orientation === 'horizontal' ? 'horizontalStart' : orientation,
+            orientation: orientation,
             error: model.state.error,
             required: model.state.isRequired,
-        })) }, children));
+        })), children: children }));
 });

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

@@ -5,22 +5,16 @@ export declare const TextInputField: import("@workday/canvas-kit-react/common").
     state: {
         id: string;
         error: "error" | "alert" | undefined;
-        /**
-         * @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.
-         */
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }, {}>, {
     state: {
         id: string;
         error: "error" | "alert" | undefined;
-        /**
-         * @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.
-         */
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }>;

package/dist/es6/text-input/lib/TextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA8CA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;QAH3B;;WAEG;;;;;;;;;QAFH;;WAEG;;;;;EAmCD,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA0CA;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;EAkCzB,CAAC"}

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

@@ -1,6 +1,4 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { borderRadius, colors, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
 import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-react/form-field';
@@ -46,5 +44,5 @@ export const TextInputField = createSubcomponent('input')({
                 boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             },
         };
-    return (jsx(FormField.Input, { as: "input", ...type.levels.subtext.large, css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: `1px solid ${inputColors.border}`, backgroundColor: inputColors.background, borderRadius: borderRadius.m, ...elemProps }));
+    return (_jsx(FormField.Input, { as: "input", ...type.levels.subtext.large, cs: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: `1px solid ${inputColors.border}`, backgroundColor: inputColors.background, borderRadius: borderRadius.m, ...elemProps }));
 });

package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts

@@ -8,7 +8,7 @@ export declare const useTextInputField: import("@workday/canvas-kit-react/common
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }, {

package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts

@@ -5,31 +5,31 @@ export declare const useTextInputModel: (<TT_Special_Generic>(config?: (Partial<
     error: "error" | "alert" | undefined;
     id: string;
     isRequired: boolean;
-    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
 }> & {} & {}) | undefined) => {
     state: {
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }) & import("@workday/canvas-kit-react/common").ModelExtras<{
     error: "error" | "alert" | undefined;
     id: string;
     isRequired: boolean;
-    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
 }, {}, {
     id: string;
     error: "error" | "alert" | undefined;
     isRequired: boolean;
-    orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+    orientation: "vertical" | "horizontalEnd" | "horizontalStart";
 }, {}, {
     state: {
         id: string;
         error: "error" | "alert" | undefined;
         isRequired: boolean;
-        orientation: "horizontal" | "vertical" | "horizontalEnd" | "horizontalStart";
+        orientation: "vertical" | "horizontalEnd" | "horizontalStart";
     };
     events: {};
 }>;

package/divider/lib/Divider.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
 import {
   createStencil,

package/index.ts

@@ -1,5 +1,4 @@
 export * from './color-picker';
-export * from './common';
 export * from './divider';
 export * from './loading-sparkles';
 export * from './menu';
@@ -11,4 +10,4 @@ export * from './side-panel';
 export * from './status-indicator';
 export * from './text-area';
 export * from './text-input';
-export * from './InformationHighlight';
+export * from './information-highlight';

package/information-highlight/index.ts

@@ -0,0 +1,5 @@
+export * from './lib/InformationHighlight';
+export * from './lib/parts/Body';
+export * from './lib/parts/Heading';
+export * from './lib/parts/Icon';
+export * from './lib/parts/Link';

package/{InformationHighlight → information-highlight}/lib/InformationHighlight.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import {createContainer} from '@workday/canvas-kit-react/common';
-import {cssVar, createStencil, handleCsProp, CSProps} from '@workday/canvas-kit-styling';
+import {cssVar, createStencil, handleCsProp, CSProps, px2rem} from '@workday/canvas-kit-styling';
 import {base, system} from '@workday/canvas-tokens-web';
 
 import {InformationHighlightHeading} from './parts/Heading';
@@ -20,6 +19,7 @@ export const informationHighlightStencil = createStencil({
     rowGap: system.space.x2,
     padding: system.space.x4,
     borderRadius: system.shape.x1,
+    outline: `${px2rem(1)} solid transparent`,
   },
   modifiers: {
     informational: {

package/{InformationHighlight → information-highlight}/lib/parts/Body.tsx

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
-import {createStencil, cssVar, handleCsProp} from '@workday/canvas-kit-styling';
+import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {Text} from '@workday/canvas-kit-react/text';
 
@@ -10,12 +9,12 @@ const informationHighlightBodyStencil = createStencil({
       ...system.type.subtext.large,
       color: system.color.text.strong,
       gridColumn: '2',
-      margin: `0 0 ${cssVar(system.space.x2)} 0`,
+      marginBlockEnd: system.space.x2,
     };
   },
 });
 
-export const Body = createComponent('p')({
+export const Body = createComponent('div')({
   displayName: 'Body',
   Component: ({...elemProps}: ExtractProps<typeof Text, never>, ref, Element) => {
     return (

package/{InformationHighlight → information-highlight}/lib/parts/Heading.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';

package/{InformationHighlight → information-highlight}/lib/parts/Icon.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {createSubcomponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {

package/{InformationHighlight → information-highlight}/lib/parts/Link.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Hyperlink} from '@workday/canvas-kit-react/button';
 import {createComponent, ExtractProps} from '@workday/canvas-kit-react/common';
 import {createStencil, handleCsProp} from '@workday/canvas-kit-styling';

package/information-highlight/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/commonjs/information-highlight",
+  "module": "../dist/es6/information-highlight",
+  "sideEffects": false,
+  "types": "../dist/es6/information-highlight"
+}

package/loading-sparkles/lib/LoadingSparkles.tsx

@@ -1,15 +1,7 @@
-import * as React from 'react';
-import {system} from '@workday/canvas-tokens-web';
+import {base, system} from '@workday/canvas-tokens-web';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {SystemIcon} from '@workday/canvas-kit-react/icon';
-import {
-  createStyles,
-  CSProps,
-  cssVar,
-  handleCsProp,
-  px2rem,
-  keyframes,
-} from '@workday/canvas-kit-styling';
+import {SystemIcon, systemIconStencil} from '@workday/canvas-kit-react/icon';
+import {CSProps, createStencil, handleCsProp, keyframes, px2rem} from '@workday/canvas-kit-styling';
 
 import {sparkleIcon} from './sparkleIcon';
 
@@ -18,19 +10,6 @@ import {sparkleIcon} from './sparkleIcon';
  */
 const ANIMATION_DURATION_MS = 1230;
 
-// TODO: Replace with the actual color tokens when they are available.
-/**
- * Dragon Fruit colors.
- */
-const AI_COLORS = {
-  dragonFruit100: '#FBF1FF',
-  dragonFruit200: '#EFD3FF',
-  dragonFruit300: '#BE61F6',
-  dragonFruit400: '#8C17D2',
-  dragonFruit500: '#6B11A3',
-  dragonFruit600: '#4A0D71',
-} as const;
-
 /**
  * The animation for the sparkle.
  */
@@ -49,42 +28,35 @@ const LOADING_ANIMATION = keyframes({
   },
 });
 
-const loadingSparklesIconStyles = createStyles({
-  animationDuration: `${ANIMATION_DURATION_MS}ms`,
-  animationFillMode: 'both',
-  animationIterationCount: 'infinite',
-  animationName: LOADING_ANIMATION,
-  animationTimingFunction: 'ease-in-out',
-  '.wd-sparkle-fill': {
-    fill: AI_COLORS.dragonFruit400,
-  },
-  '&:nth-child(1)': {
-    animationDelay: '0ms',
-  },
-  '&:nth-child(2)': {
-    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (1/3))`,
-  },
-  '&:nth-child(3)': {
-    animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (2/3))`,
-  },
-});
-
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
-  return (
-    <SystemIcon
-      icon={sparkleIcon}
-      cs={[loadingSparklesIconStyles]}
-      size={cssVar(system.space.x3)}
-    />
-  );
+  return <SystemIcon data-part="sparkle" icon={sparkleIcon} size={system.space.x3} />;
 };
 
-const loadingSparklesStyles = createStyles({
-  display: 'inline-flex',
-  gap: px2rem(1),
+export const loadingSparklesStencil = createStencil({
+  base: {
+    display: 'inline-flex',
+    gap: px2rem(1),
+    '& [data-part="sparkle"]': {
+      animationDuration: `${ANIMATION_DURATION_MS}ms`,
+      animationFillMode: 'both',
+      animationIterationCount: 'infinite',
+      animationName: LOADING_ANIMATION,
+      animationTimingFunction: 'ease-in-out',
+      [systemIconStencil.vars.color]: base.extendedDragonFruit400,
+      '&:nth-child(1)': {
+        animationDelay: '0ms',
+      },
+      '&:nth-child(2)': {
+        animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (1/3))`,
+      },
+      '&:nth-child(3)': {
+        animationDelay: `calc(${ANIMATION_DURATION_MS}ms * (2/3))`,
+      },
+    },
+  },
 });
 
 /**
@@ -94,7 +66,7 @@ export const LoadingSparkles = createComponent('div')({
   displayName: 'LoadingSparkles',
   Component: (elemProps: CSProps, ref, Element) => {
     return (
-      <Element ref={ref} role="status" {...handleCsProp(elemProps, loadingSparklesStyles)}>
+      <Element ref={ref} role="status" {...handleCsProp(elemProps, loadingSparklesStencil())}>
         <Sparkle />
         <Sparkle />
         <Sparkle />

package/loading-sparkles/lib/sparkleIcon.ts

@@ -4,7 +4,7 @@ export const sparkleIcon: CanvasSystemIcon = {
   name: 'sparkle',
   type: CanvasIconTypes.System,
   svg: `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C6.15942 0 6.34301 0.0967055 6.38274 0.308112C6.64764 1.72077 7.21903 2.91761 8.0963 3.82655C8.97292 4.73482 10.1632 5.36427 11.6812 5.62996C12.1068 5.70416 12.1058 6.29577 11.6812 6.37004C10.1632 6.63573 8.97292 7.26518 8.0963 8.17345C7.21903 9.08239 6.64765 10.2792 6.38276 11.6918C6.34303 11.9032 6.15942 12 6 12C5.84058 12 5.65699 11.9033 5.61726 11.6919C5.35236 10.2792 4.78097 9.08245 3.9037 8.17353C3.02708 7.26528 1.8368 6.63583 0.31883 6.37004C-0.106757 6.29584 -0.105799 5.70423 0.31884 5.62996C1.8368 5.36427 3.02708 4.73482 3.9037 3.82655C4.78097 2.91761 5.35235 1.72083 5.61724 0.308177C5.65697 0.0967702 5.84058 0 6 0Z" class="wd-sparkle-fill"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M6 0C6.15942 0 6.34301 0.0967055 6.38274 0.308112C6.64764 1.72077 7.21903 2.91761 8.0963 3.82655C8.97292 4.73482 10.1632 5.36427 11.6812 5.62996C12.1068 5.70416 12.1058 6.29577 11.6812 6.37004C10.1632 6.63573 8.97292 7.26518 8.0963 8.17345C7.21903 9.08239 6.64765 10.2792 6.38276 11.6918C6.34303 11.9032 6.15942 12 6 12C5.84058 12 5.65699 11.9033 5.61726 11.6919C5.35236 10.2792 4.78097 9.08245 3.9037 8.17353C3.02708 7.26528 1.8368 6.63583 0.31883 6.37004C-0.106757 6.29584 -0.105799 5.70423 0.31884 5.62996C1.8368 5.36427 3.02708 4.73482 3.9037 3.82655C4.78097 2.91761 5.35235 1.72083 5.61724 0.308177C5.65697 0.0967702 5.84058 0 6 0Z" class="wd-icon-fill wd-sparkle-fill" />
   </svg>`,
   filename: 'wd-icon-sparkle.svg',
 };