@g4rcez/components 5.0.2 → 5.0.3

package/dist/components/form/autocomplete.js

@@ -1,3 +1,345 @@
 "use client";
-import { t as e } from "../../autocomplete-D3VOTihi.js";
-export { e as Autocomplete };
+import { d as e, i as t, n, o as r, p as i, t as a } from "../../dom-Bn4wY_Zx.js";
+import { t as o } from "../../CaretDown.es-BXl0Ixp3.js";
+import { n as ee } from "../../input-field-ffx1MbHo.js";
+import { t as te } from "../../use-translations-BE4PuhLm.js";
+import { A as ne, D as re, S as ie, T as ae, b as oe, d as se, f as ce, k as le, n as ue, o as de, v as fe } from "../../floating-ui.react-CwXtBJ_y.js";
+import { o as s } from "../../fns-KbsWlOTG.js";
+import { t as c } from "../../proxy-fP2NxmhM.js";
+import { t as l } from "../../AnimatePresence-j36AYeOQ.js";
+import { t as pe } from "../../dist-BHFtgf5x.js";
+import { t as me } from "../../use-remove-scroll-pAgC09Sq.js";
+import { t as he } from "../../fzf-CPGDDCoU.js";
+import { Fragment as u, forwardRef as d, useEffect as f, useId as ge, useMemo as p, useRef as m, useState as h } from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { flushSync as v } from "react-dom";
+//#region src/components/form/autocomplete.tsx
+var _e = (e) => /* @__PURE__ */ g(u, { children: e.children }), ve = {
+	duration: 200,
+	open: {
+		transform: "scaleY(1)",
+		opacity: 1
+	},
+	close: {
+		transform: "scaleY(0)",
+		opacity: 0
+	},
+	initial: {
+		transform: "scaleY(0)",
+		opacity: .2
+	}
+}, ye = {
+	List: d(function({ context: e, ...t }, n) {
+		return /* @__PURE__ */ g(c.div, {
+			...t,
+			ref: n,
+			role: "select",
+			id: e?.listboxId,
+			className: "max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius",
+			children: /* @__PURE__ */ g(l, { children: t.children })
+		});
+	}),
+	Item: d(function({ item: e, context: t, ...n }, r) {
+		return /* @__PURE__ */ g(c.div, {
+			...n,
+			ref: r,
+			role: "presentation",
+			className: "first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius"
+		});
+	})
+}, be = [], y = 40, b = d(({ left: l, error: u, right: d, loading: b, options: x, container: xe, rightLabel: Se, interactive: Ce, emptyMessage: we, optionalText: Te, labelClassName: Ee, feedback: De = null, hideLeft: Oe = !1, required: S = !1, dynamicOption: C = !1, ...w }, ke) => {
+	let Ae = m(null), T = m(null), E = m(null), D = w.value ?? w.defaultValue ?? "", O = te(), je = ge(), [k, A] = h(!1), [j, M] = h(""), [N, P] = h(D), [Me, F] = h(() => x.find((e) => e.value === D)?.label ?? D), [I, L] = h(null), R = m(be), [, Ne] = h(0), Pe = me(k, "block-only"), z = p(() => C && j !== "" ? [{
+		value: j,
+		label: j,
+		"data-dynamic": "true"
+	}, ...x] : x, [
+		C,
+		j,
+		x
+	]), B = () => v(() => A(!0)), V = p(() => j ? he(z, "value", [{
+		key: "value",
+		value: j
+	}, {
+		key: "label",
+		value: j
+	}]) : z, [z, j]), [H, U] = h(() => Math.min(320, y * x.length)), W = () => {
+		A(!1), U(0);
+	}, G = p(() => V.filter((e) => e.hidden !== !0), [V]), Fe = p(() => C ? void 0 : `^(${x.map((e) => `${s(e.value)}${e.label ? "|" + s(e.label) : ""}`).join("|")})$`, [C, x]), { x: Ie, y: Le, strategy: Re, refs: K, context: q, placement: J } = ce({
+		open: k,
+		transform: !0,
+		onOpenChange: A,
+		placement: "bottom-start",
+		whileElementsMounted: ne,
+		middleware: [
+			re(4),
+			ae({
+				allowedPlacements: ["top-start", "bottom-start"],
+				alignment: "start"
+			}),
+			le({
+				padding: 10,
+				elementContext: "reference",
+				apply(e) {
+					let n = t(K.reference.current, window.innerHeight), r = `${T.current?.getBoundingClientRect().width || n}px`;
+					Object.assign(e.elements.floating.style, {
+						width: r,
+						maxWidth: r
+					});
+				}
+			})
+		]
+	}), ze = ie(q, ve), { getReferenceProps: Be, getFloatingProps: Ve, getItemProps: He } = fe([se(q), oe(q, {
+		cols: 0,
+		listRef: R,
+		loop: !0,
+		virtual: !0,
+		allowEscape: !0,
+		activeIndex: I,
+		selectedIndex: I,
+		focusItemOnOpen: "auto",
+		openOnArrowKeyDown: !0,
+		scrollItemIntoView: !0
+	})]);
+	f(() => {
+		if (w.value) {
+			let e = x.find((e) => e.value === w.value);
+			e && (F(e.label ?? e.value), P(w.value));
+		}
+	}, [w.value, x]), f(() => {
+		let e = K.reference.current;
+		if (e) return r(e);
+	}, [K.reference]), f(() => {
+		if (!k) return;
+		let e = requestAnimationFrame(() => Ne((e) => e + 1));
+		return () => cancelAnimationFrame(e);
+	}, [k]), f(() => {
+		if (!k) {
+			U(0);
+			return;
+		}
+		let e = setTimeout(() => U(Math.min(320, G.length * y)), 100);
+		return () => clearTimeout(e);
+	}, [k, G.length]);
+	let Y = (t, n) => {
+		P(t.value);
+		let r = K.reference.current;
+		if (!r) return;
+		r?.setAttribute("data-value", t.value), r.value = t.value;
+		let i = new Event("change", {
+			bubbles: !1,
+			cancelable: !0
+		});
+		r.dispatchEvent(i), w.onChange && w.onChange(e(r)), F(t.label ?? ""), W(), M(""), L(n), r.focus();
+	}, Ue = (e) => {
+		let t = e.target.value;
+		return M(t), !k && t === "" ? A(!0) : (e.target.name = w.name || "", t ? A(!0) : w.onChange?.(e));
+	}, We = () => {
+		B(), M(""), K.reference.current?.focus();
+	}, Ge = () => {
+		L((e) => e === null ? 0 : e), B(), M("");
+	}, Ke = () => {
+		K.reference.current?.setAttribute("data-value", ""), M(""), P(""), F(""), n(K.reference.current), W();
+	}, X = w.id || w.name || je, Z = `${X}-shadow`, Q = `${Z}-listbox`, $ = G.length === 0, qe = J === "top" || J === "top-start", Je = k && I !== null && G[I] ? `${Z}-option-${I}` : void 0;
+	return /* @__PURE__ */ _(ee, {
+		...w,
+		left: l,
+		error: u,
+		id: Z,
+		form: w.form,
+		loading: b,
+		name: w.name,
+		hideLeft: Oe,
+		required: S,
+		title: w.title,
+		container: xe,
+		rightLabel: Se,
+		interactive: Ce,
+		optionalText: Te,
+		componentName: "autocomplete",
+		labelClassName: Ee,
+		placeholder: w.placeholder,
+		ref: T,
+		feedback: k && qe ? w.title : De,
+		right: /* @__PURE__ */ _("span", {
+			className: "flex items-center gap-0.5",
+			children: [
+				d,
+				/* @__PURE__ */ _("button", {
+					type: "button",
+					className: "p-input-gap transition-colors link:text-primary md:p-1",
+					onClick: We,
+					children: [/* @__PURE__ */ g(o, { size: 20 }), /* @__PURE__ */ g("span", {
+						className: "sr-only",
+						children: O.inputCaretDown
+					})]
+				}),
+				N ? /* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: Ke,
+					"aria-label": O.inputCloseValue,
+					className: "p-input-gap transition-colors link:text-danger md:p-1",
+					children: /* @__PURE__ */ g("svg", {
+						width: "15",
+						height: "15",
+						viewBox: "0 0 15 15",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						children: /* @__PURE__ */ g("path", {
+							d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z",
+							fill: "currentColor",
+							fillRule: "evenodd",
+							clipRule: "evenodd"
+						})
+					})
+				}) : null
+			]
+		}),
+		children: [
+			/* @__PURE__ */ g("input", {
+				"data-shadow": "true",
+				...Be({
+					...w,
+					onFocus: Ge,
+					pattern: Fe,
+					onChange: Ue,
+					id: Z,
+					name: Z,
+					ref: K.setReference,
+					onClick: (e) => e.currentTarget.focus(),
+					onKeyDown(e) {
+						if (w.onKeyDown?.(e), !e.defaultPrevented) {
+							if (e.key === "Escape") return e.preventDefault(), W();
+							if (k) {
+								if (e.key === "ArrowDown") {
+									e.preventDefault();
+									let t = i.number(I) ? I + 1 : 0;
+									return t > G.length - 1 && (t = 0), E.current?.scrollIntoView({ index: t }), L(t);
+								}
+								if (e.key === "ArrowUp") {
+									e.preventDefault();
+									let t = i.number(I) ? I - 1 : G.length - 1;
+									return t < 0 && (t = G.length - 1), E.current?.scrollIntoView({ index: t }), L(t);
+								}
+								if (e.key === "Enter") {
+									if (I !== null && G[I]) return e.preventDefault(), Y(G[I], I);
+									if (G.length === 1) return e.preventDefault(), Y(G[0], 0);
+								}
+							}
+						}
+					}
+				}),
+				"data-value": N,
+				"data-error": !!u,
+				"data-name": X,
+				"data-target": X,
+				required: S,
+				value: k ? j : x.length === 0 ? "" : Me || N,
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-expanded": k,
+				"aria-haspopup": "listbox",
+				"aria-controls": Q,
+				"aria-activedescendant": Je,
+				"aria-labelledby": `${Z}-label`,
+				autoComplete: "off",
+				className: a("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-input-text group-focus-within:border-primary group-hover:border-primary", w.className)
+			}),
+			/* @__PURE__ */ g("input", {
+				id: X,
+				name: X,
+				type: "hidden",
+				"data-origin": X,
+				ref: ke,
+				required: S,
+				defaultValue: w.value || N || void 0
+			}),
+			/* @__PURE__ */ g(de, {
+				preserveTabOrder: !0,
+				children: k ? /* @__PURE__ */ g(ue, {
+					modal: !0,
+					guards: !0,
+					returnFocus: !1,
+					context: q,
+					initialFocus: -1,
+					visuallyHiddenDismiss: !0,
+					children: /* @__PURE__ */ _(c.div, {
+						...Ve({
+							ref: K.setFloating,
+							style: {
+								...ze.styles,
+								left: Ie,
+								top: Le ?? 0,
+								position: Re,
+								height: "auto"
+							}
+						}),
+						initial: !1,
+						"data-floating": "true",
+						animate: { height: $ ? "auto" : H },
+						onAnimationComplete: () => {
+							if (!k) {
+								U(0);
+								return;
+							}
+							let e = ((K.floating.current?.querySelector("li"))?.getBoundingClientRect().height ?? y) * G.length;
+							v(() => U(Math.min(320, e + 2)));
+						},
+						className: a("shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out", qe ? "origin-[bottom_center]" : "origin-[top_center]"),
+						children: [$ ? /* @__PURE__ */ g("div", {
+							className: "w-full border-b border-tooltip-border",
+							children: /* @__PURE__ */ g("span", {
+								className: "flex w-full justify-between p-menu-item-p text-left text-disabled",
+								children: we || O.autocompleteEmpty
+							})
+						}) : null, /* @__PURE__ */ g(pe, {
+							overscan: 40,
+							ref: E,
+							hidden: $,
+							data: G,
+							context: { listboxId: Q },
+							style: { height: H },
+							initialItemCount: G.length,
+							defaultItemHeight: y,
+							components: ye,
+							scrollerRef: (e) => {
+								Ae.current = e, Pe.current = e;
+							},
+							className: "border-floating max-h-full overscroll-contain rounded-dropdown-radius bg-floating-background p-0 text-foreground",
+							itemContent: (e, t) => {
+								let n = t.Render ?? _e, r = N === t.value || N === t.label, i = I === e, o = t.label ?? t.value;
+								return /* @__PURE__ */ g("div", {
+									id: `${Z}-option-${e}`,
+									"data-value": t.value,
+									...He({
+										ref: (t) => {
+											R.current[e] = t;
+										},
+										role: "option",
+										"aria-selected": r,
+										"aria-disabled": t.disabled,
+										tabIndex: -1,
+										onClick: () => {
+											t.disabled || Y(t, e);
+										},
+										className: a("min-h-10 w-full cursor-pointer p-menu-item-p text-left hover:bg-floating-hover", r ? "bg-primary-hover text-primary-foreground" : "", i ? "bg-floating-hover text-floating-foreground" : "")
+									}),
+									children: /* @__PURE__ */ g(n, {
+										...t,
+										ref: void 0,
+										label: t.label,
+										value: t.value,
+										children: o
+									})
+								});
+							}
+						})]
+					})
+				}) : null
+			})
+		]
+	});
+});
+//#endregion
+export { b as Autocomplete };
+
+//# sourceMappingURL=autocomplete.js.map

