@a-type/ui 6.0.22 → 6.0.24

package/dist/components/forms/CheckboxField.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 export interface CheckboxFieldProps {
     name: string;
     label?: string;
     required?: boolean;
     className?: string;
     id?: string;
+    description?: ReactNode;
 }
-export declare function CheckboxField({ name, label, className, required, id: providedId, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function CheckboxField({ name, label, className, required, id: providedId, description, ...rest }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/CheckboxField.js

@@ -12,15 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Checkbox } from '../checkbox/index.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 export function CheckboxField(_a) {
-    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
     const [props, _, tools] = useField({ name, required, type: 'checkbox' });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Box, { gap: "md", className: className, children: [_jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
-                    tools.setValue(!!v);
-                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Checkbox, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+                        tools.setValue(!!v);
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=CheckboxField.js.map

package/dist/components/forms/CheckboxField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,aAAa,CAAC,EAOT;QAPS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEM,EADjB,IAAI,cANsB,gDAO7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"CheckboxField.js","sourceRoot":"","sources":["../../../src/components/forms/CheckboxField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,aAAa,CAAC,EAQT;QARS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAES,EADjB,IAAI,cAPsB,+DAQ7B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,oBACJ,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/EmojiField.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '../button/Button.js';
 export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
     name: string;
     label?: string;
     required?: string;
     className?: string;
+    description?: ReactNode;
 };
-export declare function EmojiField({ name, label, className, required, id: providedId, ...rest }: EmojiFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function EmojiField({ name, label, className, required, id: providedId, description, ...rest }: EmojiFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/EmojiField.js

@@ -13,19 +13,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
 import { useState } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { EmojiPicker } from '../emojiPicker/EmojiPicker.js';
 import { Icon } from '../icon/Icon.js';
 import { Popover } from '../popover/Popover.js';
 import cls from './EmojiField.module.css';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 export function EmojiField(_a) {
-    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
     const [props, _, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
     const [open, setOpen] = useState(false);
-    return (_jsxs(Box, { gap: "md", className: className, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: id, "aria-label": "Select emoji", size: "wrapper" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
+    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(Field.Control, { render: _jsx("input", Object.assign({ type: "hidden" }, props)) }), _jsx(Popover.Trigger, { render: _jsx(Button, Object.assign({ id: `${id}-trigger`, "aria-label": "Select emoji", size: "wrapper" }, rest, { children: _jsx(Button.Icon, { className: cls.triggerIcon, children: props.value || _jsx(Icon, { name: "smile" }) }) })) }), _jsx(Popover.Content, { children: _jsx(EmojiPicker, { onValueChange: (v) => {
                                 tools.setValue(v);
                                 setOpen(false);
                             }, onClear: required
@@ -33,6 +32,6 @@ export function EmojiField(_a) {
                                 : () => {
                                     tools.setValue('');
                                     setOpen(false);
-                                }, id: id }) })] }), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+                                }, id: id }) })] }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=EmojiField.js.map

package/dist/components/forms/EmojiField.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AASvD,MAAM,UAAU,UAAU,CAAC,EAOT;QAPS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEG,EADd,IAAI,cANmB,gDAO1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBAAC,EAAE,EAAE,EAAE,gBAAa,cAAc,EAAC,IAAI,EAAC,SAAS,IAAK,IAAI,cAChE,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"EmojiField.js","sourceRoot":"","sources":["../../../src/components/forms/EmojiField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAUnC,MAAM,UAAU,UAAU,CAAC,EAQT;QARS,EAC1B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEM,EADd,IAAI,cAPmB,+DAQ1B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,MAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,aACzC,KAAC,KAAK,CAAC,OAAO,IAAC,MAAM,EAAE,8BAAO,IAAI,EAAC,QAAQ,IAAK,KAAK,EAAI,GAAI,EAC7D,KAAC,OAAO,CAAC,OAAO,IACf,MAAM,EACL,KAAC,MAAM,kBACN,EAAE,EAAE,GAAG,EAAE,UAAU,gBACR,cAAc,EACzB,IAAI,EAAC,SAAS,IACV,IAAI,cAER,KAAC,MAAM,CAAC,IAAI,IAAC,SAAS,EAAE,GAAG,CAAC,WAAW,YACrC,KAAK,CAAC,KAAK,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,GAAG,GACxB,IACN,GAET,EACF,KAAC,OAAO,CAAC,OAAO,cACf,KAAC,WAAW,IACX,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;gCACpB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;gCAClB,OAAO,CAAC,KAAK,CAAC,CAAC;4BAChB,CAAC,EACD,OAAO,EACN,QAAQ;gCACP,CAAC,CAAC,SAAS;gCACX,CAAC,CAAC,GAAG,EAAE;oCACL,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;oCACnB,OAAO,CAAC,KAAK,CAAC,CAAC;gCACf,CAAC,EAEL,EAAE,EAAE,EAAE,GACL,GACe,IACT,EACT,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/Field.d.ts

@@ -0,0 +1,21 @@
+import { ComponentProps } from 'react';
+import { SlotDiv } from '../utility/SlotDiv.js';
+export interface FieldRootProps extends ComponentProps<'div'> {
+    horizontal?: boolean;
+    stretch?: boolean;
+    reverse?: boolean;
+    /**
+     * This ID will be passed to Control, and Label will be associated.
+     */
+    id?: string;
+}
+declare function FieldRoot({ className, horizontal, stretch, reverse, id, ...props }: FieldRootProps): import("react/jsx-runtime").JSX.Element;
+declare function FieldControl({ className, ref, ...props }: ComponentProps<typeof SlotDiv>): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: ComponentProps<'label'>): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare const Field: typeof FieldRoot & {
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Control: typeof FieldControl;
+};
+export {};

package/dist/components/forms/Field.js

@@ -0,0 +1,71 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext, useEffect, useRef, useState, } from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './Field.module.css';
+const FieldContext = createContext({
+    events: new EventTarget(),
+});
+function FieldRoot(_a) {
+    var { className, horizontal, stretch, reverse, id } = _a, props = __rest(_a, ["className", "horizontal", "stretch", "reverse", "id"]);
+    const [events] = useState(() => new EventTarget());
+    return (_jsx(FieldContext.Provider, { value: { id, events }, children: _jsx(SlotDiv, Object.assign({ className: clsx(cls.root, className), "data-horizontal": horizontal ? '' : undefined, "data-stretch": stretch ? '' : undefined, "data-reverse": reverse ? '' : undefined }, props)) }));
+}
+function FieldControl(_a) {
+    var { className, ref } = _a, props = __rest(_a, ["className", "ref"]);
+    const innerRef = useRef(null);
+    const finalRef = useMergedRef(ref, innerRef);
+    const { id, events } = useContext(FieldContext);
+    useEffect(() => {
+        if (!id)
+            return;
+        function onDescriptionVisible(event) {
+            var _a, _b;
+            if (event.detail === true) {
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-describedby', `${id}-description`);
+            }
+            else {
+                (_b = innerRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-describedby');
+            }
+        }
+        events.addEventListener('description-visible', onDescriptionVisible);
+        return () => {
+            events.removeEventListener('description-visible', onDescriptionVisible);
+        };
+    }, [events, id]);
+    return (_jsx(SlotDiv, Object.assign({ className: clsx(cls.control, className), id: id, ref: finalRef }, props)));
+}
+function FieldLabel(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { id } = useContext(FieldContext);
+    return (_jsx("label", Object.assign({ className: clsx(cls.label, className), htmlFor: id }, props)));
+}
+function FieldDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const { id, events } = useContext(FieldContext);
+    useEffect(() => {
+        events.dispatchEvent(new CustomEvent('description-visible', { detail: true }));
+        return () => {
+            events.dispatchEvent(new CustomEvent('description-visible', { detail: false }));
+        };
+    }, [events]);
+    return (_jsx("div", Object.assign({ className: clsx('@mode-dense', cls.description, className), id: id ? `${id}-description` : undefined }, props)));
+}
+export const Field = Object.assign(FieldRoot, {
+    Label: FieldLabel,
+    Description: FieldDescription,
+    Control: FieldControl,
+});
+//# sourceMappingURL=Field.js.map

package/dist/components/forms/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/forms/Field.tsx"],"names":[],"mappings":"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"}

package/dist/components/forms/Field.module.css

@@ -0,0 +1,62 @@
+.root {
+	display: grid;
+	grid-template-areas: 'label' 'control' 'description';
+	justify-content: start;
+
+	&[data-horizontal] {
+		flex-direction: row;
+		align-items: center;
+		grid-template-areas: 'control label' 'description description';
+		grid-template-columns: auto 1fr;
+		&[data-reverse] {
+			grid-template-areas: 'label control' 'description description';
+			grid-template-columns: auto 1fr;
+		}
+	}
+
+	&[data-stretch] {
+		align-self: stretch;
+		justify-content: stretch;
+	}
+}
+
+.control {
+	grid-area: control;
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
+}
+
+.label {
+	grid-area: label;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-weight: var(--m-text-weight-bold);
+	margin-bottom: var(--m-space-xs);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+
+	[data-horizontal] & {
+		@apply --mx-fg(var(--m-color-neutral-ink));
+		font-weight: var(--m-text-weight-normal);
+		margin-block-start: --fn-literal(5px);
+
+		[data-reverse] & {
+			margin-inline-start: 0;
+			margin-inline-end: calc(
+				var(--m-global-shape-roundness) * var(--m-space-md)
+			);
+		}
+	}
+}
+
+.description {
+	grid-area: description;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-style: italic;
+	margin-top: var(--m-space-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+}

package/dist/components/forms/Form.module.css

@@ -2,5 +2,5 @@
 	display: flex;
 	align-items: start;
 	flex-direction: column;
-	gap: var(--m-space-md);
+	gap: var(--m-space-lg);
 }

package/dist/components/forms/FormikForm.d.ts

@@ -11,13 +11,13 @@ export interface FormikFormProps<T extends FormikValues = FormikValues> extends
 export { FieldArray } from 'formik';
 export declare function FormikFormRoot<Values extends FormikValues>({ className, children, onSubmit, ...props }: FormikFormProps<Values>): import("react/jsx-runtime").JSX.Element;
 export declare const FormikForm: typeof FormikFormRoot & {
-    TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+    TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
     TextAreaField: typeof TextAreaField;
     NumberStepperField: typeof NumberStepperField;
     SubmitButton: typeof SubmitButton;
     CheckboxField: typeof CheckboxField;
     SwitchField: typeof SwitchField;
-    ToggleGroupField: (({ name, label, required, className, type, multiple, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+    ToggleGroupField: (({ name, label, required, className, type, multiple, description, id: providedId, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
         Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
     };
     EmojiField: typeof EmojiField;

package/dist/components/forms/FormikForm.stories.d.ts

@@ -8,13 +8,13 @@ import { SwitchField } from './SwitchField.js';
 declare const meta: {
     title: string;
     component: typeof import("./FormikForm.js").FormikFormRoot & {
-        TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+        TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: import("./TextField.js").TextFieldProps) => import("react/jsx-runtime").JSX.Element;
         TextAreaField: typeof import("./TextField.js").TextAreaField;
         NumberStepperField: typeof NumberStepperField;
         SubmitButton: typeof SubmitButton;
         CheckboxField: typeof CheckboxField;
         SwitchField: typeof SwitchField;
-        ToggleGroupField: (({ name, label, required, className, type, multiple, id, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+        ToggleGroupField: (({ name, label, required, className, type, multiple, description, id: providedId, ...props }: import("./ToggleGroupField.js").ToggleGroupFieldProps<string>) => import("react/jsx-runtime").JSX.Element) & {
             Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
         };
         EmojiField: typeof EmojiField;

package/dist/components/forms/FormikForm.stories.js

@@ -43,7 +43,7 @@ export const Default = {
                 newsletter: false,
                 plan: 'basic',
                 emoji: '',
-            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email", placeholder: "you@example.com" }), _jsx(TextField, { name: "password", type: "password", label: "Password" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100 }), _jsx(CheckboxField, { name: "tos", label: "I agree" }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", children: "Enterprise" })] }), _jsx(EmojiField, { name: "emoji", label: "Favorite Emoji" }), _jsx(SubmitButton, { children: "Sign up" })] })));
+            } }, args, { children: [_jsx(TextField, { name: "email", type: "email", label: "Email", placeholder: "you@example.com" }), _jsx(TextField, { name: "password", type: "password", label: "Password", description: "Make it a good one" }), _jsx(NumberStepperField, { name: "age", label: "Age", min: 13, max: 100, description: "You can mail your government ID to us, don't worry, we're the good guys" }), _jsx(CheckboxField, { name: "tos", label: "I agree", description: "To what? Not telling." }), _jsx(SwitchField, { name: "newsletter", label: "Subscribe to newsletter", description: "Don't worry, we don't bother you much" }), _jsxs(ToggleGroupField, { type: "single", name: "plan", label: "Select your plan", required: true, description: "Please do the expensive one!!!", children: [_jsx(ToggleGroupField.Item, { value: "basic", children: "Basic" }), _jsx(ToggleGroupField.Item, { value: "pro", children: "Pro" }), _jsx(ToggleGroupField.Item, { value: "enterprise", className: "@mode-accent", children: "Enterprise" })] }), _jsx(EmojiField, { name: "emoji", label: "Favorite Emoji" }), _jsx(SubmitButton, { children: "Sign up" })] })));
     },
 };
 //# sourceMappingURL=FormikForm.stories.js.map

