@a-type/ui 5.0.21 → 6.0.0

package/dist/components/emojiPicker/EmojiPicker.js

@@ -0,0 +1,70 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { EmojiPicker as Core, useSkinTone, } from 'frimousse';
+import { withClassName, withProps } from '../../hooks.js';
+import { useLocalStorage } from '../../hooks/useStorage.js';
+import { Box } from '../box/Box.js';
+import { Button } from '../button/Button.js';
+import { Icon } from '../icon/Icon.js';
+import inputCls from '../input/Input.module.css';
+import { Spinner } from '../spinner/Spinner.js';
+import cls from './EmojiPicker.module.css';
+export const EmojiPickerRoot = withClassName(Core.Root, '@mode-dense', cls.root);
+export const EmojiPickerSearch = withClassName(Core.Search, cls.search, inputCls.input);
+export const EmojiPickerViewport = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(Box, { className: clsx(cls.viewport, className), children: _jsx(Core.Viewport, Object.assign({ className: cls.viewportInner }, props)) }));
+};
+export const EmojiPickerLoading = withClassName(withProps(Core.Loading, {
+    children: _jsx(Spinner, {}),
+}), cls.loading);
+export const EmojiPickerEmpty = withClassName(withProps(Core.Empty, {
+    children: _jsx(_Fragment, { children: "No emoji found" }),
+}), cls.empty);
+export const EmojiPickerCategoryHeader = (props) => (_jsx("div", { className: clsx(cls.categoryHeader, props.className), children: props.category.label }));
+export const EmojiPickerRow = withClassName('div', cls.row);
+export const EmojiPickerEmoji = withClassName((p) => (_jsx(Button, Object.assign({}, p, { emphasis: "ghost", toggled: p.emoji.isActive, toggleMode: "color", size: "small", "aria-label": p.emoji.label, forceIconMode: true, children: _jsx(Button.Icon, { children: p.emoji.emoji }) }))), cls.emoji);
+const defaultListComponents = {
+    CategoryHeader: EmojiPickerCategoryHeader,
+    Row: EmojiPickerRow,
+    Emoji: EmojiPickerEmoji,
+};
+export const EmojiPickerList = ({ className, components, }) => {
+    return (_jsx(Core.List, { className: clsx(cls.list, className), components: components
+            ? Object.assign(Object.assign({}, defaultListComponents), components) : defaultListComponents }));
+};
+export const useEmojiSkinTone = () => useLocalStorage('emoji-skin-tone', undefined, false);
+export const EmojiPickerSkinToneSelector = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    const [_, __, options] = useSkinTone();
+    const [skinTone, setSkinTone] = useEmojiSkinTone();
+    return (_jsx(Box, Object.assign({ d: "row", gap: true, className: className }, props, { children: options.map((option) => (_jsx(Button, { emphasis: "ghost", toggled: option.skinTone === skinTone, toggleMode: "color", size: "small", "aria-label": `Skin tone ${option}`, className: cls.skinToneButton, onClick: () => setSkinTone(option.skinTone), forceIconMode: true, children: _jsx(Button.Icon, { children: option.emoji }) }, option.skinTone))) })));
+};
+const EmojiPickerPrefab = (_a) => {
+    var { onValueChange, onClear } = _a, props = __rest(_a, ["onValueChange", "onClear"]);
+    const [skinTone] = useEmojiSkinTone();
+    return (_jsxs(EmojiPickerRoot, Object.assign({}, props, { onEmojiSelect: (emoji) => onValueChange(emoji.emoji, emoji.label), skinTone: skinTone, children: [_jsxs(Box, { col: true, gap: true, items: "start", full: "width", children: [_jsx(EmojiPickerSearch, {}), onClear && (_jsxs(Button, { emphasis: "ghost", size: "small", onClick: () => onClear(), children: [_jsx(Icon, { name: "x" }), "Clear selection"] }))] }), _jsxs(EmojiPickerViewport, { children: [_jsx(EmojiPickerList, {}), _jsx(EmojiPickerLoading, {}), _jsx(EmojiPickerEmpty, {})] }), _jsx(EmojiPickerSkinToneSelector, { className: cls.skinToneSelector })] })));
+};
+export const EmojiPicker = Object.assign(EmojiPickerPrefab, {
+    Root: EmojiPickerRoot,
+    Search: EmojiPickerSearch,
+    Viewport: EmojiPickerViewport,
+    List: EmojiPickerList,
+    Loading: EmojiPickerLoading,
+    Empty: EmojiPickerEmpty,
+    CategoryHeader: EmojiPickerCategoryHeader,
+    Row: EmojiPickerRow,
+    Emoji: EmojiPickerEmoji,
+});
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/components/emojiPicker/EmojiPicker.js.map

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

