@workday/canvas-kit-preview-react 6.8.9 → 6.9.0-next.2

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/CurrentItem.js

@@ -27,7 +27,7 @@ import { TooltipContainer } from '@workday/canvas-kit-react/tooltip';
 import { Popper } from '@workday/canvas-kit-react/popup';
 import { useTruncateTooltip } from './hooks';
 import { truncateStyles } from './styles';
-var ListItem = styled('li')(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), function (_a) {
+var ListItem = styled('li')(__assign(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, type.levels.subtext.large), { fontWeight: 500 }), function (_a) {
     var maxWidth = _a.maxWidth;
     return (__assign({}, truncateStyles(maxWidth)));
 });

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAeD,eAAO,MAAM,cAAc,iGA+C1B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAeD,eAAO,MAAM,cAAc,8DAOxB,mBAAmB,gBAwCrB,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAOhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAmB/B,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/ListItem.js

@@ -20,20 +20,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { css, jsx } from '@emotion/core';
+import React from 'react';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { chevronLeftSmallIcon, chevronRightSmallIcon } from '@workday/canvas-system-icons-web';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { useRTL } from '../hooks';
-var breadcrumbItemStyles = css({
-    display: "flex",
-    alignItems: "center",
-});
+import { Flex } from '@workday/canvas-kit-react/layout';
 export var BreadcrumbsListItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var shouldUseRTL = useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
-    return (jsx("li", __assign({ css: breadcrumbItemStyles }, props),
+    return (React.createElement(Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        jsx(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, "aria-hidden": true })));
+        React.createElement(SystemIcon, { icon: icon, color: colors.licorice200, colorHover: colors.licorice200, size: 20, height: 32, width: 32, styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 };

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts

@@ -9,7 +9,7 @@ export declare const useBuildCollapsedList: <E extends HTMLElement>(listEl: Reac
 };
 export declare const useTruncateTooltip: (ref?: React.RefObject<HTMLSpanElement> | undefined) => {
     isTooltipOpen: boolean;
-    openTooltip: (event: React.MouseEvent<Element, MouseEvent> | React.FocusEvent<Element, Element>) => void;
+    openTooltip: (event: React.MouseEvent | React.FocusEvent) => void;
     closeTooltip: () => void;
     shouldShowTooltip: boolean;
     tooltipProps: {

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,WAAW;;CASvB,CAAC;AA2BF,eAAO,MAAM,qBAAqB;;;CAsCjC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;CAgC9B,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAG5E,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAEpC,eAAO,MAAM,WAAW;;CASvB,CAAC;AA2BF,eAAO,MAAM,qBAAqB,gEAEtB,MAAM,SAAS,YACf,MAAM;;;CAmCjB,CAAC;AAEF,eAAO,MAAM,kBAAkB;;yBASD,gBAAgB,GAAG,gBAAgB;;;;;;CAuBhE,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,+FAQ3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,yFAqB1B,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/index.js

@@ -20,20 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/core';
-var breadcrumbListStyles = css({
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    // minHeight set to keep the nav from bouncing when the icon button appears / disappears
-    minHeight: 40,
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-});
-export var BreadcrumbsList = forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (jsx("ul", __assign({ css: breadcrumbListStyles, role: "list", ref: ref }, props), children));
+import React from 'react';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export var BreadcrumbsList = createComponent('ul')({
+    displayName: 'BreadcrumbsList',
+    Component: function (_a, ref) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Flex, __assign({ padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: 40, listStyle: "none", style: { boxSizing: 'border-box' }, as: "ul", role: "list", ref: ref }, elemProps), children));
+    },
 });

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/styles.d.ts

@@ -1,3 +1,3 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/styled';
 export declare const truncateStyles: (maxWidth?: number) => CSSObject;
 //# sourceMappingURL=styles.d.ts.map

package/dist/es6/breadcrumbs/lib/Breadcrumbs/List/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,cAAc,kCAMzB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAK1C,eAAO,MAAM,cAAc,cAAc,MAAM,KAAuB,SAMpE,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/Nav.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,iFAE1B,CAAC"}
+{"version":3,"file":"Nav.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/Nav.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E;;;;OAIG;IACH,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,8CAA6C,mBAAmB,gBAE1F,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/dist/es6/breadcrumbs/lib/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}

package/dist/es6/breadcrumbs/lib/Breadcrumbs/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es6/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,QAAA,MAAM,WAAW;;;CAsDhB,CAAC;AAGF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,QAAA,MAAM,WAAW;kKAYd,gBAAgB;;CA0ClB,CAAC;AAGF,eAAe,WAAW,CAAC"}

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

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { checkIcon } from '@workday/canvas-system-icons-web';
 import { ColorInput } from '@workday/canvas-kit-react/color-picker';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import FormField from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
@@ -102,7 +102,7 @@ var ColorInputAndLabel = styled(FormField)({
     flexDirection: 'column',
     margin: 0,
 });
-var CheckButton = styled(IconButton)({
+var CheckButton = styled(SecondaryButton)({
     alignSelf: 'flex-end',
 });
 var HexColorInput = styled(ColorInput)({
@@ -137,7 +137,7 @@ var ColorPicker = function (_a) {
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
             React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
-            React.createElement(CheckButton, { "aria-label": submitLabel, variant: "circleFilled", icon: checkIcon })))));
+            React.createElement(CheckButton, { "aria-label": submitLabel, icon: checkIcon })))));
 };
 ColorPicker.defaultColorSet = defaultColorSet;
 export default ColorPicker;