package/dist/components/forms/FormikForm.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;KACD;IACD,MAAM,CAAC,EAA6B;YAA7B,EAAE,aAAa,EAAE,CAAC,OAAW,EAAN,IAAI,cAA3B,iBAA6B,CAAF;QACjC,OAAO,CACN,MAAC,UAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,KAAK;gBACjB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE;aACT,IACG,IAAI,eAER,KAAC,SAAS,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,iBAAiB,GAC5B,EACF,KAAC,SAAS,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,GAAG,EAC9D,KAAC,kBAAkB,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,GAAI,EAChE,KAAC,aAAa,IAAC,IAAI,EAAC,KAAK,EAAC,KAAK,EAAC,SAAS,GAAG,EAC5C,KAAC,WAAW,IAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,yBAAyB,GAAG,EACjE,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,mBAER,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,2BAEjB,IACN,EACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,GAAG,EAClD,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}
+{"version":3,"file":"FormikForm.stories.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,IAAI,EAAE;QACL,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;QACxC,CAAC;KACD;IACD,MAAM,CAAC,EAA6B;YAA7B,EAAE,aAAa,EAAE,CAAC,OAAW,EAAN,IAAI,cAA3B,iBAA6B,CAAF;QACjC,OAAO,CACN,MAAC,UAAU,kBACV,aAAa,EAAE;gBACd,KAAK,EAAE,EAAE;gBACT,QAAQ,EAAE,EAAE;gBACZ,GAAG,EAAE,EAAE;gBACP,GAAG,EAAE,KAAK;gBACV,UAAU,EAAE,KAAK;gBACjB,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,EAAE;aACT,IACG,IAAI,eAER,KAAC,SAAS,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,OAAO,EACb,WAAW,EAAC,iBAAiB,GAC5B,EACF,KAAC,SAAS,IACT,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,WAAW,EAAC,oBAAoB,GAC/B,EACF,KAAC,kBAAkB,IAClB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,KAAK,EACX,GAAG,EAAE,EAAE,EACP,GAAG,EAAE,GAAG,EACR,WAAW,EAAC,yEAAyE,GACpF,EACF,KAAC,aAAa,IACb,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,SAAS,EACf,WAAW,EAAC,uBAAuB,GAClC,EACF,KAAC,WAAW,IACX,IAAI,EAAC,YAAY,EACjB,KAAK,EAAC,yBAAyB,EAC/B,WAAW,EAAC,uCAAuC,GAClD,EACF,MAAC,gBAAgB,IAChB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,kBAAkB,EACxB,QAAQ,QACR,WAAW,EAAC,gCAAgC,aAE5C,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,OAAO,sBAA8B,EAClE,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,KAAK,oBAA4B,EAC9D,KAAC,gBAAgB,CAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,SAAS,EAAC,cAAc,2BAE1C,IACN,EACnB,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,gBAAgB,GAAG,EAClD,KAAC,YAAY,0BAAuB,KACxB,CACb,CAAC;IACH,CAAC;CACD,CAAC"}