package/dist/components/emojiPicker/EmojiPicker.module.css

@@ -0,0 +1,84 @@
+.root {
+	height: --fn-literal(368px);
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	isolation: isolate;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+}
+
+.search {
+	z-index: 10;
+	min-width: --fn-literal(80px);
+	width: 100%;
+}
+
+.viewport {
+	min-height: 0;
+	flex: 1;
+	overflow: clip;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-surface-radius);
+}
+.viewportInner {
+	position: relative;
+	outline: hidden;
+}
+
+.loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+}
+
+.empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+}
+
+.categoryHeader {
+	position: sticky;
+	top: 0;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-spacing-sm) var(--m-spacing-md);
+	font-weight: semibold;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+}
+
+.row {
+	scroll-margin-block: var(--m-spacing-xs);
+	padding-inline: var(--m-spacing-xs);
+}
+
+.emoji {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.list {
+	user-select: none;
+	padding-block-end: var(--m-spacing-md);
+}
+
+.skinToneButton {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.skinToneSelector {
+	margin-right: auto;
+}

package/dist/components/emojiPicker/EmojiPicker.stories.d.ts

@@ -0,0 +1,25 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { EmojiPicker } from './EmojiPicker.js';
+declare const meta: {
+    title: string;
+    component: (({ onValueChange, onClear, ...props }: import("./EmojiPicker.js").EmojiPickerProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: import("react").FunctionComponent<Omit<import("frimousse").EmojiPickerRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        Search: import("react").FunctionComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+        Viewport: ({ className, ...props }: import("frimousse").EmojiPickerViewportProps) => import("react/jsx-runtime").JSX.Element;
+        List: ({ className, components, }: import("frimousse").EmojiPickerListProps) => import("react/jsx-runtime").JSX.Element;
+        Loading: import("react").FunctionComponent<import("react").ClassAttributes<HTMLSpanElement> & import("react").HTMLAttributes<HTMLSpanElement>>;
+        Empty: import("react").FunctionComponent<import("frimousse").EmojiPickerEmptyProps>;
+        CategoryHeader: (props: import("frimousse").EmojiPickerListCategoryHeaderProps) => import("react/jsx-runtime").JSX.Element;
+        Row: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+        Emoji: import("react").FunctionComponent<Omit<import("frimousse").EmojiPickerListEmojiProps, "color">>;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof EmojiPicker>;
+export declare const Default: Story;

package/dist/components/emojiPicker/EmojiPicker.stories.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmojiPicker } from './EmojiPicker.js';
+const meta = {
+    title: 'Components/EmojiPicker',
+    component: EmojiPicker,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    render(args) {
+        return _jsx(EmojiPicker, Object.assign({}, args));
+    },
+};
+//# sourceMappingURL=EmojiPicker.stories.js.map

package/dist/components/emojiPicker/EmojiPicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.stories.js","sourceRoot":"","sources":["../../../src/components/emojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACkC,CAAC;AAErC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,IAAI;QACV,OAAO,KAAC,WAAW,oBAAK,IAAI,EAAI,CAAC;IAClC,CAAC;CACD,CAAC"}

package/dist/components/errorBoundary/ErrorBoundary.js

@@ -0,0 +1,27 @@
+'use client';
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            error: null,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        // Update state so the next render will show the fallback UI.
+        return { error };
+    }
+    render() {
+        if (this.state.error) {
+            if (typeof this.props.fallback === 'function') {
+                return this.props.fallback({
+                    error: this.state.error,
+                    clearError: () => this.setState({ error: null }),
+                });
+            }
+            return this.props.fallback || null;
+        }
+        return this.props.children;
+    }
+}
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/components/errorBoundary/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../src/components/errorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAE3D,MAAM,OAAO,aAAc,SAAQ,SAQlC;IARD;;QASC,UAAK,GAAG;YACP,KAAK,EAAE,IAAI;SACX,CAAC;IAmBH,CAAC;IAjBA,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,KAAK,EAAE,CAAC;IAClB,CAAC;IAED,MAAM;QACL,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACtB,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBAC/C,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;oBACvB,UAAU,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;iBAChD,CAAC,CAAC;YACJ,CAAC;YACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,CAAC;QACpC,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC5B,CAAC;CACD"}

package/dist/components/errorBoundary/index.js

@@ -0,0 +1,2 @@
+export * from './ErrorBoundary.js';
+//# sourceMappingURL=index.js.map

package/dist/components/errorBoundary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/errorBoundary/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/forms/CheckboxField.js

@@ -0,0 +1,26 @@
+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, 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';
+export function CheckboxField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    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 }))] }));
+}
+//# sourceMappingURL=CheckboxField.js.map

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

