@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

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

@@ -0,0 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { createModelHook } from '@workday/canvas-kit-react/common';
+export var 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.
+         */
+        disabled: false,
+    },
+})(function (config) {
+    var state = __assign({}, config);
+    return { state: state, events: {} };
+});

package/dist/es6/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

package/dist/es6/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}

package/dist/es6/side-panel/lib/SidePanel.js

@@ -29,11 +29,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { styled, useIsRTL } from '@workday/canvas-kit-react/common';
 import { css, jsx, keyframes } from '@emotion/react';
-import { IconButton } from '@workday/canvas-kit-react/button';
-import { space, colors } from '@workday/canvas-kit-react/tokens';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { space, colors, depth } from '@workday/canvas-kit-react/tokens';
 import { transformationImportIcon } from '@workday/canvas-system-icons-web';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { Box } from '@workday/canvas-kit-react/layout';
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -41,7 +40,13 @@ var createKeyframes = function (from, to) {
     };
     return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
 };
-var StyledPanel = styled(Box)({
+var containerVariantStyle = {
+    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[5]),
+    standard: {
+        backgroundColor: colors.soap100,
+    },
+};
+var Panel = styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -52,10 +57,8 @@ export var SidePanelContext = React.createContext({
     origin: 'left',
 });
 var SidePanel = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, 
-    // variant = 'standard',
-    touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
-    var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
+    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
+    var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
     React.useEffect(function () {
         if (typeof onExpandedChange !== 'undefined') {
             onExpandedChange(expanded);
@@ -94,7 +97,18 @@ var SidePanel = function (_a) {
             onAnimationStart(event);
         }
     };
-    return (jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? colors.frenchVanilla100 : colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
+    return (jsx(Panel, __assign({ as: as, css: [
+            {
+                width: expanded ? expandedWidth : collapsedWidth,
+                maxWidth: expanded ? expandedWidth : collapsedWidth,
+                // mounted.current will be false on the first render, thus you won't get an unwanted animation here
+                // Will animate again if you force a re-render (like in Storybook)
+                animation: touched
+                    ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
+                    : undefined,
+            },
+            containerVariantStyle[variant],
+        ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
         jsx(SidePanelContext.Provider, { value: {
                 state: state,
                 origin: origin,
@@ -104,7 +118,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+    var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = useIsRTL();
@@ -120,6 +134,7 @@ var ToggleButton = function (_a) {
     var buttonStyle = css({
         position: 'absolute',
         top: space.m,
+        width: space.l,
         right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? space.s : undefined,
         left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
         margin: context.state === 'collapsed' ? 'auto' : 0,
@@ -128,7 +143,7 @@ var ToggleButton = function (_a) {
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
     return (jsx(Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
-        jsx(IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
+        jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 export default SidePanel;

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

@@ -1,22 +1,63 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextAreaModel } from './hooks';
-export declare const TextAreaModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>>;
 export interface TextAreaProps extends ExtractProps<typeof FormField, never> {
-    model?: TextAreaModel;
     /**
      * Children of the Text Input. Should contain a `<TextArea.Field>`, a `<TextArea.Label>` and an optional `<TextArea.Hint>`
      */
     children: React.ReactNode;
 }
-export declare const TextArea: import("@workday/canvas-kit-react/common").Component<TextAreaProps> & {
-    Field: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", import("./TextAreaField").TextAreaFieldProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+export declare const TextArea: import("@workday/canvas-kit-react/common").ElementComponentM<"div", TextAreaProps & Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
 };
 //# 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,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAC,aAAa,EAAmB,MAAM,SAAS,CAAC;AAKxD,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

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

@@ -21,27 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
 import { Stack } from '@workday/canvas-kit-react/layout';
 import { useTextAreaModel } from './hooks';
 import { TextAreaField } from './TextAreaField';
-import { TextAreaLabel } from './TextAreaLabel';
-import { TextAreaHint } from './TextAreaHint';
-export var TextAreaModelContext = FormFieldModelContext;
-export var TextArea = createComponent()({
+export var TextArea = createContainer('div')({
     displayName: 'TextArea',
-    Component: function (_a, ref) {
-        var children = _a.children, model = _a.model, orientation = _a.orientation, props = __rest(_a, ["children", "model", "orientation"]);
-        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
-        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useTextAreaModel);
-        var layoutProps = useFormFieldOrientation(orientation);
-        return (React.createElement(TextAreaModelContext.Provider, { value: value },
-            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
-    },
+    modelHook: useTextAreaModel,
     subComponents: {
         Field: TextAreaField,
-        Label: TextAreaLabel,
-        Hint: TextAreaHint,
+        Label: FormField.Label,
+        Hint: FormField.Hint,
     },
+})(function (_a, Element) {
+    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
+    var layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/text-area/lib/TextAreaField.d.ts

@@ -1,8 +1,16 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextAreaModel } from './hooks';
-export interface TextAreaFieldProps extends ExtractProps<typeof FormField.Input, never> {
-    model?: TextAreaModel;
-}
-export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponent<"textarea", TextAreaFieldProps>;
+export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=TextAreaField.d.ts.map

package/dist/es6/text-area/lib/TextAreaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAkCxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EA+BxB,CAAC"}

package/dist/es6/text-area/lib/TextAreaField.js

@@ -24,10 +24,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
-import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextAreaModelContext } from './TextArea';
+import { useTextInputModel } from '@workday/canvas-kit-preview-react/text-input';
 var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition: '0.2s box-shadow, 0.2s border-color', resize: 'both', '&::webkit-resizer': {
         display: 'none',
     }, '&::placeholder': {
@@ -44,21 +44,20 @@ var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition:
             color: inputColors.disabled.text,
         },
     } });
-export var TextAreaField = createComponent('textarea')({
+export var TextAreaField = createSubcomponent('textarea')({
     displayName: 'TextArea.Field',
-    Component: function (_a, ref) {
-        var model = _a.model, elemProps = __rest(_a, ["model"]);
-        var localModel = useModelContext(TextAreaModelContext, model);
-        var theme = useTheme();
-        var errorRing = useThemedRing('error');
-        var focusStyles = localModel.state.hasError
-            ? errorRing
-            : {
-                '&:focus:not([disabled])': {
-                    borderColor: theme.canvas.palette.common.focusOutline,
-                    boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
-                },
-            };
-        return (jsx(FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
-    },
+    modelHook: useTextInputModel,
+})(function (_a, Element, model) {
+    var elemProps = __rest(_a, []);
+    var theme = useTheme();
+    var errorRing = useThemedRing('error');
+    var focusStyles = model.state.hasError
+        ? errorRing
+        : {
+            '&:focus:not([disabled])': {
+                borderColor: theme.canvas.palette.common.focusOutline,
+                boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+            },
+        };
+    return (jsx(FormField.Input, __assign({ as: Element, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
 });

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts

@@ -1,8 +1,28 @@
-import { FormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
-export declare const useTextAreaModel: (config?: import("../../../form-field").FormFieldModelConfig) => import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>;
-export declare type TextAreaModel = FormFieldModel;
+export declare const useTextAreaModel: (<TT_Special_Generic>(config?: (Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}, {}, {
+    id: string;
+    hasError: boolean;
+    isRequired: boolean;
+}, {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=useTextAreaModel.d.ts.map

package/dist/es6/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}
+{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

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

@@ -1,22 +1,70 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextInputModel } from './hooks';
-export declare const TextInputModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>>;
 export interface TextInputProps extends ExtractProps<typeof FormField, never> {
-    model?: TextInputModel;
     /**
      * Children of the Text Input. Should contain a `<TextInput.Field>`, a `<TextInput.Label>` and an optional `<TextInput.Hint>`
      */
     children: React.ReactNode;
 }
-export declare const TextInput: import("@workday/canvas-kit-react/common").Component<TextInputProps> & {
-    Field: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./TextInputField").TextInputFieldProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("../../form-field/lib/FormFieldHint").FormFieldHintProps>;
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../form-field").FormFieldProps & Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {} & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("../../form-field/lib/FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
 };
 //# sourceMappingURL=TextInput.d.ts.map

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

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

@@ -21,27 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { FormFieldModelContext, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { FormField, useFormFieldOrientation } from '@workday/canvas-kit-preview-react/form-field';
 import { Stack } from '@workday/canvas-kit-react/layout';
 import { useTextInputModel } from './hooks';
 import { TextInputField } from './TextInputField';
-import { TextInputLabel } from './TextInputLabel';
-import { TextInputHint } from './TextInputHint';
-export var TextInputModelContext = FormFieldModelContext;
-export var TextInput = createComponent()({
+export var TextInput = createContainer('div')({
     displayName: 'TextInput',
-    Component: function (_a, ref) {
-        var children = _a.children, model = _a.model, orientation = _a.orientation, props = __rest(_a, ["children", "model", "orientation"]);
-        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
-        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useTextInputModel);
-        var layoutProps = useFormFieldOrientation(orientation);
-        return (React.createElement(TextInputModelContext.Provider, { value: value },
-            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
-    },
+    modelHook: useTextInputModel,
     subComponents: {
         Field: TextInputField,
-        Label: TextInputLabel,
-        Hint: TextInputHint,
+        Label: FormField.Label,
+        Hint: FormField.Hint,
     },
+})(function (_a, Element) {
+    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
+    var layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Stack, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/text-input/lib/TextInputField.d.ts

@@ -1,8 +1,16 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { FormField } from '@workday/canvas-kit-preview-react/form-field';
-import { TextInputModel } from './hooks';
-export interface TextInputFieldProps extends ExtractProps<typeof FormField.Input, never> {
-    model?: TextInputModel;
-}
-export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponent<"input", TextInputFieldProps>;
+export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=TextInputField.d.ts.map

package/dist/es6/text-input/lib/TextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAgCzB,CAAC"}