@workday/canvas-kit-preview-react 11.0.0-alpha.697-next.0 → 11.0.0-alpha.700-next.0

package/dist/commonjs/form-field/lib/FormField.js

@@ -15,7 +15,7 @@ const FormFieldLabel_1 = require("./FormFieldLabel");
 const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldContainer_1 = require("./FormFieldContainer");
 const formFieldStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "1xggwa7", styles: "border:none;padding:0px;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
+    base: { name: "1elbum1", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
     modifiers: {
         modifiers: {
             true: { name: "6316w2", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }

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

@@ -12,9 +12,9 @@ const hooks_1 = require("./hooks");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const asteriskStyles = canvas_kit_styling_1.createStyles({ name: "crjtcq", styles: "margin-inline-start:var(--cnvs-sys-space-x1, 0.25rem);font-size:1.25rem;font-weight:400px;text-decoration:unset;color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" });
+const asteriskStyles = canvas_kit_styling_1.createStyles({ name: "1iydue3", styles: "margin-inline-start:var(--cnvs-sys-space-x1, 0.25rem);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" });
 const labelStencil = canvas_kit_styling_1.createStencil({
-    base: { name: "fjkyc4", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium, 500);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));padding-inline-start:0px;margin-bottom:var(--cnvs-sys-space-x1, 0.25rem);display:flex;align-items:center;min-width:180px;" },
+    base: { name: "9lgv5i", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium, 500);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1, 0.25rem);display:flex;align-items:center;min-width:180px;" },
     modifiers: {
         modifiers: {
             horizontal: { name: "1hnsmpu", styles: "float:left;max-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" },

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

@@ -45,8 +45,8 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = canvas_kit_styling_1.keyframes({ name: "1lzmfb3", styles: "0%, 79%, 100%{opacity:0.2px;transform:scale(0.55);}27%{opacity:1px;transform:scale(1);}53%{opacity:0.6px;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = canvas_kit_styling_1.createStyles({ name: "5995an", styles: "animation-duration:1230pxms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1lzmfb3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230pxms * (1/3));}&:nth-child(3){animation-delay:calc(1230pxms * (2/3));}" });
+const LOADING_ANIMATION = canvas_kit_styling_1.keyframes({ name: "1w9fjo1", 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 = canvas_kit_styling_1.createStyles({ name: "1m6e4ch", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1w9fjo1;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. ✨
  */

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

@@ -15,7 +15,7 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 /**
  * Styles for RadioGroup
  */
-const radioGroupStyles = canvas_kit_styling_1.createStencil({
+const radioGroupStencil = canvas_kit_styling_1.createStencil({
     base: { name: "1lnyyji", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1, 0.25rem);gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding:0.625rem var(--cnvs-sys-space-x3, calc(0.25rem * 3)) var(--cnvs-sys-space-x2, calc(0.25rem * 2));margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         modifiers: {
@@ -23,7 +23,7 @@ const radioGroupStyles = canvas_kit_styling_1.createStencil({
             alert: { name: "qmneoc", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1)), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base, rgba(255,161,38,1));" }
         }
     }
-}, "radio-group-styles");
+}, "radio-group");
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *
@@ -66,5 +66,5 @@ exports.RadioGroup = common_1.createContainer('div')({
         Label: RadioLabel_1.RadioLabel,
     },
 })(({ children, error, theme, ...elemProps }, Element) => {
-    return react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, radioGroupStyles({ error }))), children);
+    return react_1.default.createElement(Element, Object.assign({}, layout_1.mergeStyles(elemProps, radioGroupStencil({ error }))), children);
 });

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

@@ -12,9 +12,9 @@ const RadioInput_1 = require("./RadioInput");
 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 radioLabelStyles = canvas_kit_styling_1.createStencil({
+const radioLabelStencil = canvas_kit_styling_1.createStencil({
     base: { name: "1ak69fu", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));position:relative;gap:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }
-}, "radio-label-styles");
+}, "radio-label");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = common_1.createSubcomponent('label')({
     displayName: 'Radio.Label',
@@ -49,5 +49,5 @@ exports.RadioLabel = common_1.createSubcomponent('label')({
     },
 })(({ children, variant, disabled, value, ...elemProps }, Element) => {
     return (react_1.default.createElement(exports.RadioLabelContext.Provider, { value: { variant, disabled } },
-        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioLabelStyles({ variant }))), children)));
+        react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioLabelStencil({ variant }))), children)));
 });

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