@@ -0,0 +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"}

package/dist/components/forms/EmojiField.js

@@ -0,0 +1,38 @@
+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, 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';
+export function EmojiField(_a) {
+    var { name, label, className, required, id: providedId } = _a, rest = __rest(_a, ["name", "label", "className", "required", "id"]);
+    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) => {
+                                tools.setValue(v);
+                                setOpen(false);
+                            }, onClear: required
+                                ? undefined
+                                : () => {
+                                    tools.setValue('');
+                                    setOpen(false);
+                                }, id: id }) })] }), label && (_jsx(HorizontalFieldLabel, { htmlFor: id, children: label }))] }));
+}
+//# sourceMappingURL=EmojiField.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,8 @@
+.triggerIcon {
+	height: 20px;
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+}

package/dist/components/forms/FieldLabel.js

@@ -0,0 +1,5 @@
+import { withClassName } from '../../hooks.js';
+import cls from './FieldLabel.module.css';
+export const FieldLabel = withClassName('label', cls.fieldLabel);
+export const HorizontalFieldLabel = withClassName('label', cls.horizontalFieldLabel);
+//# sourceMappingURL=FieldLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FieldLabel.js","sourceRoot":"","sources":["../../../src/components/forms/FieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,GAAG,MAAM,yBAAyB,CAAC;AAE1C,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CAAC,OAAO,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;AAEjE,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAChD,OAAO,EACP,GAAG,CAAC,oBAAoB,CACxB,CAAC"}

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

@@ -0,0 +1,20 @@
+.fieldLabel {
+	display: inline-flex;
+	flex-direction: column;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	margin-inline-start: var(--m-spacing-md);
+	gap: var(--m-spacing-xs);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: bold;
+}
+
+.horizontalFieldLabel {
+	display: inline-flex;
+	flex-direction: row;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	gap: var(--m-spacing-sm);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	margin-block-start: var(--m-spacing-sm);
+}

package/dist/components/forms/Form.js

@@ -0,0 +1,5 @@
+import { Form as FormikForm } from 'formik';
+import { withClassName } from '../../hooks/withClassName.js';
+import cls from './Form.module.css';
+export const Form = withClassName(FormikForm, cls.form);
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/components/forms/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,GAAG,MAAM,mBAAmB,CAAC;AAEpC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC"}

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

@@ -0,0 +1,6 @@
+.form {
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	gap: var(--m-spacing-md);
+}

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

@@ -0,0 +1,24 @@
+import { FormikConfig, FormikValues } from 'formik';
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+import { TextAreaField } from './TextField.js';
+export interface FormikFormProps<T extends FormikValues = FormikValues> extends FormikConfig<T> {
+    className?: string;
+}
+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;
+    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) & {
+        Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
+    };
+    EmojiField: typeof EmojiField;
+};

package/dist/components/forms/FormikForm.js