package/dist/components/form/autocomplete.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../../src/components/form/autocomplete.tsx"],"sourcesContent":["\"use client\";\nimport {\n    autoPlacement,\n    autoUpdate,\n    FloatingFocusManager,\n    FloatingPortal,\n    offset,\n    size,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useListNavigation,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport { CaretDownIcon } from \"@phosphor-icons/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, { forwardRef, Fragment, type PropsWithChildren, Ref, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { type ContextProp, type ItemProps, type ListProps, Virtuoso, type VirtuosoHandle } from \"react-virtuoso\";\nimport { Is } from \"sidekicker\";\nimport { useRemoveScroll } from \"../../hooks/use-remove-scroll\";\nimport { useTranslations } from \"../../hooks/use-translations\";\nimport { css, dispatchInput, getRemainingSize, initializeInputDataset, synthesizeChangeEvent } from \"../../lib/dom\";\nimport { safeRegex } from \"../../lib/fns\";\nimport { fzf } from \"../../lib/fzf\";\nimport { Label } from \"../../types\";\nimport { InputField, InputFieldProps } from \"./input-field\";\nimport { type OptionProps } from \"./select\";\n\nexport type AutocompleteItemProps = OptionProps & {\n    Render?: React.FC<OptionProps>;\n};\n\nexport type AutocompleteProps = Omit<InputFieldProps<\"input\">, \"value\"> & {\n    title?: string;\n    value?: string;\n    emptyMessage?: Label;\n    dynamicOption?: boolean;\n    options: AutocompleteItemProps[];\n};\n\nconst Frag = (props: PropsWithChildren) => <Fragment>{props.children}</Fragment>;\n\nconst transitionStyles = {\n    duration: 200,\n    open: { transform: \"scaleY(1)\", opacity: 1 },\n    close: { transform: \"scaleY(0)\", opacity: 0 },\n    initial: { transform: \"scaleY(0)\", opacity: 0.2 },\n} as const;\n\nconst List = forwardRef<HTMLDivElement, ListProps & ContextProp<{ listboxId?: string }>>(function VirtualList({ context, ...props }, ref) {\n    return (\n        <motion.div\n            {...props}\n            ref={ref}\n            role=\"select\"\n            id={context?.listboxId}\n            className=\"max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius\"\n        >\n            <AnimatePresence>{props.children}</AnimatePresence>\n        </motion.div>\n    );\n});\n\nconst Item = forwardRef<HTMLDivElement, ItemProps<AutocompleteItemProps> & ContextProp<unknown>>(function VirtualItem(\n    { item: _item, context: _context, ...props },\n    ref\n) {\n    return <motion.div {...props} ref={ref} role=\"presentation\" className=\"first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius\" />;\n});\n\nconst components = { List, Item };\n\nconst EMPTY_NODES: Array<HTMLElement | null> = [];\n\nconst MIN_SIZE = 40;\n\nexport const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(\n    (\n        {\n            left,\n            error,\n            right,\n            loading,\n            options,\n            container,\n            rightLabel,\n            interactive,\n            emptyMessage,\n            optionalText,\n            labelClassName,\n            feedback = null,\n            hideLeft = false,\n            required = false,\n            dynamicOption = false,\n            ...props\n        }: AutocompleteProps,\n        externalRef\n    ) => {\n        const scroller = useRef<HTMLElement | null>(null);\n        const fieldset = useRef<HTMLFieldSetElement>(null);\n        const virtuoso = useRef<VirtuosoHandle | null>(null);\n        const defaults = props.value ?? props.defaultValue ?? \"\";\n        const translation = useTranslations();\n        const generatedId = useId();\n        const [open, setOpen] = useState(false);\n        const [shadow, setShadow] = useState(\"\");\n        const [value, setValue] = useState(defaults);\n        const [label, setLabel] = useState(() => options.find((x) => x.value === defaults)?.label ?? defaults);\n        const [index, setIndex] = useState<number | null>(null);\n        const listRef = useRef<Array<HTMLElement | null>>(EMPTY_NODES);\n        const [, tick] = useState(0);\n        const removeScrollRef = useRemoveScroll(open, \"block-only\");\n\n        const innerOptions = useMemo<AutocompleteItemProps[]>(\n            () => (dynamicOption && shadow !== \"\" ? [{ value: shadow, label: shadow, \"data-dynamic\": \"true\" }, ...options] : options),\n            [dynamicOption, shadow, options]\n        );\n\n        const openDropdown = () => flushSync(() => setOpen(true));\n\n        const list = useMemo(\n            () =>\n                shadow\n                    ? fzf(innerOptions, \"value\", [\n                          { key: \"value\", value: shadow },\n                          { key: \"label\", value: shadow },\n                      ])\n                    : innerOptions,\n            [innerOptions, shadow]\n        );\n\n        const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));\n\n        const setClosed = () => {\n            setOpen(false);\n            setH(0);\n        };\n\n        const displayList = useMemo(() => list.filter((x) => x.hidden !== true), [list]);\n\n        const pattern = useMemo(\n            () =>\n                dynamicOption ? undefined : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? \"|\" + safeRegex(x.label) : \"\"}`).join(\"|\")})$`,\n            [dynamicOption, options]\n        );\n\n        const { x, y, strategy, refs, context, placement } = useFloating<HTMLInputElement>({\n            open,\n            transform: true,\n            onOpenChange: setOpen,\n            placement: \"bottom-start\",\n            whileElementsMounted: autoUpdate,\n            middleware: [\n                offset(4),\n                autoPlacement({\n                    allowedPlacements: [\"top-start\", \"bottom-start\"],\n                    alignment: \"start\",\n                }),\n                size({\n                    padding: 10,\n                    elementContext: \"reference\",\n                    apply(args) {\n                        const DEFAULT_SIZE = getRemainingSize(refs.reference!.current as HTMLElement, window.innerHeight);\n                        const mw = `${fieldset.current?.getBoundingClientRect().width || DEFAULT_SIZE}px`;\n                        Object.assign(args.elements.floating.style, {\n                            width: mw,\n                            maxWidth: mw,\n                        });\n                    },\n                }),\n            ],\n        });\n        const transitions = useTransitionStyles(context, transitionStyles);\n        const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n            useDismiss(context),\n            useListNavigation(context, {\n                cols: 0,\n                listRef,\n                loop: true,\n                virtual: true,\n                allowEscape: true,\n                activeIndex: index,\n                selectedIndex: index,\n                focusItemOnOpen: \"auto\",\n                openOnArrowKeyDown: true,\n                scrollItemIntoView: true,\n            }),\n        ]);\n\n        useEffect(() => {\n            if (props.value) {\n                const item = options.find((x) => x.value === props.value);\n                if (item) {\n                    setLabel(item.label ?? item.value);\n                    setValue(props.value);\n                }\n            }\n        }, [props.value, options]);\n\n        useEffect(() => {\n            const input = refs.reference.current as HTMLInputElement;\n            if (!input) return;\n            return initializeInputDataset(input);\n        }, [refs.reference]);\n\n        useEffect(() => {\n            if (!open) return;\n            const id = requestAnimationFrame(() => tick((n) => n + 1));\n            return () => cancelAnimationFrame(id);\n        }, [open]);\n\n        useEffect(() => {\n            if (!open) {\n                setH(0);\n                return;\n            }\n            const id = setTimeout(() => setH(Math.min(320, displayList.length * MIN_SIZE)), 100);\n            return () => clearTimeout(id);\n        }, [open, displayList.length]);\n\n        const onSelect = (opt: AutocompleteItemProps, i: number) => {\n            setValue(opt.value);\n            const input = refs.reference.current as HTMLInputElement;\n            if (!input) return;\n            input?.setAttribute(\"data-value\", opt.value);\n            input.value = opt.value;\n            const event = new Event(\"change\", { bubbles: false, cancelable: true });\n            input.dispatchEvent(event);\n            if (props.onChange) props.onChange(synthesizeChangeEvent(input));\n            setLabel(opt.label ?? \"\");\n            setClosed();\n            setShadow(\"\");\n            setIndex(i);\n            input.focus();\n        };\n\n        const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const value = event.target.value;\n            setShadow(value);\n            if (!open && value === \"\") return setOpen(true);\n            event.target.name = props.name || \"\";\n            return value ? setOpen(true) : props.onChange?.(event);\n        };\n\n        const onCaretDownClick = () => {\n            openDropdown();\n            setShadow(\"\");\n            (refs.reference.current as HTMLInputElement)?.focus();\n        };\n\n        const onFocus = () => {\n            setIndex((prev) => (prev === null ? 0 : prev));\n            openDropdown();\n            setShadow(\"\");\n        };\n\n        const onClose = () => {\n            (refs.reference.current as HTMLInputElement)?.setAttribute(\"data-value\", \"\");\n            setShadow(\"\");\n            setValue(\"\");\n            setLabel(\"\");\n            dispatchInput(refs.reference.current as HTMLInputElement);\n            setClosed();\n        };\n\n        const id = props.id || props.name || generatedId;\n\n        const shadowId = `${id}-shadow`;\n        const listboxId = `${shadowId}-listbox`;\n\n        const isEmpty = displayList.length === 0;\n\n        const isTopPlacement = placement === \"top\" || placement === \"top-start\";\n\n        const activeOptionId = open && index !== null && displayList[index] ? `${shadowId}-option-${index}` : undefined;\n\n        return (\n            <InputField\n                {...props}\n                left={left}\n                error={error}\n                id={shadowId}\n                form={props.form}\n                loading={loading}\n                name={props.name}\n                hideLeft={hideLeft}\n                required={required}\n                title={props.title}\n                container={container}\n                rightLabel={rightLabel}\n                interactive={interactive}\n                optionalText={optionalText}\n                componentName=\"autocomplete\"\n                labelClassName={labelClassName}\n                placeholder={props.placeholder}\n                ref={fieldset as unknown as Ref<HTMLInputElement>}\n                feedback={open && isTopPlacement ? props.title : feedback}\n                right={\n                    <span className=\"flex items-center gap-0.5\">\n                        {right}\n                        <button type=\"button\" className=\"p-input-gap transition-colors link:text-primary md:p-1\" onClick={onCaretDownClick}>\n                            <CaretDownIcon size={20} />\n                            <span className=\"sr-only\">{translation.inputCaretDown}</span>\n                        </button>\n                        {value ? (\n                            <button\n                                type=\"button\"\n                                onClick={onClose}\n                                aria-label={translation.inputCloseValue}\n                                className=\"p-input-gap transition-colors link:text-danger md:p-1\"\n                            >\n                                <svg width=\"15\" height=\"15\" viewBox=\"0 0 15 15\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                                    <path\n                                        d=\"M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z\"\n                                        fill=\"currentColor\"\n                                        fillRule=\"evenodd\"\n                                        clipRule=\"evenodd\"\n                                    />\n                                </svg>\n                            </button>\n                        ) : null}\n                    </span>\n                }\n            >\n                <input\n                    data-shadow=\"true\"\n                    {...getReferenceProps({\n                        ...props,\n                        onFocus,\n                        pattern,\n                        onChange,\n                        id: shadowId,\n                        name: shadowId,\n                        ref: refs.setReference,\n                        onClick: (e: React.MouseEvent<HTMLInputElement>) => e.currentTarget.focus(),\n                        onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n                            props.onKeyDown?.(event);\n                            if (event.defaultPrevented) return;\n                            if (event.key === \"Escape\") {\n                                event.preventDefault();\n                                return setClosed();\n                            }\n                            if (!open) return;\n                            if (event.key === \"ArrowDown\") {\n                                event.preventDefault();\n                                let next = Is.number(index) ? index + 1 : 0;\n                                if (next > displayList.length - 1) next = 0;\n                                virtuoso.current?.scrollIntoView({ index: next });\n                                return setIndex(next);\n                            }\n                            if (event.key === \"ArrowUp\") {\n                                event.preventDefault();\n                                let next = Is.number(index) ? index! - 1 : displayList.length - 1;\n                                if (next < 0) next = displayList.length - 1;\n                                virtuoso.current?.scrollIntoView({ index: next });\n                                return setIndex(next);\n                            }\n                            if (event.key === \"Enter\") {\n                                if (index !== null && displayList[index]) {\n                                    event.preventDefault();\n                                    return onSelect(displayList[index], index);\n                                }\n                                if (displayList.length === 1) {\n                                    event.preventDefault();\n                                    return onSelect(displayList[0], 0);\n                                }\n                            }\n                        },\n                    } as React.HTMLProps<HTMLInputElement>)}\n                    data-value={value}\n                    data-error={!!error}\n                    data-name={id}\n                    data-target={id}\n                    required={required}\n                    value={open ? shadow : options.length === 0 ? \"\" : label || value}\n                    role=\"combobox\"\n                    aria-autocomplete=\"list\"\n                    aria-expanded={open}\n                    aria-haspopup=\"listbox\"\n                    aria-controls={listboxId}\n                    aria-activedescendant={activeOptionId}\n                    aria-labelledby={`${shadowId}-label`}\n                    autoComplete=\"off\"\n                    className={css(\n                        \"input placeholder-input-mask group h-input-height w-full flex-1\",\n                        \"rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground\",\n                        \"outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary\",\n                        \"group-error:text-danger group-error:placeholder-input-mask-error\",\n                        \"text-input-text group-focus-within:border-primary group-hover:border-primary\",\n                        props.className\n                    )}\n                />\n                <input\n                    id={id}\n                    name={id}\n                    type=\"hidden\"\n                    data-origin={id}\n                    ref={externalRef}\n                    required={required}\n                    defaultValue={props.value || value || undefined}\n                />\n                <FloatingPortal preserveTabOrder>\n                    {open ? (\n                        <FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>\n                            <motion.div\n                                {...getFloatingProps({\n                                    ref: refs.setFloating,\n                                    style: {\n                                        ...transitions.styles,\n                                        left: x,\n                                        top: y ?? 0,\n                                        position: strategy,\n                                        height: \"auto\",\n                                    },\n                                })}\n                                initial={false}\n                                data-floating=\"true\"\n                                animate={{ height: isEmpty ? \"auto\" : h }}\n                                onAnimationComplete={() => {\n                                    if (!open) {\n                                        setH(0);\n                                        return;\n                                    }\n                                    const li = refs.floating.current?.querySelector(\"li\");\n                                    const sum = (li?.getBoundingClientRect().height ?? MIN_SIZE) * displayList.length;\n                                    flushSync(() => setH(Math.min(320, sum + 2)));\n                                }}\n                                className={css(\n                                    \"shadow-floating isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-dropdown-radius border border-floating-border bg-floating-background p-0 text-foreground ease-in-out\",\n                                    isTopPlacement ? \"origin-[bottom_center]\" : \"origin-[top_center]\"\n                                )}\n                            >\n                                {isEmpty ? (\n                                    <div className=\"w-full border-b border-tooltip-border\">\n                                        <span className=\"flex w-full justify-between p-menu-item-p text-left text-disabled\">\n                                            {emptyMessage || translation.autocompleteEmpty}\n                                        </span>\n                                    </div>\n                                ) : null}\n                                <Virtuoso\n                                    overscan={40}\n                                    ref={virtuoso}\n                                    hidden={isEmpty}\n                                    data={displayList}\n                                    context={{ listboxId }}\n                                    style={{ height: h }}\n                                    initialItemCount={displayList.length}\n                                    defaultItemHeight={MIN_SIZE}\n                                    components={components as never}\n                                    scrollerRef={(e) => {\n                                        scroller.current = e as HTMLElement;\n                                        removeScrollRef.current = e as HTMLElement;\n                                    }}\n                                    className=\"border-floating max-h-full overscroll-contain rounded-dropdown-radius bg-floating-background p-0 text-foreground\"\n                                    itemContent={(i, option) => {\n                                        const Label = option.Render ?? Frag;\n                                        const active = value === option.value || value === option.label;\n                                        const selected = index === i;\n                                        const children = option.label ?? option.value;\n                                        return (\n                                            <div\n                                                id={`${shadowId}-option-${i}`}\n                                                data-value={option.value}\n                                                {...getItemProps({\n                                                    ref: (node: HTMLElement | null) => {\n                                                        listRef.current[i] = node;\n                                                    },\n                                                    role: \"option\",\n                                                    \"aria-selected\": active,\n                                                    \"aria-disabled\": option.disabled,\n                                                    tabIndex: -1,\n                                                    onClick: () => {\n                                                        if (!option.disabled) onSelect(option, i);\n                                                    },\n                                                    className: css(\n                                                        \"min-h-10 w-full cursor-pointer p-menu-item-p text-left hover:bg-floating-hover\",\n                                                        active ? \"bg-primary-hover text-primary-foreground\" : \"\",\n                                                        selected ? \"bg-floating-hover text-floating-foreground\" : \"\"\n                                                    ),\n                                                })}\n                                            >\n                                                <Label {...option} ref={undefined} label={option.label} value={option.value}>\n                                                    {children}\n                                                </Label>\n                                            </div>\n                                        );\n                                    }}\n                                />\n                            </motion.div>\n                        </FloatingFocusManager>\n                    ) : null}\n                </FloatingPortal>\n            </InputField>\n        );\n    }\n);\n"],"mappings":"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"}