@@ -12,7 +12,7 @@ const text_1 = require("@workday/canvas-kit-react/text");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const radioTextStyles = canvas_kit_styling_1.createStencil({
+const radioTextStencil = canvas_kit_styling_1.createStencil({
     base: { name: "nwt3co", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
     modifiers: {
         modifiers: {
@@ -28,11 +28,11 @@ const radioTextStyles = canvas_kit_styling_1.createStencil({
             styles: { name: "1c0ay3d", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);" }
         }
     ]
-}, "radio-text-styles");
+}, "radio-text");
 exports.RadioText = common_1.createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel_1.useRadioModel,
 })(({ children, ...elemProps }, Element) => {
     const { variant, disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
-    return (react_1.default.createElement(text_1.Text, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioTextStyles({ variant, disabled }))), children));
+    return (react_1.default.createElement(text_1.Text, Object.assign({ as: Element }, layout_1.mergeStyles(elemProps, radioTextStencil({ variant, disabled }))), children));
 });

package/dist/commonjs/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAO/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAY5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAY5B,CAAC"}

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

@@ -12,18 +12,18 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
-const radioInputStyles = canvas_kit_styling_1.createStencil({
+const radioInputStencil = canvas_kit_styling_1.createStencil({
     base: { name: "17rixmy", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));border:5px solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 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, rgba(255,255,255,1));border:0.3125rem solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&: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-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         modifiers: {
             inverse: { name: "1e4i6j2", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled, 0.4);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&: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-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&: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-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);}" }
         }
     }
-}, "radio-input-styles");
+}, "radio-input");
 const StyledRadioInput = common_1.createComponent('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
-        return react_1.default.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, radioInputStyles({ variant }))));
+        return react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, radioInputStencil({ variant }))));
     },
 });
 const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
