@workday/canvas-kit-preview-react 11.0.0-alpha.682-next.0 → 11.0.0-alpha.696-next.0

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

@@ -15,22 +15,13 @@ const FormFieldLabel_1 = require("./FormFieldLabel");
 const FormFieldHint_1 = require("./FormFieldHint");
 const FormFieldContainer_1 = require("./FormFieldContainer");
 const formFieldStencil = canvas_kit_styling_1.createStencil({
-    base: {
-        border: 'none',
-        padding: 0,
-        margin: `0 0 ${canvas_tokens_web_1.system.space.x6}`,
-    },
+    base: { name: "1xggwa7", styles: "border:none;padding:0px;margin:0 0 var(--cnvs-sys-space-x6, calc(0.25rem * 6));" },
     modifiers: {
-        grow: {
-            true: {
-                width: '100%',
-                '[data-width="ck-formfield-width"]': {
-                    width: '100%',
-                },
-            },
-        },
-    },
-});
+        modifiers: {
+            true: { name: "6316w2", styles: "width:100%;[data-width=\"ck-formfield-width\"]{width:100%;}" }
+        }
+    }
+}, "form-field");
 /**
  * Use `FormField` to wrap input components to make them accessible. You can customize the field
  * by passing in `TextInput`, `Select`, `RadioGroup` and other form elements to `FormField.Input` through the `as` prop.

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

@@ -9,11 +9,8 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const hooks_1 = require("./hooks");
 const containerBaseStyles = canvas_kit_styling_1.createStencil({
-    base: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-});
+    base: { name: "j7qwjs", styles: "display:flex;flex-direction:column;" }
+}, "container-base-styles");
 exports.FormFieldContainer = common_1.createSubcomponent('div')({
     displayName: 'FormField.Container',
     modelHook: hooks_1.useFormFieldModel,

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

@@ -12,18 +12,14 @@ const hooks_1 = require("./hooks");
 const text_1 = require("@workday/canvas-kit-react/text");
 const layout_1 = require("@workday/canvas-kit-react/layout");
 const formFieldHintStencil = canvas_kit_styling_1.createStencil({
-    base: {
-        margin: `${canvas_tokens_web_1.system.space.x2} 0 0`,
-    },
+    base: { name: "1dzfw9d", styles: "margin:var(--cnvs-sys-space-x2, calc(0.25rem * 2)) 0 0;" },
     modifiers: {
-        error: {
-            error: {
-                color: canvas_tokens_web_1.brand.error.base,
-            },
-            alert: {},
-        },
-    },
-});
+        modifiers: {
+            error: { name: "kze4di", styles: "color:var(--cnvs-brand-error-base, rgba(222,46,33,1));" },
+            alert: {}
+        }
+    }
+}, "form-field-hint");
 exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: hooks_1.useFormFieldModel,

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

@@ -12,56 +12,30 @@ 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({
-    marginInlineStart: canvas_tokens_web_1.system.space.x1,
-    fontSize: tokens_1.type.properties.fontSizes[20],
-    fontWeight: tokens_1.type.properties.fontWeights.regular,
-    textDecoration: 'unset',
-    color: canvas_tokens_web_1.brand.error.base,
-});
+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 labelStencil = canvas_kit_styling_1.createStencil({
-    base: {
-        ...canvas_tokens_web_1.system.type.subtext.large,
-        fontWeight: canvas_tokens_web_1.system.fontWeight.medium,
-        color: canvas_tokens_web_1.base.blackPepper300,
-        paddingInlineStart: 0,
-        marginBottom: canvas_tokens_web_1.system.space.x1,
-        display: 'flex',
-        alignItems: 'center',
-        minWidth: '180px',
-    },
+    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;" },
     modifiers: {
-        orientation: {
-            horizontal: {
-                float: 'left',
-                maxHeight: canvas_tokens_web_1.system.space.x10,
-            },
-            vertical: {
-                width: '100%',
-            },
-        },
-        variant: {
-            error: { color: canvas_tokens_web_1.base.cinnamon500 },
-            hint: { color: canvas_tokens_web_1.base.licorice300 },
-            inverse: { color: canvas_tokens_web_1.base.frenchVanilla100 },
+        modifiers: {
+            horizontal: { name: "1hnsmpu", styles: "float:left;max-height:var(--cnvs-sys-space-x10, calc(0.25rem * 10));" },
+            vertical: { name: "8atqhb", styles: "width:100%;" }
         },
-        disabled: {
-            true: {
-                cursor: 'default',
-                color: canvas_tokens_web_1.base.licorice100,
-            },
+        modifiers: {
+            error: { name: "11i11uz", styles: "color:var(--cnvs-base-palette-cinnamon-500, rgba(222,46,33,1));" },
+            hint: { name: "1g2oxii", styles: "color:var(--cnvs-base-palette-licorice-300, rgba(94,106,117,1));" },
+            inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
         },
+        modifiers: {
+            true: { name: "1c1k6kz", styles: "cursor:default;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
+        }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: {
-                opacity: canvas_tokens_web_1.system.opacity.disabled,
-                color: canvas_tokens_web_1.base.frenchVanilla100,
-            },
-        },
-    ],
-});
+            styles: { name: "rrp7fc", styles: "opacity:var(--cnvs-sys-opacity-disabled, 0.4);color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
+        }
+    ]
+}, "label");
 exports.FormFieldLabel = common_1.createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: hooks_1.useFormFieldModel,

package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingSparkles.d.ts","sourceRoot":"","sources":["../../../../loading-sparkles/lib/LoadingSparkles.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAe,OAAO,EAA+B,MAAM,6BAA6B,CAAC;AA8EhG;;GAEG;AACH,eAAO,MAAM,eAAe,6EAW1B,CAAC"}
+{"version":3,"file":"LoadingSparkles.d.ts","sourceRoot":"","sources":["../../../../loading-sparkles/lib/LoadingSparkles.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,OAAO,EAKR,MAAM,6BAA6B,CAAC;AA8ErC;;GAEG;AACH,eAAO,MAAM,eAAe,6EAW1B,CAAC"}

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

@@ -21,7 +21,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingSparkles = void 0;
 const React = __importStar(require("react"));
-const css_1 = require("@emotion/css");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const common_1 = require("@workday/canvas-kit-react/common");
 const icon_1 = require("@workday/canvas-kit-react/icon");
@@ -46,49 +45,15 @@ const AI_COLORS = {
 /**
  * The animation for the sparkle.
  */