package/dist/components/form/autocomplete.jsx

@@ -1,8 +1,8 @@
 "use client";
-import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useRole, useTransitionStyles, } from "@floating-ui/react";
+import { autoPlacement, autoUpdate, FloatingFocusManager, FloatingPortal, offset, size, useDismiss, useFloating, useInteractions, useListNavigation, useTransitionStyles, } from "@floating-ui/react";
 import { CaretDownIcon } from "@phosphor-icons/react";
 import { AnimatePresence, motion } from "motion/react";
-import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
+import React, { forwardRef, Fragment, useEffect, useId, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
 import { Is } from "sidekicker";
@@ -19,13 +19,13 @@ const transitionStyles = {
     close: { transform: "scaleY(0)", opacity: 0 },
     initial: { transform: "scaleY(0)", opacity: 0.2 },
 };
-const List = forwardRef(function VirtualList({ context: _context, ...props }, ref) {
-    return (<motion.ul {...props} ref={ref} className="max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius">
+const List = forwardRef(function VirtualList({ context, ...props }, ref) {
+    return (<motion.div {...props} ref={ref} role="select" id={context?.listboxId} className="max-h-dropdown-max-h w-full overscroll-contain rounded-dropdown-radius">
             <AnimatePresence>{props.children}</AnimatePresence>
-        </motion.ul>);
+        </motion.div>);
 });
 const Item = forwardRef(function VirtualItem({ item: _item, context: _context, ...props }, ref) {
-    return <motion.li {...props} ref={ref} className="first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius"/>;
+    return <motion.div {...props} ref={ref} role="presentation" className="first:rounded-t-dropdown-radius last:rounded-t-dropdown-radius"/>;
 });
 const components = { List, Item };
 const EMPTY_NODES = [];
@@ -36,6 +36,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const virtuoso = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
+    const generatedId = useId();
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
     const [value, setValue] = useState(defaults);
@@ -87,7 +88,6 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     });
     const transitions = useTransitionStyles(context, transitionStyles);
     const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([
-        useRole(context, { role: "listbox" }),
         useDismiss(context),
         useListNavigation(context, {
             cols: 0,
@@ -146,6 +146,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         setClosed();
         setShadow("");
         setIndex(i);
+        input.focus();
     };
     const onChange = (event) => {
         const value = event.target.value;
@@ -173,10 +174,12 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         dispatchInput(refs.reference.current);
         setClosed();
     };
-    const id = props.id || props.name;
+    const id = props.id || props.name || generatedId;
     const shadowId = `${id}-shadow`;
+    const listboxId = `${shadowId}-listbox`;
     const isEmpty = displayList.length === 0;
     const isTopPlacement = placement === "top" || placement === "top-start";
+    const activeOptionId = open && index !== null && displayList[index] ? `${shadowId}-option-${index}` : undefined;
     return (<InputField {...props} left={left} error={error} id={shadowId} form={props.form} loading={loading} name={props.name} hideLeft={hideLeft} required={required} title={props.title} container={container} rightLabel={rightLabel} interactive={interactive} optionalText={optionalText} componentName="autocomplete" labelClassName={labelClassName} placeholder={props.placeholder} ref={fieldset} feedback={open && isTopPlacement ? props.title : feedback} right={<span className="flex items-center gap-0.5">
                         {right}
                         <button type="button" className="p-input-gap transition-colors link:text-primary md:p-1" onClick={onCaretDownClick}>
@@ -199,13 +202,17 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         ref: refs.setReference,
         onClick: (e) => e.currentTarget.focus(),
         onKeyDown(event) {
+            props.onKeyDown?.(event);
+            if (event.defaultPrevented)
+                return;
             if (event.key === "Escape") {
-                event.currentTarget.blur();
+                event.preventDefault();
                 return setClosed();
             }
             if (!open)
                 return;
             if (event.key === "ArrowDown") {
+                event.preventDefault();
                 let next = Is.number(index) ? index + 1 : 0;
                 if (next > displayList.length - 1)
                     next = 0;
@@ -213,6 +220,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 return setIndex(next);
             }
             if (event.key === "ArrowUp") {
+                event.preventDefault();
                 let next = Is.number(index) ? index - 1 : displayList.length - 1;
                 if (next < 0)
                     next = displayList.length - 1;
@@ -230,7 +238,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 }
             }
         },
-    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} aria-autocomplete="list" autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-input-text group-focus-within:border-primary group-hover:border-primary", props.className)}/>
+    })} data-value={value} data-error={!!error} data-name={id} data-target={id} required={required} value={open ? shadow : options.length === 0 ? "" : label || value} role="combobox" aria-autocomplete="list" aria-expanded={open} aria-haspopup="listbox" aria-controls={listboxId} aria-activedescendant={activeOptionId} aria-labelledby={`${shadowId}-label`} autoComplete="off" className={css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-input-radius bg-transparent px-input-padding-x py-input-padding-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "text-input-text group-focus-within:border-primary group-hover:border-primary", props.className)}/>
                 <input id={id} name={id} type="hidden" data-origin={id} ref={externalRef} required={required} defaultValue={props.value || value || undefined}/>
                 <FloatingPortal preserveTabOrder>
                     {open ? (<FloatingFocusManager modal guards returnFocus={false} context={context} initialFocus={-1} visuallyHiddenDismiss>
@@ -257,7 +265,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                                             {emptyMessage || translation.autocompleteEmpty}
                                         </span>
                                     </div>) : null}
