@workday/canvas-kit-preview-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.348-next.3

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidePanelToggleButton.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanelToggleButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAkB,YAAY,EAAW,MAAM,kCAAkC,CAAC;AAEzF,OAAO,EAAC,cAAc,EAAC,MAAM,kCAAkC,CAAC;AAMhE,MAAM,WAAW,0BAA2B,SAAQ,YAAY,CAAC,OAAO,cAAc,EAAE,KAAK,CAAC;IAC5F;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED;;GAEG;AACH,eAAO,MAAM,qBAAqB,mGAoDhC,CAAC"}

package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js

@@ -0,0 +1,88 @@
+"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);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidePanelToggleButton = void 0;
+/** @jsxRuntime classic */
+/** @jsx jsx */
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var react_1 = require("@emotion/react");
+var button_1 = require("@workday/canvas-kit-react/button");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+var hooks_1 = require("./hooks");
+/**
+ * A toggle button styled specifically for the side panel container.
+ */
+exports.SidePanelToggleButton = common_1.createComponent('button')({
+    displayName: 'SidePanel.ToggleButton',
+    Component: function (_a) {
+        var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, tooltipTextExpand = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, tooltipTextCollapse = _e === void 0 ? 'Collapse' : _e, elemProps = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+        var context = React.useContext(hooks_1.SidePanelContext);
+        var useRTLOrigin = function () {
+            var isRTL = common_1.useIsRTL();
+            // if the direction is set to RTl, flip the origin
+            if (isRTL) {
+                return context.origin === 'left' ? 'right' : 'left';
+            }
+            // Otherwise, default to returning the origin
+            return context.origin;
+        };
+        var rtlOrigin = useRTLOrigin();
+        // Note: Depending on the collapsed width, the button could "jump" to it's final position.
+        var buttonStyle = react_1.css({
+            position: 'absolute',
+            top: tokens_1.space.m,
+            width: tokens_1.space.l,
+            right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? tokens_1.space.s : undefined,
+            left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? tokens_1.space.s : undefined,
+            margin: context.state === 'collapsed' ? 'auto' : 0,
+            transform: context.state === 'collapsed' || context.state === 'collapsing'
+                ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
+                : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
+        });
+        return (react_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
+            react_1.jsx(button_1.TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
+    },
+});

package/dist/commonjs/side-panel/lib/hooks.d.ts

@@ -1,3 +1,8 @@
+import * as React from 'react';
+export declare const SidePanelContext: React.Context<{
+    state: string;
+    origin: string;
+}>;
 /**
  * The optional config options for the `useSidePanel` hook
  */
@@ -70,6 +75,21 @@ export interface ControlProps {
      */
     onClick: () => void;
 }
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
 export declare const useSidePanel: (config?: UseSidePanelProps | undefined) => {
     expanded: boolean;
     setExpanded: (newExpandedState: boolean) => void;

package/dist/commonjs/side-panel/lib/hooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY;;oCA2BsB,OAAO;;;;CA8BrD,CAAC"}
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAGH;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAU;IACzB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,WAAW,YAAY;IAC3B;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,YAAY;;oCA2BsB,OAAO;;;;CA8BrD,CAAC"}

package/dist/commonjs/side-panel/lib/hooks.js

@@ -19,9 +19,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSidePanel = void 0;
+exports.useSidePanel = exports.SidePanelContext = void 0;
 var React = __importStar(require("react"));
+exports.SidePanelContext = React.createContext({
+    state: 'expanded',
+    origin: 'left',
+});
 var common_1 = require("@workday/canvas-kit-react/common");
+/**
+ *
+ * This hook manages the state and `aria-` attributes for the SidePanel. It takes an optional
+ * configuration object:
+ *
+ * ```tsx
+ * import {useSidePanel} from '@workday/canvas-kit-preview-react/side-panel';
+ *
+ * const {expanded, setExpanded, panelProps, labelProps, controlProps} = useSidePanel({
+ *   initialExpanded: false,
+ *   panelId: 'custom-panel-id',
+ *   labelId: 'custom-label-id',
+ * });
+ * ```
+ */
 var useSidePanel = function (config) {
     var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
     var configParams = config

package/dist/commonjs/status-indicator/index.d.ts

@@ -1,2 +1,4 @@
 export * from './lib/StatusIndicator';
+export * from './lib/hooks/useStatusIndicatorModel';
+export { useStatusIndicatorIcon } from './lib/StatusIndicatorIcon';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/status-indicator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../status-indicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,sBAAsB,EAAC,MAAM,2BAA2B,CAAC"}

package/dist/commonjs/status-indicator/index.js

@@ -10,4 +10,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStatusIndicatorIcon = void 0;
 __exportStar(require("./lib/StatusIndicator"), exports);
+__exportStar(require("./lib/hooks/useStatusIndicatorModel"), exports);
+var StatusIndicatorIcon_1 = require("./lib/StatusIndicatorIcon");
+Object.defineProperty(exports, "useStatusIndicatorIcon", { enumerable: true, get: function () { return StatusIndicatorIcon_1.useStatusIndicatorIcon; } });

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts

@@ -13,13 +13,23 @@ export declare const useStatusIndicator: <P extends {}, R>(model: {
         variant: import("./hooks").StatusIndicatorVariant;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
     opacity: string | undefined;
     color: string;
     background: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
 } : {});
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
 export declare const StatusIndicator: import("@workday/canvas-kit-react/common").ElementComponentM<"div", StatusIndicatorProps & Partial<{
     emphasis: import("./hooks").StatusIndicatorEmphasis;
     variant: import("./hooks").StatusIndicatorVariant;
@@ -30,6 +40,23 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
     };
     events: {};
 }> & {
+    /**
+     * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+     * contents exceed the component's maximum width.
+     *
+     * ```tsx
+     * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
+    /**
+     * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+     * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+     *
+     * ```tsx
+     * <StatusIndicator.Icon icon={uploadCloudIcon} />
+     * ```
+     */
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./StatusIndicatorIcon").StatusIndicatorIconProps, {
         state: {
             emphasis: import("./hooks").StatusIndicatorEmphasis;
@@ -37,6 +64,5 @@ export declare const StatusIndicator: import("@workday/canvas-kit-react/common")
         };
         events: {};
     }>;
-    Label: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./StatusIndicatorLabel").StatusIndicatorLabelProps>;
 };
 //# sourceMappingURL=StatusIndicator.d.ts.map

package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;CAwB1B,CAAC"}
+{"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAuC,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAKtD,MAAM,WAAW,oBAAqB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IAC5E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,kBAAkB;;;;;;;;;;;;OAO7B,CAAC;AAEH;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;IAKxB;;;;;;;OAOG;;IAEH;;;;;;;OAOG;;;;;;;;CAmBL,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicator.js

@@ -41,13 +41,39 @@ exports.useStatusIndicator = common_1.createElemPropsHook(hooks_1.useStatusIndic
         background: colors.background,
     };
 });
+/**
+ * `StatusIndicator` is a container component which renders an {@link Flex} under the hood to
+ * apply spacing evenly between its children. It has a default maximum width of `200px`.
+ *
+ * ```tsx
+ * <StatusIndicator emphasis="low" variant="blue">
+ *   {Child components}
+ * </StatusIndicator>
+ * ```
+ */
 exports.StatusIndicator = common_1.createContainer('div')({
     displayName: 'StatusIndicator',
     modelHook: hooks_1.useStatusIndicatorModel,
     elemPropsHook: exports.useStatusIndicator,
     subComponents: {
-        Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
+        /**
+         * `StatusIndicator.Label` renders {@link Text} under the hood. It will apply an ellipsis if its
+         * contents exceed the component's maximum width.
+         *
+         * ```tsx
+         * <StatusIndicator.Label>{The text to be rendered}</StatusIndicator.Label>
+         * ```
+         */
         Label: StatusIndicatorLabel_1.StatusIndicatorLabel,
+        /**
+         * `StatusIndicator.Icon` renders {@link SystemIcon} under the hood. It's used as a decorative
+         * element to visually support the {@link StatusIndicatorLabel StatusIndicator.Label} text.
+         *
+         * ```tsx
+         * <StatusIndicator.Icon icon={uploadCloudIcon} />
+         * ```
+         */
+        Icon: StatusIndicatorIcon_1.StatusIndicatorIcon,
     },
 })(function (_a, Element, model) {
     var children = _a.children, elemProps = __rest(_a, ["children"]);

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 export interface StatusIndicatorIconProps extends SystemIconProps {
 }
@@ -63,6 +64,18 @@ export declare const statusIndicatorColors: {
         };
     };
 };
+export declare const useStatusIndicatorIcon: <P extends {}, R>(model: {
+    state: {
+        emphasis: import("./hooks").StatusIndicatorEmphasis;
+        variant: import("./hooks").StatusIndicatorVariant;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: React.Ref<R> | undefined) => {
+    color: string;
+    colorHover: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 export declare const StatusIndicatorIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", StatusIndicatorIconProps, {
     state: {
         emphasis: import("./hooks").StatusIndicatorEmphasis;

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAUF,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}
+{"version":3,"file":"StatusIndicatorIcon.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicatorIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,MAAM,WAAW,wBAAyB,SAAQ,eAAe;CAAG;AAIpE,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DjC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;OAMjC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;EAK9B,CAAC"}

package/dist/commonjs/status-indicator/lib/StatusIndicatorIcon.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StatusIndicatorIcon = exports.statusIndicatorColors = void 0;
+exports.StatusIndicatorIcon = exports.useStatusIndicatorIcon = exports.statusIndicatorColors = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var icon_1 = require("@workday/canvas-kit-react/icon");
@@ -82,7 +82,7 @@ exports.statusIndicatorColors = {
         },
     },
 };
-var useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
+exports.useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndicatorModel)(function (_a) {
     var state = _a.state;
     var colors = exports.statusIndicatorColors[state.variant][state.emphasis];
     return {
@@ -92,7 +92,7 @@ var useStatusIndicatorIcon = common_1.createElemPropsHook(hooks_1.useStatusIndic
 });
 exports.StatusIndicatorIcon = common_1.createSubcomponent('span')({
     modelHook: hooks_1.useStatusIndicatorModel,
-    elemPropsHook: useStatusIndicatorIcon,
+    elemPropsHook: exports.useStatusIndicatorIcon,
 })(function (elemProps, Element, model) {
     return react_1.default.createElement(icon_1.SystemIcon, __assign({ as: Element, size: 20, role: "img" }, elemProps));
 });

package/dist/commonjs/text-area/lib/TextArea.d.ts

@@ -42,7 +42,7 @@ export declare const TextArea: import("@workday/canvas-kit-react/common").Elemen
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

package/dist/commonjs/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}

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

@@ -30,11 +30,10 @@ var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
 var TextAreaField_1 = require("./TextAreaField");
 exports.TextArea = common_1.createContainer('div')({
     displayName: 'TextArea',
-    modelHook: hooks_1.useTextAreaModel,
+    modelHook: form_field_1.useFormFieldModel,
     subComponents: {
         Field: TextAreaField_1.TextAreaField,
         Label: form_field_1.FormField.Label,

package/dist/commonjs/text-input/lib/TextInput.d.ts

@@ -7,7 +7,7 @@ export interface TextInputProps extends ExtractProps<typeof FormField, never> {
      */
     children: React.ReactNode;
 }
-export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("../../form-field").FormFieldProps & Partial<{
+export declare const TextInput: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("@workday/canvas-kit-preview-react/form-field").FormFieldProps & Partial<{
     hasError: boolean;
     id: string;
     isRequired: boolean;
@@ -49,7 +49,7 @@ export declare const TextInput: import("@workday/canvas-kit-react/common").Eleme
         };
         events: {};
     }>;
-    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Pick<import("@workday/canvas-kit-react/text").TypeLevelProps, "top" | "left" | "right" | "bottom" | "fill" | "children" | "color" | "resize" | "width" | "height" | "alignSelf" | "appearance" | "backgroundAttachment" | "backgroundColor" | "backgroundImage" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "boxShadow" | "boxSizing" | "content" | "cursor" | "display" | "flexBasis" | "flexGrow" | "flexShrink" | "float" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridColumnEnd" | "gridColumnStart" | "gridRowEnd" | "gridRowStart" | "insetInlineEnd" | "insetInlineStart" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "objectFit" | "objectPosition" | "opacity" | "order" | "outlineOffset" | "overflowWrap" | "overflowX" | "overflowY" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "textAlign" | "textOverflow" | "textShadow" | "textTransform" | "transform" | "userSelect" | "verticalAlign" | "visibility" | "whiteSpace" | "wordBreak" | "zIndex" | "animation" | "background" | "backgroundPosition" | "border" | "borderBottom" | "borderColor" | "borderInlineEnd" | "borderInlineStart" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "listStyle" | "margin" | "outline" | "overflow" | "padding" | "placeSelf" | "textDecoration" | "transition" | "stroke" | "depth" | "marginX" | "marginY" | "paddingX" | "paddingY" | "variant">, {
+    Hint: import("@workday/canvas-kit-react/common").ElementComponentM<"p", Omit<import("@workday/canvas-kit-react/text").TypeLevelProps, "size">, {
         state: {
             id: string;
             hasError: boolean;

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EAAC,SAAS,EAA0B,MAAM,8CAA8C,CAAC;AAMhG,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAC/E,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAKtD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBpB,CAAC"}

package/dist/commonjs/text-input/lib/TextInput.js

@@ -30,11 +30,10 @@ var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
 var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
 var TextInputField_1 = require("./TextInputField");
 exports.TextInput = common_1.createContainer('div')({
     displayName: 'TextInput',
-    modelHook: hooks_1.useTextInputModel,
+    modelHook: form_field_1.useFormFieldModel,
     subComponents: {
         Field: TextInputField_1.TextInputField,
         Label: form_field_1.FormField.Label,

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

@@ -45,7 +45,7 @@ var baseStyles = {
 };
 exports.TextInputField = common_1.createSubcomponent('input')({
     displayName: 'TextInput.Field',
-    modelHook: hooks_1.useTextInputModel,
+    modelHook: form_field_1.useFormFieldModel,
     elemPropsHook: hooks_1.useTextInputField,
 })(function (elemProps, Element, model) {
     var theme = common_1.useTheme();

package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts

@@ -8,7 +8,7 @@ export declare const useTextInputField: <P extends {}, R>(model: {
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     type: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated Please use `useFormFieldModel` instead */
 export declare const useTextInputModel: (<TT_Special_Generic>(config?: (Partial<{
     hasError: boolean;
     id: string;

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAEA,yDAAyD;AACzD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;EAAoB,CAAC"}

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTextInputModel = void 0;
 var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
+/** @deprecated Please use `useFormFieldModel` instead */
 exports.useTextInputModel = form_field_1.useFormFieldModel;

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

@@ -22,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;
@@ -38,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/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/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/hooks/useFormFieldHint.d.ts

@@ -9,7 +9,7 @@ export declare const useFormFieldHint: <P extends {}, R>(model: {
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

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

@@ -9,7 +9,7 @@ export declare const useFormFieldInput: <P extends {}, R>(model: {
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     required: boolean | undefined;
     'aria-invalid': boolean | undefined;
     'aria-describedby': string;

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

@@ -9,7 +9,7 @@ export declare const useFormFieldLabel: <P extends {}, R>(model: {
         isRequired: boolean;
     };
     events: {};
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+}, elemProps?: P | undefined, ref?: import("react").Ref<R> | undefined) => {
     htmlFor: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;