-const LOADING_ANIMATION = css_1.keyframes({
-    '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({
-    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))`,
-    },
-});
+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));}" });
 /**
  * An individual loading sparkle. ✨
  */
 const Sparkle = () => {
     return (React.createElement(icon_1.SystemIcon, { icon: sparkleIcon_1.sparkleIcon, cs: [loadingSparklesIconStyles], size: canvas_kit_styling_1.cssVar(canvas_tokens_web_1.system.space.x3) }));
 };
-const loadingSparklesStyles = canvas_kit_styling_1.createStyles({
-    display: 'inline-flex',
-    gap: canvas_kit_styling_1.px2rem(1),
-});
+const loadingSparklesStyles = canvas_kit_styling_1.createStyles({ name: "14l8nwz", 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/radio/lib/RadioGroup.js

@@ -16,27 +16,14 @@ const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
  * Styles for RadioGroup
  */
 const radioGroupStyles = canvas_kit_styling_1.createStencil({
-    base: {
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: canvas_tokens_web_1.system.shape.x1,
-        gap: canvas_tokens_web_1.system.space.x2,
-        padding: `${canvas_kit_styling_1.px2rem(10)} ${canvas_tokens_web_1.system.space.x3} ${canvas_tokens_web_1.system.space.x2}`,
-        margin: `${canvas_kit_styling_1.calc.negate(canvas_tokens_web_1.system.space.x1)} ${canvas_kit_styling_1.calc.negate(canvas_tokens_web_1.system.space.x3)}`,
-        transition: '100ms box-shadow',
-        width: 'fit-content',
-    },
+    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: {
-        error: {
-            error: {
-                boxShadow: `inset 0 0 0 ${canvas_kit_styling_1.px2rem(2)} ${canvas_tokens_web_1.brand.error.base}`,
-            },
-            alert: {
-                boxShadow: `inset 0 0 0 ${canvas_kit_styling_1.px2rem(1)} ${canvas_tokens_web_1.brand.alert.darkest}, inset 0 0 0 ${canvas_kit_styling_1.px2rem(3)} ${canvas_tokens_web_1.brand.alert.base}`,
-            },
-        },
-    },
-});
+        modifiers: {
+            error: { name: "1g7vnq3", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base, rgba(222,46,33,1));" },
+            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");
 /**
  * Use `RadioGroup` to group a collection of `RadioGroup.RadioButton` components under a common `name`.
  *

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

@@ -13,13 +13,8 @@ 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({
-    base: {
-        alignItems: 'flex-start',
-        minHeight: canvas_tokens_web_1.system.space.x6,
-        position: 'relative',
-        gap: canvas_tokens_web_1.system.space.x3,
-    },
-});
+    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");
 exports.RadioLabelContext = react_1.default.createContext({});
 exports.RadioLabel = common_1.createSubcomponent('label')({
     displayName: 'Radio.Label',

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

@@ -13,32 +13,22 @@ 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({
-    base: {
-        ...canvas_tokens_web_1.system.type.subtext.large,
-        cursor: 'pointer',
-        opacity: '1',
-        color: canvas_tokens_web_1.base.blackPepper300,
-    },
+    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: {
-        variant: {
-            inverse: {
-                color: canvas_tokens_web_1.base.frenchVanilla100,
-            },
-        },
-        disabled: {
-            true: {
-                cursor: 'none',
-                color: canvas_tokens_web_1.base.licorice100,
-            },
+        modifiers: {
+            inverse: { name: "1j116kj", styles: "color:var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1));" }
         },
+        modifiers: {
+            true: { name: "1iqk4gr", styles: "cursor:none;color:var(--cnvs-base-palette-licorice-100, rgba(161,170,179,1));" }
+        }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { color: canvas_tokens_web_1.base.frenchVanilla100, opacity: canvas_tokens_web_1.system.opacity.disabled },
-        },
-    ],
-});
+            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");
 exports.RadioText = common_1.createSubcomponent('span')({
     displayName: 'RadioButton.Text',
     modelHook: useRadioModel_1.useRadioModel,

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

@@ -13,140 +13,13 @@ const RadioLabel_1 = require("./RadioLabel");
 const radioWidth = 18;
 const radioHeight = 18;
 const radioInputStyles = canvas_kit_styling_1.createStencil({
-    base: {
-        cursor: 'pointer',
-        opacity: '1',
-        height: canvas_kit_styling_1.px2rem(radioHeight),
-        width: canvas_kit_styling_1.px2rem(radioWidth),
-        borderRadius: canvas_tokens_web_1.system.shape.round,
-        position: 'absolute',
-        margin: '0',
-        '&:focus-visible, &.focus, &:active': {
-            outline: 'transparent',
-        },
-        '&:disabled, &.disabled': {
-            cursor: 'auto',
-            '+ .cnvs-radio-check': {
-                borderColor: canvas_tokens_web_1.base.licorice100,
-                backgroundColor: canvas_tokens_web_1.base.soap100,
-            },
-            '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-                borderColor: canvas_tokens_web_1.base.licorice100,
-            },
-            // This creates the inner circle when the Radio is checked.
-            // The backgroundColor represents the dot in the middle of the radio.
-            // The borderColor represents the border around the middle dot of the radio.
-            '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-                backgroundColor: canvas_tokens_web_1.brand.primary.accent,
-                border: `5px solid ${canvas_tokens_web_1.brand.primary.base}`, // inner circle border color
-            },
-        },
-        // Circle element styles the radio as checked or unchecked
-        '+ .cnvs-radio-check': {
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            backgroundColor: canvas_tokens_web_1.base.frenchVanilla100,
-            borderRadius: canvas_tokens_web_1.system.shape.round,
-            boxSizing: 'border-box',
-            border: `${canvas_kit_styling_1.px2rem(1)} solid ${canvas_tokens_web_1.base.licorice200}`,
-            height: canvas_kit_styling_1.px2rem(radioHeight),
-            width: canvas_kit_styling_1.px2rem(radioWidth),
-            justifyContent: 'center',
-            pointerEvents: 'none',
-            position: 'absolute',
-            transition: 'border 200ms ease, background 200ms',
-            opacity: '1',
-        },
-        '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-            borderColor: canvas_tokens_web_1.base.licorice500,
-        },
-        '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
-            borderColor: canvas_tokens_web_1.base.blueberry400,
-            ...common_1.focusRing({
-                width: 1,
-                separation: 0,
-                animate: false,
-                innerColor: canvas_tokens_web_1.base.frenchVanilla100,
-                outerColor: canvas_tokens_web_1.brand.common.focusOutline,
-            }),
-        },
-        '&:focus-visible:hover + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
-            outline: 'transparent',
-        },
-        // This creates the inner circle when the Radio is checked.
-        // The backgroundColor represents the dot in the middle of the radio.
-        // The borderColor represents the border around the middle dot of the radio.
-        '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-            backgroundColor: canvas_tokens_web_1.brand.primary.accent,
-            border: `${canvas_kit_styling_1.px2rem(5)} solid ${canvas_tokens_web_1.brand.primary.base}`, // inner circle border color
-        },
-        '&: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',
-            ...common_1.focusRing({
-                width: 2,
-                separation: 2,
-                animate: false,
-                innerColor: canvas_tokens_web_1.base.frenchVanilla100,
-                outerColor: canvas_tokens_web_1.brand.common.focusOutline,
-            }),
-        },
-    },
+    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: {
-        variant: {
-            inverse: {
-                '+ .cnvs-radio-check': {
-                    backgroundColor: canvas_tokens_web_1.base.soap100,
-                    borderColor: canvas_tokens_web_1.base.soap300,
-                },
-                '&:disabled, &.disabled': {
-                    opacity: canvas_tokens_web_1.system.opacity.disabled,
-                    '+ .cnvs-radio-check': {
-                        backgroundColor: canvas_tokens_web_1.base.soap100,
-                        borderColor: canvas_tokens_web_1.base.licorice100,
-                        opacity: canvas_tokens_web_1.system.opacity.disabled,
-                    },
-                    // This creates the inner circle when the Radio is checked.
-                    // The backgroundColor represents the dot in the middle of the radio.
-                    // The borderColor represents the border around the middle dot of the radio.
-                    '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-                        backgroundColor: canvas_tokens_web_1.brand.primary.base,
-                        borderColor: canvas_tokens_web_1.base.frenchVanilla100, // inner circle border color
-                    },
-                },
-                '&:hover + .cnvs-radio-check, &.hover + .cnvs-radio-check': {
-                    borderColor: canvas_tokens_web_1.base.soap300,
-                },
-                '&:focus-visible + .cnvs-radio-check, &.focus + .cnvs-radio-check': {
-                    borderColor: canvas_tokens_web_1.base.soap300,
-                },
-                // This creates the inner circle when the Radio is checked.
-                // The backgroundColor represents the dot in the middle of the radio.
-                // The borderColor represents the border around the middle dot of the radio.
-                '&:checked + .cnvs-radio-check, &.checked + .cnvs-radio-check': {
-                    backgroundColor: canvas_tokens_web_1.brand.primary.base,
-                    borderColor: canvas_tokens_web_1.base.frenchVanilla100, // inner circle border color
-                },
-                '&:focus-visible + .cnvs-radio-check, &:focus-visible:hover + .cnvs-radio-check, &.focus + .cnvs-radio-check, &.focus:hover + .cnvs-radio-check': {
-                    ...common_1.focusRing({
-                        width: 2,
-                        separation: 0,
-                        innerColor: canvas_tokens_web_1.base.blackPepper400,
-                        outerColor: canvas_tokens_web_1.base.frenchVanilla100,
-                    }),
-                },
-                '&:focus-visible:checked + .cnvs-radio-check, &:focus-visible:hover:checked + .cnvs-radio-check, &.focus:checked + .cnvs-radio-check, &.focus:hover:checked + .cnvs-radio-check': {
-                    ...common_1.focusRing({
-                        width: 2,
-                        separation: 2,
-                        innerColor: canvas_tokens_web_1.base.blackPepper400,
-                        outerColor: canvas_tokens_web_1.base.frenchVanilla100,
-                    }),
-                },
-            },
-        },
-    },
-});
+        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");
 const StyledRadioInput = common_1.createComponent('input')({
     displayName: 'StyledRadioInput',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {
@@ -154,43 +27,16 @@ const StyledRadioInput = common_1.createComponent('input')({
     },
 });
 const radioInputWrapperStyles = canvas_kit_styling_1.createStencil({
-    base: {
-        height: canvas_kit_styling_1.px2rem(radioHeight),
-        width: canvas_kit_styling_1.px2rem(radioWidth),
-        flex: '0 0 auto',
-        // Hover Ripple element
-        '::before': {
-            content: "''",
-            position: 'absolute',
-            borderRadius: canvas_tokens_web_1.system.shape.round,
-            height: canvas_kit_styling_1.px2rem(radioHeight),
-            transition: 'box-shadow 150ms ease-out',
-            width: canvas_kit_styling_1.px2rem(radioWidth),
-            pointerEvents: 'none',
-            opacity: '1',
-        },
-        '&:hover:before, &.hover:before': {
-            boxShadow: `0 0 0 ${canvas_kit_styling_1.calc.subtract(canvas_tokens_web_1.system.space.x2, canvas_kit_styling_1.px2rem(1))} ${canvas_tokens_web_1.base.soap200}`,
-        },
-    },
+    base: { name: "1kp9zh5", styles: "height:1.125rem;width:1.125rem;flex:0 0 auto;::before{content:'';position:absolute;border-radius:var(--cnvs-sys-shape-round, calc(0.25rem * 250));height:1.125rem;transition:box-shadow 150ms ease-out;width:1.125rem;pointer-events:none;opacity:1;}&:hover:before, &.hover:before{box-shadow:0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-base-palette-soap-200, rgba(240,241,242,1));}" },
     modifiers: {
-        variant: {
-            inverse: {
-                '::before': {
-                    opacity: canvas_tokens_web_1.system.opacity.disabled,
-                },
-            },
-        },
-        disabled: {
-            true: {
-                '&:hover:before, &.hover:before': {
-                    boxShadow: 'none',
-                    cursor: 'auto',
-                },
-            },
-        },
-    },
-});
+        modifiers: {
+            inverse: { name: "15fnpid", styles: "::before{opacity:var(--cnvs-sys-opacity-disabled, 0.4);}" }
+        },
+        modifiers: {
+            true: { name: "1brxgit", styles: "&:hover:before, &.hover:before{box-shadow:none;cursor:auto;}" }
+        }
+    }
+}, "radio-input-wrapper-styles");
 const RadioInputWrapper = common_1.createComponent(layout_1.Flex)({
     displayName: 'RadioInputWrapper',
     Component: ({ children, variant, ...elemProps }, ref, Element) => {

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":"AAYA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK;IAkBd;;;;;;;;;;;;;;;;;;;;;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":"AAuBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Table = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const TableHead_1 = require("./TableHead");
 const TableBody_1 = require("./TableBody");
@@ -15,6 +14,9 @@ const TableHeader_1 = require("./TableHeader");
 const TableCell_1 = require("./TableCell");
 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;" });
 /**
  * `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.
  *