package/dist/components/forms/NumberStepperField.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { NumberStepperProps } from '../numberStepper/NumberStepper.js';
 export interface NumberStepperFieldProps extends Omit<NumberStepperProps, 'value' | 'onChange'> {
     name: string;
@@ -5,5 +6,6 @@ export interface NumberStepperFieldProps extends Omit<NumberStepperProps, 'value
     className?: string;
     id?: string;
     onChange?: (value: number) => void;
+    description?: ReactNode;
 }
-export declare function NumberStepperField({ name, label, className, id: providedId, onChange, ...rest }: NumberStepperFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function NumberStepperField({ name, label, className, id: providedId, onChange, description, ...rest }: NumberStepperFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/NumberStepperField.js

@@ -11,19 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { NumberStepper, } from '../numberStepper/NumberStepper.js';
-import { FieldLabel } from './FieldLabel.js';
-import cls from './NumberStepperField.module.css';
+import { Field } from './Field.js';
 export function NumberStepperField(_a) {
-    var { name, label, className, id: providedId, onChange } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange"]);
+    var { name, label, className, id: providedId, onChange, description } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange", "description"]);
     const [_, field, tools] = useField({ name });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
-                    tools.setValue(v);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(v);
-                }, id: id }, rest))] }));
+    return (_jsxs(Field, { className: className, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(NumberStepper, Object.assign({ value: field.value, onChange: (v) => {
+                        tools.setValue(v);
+                        onChange === null || onChange === void 0 ? void 0 : onChange(v);
+                    } }, rest)) }), description && _jsx(Field.Description, { children: description })] }));
 }
