@workday/canvas-kit-preview-react 7.0.0-alpha.88-next.15 → 7.0.0-alpha.91-next.18

package/dist/commonjs/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-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;
+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/commonjs/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,kCAAkC,CAAC;AAErE,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/commonjs/form-field/lib/FormField.js

@@ -25,7 +25,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormField = exports.FormFieldModelContext = void 0;
+exports.FormField = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
@@ -33,20 +33,16 @@ var hooks_1 = require("./hooks");
 var FormFieldInput_1 = require("./FormFieldInput");
 var FormFieldLabel_1 = require("./FormFieldLabel");
 var FormFieldHint_1 = require("./FormFieldHint");
-exports.FormFieldModelContext = react_1.default.createContext({});
-exports.FormField = common_1.createComponent()({
+exports.FormField = common_1.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 = common_1.useDefaultModel(model, { hasError: hasError, id: id, isRequired: isRequired }, hooks_1.useFormFieldModel);
-        var layoutProps = hooks_1.useFormFieldOrientation(orientation);
-        return (react_1.default.createElement(exports.FormFieldModelContext.Provider, { value: value },
-            react_1.default.createElement(layout_1.Stack, __assign({ ref: ref }, layoutProps, elemProps), children)));
-    },
+    modelHook: hooks_1.useFormFieldModel,
     subComponents: {
         Input: FormFieldInput_1.FormFieldInput,
         Label: FormFieldLabel_1.FormFieldLabel,
         Hint: FormFieldHint_1.FormFieldHint,
     },
+})(function (_a, Element) {
+    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
+    var layoutProps = hooks_1.useFormFieldOrientation(orientation);
+    return (react_1.default.createElement(layout_1.Stack, __assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/commonjs/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-react/layout';
-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/commonjs/form-field/lib/FormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAW,MAAM,kCAAkC,CAAC;AAG/D,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;AAMD,eAAO,MAAM,aAAa,sFAuBxB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAiBA,eAAO,MAAM,aAAa;;;;;;;EAsBxB,CAAC"}

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

@@ -30,20 +30,18 @@ var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
 var StyledHint = common_1.styled(layout_1.Box)(__assign({}, tokens_1.type.levels.subtext.medium));
-exports.FormFieldHint = common_1.createComponent('p')({
+exports.FormFieldHint = common_1.createSubcomponent('p')({
     displayName: 'FormField.Hint',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
-        var props = hooks_1.useFormFieldHint(localModel, elemProps, ref);
-        var theme = common_1.useTheme();
-        if (!children) {
-            // If there is no hint text just skip rendering
-            return null;
-        }
-        return (react_1.default.createElement(StyledHint, __assign({ as: Element, color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, props), children));
-    },
+    modelHook: hooks_1.useFormFieldModel,
+    elemPropsHook: hooks_1.useFormFieldHint,
+})(function (_a, Element, model) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    var theme = common_1.useTheme();
+    if (!children) {
+        // If there is no hint text just skip rendering
+        return null;
+    }
+    return (react_1.default.createElement(StyledHint, __assign({ as: Element, color: model.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, elemProps), children));
 });

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

@@ -1,8 +1,9 @@
-import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-react/layout';
-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/commonjs/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,kCAAkC,CAAC;AAGrD,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/commonjs/form-field/lib/FormFieldInput.js

@@ -10,17 +10,6 @@ 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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,14 +18,11 @@ exports.FormFieldInput = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
-exports.FormFieldInput = common_1.createComponent('input')({
+exports.FormFieldInput = common_1.createSubcomponent('input')({
     displayName: 'FormField.Input',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, elemProps = __rest(_a, ["model"]);
-        var localModel = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
-        var props = hooks_1.useFormFieldInput(localModel, elemProps, ref);
-        return react_1.default.createElement(layout_1.Box, __assign({ as: Element }, props));
-    },
+    modelHook: hooks_1.useFormFieldModel,
+    elemPropsHook: hooks_1.useFormFieldInput,
+})(function (elemProps, Element) {
+    return react_1.default.createElement(layout_1.Box, __assign({ as: Element }, elemProps));
 });

package/dist/commonjs/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-react/layout';
-import { FormFieldModel } from './hooks';
 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/commonjs/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,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAI3E,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;AAaD,eAAO,MAAM,cAAc,2FAkBzB,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/commonjs/form-field/lib/FormFieldLabel.js

@@ -30,7 +30,6 @@ var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
 var StyledFormFieldLabel = common_1.styled('span')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium }));
 var StyledAsterisk = common_1.styled(layout_1.Box)({
@@ -38,15 +37,14 @@ var StyledAsterisk = common_1.styled(layout_1.Box)({
     fontWeight: tokens_1.type.properties.fontWeights.regular,
     textDecoration: 'unset',
 });
-exports.FormFieldLabel = common_1.createComponent('label')({
+exports.FormFieldLabel = common_1.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 = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
-        var props = hooks_1.useFormFieldLabel(localModel, elemProps, ref);
-        var theme = common_1.useTheme();
-        return (react_1.default.createElement(layout_1.HStack, __assign({ as: "label", spacing: spacing, minWidth: "180px" }, props),
-            react_1.default.createElement(StyledFormFieldLabel, null, children),
-            localModel.state.isRequired && (react_1.default.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
-    },
+    modelHook: hooks_1.useFormFieldModel,
+    elemPropsHook: hooks_1.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 = common_1.useTheme();
+    return (react_1.default.createElement(layout_1.HStack, __assign({ as: Element, spacing: spacing, minWidth: "180px" }, elemProps),
+        react_1.default.createElement(StyledFormFieldLabel, null, children),
+        model.state.isRequired && (react_1.default.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
 });

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

@@ -2,11 +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: 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/commonjs/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/commonjs/form-field/lib/hooks/useFormFieldHint.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldHint = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-exports.useFormFieldHint = common_1.createHook(function (_a) {
+exports.useFormFieldHint = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         id: "hint-" + state.id,

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

@@ -2,11 +2,14 @@
  * 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: 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 useFormFieldInput: <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) => {
     required: boolean | undefined;
     'aria-invalid': boolean | undefined;
     'aria-describedby': string;

package/dist/commonjs/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;;;;;;;;;;;;;;OAO5B,CAAC"}

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldInput = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-exports.useFormFieldInput = common_1.createHook(function (_a) {
+exports.useFormFieldInput = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         required: state.isRequired ? true : undefined,

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

@@ -2,11 +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: 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 useFormFieldLabel: <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) => {
     htmlFor: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/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;;;;;;;;;;;OAI5B,CAAC"}

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

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldLabel = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-exports.useFormFieldLabel = common_1.createHook(function (_a) {
+exports.useFormFieldLabel = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         htmlFor: "input-" + state.id,

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

@@ -1,11 +1,10 @@
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-declare type FormFieldState = {
+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;
+    hasError: boolean;
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
@@ -16,21 +15,84 @@ declare type FormFieldState = {
      * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
      * @default `useUniqueId()`
      */
-    id?: string;
+    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;
-};
-declare type FormFieldEvents = {};
-export declare type FormFieldModel = Model<FormFieldState, FormFieldEvents>;
-declare const formFieldEventMap: {
-    guards: {};
-    callbacks: {};
-};
-export declare type FormFieldModelConfig = FormFieldState & Partial<ToModelConfig<FormFieldState, FormFieldEvents, typeof formFieldEventMap>>;
-export declare const useFormFieldModel: (config?: FormFieldModelConfig) => FormFieldModel;
-export {};
+    isRequired: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * 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;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * 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 `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `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()`
+     */
+    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;
+}, {}, {
+    id: string;
+    /**
+     * 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;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * 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;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=useFormFieldModel.d.ts.map

package/dist/commonjs/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":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,cAAc,GAAG;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,aAAK,eAAe,GAAG,EAAE,CAAC;AAE1B,oBAAY,cAAc,GAAG,KAAK,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAEpE,QAAA,MAAM,iBAAiB;;;CAGrB,CAAC;AAEH,oBAAY,oBAAoB,GAAG,cAAc,GAC/C,OAAO,CAAC,aAAa,CAAC,cAAc,EAAE,eAAe,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAEpF,eAAO,MAAM,iBAAiB,YAAY,oBAAoB,KAAQ,cAerE,CAAC"}
+{"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"}

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

@@ -1,23 +1,49 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldModel = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
-var formFieldEventMap = common_1.createEventMap()({
-    guards: {},
-    callbacks: {},
-});
-var useFormFieldModel = function (config) {
-    if (config === void 0) { config = {}; }
+exports.useFormFieldModel = common_1.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,
+        /**
+         * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+         * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+         * - `FormField.Input` will set `id` to `input-${id}`
+         * - `FormField.Label` will set `htmlFor` to `input-${id}`
+         * - `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()`
+         */
+        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 = common_1.useUniqueId(config.id);
-    var state = {
-        hasError: config.hasError,
-        isRequired: config.isRequired,
-        id: id,
-    };
-    var events = common_1.useEventMap(formFieldEventMap, state, config, {});
+    var state = __assign(__assign({}, config), { id: id });
     return {
         state: state,
-        events: events,
+        events: {},
     };
-};
-exports.useFormFieldModel = useFormFieldModel;
+});