@workday/canvas-kit-preview-react 7.1.4 → 7.2.0-427-next.2

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

@@ -1,41 +1,17 @@
-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 React from 'react';
 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 { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { TextAreaField } from './TextAreaField';
-export var TextArea = createContainer('div')({
+export const TextArea = createContainer('div')({
     displayName: 'TextArea',
-    modelHook: useTextAreaModel,
+    modelHook: useFormFieldModel,
     subComponents: {
         Field: TextAreaField,
         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));
+})(({ children, orientation, ...elemProps }, Element) => {
+    const layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
 });

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

@@ -1,11 +1,11 @@
-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<{
+export declare const TextAreaField: import("@workday/canvas-kit-react/common").ElementComponentM<"textarea", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & 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").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         id: string;
         hasError: boolean;
         isRequired: boolean;
     };
     events: {};
-}>, {
+}, {}>, {
     state: {
         id: string;
         hasError: boolean;

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":"AA0CA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EA+BxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}

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

@@ -1,63 +1,47 @@
-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;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
-import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
-import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
+import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
 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': {
+const baseStyles = {
+    transition: '0.2s box-shadow, 0.2s border-color',
+    resize: 'both',
+    '&::webkit-resizer': {
         display: 'none',
-    }, '&::placeholder': {
+    },
+    '&::placeholder': {
         color: inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: inputColors.disabled.background,
         borderColor: inputColors.disabled.border,
         color: inputColors.disabled.text,
         '&::placeholder': {
             color: inputColors.disabled.text,
         },
-    } });
-export var TextAreaField = createSubcomponent('textarea')({
+    },
+};
+export const TextAreaField = createSubcomponent('textarea')({
     displayName: 'TextArea.Field',
     modelHook: useTextInputModel,
-})(function (_a, Element, model) {
-    var elemProps = __rest(_a, []);
-    var theme = useTheme();
-    var errorRing = useThemedRing('error');
-    var focusStyles = model.state.hasError
+})(({ ...elemProps }, Element, model) => {
+    const theme = useTheme();
+    const errorRing = 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 (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 })));
+    return (jsx(FormField.Input, Object.assign({ as: Element }, type.levels.subtext.large, { 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-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;
@@ -26,23 +26,14 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
     };
     events: {};
 }> & {
-    Context: React.Context<{
+    Field: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & 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").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
         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;
@@ -58,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         };
         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, {
+    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/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,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/es6/text-input/lib/TextInput.js

@@ -1,41 +1,17 @@
-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 React from 'react';
 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 { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { TextInputField } from './TextInputField';
-export var TextInput = createContainer('div')({
+export const TextInput = createContainer('div')({
     displayName: 'TextInput',
-    modelHook: useTextInputModel,
+    modelHook: useFormFieldModel,
     subComponents: {
         Field: TextInputField,
         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));
+})(({ children, orientation, ...elemProps }, Element) => {
+    const layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
 });

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

@@ -1,11 +1,11 @@
-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<{
+export declare const TextInputField: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").BackgroundStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/color").BorderColorStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/lineStyle").BorderLineStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/radius").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/shorthand").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/border/width").BorderWidthStyleProps & 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").GridItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStyleProps & import("@workday/canvas-kit-react/layout").SpaceStyleProps & import("@workday/canvas-kit-react/layout").TextStyleProps & import("@workday/canvas-kit-react/common").PropsWithModel<{
     state: {
         id: string;
         hasError: boolean;
         isRequired: boolean;
     };
     events: {};
-}>, {
+}, {}>, {
     state: {
         id: string;
         hasError: boolean;

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":"AA0CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAgCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;EAiCzB,CAAC"}

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

@@ -1,52 +1,47 @@
-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);
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, space, type, } from '@workday/canvas-kit-react/tokens';
-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 { useTextInputField, useTextInputModel } from './hooks';
-var baseStyles = __assign(__assign({}, type.levels.subtext.large), { transition: '0.2s box-shadow, 0.2s border-color', '&::placeholder': {
+import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
+import { FormField, useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
+import { useTextInputField } from './hooks';
+const baseStyles = {
+    transition: '0.2s box-shadow, 0.2s border-color',
+    '&::placeholder': {
         color: inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: inputColors.disabled.background,
         borderColor: inputColors.disabled.border,
         color: inputColors.disabled.text,
         '&::placeholder': {
             color: inputColors.disabled.text,
         },
-    }, '::-ms-clear': {
+    },
+    '::-ms-clear': {
         display: 'none',
-    } });
-export var TextInputField = createSubcomponent('input')({
+    },
+};
+export const TextInputField = createSubcomponent('input')({
     displayName: 'TextInput.Field',
-    modelHook: useTextInputModel,
+    modelHook: useFormFieldModel,
     elemPropsHook: useTextInputField,
-})(function (elemProps, Element, model) {
-    var theme = useTheme();
-    var errorRing = useThemedRing('error');
-    var focusStyles = model.state.hasError
+})((elemProps, Element, model) => {
+    const theme = useTheme();
+    const errorRing = 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 (jsx(FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + inputColors.border, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
+    return (jsx(FormField.Input, Object.assign({ as: "input" }, type.levels.subtext.large, { css: [baseStyles, focusStyles], padding: space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: `1px solid ${inputColors.border}`, backgroundColor: inputColors.background, borderRadius: borderRadius.m }, elemProps)));
 });

package/dist/es6/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/es6/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/es6/text-input/lib/hooks/useTextInputField.js

@@ -3,7 +3,7 @@ import { useTextInputModel } from './useTextInputModel';
 /**
  * Adds the necessary props to a `Field` component. Used by the TextInput.Field subcomponent.
  */
-export var useTextInputField = createElemPropsHook(useTextInputModel)(function () {
+export const useTextInputField = createElemPropsHook(useTextInputModel)(() => {
     return {
         type: 'text',
     };

package/dist/es6/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/es6/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/es6/text-input/lib/hooks/useTextInputModel.js

@@ -1,2 +1,3 @@
 import { useFormFieldModel } from '@workday/canvas-kit-preview-react/form-field';
-export var useTextInputModel = useFormFieldModel;
+/** @deprecated Please use `useFormFieldModel` instead */
+export const useTextInputModel = useFormFieldModel;

package/form-field/lib/FormField.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 
-import {createContainer, ExtractProps} from '@workday/canvas-kit-react/common';
-import {Stack, StackSpacing} from '@workday/canvas-kit-react/layout';
+import {createContainer} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
 
 import {useFormFieldModel, useFormFieldOrientation} from './hooks';
 import {FormFieldInput} from './FormFieldInput';
 import {FormFieldLabel} from './FormFieldLabel';
 import {FormFieldHint} from './FormFieldHint';
 
-export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
+export interface FormFieldProps extends FlexProps {
   /**
    * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
    */
@@ -17,11 +17,6 @@ export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>,
    * The direction the child elements should stack
    */
   orientation: 'vertical' | 'horizontal';
-  /**
-   * Spacing between children elements
-   * @default xxxs when vertical l when orientation is horizontal
-   */
-  spacing?: StackSpacing;
 }
 
 export const FormField = createContainer('div')({
@@ -36,8 +31,8 @@ export const FormField = createContainer('div')({
   const layoutProps = useFormFieldOrientation(orientation);
 
   return (
-    <Stack as={Element} {...layoutProps} {...elemProps}>
+    <Flex as={Element} {...layoutProps} {...elemProps}>
       {children}
-    </Stack>
+    </Flex>
   );
 });

package/form-field/lib/FormFieldHint.tsx

@@ -1,40 +1,33 @@
 import React from 'react';
-import {
-  createSubcomponent,
-  ExtractProps,
-  useTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {space, type} from '@workday/canvas-kit-react/tokens';
-import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
+import {createSubcomponent, ExtractProps, useTheme} from '@workday/canvas-kit-react/common';
+import {space} from '@workday/canvas-kit-react/tokens';
 
 import {useFormFieldHint, useFormFieldModel} from './hooks';
-
-const StyledHint = styled(Box)<StyledType & BoxProps>({
-  ...type.levels.subtext.medium,
-});
+import {Subtext} from '@workday/canvas-kit-react/text';
 
 export const FormFieldHint = createSubcomponent('p')({
   displayName: 'FormField.Hint',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldHint,
-})<ExtractProps<typeof Box, never>>(({children, ...elemProps}, Element, model) => {
-  const theme = useTheme();
+})<Omit<ExtractProps<typeof Subtext, never>, 'size'>>(
+  ({children, ...elemProps}, Element, model) => {
+    const theme = useTheme();
 
-  if (!children) {
-    // If there is no hint text just skip rendering
-    return null;
-  }
+    if (!children) {
+      // If there is no hint text just skip rendering
+      return null;
+    }
 
-  return (
-    <StyledHint
-      as={Element}
-      color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
-      marginY={space.xxs}
-      {...elemProps}
-    >
-      {children}
-    </StyledHint>
-  );
-});
+    return (
+      <Subtext
+        as={Element}
+        size="medium"
+        color={model.state.hasError ? theme.canvas.palette.error.main : undefined}
+        marginY={space.xxs}
+        {...elemProps}
+      >
+        {children}
+      </Subtext>
+    );
+  }
+);

package/form-field/lib/FormFieldLabel.tsx

@@ -1,55 +1,40 @@
 import React from 'react';
 
-import {
-  createSubcomponent,
-  ExtractProps,
-  useTheme,
-  styled,
-  StyledType,
-} from '@workday/canvas-kit-react/common';
-import {Box, HStack, StackSpacing} from '@workday/canvas-kit-react/layout';
-import {type} from '@workday/canvas-kit-react/tokens';
-
+import {createSubcomponent, useTheme} from '@workday/canvas-kit-react/common';
+import {Flex, FlexProps} from '@workday/canvas-kit-react/layout';
+import {LabelText, Text} from '@workday/canvas-kit-react/text';
 import {useFormFieldLabel, useFormFieldModel} from './hooks';
 
-export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+export interface FormFieldLabelProps extends FlexProps {
   /**
    * The text of the label.
    */
   children: React.ReactNode;
-  /**
-   * When the input is required, this is spacing between label and asterisk.
-   * @default xxxs
-   */
-  spacing?: StackSpacing;
 }
 
-const StyledFormFieldLabel = styled('span')({
-  ...type.levels.subtext.large,
-  fontWeight: type.properties.fontWeights.medium,
-});
-
-const StyledAsterisk = styled(Box)<StyledType>({
-  fontSize: type.properties.fontSizes[20],
-  fontWeight: type.properties.fontWeights.regular,
-  textDecoration: 'unset',
-});
-
 export const FormFieldLabel = createSubcomponent('label')({
   displayName: 'FormField.Label',
   modelHook: useFormFieldModel,
   elemPropsHook: useFormFieldLabel,
-})<FormFieldLabelProps>(({spacing = 'xxxs', children, ...elemProps}, Element, model) => {
+})<FormFieldLabelProps>(({gap = 'xxxs', children, ...elemProps}, Element, model) => {
   const theme = useTheme();
 
   return (
-    <HStack as={Element} spacing={spacing} minWidth="180px" {...elemProps}>
-      <StyledFormFieldLabel>{children}</StyledFormFieldLabel>
+    <Flex as={Element} gap={gap} minWidth="180px" {...elemProps}>
+      <LabelText as="span" fontWeight="medium">
+        {children}
+      </LabelText>
       {model.state.isRequired && (
-        <StyledAsterisk as="span" color={theme.canvas.palette.error.main} aria-hidden="true">
+        <Text
+          fontSize={20}
+          fontWeight="regular"
+          textDecoration="unset"
+          color={theme.canvas.palette.error.main}
+          aria-hidden="true"
+        >
           *
-        </StyledAsterisk>
+        </Text>
       )}
-    </HStack>
+    </Flex>
   );
 });

package/form-field/lib/hooks/useFormFieldModel.tsx

@@ -5,7 +5,6 @@ export const useFormFieldModel = createModelHook({
     /**
      * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
      * `required` set to true, and usually some subcomponents will have a error color applied.
-     * @default false
      */
     hasError: false,
     /**
@@ -16,13 +15,12 @@ export const useFormFieldModel = createModelHook({
      * - `FormField.Hint` will set `id` to `hint-${id}`
      *
      * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
-     * @default `useUniqueId()`
+     * @default {useUniqueId}
      */
     id: '',
     /**
      * Optional flag to denote if this field is required. When true the `FormField.Input` will have
      * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
-     * @default false
      */
     isRequired: false,
   },