alif-ui 2.0.0-alpha.21 → 2.0.0-alpha.22

package/dist/components/Accordion/AccordionContent/AccordionContent.js

@@ -1,13 +1,13 @@
 "use client";
 import { classNames as e } from "../../../utils/class-names.js";
-import { useAccordionItemContext as t } from "../Accordion.context.js";
-import n from "../../../lib/components/Accordion/Accordion.module.js";
-import { Collapse as r } from "../../Collapse/Collapse.js";
+import { Collapse as t } from "../../Collapse/Collapse.js";
+import { useAccordionItemContext as n } from "../Accordion.context.js";
+import r from "../../../lib/components/Accordion/Accordion.module.js";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/AccordionContent/AccordionContent.tsx
 var a = ({ children: a, className: o, style: s, ref: c }) => {
-	let { isOpen: l, duration: u, contentId: d, triggerId: f } = t();
-	return /* @__PURE__ */ i(r, {
+	let { isOpen: l, duration: u, contentId: d, triggerId: f } = n();
+	return /* @__PURE__ */ i(t, {
 		isOpen: l,
 		duration: u,
 		children: /* @__PURE__ */ i("div", {
@@ -16,7 +16,7 @@ var a = ({ children: a, className: o, style: s, ref: c }) => {
 			style: s,
 			role: "region",
 			"aria-labelledby": f,
-			className: e(n.content, o),
+			className: e(r.content, o),
 			children: a
 		})
 	});

package/dist/components/Accordion/AccordionTrigger/AccordionTrigger.js

@@ -1,27 +1,27 @@
 "use client";
 import { classNames as e } from "../../../utils/class-names.js";
-import { useAccordionContext as t, useAccordionItemContext as n } from "../Accordion.context.js";
-import r from "../../../lib/components/Accordion/Accordion.module.js";
-import { OutlineNavigationChevronDown as i } from "../../../icons/components/OutlineNavigationChevronDown.js";
-import { UnstyledButton as a } from "../../UnstyledButton/UnstyledButton.js";
+import { OutlineNavigationChevronDown as t } from "../../../icons/components/OutlineNavigationChevronDown.js";
+import { UnstyledButton as n } from "../../UnstyledButton/UnstyledButton.js";
+import { useAccordionContext as r, useAccordionItemContext as i } from "../Accordion.context.js";
+import a from "../../../lib/components/Accordion/Accordion.module.js";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/lib/components/Accordion/AccordionTrigger/AccordionTrigger.tsx
 var c = ({ chevron: c, children: l, className: u, style: d, ref: f }) => {
-	let { toggle: p } = t(), { value: m, disabled: h, isOpen: g, triggerId: _, contentId: v } = n();
-	return /* @__PURE__ */ s(a, {
+	let { toggle: p } = r(), { value: m, disabled: h, isOpen: g, triggerId: _, contentId: v } = i();
+	return /* @__PURE__ */ s(n, {
 		id: _,
 		type: "button",
 		"aria-expanded": g,
 		"aria-controls": v,
 		disabled: h,
 		onClick: () => p(m),
-		className: e(r.trigger, u),
+		className: e(a.trigger, u),
 		style: d,
 		ref: f,
 		children: [/* @__PURE__ */ o("div", { children: l }), /* @__PURE__ */ o("span", {
-			className: r.triggerIcon,
+			className: a.triggerIcon,
 			"aria-hidden": "true",
-			children: typeof c == "function" ? c(g) : c ?? /* @__PURE__ */ o(i, { className: e(r.chevron, g && r.chevronOpen) })
+			children: typeof c == "function" ? c(g) : c ?? /* @__PURE__ */ o(t, { className: e(a.chevron, g && a.chevronOpen) })
 		})]
 	});
 };

package/dist/components/Alert/Alert.js

@@ -1,28 +1,28 @@
 "use client";
 import { classNames as e } from "../../utils/class-names.js";
-import { OutlineSystemCheckCircle as t } from "../../icons/components/OutlineSystemCheckCircle.js";
-import { OutlineSystemClose as n } from "../../icons/components/OutlineSystemClose.js";
-import { OutlineSystemInfo as r } from "../../icons/components/OutlineSystemInfo.js";
-import { UnstyledButton as i } from "../UnstyledButton/UnstyledButton.js";
-import { useLocale as a } from "../../providers/hooks/useLocale/useLocale.js";
-import { useComponentId as o } from "../../hooks/useComponentId/useComponentId.js";
-import { Typography as s } from "../Typography/Typography.js";
+import { useLocale as t } from "../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemCheckCircle as n } from "../../icons/components/OutlineSystemCheckCircle.js";
+import { OutlineSystemClose as r } from "../../icons/components/OutlineSystemClose.js";
+import { OutlineSystemInfo as i } from "../../icons/components/OutlineSystemInfo.js";
+import { useComponentId as a } from "../../hooks/useComponentId/useComponentId.js";
+import { Typography as o } from "../Typography/Typography.js";
+import { UnstyledButton as s } from "../UnstyledButton/UnstyledButton.js";
 import c from "../../lib/components/Alert/Alert.module.js";
 import { ARIA_CLOSE_LABEL as l, getAlertStyles as u } from "./Alert.utils.js";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/lib/components/Alert/Alert.tsx
 var p = {
-	success: /* @__PURE__ */ d(t, {}),
-	error: /* @__PURE__ */ d(r, {}),
-	warning: /* @__PURE__ */ d(r, {}),
-	info: /* @__PURE__ */ d(r, {})
-}, m = ({ title: t, description: r, variant: m = "light", color: h = "info", icon: g, onClose: _, className: v, style: y, id: b }) => {
-	let { locale: x } = a(), S = o(b), C = t ? `${S}-title` : void 0, w = r ? `${S}-description` : void 0, T = g === !1 ? null : g ?? p[h];
+	success: /* @__PURE__ */ d(n, {}),
+	error: /* @__PURE__ */ d(i, {}),
+	warning: /* @__PURE__ */ d(i, {}),
+	info: /* @__PURE__ */ d(i, {})
+}, m = ({ title: n, description: i, variant: m = "light", color: h = "info", icon: g, onClose: _, className: v, style: y, id: b }) => {
+	let { locale: x } = t(), S = a(b), C = n ? `${S}-title` : void 0, w = i ? `${S}-description` : void 0, T = g === !1 ? null : g ?? p[h];
 	return /* @__PURE__ */ f("div", {
 		role: "alert",
 		id: S,
-		"aria-labelledby": t ? C : void 0,
-		"aria-describedby": r ? w : void 0,
+		"aria-labelledby": n ? C : void 0,
+		"aria-describedby": i ? w : void 0,
 		style: {
 			...u(m, h),
 			...y
@@ -32,28 +32,28 @@ var p = {
 			T,
 			/* @__PURE__ */ f("div", {
 				className: c.container,
-				children: [t && /* @__PURE__ */ d(s, {
+				children: [n && /* @__PURE__ */ d(o, {
 					id: C,
 					element: "div",
 					variant: "body",
 					size: "m",
 					weight: "medium",
-					children: t
-				}), r && /* @__PURE__ */ d(s, {
+					children: n
+				}), i && /* @__PURE__ */ d(o, {
 					id: w,
 					element: "div",
 					variant: "body",
 					size: "xs",
 					weight: "extra-light",
-					children: r
+					children: i
 				})]
 			}),
-			_ && /* @__PURE__ */ d(i, {
+			_ && /* @__PURE__ */ d(s, {
 				type: "button",
 				className: c.clearButton,
 				onClick: _,
 				"aria-label": l[x],
-				children: /* @__PURE__ */ d(n, {})
+				children: /* @__PURE__ */ d(r, {})
 			})
 		]
 	});

package/dist/components/Dates/InputDatePicker/InputDatePicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { OutlineSystemCalendar as e } from "../../../icons/components/OutlineSystemCalendar.js";
-import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemCalendar as t } from "../../../icons/components/OutlineSystemCalendar.js";
 import { PopoverWithFallback as n } from "../../NativePopover/PopoverWithFallback.js";
 import { dateMatcher as r } from "./DatePicker/DatePicker.utils.js";
 import { formatInputValue as i, getPopoverWidth as a } from "../Dates.utils.js";
@@ -10,8 +10,8 @@ import { defineMask as c, formatDate as l, normalizeTime as u, parseDate as d }
 import { useCallback as f, useLayoutEffect as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/lib/components/Dates/InputDatePicker/InputDatePicker.tsx
-var _ = ({ value: _, isRange: v, withTime: y, onChange: b, onBlur: x, onClear: S, minDate: C = new Date(1900, 0, 1, 0, 0, 0, 0), maxDate: w = new Date(2100, 11, 31, 23, 59, 59, 999), disabledDates: T, minTime: E, maxTime: D, hoursStep: O, minutesStep: k, options: A, pickerWidth: j, className: M, style: N, rightIcon: P = /* @__PURE__ */ h(e, {}), ...F }) => {
-	let { locale: I } = t(), [L, R] = m(!1), [z, B] = m(""), V = c(v, y, I), H = f((e) => {
+var _ = ({ value: _, isRange: v, withTime: y, onChange: b, onBlur: x, onClear: S, minDate: C = new Date(1900, 0, 1, 0, 0, 0, 0), maxDate: w = new Date(2100, 11, 31, 23, 59, 59, 999), disabledDates: T, minTime: E, maxTime: D, hoursStep: O, minutesStep: k, options: A, pickerWidth: j, className: M, style: N, rightIcon: P = /* @__PURE__ */ h(t, {}), ...F }) => {
+	let { locale: I } = e(), [L, R] = m(!1), [z, B] = m(""), V = c(v, y, I), H = f((e) => {
 		e ? l(e, v, y, B) : B("");
 	}, [v, y]), U = (e) => {
 		B(i(e.target.value, V));

package/dist/components/Dates/InputMonthPicker/InputMonthPicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { OutlineSystemCalendar as e } from "../../../icons/components/OutlineSystemCalendar.js";
-import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemCalendar as t } from "../../../icons/components/OutlineSystemCalendar.js";
 import { PopoverWithFallback as n } from "../../NativePopover/PopoverWithFallback.js";
 import { formatInputValue as r, getPopoverWidth as i } from "../Dates.utils.js";
 import { PickerInput as a } from "../PickerInput/PickerInput.js";
@@ -10,8 +10,8 @@ import { defineMask as c, parseMonthRange as l, parseMonthToken as u, sanitizeIn
 import { useCallback as f, useEffect as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/lib/components/Dates/InputMonthPicker/InputMonthPicker.tsx
-var _ = ({ value: _, isRange: v = !1, disabledMonths: y, onClear: b, onChange: x, onBlur: S, options: C, style: w, className: T, pickerWidth: E, rightIcon: D = /* @__PURE__ */ h(e, {}), ...O }) => {
-	let { locale: k } = t(), [A, j] = m(!1), [M, N] = m(""), P = o[k], F = c(v), I = f((e) => {
+var _ = ({ value: _, isRange: v = !1, disabledMonths: y, onClear: b, onChange: x, onBlur: S, options: C, style: w, className: T, pickerWidth: E, rightIcon: D = /* @__PURE__ */ h(t, {}), ...O }) => {
+	let { locale: k } = e(), [A, j] = m(!1), [M, N] = m(""), P = o[k], F = c(v), I = f((e) => {
 		if (!e) return "";
 		if (v && Array.isArray(e)) {
 			let [t, n] = e;

package/dist/components/Dates/InputMonthYearPicker/InputMonthYearPicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { OutlineSystemCalendar as e } from "../../../icons/components/OutlineSystemCalendar.js";
-import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemCalendar as t } from "../../../icons/components/OutlineSystemCalendar.js";
 import { PopoverWithFallback as n } from "../../NativePopover/PopoverWithFallback.js";
 import { formatInputValue as r, getPopoverWidth as i } from "../Dates.utils.js";
 import { PickerInput as a } from "../PickerInput/PickerInput.js";
@@ -9,8 +9,8 @@ import { defineMask as s, formatMonthYear as c, formatRangeValue as l, normalize
 import { useEffect as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/lib/components/Dates/InputMonthYearPicker/InputMonthYearPicker.tsx
-var _ = ({ value: _, className: v, style: y, minDate: b = "01-1900", maxDate: x = "12-2100", disabledDates: S, options: C, isRange: w, onChange: T, onClear: E, onBlur: D, pickerWidth: O, rightIcon: k = /* @__PURE__ */ h(e, {}), ...A }) => {
-	let { locale: j } = t(), [M, N] = m(!1), [P, F] = m(""), I = s(w, j), L = isNaN(Number(P.split(" ")[0])) ? void 0 : I, R = (e) => {
+var _ = ({ value: _, className: v, style: y, minDate: b = "01-1900", maxDate: x = "12-2100", disabledDates: S, options: C, isRange: w, onChange: T, onClear: E, onBlur: D, pickerWidth: O, rightIcon: k = /* @__PURE__ */ h(t, {}), ...A }) => {
+	let { locale: j } = e(), [M, N] = m(!1), [P, F] = m(""), I = s(w, j), L = isNaN(Number(P.split(" ")[0])) ? void 0 : I, R = (e) => {
 		F(r(u(e.target.value, j), I));
 	}, z = (e) => S?.includes(e) ?? !1, B = () => {
 		E?.(), F(""), T?.(null);

package/dist/components/Dates/InputTimePicker/InputTimePicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { OutlineSystemClock as e } from "../../../icons/components/OutlineSystemClock.js";
-import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemClock as t } from "../../../icons/components/OutlineSystemClock.js";
 import { PopoverWithFallback as n } from "../../NativePopover/PopoverWithFallback.js";
 import { formatInputValue as r } from "../Dates.utils.js";
 import { PickerInput as i } from "../PickerInput/PickerInput.js";
@@ -9,8 +9,8 @@ import { MASK_VALUES as o, clampTimeToRange as s } from "./InputTimePicker.utils
 import { useEffect as c, useState as l } from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/components/Dates/InputTimePicker/InputTimePicker.tsx
-var f = ({ onChange: f, onClear: p, onBlur: m, onScroll: h, value: g, minTime: _, maxTime: v, hoursStep: y, minutesStep: b, withHeader: x, withConfirmationButton: S, rightIcon: C = /* @__PURE__ */ u(e, {}), className: w, style: T, ...E }) => {
-	let { locale: D } = t(), [O, k] = l(!1), [A, j] = l(""), M = o[D], N = (e) => {
+var f = ({ onChange: f, onClear: p, onBlur: m, onScroll: h, value: g, minTime: _, maxTime: v, hoursStep: y, minutesStep: b, withHeader: x, withConfirmationButton: S, rightIcon: C = /* @__PURE__ */ u(t, {}), className: w, style: T, ...E }) => {
+	let { locale: D } = e(), [O, k] = l(!1), [A, j] = l(""), M = o[D], N = (e) => {
 		m?.(e);
 		let t = s(e.target.value, _, v, y, b);
 		t ? (j(t), f?.(t)) : j("");

package/dist/components/Dates/InputYearPicker/InputYearPicker.js

@@ -1,6 +1,6 @@
 "use client";
-import { OutlineSystemCalendar as e } from "../../../icons/components/OutlineSystemCalendar.js";
-import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as e } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemCalendar as t } from "../../../icons/components/OutlineSystemCalendar.js";
 import { PopoverWithFallback as n } from "../../NativePopover/PopoverWithFallback.js";
 import { formatInputValue as r, getPopoverWidth as i } from "../Dates.utils.js";
 import { YearPicker as a } from "./YearPicker/YearPicker.js";
@@ -9,8 +9,8 @@ import { PickerInput as u } from "../PickerInput/PickerInput.js";
 import { useEffect as d, useState as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/lib/components/Dates/InputYearPicker/InputYearPicker.tsx
-var h = ({ value: h, isRange: g, maxYear: _ = 2100, minYear: v = 1900, disabledYears: y, onClear: b, onChange: x, onBlur: S, options: C, className: w, style: T, pickerWidth: E, rightIcon: D = /* @__PURE__ */ p(e, {}), ...O }) => {
-	let { locale: k } = t(), [A, j] = f(!1), [M, N] = f(""), P = o(g, k), F = (e) => {
+var h = ({ value: h, isRange: g, maxYear: _ = 2100, minYear: v = 1900, disabledYears: y, onClear: b, onChange: x, onBlur: S, options: C, className: w, style: T, pickerWidth: E, rightIcon: D = /* @__PURE__ */ p(t, {}), ...O }) => {
+	let { locale: k } = e(), [A, j] = f(!1), [M, N] = f(""), P = o(g, k), F = (e) => {
 		N(r(e.target.value, P));
 	}, I = () => {
 		b?.(), N(""), x?.(null);

package/dist/components/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 "use client";
 import { classNames as e } from "../../utils/class-names.js";
-import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClose.js";
-import { Backdrop as n } from "../Backdrop/Backdrop.js";
-import { useLocale as r } from "../../providers/hooks/useLocale/useLocale.js";
+import { Backdrop as t } from "../Backdrop/Backdrop.js";
+import { useLocale as n } from "../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemClose as r } from "../../icons/components/OutlineSystemClose.js";
 import { Button as i } from "../Button/Button.js";
 import a from "../../lib/components/Drawer/Drawer.module.js";
 import { DrawerHeader as o } from "./DrawerHeader/DrawerHeader.js";
@@ -13,8 +13,8 @@ import { useFocusTrapAndRestore as f } from "../../hooks/useFocusTrapAndRestore/
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/lib/components/Drawer/Drawer.tsx
 var h = ({ isOpen: o, onClose: s, children: c, withCloseButton: h = !0, closeOnClickOutside: g = !0, scrollable: _ = !0, width: v, height: y, maxWidth: b, maxHeight: x, variant: S = "default", position: C = "right", zIndex: w, className: T, style: E, ref: D, ...O }) => {
-	let { locale: k } = r(), A = f(o), j = e(a.root, S === "floating" && a.rounded, a[C]), M = e(a.drawer, (_ || C === "bottom" || C === "top") && a.scrollable, T);
-	return /* @__PURE__ */ p(n, {
+	let { locale: k } = n(), A = f(o), j = e(a.root, S === "floating" && a.rounded, a[C]), M = e(a.drawer, (_ || C === "bottom" || C === "top") && a.scrollable, T);
+	return /* @__PURE__ */ p(t, {
 		ref: D,
 		isOpen: o,
 		onClose: s,
@@ -38,7 +38,7 @@ var h = ({ isOpen: o, onClose: s, children: c, withCloseButton: h = !0, closeOnC
 				color: "tertiary",
 				"aria-label": l[k],
 				onClick: s,
-				children: /* @__PURE__ */ p(t, {})
+				children: /* @__PURE__ */ p(r, {})
 			})]
 		})
 	});

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.js

@@ -1,29 +1,29 @@
 "use client";
 import { classNames as e } from "../../../utils/class-names.js";
-import { OutlineSystemClose as t } from "../../../icons/components/OutlineSystemClose.js";
-import { UnstyledButton as n } from "../../UnstyledButton/UnstyledButton.js";
-import { useLocale as r } from "../../../providers/hooks/useLocale/useLocale.js";
-import i from "../../../lib/components/Field/InputBaseWrapper/InputBaseWrapper.module.js";
-import { sizeVarsResolver as a } from "./InputBaseWrapper.utils.js";
-import { INPUT_BASE_WRAPPER_LOCALES as o } from "./InputBaseWrapper.constants.js";
-import { Hinter as s } from "../../Hinter/Hinter.js";
+import { useLocale as t } from "../../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemClose as n } from "../../../icons/components/OutlineSystemClose.js";
+import r from "../../../lib/components/Field/InputBaseWrapper/InputBaseWrapper.module.js";
+import { sizeVarsResolver as i } from "./InputBaseWrapper.utils.js";
+import { INPUT_BASE_WRAPPER_LOCALES as a } from "./InputBaseWrapper.constants.js";
+import { Hinter as o } from "../../Hinter/Hinter.js";
+import { UnstyledButton as s } from "../../UnstyledButton/UnstyledButton.js";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
 //#region src/lib/components/Field/InputBaseWrapper/InputBaseWrapper.tsx
 var u = ({ id: u, value: d, label: f, onClear: p, leftSection: m, leftIcon: h, rightIcon: g, children: _, inputRef: v, hasError: y, disabled: b, onClick: x, className: S, style: C, fullWidth: w, bordered: T, keepLabel: E, keepLabelFixed: D, hintLeftSection: O, hintRightSection: k, size: A = "m" }) => {
-	let { locale: j } = r(), M = d != null && d !== "", N = A === "s" || !E, P = e(i.root, !T && i.rootBorderless, y && i.rootError, b && i.rootDisabled, w && i.rootFullWidth, S), F = e(i.label, "uiFont", (M || D) && i.labelFloated, N && i.labelHidden, N && M && i.labelHiddenWithValue), I = e(i.content, (N || !f) && i.contentCentered), L = e(i.clearButton, !M && i.clearButtonHidden), R = () => {
+	let { locale: j } = t(), M = d != null && d !== "", N = A === "s" || !E, P = e(r.root, !T && r.rootBorderless, y && r.rootError, b && r.rootDisabled, w && r.rootFullWidth, S), F = e(r.label, "uiFont", (M || D) && r.labelFloated, N && r.labelHidden, N && M && r.labelHiddenWithValue), I = e(r.content, (N || !f) && r.contentCentered), L = e(r.clearButton, !M && r.clearButtonHidden), R = () => {
 		v?.current?.focus();
 	};
 	return /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ l("div", {
 		onClick: x,
 		className: P,
-		style: a(A, C),
+		style: i(A, C),
 		children: [m, /* @__PURE__ */ l("div", {
-			className: i.wrapper,
+			className: r.wrapper,
 			onClick: R,
 			children: [
 				h,
 				/* @__PURE__ */ l("div", {
-					className: i.inputContainer,
+					className: r.inputContainer,
 					onMouseDown: (e) => {
 						e.target === e.currentTarget && e.preventDefault();
 					},
@@ -36,7 +36,7 @@ var u = ({ id: u, value: d, label: f, onClear: p, leftSection: m, leftIcon: h, r
 						children: _
 					})]
 				}),
-				p && /* @__PURE__ */ c(n, {
+				p && /* @__PURE__ */ c(s, {
 					type: "button",
 					disabled: b,
 					onMouseDown: (e) => e.preventDefault(),
@@ -44,17 +44,17 @@ var u = ({ id: u, value: d, label: f, onClear: p, leftSection: m, leftIcon: h, r
 					onClick: () => {
 						R(), p?.();
 					},
-					"aria-label": o[j].clearText,
-					children: /* @__PURE__ */ c(t, {})
+					"aria-label": a[j].clearText,
+					children: /* @__PURE__ */ c(n, {})
 				}),
 				g
 			]
 		})]
-	}), /* @__PURE__ */ l(s, {
-		className: i.hinter,
+	}), /* @__PURE__ */ l(o, {
+		className: r.hinter,
 		hasError: y,
 		children: [O && /* @__PURE__ */ c("div", { children: O }), k && /* @__PURE__ */ c("div", {
-			className: i.hintRight,
+			className: r.hintRight,
 			children: k
 		})]
 	})] });

package/dist/components/FileUploader/FileUploader.js

@@ -1,8 +1,8 @@
 "use client";
 import { classNames as e } from "../../utils/class-names.js";
 import { syncRefs as t } from "../../utils/sync-refs.js";
-import { OutlineSystemUploadCloud as n } from "../../icons/components/OutlineSystemUploadCloud.js";
-import { useLocale as r } from "../../providers/hooks/useLocale/useLocale.js";
+import { useLocale as n } from "../../providers/hooks/useLocale/useLocale.js";
+import { OutlineSystemUploadCloud as r } from "../../icons/components/OutlineSystemUploadCloud.js";
 import { Loader as i } from "../Loader/Loader.js";
 import { Button as a } from "../Button/Button.js";
 import { Typography as o } from "../Typography/Typography.js";
@@ -12,7 +12,7 @@ import { useRef as m, useState as h } from "react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/lib/components/FileUploader/FileUploader.tsx
 var v = ({ value: v, onChange: y, title: b, description: x, buttonText: S, multiple: C, allowedExtensions: w = [], allowedMimeTypes: T = [], maxFileSize: E = 20, maxCount: D = 5, hasError: O, errorText: k, disabled: A = !1, loading: j = !1, className: M, style: N, ref: P }) => {
-	let F = m(null), [I, L] = h(!1), [R, z] = h(""), { locale: B } = r(), V = k || R || x, H = S ?? c[B], U = A || j, W = e(s.root, I && !U && s.dragOver, (O || R) && s.error, U && s.disabled, M), G = (e) => {
+	let F = m(null), [I, L] = h(!1), [R, z] = h(""), { locale: B } = n(), V = k || R || x, H = S ?? c[B], U = A || j, W = e(s.root, I && !U && s.dragOver, (O || R) && s.error, U && s.disabled, M), G = (e) => {
 		let t = Array.from(e);
 		y(C ? [...v, ...t] : t), z("");
 	}, K = (e) => {
@@ -66,7 +66,7 @@ var v = ({ value: v, onChange: y, title: b, description: x, buttonText: S, multi
 					className: s.loader,
 					children: /* @__PURE__ */ g(i, {})
 				}),
-				/* @__PURE__ */ g(n, {}),
+				/* @__PURE__ */ g(r, {}),
 				/* @__PURE__ */ g(o, {
 					size: "l",
 					weight: "medium",

package/dist/components/List/ListGroup/ListGroup.js

@@ -1,30 +1,37 @@
-"use client";
 import { resolveTypography as e } from "../../../utils/typography.js";
 import { classNames as t } from "../../../utils/class-names.js";
 import { SolidNavigationChevronDown as n } from "../../../icons/components/SolidNavigationChevronDown.js";
-import { Collapse as r } from "../../Collapse/Collapse.js";
-import i from "../../../lib/components/List/ListGroup/ListGroup.module.js";
-import { useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import r from "../../../lib/components/List/ListGroup/ListGroup.module.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/lib/components/List/ListGroup/ListGroup.tsx
-var c = ({ className: c, children: l, title: u, collapsible: d = !1, defaultOpen: f = !0, ...p }) => {
-	let [m, h] = a(f);
-	return /* @__PURE__ */ s("div", {
-		className: t(i.group, c),
-		...p,
-		children: [/* @__PURE__ */ s("div", {
-			style: e("body", "s"),
-			onClick: () => d && h(!m),
-			className: t(i.groupTitle, d && i.collapsible, "uiFont"),
-			children: [u, d && /* @__PURE__ */ o(n, {
+var o = ({ className: o, children: s, title: c, collapsible: l = !1, defaultOpen: u = !0, ref: d, ...f }) => {
+	let p = e("body", "s");
+	return l ? /* @__PURE__ */ a("details", {
+		ref: d,
+		open: u,
+		className: t(r.group, o),
+		...f,
+		children: [/* @__PURE__ */ a("summary", {
+			style: p,
+			className: t(r.groupTitle, r.collapsible, "uiFont"),
+			children: [c, /* @__PURE__ */ i(n, {
 				"aria-hidden": "true",
-				className: t(i.chevron, m && i.chevronOpen)
+				className: r.chevron
 			})]
-		}), d ? /* @__PURE__ */ o(r, {
-			isOpen: m,
-			children: l
-		}) : l]
+		}), /* @__PURE__ */ i("div", {
+			className: r.clip,
+			children: s
+		})]
+	}) : /* @__PURE__ */ a("div", {
+		ref: d,
+		className: t(r.group, o),
+		...f,
+		children: [/* @__PURE__ */ i("div", {
+			style: p,
+			className: t(r.groupTitle, "uiFont"),
+			children: c
+		}), s]
 	});
 };
 //#endregion
-export { c as ListGroup };
+export { o as ListGroup };

package/dist/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import { classNames as e } from "../../utils/class-names.js";
-import { OutlineSystemClose as t } from "../../icons/components/OutlineSystemClose.js";
-import { Backdrop as n } from "../Backdrop/Backdrop.js";
+import { Backdrop as t } from "../Backdrop/Backdrop.js";
+import { OutlineSystemClose as n } from "../../icons/components/OutlineSystemClose.js";
 import { Button as r } from "../Button/Button.js";
 import { useFocusTrapAndRestore as i } from "../../hooks/useFocusTrapAndRestore/useFocusTrapAndRestore.js";
 import a from "../../lib/components/Modal/Modal.module.js";
@@ -12,7 +12,7 @@ import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/lib/components/Modal/Modal.tsx
 var f = ({ children: o, device: s = "desktop", centered: c = !0, withCloseButton: f = !0, scrollable: p = !1, className: m, style: h, ...g }) => {
 	let _ = i(g.isOpen);
-	return /* @__PURE__ */ u(n, {
+	return /* @__PURE__ */ u(t, {
 		className: e(!c && a.start),
 		...g,
 		children: /* @__PURE__ */ d("div", {
@@ -27,7 +27,7 @@ var f = ({ children: o, device: s = "desktop", centered: c = !0, withCloseButton
 				color: "tertiary",
 				className: a.closeButton,
 				onClick: g.onClose,
-				children: /* @__PURE__ */ u(t, {})
+				children: /* @__PURE__ */ u(n, {})
 			})]
 		})
 	});

package/dist/components/NativeAccordion/NativeAccordion.context.js

@@ -0,0 +1,5 @@
+import { createSafeContext as e } from "../../utils/create-safe-context/create-safe-context.js";
+//#region src/lib/components/NativeAccordion/NativeAccordion.context.ts
+var [t, n] = e("NativeAccordion component was not found in the tree"), [r, i] = e("NativeAccordion.Item component was not found in the tree");
+//#endregion
+export { t as NativeAccordionContextProvider, r as NativeAccordionItemContextProvider, n as useNativeAccordionContext, i as useNativeAccordionItemContext };

package/dist/components/NativeAccordion/NativeAccordion.js

@@ -0,0 +1,37 @@
+"use client";
+import { classNames as e } from "../../utils/class-names.js";
+import { NativeAccordionContextProvider as t } from "./NativeAccordion.context.js";
+import n from "../../lib/components/NativeAccordion/NativeAccordion.module.js";
+import { NativeAccordionItem as r } from "./NativeAccordionItem/NativeAccordionItem.js";
+import { NativeAccordionTrigger as i } from "./NativeAccordionTrigger/NativeAccordionTrigger.js";
+import { NativeAccordionContent as a } from "./NativeAccordionContent/NativeAccordionContent.js";
+import { getAccordionStyles as o, getNextValues as s, toArray as c } from "./NativeAccordion.utils.js";
+import { useId as l, useState as u } from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region src/lib/components/NativeAccordion/NativeAccordion.tsx
+var f = ({ value: r, defaultValue: i, onChange: a, children: f, type: p = "single", size: m = "m", withDivider: h = !1, duration: g = 300, keepMounted: _ = !0, className: v, style: y, ref: b }) => {
+	let x = l(), S = r !== void 0, [C, w] = u(() => c(i)), T = S ? c(r) : C, E = (e) => T.includes(e);
+	return /* @__PURE__ */ d(t, {
+		value: {
+			open: E,
+			setOpen: (e, t) => {
+				if (t === E(e)) return;
+				let n = s(p, T, e);
+				S || w(n), p === "single" ? a?.(n[0] ?? "") : a?.(n);
+			},
+			groupName: p === "single" ? x : void 0,
+			withDivider: h,
+			keepMounted: _,
+			duration: g
+		},
+		children: /* @__PURE__ */ d("div", {
+			ref: b,
+			style: o(m, g, y),
+			className: e(n.root, v),
+			children: f
+		})
+	});
+};
+f.Item = r, f.Trigger = i, f.Content = a;
+//#endregion
+export { f as NativeAccordion };

package/dist/components/NativeAccordion/NativeAccordion.utils.js

@@ -0,0 +1,9 @@
+import { getSize as e } from "../../utils/get-size.js";
+//#region src/lib/components/NativeAccordion/NativeAccordion.utils.ts
+var t = (t, n, r) => ({
+	"--accordion-spacing-vertical": e(t, "accordion-spacing-vertical"),
+	"--accordion-duration": `${n}ms`,
+	...r
+}), n = (e, t = []) => e === void 0 ? t : Array.isArray(e) ? e : e ? [e] : [], r = (e, t, n) => t.includes(n) ? t.filter((e) => e !== n) : e === "single" ? [n] : [...t, n];
+//#endregion
+export { t as getAccordionStyles, r as getNextValues, n as toArray };

package/dist/components/NativeAccordion/NativeAccordionContent/NativeAccordionContent.js

@@ -0,0 +1,25 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import { useDelayedUnmount as t } from "../../../hooks/useDelayedUnmount/useDelayedUnmount.js";
+import { useNativeAccordionContext as n, useNativeAccordionItemContext as r } from "../NativeAccordion.context.js";
+import i from "../../../lib/components/NativeAccordion/NativeAccordion.module.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/lib/components/NativeAccordion/NativeAccordionContent/NativeAccordionContent.tsx
+var o = ({ children: o, className: s, style: c, ref: l }) => {
+	let { keepMounted: u, duration: d } = n(), { isOpen: f } = r();
+	return t({
+		keepMounted: u,
+		isOpen: f,
+		exitDuration: d
+	}) ? /* @__PURE__ */ a("div", {
+		className: i.clip,
+		children: /* @__PURE__ */ a("div", {
+			ref: l,
+			style: c,
+			className: e(i.content, s),
+			children: o
+		})
+	}) : null;
+};
+//#endregion
+export { o as NativeAccordionContent };

package/dist/components/NativeAccordion/NativeAccordionItem/NativeAccordionItem.js

@@ -0,0 +1,32 @@
+"use client";
+import { classNames as e } from "../../../utils/class-names.js";
+import { NativeAccordionItemContextProvider as t, useNativeAccordionContext as n } from "../NativeAccordion.context.js";
+import r from "../../../lib/components/NativeAccordion/NativeAccordion.module.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/lib/components/NativeAccordion/NativeAccordionItem/NativeAccordionItem.tsx
+var a = ({ value: a, disabled: o = !1, children: s, className: c, style: l, ref: u }) => {
+	let { open: d, setOpen: f, groupName: p, withDivider: m } = n(), h = d(a);
+	return /* @__PURE__ */ i(t, {
+		value: {
+			disabled: o,
+			isOpen: h,
+			toggle: () => f(a, !h)
+		},
+		children: /* @__PURE__ */ i("details", {
+			ref: u,
+			open: h,
+			name: o ? void 0 : p,
+			style: l,
+			onToggle: (e) => {
+				let t = e.currentTarget;
+				if (e.target !== t || t.open === h) return;
+				let n = t.open;
+				t.open = h, o || f(a, n);
+			},
+			className: e(r.item, m && r.withDivider, c),
+			children: s
+		})
+	});
+};
+//#endregion
+export { a as NativeAccordionItem };