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

package/dist/es6/table/lib/TableBody.d.ts

@@ -0,0 +1,2 @@
+export declare const TableBody: import("@workday/canvas-kit-react/common").ElementComponent<"tbody", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableBody.d.ts.map

package/dist/es6/table/lib/TableBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableBody.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableBody.tsx"],"names":[],"mappings":"AAyBA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/es6/table/lib/TableBody.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+const StyledBody = styled(Grid.as('tbody'))({
+    'tr:last-of-type td': {
+        borderBottom: 'none',
+    },
+    'tr:last-of-type th': {
+        borderBottom: 'none',
+    },
+    'tr:first-of-type td': {
+        borderTop: 'none',
+    },
+    'tr:first-of-type th': {
+        borderTop: 'none',
+    },
+    'td:last-of-type': {
+        borderRight: 'none',
+    },
+    'td:first-of-type': {
+        borderLeft: 'none',
+    },
+});
+export const TableBody = createComponent('tbody')({
+    displayName: 'Table.Body',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledBody, Object.assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableCaption.d.ts

@@ -0,0 +1,2 @@
+export declare const TableCaption: import("@workday/canvas-kit-react/common").ElementComponent<"caption", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").FlexStyleProps>;
+//# sourceMappingURL=TableCaption.d.ts.map

package/dist/es6/table/lib/TableCaption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCaption.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCaption.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,0MAgBvB,CAAC"}

package/dist/es6/table/lib/TableCaption.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+export const TableCaption = createComponent('caption')({
+    displayName: 'Table.Caption',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Flex, Object.assign({ as: Element, ref: ref, borderBottom: `1px solid ${colors.soap500}`, paddingY: "xxs", paddingX: "s" }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableCell.d.ts

@@ -0,0 +1,2 @@
+export declare const TableCell: import("@workday/canvas-kit-react/common").ElementComponent<"td", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/es6/table/lib/TableCell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCell.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableCell.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,qMAqBpB,CAAC"}

package/dist/es6/table/lib/TableCell.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { createComponent } from '@workday/canvas-kit-react/common';
+export const TableCell = createComponent('td')({
+    displayName: 'Table.Cell',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Grid, Object.assign({ as: Element, ref: ref, alignItems: "center", backgroundColor: "frenchVanilla100", borderBottom: `1px solid ${colors.soap400}`, justifyContent: "left", minHeight: "56px", paddingY: "xxs", paddingX: "s", wordBreak: "break-word" }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableFooter.d.ts

@@ -0,0 +1,2 @@
+export declare const TableFooter: import("@workday/canvas-kit-react/common").ElementComponent<"tfoot", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableFooter.d.ts.map

package/dist/es6/table/lib/TableFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableFooter.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableFooter.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,wMAStB,CAAC"}

package/dist/es6/table/lib/TableFooter.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+export const TableFooter = createComponent('tfoot')({
+    displayName: 'Table.Footer',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Grid, Object.assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableHead.d.ts

@@ -0,0 +1,2 @@
+export declare const TableHead: import("@workday/canvas-kit-react/common").ElementComponent<"thead", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableHead.d.ts.map

package/dist/es6/table/lib/TableHead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHead.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHead.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS,wMASpB,CAAC"}

package/dist/es6/table/lib/TableHead.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+const StyledHead = styled(Grid.as('thead'))({
+    'th:last-of-type': {
+        borderRight: 'none',
+    },
+    'th:first-of-type': {
+        borderLeft: 'none',
+    },
+});
+export const TableHead = createComponent('thead')({
+    displayName: 'Table.Head',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledHead, Object.assign({ as: Element, ref: ref, backgroundColor: "soap100", minHeight: "48px" }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableHeader.d.ts

@@ -0,0 +1,2 @@
+export declare const TableHeader: import("@workday/canvas-kit-react/common").ElementComponent<"th", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/es6/table/lib/TableHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableHeader.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,qMAsBtB,CAAC"}

package/dist/es6/table/lib/TableHeader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { colors } from '@workday/canvas-kit-react/tokens';
+import { createComponent } from '@workday/canvas-kit-react/common';
+export const TableHeader = createComponent('th')({
+    displayName: 'Table.Header',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Grid, Object.assign({ as: Element, ref: ref, alignItems: "center", backgroundColor: "frenchVanilla100", borderBottom: `1px solid ${colors.soap400}`, justifyContent: "left", minHeight: "56px", paddingY: "xxs", paddingX: "s", wordBreak: "break-word", fontWeight: "medium" }, elemProps), children));
+    },
+});

package/dist/es6/table/lib/TableRow.d.ts

@@ -0,0 +1,2 @@
+export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", Omit<import("@workday/canvas-kit-react/layout").BoxProps, "display"> & import("@workday/canvas-kit-react/layout").GridStyleProps>;
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/es6/table/lib/TableRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ,qMAqBnB,CAAC"}

package/dist/es6/table/lib/TableRow.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Grid } from '@workday/canvas-kit-react/layout';
+import { createComponent } from '@workday/canvas-kit-react/common';
+export const TableRow = createComponent('tr')({
+    displayName: 'Table.Row',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        const validChildren = (children) => {
+            return React.Children.toArray(children).filter(child => React.isValidElement(child));
+        };
+        const childrenArray = validChildren(children).length;
+        return (React.createElement(Grid, Object.assign({ as: Element, ref: ref, gridAutoFlow: "column", gridTemplateColumns: `repeat(${childrenArray}, minmax(10rem, 1fr))` }, elemProps), children));
+    },
+});

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

@@ -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/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":"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/es6/text-area/lib/TextAreaField.js

@@ -1,34 +1,11 @@
-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 = {
+const baseStyles = {
     transition: '0.2s box-shadow, 0.2s border-color',
     resize: 'both',
     '&::webkit-resizer': {
@@ -52,20 +29,19 @@ var baseStyles = {
         },
     },
 };
-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 }, 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 })));
+    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;
@@ -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/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

@@ -5,7 +5,7 @@ export declare const TextInputField: import("@workday/canvas-kit-react/common").
         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":"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/es6/text-input/lib/TextInputField.js

@@ -1,23 +1,11 @@
-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 = {
+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,
@@ -40,20 +28,20 @@ var baseStyles = {
         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" }, 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)));
+    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>
   );
 });