@@ -60,7 +62,7 @@ export default function App() {
 exports.Table = common_1.createComponent('table')({
     displayName: 'Table',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref, border: `1px solid ${tokens_1.colors.soap500}`, borderRadius: "l", overflow: "auto" }, tokens_1.type.levels.subtext.large, elemProps), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, tableStyles)), 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":"AAyBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AA8BA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

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

@@ -7,29 +7,11 @@ exports.TableBody = void 0;
 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 StyledBody = common_1.styled(layout_1.Grid.as('tbody'))({
-    'tr:last-of-type td': {
-        borderBottom: 'none',
-    },
-    'tr:last-of-type th': {
-        borderBottom: 'none',
-    },
-    'tr:first-of-type td': {
-        borderTop: 'none',
-    },
-    'tr:first-of-type th': {
-        borderTop: 'none',
-    },
-    'td:last-of-type': {
-        borderRight: 'none',
-    },
-    'td:first-of-type': {
-        borderLeft: 'none',
-    },
-});
+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;}}" });
 exports.TableBody = common_1.createComponent('tbody')({
     displayName: 'Table.Body',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(StyledBody, Object.assign({ as: Element, ref: ref }, elemProps), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, bodyStyles)), 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":"AAKA,eAAO,MAAM,YAAY,0MAgBvB,CAAC"}
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY,0MASvB,CAAC"}

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

@@ -5,12 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCaption = void 0;
 const react_1 = __importDefault(require("react"));
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 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;" });
 exports.TableCaption = common_1.createComponent('caption')({
     displayName: 'Table.Caption',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element, ref: ref, borderBottom: `1px solid ${tokens_1.colors.soap500}`, paddingY: "xxs", paddingX: "s" }, elemProps), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, captionStyles)), 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":"AAKA,eAAO,MAAM,SAAS,qMAsBpB,CAAC"}
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,SAAS,qMASpB,CAAC"}

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

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCell = void 0;
 const react_1 = __importDefault(require("react"));
 const layout_1 = require("@workday/canvas-kit-react/layout");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
 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;" });
 exports.TableCell = common_1.createComponent('td')({
     displayName: 'Table.Cell',
     Component: ({ children, ...elemProps }, ref, Element) => {
-        return (react_1.default.createElement(layout_1.Grid, Object.assign({ as: Element, ref: ref, alignItems: "center", backgroundColor: "frenchVanilla100", borderBottom: `1px solid ${tokens_1.colors.soap400}`, gridTemplateColumns: "1fr", justifyContent: "left", minHeight: "56px", paddingY: "xxs", paddingX: "s", wordBreak: "break-word" }, elemProps), children));
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref }, layout_1.mergeStyles(elemProps, cellStyles)), children));
     },
 });