@workday/canvas-kit-react 12.0.0-alpha.852-next.0 → 12.0.0-alpha.862-next.0

package/dist/commonjs/avatar/lib/Avatar.js

@@ -18,91 +18,79 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Avatar = exports.AvatarVariant = void 0;
+exports.Avatar = exports.avatarStencil = void 0;
 const react_1 = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var AvatarVariant;
-(function (AvatarVariant) {
-    AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
-    AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
-})(AvatarVariant = exports.AvatarVariant || (exports.AvatarVariant = {}));
-const fadeTransition = 'opacity 150ms linear';
-const StyledContainer = common_1.styled('button', {
-    shouldForwardProp: prop => is_prop_valid_1.default(prop) && prop !== 'size',
-})({
-    background: tokens_1.colors.soap200,
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    borderRadius: tokens_1.borderRadius.circle,
-    '&:not([disabled])': {
-        '&:focus': {
-            outline: 'none',
-            ...common_1.focusRing({ separation: 2 }),
-        },
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.avatarStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        size: '',
     },
-    ...common_1.hideMouseFocus,
-}, ({ size }) => ({
-    height: size,
-    width: size,
-}), ({ onClick }) => ({
-    cursor: onClick ? 'pointer' : 'default',
-}));
-const StyledStack = common_1.styled('span')({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-}, ({ size }) => ({
-    height: size,
-    width: size,
-}));
-const StyledIcon = common_1.styled(icon_1.SystemIconCircle, {
-    shouldForwardProp: common_1.filterOutProps(['isImageLoaded']),
-})({
-    transition: fadeTransition,
-}, ({ isImageLoaded }) => ({
-    opacity: isImageLoaded ? 0 : 1,
-}));
-const StyledImage = common_1.styled('img', {
-    shouldForwardProp: common_1.filterOutProps(['isLoaded', 'objectFit']),
-})({
-    width: '100%',
-    height: '100%',
-    borderRadius: tokens_1.borderRadius.circle,
-    transition: fadeTransition,
-}, ({ isLoaded, objectFit }) => ({
-    opacity: isLoaded ? 1 : 0,
-    objectFit,
-}));
-exports.Avatar = react_1.default.forwardRef(({ variant = AvatarVariant.Light, size = icon_1.SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
-    const [imageLoaded, setImageLoaded] = react_1.useState(false);
-    const loadImage = () => {
-        if (!imageLoaded) {
-            setImageLoaded(true);
+    base: { name: "b532d4", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-f68c19);height:var(--size-avatar-f68c19);&:focus-visible:not([disabled]), &.focus:not([disabled]){outline:none;box-shadow:0 0 0 2px var(--cnvs-base-palette-french-vanilla-100, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;}& > [data-slot=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-a30d66:calc(var(--size-avatar-f68c19) * 0.625);}& > [data-slot=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;}" },
+    modifiers: {
+        variant: {
+            light: { name: "93f2f0", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-default);}" },
+            dark: { name: "094953", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);& [data-slot=\"avatar-icon\"]{--color-system-icon-583fae:var(--cnvs-sys-color-fg-inverse);}" }
+        },
+        size: {
+            extraSmall: { name: "dd6bba", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "8bd568", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "73d354", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "b1ab3d", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "51b4a9", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "271180", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);& [data-slot=\"avatar-icon\"]{--size-svg-a30d66:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+        },
+        objectFit: {
+            contain: { name: "ec34b8", styles: "& [data-slot=\"avatar-image\"]{object-fit:contain;}" },
+            fill: { name: "f2ce94", styles: "& [data-slot=\"avatar-image\"]{object-fit:fill;}" },
+            cover: { name: "f01d16", styles: "& [data-slot=\"avatar-image\"]{object-fit:cover;}" },
+            ['scale-down']: { name: "b72ff8", styles: "& [data-slot=\"avatar-image\"]{object-fit:scale-down;}" },
+            none: { name: "6349a5", styles: "& [data-slot=\"avatar-image\"]{object-fit:none;}" },
+            ['-moz-initial']: { name: "8d0a0d", styles: "& [data-slot=\"avatar-image\"]{object-fit:-moz-initial;}" },
+            ['initial']: { name: "23e1a7", styles: "& [data-slot=\"avatar-image\"]{object-fit:initial;}" },
+            ['inherit']: { name: "1be8d9", styles: "& [data-slot=\"avatar-image\"]{object-fit:inherit;}" },
+            ['revert']: { name: "1f00e3", styles: "& [data-slot=\"avatar-image\"]{object-fit:revert;}" },
+            ['unset']: { name: "6f1eb7", styles: "& [data-slot=\"avatar-image\"]{object-fit:unset;}" }
+        },
+        isImageLoaded: {
+            true: { name: "6ab642", styles: "& [data-slot=\"avatar-icon\"]{opacity:0;}& [data-slot=\"avatar-image\"]{opacity:1;}" },
+            false: { name: "53c2af", styles: "& [data-slot=\"avatar-icon\"]{opacity:1;}& [data-slot=\"avatar-image\"]{opacity:0;}" }
         }
-    };
-    react_1.default.useLayoutEffect(() => {
-        setImageLoaded(false);
-    }, [url]);
-    const background = variant === AvatarVariant.Dark ? tokens_1.colors.blueberry400 : tokens_1.colors.soap300;
-    return (react_1.default.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
-        react_1.default.createElement(StyledStack, { size: size },
-            react_1.default.createElement(StyledIcon, { icon: canvas_system_icons_web_1.userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
-        url && (react_1.default.createElement(StyledStack, { size: size },
-            react_1.default.createElement(StyledImage, { src: url, alt: altText, onLoad: loadImage, isLoaded: imageLoaded, objectFit: objectFit, loading: "lazy" })))));
-}); // AvatarProps and forwardRef signatures are incompatible, so we must force cast
-exports.Avatar.Variant = AvatarVariant;
-exports.Avatar.Size = icon_1.SystemIconCircleSize;
+    },
+    defaultModifiers: {
+        variant: 'light',
+        size: 'medium',
+        isImageLoaded: 'false',
+        objectFit: 'contain',
+    }
+}, "avatar-f68c19");
+exports.Avatar = common_1.createComponent('button')({
+    displayName: 'Avatar',
+    Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
+        const [imageLoaded, setImageLoaded] = react_1.useState(false);
+        const loadImage = () => {
+            if (!imageLoaded) {
+                setImageLoaded(true);
+            }
+        };
+        react_1.default.useLayoutEffect(() => {
+            setImageLoaded(false);
+        }, [url]);
+        return (react_1.default.createElement(Element, Object.assign({ ref: ref, "aria-label": altText }, layout_1.mergeStyles(elemProps, [
+            exports.avatarStencil({
+                variant,
+                size,
+                objectFit,
+                isImageLoaded: imageLoaded,
+            }),
+        ])),
+            react_1.default.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.userIcon, "data-slot": "avatar-icon" }),
+            url && react_1.default.createElement("img", { "data-slot": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
+    },
+});

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

@@ -1,46 +1,79 @@
-import * as React from 'react';
-import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export interface TextAreaProps extends Themeable, GrowthBehavior {
-    /**
-     * If true, set the TextArea to the disabled state.
-     * @default false
-     */
-    disabled?: boolean;
+import { GrowthBehavior, ErrorType } from '@workday/canvas-kit-react/common';
+export declare type ValueOf<T> = T[keyof T];
+export interface TextAreaProps extends GrowthBehavior {
     /**
      * The type of error associated with the TextArea (if applicable).
      */
     error?: ErrorType;
-    /**
-     * The function called when the TextArea state changes.
-     */
-    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * The placeholder text of the TextArea.
-     */
-    placeholder?: string;
-    /**
-     * If true, set the TextArea to read-only. The user will be unable to interact with the TextArea.
-     * @default false
-     */
-    readOnly?: boolean;
     /**
      * The resize constraints of the TextArea.
      * @default TextArea.ResizeDirection.Both
      */
-    resize?: TextAreaResizeDirection;
-    /**
-     * The value of the TextArea.
-     */
-    value?: any;
-}
-export declare enum TextAreaResizeDirection {
-    None = "none",
-    Both = "both",
-    Horizontal = "horizontal",
-    Vertical = "vertical"
+    resize?: ValueOf<typeof TextAreaResizeDirection>;
 }
+export declare const TextAreaResizeDirection: {
+    readonly None: "none";
+    readonly Both: "both";
+    readonly Horizontal: "horizontal";
+    readonly Vertical: "vertical";
+};
+export declare const textAreaStencil: import("@workday/canvas-kit-styling").Stencil<{
+    resize: {
+        both: {
+            resize: "both";
+        };
+        horizontal: {
+            resize: "horizontal";
+        };
+        vertical: {
+            resize: "vertical";
+        };
+        none: {
+            resize: "none";
+        };
+    };
+}, {}, import("@workday/canvas-kit-styling").Stencil<{
+    grow: {
+        true: {
+            width: string;
+            resize: "vertical";
+        };
+        false: {
+            width: string;
+        };
+    };
+    error: {
+        error: {
+            borderColor: "--cnvs-brand-error-base";
+            boxShadow: string;
+            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                borderColor: "--cnvs-brand-error-base";
+            };
+            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                boxShadow: string;
+            };
+        };
+        alert: {
+            borderColor: "--cnvs-brand-alert-darkest";
+            boxShadow: string;
+            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                borderColor: "--cnvs-brand-alert-darkest";
+            };
+            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                boxShadow: string;
+            };
+        };
+    };
+}, {
+    width: string;
+}, never, never>, never>;
 export declare const TextArea: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", TextAreaProps> & {
     ErrorType: typeof ErrorType;
-    ResizeDirection: typeof TextAreaResizeDirection;
+    ResizeDirection: {
+        readonly None: "none";
+        readonly Both: "both";
+        readonly Horizontal: "horizontal";
+        readonly Vertical: "vertical";
+    };
 };
 //# sourceMappingURL=TextArea.d.ts.map

package/dist/commonjs/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AA8CD,eAAO,MAAM,QAAQ;;;CAWnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,cAAc,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5F,oBAAY,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAEpC,MAAM,WAAW,aAAc,SAAQ,cAAc;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC,OAAO,uBAAuB,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,uBAAuB;;;;;CAK1B,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B1B,CAAC;AAEH,eAAO,MAAM,QAAQ;;;;;;;;CAWnB,CAAC"}

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

@@ -19,61 +19,38 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextArea = exports.TextAreaResizeDirection = void 0;
+exports.TextArea = exports.textAreaStencil = exports.TextAreaResizeDirection = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-var TextAreaResizeDirection;
-(function (TextAreaResizeDirection) {
-    TextAreaResizeDirection["None"] = "none";
-    TextAreaResizeDirection["Both"] = "both";
-    TextAreaResizeDirection["Horizontal"] = "horizontal";
-    TextAreaResizeDirection["Vertical"] = "vertical";
-})(TextAreaResizeDirection = exports.TextAreaResizeDirection || (exports.TextAreaResizeDirection = {}));
-const StyledTextArea = common_1.styled('textarea')(({ theme, error }) => ({
-    ...tokens_1.type.levels.subtext.large,
-    border: `1px solid ${tokens_1.inputColors.border}`,
-    display: 'block',
-    backgroundColor: tokens_1.inputColors.background,
-    borderRadius: tokens_1.borderRadius.m,
-    boxSizing: 'border-box',
-    minHeight: tokens_1.space.xxl,
-    minWidth: `calc((${tokens_1.space.xxxl} * 3) + ${tokens_1.space.xl})`,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: tokens_1.space.xxs,
-    margin: 0,
-    '&::webkit-resizer': {
-        display: 'none',
-    },
-    '&::placeholder': {
-        color: tokens_1.inputColors.placeholder,
-    },
-    '&:hover': {
-        borderColor: tokens_1.inputColors.hoverBorder,
-    },
-    '&:focus:not([disabled])': {
-        borderColor: theme.canvas.palette.common.focusOutline,
-        boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-        outline: 'none',
-    },
-    '&:disabled': {
-        backgroundColor: tokens_1.inputColors.disabled.background,
-        borderColor: tokens_1.inputColors.disabled.border,
-        color: tokens_1.inputColors.disabled.text,
-        '&::placeholder': {
-            color: tokens_1.inputColors.disabled.text,
-        },
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+const text_input_1 = require("@workday/canvas-kit-react/text-input");
+exports.TextAreaResizeDirection = {
+    None: 'none',
+    Both: 'both',
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+};
+exports.textAreaStencil = canvas_kit_styling_1.createStencil({
+    extends: text_input_1.textInputStencil,
+    base: { name: "22b420", styles: "box-sizing:border-box;min-height:var(--cnvs-sys-space-x16);min-width:calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10));&::webkit-resizer{display:none;}" },
+    modifiers: {
+        resize: {
+            both: { name: "7c01d6", styles: "resize:both;" },
+            horizontal: { name: "5904a0", styles: "resize:horizontal;" },
+            vertical: { name: "d5a9dd", styles: "resize:vertical;" },
+            none: { name: "1997d7", styles: "resize:none;" }
+        }
     },
-    ...common_1.errorRing(error, theme),
-}), ({ resize, grow }) => ({
-    width: grow ? '100%' : undefined,
-    resize: grow ? TextAreaResizeDirection.Vertical : resize,
-}));
+    defaultModifiers: {
+        resize: 'both',
+    }
+}, "text-area-3e725a");
 exports.TextArea = common_1.createComponent('textarea')({
     displayName: 'TextArea',
-    Component: ({ resize = TextAreaResizeDirection.Both, grow, ...elemProps }, ref, Element) => React.createElement(StyledTextArea, Object.assign({ ref: ref, as: Element, grow: grow, resize: resize }, elemProps)),
+    Component: ({ resize = exports.TextAreaResizeDirection.Both, grow, error, ...elemProps }, ref, Element) => React.createElement(Element, Object.assign({ ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, exports.textAreaStencil({ error, grow, resize })))),
     subComponents: {
         ErrorType: common_1.ErrorType,
-        ResizeDirection: TextAreaResizeDirection,
+        ResizeDirection: exports.TextAreaResizeDirection,
     },
 });

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

@@ -1,5 +1,5 @@
-import { GrowthBehavior, ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export interface TextInputProps extends Themeable, GrowthBehavior {
+import { GrowthBehavior, ErrorType } from '@workday/canvas-kit-react/common';
+export interface TextInputProps extends GrowthBehavior {
     /**
      * The type of error associated with the TextInput (if applicable).
      */
@@ -9,6 +9,41 @@ export interface TextInputProps extends Themeable, GrowthBehavior {
      */
     width?: number | string;
 }
+export declare const textInputStencil: import("@workday/canvas-kit-styling").Stencil<{
+    grow: {
+        true: {
+            width: string;
+            resize: "vertical";
+        };
+        false: {
+            width: string;
+        };
+    };
+    error: {
+        error: {
+            borderColor: "--cnvs-brand-error-base";
+            boxShadow: string;
+            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                borderColor: "--cnvs-brand-error-base";
+            };
+            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                boxShadow: string;
+            };
+        };
+        alert: {
+            borderColor: "--cnvs-brand-alert-darkest";
+            boxShadow: string;
+            '&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                borderColor: "--cnvs-brand-alert-darkest";
+            };
+            '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
+                boxShadow: string;
+            };
+        };
+    };
+}, {
+    width: string;
+}, never, never>;
 export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputProps> & {
     ErrorType: typeof ErrorType;
 };

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AA2DD,eAAO,MAAM,SAAS;;CAgBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAkB,cAAc,EAAE,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAI5F,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAqF3B,CAAC;AAEH,eAAO,MAAM,SAAS;;CAepB,CAAC"}

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

@@ -19,61 +19,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextInput = void 0;
+exports.TextInput = exports.textInputStencil = void 0;
 const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
-const tokens_1 = require("@workday/canvas-kit-react/tokens");
-const StyledTextInput = common_1.styled('input')({
-    ...tokens_1.type.levels.subtext.large,
-    border: `1px solid ${tokens_1.inputColors.border}`,
-    display: 'block',
-    backgroundColor: tokens_1.inputColors.background,
-    borderRadius: tokens_1.borderRadius.m,
-    boxSizing: 'border-box',
-    height: 40,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: tokens_1.space.xxs,
-    margin: 0,
-    '&::placeholder': {
-        color: tokens_1.inputColors.placeholder,
+const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
+const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
+exports.textInputStencil = canvas_kit_styling_1.createStencil({
+    vars: {
+        width: '',
     },
-    '&:hover, &.hover': {
-        borderColor: tokens_1.inputColors.hoverBorder,
-    },
-    '&:focus-visible:not([disabled]), &.focus:not([disabled]), &:focus:not([disabled])': {
-        borderColor: tokens_1.inputColors.focusBorder,
-        boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
-        outline: 'none',
-    },
-    '&:disabled': {
-        backgroundColor: tokens_1.inputColors.disabled.background,
-        borderColor: tokens_1.inputColors.disabled.border,
-        color: tokens_1.inputColors.disabled.text,
-        '&::placeholder': {
-            color: tokens_1.inputColors.disabled.text,
+    base: { name: "edcc19", styles: "box-sizing:border-box;font-family:var(--cnvs-base-font-family-50);font-weight:var(--cnvs-base-font-weight-400);line-height:var(--cnvs-base-line-height-100);font-size:var(--cnvs-base-font-size-75);letter-spacing:var(--cnvs-base-letter-spacing-150);display:block;border:0.0625rem solid var(--cnvs-sys-color-border-input-default);background-color:var(--cnvs-sys-color-bg-default);border-radius:var(--cnvs-sys-shape-x1);height:var(--cnvs-sys-space-x10);transition:0.2s box-shadow, 0.2s border-color;padding:var(--cnvs-sys-space-x2);margin:0rem;width:var(--width-text-input-ac8e50);min-width:var(--width-text-input-ac8e50, calc(calc(var(--cnvs-sys-space-x20) * 3) + var(--cnvs-sys-space-x10)));color:var(--cnvs-sys-color-text-default);::-ms-clear{display:none;}&::placeholder{color:var(--cnvs-sys-color-text-hint);}&:hover, &.hover{border-color:var(--cnvs-sys-color-border-input-strong);}&:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-common-focus-outline);box-shadow:inset 0 0 0 1px var(--cnvs-brand-common-focus-outline);outline:none;}&:disabled, .disabled{background-color:var(--cnvs-sys-color-bg-alt-softer);border-color:var(--cnvs-sys-color-border-input-disabled);color:var(--cnvs-sys-color-text-disabled);&::placeholder{color:var(--cnvs-sys-color-text-disabled);}}" },
+    modifiers: {
+        grow: {
+            true: { name: "6c63b7", styles: "width:100%;resize:vertical;" },
+            false: { name: "ba7d2f", styles: "width:initial;" }
         },
+        error: {
+            error: { name: "a75f3c", styles: "border-color:var(--cnvs-brand-error-base);box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-error-base);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.0625rem var(--cnvs-brand-error-base), 0 0 0 2px var(--cnvs-sys-color-border-inverse), 0 0 0 4px var(--cnvs-brand-common-focus-outline);}" },
+            alert: { name: "277895", styles: "border-color:var(--cnvs-brand-alert-darkest);box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base);&:hover, &.hover, &:disabled, &.disabled, &:focus-visible:not([disabled]), &.focus:not([disabled]){border-color:var(--cnvs-brand-alert-darkest);}&:focus-visible:not([disabled]), &.focus:not([disabled]){box-shadow:inset 0 0 0 0.125rem var(--cnvs-brand-alert-base),\n        0 0 0 2px var(--cnvs-sys-color-border-inverse),\n        0 0 0 4px var(--cnvs-brand-common-focus-outline);}" }
+        }
     },
-    '::-ms-clear': {
-        display: 'none',
-    },
-}, ({ width }) => ({
-    minWidth: width || 280,
-    width,
-}), ({ grow }) => grow && {
-    width: '100%',
-}, ({ theme, error }) => {
-    return {
-        '&:focus-visible:not([disabled]), &.focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
-            outline: 'none',
-        },
-        ...common_1.errorRing(error, theme),
-    };
-});
+    defaultModifiers: {
+        grow: 'false',
+    }
+}, "text-input-ac8e50");
 exports.TextInput = common_1.createComponent('input')({
     displayName: 'TextInput',
-    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(StyledTextInput, Object.assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps))),
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(Element, Object.assign({ type: "text", ref: ref }, canvas_kit_styling_1.handleCsProp(elemProps, exports.textInputStencil({ width: typeof width === 'number' ? canvas_kit_styling_1.px2rem(width) : width, grow, error }))))),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },