@workday/canvas-kit-preview-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -26,7 +26,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
             isRequired: boolean;
         };
         events: {};
-    }>, {
+    }, {}>, {
         state: {
             id: string;
             hasError: boolean;
@@ -42,7 +42,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

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,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"}
+{"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,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,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/commonjs/text-area/lib/TextArea.js

@@ -1,47 +1,23 @@
 "use strict";
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextArea = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
-var TextAreaField_1 = require("./TextAreaField");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const TextAreaField_1 = require("./TextAreaField");
 exports.TextArea = common_1.createContainer('div')({
     displayName: 'TextArea',
-    modelHook: hooks_1.useTextAreaModel,
+    modelHook: form_field_1.useFormFieldModel,
     subComponents: {
         Field: TextAreaField_1.TextAreaField,
         Label: form_field_1.FormField.Label,
         Hint: form_field_1.FormField.Hint,
     },
-})(function (_a, Element) {
-    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
-    var layoutProps = form_field_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+})(({ children, orientation, ...elemProps }, Element) => {
+    const layoutProps = form_field_1.useFormFieldOrientation(orientation);
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
 });

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

@@ -5,7 +5,7 @@ export declare const TextAreaField: import("@workday/canvas-kit-react/common").E
         isRequired: boolean;
     };
     events: {};
-}>, {
+}, {}>, {
     state: {
         id: string;
         hasError: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}

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

@@ -1,37 +1,14 @@
 "use strict";
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextAreaField = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
-var react_1 = require("@emotion/react");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var common_2 = require("@workday/canvas-kit-labs-react/common");
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var text_input_1 = require("@workday/canvas-kit-preview-react/text-input");
-var baseStyles = {
+const react_1 = require("@emotion/react");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const text_input_1 = require("@workday/canvas-kit-preview-react/text-input");
+const baseStyles = {
     transition: '0.2s box-shadow, 0.2s border-color',
     resize: 'both',
     '&::webkit-resizer': {
@@ -58,17 +35,16 @@ var baseStyles = {
 exports.TextAreaField = common_1.createSubcomponent('textarea')({
     displayName: 'TextArea.Field',
     modelHook: text_input_1.useTextInputModel,
-})(function (_a, Element, model) {
-    var elemProps = __rest(_a, []);
-    var theme = common_1.useTheme();
-    var errorRing = common_2.useThemedRing('error');
-    var focusStyles = model.state.hasError
+})(({ ...elemProps }, Element, model) => {
+    const theme = common_1.useTheme();
+    const errorRing = common_1.useThemedRing('error');
+    const 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,
+                boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             },
         };
-    return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: Element }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display: "block", backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
+    return (react_1.jsx(form_field_1.FormField.Input, Object.assign({ as: Element }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: `1px solid ${tokens_1.inputColors.border}`, display: "block", backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
 });

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

@@ -7,7 +7,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
      */
     children: React.ReactNode;
 }
-export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../form-field").FormFieldProps & Partial<{
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-preview-react/form-field").FormFieldProps & Partial<{
     hasError: boolean;
     id: string;
     isRequired: boolean;
@@ -18,7 +18,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         isRequired: boolean;
     };
     events: {};
-}>, {
+}, {}>, {
     state: {
         id: string;
         hasError: boolean;
@@ -33,7 +33,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
             isRequired: boolean;
         };
         events: {};
-    }>, {
+    }, {}>, {
         state: {
             id: string;
             hasError: boolean;
@@ -49,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

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":"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"}
+{"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,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,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/commonjs/text-input/lib/TextInput.js

@@ -1,47 +1,23 @@
 "use strict";
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInput = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
-var TextInputField_1 = require("./TextInputField");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const TextInputField_1 = require("./TextInputField");
 exports.TextInput = common_1.createContainer('div')({
     displayName: 'TextInput',
-    modelHook: hooks_1.useTextInputModel,
+    modelHook: form_field_1.useFormFieldModel,
     subComponents: {
         Field: TextInputField_1.TextInputField,
         Label: form_field_1.FormField.Label,
         Hint: form_field_1.FormField.Hint,
     },
-})(function (_a, Element) {
-    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
-    var layoutProps = form_field_1.useFormFieldOrientation(orientation);
-    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
+})(({ children, orientation, ...elemProps }, Element) => {
+    const layoutProps = form_field_1.useFormFieldOrientation(orientation);
+    return (react_1.default.createElement(layout_1.Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
 });

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

@@ -5,7 +5,7 @@ export declare const TextInputField: import("@workday/canvas-kit-react/common").
         isRequired: boolean;
     };
     events: {};
-}>, {
+}, {}>, {
     state: {
         id: string;
         hasError: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}

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

@@ -1,26 +1,14 @@
 "use strict";
-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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextInputField = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
-var react_1 = require("@emotion/react");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var common_2 = require("@workday/canvas-kit-labs-react/common");
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var hooks_1 = require("./hooks");
-var baseStyles = {
+const react_1 = require("@emotion/react");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const hooks_1 = require("./hooks");
+const baseStyles = {
     transition: '0.2s box-shadow, 0.2s border-color',
     '&::placeholder': {
         color: tokens_1.inputColors.placeholder,
@@ -45,18 +33,18 @@ var baseStyles = {
 };
 exports.TextInputField = common_1.createSubcomponent('input')({
     displayName: 'TextInput.Field',
-    modelHook: hooks_1.useTextInputModel,
+    modelHook: form_field_1.useFormFieldModel,
     elemPropsHook: hooks_1.useTextInputField,
-})(function (elemProps, Element, model) {
-    var theme = common_1.useTheme();
-    var errorRing = common_2.useThemedRing('error');
-    var focusStyles = model.state.hasError
+})((elemProps, Element, model) => {
+    const theme = common_1.useTheme();
+    const errorRing = common_1.useThemedRing('error');
+    const 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,
+                boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             },
         };
-    return (react_1.jsx(form_field_1.FormField.Input, __assign({ as: "input" }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, elemProps)));
+    return (react_1.jsx(form_field_1.FormField.Input, Object.assign({ as: "input" }, tokens_1.type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: `1px solid ${tokens_1.inputColors.border}`, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, elemProps)));
 });

package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts

@@ -1,16 +1,14 @@
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
  */
-export declare const useTextInputField: <P extends {}, R>(model: {
+export declare const useTextInputField: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         id: string;
         hasError: boolean;
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, {
     type: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useTextInputField.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTextInputField.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputField.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;OAI5B,CAAC"}
+{"version":3,"file":"useTextInputField.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputField.tsx"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;EAI5B,CAAC"}

package/dist/commonjs/text-input/lib/hooks/useTextInputField.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTextInputField = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var useTextInputModel_1 = require("./useTextInputModel");
+const common_1 = require("@workday/canvas-kit-react/common");
+const useTextInputModel_1 = require("./useTextInputModel");
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
  */
-exports.useTextInputField = common_1.createElemPropsHook(useTextInputModel_1.useTextInputModel)(function () {
+exports.useTextInputField = common_1.createElemPropsHook(useTextInputModel_1.useTextInputModel)(() => {
     return {
         type: 'text',
     };

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Please use `useFormFieldModel` instead */
 export declare const useTextInputModel: (<TT_Special_Generic>(config?: (Partial<{
     hasError: boolean;
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTextInputModel = void 0;
-var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+const form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+/** @deprecated Please use `useFormFieldModel` instead */
 exports.useTextInputModel = form_field_1.useFormFieldModel;

package/dist/es6/color-picker/lib/ColorPicker.js

@@ -1,25 +1,3 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { checkIcon } from '@workday/canvas-system-icons-web';
 import { ColorInput } from '@workday/canvas-kit-react/color-picker';
@@ -29,7 +7,7 @@ import { FormField } from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
 import { ResetButton } from './parts/ColorReset';
 import { SwatchBook } from './parts/SwatchBook';
-var defaultColorSet = [
+const defaultColorSet = [
     colors.blueberry600,
     colors.grapeSoda600,
     colors.pomegranate600,
@@ -87,56 +65,55 @@ var defaultColorSet = [
     colors.frenchVanilla200,
     colors.frenchVanilla100,
 ];
-var ColorPickerContainer = styled('div')({
+const ColorPickerContainer = styled('div')({
     width: 216,
 });
-var ColorInputWrapper = styled('form')({
+const ColorInputWrapper = styled('form')({
     width: '100%',
     marginTop: space.s,
     display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between',
 });
-var ColorInputAndLabel = styled(FormField)({
+const ColorInputAndLabel = styled(FormField)({
     display: 'flex',
     flexDirection: 'column',
     margin: 0,
 });
-var CheckButton = styled(SecondaryButton)({
+const CheckButton = styled(SecondaryButton)({
     alignSelf: 'flex-end',
 });
-var HexColorInput = styled(ColorInput)({
+const HexColorInput = styled(ColorInput)({
     width: '168px',
 });
-var isCustomColor = function (colors, hexCode) {
+const isCustomColor = (colors, hexCode) => {
     if (!hexCode) {
         return false;
     }
-    var lowercaseHex = hexCode.toLowerCase();
+    const lowercaseHex = hexCode.toLowerCase();
     return !colors.includes(lowercaseHex);
 };
-export var ColorPicker = function (_a) {
-    var _b = _a.colorSet, colorSet = _b === void 0 ? defaultColorSet : _b, _c = _a.customHexInputLabel, customHexInputLabel = _c === void 0 ? 'Custom Hex Color' : _c, _d = _a.submitLabel, submitLabel = _d === void 0 ? 'Submit' : _d, onColorChange = _a.onColorChange, onColorReset = _a.onColorReset, onSubmitClick = _a.onSubmitClick, _e = _a.resetLabel, resetLabel = _e === void 0 ? 'Reset' : _e, resetColor = _a.resetColor, _f = _a.value, value = _f === void 0 ? '' : _f, _g = _a.showCustomHexInput, showCustomHexInput = _g === void 0 ? false : _g, elemProps = __rest(_a, ["colorSet", "customHexInputLabel", "submitLabel", "onColorChange", "onColorReset", "onSubmitClick", "resetLabel", "resetColor", "value", "showCustomHexInput"]);
-    var _h = React.useState(''), validHexValue = _h[0], setValidHexValue = _h[1];
-    var _j = React.useState(isCustomColor(colorSet, value) ? value : ''), customHexValue = _j[0], setCustomHexValue = _j[1];
-    var onCustomHexChange = function (event) {
+export const ColorPicker = ({ colorSet = defaultColorSet, customHexInputLabel = 'Custom Hex Color', submitLabel = 'Submit', onColorChange, onColorReset, onSubmitClick, resetLabel = 'Reset', resetColor, value = '', showCustomHexInput = false, ...elemProps }) => {
+    const [validHexValue, setValidHexValue] = React.useState('');
+    const [customHexValue, setCustomHexValue] = React.useState(isCustomColor(colorSet, value) ? value : '');
+    const onCustomHexChange = (event) => {
         setCustomHexValue(event.target.value);
         setValidHexValue('');
     };
-    var onValidCustomHexChange = function (validHexValue) { return setValidHexValue(validHexValue); };
-    var onSubmit = function (event) {
+    const onValidCustomHexChange = (validHexValue) => setValidHexValue(validHexValue);
+    const onSubmit = (event) => {
         if (onSubmitClick) {
             onSubmitClick(event);
         }
         onColorChange(validHexValue);
         event.preventDefault(); // don't submit the form - default action is to reload the page
     };
-    return (React.createElement(ColorPickerContainer, __assign({}, elemProps),
+    return (React.createElement(ColorPickerContainer, Object.assign({}, elemProps),
         onColorReset && resetColor && (React.createElement(ResetButton, { onClick: onColorReset, resetColor: resetColor, label: resetLabel })),
         React.createElement(SwatchBook, { colors: colorSet, onSelect: onColorChange, value: value }),
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
             React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
-            React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon })))));
+            React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon, type: "submit" })))));
 };
 ColorPicker.defaultColorSet = defaultColorSet;

package/dist/es6/color-picker/lib/parts/ColorReset.js

@@ -1,30 +1,39 @@
-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 * as React from 'react';
 import styled from '@emotion/styled';
 import { colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { focusRing, hideMouseFocus } from '@workday/canvas-kit-react/common';
 import { ColorSwatch } from '@workday/canvas-kit-react/color-picker';
-var Label = styled('div')({
+const Label = styled('div')({
     marginLeft: space.xxs,
 });
-var Container = styled('button')(__assign(__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', width: "calc(100% + " + space.l + ")", height: space.l, margin: "-" + space.xxs + " -" + space.s + " " + space.xxs, padding: "0px " + space.s }, type.levels.subtext.medium), { whiteSpace: 'nowrap', border: 'none', outline: 'none', background: 'none', cursor: 'pointer', transition: 'color 120ms ease, background-color 120ms ease', '&:hover': {
+const Container = styled('button')({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: `calc(100% + ${space.l})`,
+    height: space.l,
+    margin: `-${space.xxs} -${space.s} ${space.xxs}`,
+    padding: `0px ${space.s}`,
+    ...type.levels.subtext.medium,
+    whiteSpace: 'nowrap',
+    border: 'none',
+    outline: 'none',
+    background: 'none',
+    cursor: 'pointer',
+    transition: 'color 120ms ease, background-color 120ms ease',
+    '&:hover': {
         backgroundColor: colors.soap300,
-    }, '&:active': {
+    },
+    '&:active': {
         backgroundColor: colors.soap400,
-    }, '&:focus': __assign({}, focusRing()) }), hideMouseFocus));
-export var ResetButton = function (_a) {
-    var onClick = _a.onClick, resetColor = _a.resetColor, label = _a.label;
-    var handleResetColor = function () { return onClick(resetColor); };
+    },
+    '&:focus': {
+        ...focusRing(),
+    },
+    ...hideMouseFocus,
+});
+export const ResetButton = ({ onClick, resetColor, label }) => {
+    const handleResetColor = () => onClick(resetColor);
     return (React.createElement(Container, { onClick: handleResetColor },
         React.createElement(ColorSwatch, { color: resetColor }),
         React.createElement(Label, null, label)));