-const FieldRoot = withClassName('div', cls.root);
 //# sourceMappingURL=NumberStepperField.js.map

package/dist/components/forms/NumberStepperField.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,GAAG,MAAM,iCAAiC,CAAC;AAWlD,MAAM,UAAU,kBAAkB,CAAC,EAOT;QAPS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,EAAE,EAAE,UAAU,EACd,QAAQ,OAEiB,EADtB,IAAI,cAN2B,gDAOlC,CADO;IAEP,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,SAAS,IAAC,SAAS,EAAE,SAAS,aAC7B,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;oBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;gBACf,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}
+{"version":3,"file":"NumberStepperField.js","sourceRoot":"","sources":["../../../src/components/forms/NumberStepperField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EACN,aAAa,GAEb,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAYnC,MAAM,UAAU,kBAAkB,CAAC,EAQT;QARS,EAClC,IAAI,EACJ,KAAK,EACL,SAAS,EACT,EAAE,EAAE,UAAU,EACd,QAAQ,EACR,WAAW,OAEc,EADtB,IAAI,cAP2B,+DAQlC,CADO;IAEP,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;IAC7C,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aACjC,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,aAAa,kBACb,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACf,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBAClB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,CAAC;oBACf,CAAC,IACG,IAAI,EACP,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/SwitchField.d.ts

@@ -1,8 +1,10 @@
+import { ReactNode } from 'react';
 export interface SwitchFieldProps {
     name: string;
     label?: string;
     required?: boolean;
     className?: string;
     id?: string;
+    description?: ReactNode;
 }
-export declare function SwitchField({ name, label, className, required, id: providedId, ...rest }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function SwitchField({ name, label, className, required, id: providedId, description, ...rest }: SwitchFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/SwitchField.js

@@ -12,15 +12,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Switch } from '../switch/Switch.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 export function SwitchField(_a) {
-    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    var { name, label, className, required, id: providedId, description } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id", "description"]);
     const [props, _, tools] = useField({ name, required, type: 'checkbox' });
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(Box, { gap: "md", className: className, children: [_jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
-                    tools.setValue(!!v);
-                }, id: id }, rest)), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+    return (_jsxs(Field, { horizontal: true, className: className, id: id, children: [_jsx(Field.Control, { render: _jsx(Switch, Object.assign({}, props, { checked: props.checked, onCheckedChange: (v) => {
+                        tools.setValue(!!v);
+                    } }, rest)) }), label && _jsx(Field.Label, { children: label }), description && _jsx(Field.Description, { children: description })] }));
 }
 //# sourceMappingURL=SwitchField.js.map

package/dist/components/forms/SwitchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAUvD,MAAM,UAAU,WAAW,CAAC,EAOT;QAPS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,OAEI,EADf,IAAI,cANoB,gDAO3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,GAAG,IAAC,GAAG,EAAC,IAAI,EAAC,SAAS,EAAE,SAAS,aACjC,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACrB,CAAC,EACD,EAAE,EAAE,EAAE,IACF,IAAI,EACP,EACD,KAAK,IAAI,CACT,KAAC,oBAAoB,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAwB,CACjE,IACI,CACN,CAAC;AACH,CAAC"}
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/forms/SwitchField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAWnC,MAAM,UAAU,WAAW,CAAC,EAQT;QARS,EAC3B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,EAAE,EAAE,UAAU,EACd,WAAW,OAEO,EADf,IAAI,cAPoB,+DAQ3B,CADO;IAEP,MAAM,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;IACzE,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,OAAO,CACN,MAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,EAAE,aAC7C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,MAAM,oBACF,KAAK,IACT,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;wBACtB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,IACG,IAAI,EACP,GAEF,EACD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC3C,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/TextField.d.ts

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes, Ref } from 'react';
+import { InputHTMLAttributes, ReactNode, Ref } from 'react';
 import { InputProps } from '../input/Input.js';
 import { TextAreaProps } from '../textArea/TextArea.js';
 export type TextFieldProps = {
@@ -9,8 +9,9 @@ export type TextFieldProps = {
     inputRef?: Ref<HTMLInputElement>;
     inputClassName?: string;
     ref?: Ref<HTMLDivElement>;
+    description?: ReactNode;
 } & Omit<InputProps, 'ref'>;
-export declare const TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description, ...rest }: TextFieldProps) => import("react/jsx-runtime").JSX.Element;
 export type TextAreaFieldProps = {
     name: string;
     label?: string;
@@ -21,6 +22,7 @@ export type TextAreaFieldProps = {
     inputRef?: Ref<HTMLTextAreaElement>;
     submitOnEnter?: boolean;
     textAreaClassName?: string;
-} & TextAreaProps;
-export declare function TextAreaField({ name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
-export declare const FieldRoot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    description?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+} & Omit<TextAreaProps, 'ref'>;
+export declare function TextAreaField({ name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/TextField.js

@@ -13,16 +13,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { useField, useFormikContext } from 'formik';
 import { useCallback, useEffect, useRef, } from 'react';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { Input } from '../input/Input.js';
 import { TextArea } from '../textArea/TextArea.js';
-import { FieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 import cls from './TextField.module.css';
 const emptyRef = (() => { });
 export const TextField = function TextField(_a) {
-    var { ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName"]);
+    var { ref, name, label, className, autoFocusDelay, autoFocus, inputRef, onChange, onFocus, onBlur, id: providedId, inputClassName, description } = _a, rest = __rest(_a, ["ref", "name", "label", "className", "autoFocusDelay", "autoFocus", "inputRef", "onChange", "onFocus", "onBlur", "id", "inputClassName", "description"]);
     const [props] = useField({
         name,
         onChange,
@@ -39,10 +38,10 @@ export const TextField = function TextField(_a) {
             }, autoFocusDelay);
         }
     }, [autoFocusDelay]);
-    return (_jsxs(FieldRoot, { className: className, ref: ref, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(Input, Object.assign({}, props, rest, { id: id, autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) }))] }));
+    return (_jsxs(Field, { className: className, stretch: true, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(Input, Object.assign({}, props, rest, { autoFocus: autoFocus, className: clsx(cls.input, inputClassName), ref: useMergedRef(innerInputRef, inputRef || emptyRef) })) }), description && _jsx(Field.Description, { children: description })] }));
 };
 export function TextAreaField(_a) {
-    var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName"]);
+    var { name, label, className, inputRef, onKeyDown, submitOnEnter, id: providedId, textAreaClassName, description, ref } = _a, rest = __rest(_a, ["name", "label", "className", "inputRef", "onKeyDown", "submitOnEnter", "id", "textAreaClassName", "description", "ref"]);
     const [props] = useField(name);
     const { submitForm } = useFormikContext();
     const onKeyDownInner = useCallback((e) => {
@@ -53,7 +52,6 @@ export function TextAreaField(_a) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
     }, [submitOnEnter, onKeyDown, submitForm]);
     const id = useIdOrGenerated(providedId);
-    return (_jsxs(FieldRoot, { className: className, children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx('layer-composed:w-full', textAreaClassName), id: id, onKeyDown: onKeyDownInner }))] }));
+    return (_jsxs(Field, { stretch: true, className: className, ref: ref, id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(TextArea, Object.assign({ ref: inputRef }, props, rest, { className: clsx(cls.input, textAreaClassName), onKeyDown: onKeyDownInner })) }), description && _jsx(Field.Description, { children: description })] }));
 }