@@ -41,7 +41,7 @@ const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
         const { disabled } = react_1.default.useContext(RadioLabel_1.RadioLabelContext);
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
     },
 });
 /**

package/dist/commonjs/table/lib/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAUd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAUd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}

package/dist/commonjs/table/lib/Table.js

@@ -16,7 +16,9 @@ const TableFooter_1 = require("./TableFooter");
 const TableCaption_1 = require("./TableCaption");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
-const tableStyles = canvas_kit_styling_1.createStyles({ name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" });
+const tableStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" }
+}, "table");
 /**
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
  *
@@ -62,7 +64,7 @@ export default function App() {
 exports.Table = common_1.createComponent('table')({
     displayName: 'Table',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableStencil())), children));
     },
     subComponents: {
         /**

package/dist/commonjs/table/lib/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/commonjs/table/lib/TableBody.js

@@ -8,10 +8,12 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const bodyStyles = canvas_kit_styling_1.createStyles({ name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" });
+const tableBodyStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+}, "table-body");
 exports.TableBody = common_1.createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, bodyStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableBodyStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableCaption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,0MASvB,CAAC"}
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,0MASvB,CAAC"}

package/dist/commonjs/table/lib/TableCaption.js

@@ -9,10 +9,12 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 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 captionStyles = canvas_kit_styling_1.createStyles({ name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" });
+const tableCaptionStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" }
+}, "table-caption");
 exports.TableCaption = common_1.createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, captionStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableCaptionStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}

package/dist/commonjs/table/lib/TableCell.js

@@ -9,10 +9,12 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 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 cellStyles = canvas_kit_styling_1.createStyles({ name: "iww62y", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;box-sizing:border-box;" });
+const tableCellStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "iww62y", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));grid-template-columns:1fr;justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;box-sizing:border-box;" }
+}, "table-cell");
 exports.TableCell = common_1.createComponent('td')({
     displayName: 'Table.Cell',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, cellStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableCellStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableFooter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableFooter.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,WAAW,wMAStB,CAAC"}
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableFooter.tsx"],"names":[],"mappings":"AAYA,eAAO,MAAM,WAAW,wMAStB,CAAC"}

package/dist/commonjs/table/lib/TableFooter.js

@@ -8,10 +8,12 @@ const react_1 = __importDefault(require("react"));
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
-const footerStyles = canvas_kit_styling_1.createStyles({ name: "197vc7s", styles: "display:grid;box-sizing:border-box;" });
+const tableFooterStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "197vc7s", styles: "display:grid;box-sizing:border-box;" }
+}, "table-footer");
 exports.TableFooter = common_1.createComponent('tfoot')({
     displayName: 'Table.Footer',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, footerStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableFooterStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableHead.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHead.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHead.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/commonjs/table/lib/TableHead.js

@@ -9,10 +9,12 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 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 headStyles = canvas_kit_styling_1.createStyles({ name: "sv3y8l", styles: "display:grid;background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));min-height:3rem;box-sizing:border-box;th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" });
+const tableHeadStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "sv3y8l", styles: "display:grid;background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));min-height:3rem;box-sizing:border-box;th {&:first-of-type{border-inline-start:none;}&:last-of-type{border-inline-end:none;}}" }
+}, "table-head");
 exports.TableHead = common_1.createComponent('thead')({
     displayName: 'Table.Head',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, headStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableHeadStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHeader.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,WAAW,qMAStB,CAAC"}
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHeader.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,qMAStB,CAAC"}

package/dist/commonjs/table/lib/TableHeader.js

@@ -9,10 +9,12 @@ const layout_1 = require("@workday/canvas-kit-react/layout");
 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 headerStyles = canvas_kit_styling_1.createStyles({ name: "mt03mc", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium, 500);box-sizing:border-box;" });
+const tableHeaderStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "mt03mc", styles: "display:grid;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-400, rgba(223,226,230,1));justify-content:start;min-height:3.5rem;padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));word-break:break-word;font-weight:var(--cnvs-sys-font-weight-medium, 500);box-sizing:border-box;" }
+}, "table-header");
 exports.TableHeader = common_1.createComponent('th')({
     displayName: 'Table.Header',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, headerStyles)), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableHeaderStencil())), children));
     },
 });

package/dist/commonjs/table/lib/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,QAAQ,qMAuBnB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,QAAQ,qMAuBnB,CAAC"}

package/dist/commonjs/table/lib/TableRow.js

@@ -10,7 +10,9 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const childrenVars = canvas_kit_styling_1.createVars({ id: "cnvs-children", args: ["cellNumber"] });
 // Styles for rows including dynamic sizing for amount of cells within a row
-const rowStyles = canvas_kit_styling_1.createStyles({ name: "s9e95c", styles: "display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));box-sizing:border-box;" });
+const tableRowStencil = canvas_kit_styling_1.createStencil({
+    base: { name: "s9e95c", styles: "display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--cnvs-children-cellNumber), minmax(10rem, 1fr));box-sizing:border-box;" }
+}, "table-row");
 exports.TableRow = common_1.createComponent('tr')({
     displayName: 'Table.Row',
     Component: ({ children, ...elemProps }, ref, Element) => {
@@ -22,6 +24,6 @@ exports.TableRow = common_1.createComponent('tr')({
          * This is the calculated amount of valid React children
          */
         const childrenArray = validChildren(children).length;
-        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, [rowStyles, { [childrenVars.cellNumber]: childrenArray }])), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, [tableRowStencil(), { [childrenVars.cellNumber]: childrenArray }])), children));
     },
 });

package/dist/es6/form-field/lib/FormField.js

