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

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

@@ -1,35 +1,27 @@
-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 { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
 import { focusRing, mouseFocusBehavior } from '@workday/canvas-kit-react/common';
 import { ColorSwatch } from '@workday/canvas-kit-react/color-picker';
-var accessibilityBorder = colors.frenchVanilla100 + " 0px 0px 0px 2px, " + colors.licorice200 + " 0px 0px 0px 3px";
-var SwatchContainer = styled('div')({
+const accessibilityBorder = `${colors.frenchVanilla100} 0px 0px 0px 2px, ${colors.licorice200} 0px 0px 0px 3px`;
+const SwatchContainer = styled('div')({
     display: 'flex',
     width: 20,
     height: 20,
     cursor: 'pointer',
     borderRadius: borderRadius.s,
     transition: 'box-shadow 120ms ease',
-    margin: "0px " + space.xxs + " " + space.xxs + " 0px",
+    margin: `0px ${space.xxs} ${space.xxs} 0px`,
     '&:hover': {
         boxShadow: accessibilityBorder,
     },
-    '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })),
-}, function (_a) {
-    var isSelected = _a.isSelected;
-    return (__assign({ boxShadow: isSelected ? accessibilityBorder : undefined }, mouseFocusBehavior({
+    '&:focus': {
+        outline: 'none',
+        ...focusRing({ separation: 2 }),
+    },
+}, ({ isSelected }) => ({
+    boxShadow: isSelected ? accessibilityBorder : undefined,
+    ...mouseFocusBehavior({
         '&:focus': {
             animation: 'none',
             boxShadow: 'none',
@@ -40,22 +32,17 @@ var SwatchContainer = styled('div')({
         '&': {
             boxShadow: isSelected ? accessibilityBorder : undefined,
         },
-    })));
-});
-var Container = styled('div')({
+    }),
+}));
+const Container = styled('div')({
     display: 'flex',
     flexWrap: 'wrap',
-    margin: "0px -" + space.xxs + " -" + space.xxs + " 0px",
+    margin: `0px -${space.xxs} -${space.xxs} 0px`,
 });
-export var SwatchBook = function (_a) {
-    var colors = _a.colors, value = _a.value, onSelect = _a.onSelect;
-    return (React.createElement(Container, null, colors.map(function (color, index) {
-        var isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
-        var handleClick = function () { return onSelect(color); };
-        var handleKeyDown = function (event) {
-            return (event.key === 'Enter' || event.key === ' ') && onSelect(color);
-        };
-        return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
-            React.createElement(ColorSwatch, { color: color, showCheck: isSelected })));
-    })));
-};
+export const SwatchBook = ({ colors, value, onSelect }) => (React.createElement(Container, null, colors.map((color, index) => {
+    const isSelected = value ? color.toLowerCase() === value.toLowerCase() : false;
+    const handleClick = () => onSelect(color);
+    const handleKeyDown = (event) => (event.key === 'Enter' || event.key === ' ') && onSelect(color);
+    return (React.createElement(SwatchContainer, { key: index + '-' + color, onClick: handleClick, onKeyDown: handleKeyDown, tabIndex: 0, isSelected: isSelected },
+        React.createElement(ColorSwatch, { color: color, showCheck: isSelected })));
+})));

package/dist/es6/form-field/lib/FormField.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface FormFieldProps extends FlexProps {
     /**
      * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
      */
@@ -10,11 +9,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 declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
     hasError: boolean;
@@ -28,7 +22,7 @@ export declare const FormField: import("@workday/canvas-kit-react/common").Eleme
     };
     events: {};
 }> & {
-    Input: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").CommonStyleProps, {
+    Input: 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, {
         state: {
             id: string;
             hasError: boolean;
@@ -44,7 +38,7 @@ export declare const FormField: 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/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAOrE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACxF;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAOjE,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/es6/form-field/lib/FormField.js

@@ -1,33 +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;
-};
 import React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { useFormFieldModel, useFormFieldOrientation } from './hooks';
 import { FormFieldInput } from './FormFieldInput';
 import { FormFieldLabel } from './FormFieldLabel';
 import { FormFieldHint } from './FormFieldHint';
-export var FormField = createContainer('div')({
+export const FormField = createContainer('div')({
     displayName: 'FormField',
     modelHook: useFormFieldModel,
     subComponents: {
@@ -35,8 +13,7 @@ export var FormField = createContainer('div')({
         Label: FormFieldLabel,
         Hint: FormFieldHint,
     },
-})(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/form-field/lib/FormFieldHint.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldHint: 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">, {
+export declare const FormFieldHint: 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/form-field/lib/FormFieldHint.js

@@ -1,40 +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 { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
 import { space } from '@workday/canvas-kit-react/tokens';
 import { useFormFieldHint, useFormFieldModel } from './hooks';
 import { Subtext } from '@workday/canvas-kit-react/text';
-export var FormFieldHint = createSubcomponent('p')({
+export const FormFieldHint = createSubcomponent('p')({
     displayName: 'FormField.Hint',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldHint,
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var theme = useTheme();
+})(({ children, ...elemProps }, Element, model) => {
+    const theme = useTheme();
     if (!children) {
         // If there is no hint text just skip rendering
         return null;
     }
-    return (React.createElement(Subtext, __assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
+    return (React.createElement(Subtext, Object.assign({ as: Element, size: "medium", color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: space.xxs }, elemProps), children));
 });

package/dist/es6/form-field/lib/FormFieldInput.d.ts

@@ -1,4 +1,4 @@
-export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponentM<"input", import("@workday/canvas-kit-react/layout").CommonStyleProps, {
+export declare const FormFieldInput: 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, {
     state: {
         id: string;
         hasError: boolean;

package/dist/es6/form-field/lib/FormFieldInput.js

@@ -1,22 +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);
-};
 import React from 'react';
 import { createSubcomponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useFormFieldInput, useFormFieldModel } from './hooks';
-export var FormFieldInput = createSubcomponent('input')({
+export const FormFieldInput = createSubcomponent('input')({
     displayName: 'FormField.Input',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldInput,
-})(function (elemProps, Element) {
-    return React.createElement(Box, __assign({ as: Element }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Box, Object.assign({ as: Element }, elemProps));
 });

package/dist/es6/form-field/lib/FormFieldLabel.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
-export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+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;
 }
 export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
     state: {

package/dist/es6/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAqB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAC5F,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAItE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAIjE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc;;;;;;;EAyBzB,CAAC"}

package/dist/es6/form-field/lib/FormFieldLabel.js

@@ -1,38 +1,15 @@
-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 { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
-import { HStack } from '@workday/canvas-kit-react/layout';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { LabelText, Text } from '@workday/canvas-kit-react/text';
 import { useFormFieldLabel, useFormFieldModel } from './hooks';
-export var FormFieldLabel = createSubcomponent('label')({
+export const FormFieldLabel = createSubcomponent('label')({
     displayName: 'FormField.Label',
     modelHook: useFormFieldModel,
     elemPropsHook: useFormFieldLabel,
-})(function (_a, Element, model) {
-    var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, children = _a.children, elemProps = __rest(_a, ["spacing", "children"]);
-    var theme = useTheme();
-    return (React.createElement(HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
+})(({ gap = 'xxxs', children, ...elemProps }, Element, model) => {
+    const theme = useTheme();
+    return (React.createElement(Flex, Object.assign({ as: Element, gap: gap, minWidth: "180px" }, elemProps),
         React.createElement(LabelText, { as: "span", fontWeight: "medium" }, children),
         model.state.isRequired && (React.createElement(Text, { fontSize: 20, fontWeight: "regular", textDecoration: "unset", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts

@@ -2,16 +2,14 @@
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export declare const useFormFieldHint: <P extends {}, R>(model: {
+export declare const useFormFieldHint: 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) => {
+}, {
     id: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useFormFieldHint.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;OAI3B,CAAC"}
+{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;EAI3B,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldHint.js

@@ -4,9 +4,8 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export var useFormFieldHint = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldHint = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
-        id: "hint-" + state.id,
+        id: `hint-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts

@@ -2,19 +2,17 @@
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export declare const useFormFieldInput: <P extends {}, R>(model: {
+export declare const useFormFieldInput: 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) => {
+}, {
     required: boolean | undefined;
     'aria-invalid': boolean | undefined;
     'aria-describedby': string;
     id: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useFormFieldInput.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;OAO5B,CAAC"}
+{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;EAO5B,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldInput.js

@@ -4,12 +4,11 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export var useFormFieldInput = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldInput = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
         required: state.isRequired ? true : undefined,
         'aria-invalid': state.hasError ? true : undefined,
-        'aria-describedby': "hint-" + state.id,
-        id: "input-" + state.id,
+        'aria-describedby': `hint-${state.id}`,
+        id: `input-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts

@@ -2,16 +2,14 @@
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export declare const useFormFieldLabel: <P extends {}, R>(model: {
+export declare const useFormFieldLabel: 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) => {
+}, {
     htmlFor: string;
-} & P & (R extends HTMLOrSVGElement ? {
-    ref: import("react").Ref<R>;
-} : {});
+}>;
 //# sourceMappingURL=useFormFieldLabel.d.ts.map

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.d.ts.map

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

package/dist/es6/form-field/lib/hooks/useFormFieldLabel.js

@@ -4,9 +4,8 @@ import { useFormFieldModel } from './useFormFieldModel';
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export var useFormFieldLabel = createElemPropsHook(useFormFieldModel)(function (_a) {
-    var state = _a.state;
+export const useFormFieldLabel = createElemPropsHook(useFormFieldModel)(({ state }) => {
     return {
-        htmlFor: "input-" + state.id,
+        htmlFor: `input-${state.id}`,
     };
 });

package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts

@@ -2,7 +2,6 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     /**
      * 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: boolean;
     /**
@@ -13,13 +12,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
      * - `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: string;
     /**
      * 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: boolean;
 }> & {} & {}) | undefined) => {
@@ -28,13 +26,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
         /**
          * 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: boolean;
         /**
          * 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: boolean;
     };
@@ -43,7 +39,6 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     /**
      * 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: boolean;
     /**
@@ -54,13 +49,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
      * - `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: string;
     /**
      * 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: boolean;
 }, {}, {
@@ -68,13 +62,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
     /**
      * 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: boolean;
     /**
      * 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: boolean;
 }, {}, {
@@ -83,13 +75,11 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
         /**
          * 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: boolean;
         /**
          * 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: boolean;
     };

package/dist/es6/form-field/lib/hooks/useFormFieldModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;;IArBH;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;IArBH;;;;OAIG;;IAaH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;EAeL,CAAC"}
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;;IAnBH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;IAnBH;;;OAGG;;IAaH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;EAeL,CAAC"}

package/dist/es6/form-field/lib/hooks/useFormFieldModel.js

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