-export const FieldRoot = withClassName('div', cls.root);
 //# sourceMappingURL=TextField.js.map

package/dist/components/forms/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/forms/TextField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAKN,WAAW,EACX,SAAS,EACT,MAAM,GACN,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,YAAY,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAc,MAAM,mBAAmB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAiB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,GAAG,MAAM,wBAAwB,CAAC;AAazC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,GAAE,CAAC,CAAQ,CAAC;AAEnC,MAAM,CAAC,MAAM,SAAS,GAAG,SAAS,SAAS,CAAC,EAe3B;QAf2B,EAC3C,GAAG,EACH,IAAI,EACJ,KAAK,EACL,SAAS,EACT,cAAc,EACd,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,EAAE,EAAE,UAAU,EACd,cAAc,EACd,WAAW,OAEK,EADb,IAAI,cAdoC,wJAe3C,CADO;IAEP,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;QACxB,IAAI;QACJ,QAAQ;QACR,OAAO;QACP,MAAM;KACN,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IACrD,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,cAAc,EAAE,CAAC;YACpB,UAAU,CAAC,GAAG,EAAE;gBACf,IAAI,aAAa,CAAC,OAAO;oBAAE,aAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;YAC1D,CAAC,EAAE,cAAc,CAAC,CAAC;QACpB,CAAC;IACF,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,OAAO,CACN,MAAC,KAAK,IAAC,SAAS,EAAE,SAAS,EAAE,OAAO,QAAC,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,aACnD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,KAAK,oBACD,KAAK,EACL,IAAI,IACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,cAAc,CAAC,EAC1C,GAAG,EAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,IAAI,QAAQ,CAAC,IACrD,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC,CAAC;AAgBF,MAAM,UAAU,aAAa,CAAC,EAYT;QAZS,EAC7B,IAAI,EACJ,KAAK,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,aAAa,EACb,EAAE,EAAE,UAAU,EACd,iBAAiB,EACjB,WAAW,EACX,GAAG,OAEiB,EADjB,IAAI,cAXsB,yHAY7B,CADO;IAEP,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,MAAM,EAAE,UAAU,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAC1C,MAAM,cAAc,GAAG,WAAW,CACjC,CAAC,CAAkC,EAAE,EAAE;QACtC,IAAI,aAAa,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACvD,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,UAAU,EAAE,CAAC;QACd,CAAC;QACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,CAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,aAAa,EAAE,SAAS,EAAE,UAAU,CAAC,CACtC,CAAC;IACF,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IAExC,OAAO,CACN,MAAC,KAAK,IAAC,OAAO,QAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,aACnD,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,QAAQ,kBACR,GAAG,EAAE,QAAe,IAChB,KAAK,EACL,IAAI,IACR,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,iBAAiB,CAAC,EAC7C,SAAS,EAAE,cAAc,IACxB,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC"}