@@ -9,7 +9,7 @@ import { FormFieldLabel } from './FormFieldLabel';
 import { FormFieldHint } from './FormFieldHint';
 import { FormFieldContainer } from './FormFieldContainer';
 const formFieldStencil = createStencil({
-    base: { name: "1xggwa7", styles: "border:none;padding:0px;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
+    base: { name: "1elbum1", styles: "border:none;padding:0;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
     modifiers: {
         modifiers: {
             true: { name: "6316w2", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }

package/dist/es6/form-field/lib/FormFieldLabel.js

@@ -6,9 +6,9 @@ import { useFormFieldLabel, useFormFieldModel } from './hooks';
 import { createStencil, createStyles } from '@workday/canvas-kit-styling';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { base, brand, system } from '@workday/canvas-tokens-web';
-const asteriskStyles = createStyles({ name: "crjtcq", styles: "margin-inline-start:var(--cnvs-sys-space-x1, 0.25rem);font-size:1.25rem;font-weight:400px;text-decoration:unset;color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" });
+const asteriskStyles = createStyles({ name: "1iydue3", styles: "margin-inline-start:var(--cnvs-sys-space-x1, 0.25rem);font-size:1.25rem;font-weight:400;text-decoration:unset;color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" });
 const labelStencil = createStencil({
-    base: { name: "fjkyc4", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium, 500);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));padding-inline-start:0px;margin-bottom:var(--cnvs-sys-space-x1, 0.25rem);display:flex;align-items:center;min-width:180px;" },
+    base: { name: "9lgv5i", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-medium, 500);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));padding-inline-start:0;margin-bottom:var(--cnvs-sys-space-x1, 0.25rem);display:flex;align-items:center;min-width:180px;" },
     modifiers: {
         modifiers: {
             horizontal: { name: "1hnsmpu", styles: "float:left;max-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" },

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

@@ -23,8 +23,8 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = keyframes({ name: "1lzmfb3", styles: "0%, 79%, 100%{opacity:0.2px;transform:scale(0.55);}27%{opacity:1px;transform:scale(1);}53%{opacity:0.6px;transform:scale(0.7);}" });
-const loadingSparklesIconStyles = createStyles({ name: "5995an", styles: "animation-duration:1230pxms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1lzmfb3;animation-timing-function:ease-in-out;.wd-sparkle-fill{fill:#8C17D2;}&:nth-child(1){animation-delay:0ms;}&:nth-child(2){animation-delay:calc(1230pxms * (1/3));}&:nth-child(3){animation-delay:calc(1230pxms * (2/3));}" });
+const LOADING_ANIMATION = keyframes({ name: "1w9fjo1", 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 = createStyles({ name: "1m6e4ch", styles: "animation-duration:1230ms;animation-fill-mode:both;animation-iteration-count:infinite;animation-name:animation-1w9fjo1;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. ✨
  */

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

@@ -9,7 +9,7 @@ import { brand, system } from '@workday/canvas-tokens-web';
 /**
  * Styles for RadioGroup
  */
-const radioGroupStyles = createStencil({
+const radioGroupStencil = createStencil({
     base: { name: "1lnyyji", styles: "display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1, 0.25rem);gap:var(--cnvs-sys-space-x2, calc(0.25rem * 2));padding:0.625rem var(--cnvs-sys-space-x3, calc(0.25rem * 3)) var(--cnvs-sys-space-x2, calc(0.25rem * 2));margin:calc(var(--cnvs-sys-space-x1) * -1) calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         modifiers: {
@@ -17,7 +17,7 @@ const radioGroupStyles = createStencil({
             alert: { name: "qmneoc", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest, rgba(192,108,0,1)), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base, rgba(255,161,38,1));" }
         }
     }
-}, "radio-group-styles");
+}, "radio-group");
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *
@@ -60,5 +60,5 @@ export const RadioGroup = createContainer('div')({
         Label: RadioLabel,
     },
 })(({ children, error, theme, ...elemProps }, Element) => {
-    return React.createElement(Element, Object.assign({}, mergeStyles(elemProps, radioGroupStyles({ error }))), children);
+    return React.createElement(Element, Object.assign({}, mergeStyles(elemProps, radioGroupStencil({ error }))), children);
 });

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

@@ -6,9 +6,9 @@ import { RadioInput } from './RadioInput';
 import { RadioText } from './RadioText';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-const radioLabelStyles = createStencil({
+const radioLabelStencil = createStencil({
     base: { name: "1ak69fu", styles: "align-items:flex-start;min-height:var(--cnvs-sys-space-x6, calc(0.25rem * 6));position:relative;gap:var(--cnvs-sys-space-x3, calc(0.25rem * 3));" }
-}, "radio-label-styles");
+}, "radio-label");
 export const RadioLabelContext = React.createContext({});
 export const RadioLabel = createSubcomponent('label')({
     displayName: 'Radio.Label',
@@ -43,5 +43,5 @@ export const RadioLabel = createSubcomponent('label')({
     },
 })(({ children, variant, disabled, value, ...elemProps }, Element) => {
     return (React.createElement(RadioLabelContext.Provider, { value: { variant, disabled } },
-        React.createElement(Flex, Object.assign({ as: Element }, mergeStyles(elemProps, radioLabelStyles({ variant }))), children)));
+        React.createElement(Flex, Object.assign({ as: Element }, mergeStyles(elemProps, radioLabelStencil({ variant }))), children)));
 });

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

@@ -6,7 +6,7 @@ import { Text } from '@workday/canvas-kit-react/text';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
-const radioTextStyles = createStencil({
+const radioTextStencil = createStencil({
     base: { name: "nwt3co", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);cursor:pointer;opacity:1;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));" },
     modifiers: {
         modifiers: {
@@ -22,11 +22,11 @@ const radioTextStyles = createStencil({
             styles: { name: "1c0ay3d", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);" }
         }
     ]
-}, "radio-text-styles");
+}, "radio-text");
 export const RadioText = createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel,
 })(({ children, ...elemProps }, Element) => {
     const { variant, disabled } = React.useContext(RadioLabelContext);
-    return (React.createElement(Text, Object.assign({ as: Element }, mergeStyles(elemProps, radioTextStyles({ variant, disabled }))), children));
+    return (React.createElement(Text, Object.assign({ as: Element }, mergeStyles(elemProps, radioTextStencil({ variant, disabled }))), children));
 });

package/dist/es6/radio/lib/StyledRadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAO,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAC,OAAO,EAA4C,MAAM,6BAA6B,CAAC;AAO/F,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAY5B,CAAC"}
+{"version":3,"file":"StyledRadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/StyledRadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,YAAY,EACb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAoB,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAC,OAAO,EAA8B,MAAM,6BAA6B,CAAC;AAOjF,MAAM,WAAW,sBAAuB,SAAQ,OAAO;IACrD,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8MD,MAAM,WAAW,sBAAuB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,OAAO,CAAC;IAC/E,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8FAY5B,CAAC"}

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

@@ -1,23 +1,23 @@
 import React from 'react';
 import { focusRing, createComponent, } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
-import { calc, createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { Flex, mergeStyles } from '@workday/canvas-kit-react/layout';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, brand, system } from '@workday/canvas-tokens-web';
 import { RadioLabelContext } from './RadioLabel';
 const radioWidth = 18;
 const radioHeight = 18;
-const radioInputStyles = createStencil({
+const radioInputStencil = createStencil({
     base: { name: "17rixmy", styles: "cursor:pointer;opacity:1;height:1.125rem;width:1.125rem;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));position:absolute;margin:0;&:focus-visible, &.focus, &:active{outline:transparent;}&:disabled, &.disabled{cursor:auto;+ .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-accent, rgba(255,255,255,1));border:5px solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}}+ .cnvs-radio-check{display:flex;flex-direction:column;align-items:center;background-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));box-sizing:border-box;border:0.0625rem solid var(--cnvs-base-palette-licorice-200, rgba(123,133,143,1));height:1.125rem;width:1.125rem;justify-content:center;pointer-events:none;position:absolute;transition:border 200ms ease, background 200ms;opacity:1;}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-licorice-500, rgba(51,61,71,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-blueberry-400, rgba(8,117,225,1));box-shadow:0 0 0 0px var(--cnvs-base-palette-french-vanilla-100), 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, rgba(255,255,255,1));border:0.3125rem solid var(--cnvs-brand-primary-base, rgba(8,117,225,1));}&: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-base-palette-french-vanilla-100), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
     modifiers: {
         modifiers: {
             inverse: { name: "1e4i6j2", styles: "+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled, 0.4);+ .cnvs-radio-check{background-color:var(--cnvs-base-palette-soap-100, rgba(246,247,248,1));border-color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));opacity:var(--cnvs-sys-opacity-disabled, 0.4);}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}}&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check{border-color:var(--cnvs-base-palette-soap-300, rgba(232,235,237,1));}&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check{background-color:var(--cnvs-brand-primary-base, rgba(8,117,225,1));border-color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));}&: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-base-palette-black-pepper-400), 0 0 0 2px var(--cnvs-base-palette-french-vanilla-100);}&: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-base-palette-black-pepper-400), 0 0 0 4px var(--cnvs-base-palette-french-vanilla-100);}" }
         }
     }
-}, "radio-input-styles");
+}, "radio-input");
 const StyledRadioInput = createComponent('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
-        return React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, radioInputStyles({ variant }))));
+        return React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, radioInputStencil({ variant }))));
     },
 });
 const radioInputWrapperStyles = createStencil({
@@ -35,7 +35,7 @@ const RadioInputWrapper = createComponent(Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
         const { disabled } = React.useContext(RadioLabelContext);
-        return (React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, radioInputWrapperStyles({ variant, disabled }))), children));
     },
 });
 /**

package/dist/es6/table/lib/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAUd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAyBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAUd;;;;;;;;;;;;;;;;;;;;;MAqBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;IAEF;;;;;;;;;;;;;;;;;;;;MAoBE;;CAGJ,CAAC"}

package/dist/es6/table/lib/Table.js

@@ -8,9 +8,11 @@ import { TableHeader } from './TableHeader';
 import { TableCell } from './TableCell';
 import { TableFooter } from './TableFooter';
 import { TableCaption } from './TableCaption';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
-const tableStyles = createStyles({ name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" });
+const tableStencil = createStencil({
+    base: { name: "1jt00fi", styles: "font-family:var(--cnvs-base-font-family-50, \"Roboto\");font-weight:var(--cnvs-base-font-weight-400, 400);line-height:var(--cnvs-base-line-height-100, 1.25rem);font-size:var(--cnvs-base-font-size-75, 0.875rem);letter-spacing:var(--cnvs-base-letter-spacing-150, 0.015rem);display:grid;border:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));border-radius:var(--cnvs-sys-shape-x2, calc(0.25rem * 2));overflow:auto;color:var(--cnvs-base-palette-black-pepper-300, rgba(73,73,73,1));box-sizing:border-box;" }
+}, "table");
 /**
  * `Table` is a simple styled compound component that renders a [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to present information in a two-dimensional table comprised of rows and columns of cells containing data.
  *
@@ -56,7 +58,7 @@ export default function App() {
 export const Table = createComponent('table')({
     displayName: 'Table',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableStyles)), children));
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableStencil())), children));
     },
     subComponents: {
         /**

package/dist/es6/table/lib/TableBody.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AAgCA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/es6/table/lib/TableBody.js

@@ -1,11 +1,13 @@
 import React from 'react';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStyles } from '@workday/canvas-kit-styling';
-const bodyStyles = createStyles({ name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" });
+import { createStencil } from '@workday/canvas-kit-styling';
+const tableBodyStencil = createStencil({
+    base: { name: "1aq46he", styles: "display:grid;box-sizing:border-box;tr {&:last-of-type{td, th{border-bottom:none;}}&:first-of-type{td, th{border-top:none;}}}td {&:last-of-type{border-inline-end:none;}&:first-of-type{border-inline-start:none;}}" }
+}, "table-body");
 export const TableBody = createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, bodyStyles)), children));
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableBodyStencil())), children));
     },
 });

package/dist/es6/table/lib/TableCaption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,0MASvB,CAAC"}
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,YAAY,0MASvB,CAAC"}

package/dist/es6/table/lib/TableCaption.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { createComponent } from '@workday/canvas-kit-react/common';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { createStencil, px2rem } from '@workday/canvas-kit-styling';
 import { base, system } from '@workday/canvas-tokens-web';
-const captionStyles = createStyles({ name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" });
+const tableCaptionStencil = createStencil({
+    base: { name: "mnuok4", styles: "display:flex;border-bottom:0.0625rem solid var(--cnvs-base-palette-soap-500, rgba(206,211,217,1));padding:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) var(--cnvs-sys-space-x4, calc(0.25rem * 4));box-sizing:border-box;" }
+}, "table-caption");
 export const TableCaption = createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, captionStyles)), children));
+        return (React.createElement(Element, Object.assign({ ref: ref }, mergeStyles(elemProps, tableCaptionStencil())), children));
     },
 });

package/dist/es6/table/lib/TableCell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}