package/dist/es6/color-picker/lib/parts/ColorReset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mEASvB,CAAC"}
+{"version":3,"file":"ColorReset.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/ColorReset.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClC;AAoCD,eAAO,MAAM,WAAW,mCAAkC,gBAAgB,gBASzE,CAAC"}

package/dist/es6/color-picker/lib/parts/SwatchBook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,+DAsBtB,CAAC"}
+{"version":3,"file":"SwatchBook.d.ts","sourceRoot":"","sources":["../../../../../color-picker/lib/parts/SwatchBook.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAkDD,eAAO,MAAM,UAAU,gCAA+B,eAAe,gBAsBpE,CAAC"}

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

@@ -1,14 +1,7 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
-import { FormFieldModel, FormFieldModelConfig } from './hooks';
-export declare const FormFieldModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>>;
-export interface FormFieldProps extends FormFieldModelConfig, Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
-    model?: FormFieldModel;
+import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
+export interface FormFieldProps extends Omit<ExtractProps<typeof Stack, never>, 'spacing'> {
     /**
      * Children of the Text Input. Should contain a `<FormField.Input>`, a `<FormField.Label>` and an optional `<FormField.Hint>`
      */
@@ -23,9 +16,50 @@ export interface FormFieldProps extends FormFieldModelConfig, Omit<ExtractProps<
      */
     spacing?: StackSpacing;
 }
-export declare const FormField: import("@workday/canvas-kit-react/common").Component<FormFieldProps> & {
-    Input: import("@workday/canvas-kit-react/common").ElementComponent<"input", import("./FormFieldInput").FormFieldInputProps>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"label", import("./FormFieldLabel").FormFieldLabelProps>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponent<"p", import("./FormFieldHint").FormFieldHintProps>;
+export declare const FormField: import("@workday/canvas-kit-react/common").ElementComponentM<"div", FormFieldProps & Partial<{
+    hasError: boolean;
+    id: string;
+    isRequired: boolean;
+}> & {} & {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Input: 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, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"label", import("./FormFieldLabel").FormFieldLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isRequired: boolean;
+        };
+        events: {};
+    }>;
 };
 //# sourceMappingURL=FormField.d.ts.map

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,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;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;;;;CAqBpB,CAAC"}
+{"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"}

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

