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

package/dist/es6/pill/lib/PillIcon.js

@@ -1,11 +1,17 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { usePillModel } from './usePillModel';
 import { plusIcon } from '@workday/canvas-system-icons-web';
-import { space } from '@workday/canvas-kit-react/tokens';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const pillIconStencil = createStencil({
+    extends: systemIconStencil,
+    base: { name: "ndjk9", styles: "box-sizing:border-box;margin-inline-start:calc(var(--cnvs-sys-space-x1) * -1);--size-svg-728c60:1.25rem;flex:0 0 auto;" }
+}, "pill-icon-4ef362");
 export const PillIcon = createSubcomponent('span')({
     modelHook: usePillModel,
-})(({ size, icon, ...elemProps }, Element) => {
-    return (React.createElement(SystemIcon, { marginInlineStart: `-${space.xxxs}`, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || plusIcon, ...elemProps }));
+})(({ icon, ...elemProps }, Element) => {
+    return (_jsx(SystemIcon, { as: Element, role: "img", icon: icon || plusIcon, ...mergeStyles(elemProps, pillIconStencil()) }));
 });

package/dist/es6/pill/lib/PillIconButton.d.ts

@@ -1,21 +1,80 @@
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
-import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
+export interface PillIconButtonProps extends Partial<SystemIconProps> {
     /**
-     * The system icon rendered by the button
-     * @default `xSmallIcon`
-     */
-    icon?: CanvasSystemIcon;
-    /**
-     * The aria label for the removable icon
-     * @default 'remove'
+     * The aria label for the removable icon. You must provide a valid string to represent the action.
      */
     'aria-label'?: string;
 }