@@ -0,0 +1,50 @@
+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 { Formik } from 'formik';
+import { useCallback } from 'react';
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { Form } from './Form.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+import { TextAreaField, TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
+export { FieldArray } from 'formik';
+export function FormikFormRoot(_a) {
+    var { className, children, onSubmit } = _a, props = __rest(_a, ["className", "children", "onSubmit"]);
+    const wrappedOnSubmit = useCallback(async (values, bag) => {
+        try {
+            bag.setSubmitting(true);
+            return await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(values, bag));
+        }
+        finally {
+            bag.setSubmitting(false);
+        }
+    }, [onSubmit]);
+    if (typeof children === 'function') {
+        return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: (formik) => _jsx(Form, { className: className, children: children(formik) }) })));
+    }
+    return (_jsx(Formik, Object.assign({ onSubmit: wrappedOnSubmit }, props, { children: _jsx(Form, { className: className, children: children }) })));
+}
+export const FormikForm = Object.assign(FormikFormRoot, {
+    TextField,
+    TextAreaField,
+    NumberStepperField,
+    SubmitButton,
+    CheckboxField,
+    SwitchField,
+    ToggleGroupField,
+    EmojiField,
+});
+//# sourceMappingURL=FormikForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormikForm.js","sourceRoot":"","sources":["../../../src/components/forms/FormikForm.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,EAA6C,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,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,aAAa,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAOzD,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,MAAM,UAAU,cAAc,CAA8B,EAKlC;QALkC,EAC3D,SAAS,EACT,QAAQ,EACR,QAAQ,OAEiB,EADtB,KAAK,cAJmD,qCAK3D,CADQ;IAER,MAAM,eAAe,GAAG,WAAW,CAClC,KAAK,EAAE,MAAc,EAAE,GAA0B,EAAE,EAAE;QACpD,IAAI,CAAC;YACJ,GAAG,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;YACxB,OAAO,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,EAAE,GAAG,CAAC,CAAA,CAAC;QACtC,CAAC;gBAAS,CAAC;YACV,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC;IACF,CAAC,EACD,CAAC,QAAQ,CAAC,CACV,CAAC;IAEF,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE,CAAC;QACpC,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cAClD,CAAC,MAAM,EAAE,EAAE,CAAC,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,CAAC,MAAM,CAAC,GAAQ,IAC1D,CACT,CAAC;IACH,CAAC;IAED,OAAO,CACN,KAAC,MAAM,kBAAS,QAAQ,EAAE,eAAe,IAAM,KAAK,cACnD,KAAC,IAAI,IAAC,SAAS,EAAE,SAAS,YAAG,QAAQ,GAAQ,IACrC,CACT,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IACvD,SAAS;IACT,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,aAAa;IACb,WAAW;IACX,gBAAgB;IAChB,UAAU;CACV,CAAC,CAAC"}

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

@@ -0,0 +1,31 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { FormikForm } from './FormikForm.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+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;
+        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) & {
+            Item: import("react").FunctionComponent<import("@base-ui/react").Toggle.Props<string> & import("react").RefAttributes<HTMLButtonElement>>;
+        };
+        EmojiField: typeof EmojiField;
+    };
+    argTypes: {};
+    parameters: {
+        controls: {
+            expanded: boolean;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof FormikForm>;
+export declare const Default: Story;

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

@@ -0,0 +1,49 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckboxField } from './CheckboxField.js';
+import { EmojiField } from './EmojiField.js';
+import { FormikForm } from './FormikForm.js';
+import { NumberStepperField } from './NumberStepperField.js';
+import { SubmitButton } from './SubmitButton.js';
+import { SwitchField } from './SwitchField.js';
+import { TextField } from './TextField.js';
+import { ToggleGroupField } from './ToggleGroupField.js';
+const meta = {
+    title: 'Components/Form',
+    component: FormikForm,
+    argTypes: {},
+    parameters: {
+        controls: { expanded: true },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        onSubmit: (values) => {
+            alert(JSON.stringify(values, null, 2));
+        },
+    },
+    render(_a) {
+        var { initialValues: _ } = _a, args = __rest(_a, ["initialValues"]);
+        return (_jsxs(FormikForm, Object.assign({ initialValues: {
+                email: '',
+                password: '',
+                age: 18,
+                tos: false,
+                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" })] })));
+    },
+};
+//# sourceMappingURL=FormikForm.stories.js.map

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

@@ -0,0 +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"}

package/dist/components/forms/NumberStepperField.js

@@ -0,0 +1,29 @@
+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, 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';
+export function NumberStepperField(_a) {
+    var { name, label, className, id: providedId, onChange } = _a, rest = __rest(_a, ["name", "label", "className", "id", "onChange"]);
+    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))] }));
+}
+const FieldRoot = withClassName('div', cls.root);
+//# sourceMappingURL=NumberStepperField.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}

package/dist/components/forms/SubmitButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useFormikContext } from 'formik';
+import { Button } from '../button/Button.js';
+export function SubmitButton(props) {
+    const { isSubmitting, isValid } = useFormikContext();
+    return (_jsx(Button, Object.assign({ loading: isSubmitting, disabled: !isValid, emphasis: "primary" }, props, { type: "submit" })));
+}
+//# sourceMappingURL=SubmitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.js","sourceRoot":"","sources":["../../../src/components/forms/SubmitButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAC;AAE1D,MAAM,UAAU,YAAY,CAAC,KAAkB;IAC9C,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,OAAO,CACN,KAAC,MAAM,kBACN,OAAO,EAAE,YAAY,EACrB,QAAQ,EAAE,CAAC,OAAO,EAClB,QAAQ,EAAC,SAAS,IACd,KAAK,IACT,IAAI,EAAC,QAAQ,IACZ,CACF,CAAC;AACH,CAAC"}