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

package/dist/es6/avatar/lib/Avatar.d.ts

@@ -1,62 +1,167 @@
-import React from 'react';
 import { Property } from 'csstype';
-import { SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
-export declare enum AvatarVariant {
-    Light = 0,
-    Dark = 1
-}
-export interface AvatarProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface AvatarProps {
     /**
-     * The variant of the Avatar default state. Accepts `Light` or `Dark`.
-     * @default AvatarVariant.Light
+     * The variant of the avatar. Use `light` on dark backgrounds and `dark` on light backgrounds.
+     * @default "light"
      */
-    variant?: AvatarVariant;
+    variant?: 'light' | 'dark';
     /**
      * The size of the Avatar.
-     * @default SystemIconCircleSize.m
+     * - `extraExtraLarge`: 7.5rem x 7.5rem (120px  x 120px)
+     * - `extraLarge`: 4.5rem x 4.5rem (64px x 64px)
+     * - `large`: 2.5rem x 2.5rem (40px x 40px)
+     * - `medium`: 2rem x 2rem (32px x 32px)
+     * - `small`: 1.5rem x 1.5rem (24px x 24px)
+     * - `small`: 1rem x 1rem (16px x 16px)
+     * @default "medium"
      */
-    size?: SystemIconCircleSize | number;
+    size?: /** size of small */ 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge' | 'extraExtraLarge' | (string & {});
     /**
-     * The alt text of the Avatar image. This prop is also used for the aria-label
+     * The alt text of the Avatar image. This prop is also used for the aria-label.
      * @default Avatar
      */
     altText?: string;
     /**
-     * The url of the Avatar image.
+     * The URL of the user's photo. For best fit, use square images.
      */
     url?: string;
     /**
-     * The alternative container type for the button. Uses Emotion's special `as` prop.
-     * Will render an `div` tag instead of a `button` when defined.
-     */
-    as?: 'div';
-    /**
-     * The object-fit CSS property sets how the content of a replaced element,
-     * such as an `<img>` or `<video>`, should be resized to fit its container.
-     * See [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
-     * If your image is not a square, you can use this property to ensure the image is rendered properly.
+     * An objectFit property that can customize how to resize your image to fit its container.
+     * @default "contain"
      */
     objectFit?: Property.ObjectFit;
 }
-/**
- * Used to get the props of the div version of an avatar
- */
-declare type AvatarDivProps = Omit<AvatarProps, keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & React.HTMLAttributes<HTMLDivElement>;
-/**
- * Returns an overloaded functional component that uses button props by default.
- */
-declare type AvatarOverload = {
-    (props: {
-        as: 'div';
-    } & AvatarDivProps & {
-        ref?: React.Ref<HTMLElement>;
-    }): React.ReactElement;
-    (props: Omit<AvatarProps, 'as'> & {
-        ref?: React.Ref<HTMLButtonElement>;
-    }): React.ReactElement;
-    Variant: typeof AvatarVariant;
-    Size: typeof SystemIconCircleSize;
-};
-export declare const Avatar: AvatarOverload;
-export {};
+export declare const avatarStencil: import("@workday/canvas-kit-styling").Stencil<{
+    variant: {
+        light: {
+            backgroundColor: "--cnvs-sys-color-bg-alt-default";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: "--cnvs-sys-color-fg-default";
+            };
+        };
+        dark: {
+            backgroundColor: "--cnvs-sys-color-bg-primary-default";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: "--cnvs-sys-color-fg-inverse";
+            };
+        };
+    };
+    size: {
+        extraSmall: {
+            width: "--cnvs-sys-space-x4";
+            height: "--cnvs-sys-space-x4";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        small: {
+            width: "--cnvs-sys-space-x6";
+            height: "--cnvs-sys-space-x6";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        medium: {
+            width: "--cnvs-sys-space-x8";
+            height: "--cnvs-sys-space-x8";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        large: {
+            width: "--cnvs-sys-space-x10";
+            height: "--cnvs-sys-space-x10";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        extraLarge: {
+            width: "--cnvs-sys-space-x16";
+            height: "--cnvs-sys-space-x16";
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+        extraExtraLarge: {
+            width: string;
+            height: string;
+            "& [data-slot=\"avatar-icon\"]": {
+                [x: string]: string;
+            };
+        };
+    };
+    objectFit: {
+        contain: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "contain";
+            };
+        };
+        fill: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "fill";
+            };
+        };
+        cover: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "cover";
+            };
+        };
+        "scale-down": {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "scale-down";
+            };
+        };
+        none: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "none";
+            };
+        };
+        "-moz-initial": {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "-moz-initial";
+            };
+        };
+        initial: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "initial";
+            };
+        };
+        inherit: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "inherit";
+            };
+        };
+        revert: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "revert";
+            };
+        };
+        unset: {
+            "& [data-slot=\"avatar-image\"]": {
+                objectFit: "unset";
+            };
+        };
+    };
+    isImageLoaded: {
+        true: {
+            "& [data-slot=\"avatar-icon\"]": {
+                opacity: number;
+            };
+            "& [data-slot=\"avatar-image\"]": {
+                opacity: number;
+            };
+        };
+        false: {
+            "& [data-slot=\"avatar-icon\"]": {
+                opacity: number;
+            };
+            "& [data-slot=\"avatar-image\"]": {
+                opacity: number;
+            };
+        };
+    };
+}, {
+    size: string;
+}, never, never>;
+export declare const Avatar: import("@workday/canvas-kit-react/common").ElementComponent<"button", AvatarProps>;
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/es6/avatar/lib/Avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AACtC,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAIjC,OAAO,EAAmB,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGtF,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,IAAI,IAAA;CACL;AAED,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC;IACX;;;;;OAKG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED;;GAEG;AACH,aAAK,cAAc,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC,GAC1F,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEvC;;GAEG;AACH,aAAK,cAAc,GAAG;IACpB,CAAC,KAAK,EAAE;QAAC,EAAE,EAAE,KAAK,CAAA;KAAC,GAAG,cAAc,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC3F,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,GAAG;QAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAA;KAAC,GAAG,KAAK,CAAC,YAAY,CAAC;IAC5F,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,IAAI,EAAE,OAAO,oBAAoB,CAAC;CACnC,CAAC;AAyEF,eAAO,MAAM,MAAM,EAAE,cA2Db,CAAC"}
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../avatar/lib/Avatar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAUjC,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;;;;OASG;IACH,IAAI,CAAC,EACL,AADO,oBAAoB,CAC3B,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,GAAG,iBAAiB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC/F;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBA+KxB,CAAC;AAEH,eAAO,MAAM,MAAM,oFAqCjB,CAAC"}

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