@@ -21,26 +21,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { createComponent, useDefaultModel } from '@workday/canvas-kit-react/common';
-import { Stack } from '@workday/canvas-kit-labs-react/layout';
-import { useFormFieldModel, useFormFieldOrientation, } from './hooks';
+import { createContainer } from '@workday/canvas-kit-react/common';
+import { Stack } 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 FormFieldModelContext = React.createContext({});
-export var FormField = createComponent()({
+export var FormField = createContainer('div')({
     displayName: 'FormField',
-    Component: function (_a, ref) {
-        var children = _a.children, model = _a.model, spacing = _a.spacing, orientation = _a.orientation, props = __rest(_a, ["children", "model", "spacing", "orientation"]);
-        var hasError = props.hasError, id = props.id, isRequired = props.isRequired, elemProps = __rest(props, ["hasError", "id", "isRequired"]);
-        var value = useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, useFormFieldModel);
-        var layoutProps = useFormFieldOrientation(orientation);
-        return (React.createElement(FormFieldModelContext.Provider, { value: value },
-            React.createElement(Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
-    },
+    modelHook: useFormFieldModel,
     subComponents: {
         Input: FormFieldInput,
         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));
 });

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

@@ -1,13 +1,9 @@
-import React from 'react';
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { FormFieldModel } from './hooks';
-export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
-    model?: FormFieldModel;
-    /**
-     * Hint text to show to the user regarding the Error/Alert
-     */
-    children?: React.ReactNode;
-}
-export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponent<"p", FormFieldHintProps>;
+export declare const FormFieldHint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", import("@workday/canvas-kit-react/layout").BorderShorthandStyleProps & import("@workday/canvas-kit-react/layout").BorderColorStyleProps & import("@workday/canvas-kit-react/layout").BorderRadiusStyleProps & import("@workday/canvas-kit-react/layout").BorderLineStyleProps & import("@workday/canvas-kit-react/layout").BorderWidthStyleProps & import("@workday/canvas-kit-react/layout").BorderLogicalStyleProps & import("@workday/canvas-kit-react/layout").ColorStyleProps & import("@workday/canvas-kit-react/layout").DepthStyleProps & import("@workday/canvas-kit-react/layout").FlexItemStyleProps & import("@workday/canvas-kit-react/layout").LayoutStyleProps & import("@workday/canvas-kit-react/layout/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-react/layout").PositionStandardProps & import("@workday/canvas-kit-react/layout").PositionLogicalProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-react/layout/lib/utils/space").SpaceLogicalProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=FormFieldHint.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,sFAyBxB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,aAAa;;;;;;;EAsBxB,CAAC"}

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

@@ -20,24 +20,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
-import { type } from '@workday/canvas-kit-react/tokens';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { FormFieldModelContext } from './FormField';
-import { useFormFieldHint } from './hooks';
-export var FormFieldHint = createComponent('p')({
+import React from 'react';
+import { createSubcomponent, useTheme, styled, } from '@workday/canvas-kit-react/common';
+import { space, type } from '@workday/canvas-kit-react/tokens';
+import { Box } from '@workday/canvas-kit-react/layout';
+import { useFormFieldHint, useFormFieldModel } from './hooks';
+var StyledHint = styled(Box)(__assign({}, type.levels.subtext.medium));
+export var FormFieldHint = createSubcomponent('p')({
     displayName: 'FormField.Hint',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = useModelContext(FormFieldModelContext, model);
-        var props = useFormFieldHint(localModel, elemProps, ref);
-        var theme = useTheme();
-        if (!children) {
-            // If there is no hint text just skip rendering
-            return null;
-        }
-        return (jsx(Box, __assign({ as: Element, css: __assign(__assign({}, type.levels.subtext.medium), { color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined }) }, props), children));
-    },
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldHint,
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    var theme = useTheme();
+    if (!children) {
+        // If there is no hint text just skip rendering
+        return null;
+    }
+    return (React.createElement(StyledHint, __assign({ as: Element, 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,8 +1,9 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { FormFieldModel } from './hooks';
-export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
-    model?: FormFieldModel;
-}
-export declare const FormFieldInput: import("@workday/canvas-kit-react/common").ElementComponent<"input", FormFieldInputProps>;
+export declare const FormFieldInput: 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, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=FormFieldInput.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}
+{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,cAAc;;;;;;;EAMzB,CAAC"}

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

@@ -9,28 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
-import { FormFieldModelContext } from './FormField';
-import { useFormFieldInput } from './hooks';
-export var FormFieldInput = createComponent('input')({
+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')({
     displayName: 'FormField.Input',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, elemProps = __rest(_a, ["model"]);
-        var localModel = useModelContext(FormFieldModelContext, model);
-        var props = useFormFieldInput(localModel, elemProps, ref);
-        return React.createElement(Box, __assign({ as: Element }, props));
-    },
+    modelHook: useFormFieldModel,
+    elemPropsHook: useFormFieldInput,
+})(function (elemProps, Element) {
+    return React.createElement(Box, __assign({ as: Element }, elemProps));
 });

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

@@ -1,9 +1,7 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
-import { FormFieldModel } from './hooks';
+import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
 export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
-    model?: FormFieldModel;
     /**
      * The text of the label.
      */
@@ -14,5 +12,12 @@ export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, ne
      */
     spacing?: StackSpacing;
 }
-export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponent<"label", FormFieldLabelProps>;
+export declare const FormFieldLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"label", FormFieldLabelProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=FormFieldLabel.d.ts.map

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":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,2FAqBzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAK3E,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;AAaD,eAAO,MAAM,cAAc;;;;;;;EAiBzB,CAAC"}

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

@@ -20,30 +20,25 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
-import { createComponent, useModelContext, useTheme, } from '@workday/canvas-kit-react/common';
+import React from 'react';
+import { createSubcomponent, useTheme, styled, } from '@workday/canvas-kit-react/common';
+import { Box, HStack } from '@workday/canvas-kit-react/layout';
 import { type } from '@workday/canvas-kit-react/tokens';
-import { HStack } from '@workday/canvas-kit-labs-react/layout';
-import { FormFieldModelContext } from './FormField';
-import { useFormFieldLabel } from './hooks';
-var styles = {
-    label: __assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }),
-    asterisk: {
-        fontSize: type.properties.fontSizes[16],
-        fontWeight: type.properties.fontWeights.regular,
-        textDecoration: 'unset',
-    },
-};
-export var FormFieldLabel = createComponent('label')({
+import { useFormFieldLabel, useFormFieldModel } from './hooks';
+var StyledFormFieldLabel = styled('span')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium }));
+var StyledAsterisk = styled(Box)({
+    fontSize: type.properties.fontSizes[20],
+    fontWeight: type.properties.fontWeights.regular,
+    textDecoration: 'unset',
+});
+export var FormFieldLabel = createSubcomponent('label')({
     displayName: 'FormField.Label',
-    Component: function (_a, ref) {
-        var _b = _a.spacing, spacing = _b === void 0 ? 'xxxs' : _b, model = _a.model, children = _a.children, elemProps = __rest(_a, ["spacing", "model", "children"]);
-        var localModel = useModelContext(FormFieldModelContext, model);
-        var props = useFormFieldLabel(localModel, elemProps, ref);
-        var theme = useTheme();
-        return (jsx(HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: "180px" }, props),
-            jsx("span", null, children),
-            localModel.state.isRequired && (jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
-    },
+    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),
+        React.createElement(StyledFormFieldLabel, null, children),
+        model.state.isRequired && (React.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

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

@@ -1,13 +1,15 @@
-/// <reference types="@emotion/core" />
 /**
  * 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: import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useFormFieldHint: <P extends {}, R>(model: {
+    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>;

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;;;;;;;;;;;OAI3B,CAAC"}

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

@@ -1,9 +1,10 @@
-import { createHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+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 = createHook(function (_a) {
+export var useFormFieldHint = createElemPropsHook(useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         id: "hint-" + state.id,