package/dist/components/forms/ToggleGroupField.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 export type ToggleGroupFieldProps<Value extends string> = ToggleGroupProps<Value> & {
     name: string;
@@ -6,8 +7,9 @@ export type ToggleGroupFieldProps<Value extends string> = ToggleGroupProps<Value
     className?: string;
     id?: string;
     type?: 'single' | 'multiple';
+    description?: ReactNode;
 };
-declare function ToggleGroupFieldDefault({ name, label, required, className, type, multiple, id, ...props }: ToggleGroupFieldProps<string>): import("react/jsx-runtime").JSX.Element;
+declare function ToggleGroupFieldDefault({ name, label, required, className, type, multiple, description, id: providedId, ...props }: ToggleGroupFieldProps<string>): import("react/jsx-runtime").JSX.Element;
 export declare const ToggleGroupField: typeof ToggleGroupFieldDefault & {
     Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/forms/ToggleGroupField.js

@@ -11,20 +11,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField } from 'formik';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
-import { FieldLabel } from './FieldLabel.js';
-import { FieldRoot } from './TextField.js';
+import { Field } from './Field.js';
 function ToggleGroupFieldDefault(_a) {
-    var { name, label, required, className, type = 'single', multiple, id } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "id"]);
+    var { name, label, required, className, type = 'single', multiple, description, id: providedId } = _a, props = __rest(_a, ["name", "label", "required", "className", "type", "multiple", "description", "id"]);
+    const id = useIdOrGenerated(providedId);
     const [fieldProps, _, tools] = useField(Object.assign({ name, required }, props));