@@ -1,83 +1,74 @@
 import React, { useState } from 'react';
-import { styled, focusRing, hideMouseFocus, filterOutProps } from '@workday/canvas-kit-react/common';
-import isPropValid from '@emotion/is-prop-valid';
-import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
-import { SystemIconCircle, SystemIconCircleSize } from '@workday/canvas-kit-react/icon';
+import { createComponent, focusRing } from '@workday/canvas-kit-react/common';
+import { createStencil, calc } from '@workday/canvas-kit-styling';
+import { mergeStyles } from '@workday/canvas-kit-react/layout';
+import { borderRadius } from '@workday/canvas-kit-react/tokens';
+import { SystemIcon, systemIconStencil } from '@workday/canvas-kit-react/icon';
 import { userIcon } from '@workday/canvas-system-icons-web';
-export var AvatarVariant;
-(function (AvatarVariant) {
-    AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
-    AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
-})(AvatarVariant || (AvatarVariant = {}));
-const fadeTransition = 'opacity 150ms linear';
-const StyledContainer = styled('button', {
-    shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
-})({
-    background: colors.soap200,
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 0,
-    border: 0,
-    boxSizing: 'border-box',
-    overflow: 'hidden',
-    borderRadius: borderRadius.circle,
-    '&:not([disabled])': {
-        '&:focus': {
-            outline: 'none',
-            ...focusRing({ separation: 2 }),
-        },
+import { system } from '@workday/canvas-tokens-web';
+export const avatarStencil = createStencil({
+    vars: {
+        size: '',
     },
-    ...hideMouseFocus,
-}, ({ size }) => ({
-    height: size,
-    width: size,
-}), ({ onClick }) => ({
-    cursor: onClick ? 'pointer' : 'default',
-}));
-const StyledStack = styled('span')({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-}, ({ size }) => ({
-    height: size,
-    width: size,
-}));
-const StyledIcon = styled(SystemIconCircle, {
-    shouldForwardProp: filterOutProps(['isImageLoaded']),
-})({
-    transition: fadeTransition,
-}, ({ isImageLoaded }) => ({
-    opacity: isImageLoaded ? 0 : 1,
-}));
-const StyledImage = styled('img', {
-    shouldForwardProp: filterOutProps(['isLoaded', 'objectFit']),
-})({
-    width: '100%',
-    height: '100%',
-    borderRadius: borderRadius.circle,
-    transition: fadeTransition,
-}, ({ isLoaded, objectFit }) => ({
-    opacity: isLoaded ? 1 : 0,
-    objectFit,
-}));
-export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, objectFit, ...elemProps }, ref) => {
-    const [imageLoaded, setImageLoaded] = 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.useLayoutEffect(() => {
-        setImageLoaded(false);
-    }, [url]);
-    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
-    return (React.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
-        React.createElement(StyledStack, { size: size },
-            React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
-        url && (React.createElement(StyledStack, { size: size },
-            React.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
-Avatar.Variant = AvatarVariant;
-Avatar.Size = SystemIconCircleSize;
+    },
+    defaultModifiers: {
+        variant: 'light',
+        size: 'medium',
+        isImageLoaded: 'false',
+        objectFit: 'contain',
+    }
+}, "avatar-f68c19");
+export const Avatar = createComponent('button')({
+    displayName: 'Avatar',
+    Component: ({ variant, size, altText = 'Avatar', url, objectFit, ...elemProps }, ref, Element) => {
+        const [imageLoaded, setImageLoaded] = useState(false);
+        const loadImage = () => {
+            if (!imageLoaded) {
+                setImageLoaded(true);
+            }
+        };
+        React.useLayoutEffect(() => {
+            setImageLoaded(false);
+        }, [url]);
+        return (React.createElement(Element, Object.assign({ ref: ref, "aria-label": altText }, mergeStyles(elemProps, [
+            avatarStencil({
+                variant,
+                size,
+                objectFit,
+                isImageLoaded: imageLoaded,
+            }),
+        ])),
+            React.createElement(SystemIcon, { icon: userIcon, "data-slot": "avatar-icon" }),
+            url && React.createElement("img", { "data-slot": "avatar-image", src: url, alt: altText, onLoad: loadImage })));
+    },
+});

package/dist/es6/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/es6/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/es6/text-area/lib/TextArea.js

@@ -1,55 +1,32 @@
 import * as React from 'react';
-import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { borderRadius, inputColors, space, type } from '@workday/canvas-kit-react/tokens';
-export var TextAreaResizeDirection;
-(function (TextAreaResizeDirection) {
-    TextAreaResizeDirection["None"] = "none";
-    TextAreaResizeDirection["Both"] = "both";
-    TextAreaResizeDirection["Horizontal"] = "horizontal";
-    TextAreaResizeDirection["Vertical"] = "vertical";
-})(TextAreaResizeDirection || (TextAreaResizeDirection = {}));
-const StyledTextArea = styled('textarea')(({ theme, error }) => ({
-    ...type.levels.subtext.large,
-    border: `1px solid ${inputColors.border}`,
-    display: 'block',
-    backgroundColor: inputColors.background,
-    borderRadius: borderRadius.m,
-    boxSizing: 'border-box',
-    minHeight: space.xxl,
-    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
-    transition: '0.2s box-shadow, 0.2s border-color',
-    padding: space.xxs,
-    margin: 0,
-    '&::webkit-resizer': {
-        display: 'none',
+import { createComponent, ErrorType } from '@workday/canvas-kit-react/common';
+import { createStencil, calc, handleCsProp } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
+import { textInputStencil } from '@workday/canvas-kit-react/text-input';
+export const TextAreaResizeDirection = {
+    None: 'none',
+    Both: 'both',
+    Horizontal: 'horizontal',
+    Vertical: 'vertical',
+};
+export const textAreaStencil = createStencil({
+    extends: 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;" }
+        }
     },
-    '&::placeholder': {
-        color: inputColors.placeholder,
-    },
-    '&:hover': {
-        borderColor: 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: inputColors.disabled.background,
-        borderColor: inputColors.disabled.border,
-        color: inputColors.disabled.text,
-        '&::placeholder': {
-            color: inputColors.disabled.text,
-        },
-    },
-    ...errorRing(error, theme),
-}), ({ resize, grow }) => ({
-    width: grow ? '100%' : undefined,
-    resize: grow ? TextAreaResizeDirection.Vertical : resize,
-}));
+    defaultModifiers: {
+        resize: 'both',
+    }
+}, "text-area-3e725a");
 export const TextArea = 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 = TextAreaResizeDirection.Both, grow, error, ...elemProps }, ref, Element) => React.createElement(Element, Object.assign({ ref: ref }, handleCsProp(elemProps, textAreaStencil({ error, grow, resize })))),
     subComponents: {
         ErrorType,
         ResizeDirection: TextAreaResizeDirection,

package/dist/es6/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/es6/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"}