-                                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} style={{ height: h }} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => {
+                                <Virtuoso overscan={40} ref={virtuoso} hidden={isEmpty} data={displayList} context={{ listboxId }} style={{ height: h }} initialItemCount={displayList.length} defaultItemHeight={MIN_SIZE} components={components} scrollerRef={(e) => {
                 scroller.current = e;
                 removeScrollRef.current = e;
             }} className="border-floating max-h-full overscroll-contain rounded-dropdown-radius bg-floating-background p-0 text-foreground" itemContent={(i, option) => {
@@ -265,23 +273,24 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                 const active = value === option.value || value === option.label;
                 const selected = index === i;
                 const children = option.label ?? option.value;
-                return (<button data-value={option.value} {...getItemProps({
+                return (<div id={`${shadowId}-option-${i}`} data-value={option.value} {...getItemProps({
                     ref: (node) => {
                         listRef.current[i] = node;
                     },
                     role: "option",
-                    type: "button",
-                    "aria-checked": active,
-                    "aria-current": active,
                     "aria-selected": active,
                     "aria-disabled": option.disabled,
-                    onClick: () => onSelect(option, i),
-                    className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-menu-item-p text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                    tabIndex: -1,
+                    onClick: () => {
+                        if (!option.disabled)
+                            onSelect(option, i);
+                    },
+                    className: css("min-h-10 w-full cursor-pointer p-menu-item-p text-left hover:bg-floating-hover", active ? "bg-primary-hover text-primary-foreground" : "", selected ? "bg-floating-hover text-floating-foreground" : ""),
                 })}>
                                                 <Label {...option} ref={undefined} label={option.label} value={option.value}>
                                                     {children}
                                                 </Label>
-                                            </button>);
+                                            </div>);
             }}/>
                             </motion.div>
                         </FloatingFocusManager>) : null}

package/dist/components/form/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAoCpB,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/form/checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG,QAAQ,CAChC,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,EACtD;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC7B,CACJ,CAAC;AAEF,eAAO,MAAM,QAAQ,qGAuDpB,CAAC"}

package/dist/components/form/checkbox.js

@@ -1,34 +1,36 @@
 import { t as e } from "../../dom-Bn4wY_Zx.js";
-import { forwardRef as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as t, useId as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/form/checkbox.tsx
-var i = t(({ children: t, asTask: i = !1, labelClassName: a, loading: o, error: s, className: c = "", size: l, container: u, ...d }, f) => {
-	let p = d.disabled || o;
-	return /* @__PURE__ */ r("label", {
-		"aria-disabled": p,
-		"data-disabled": p,
-		"data-task": i,
+var o = t(({ children: t, asTask: o = !1, labelClassName: s, loading: c, error: l, className: u = "", size: d, container: f, ...p }, m) => {
+	let h = p.disabled || c, g = n(), _ = p.id ?? p.name ?? g, v = l ? `${_}-error` : void 0, y = [p["aria-describedby"], v].filter(Boolean).join(" ") || void 0, b = l ? !0 : p["aria-invalid"];
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ a("label", {
+		"aria-disabled": h,
+		"data-disabled": h,
+		"data-task": o,
 		"data-component": "checkbox",
-		className: e("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", i ? "group-checkbox-checked:line-through" : "", u),
-		children: [
-			/* @__PURE__ */ n("input", {
-				...d,
-				ref: f,
-				disabled: p,
-				type: "checkbox",
-				"data-task": i,
-				className: e("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", c)
-			}),
-			t,
-			/* @__PURE__ */ n("span", {
-				"data-name": "checkbox-label",
-				className: e("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", a),
-				children: s
-			})
-		]
-	});
+		className: e("group flex w-fit flex-wrap items-center font-normal data-[disabled=true]:cursor-not-allowed", o ? "group-checkbox-checked:line-through" : "", f),
+		children: [/* @__PURE__ */ i("input", {
+			...p,
+			ref: m,
+			disabled: h,
+			type: "checkbox",
+			"data-task": o,
+			"aria-invalid": b,
+			"aria-describedby": y,
+			onKeyDown: (e) => {
+				p.onKeyDown?.(e), !e.defaultPrevented && (e.key === " " || e.key === "Space" || e.code === "Space" || e.key === "Enter") && (e.preventDefault(), e.currentTarget.click());
+			},
+			className: e("form-checkbox mr-checkbox-gap inline-block size-checkbox-size appearance-none rounded-checkbox-radius border-card-border bg-origin-border text-primary focus:ring-primary disabled:opacity-70 group-aria-disabled:cursor-not-allowed", u)
+		}), t]
+	}), /* @__PURE__ */ i("span", {
+		id: v,
+		"data-name": "checkbox-label",
+		className: e("min-w-full flex-1 text-checkbox-hint-text text-danger empty:mt-0 empty:hidden", s),
+		children: l
+	})] });
 });
 //#endregion
-export { i as Checkbox };
+export { o as Checkbox };
 
 //# sourceMappingURL=checkbox.js.map