-    return (_jsxs(FieldRoot, { children: [label && _jsx(FieldLabel, { htmlFor: id, children: label }), _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
-                    if (multiple || type === 'multiple') {
-                        tools.setValue(v);
-                    }
-                    else {
-                        tools.setValue(v[0]);
-                    }
-                }, multiple: multiple || type === 'multiple' }, props, { id: id, className: className }))] }));
+    return (_jsxs(Field, { id: id, children: [label && _jsx(Field.Label, { children: label }), _jsx(Field.Control, { render: _jsx(ToggleGroup, Object.assign({}, fieldProps, { onValueChange: (v) => {
+                        if (multiple || type === 'multiple') {
+                            tools.setValue(v);
+                        }
+                        else {
+                            tools.setValue(v[0]);
+                        }
+                    }, multiple: multiple || type === 'multiple' }, props, { className: className })) }), description && _jsx(Field.Description, { children: description })] }));
 }
 export const ToggleGroupField = Object.assign(ToggleGroupFieldDefault, {
     Item: ToggleGroup.Item,

package/dist/components/forms/ToggleGroupField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAY3C,SAAS,uBAAuB,CAAC,EASD;QATC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,EAAE,OAE6B,EAD5B,KAAK,cARwB,oEAShC,CADQ;IAER,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,SAAS,eACR,KAAK,IAAI,KAAC,UAAU,IAAC,OAAO,EAAE,EAAE,YAAG,KAAK,GAAc,EACvD,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;oBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;wBACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;oBACnB,CAAC;yBAAM,CAAC;wBACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACtB,CAAC;gBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,IACnB,IACS,CACZ,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}
+{"version":3,"file":"ToggleGroupField.js","sourceRoot":"","sources":["../../../src/components/forms/ToggleGroupField.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElC,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAoB,MAAM,+BAA+B,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAanC,SAAS,uBAAuB,CAAC,EAUD;QAVC,EAChC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,WAAW,EACX,EAAE,EAAE,UAAU,OAEiB,EAD5B,KAAK,cATwB,mFAUhC,CADQ;IAER,MAAM,EAAE,GAAG,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,MAAM,CAAC,UAAU,EAAE,CAAC,EAAE,KAAK,CAAC,GAAG,QAAQ,iBAAG,IAAI,EAAE,QAAQ,IAAK,KAAK,EAAG,CAAC;IAEtE,OAAO,CACN,MAAC,KAAK,IAAC,EAAE,EAAE,EAAE,aACX,KAAK,IAAI,KAAC,KAAK,CAAC,KAAK,cAAE,KAAK,GAAe,EAC5C,KAAC,KAAK,CAAC,OAAO,IACb,MAAM,EACL,KAAC,WAAW,oBACP,UAAU,IACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;wBACpB,IAAI,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE,CAAC;4BACrC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wBACnB,CAAC;6BAAM,CAAC;4BACP,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;wBACtB,CAAC;oBACF,CAAC,EACD,QAAQ,EAAE,QAAQ,IAAI,IAAI,KAAK,UAAU,IACrC,KAAK,IACT,SAAS,EAAE,SAAS,IACnB,GAEF,EACD,WAAW,IAAI,KAAC,KAAK,CAAC,WAAW,cAAE,WAAW,GAAqB,IAC7D,CACR,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE;IACtE,IAAI,EAAE,WAAW,CAAC,IAAI;CACtB,CAAC,CAAC"}

package/dist/components/forms/index.d.ts

@@ -1,5 +1,5 @@
 export * from './CheckboxField.js';
-export * from './FieldLabel.js';
+export * from './Field.js';
 export * from './Form.js';
 export * from './FormikForm.js';
 export * from './hooks.js';