+export declare const pillIconButtonStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    size: {
+        large: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: string;
+            paddingInline: "--cnvs-sys-space-x8";
+            minWidth: string;
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "--cnvs-sys-line-height-body-small";
+            fontSize: "--cnvs-sys-font-size-body-small";
+            letterSpacing: "--cnvs-base-letter-spacing-200";
+        };
+        medium: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            minWidth: string;
+            paddingInline: "--cnvs-sys-space-x6";
+            height: "--cnvs-sys-space-x10";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "--cnvs-sys-line-height-subtext-large";
+            fontSize: "--cnvs-sys-font-size-subtext-large";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        small: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "--cnvs-sys-space-x8";
+            minWidth: "--cnvs-sys-space-x20";
+            paddingInline: "--cnvs-sys-space-x4";
+            gap: "--cnvs-sys-space-x1";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "--cnvs-sys-line-height-subtext-large";
+            fontSize: "--cnvs-sys-font-size-subtext-large";
+            letterSpacing: "--cnvs-base-letter-spacing-150";
+        };
+        extraSmall: {
+            fontWeight: "--cnvs-sys-font-weight-bold";
+            height: "--cnvs-sys-space-x6";
+            minWidth: string;
+            paddingInline: "--cnvs-sys-space-x3";
+            gap: "--cnvs-sys-space-x1";
+            fontFamily: "--cnvs-sys-font-family-default";
+            lineHeight: "--cnvs-sys-line-height-subtext-medium";
+            fontSize: "--cnvs-sys-font-size-subtext-medium";
+            letterSpacing: "--cnvs-base-letter-spacing-100";
+        };
+    };
+    grow: {
+        true: {
+            width: string;
+            maxWidth: string;
+        };
+    };
+    iconPosition: {
+        only: {
+            padding: "--cnvs-sys-space-zero";
+        };
+        start: {};
+        end: {};
+    };
+}, {}, {
+    background: string;
+    border: string;
+    boxShadowInner: string;
+    boxShadowOuter: string;
+    label: string;
+    opacity: string;
+    borderRadius: string;
+}, never, never>, never>;
 export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
     state: {
         id: string;
-        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

package/dist/es6/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAgDD,eAAO,MAAM,cAAc;;;;;;;EA+B1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAQ9F,MAAM,WAAW,mBAAoB,SAAQ,OAAO,CAAC,eAAe,CAAC;IACnE;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuChC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;EAoB1B,CAAC"}

package/dist/es6/pill/lib/PillIconButton.js

@@ -1,54 +1,18 @@
-import React from 'react';
-import { focusRing, styled, createSubcomponent } from '@workday/canvas-kit-react/common';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRing, createSubcomponent } from '@workday/canvas-kit-react/common';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { usePillModel } from './usePillModel';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import { colors, space } from '@workday/canvas-kit-react/tokens';
-import { BaseButton, buttonStencil } from '@workday/canvas-kit-react/button';
-const StyledIconButton = styled(BaseButton)({
-    marginInlineEnd: '-7px',
-    marginInlineStart: `-2px`,
-    overflow: 'visible',
-    [buttonStencil.vars.background]: colors.soap300,
-    [buttonStencil.vars.border]: 'transparent',
-    [buttonStencil.vars.label]: colors.blackPepper400,
-    '::after': {
-        content: '""',
-        height: space.l,
-        width: space.l,
-        position: 'absolute',
-        left: '-7px',
-        bottom: '-7px',
-        margin: 0,
-        pointerEvents: 'all',
-    },
-    '&:focus-visible, &.focus': {
-        ...focusRing({
-            innerColor: 'transparent',
-        }),
-        [buttonStencil.vars.background]: colors.soap300,
-        [buttonStencil.vars.border]: 'transparent',
-        [buttonStencil.vars.label]: colors.blackPepper400,
-    },
-    '&:hover, &.hover': {
-        [buttonStencil.vars.background]: colors.soap300,
-        [buttonStencil.vars.border]: 'transparent',
-        [buttonStencil.vars.label]: colors.blackPepper400,
-    },
-    '&:active, &.active': {
-        [buttonStencil.vars.background]: colors.soap500,
-        [buttonStencil.vars.border]: 'transparent',
-        [buttonStencil.vars.label]: colors.blackPepper400,
-    },
-    '&:disabled, &.disabled': {
-        [buttonStencil.vars.background]: colors.soap100,
-        [buttonStencil.vars.label]: colors.licorice100,
-        [buttonStencil.vars.border]: 'transparent',
-    },
-});
+import { buttonStencil } from '@workday/canvas-kit-react/button';
+import { calc, createStencil, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+export const pillIconButtonStencil = createStencil({
+    extends: buttonStencil,
+    base: { name: "ndjkv", styles: "box-sizing:border-box;margin-inline-end:calc(0.4375rem * -1);margin-inline-start:calc(0.125rem * -1);border-radius:var(--cnvs-sys-shape-half);height:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));width:calc(var(--cnvs-sys-space-x4) + var(--cnvs-sys-space-x1));padding:var(--cnvs-sys-space-zero);overflow:visible;flex:0 0 auto;--border-button-65cb05:var(--cnvs-sys-color-border-transparent);--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--color-system-icon-99ce3e:var(--cnvs-sys-color-icon-default);--size-svg-728c60:var(--cnvs-sys-space-x6);::after{content:\"\";height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);position:absolute;left:calc(0.4375rem * -1);bottom:calc(0.4375rem * -1);margin:var(--cnvs-sys-space-zero);pointer-events:all;}&:focus-visible, &.focus{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);box-shadow:0 0 0 0px var(--cnvs-sys-color-border-transparent), 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}&:hover, &.hover{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}&:disabled, &.disabled{--border-button-65cb05:var(--cnvs-sys-color-border-transparent);}" }
+}, "pill-icon-button-10e7a0");
 export const PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
-})(({ size, icon = xSmallIcon, maxWidth, children, 'aria-label': ariaLabel = 'remove', ...elemProps }, Element, model) => {
-    return (React.createElement(StyledIconButton, { borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, as: Element, position: "relative", ...elemProps },
-        React.createElement(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
+})(({ size, icon, children, 'aria-label': ariaLabel = '', ...elemProps }, Element, model) => {
+    return (_jsx(Element, { disabled: model.state.disabled, "aria-labelledby": `removable-${model.state.id} label-${model.state.id}`, ...mergeStyles(elemProps, pillIconButtonStencil()), children: _jsx(SystemIcon, { "aria-label": ariaLabel, id: `removable-${model.state.id}`, icon: icon || xSmallIcon, "aria-hidden": true, role: "img" }) }));
 });

package/dist/es6/pill/lib/PillLabel.d.ts

@@ -3,10 +3,10 @@ import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
 export interface PillLabelProps extends BoxProps {
     tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
 }
+export declare const pillLabelStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {}, never>, {}, {}, never, never>;
 export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
     state: {
         id: string;
-        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

package/dist/es6/pill/lib/PillLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;;EAgBpB,CAAC"}
+{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAMxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAED,eAAO,MAAM,gBAAgB,iJAO3B,CAAC;AAEH,eAAO,MAAM,SAAS;;;;;;EAUpB,CAAC"}

package/dist/es6/pill/lib/PillLabel.js

@@ -1,18 +1,14 @@
-import React from 'react';
-import { createSubcomponent, styled } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-react/layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
 import { OverflowTooltip } from '@workday/canvas-kit-react/tooltip';
 import { usePillModel } from './usePillModel';
-import { colors } from '@workday/canvas-kit-react/tokens';
-const StyledLabelContainer = styled(Box.as('span'))({
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: 'block',
-});
+import { createStencil } from '@workday/canvas-kit-styling';
+export const pillLabelStencil = createStencil({
+    base: { name: "ndjk1i", styles: "box-sizing:border-box;flex-shrink:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" }
+}, "pill-label-412177");
 export const PillLabel = createSubcomponent('span')({
     modelHook: usePillModel,
-})(({ tooltipProps, ...elemProps }, Element, model) => {
-    return (React.createElement(OverflowTooltip, { ...tooltipProps },
-        React.createElement(StyledLabelContainer, { color: model.state.disabled ? colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: `label-${model.state.id}`, ...elemProps }, elemProps.children)));
+})(({ tooltipProps, children, ...elemProps }, Element, model) => {
+    return (_jsx(OverflowTooltip, { ...tooltipProps, children: _jsx(Element, { id: `label-${model.state.id}`, ...mergeStyles(elemProps, pillLabelStencil()), children: children }) }));
 });

package/dist/es6/pill/lib/usePillModel.d.ts

@@ -1,11 +1,6 @@
 export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
     /**
-     * Determines the max width of the pill. If the pill text is longer than the max width,
-     * text will be truncated and a tooltip will show the rest of the content when hovered over
-     */
-    maxWidth: string | number;
-    /**
-     * Use to disable a pill.
+     * Used to disable a pill and apply the correct styles.
      */
     disabled: boolean;
     /**
@@ -17,24 +12,14 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
     state: {
         id: string;
         /**
-         * Determines the max width of the pill. If the pill text is longer than the max width,
-         * text will be truncated and a tooltip will show the rest of the content when hovered over
-         */
-        maxWidth: string | number;
-        /**
-         * Use to disable a pill.
+         * Used to disable a pill and apply the correct styles.
          */
         disabled: boolean;
     };
     events: {};
 }) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /**
-     * Determines the max width of the pill. If the pill text is longer than the max width,
-     * text will be truncated and a tooltip will show the rest of the content when hovered over
-     */
-    maxWidth: string | number;
-    /**
-     * Use to disable a pill.
+     * Used to disable a pill and apply the correct styles.
      */
     disabled: boolean;
     /**
@@ -45,24 +30,14 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
 }, {}, {
     id: string;
     /**
-     * Determines the max width of the pill. If the pill text is longer than the max width,
-     * text will be truncated and a tooltip will show the rest of the content when hovered over
-     */
-    maxWidth: string | number;
-    /**
-     * Use to disable a pill.
+     * Used to disable a pill and apply the correct styles.
      */
     disabled: boolean;
 }, {}, {
     state: {
         id: string;
         /**
-         * Determines the max width of the pill. If the pill text is longer than the max width,
-         * text will be truncated and a tooltip will show the rest of the content when hovered over
-         */
-        maxWidth: string | number;
-        /**
-         * Use to disable a pill.
+         * Used to disable a pill and apply the correct styles.
          */
         disabled: boolean;
     };

package/dist/es6/pill/lib/usePillModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;QAZH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;IAZH;;;OAGG;;IAEH;;OAEG;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EAgBL,CAAC"}
+{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;OAEG;;IAEH;;;OAGG;;;;;QAPH;;WAEG;;;;;IAFH;;OAEG;;IAEH;;;OAGG;;;;IAPH;;OAEG;;;;;QAFH;;WAEG;;;;EAgBL,CAAC"}

package/dist/es6/pill/lib/usePillModel.js

@@ -2,12 +2,7 @@ import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
 export const usePillModel = createModelHook({
     defaultConfig: {
         /**
-         * Determines the max width of the pill. If the pill text is longer than the max width,
-         * text will be truncated and a tooltip will show the rest of the content when hovered over
-         */
-        maxWidth: 200,
-        /**
-         * Use to disable a pill.
+         * Used to disable a pill and apply the correct styles.
          */
         disabled: false,
         /**

package/dist/es6/radio/lib/RadioButton.d.ts

@@ -1,12 +1,11 @@
-import React from 'react';
 import { RadioLabelProps } from './RadioLabel';
 export declare const RadioButton: import("@workday/canvas-kit-react/common").ElementComponentM<"input", RadioLabelProps, {
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
     state: {
         value: string | number | undefined;
         name: string;
         'aria-describedby': string | undefined;
-        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
     };
     events: {};
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,eAAO,MAAM,WAAW;;;;;;;;;EAUtB,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,eAAO,MAAM,WAAW;;;;;;;;;EAUtB,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
 import { RadioGroup } from './RadioGroup';
@@ -6,7 +6,5 @@ export const RadioButton = createSubcomponent('input')({
     displayName: 'Radio',
     modelHook: useRadioModel,
 })(({ children, variant, ref, value, disabled, ...elemProps }) => {
-    return (React.createElement(RadioGroup.Label, { variant: variant, disabled: disabled },
-        React.createElement(RadioGroup.Label.Input, { value: value, ...elemProps, ref: ref }),
-        React.createElement(RadioGroup.Label.Text, null, children)));
+    return (_jsxs(RadioGroup.Label, { variant: variant, disabled: disabled, children: [_jsx(RadioGroup.Label.Input, { value: value, ...elemProps, ref: ref }), _jsx(RadioGroup.Label.Text, { children: children })] }));
 });

package/dist/es6/radio/lib/RadioGroup.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Themeable, ErrorType } from '@workday/canvas-kit-react/common';
 import { FlexProps } from '@workday/canvas-kit-react/layout';
 import { CSProps } from '@workday/canvas-kit-styling';
@@ -22,14 +21,14 @@ export declare const RadioGroup: import("@workday/canvas-kit-react/common").Elem
     'aria-describedby': string | undefined;
     name: string;
     value: string | number | undefined;
-    onChange(event: React.ChangeEvent<HTMLInputElement>): void;
+    onChange(event: import("react").ChangeEvent<HTMLInputElement>): void;
 }> & {} & {}, {
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
     state: {
         value: string | number | undefined;
         name: string;
         'aria-describedby': string | undefined;
-        inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+        inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
     };
     events: {};
 }> & {
@@ -45,12 +44,12 @@ export declare const RadioGroup: import("@workday/canvas-kit-react/common").Elem
      * ```
      */
     RadioButton: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./RadioLabel").RadioLabelProps, {
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
         state: {
             value: string | number | undefined;
             name: string;
             'aria-describedby': string | undefined;
-            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+            inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
         };
         events: {};
     }>;
@@ -68,32 +67,32 @@ export declare const RadioGroup: import("@workday/canvas-kit-react/common").Elem
      * ```
      */
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./RadioLabel").RadioLabelProps, {
-        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
         state: {
             value: string | number | undefined;
             name: string;
             'aria-describedby': string | undefined;
-            inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+            inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
         };
         events: {};
     }> & {
         Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("./RadioLabel").RadioLabelProps, {
-            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+            onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
             state: {
                 value: string | number | undefined;
                 name: string;
                 'aria-describedby': string | undefined;
-                inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+                inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
             };
             events: {};
         }>;
-        Text: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/text").TextProps & React.HTMLAttributes<HTMLSpanElement>, {
-            onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+        Text: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("@workday/canvas-kit-react/text").TextProps & import("react").HTMLAttributes<HTMLSpanElement>, {
+            onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
             state: {
                 value: string | number | undefined;
                 name: string;
                 'aria-describedby': string | undefined;
-                inputRef: React.MutableRefObject<HTMLInputElement | undefined>;
+                inputRef: import("react").MutableRefObject<HTMLInputElement | undefined>;
             };
             events: {};
         }>;

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../radio/lib/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkB,SAAS,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEvF,OAAO,EAAC,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAgB,OAAO,EAAe,MAAM,6BAA6B,CAAC;AAGjF,MAAM,WAAW,eAAgB,SAAQ,SAAS,EAAE,OAAO,EAAE,SAAS;IACpE;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AA8BD;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;IAInB;;;;;;;;;;OAUG;;;;;;;;;;;IAEH;;;;;;;;;;;;OAYG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAKL,CAAC"}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
@@ -10,14 +10,14 @@ import { brand, system } from '@workday/canvas-tokens-web';
  * Styles for RadioGroup
  */
 const radioGroupStencil = createStencil({
-    base: { name: "s7axw", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
+    base: { name: "ndjk2x", styles: "box-sizing:border-box;display:flex;flex-direction:column;border-radius:var(--cnvs-sys-shape-x1);gap:var(--cnvs-sys-space-x2);padding:0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);margin:0 calc(var(--cnvs-sys-space-x3) * -1);transition:100ms box-shadow;width:fit-content;" },
     modifiers: {
         error: {
-            error: { name: "s7axx", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
-            alert: { name: "s7axy", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
+            error: { name: "ndjk2y", styles: "box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-error-base);" },
+            alert: { name: "ndjk2z", styles: "box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-alert-darkest), inset 0 0 0 0.1875rem var(--cnvs-brand-alert-base);" }
         }
     }
-}, "radio-group-ce2b62");
+}, "radio-group-aea204");
 /**
  * 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, { ...mergeStyles(elemProps, radioGroupStencil({ error })) }, children);
+    return _jsx(Element, { ...mergeStyles(elemProps, radioGroupStencil({ error })), children: children });
 });

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { createSubcomponent, createElemPropsHook } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
@@ -21,5 +22,5 @@ export const RadioInput = createSubcomponent('input')({
     modelHook: useRadioModel,
     elemPropsHook: useRadioInput,
 })(({ ...elemProps }, _Element, _model) => {
-    return React.createElement(StyledRadioButton, { ...elemProps });
+    return _jsx(StyledRadioButton, { ...elemProps });
 });

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
@@ -7,7 +8,7 @@ import { RadioText } from './RadioText';
 import { createStencil } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const radioLabelStencil = createStencil({
-    base: { name: "s7axv", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
+    base: { name: "ndjk2w", styles: "box-sizing:border-box;align-items:flex-start;min-height:var(--cnvs-sys-space-x6);position:relative;gap:var(--cnvs-sys-space-x3);" }
 }, "radio-label-0cca27");
 export const RadioLabelContext = React.createContext({});
 export const RadioLabel = createSubcomponent('label')({
@@ -42,6 +43,5 @@ export const RadioLabel = createSubcomponent('label')({
         Text: RadioText,
     },
 })(({ children, variant, disabled, value, ...elemProps }, Element) => {
-    return (React.createElement(RadioLabelContext.Provider, { value: { variant, disabled } },
-        React.createElement(Flex, { as: Element, ...mergeStyles(elemProps, radioLabelStencil({ variant })) }, children)));
+    return (_jsx(RadioLabelContext.Provider, { value: { variant, disabled }, children: _jsx(Flex, { as: Element, ...mergeStyles(elemProps, radioLabelStencil({ variant })), children: children }) }));
 });

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { useRadioModel } from './hooks/useRadioModel';
@@ -8,19 +9,19 @@ import { system } from '@workday/canvas-tokens-web';
 import { mergeStyles } from '@workday/canvas-kit-react/layout';
 const radioTextStencil = createStencil({
     extends: textStencil,
-    base: { name: "s7axr", styles: "box-sizing:border-box;cursor:pointer;" },
+    base: { name: "ndjk2s", styles: "box-sizing:border-box;cursor:pointer;" },
     modifiers: {
         variant: {
-            inverse: { name: "s7axs", styles: "color:var(--cnvs-sys-color-text-inverse);" }
+            inverse: { name: "ndjk2t", styles: "color:var(--cnvs-sys-color-text-inverse);" }
         },
         disabled: {
-            true: { name: "s7axt", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
+            true: { name: "ndjk2u", styles: "cursor:default;color:var(--cnvs-sys-color-text-disabled);" }
         }
     },
     compound: [
         {
             modifiers: { variant: 'inverse', disabled: true },
-            styles: { name: "s7axu", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
+            styles: { name: "ndjk2v", styles: "color:var(--cnvs-sys-color-text-inverse);opacity:var(--cnvs-sys-opacity-disabled);" }
         }
     ],
     defaultModifiers: {
@@ -32,5 +33,5 @@ export const RadioText = createSubcomponent('span')({
     modelHook: useRadioModel,
 })(({ children, ...elemProps }, Element) => {
     const { variant, disabled } = React.useContext(RadioLabelContext);
-    return (React.createElement(Element, { ...mergeStyles(elemProps, radioTextStencil({ variant, disabled })) }, children));
+    return (_jsx(Element, { ...mergeStyles(elemProps, radioTextStencil({ variant, disabled })), children: children }));
 });