@skeletonlabs/skeleton-react 4.6.0 → 4.7.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import { Children, createContext, use, useEffect, useId } from "react";
 import { connect, machine, splitItemProps, splitProps } from "@zag-js/accordion";
 import { Portal as Portal$1, mergeProps, normalizeProps, useMachine } from "@zag-js/react";
-import { classesAccordion, classesAppBar, classesAvatar, classesCollapsible, classesCombobox, classesDatePicker, classesDialog, classesFileUpload, classesFloatingPanel, classesListbox, classesMenu, classesNavigation, classesPagination, classesPopover, classesProgress, classesRatingGroup, classesSegmentedControl, classesSlider, classesSwitch, classesTabs, classesTagsInput, classesToast, classesToggleGroup, classesTooltip, classesTreeView } from "@skeletonlabs/skeleton-common";
+import * as classes from "@skeletonlabs/skeleton-common/classes";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { connect as connect$1, machine as machine$1, splitProps as splitProps$1 } from "@zag-js/avatar";
 import { connect as connect$2, machine as machine$2, splitProps as splitProps$2 } from "@zag-js/collapsible";
@@ -19,13 +19,14 @@ import { connect as connect$12, machine as machine$12, splitProps as splitProps$
 import { connect as connect$13, machine as machine$13, splitItemProps as splitItemProps$6, splitProps as splitProps$13 } from "@zag-js/rating-group";
 import { connect as connect$14, machine as machine$14, splitItemProps as splitItemProps$7, splitProps as splitProps$14 } from "@zag-js/radio-group";
 import { connect as connect$15, machine as machine$15, splitProps as splitProps$15, splitThumbProps } from "@zag-js/slider";
-import { connect as connect$16, machine as machine$16, splitProps as splitProps$16 } from "@zag-js/switch";
-import { connect as connect$17, machine as machine$17, splitContentProps, splitProps as splitProps$17, splitTriggerProps } from "@zag-js/tabs";
-import { connect as connect$18, machine as machine$18, splitItemProps as splitItemProps$8, splitProps as splitProps$18 } from "@zag-js/tags-input";
-import { connect as connect$19, createStore as createToaster, group, machine as machine$19 } from "@zag-js/toast";
-import { connect as connect$20, machine as machine$20, splitItemProps as splitItemProps$9, splitProps as splitProps$19 } from "@zag-js/toggle-group";
-import { connect as connect$21, machine as machine$21, splitProps as splitProps$20 } from "@zag-js/tooltip";
-import { collection as createTreeViewCollection, connect as connect$22, machine as machine$22, splitProps as splitProps$21 } from "@zag-js/tree-view";
+import { connect as connect$16, machine as machine$16, splitProps as splitProps$16 } from "@zag-js/steps";
+import { connect as connect$17, machine as machine$17, splitProps as splitProps$17 } from "@zag-js/switch";
+import { connect as connect$18, machine as machine$18, splitContentProps, splitProps as splitProps$18, splitTriggerProps } from "@zag-js/tabs";
+import { connect as connect$19, machine as machine$19, splitItemProps as splitItemProps$8, splitProps as splitProps$19 } from "@zag-js/tags-input";
+import { connect as connect$20, createStore as createToaster, group, machine as machine$20 } from "@zag-js/toast";
+import { connect as connect$21, machine as machine$21, splitItemProps as splitItemProps$9, splitProps as splitProps$20 } from "@zag-js/toggle-group";
+import { connect as connect$22, machine as machine$22, splitProps as splitProps$21 } from "@zag-js/tooltip";
+import { collection as createTreeViewCollection, connect as connect$23, machine as machine$23, splitProps as splitProps$22 } from "@zag-js/tree-view";
 import { ListCollection } from "@zag-js/collection";
 
 //#region src/internal/create-context.ts
@@ -35,7 +36,7 @@ function createContext$1(defaultValue) {
 
 //#endregion
 //#region src/components/accordion/modules/item-context.ts
-const ItemContext$6 = createContext$1();
+const ItemContext$7 = createContext$1();
 
 //#endregion
 //#region src/components/accordion/modules/provider.ts
@@ -48,15 +49,15 @@ function useAccordion(props = {}) {
 
 //#endregion
 //#region src/components/accordion/modules/root-context.ts
-const RootContext$46 = createContext$1();
+const RootContext$48 = createContext$1();
 
 //#endregion
 //#region src/components/accordion/anatomy/item-content.tsx
 function ItemContent(props) {
-	const accordion = use(RootContext$46);
-	const itemProps = use(ItemContext$6);
+	const accordion = use(RootContext$48);
+	const itemProps = use(ItemContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(accordion.getItemContentProps(itemProps), { className: classesAccordion.itemContent }, rest);
+	const attributes = mergeProps(accordion.getItemContentProps(itemProps), { className: classes.accordion.itemContent }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -66,10 +67,10 @@ function ItemContent(props) {
 //#endregion
 //#region src/components/accordion/anatomy/item-indicator.tsx
 function ItemIndicator$3(props) {
-	const accordion = use(RootContext$46);
-	const itemProps = use(ItemContext$6);
+	const accordion = use(RootContext$48);
+	const itemProps = use(ItemContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(accordion.getItemIndicatorProps(itemProps), { className: classesAccordion.itemIndicator }, rest);
+	const attributes = mergeProps(accordion.getItemIndicatorProps(itemProps), { className: classes.accordion.itemIndicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -79,10 +80,10 @@ function ItemIndicator$3(props) {
 //#endregion
 //#region src/components/accordion/anatomy/item-trigger.tsx
 function ItemTrigger(props) {
-	const accordion = use(RootContext$46);
-	const itemProps = use(ItemContext$6);
+	const accordion = use(RootContext$48);
+	const itemProps = use(ItemContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(accordion.getItemTriggerProps(itemProps), { className: classesAccordion.itemTrigger }, rest);
+	const attributes = mergeProps(accordion.getItemTriggerProps(itemProps), { className: classes.accordion.itemTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -91,12 +92,12 @@ function ItemTrigger(props) {
 
 //#endregion
 //#region src/components/accordion/anatomy/item.tsx
-function Item$10(props) {
-	const accordion = use(RootContext$46);
+function Item$11(props) {
+	const accordion = use(RootContext$48);
 	const [itemProps, componentProps] = splitItemProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(accordion.getItemProps(itemProps), { className: classesAccordion.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$6.Provider, {
+	const attributes = mergeProps(accordion.getItemProps(itemProps), { className: classes.accordion.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$7.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -107,18 +108,18 @@ function Item$10(props) {
 
 //#endregion
 //#region src/components/accordion/anatomy/root-context.tsx
-function RootContext$45(props) {
-	const accordion = use(RootContext$46);
+function RootContext$47(props) {
+	const accordion = use(RootContext$48);
 	const { children } = props;
 	return children(accordion);
 }
 
 //#endregion
 //#region src/components/accordion/anatomy/root-provider.tsx
-function RootProvider$16(props) {
+function RootProvider$17(props) {
 	const { element, children, value: accordion, ...rest } = props;
-	const attributes = mergeProps(accordion.getRootProps(), { className: classesAccordion.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
+	const attributes = mergeProps(accordion.getRootProps(), { className: classes.accordion.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$48.Provider, {
 		value: accordion,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -133,8 +134,8 @@ function Root$18(props) {
 	const [accordionProps, componentProps] = splitProps(props);
 	const { element, children, ...rest } = componentProps;
 	const accordion = useAccordion(accordionProps);
-	const attributes = mergeProps(accordion.getRootProps(), { className: classesAccordion.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
+	const attributes = mergeProps(accordion.getRootProps(), { className: classes.accordion.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$48.Provider, {
 		value: accordion,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -146,9 +147,9 @@ function Root$18(props) {
 //#endregion
 //#region src/components/accordion/modules/anatomy.ts
 const Accordion = Object.assign(Root$18, {
-	Provider: RootProvider$16,
-	Context: RootContext$45,
-	Item: Item$10,
+	Provider: RootProvider$17,
+	Context: RootContext$47,
+	Item: Item$11,
 	ItemTrigger,
 	ItemIndicator: ItemIndicator$3,
 	ItemContent
@@ -158,7 +159,7 @@ const Accordion = Object.assign(Root$18, {
 //#region src/components/app-bar/anatomy/headline.tsx
 function AppBarHeadline(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesAppBar.headline }, rest);
+	const attributes = mergeProps({ className: classes.appBar.headline }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -169,7 +170,7 @@ function AppBarHeadline(props) {
 //#region src/components/app-bar/anatomy/lead.tsx
 function AppBarLead(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesAppBar.lead }, rest);
+	const attributes = mergeProps({ className: classes.appBar.lead }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
 		...attributes,
 		children
@@ -180,7 +181,7 @@ function AppBarLead(props) {
 //#region src/components/app-bar/anatomy/root.tsx
 function AppBarRoot(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesAppBar.root }, rest);
+	const attributes = mergeProps({ className: classes.appBar.root }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("header", {
 		...attributes,
 		children
@@ -191,7 +192,7 @@ function AppBarRoot(props) {
 //#region src/components/app-bar/anatomy/toolbar.tsx
 function AppBarToolbar(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesAppBar.toolbar }, rest);
+	const attributes = mergeProps({ className: classes.appBar.toolbar }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -202,7 +203,7 @@ function AppBarToolbar(props) {
 //#region src/components/app-bar/anatomy/trail.tsx
 function AppBarTrail(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesAppBar.trail }, rest);
+	const attributes = mergeProps({ className: classes.appBar.trail }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
 		...attributes,
 		children
@@ -220,14 +221,14 @@ const AppBar = Object.assign(AppBarRoot, {
 
 //#endregion
 //#region src/components/avatar/modules/root-context.ts
-const RootContext$44 = createContext$1();
+const RootContext$46 = createContext$1();
 
 //#endregion
 //#region src/components/avatar/anatomy/fallback.tsx
 function Fallback(props) {
-	const avatar = use(RootContext$44);
+	const avatar = use(RootContext$46);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(avatar.getFallbackProps(), { className: classesAvatar.fallback }, rest);
+	const attributes = mergeProps(avatar.getFallbackProps(), { className: classes.avatar.fallback }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -237,16 +238,16 @@ function Fallback(props) {
 //#endregion
 //#region src/components/avatar/anatomy/image.tsx
 function Image(props) {
-	const avatar = use(RootContext$44);
+	const avatar = use(RootContext$46);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(avatar.getImageProps(), { className: classesAvatar.image }, rest);
+	const attributes = mergeProps(avatar.getImageProps(), { className: classes.avatar.image }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("img", { ...attributes });
 }
 
 //#endregion
 //#region src/components/avatar/anatomy/root-context.tsx
-function RootContext$43(props) {
-	const avatar = use(RootContext$44);
+function RootContext$45(props) {
+	const avatar = use(RootContext$46);
 	const { children } = props;
 	return children(avatar);
 }
@@ -255,8 +256,8 @@ function RootContext$43(props) {
 //#region src/components/avatar/anatomy/root-provider.tsx
 function AvatarRootProvider(props) {
 	const { element, children, value: avatar, ...rest } = props;
-	const attributes = mergeProps(avatar.getRootProps(), { className: classesAvatar.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
+	const attributes = mergeProps(avatar.getRootProps(), { className: classes.avatar.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
 		value: avatar,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -280,8 +281,8 @@ function AvatarRoot(props) {
 	const [avatarProps, componentProps] = splitProps$1(props);
 	const { element, children, ...rest } = componentProps;
 	const avatar = useAvatar(avatarProps);
-	const attributes = mergeProps(avatar.getRootProps(), { className: classesAvatar.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
+	const attributes = mergeProps(avatar.getRootProps(), { className: classes.avatar.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
 		value: avatar,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -294,21 +295,21 @@ function AvatarRoot(props) {
 //#region src/components/avatar/modules/anatomy.ts
 const Avatar = Object.assign(AvatarRoot, {
 	Provider: AvatarRootProvider,
-	Context: RootContext$43,
+	Context: RootContext$45,
 	Image,
 	Fallback
 });
 
 //#endregion
 //#region src/components/collapsible/modules/root-context.ts
-const RootContext$42 = createContext$1();
+const RootContext$44 = createContext$1();
 
 //#endregion
 //#region src/components/collapsible/anatomy/content.tsx
-function Content$9(props) {
-	const collapsible = use(RootContext$42);
+function Content$10(props) {
+	const collapsible = use(RootContext$44);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(collapsible.getContentProps(), { className: classesCollapsible.content }, rest);
+	const attributes = mergeProps(collapsible.getContentProps(), { className: classes.collapsible.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -317,10 +318,10 @@ function Content$9(props) {
 
 //#endregion
 //#region src/components/collapsible/anatomy/indicator.tsx
-function Indicator$3(props) {
-	const collapsible = use(RootContext$42);
+function Indicator$4(props) {
+	const collapsible = use(RootContext$44);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(collapsible.getIndicatorProps(), { className: classesCollapsible.indicator }, rest);
+	const attributes = mergeProps(collapsible.getIndicatorProps(), { className: classes.collapsible.indicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -329,8 +330,8 @@ function Indicator$3(props) {
 
 //#endregion
 //#region src/components/collapsible/anatomy/root-context.tsx
-function RootContext$41(props) {
-	const collapsible = use(RootContext$42);
+function RootContext$43(props) {
+	const collapsible = use(RootContext$44);
 	const { children } = props;
 	return children(collapsible);
 }
@@ -339,8 +340,8 @@ function RootContext$41(props) {
 //#region src/components/collapsible/anatomy/root-provider.tsx
 function CollapsibleRootProvider(props) {
 	const { element, children, value: collapsible, ...rest } = props;
-	const attributes = mergeProps(collapsible.getRootProps(), { className: classesCollapsible.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
+	const attributes = mergeProps(collapsible.getRootProps(), { className: classes.collapsible.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
 		value: collapsible,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -364,8 +365,8 @@ function CollapsibleRoot(props) {
 	const [collapsibleProps, componentProps] = splitProps$2(props);
 	const { element, children, ...rest } = componentProps;
 	const collapsible = useCollapsible(collapsibleProps);
-	const attributes = mergeProps(collapsible.getRootProps(), { className: classesCollapsible.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
+	const attributes = mergeProps(collapsible.getRootProps(), { className: classes.collapsible.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
 		value: collapsible,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -376,10 +377,10 @@ function CollapsibleRoot(props) {
 
 //#endregion
 //#region src/components/collapsible/anatomy/trigger.tsx
-function Trigger$9(props) {
-	const collapsible = use(RootContext$42);
+function Trigger$10(props) {
+	const collapsible = use(RootContext$44);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(collapsible.getTriggerProps(), { className: classesCollapsible.trigger }, rest);
+	const attributes = mergeProps(collapsible.getTriggerProps(), { className: classes.collapsible.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -390,22 +391,22 @@ function Trigger$9(props) {
 //#region src/components/collapsible/modules/anatomy.ts
 const Collapsible = Object.assign(CollapsibleRoot, {
 	Provider: CollapsibleRootProvider,
-	Context: RootContext$41,
-	Trigger: Trigger$9,
-	Indicator: Indicator$3,
-	Content: Content$9
+	Context: RootContext$43,
+	Trigger: Trigger$10,
+	Indicator: Indicator$4,
+	Content: Content$10
 });
 
 //#endregion
 //#region src/components/combobox/modules/root-context.ts
-const RootContext$40 = createContext$1();
+const RootContext$42 = createContext$1();
 
 //#endregion
 //#region src/components/combobox/anatomy/clear-trigger.tsx
 function ClearTrigger$2(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getClearTriggerProps(), { className: classesCombobox.clearTrigger }, rest);
+	const attributes = mergeProps(combobox.getClearTriggerProps(), { className: classes.combobox.clearTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -414,10 +415,10 @@ function ClearTrigger$2(props) {
 
 //#endregion
 //#region src/components/combobox/anatomy/content.tsx
-function Content$8(props) {
-	const combobox = use(RootContext$40);
+function Content$9(props) {
+	const combobox = use(RootContext$42);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getContentProps(), { className: classesCombobox.content }, rest);
+	const attributes = mergeProps(combobox.getContentProps(), { className: classes.combobox.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("ul", {
 		...attributes,
 		children
@@ -427,9 +428,9 @@ function Content$8(props) {
 //#endregion
 //#region src/components/combobox/anatomy/control.tsx
 function Control$7(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getControlProps(), { className: classesCombobox.control }, rest);
+	const attributes = mergeProps(combobox.getControlProps(), { className: classes.combobox.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -439,9 +440,9 @@ function Control$7(props) {
 //#endregion
 //#region src/components/combobox/anatomy/input.tsx
 function Input$3(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(combobox.getInputProps(), { className: classesCombobox.input }, rest);
+	const attributes = mergeProps(combobox.getInputProps(), { className: classes.combobox.input }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -452,13 +453,13 @@ const ItemGroupContext$2 = createContext$1();
 //#endregion
 //#region src/components/combobox/anatomy/item-group-label.tsx
 function ItemGroupLabel$2(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const [itemGroupLabelProps, componentProps] = splitItemGroupLabelProps({
 		htmlFor: use(ItemGroupContext$2).id,
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(combobox.getItemGroupLabelProps(itemGroupLabelProps), { className: classesCombobox.itemGroupLabel }, rest);
+	const attributes = mergeProps(combobox.getItemGroupLabelProps(itemGroupLabelProps), { className: classes.combobox.itemGroupLabel }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -468,13 +469,13 @@ function ItemGroupLabel$2(props) {
 //#endregion
 //#region src/components/combobox/anatomy/item-group.tsx
 function ItemGroup$3(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const [itemGroupProps, componentProps] = splitItemGroupProps({
 		id: useId(),
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(combobox.getItemGroupProps(itemGroupProps), { className: classesCombobox.itemGroup }, rest);
+	const attributes = mergeProps(combobox.getItemGroupProps(itemGroupProps), { className: classes.combobox.itemGroup }, rest);
 	return /* @__PURE__ */ jsx(ItemGroupContext$2.Provider, {
 		value: itemGroupProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -506,15 +507,15 @@ function Check(props) {
 
 //#endregion
 //#region src/components/combobox/modules/item-context.ts
-const ItemContext$5 = createContext$1();
+const ItemContext$6 = createContext$1();
 
 //#endregion
 //#region src/components/combobox/anatomy/item-indicator.tsx
 function ItemIndicator$2(props) {
-	const combobox = use(RootContext$40);
-	const itemProps = use(ItemContext$5);
+	const combobox = use(RootContext$42);
+	const itemProps = use(ItemContext$6);
 	const { element, children = /* @__PURE__ */ jsx(Check, { className: "size-4" }), ...rest } = props;
-	const attributes = mergeProps(combobox.getItemIndicatorProps(itemProps), { className: classesCombobox.itemIndicator }, rest);
+	const attributes = mergeProps(combobox.getItemIndicatorProps(itemProps), { className: classes.combobox.itemIndicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -524,10 +525,10 @@ function ItemIndicator$2(props) {
 //#endregion
 //#region src/components/combobox/anatomy/item-text.tsx
 function ItemText$4(props) {
-	const combobox = use(RootContext$40);
-	const itemProps = use(ItemContext$5);
+	const combobox = use(RootContext$42);
+	const itemProps = use(ItemContext$6);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getItemTextProps(itemProps), { className: classesCombobox.itemText }, rest);
+	const attributes = mergeProps(combobox.getItemTextProps(itemProps), { className: classes.combobox.itemText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -536,12 +537,12 @@ function ItemText$4(props) {
 
 //#endregion
 //#region src/components/combobox/anatomy/item.tsx
-function Item$9(props) {
-	const combobox = use(RootContext$40);
+function Item$10(props) {
+	const combobox = use(RootContext$42);
 	const [itemProps, componentProps] = splitItemProps$1(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(combobox.getItemProps(itemProps), { className: classesCombobox.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$5.Provider, {
+	const attributes = mergeProps(combobox.getItemProps(itemProps), { className: classes.combobox.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$6.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
 			...attributes,
@@ -553,9 +554,9 @@ function Item$9(props) {
 //#endregion
 //#region src/components/combobox/anatomy/label.tsx
 function Label$10(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getLabelProps(), { className: classesCombobox.label }, rest);
+	const attributes = mergeProps(combobox.getLabelProps(), { className: classes.combobox.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -565,9 +566,9 @@ function Label$10(props) {
 //#endregion
 //#region src/components/combobox/anatomy/positioner.tsx
 function Positioner$6(props) {
-	const combobox = use(RootContext$40);
+	const combobox = use(RootContext$42);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(combobox.getPositionerProps(), { className: classesCombobox.positioner }, rest);
+	const attributes = mergeProps(combobox.getPositionerProps(), { className: classes.combobox.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -576,8 +577,8 @@ function Positioner$6(props) {
 
 //#endregion
 //#region src/components/combobox/anatomy/root-context.tsx
-function RootContext$39(props) {
-	const combobox = use(RootContext$40);
+function RootContext$41(props) {
+	const combobox = use(RootContext$42);
 	const { children } = props;
 	return children(combobox);
 }
@@ -593,10 +594,10 @@ function useCombobox(props = {}) {
 
 //#endregion
 //#region src/components/combobox/anatomy/root-provider.tsx
-function RootProvider$15(props) {
+function RootProvider$16(props) {
 	const { element, children, value: combobox, ...rest } = props;
-	const attributes = mergeProps(combobox.getRootProps(), { className: classesCombobox.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
+	const attributes = mergeProps(combobox.getRootProps(), { className: classes.combobox.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
 		value: combobox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -611,8 +612,8 @@ function Root$17(props) {
 	const [comboboxProps, componentProps] = splitProps$3(props);
 	const { element, children, ...rest } = componentProps;
 	const combobox = useCombobox(comboboxProps);
-	const attributes = mergeProps(combobox.getRootProps(), { className: classesCombobox.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
+	const attributes = mergeProps(combobox.getRootProps(), { className: classes.combobox.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
 		value: combobox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -643,10 +644,10 @@ function ChevronDown(props) {
 
 //#endregion
 //#region src/components/combobox/anatomy/trigger.tsx
-function Trigger$8(props) {
-	const combobox = use(RootContext$40);
+function Trigger$9(props) {
+	const combobox = use(RootContext$42);
 	const { element, children = /* @__PURE__ */ jsx(ChevronDown, {}), ...rest } = props;
-	const attributes = mergeProps(combobox.getTriggerProps(), { className: classesCombobox.trigger }, rest);
+	const attributes = mergeProps(combobox.getTriggerProps(), { className: classes.combobox.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -656,32 +657,32 @@ function Trigger$8(props) {
 //#endregion
 //#region src/components/combobox/modules/anatomy.ts
 const Combobox = Object.assign(Root$17, {
-	Provider: RootProvider$15,
-	Context: RootContext$39,
+	Provider: RootProvider$16,
+	Context: RootContext$41,
 	Label: Label$10,
 	Control: Control$7,
 	Input: Input$3,
-	Trigger: Trigger$8,
+	Trigger: Trigger$9,
 	ClearTrigger: ClearTrigger$2,
 	Positioner: Positioner$6,
-	Content: Content$8,
+	Content: Content$9,
 	ItemGroup: ItemGroup$3,
 	ItemGroupLabel: ItemGroupLabel$2,
-	Item: Item$9,
+	Item: Item$10,
 	ItemText: ItemText$4,
 	ItemIndicator: ItemIndicator$2
 });
 
 //#endregion
 //#region src/components/date-picker/modules/root-context.ts
-const RootContext$38 = createContext$1();
+const RootContext$40 = createContext$1();
 
 //#endregion
 //#region src/components/date-picker/anatomy/content.tsx
-function Content$7(props) {
-	const datePicker = use(RootContext$38);
+function Content$8(props) {
+	const datePicker = use(RootContext$40);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getContentProps(), { className: classesDatePicker.content }, rest);
+	const attributes = mergeProps(datePicker.getContentProps(), { className: classes.datePicker.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -691,9 +692,9 @@ function Content$7(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/control.tsx
 function Control$6(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getControlProps(), { className: classesDatePicker.control }, rest);
+	const attributes = mergeProps(datePicker.getControlProps(), { className: classes.datePicker.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -703,19 +704,19 @@ function Control$6(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/input.tsx
 function Input$2(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const [inputProps, componentProps] = splitInputProps(props);
 	const { element, ...rest } = componentProps;
-	const attributes = mergeProps(datePicker.getInputProps(inputProps), { className: classesDatePicker.input }, rest);
+	const attributes = mergeProps(datePicker.getInputProps(inputProps), { className: classes.datePicker.input }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
 //#endregion
 //#region src/components/date-picker/anatomy/label.tsx
 function Label$9(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getLabelProps(), { className: classesDatePicker.label }, rest);
+	const attributes = mergeProps(datePicker.getLabelProps(), { className: classes.datePicker.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -725,9 +726,9 @@ function Label$9(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/month-select.tsx
 function MonthSelect(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(datePicker.getMonthSelectProps(), { className: classesDatePicker.monthSelect }, rest);
+	const attributes = mergeProps(datePicker.getMonthSelectProps(), { className: classes.datePicker.monthSelect }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("select", {
 		...attributes,
 		children: datePicker.getMonths().map((month, i) => /* @__PURE__ */ jsx("option", {
@@ -763,11 +764,11 @@ const ViewContext = createContext$1({ view: "day" });
 
 //#endregion
 //#region src/components/date-picker/anatomy/next-trigger.tsx
-function NextTrigger$1(props) {
-	const datePicker = use(RootContext$38);
+function NextTrigger$2(props) {
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children = /* @__PURE__ */ jsx(ChevronRight, {}), ...rest } = props;
-	const attributes = mergeProps(datePicker.getNextTriggerProps(viewProps), { className: classesDatePicker.nextTrigger }, rest);
+	const attributes = mergeProps(datePicker.getNextTriggerProps(viewProps), { className: classes.datePicker.nextTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -777,9 +778,9 @@ function NextTrigger$1(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/positioner.tsx
 function Positioner$5(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getPositionerProps(), { className: classesDatePicker.positioner }, rest);
+	const attributes = mergeProps(datePicker.getPositionerProps(), { className: classes.datePicker.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -789,10 +790,10 @@ function Positioner$5(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/preset-trigger.tsx
 function PresetTrigger(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const [presetTriggerProps, componentProps] = splitPresetTriggerProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(datePicker.getPresetTriggerProps(presetTriggerProps), { className: classesDatePicker.presetTrigger }, rest);
+	const attributes = mergeProps(datePicker.getPresetTriggerProps(presetTriggerProps), { className: classes.datePicker.presetTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -821,11 +822,11 @@ function ChevronLeft(props) {
 
 //#endregion
 //#region src/components/date-picker/anatomy/prev-trigger.tsx
-function PrevTrigger$1(props) {
-	const datePicker = use(RootContext$38);
+function PrevTrigger$2(props) {
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children = /* @__PURE__ */ jsx(ChevronLeft, {}), ...rest } = props;
-	const attributes = mergeProps(datePicker.getPrevTriggerProps(viewProps), { className: classesDatePicker.prevTrigger }, rest);
+	const attributes = mergeProps(datePicker.getPrevTriggerProps(viewProps), { className: classes.datePicker.prevTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -835,10 +836,10 @@ function PrevTrigger$1(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/range-text.tsx
 function RangeText(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const rangeText = Array.from(new Set([datePicker.visibleRangeText.start, datePicker.visibleRangeText.end])).join(" - ");
 	const { element, children = rangeText, ...rest } = props;
-	const attributes = mergeProps(datePicker.getRangeTextProps(), { className: classesDatePicker.rangeText }, rest);
+	const attributes = mergeProps(datePicker.getRangeTextProps(), { className: classes.datePicker.rangeText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -847,8 +848,8 @@ function RangeText(props) {
 
 //#endregion
 //#region src/components/date-picker/anatomy/root-context.tsx
-function RootContext$37(props) {
-	const datePicker = use(RootContext$38);
+function RootContext$39(props) {
+	const datePicker = use(RootContext$40);
 	const { children } = props;
 	return children(datePicker);
 }
@@ -864,10 +865,10 @@ function useDatePicker(props = {}) {
 
 //#endregion
 //#region src/components/date-picker/anatomy/root-provider.tsx
-function RootProvider$14(props) {
+function RootProvider$15(props) {
 	const { element, children, value: datePicker, ...rest } = props;
-	const attributes = mergeProps(datePicker.getRootProps(), { className: classesDatePicker.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
+	const attributes = mergeProps(datePicker.getRootProps(), { className: classes.datePicker.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
 		value: datePicker,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -882,8 +883,8 @@ function Root$16(props) {
 	const [datePickerProps, componentProps] = splitProps$4(props);
 	const { element, children, ...rest } = componentProps;
 	const datePicker = useDatePicker(datePickerProps);
-	const attributes = mergeProps(datePicker.getRootProps(), { className: classesDatePicker.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
+	const attributes = mergeProps(datePicker.getRootProps(), { className: classes.datePicker.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
 		value: datePicker,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -895,10 +896,10 @@ function Root$16(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table-body.tsx
 function TableBody(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getTableBodyProps(viewProps), { className: classesDatePicker.tableBody }, rest);
+	const attributes = mergeProps(datePicker.getTableBodyProps(viewProps), { className: classes.datePicker.tableBody }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("tbody", {
 		...attributes,
 		children
@@ -912,7 +913,7 @@ const TableCellContext = createContext$1();
 //#endregion
 //#region src/components/date-picker/anatomy/table-cell-trigger.tsx
 function TableCellTrigger(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const tableCellProps = use(TableCellContext);
 	const { element, children, ...rest } = props;
@@ -923,7 +924,7 @@ function TableCellTrigger(props) {
 			case "year": return datePicker.getYearTableCellTriggerProps(tableCellProps$1);
 		}
 	}
-	const attributes = mergeProps(getTableCellTriggerProps(tableCellProps), { className: classesDatePicker.tableCellTrigger }, rest);
+	const attributes = mergeProps(getTableCellTriggerProps(tableCellProps), { className: classes.datePicker.tableCellTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -933,7 +934,7 @@ function TableCellTrigger(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table-cell.tsx
 function TableCell(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const [tableCellProps, componentProps] = splitTableCellProps(props);
 	const { element, children, ...rest } = componentProps;
@@ -944,7 +945,7 @@ function TableCell(props) {
 			case "year": return datePicker.getYearTableCellProps(tableCellProps$1);
 		}
 	}
-	const attributes = mergeProps(getTableCellProps(tableCellProps), { className: classesDatePicker.tableCell }, rest);
+	const attributes = mergeProps(getTableCellProps(tableCellProps), { className: classes.datePicker.tableCell }, rest);
 	return /* @__PURE__ */ jsx(TableCellContext.Provider, {
 		value: tableCellProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("td", {
@@ -957,10 +958,10 @@ function TableCell(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table-head.tsx
 function TableHead(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getTableHeadProps(viewProps), { className: classesDatePicker.tableHead }, rest);
+	const attributes = mergeProps(datePicker.getTableHeadProps(viewProps), { className: classes.datePicker.tableHead }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("thead", {
 		...attributes,
 		children
@@ -970,10 +971,10 @@ function TableHead(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table-header.tsx
 function TableHeader(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getTableHeaderProps(viewProps), { className: classesDatePicker.tableHeader }, rest);
+	const attributes = mergeProps(datePicker.getTableHeaderProps(viewProps), { className: classes.datePicker.tableHeader }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("th", {
 		...attributes,
 		children
@@ -983,10 +984,10 @@ function TableHeader(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table-row.tsx
 function TableRow(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getTableRowProps(viewProps), { className: classesDatePicker.tableRow }, rest);
+	const attributes = mergeProps(datePicker.getTableRowProps(viewProps), { className: classes.datePicker.tableRow }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("tr", {
 		...attributes,
 		children
@@ -996,10 +997,10 @@ function TableRow(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/table.tsx
 function Table(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getTableProps(viewProps), { className: classesDatePicker.table }, rest);
+	const attributes = mergeProps(datePicker.getTableProps(viewProps), { className: classes.datePicker.table }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("table", {
 		...attributes,
 		children
@@ -1039,10 +1040,10 @@ function Calendar(props) {
 
 //#endregion
 //#region src/components/date-picker/anatomy/trigger.tsx
-function Trigger$7(props) {
-	const datePicker = use(RootContext$38);
+function Trigger$8(props) {
+	const datePicker = use(RootContext$40);
 	const { element, children = /* @__PURE__ */ jsx(Calendar, {}), ...rest } = props;
-	const attributes = mergeProps(datePicker.getTriggerProps(), { className: classesDatePicker.trigger }, rest);
+	const attributes = mergeProps(datePicker.getTriggerProps(), { className: classes.datePicker.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1052,10 +1053,10 @@ function Trigger$7(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/view-control.tsx
 function ViewControl(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getViewControlProps(viewProps), { className: classesDatePicker.viewControl }, rest);
+	const attributes = mergeProps(datePicker.getViewControlProps(viewProps), { className: classes.datePicker.viewControl }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1065,10 +1066,10 @@ function ViewControl(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/view-trigger.tsx
 function ViewTrigger(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const viewProps = use(ViewContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(datePicker.getViewTriggerProps(viewProps), { className: classesDatePicker.viewTrigger }, rest);
+	const attributes = mergeProps(datePicker.getViewTriggerProps(viewProps), { className: classes.datePicker.viewTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1078,10 +1079,10 @@ function ViewTrigger(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/view.tsx
 function View(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const [viewProps, componentProps] = splitViewProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(datePicker.getViewProps(viewProps), { className: classesDatePicker.view }, rest);
+	const attributes = mergeProps(datePicker.getViewProps(viewProps), { className: classes.datePicker.view }, rest);
 	return /* @__PURE__ */ jsx(ViewContext.Provider, {
 		value: viewProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1094,9 +1095,9 @@ function View(props) {
 //#endregion
 //#region src/components/date-picker/anatomy/year-select.tsx
 function YearSelect(props) {
-	const datePicker = use(RootContext$38);
+	const datePicker = use(RootContext$40);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(datePicker.getYearSelectProps(), { className: classesDatePicker.yearSelect }, rest);
+	const attributes = mergeProps(datePicker.getYearSelectProps(), { className: classes.datePicker.yearSelect }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("select", {
 		...attributes,
 		children: datePicker.getYears().map((year, i) => /* @__PURE__ */ jsx("option", {
@@ -1109,23 +1110,23 @@ function YearSelect(props) {
 //#endregion
 //#region src/components/date-picker/modules/anatomy.ts
 const DatePicker = Object.assign(Root$16, {
-	Provider: RootProvider$14,
-	Context: RootContext$37,
+	Provider: RootProvider$15,
+	Context: RootContext$39,
 	Label: Label$9,
 	Control: Control$6,
 	PresetTrigger,
 	Input: Input$2,
-	Trigger: Trigger$7,
+	Trigger: Trigger$8,
 	Positioner: Positioner$5,
-	Content: Content$7,
+	Content: Content$8,
 	YearSelect,
 	MonthSelect,
 	View,
 	ViewControl,
-	PrevTrigger: PrevTrigger$1,
+	PrevTrigger: PrevTrigger$2,
 	ViewTrigger,
 	RangeText,
-	NextTrigger: NextTrigger$1,
+	NextTrigger: NextTrigger$2,
 	Table,
 	TableHead,
 	TableRow,
@@ -1137,23 +1138,23 @@ const DatePicker = Object.assign(Root$16, {
 
 //#endregion
 //#region src/components/dialog/modules/root-context.ts
-const RootContext$36 = createContext$1();
+const RootContext$38 = createContext$1();
 
 //#endregion
 //#region src/components/dialog/anatomy/backdrop.tsx
 function Backdrop(props) {
-	const dialog = use(RootContext$36);
+	const dialog = use(RootContext$38);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(dialog.getBackdropProps(), { className: classesDialog.backdrop }, rest);
+	const attributes = mergeProps(dialog.getBackdropProps(), { className: classes.dialog.backdrop }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", { ...attributes });
 }
 
 //#endregion
 //#region src/components/dialog/anatomy/close-trigger.tsx
 function CloseTrigger$3(props) {
-	const dialog = use(RootContext$36);
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getCloseTriggerProps(), { className: classesDialog.closeTrigger }, rest);
+	const attributes = mergeProps(dialog.getCloseTriggerProps(), { className: classes.dialog.closeTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1162,10 +1163,10 @@ function CloseTrigger$3(props) {
 
 //#endregion
 //#region src/components/dialog/anatomy/content.tsx
-function Content$6(props) {
-	const dialog = use(RootContext$36);
+function Content$7(props) {
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getContentProps(), { className: classesDialog.content }, rest);
+	const attributes = mergeProps(dialog.getContentProps(), { className: classes.dialog.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1175,9 +1176,9 @@ function Content$6(props) {
 //#endregion
 //#region src/components/dialog/anatomy/description.tsx
 function Description$2(props) {
-	const dialog = use(RootContext$36);
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getDescriptionProps(), { className: classesDialog.description }, rest);
+	const attributes = mergeProps(dialog.getDescriptionProps(), { className: classes.dialog.description }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1187,9 +1188,9 @@ function Description$2(props) {
 //#endregion
 //#region src/components/dialog/anatomy/positioner.tsx
 function Positioner$4(props) {
-	const dialog = use(RootContext$36);
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getPositionerProps(), { className: classesDialog.positioner }, rest);
+	const attributes = mergeProps(dialog.getPositionerProps(), { className: classes.dialog.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1198,17 +1199,17 @@ function Positioner$4(props) {
 
 //#endregion
 //#region src/components/dialog/anatomy/root-context.tsx
-function RootContext$35(props) {
-	const dialog = use(RootContext$36);
+function RootContext$37(props) {
+	const dialog = use(RootContext$38);
 	const { children } = props;
 	return children(dialog);
 }
 
 //#endregion
 //#region src/components/dialog/anatomy/root-provider.tsx
-function RootProvider$13(props) {
+function RootProvider$14(props) {
 	const { children, value: dialog } = props;
-	return /* @__PURE__ */ jsx(RootContext$36.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
 		value: dialog,
 		children
 	});
@@ -1229,7 +1230,7 @@ function Root$15(props) {
 	const [dialogProps, componentProps] = splitProps$5(props);
 	const { children } = componentProps;
 	const dialog = useDialog(dialogProps);
-	return /* @__PURE__ */ jsx(RootContext$36.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
 		value: dialog,
 		children
 	});
@@ -1238,9 +1239,9 @@ function Root$15(props) {
 //#endregion
 //#region src/components/dialog/anatomy/title.tsx
 function Title$3(props) {
-	const dialog = use(RootContext$36);
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getTitleProps(), { className: classesDialog.title }, rest);
+	const attributes = mergeProps(dialog.getTitleProps(), { className: classes.dialog.title }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1249,10 +1250,10 @@ function Title$3(props) {
 
 //#endregion
 //#region src/components/dialog/anatomy/trigger.tsx
-function Trigger$6(props) {
-	const dialog = use(RootContext$36);
+function Trigger$7(props) {
+	const dialog = use(RootContext$38);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(dialog.getTriggerProps(), { className: classesDialog.trigger }, rest);
+	const attributes = mergeProps(dialog.getTriggerProps(), { className: classes.dialog.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1262,12 +1263,12 @@ function Trigger$6(props) {
 //#endregion
 //#region src/components/dialog/modules/anatomy.ts
 const Dialog = Object.assign(Root$15, {
-	Provider: RootProvider$13,
-	Context: RootContext$35,
-	Trigger: Trigger$6,
+	Provider: RootProvider$14,
+	Context: RootContext$37,
+	Trigger: Trigger$7,
 	Backdrop,
 	Positioner: Positioner$4,
-	Content: Content$6,
+	Content: Content$7,
 	Title: Title$3,
 	Description: Description$2,
 	CloseTrigger: CloseTrigger$3
@@ -1275,14 +1276,14 @@ const Dialog = Object.assign(Root$15, {
 
 //#endregion
 //#region src/components/file-upload/modules/root-context.ts
-const RootContext$34 = createContext$1();
+const RootContext$36 = createContext$1();
 
 //#endregion
 //#region src/components/file-upload/anatomy/clear-trigger.tsx
 function ClearTrigger$1(props) {
-	const fileUpload = use(RootContext$34);
+	const fileUpload = use(RootContext$36);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getClearTriggerProps(), { className: classesFileUpload.clearTrigger }, rest);
+	const attributes = mergeProps(fileUpload.getClearTriggerProps(), { className: classes.fileUpload.clearTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1292,9 +1293,9 @@ function ClearTrigger$1(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/dropzone.tsx
 function Dropzone(props) {
-	const fileUpload = use(RootContext$34);
+	const fileUpload = use(RootContext$36);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getDropzoneProps(), { className: classesFileUpload.dropzone }, rest);
+	const attributes = mergeProps(fileUpload.getDropzoneProps(), { className: classes.fileUpload.dropzone }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1304,23 +1305,23 @@ function Dropzone(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/hidden-input.tsx
 function HiddenInput$4(props) {
-	const fileUpload = use(RootContext$34);
+	const fileUpload = use(RootContext$36);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getHiddenInputProps(), { className: classesFileUpload.hiddenInput }, rest);
+	const attributes = mergeProps(fileUpload.getHiddenInputProps(), { className: classes.fileUpload.hiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
 //#endregion
 //#region src/components/file-upload/modules/item-context.ts
-const ItemContext$4 = createContext$1();
+const ItemContext$5 = createContext$1();
 
 //#endregion
 //#region src/components/file-upload/anatomy/item-delete-trigger.tsx
 function ItemDeleteTrigger$1(props) {
-	const fileUpload = use(RootContext$34);
-	const itemProps = use(ItemContext$4);
+	const fileUpload = use(RootContext$36);
+	const itemProps = use(ItemContext$5);
 	const { element, children = /* @__PURE__ */ jsx(Fragment, { children: "×" }), ...rest } = props;
-	const attributes = mergeProps(fileUpload.getItemDeleteTriggerProps(itemProps), { className: classesFileUpload.itemDeleteTrigger }, rest);
+	const attributes = mergeProps(fileUpload.getItemDeleteTriggerProps(itemProps), { className: classes.fileUpload.itemDeleteTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1330,9 +1331,9 @@ function ItemDeleteTrigger$1(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/item-group.tsx
 function ItemGroup$2(props) {
-	const fileUpload = use(RootContext$34);
+	const fileUpload = use(RootContext$36);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getItemGroupProps(), { className: classesFileUpload.itemGroup }, rest);
+	const attributes = mergeProps(fileUpload.getItemGroupProps(), { className: classes.fileUpload.itemGroup }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("ul", {
 		...attributes,
 		children
@@ -1342,10 +1343,10 @@ function ItemGroup$2(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/item-name.tsx
 function ItemName(props) {
-	const fileUpload = use(RootContext$34);
-	const itemProps = use(ItemContext$4);
+	const fileUpload = use(RootContext$36);
+	const itemProps = use(ItemContext$5);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getItemNameProps(itemProps), { className: classesFileUpload.itemName }, rest);
+	const attributes = mergeProps(fileUpload.getItemNameProps(itemProps), { className: classes.fileUpload.itemName }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1355,10 +1356,10 @@ function ItemName(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/item-size-text.tsx
 function ItemSizeText(props) {
-	const fileUpload = use(RootContext$34);
-	const itemProps = use(ItemContext$4);
+	const fileUpload = use(RootContext$36);
+	const itemProps = use(ItemContext$5);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getItemSizeTextProps(itemProps), { className: classesFileUpload.itemSizeText }, rest);
+	const attributes = mergeProps(fileUpload.getItemSizeTextProps(itemProps), { className: classes.fileUpload.itemSizeText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1367,12 +1368,12 @@ function ItemSizeText(props) {
 
 //#endregion
 //#region src/components/file-upload/anatomy/item.tsx
-function Item$8(props) {
-	const fileUpload = use(RootContext$34);
+function Item$9(props) {
+	const fileUpload = use(RootContext$36);
 	const [itemProps, componentProps] = splitItemProps$2(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(fileUpload.getItemProps(itemProps), { className: classesFileUpload.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$4.Provider, {
+	const attributes = mergeProps(fileUpload.getItemProps(itemProps), { className: classes.fileUpload.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$5.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
 			...attributes,
@@ -1384,9 +1385,9 @@ function Item$8(props) {
 //#endregion
 //#region src/components/file-upload/anatomy/label.tsx
 function Label$8(props) {
-	const fileUpload = use(RootContext$34);
+	const fileUpload = use(RootContext$36);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getLabelProps(), { className: classesFileUpload.label }, rest);
+	const attributes = mergeProps(fileUpload.getLabelProps(), { className: classes.fileUpload.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -1395,18 +1396,18 @@ function Label$8(props) {
 
 //#endregion
 //#region src/components/file-upload/anatomy/root-context.tsx
-function RootContext$33(props) {
-	const fileUpload = use(RootContext$34);
+function RootContext$35(props) {
+	const fileUpload = use(RootContext$36);
 	const { children } = props;
 	return children(fileUpload);
 }
 
 //#endregion
 //#region src/components/file-upload/anatomy/root-provider.tsx
-function RootProvider$12(props) {
+function RootProvider$13(props) {
 	const { element, children, value: fileUpload, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getRootProps(), { className: classesFileUpload.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
+	const attributes = mergeProps(fileUpload.getRootProps(), { className: classes.fileUpload.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$36.Provider, {
 		value: fileUpload,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -1430,8 +1431,8 @@ function Root$14(props) {
 	const [fileUploadProps, componentProps] = splitProps$6(props);
 	const { element, children, ...rest } = componentProps;
 	const fileUpload = useFileUpload(fileUploadProps);
-	const attributes = mergeProps(fileUpload.getRootProps(), { className: classesFileUpload.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
+	const attributes = mergeProps(fileUpload.getRootProps(), { className: classes.fileUpload.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$36.Provider, {
 		value: fileUpload,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -1442,10 +1443,10 @@ function Root$14(props) {
 
 //#endregion
 //#region src/components/file-upload/anatomy/trigger.tsx
-function Trigger$5(props) {
-	const fileUpload = use(RootContext$34);
+function Trigger$6(props) {
+	const fileUpload = use(RootContext$36);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getTriggerProps(), { className: classesFileUpload.trigger }, rest);
+	const attributes = mergeProps(fileUpload.getTriggerProps(), { className: classes.fileUpload.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1455,15 +1456,15 @@ function Trigger$5(props) {
 //#endregion
 //#region src/components/file-upload/modules/anatomy.ts
 const FileUpload = Object.assign(Root$14, {
-	Provider: RootProvider$12,
-	Context: RootContext$33,
+	Provider: RootProvider$13,
+	Context: RootContext$35,
 	Label: Label$8,
 	Dropzone,
-	Trigger: Trigger$5,
+	Trigger: Trigger$6,
 	ClearTrigger: ClearTrigger$1,
 	HiddenInput: HiddenInput$4,
 	ItemGroup: ItemGroup$2,
-	Item: Item$8,
+	Item: Item$9,
 	ItemName,
 	ItemSizeText,
 	ItemDeleteTrigger: ItemDeleteTrigger$1
@@ -1471,14 +1472,14 @@ const FileUpload = Object.assign(Root$14, {
 
 //#endregion
 //#region src/components/floating-panel/modules/root-context.ts
-const RootContext$32 = createContext$1();
+const RootContext$34 = createContext$1();
 
 //#endregion
 //#region src/components/floating-panel/anatomy/body.tsx
 function Body(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getBodyProps(), { className: classesFloatingPanel.body }, rest);
+	const attributes = mergeProps(floatingPanel.getBodyProps(), { className: classes.floatingPanel.body }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1488,9 +1489,9 @@ function Body(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/close-trigger.tsx
 function CloseTrigger$2(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getCloseTriggerProps(), { className: classesFloatingPanel.closeTrigger }, rest);
+	const attributes = mergeProps(floatingPanel.getCloseTriggerProps(), { className: classes.floatingPanel.closeTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1499,10 +1500,10 @@ function CloseTrigger$2(props) {
 
 //#endregion
 //#region src/components/floating-panel/anatomy/content.tsx
-function Content$5(props) {
-	const floatingPanel = use(RootContext$32);
+function Content$6(props) {
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getContentProps(), { className: classesFloatingPanel.content }, rest);
+	const attributes = mergeProps(floatingPanel.getContentProps(), { className: classes.floatingPanel.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1512,9 +1513,9 @@ function Content$5(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/control.tsx
 function Control$5(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getControlProps(), { className: classesFloatingPanel.control }, rest);
+	const attributes = mergeProps(floatingPanel.getControlProps(), { className: classes.floatingPanel.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1524,9 +1525,9 @@ function Control$5(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/drag-trigger.tsx
 function DragTrigger(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getDragTriggerProps(), { className: classesFloatingPanel.dragTrigger }, rest);
+	const attributes = mergeProps(floatingPanel.getDragTriggerProps(), { className: classes.floatingPanel.dragTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1536,9 +1537,9 @@ function DragTrigger(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/header.tsx
 function Header(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getHeaderProps(), { className: classesFloatingPanel.header }, rest);
+	const attributes = mergeProps(floatingPanel.getHeaderProps(), { className: classes.floatingPanel.header }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1548,9 +1549,9 @@ function Header(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/positioner.tsx
 function Positioner$3(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getPositionerProps(), { className: classesFloatingPanel.positioner }, rest);
+	const attributes = mergeProps(floatingPanel.getPositionerProps(), { className: classes.floatingPanel.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1560,10 +1561,10 @@ function Positioner$3(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/resize-trigger.tsx
 function ResizeTrigger(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const [resizeTriggerProps, componentProps] = splitResizeTriggerProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(floatingPanel.getResizeTriggerProps(resizeTriggerProps), { className: classesFloatingPanel.resizeTrigger }, rest);
+	const attributes = mergeProps(floatingPanel.getResizeTriggerProps(resizeTriggerProps), { className: classes.floatingPanel.resizeTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1572,17 +1573,17 @@ function ResizeTrigger(props) {
 
 //#endregion
 //#region src/components/floating-panel/anatomy/root-context.tsx
-function RootContext$31(props) {
-	const floatingPanel = use(RootContext$32);
+function RootContext$33(props) {
+	const floatingPanel = use(RootContext$34);
 	const { children } = props;
 	return children(floatingPanel);
 }
 
 //#endregion
 //#region src/components/floating-panel/anatomy/root-provider.tsx
-function RootProvider$11(props) {
+function RootProvider$12(props) {
 	const { children, value: floatingPanel } = props;
-	return /* @__PURE__ */ jsx(RootContext$32.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
 		value: floatingPanel,
 		children
 	});
@@ -1603,7 +1604,7 @@ function Root$13(props) {
 	const [floatingPanelProps, componentProps] = splitProps$7(props);
 	const { children } = componentProps;
 	const floatingPanel = useFloatingPanel(floatingPanelProps);
-	return /* @__PURE__ */ jsx(RootContext$32.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
 		value: floatingPanel,
 		children
 	});
@@ -1612,9 +1613,9 @@ function Root$13(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/stage-trigger.tsx
 function StageTrigger(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, stage, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getStageTriggerProps({ stage }), { className: classesFloatingPanel.stageTrigger }, rest);
+	const attributes = mergeProps(floatingPanel.getStageTriggerProps({ stage }), { className: classes.floatingPanel.stageTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1624,9 +1625,9 @@ function StageTrigger(props) {
 //#endregion
 //#region src/components/floating-panel/anatomy/title.tsx
 function Title$2(props) {
-	const floatingPanel = use(RootContext$32);
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getTitleProps(), { className: classesFloatingPanel.title }, rest);
+	const attributes = mergeProps(floatingPanel.getTitleProps(), { className: classes.floatingPanel.title }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1635,10 +1636,10 @@ function Title$2(props) {
 
 //#endregion
 //#region src/components/floating-panel/anatomy/trigger.tsx
-function Trigger$4(props) {
-	const floatingPanel = use(RootContext$32);
+function Trigger$5(props) {
+	const floatingPanel = use(RootContext$34);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(floatingPanel.getTriggerProps(), { className: classesFloatingPanel.trigger }, rest);
+	const attributes = mergeProps(floatingPanel.getTriggerProps(), { className: classes.floatingPanel.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1648,11 +1649,11 @@ function Trigger$4(props) {
 //#endregion
 //#region src/components/floating-panel/modules/anatomy.ts
 const FloatingPanel = Object.assign(Root$13, {
-	Provider: RootProvider$11,
-	Context: RootContext$31,
-	Trigger: Trigger$4,
+	Provider: RootProvider$12,
+	Context: RootContext$33,
+	Trigger: Trigger$5,
 	Positioner: Positioner$3,
-	Content: Content$5,
+	Content: Content$6,
 	DragTrigger,
 	Header,
 	Title: Title$2,
@@ -1665,14 +1666,14 @@ const FloatingPanel = Object.assign(Root$13, {
 
 //#endregion
 //#region src/components/listbox/modules/root-context.ts
-const RootContext$30 = createContext$1();
+const RootContext$32 = createContext$1();
 
 //#endregion
 //#region src/components/listbox/anatomy/content.tsx
-function Content$4(props) {
-	const listbox = use(RootContext$30);
+function Content$5(props) {
+	const listbox = use(RootContext$32);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(listbox.getContentProps(), { className: classesListbox.content }, rest);
+	const attributes = mergeProps(listbox.getContentProps(), { className: classes.listbox.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("ul", {
 		...attributes,
 		children
@@ -1682,9 +1683,9 @@ function Content$4(props) {
 //#endregion
 //#region src/components/listbox/anatomy/input.tsx
 function Input$1(props) {
-	const listbox = use(RootContext$30);
+	const listbox = use(RootContext$32);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(listbox.getInputProps(), { className: classesListbox.input }, rest);
+	const attributes = mergeProps(listbox.getInputProps(), { className: classes.listbox.input }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -1695,13 +1696,13 @@ const ItemGroupContext$1 = createContext$1();
 //#endregion
 //#region src/components/listbox/anatomy/item-group-label.tsx
 function ItemGroupLabel$1(props) {
-	const listbox = use(RootContext$30);
+	const listbox = use(RootContext$32);
 	const [itemGroupLabelProps, componentProps] = splitItemGroupLabelProps$1({
 		htmlFor: use(ItemGroupContext$1).id,
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(listbox.getItemGroupLabelProps(itemGroupLabelProps), { className: classesListbox.itemGroupLabel }, rest);
+	const attributes = mergeProps(listbox.getItemGroupLabelProps(itemGroupLabelProps), { className: classes.listbox.itemGroupLabel }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1711,13 +1712,13 @@ function ItemGroupLabel$1(props) {
 //#endregion
 //#region src/components/listbox/anatomy/item-group.tsx
 function ItemGroup$1(props) {
-	const listbox = use(RootContext$30);
+	const listbox = use(RootContext$32);
 	const [itemGroupProps, componentProps] = splitItemGroupProps$1({
 		id: useId(),
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(listbox.getItemGroupProps(itemGroupProps), { className: classesListbox.itemGroup }, rest);
+	const attributes = mergeProps(listbox.getItemGroupProps(itemGroupProps), { className: classes.listbox.itemGroup }, rest);
 	return /* @__PURE__ */ jsx(ItemGroupContext$1.Provider, {
 		value: itemGroupProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1729,15 +1730,15 @@ function ItemGroup$1(props) {
 
 //#endregion
 //#region src/components/listbox/modules/item-context.ts
-const ItemContext$3 = createContext$1();
+const ItemContext$4 = createContext$1();
 
 //#endregion
 //#region src/components/listbox/anatomy/item-indicator.tsx
 function ItemIndicator$1(props) {
-	const listbox = use(RootContext$30);
-	const itemProps = use(ItemContext$3);
+	const listbox = use(RootContext$32);
+	const itemProps = use(ItemContext$4);
 	const { element, children = /* @__PURE__ */ jsx(Check, { className: "size-4" }), ...rest } = props;
-	const attributes = mergeProps(listbox.getItemIndicatorProps(itemProps), { className: classesListbox.itemIndicator }, rest);
+	const attributes = mergeProps(listbox.getItemIndicatorProps(itemProps), { className: classes.listbox.itemIndicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -1747,10 +1748,10 @@ function ItemIndicator$1(props) {
 //#endregion
 //#region src/components/listbox/anatomy/item-text.tsx
 function ItemText$3(props) {
-	const listbox = use(RootContext$30);
-	const itemProps = use(ItemContext$3);
+	const listbox = use(RootContext$32);
+	const itemProps = use(ItemContext$4);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(listbox.getItemTextProps(itemProps), { className: classesListbox.itemText }, rest);
+	const attributes = mergeProps(listbox.getItemTextProps(itemProps), { className: classes.listbox.itemText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -1759,12 +1760,12 @@ function ItemText$3(props) {
 
 //#endregion
 //#region src/components/listbox/anatomy/item.tsx
-function Item$7(props) {
-	const listbox = use(RootContext$30);
+function Item$8(props) {
+	const listbox = use(RootContext$32);
 	const [itemProps, componentProps] = splitItemProps$3(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(listbox.getItemProps(itemProps), { className: classesListbox.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$3.Provider, {
+	const attributes = mergeProps(listbox.getItemProps(itemProps), { className: classes.listbox.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$4.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
 			...attributes,
@@ -1776,9 +1777,9 @@ function Item$7(props) {
 //#endregion
 //#region src/components/listbox/anatomy/label.tsx
 function Label$7(props) {
-	const listbox = use(RootContext$30);
+	const listbox = use(RootContext$32);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(listbox.getLabelProps(), { className: classesListbox.label }, rest);
+	const attributes = mergeProps(listbox.getLabelProps(), { className: classes.listbox.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -1787,8 +1788,8 @@ function Label$7(props) {
 
 //#endregion
 //#region src/components/listbox/anatomy/root-context.tsx
-function RootContext$29(props) {
-	const listbox = use(RootContext$30);
+function RootContext$31(props) {
+	const listbox = use(RootContext$32);
 	const { children } = props;
 	return children(listbox);
 }
@@ -1804,10 +1805,10 @@ function useListbox(props) {
 
 //#endregion
 //#region src/components/listbox/anatomy/root-provider.tsx
-function RootProvider$10(props) {
+function RootProvider$11(props) {
 	const { element, children, value: listbox, ...rest } = props;
-	const attributes = mergeProps(listbox.getRootProps(), { className: classesListbox.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
+	const attributes = mergeProps(listbox.getRootProps(), { className: classes.listbox.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$32.Provider, {
 		value: listbox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -1822,8 +1823,8 @@ function Root$12(props) {
 	const [listboxProps, componentProps] = splitProps$8(props);
 	const { element, children, ...rest } = componentProps;
 	const listbox = useListbox(listboxProps);
-	const attributes = mergeProps(listbox.getRootProps(), { className: classesListbox.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
+	const attributes = mergeProps(listbox.getRootProps(), { className: classes.listbox.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$32.Provider, {
 		value: listbox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -1835,28 +1836,28 @@ function Root$12(props) {
 //#endregion
 //#region src/components/listbox/modules/anatomy.ts
 const Listbox = Object.assign(Root$12, {
-	Provider: RootProvider$10,
-	Context: RootContext$29,
+	Provider: RootProvider$11,
+	Context: RootContext$31,
 	Label: Label$7,
 	Input: Input$1,
-	Content: Content$4,
+	Content: Content$5,
 	ItemGroup: ItemGroup$1,
 	ItemGroupLabel: ItemGroupLabel$1,
-	Item: Item$7,
+	Item: Item$8,
 	ItemText: ItemText$3,
 	ItemIndicator: ItemIndicator$1
 });
 
 //#endregion
 //#region src/components/menu/modules/root-context.ts
-const RootContext$28 = createContext$1();
+const RootContext$30 = createContext$1();
 
 //#endregion
 //#region src/components/menu/anatomy/arrow-tip.tsx
 function ArrowTip$2(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getArrowTipProps(), { className: classesMenu.arrowTip }, rest);
+	const attributes = mergeProps(menu.getArrowTipProps(), { className: classes.menu.arrowTip }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1866,9 +1867,9 @@ function ArrowTip$2(props) {
 //#endregion
 //#region src/components/menu/anatomy/arrow.tsx
 function Arrow$2(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getArrowProps(), { className: classesMenu.arrow }, rest);
+	const attributes = mergeProps(menu.getArrowProps(), { className: classes.menu.arrow }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1877,10 +1878,10 @@ function Arrow$2(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/content.tsx
-function Content$3(props) {
-	const menu = use(RootContext$28);
+function Content$4(props) {
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getContentProps(), { className: classesMenu.content }, rest);
+	const attributes = mergeProps(menu.getContentProps(), { className: classes.menu.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1890,9 +1891,9 @@ function Content$3(props) {
 //#endregion
 //#region src/components/menu/anatomy/context-trigger.tsx
 function ContextTrigger(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getContextTriggerProps(), { className: classesMenu.contextTrigger }, rest);
+	const attributes = mergeProps(menu.getContextTriggerProps(), { className: classes.menu.contextTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -1901,10 +1902,10 @@ function ContextTrigger(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/indicator.tsx
-function Indicator$2(props) {
-	const menu = use(RootContext$28);
+function Indicator$3(props) {
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getIndicatorProps(), { className: classesMenu.indicator }, rest);
+	const attributes = mergeProps(menu.getIndicatorProps(), { className: classes.menu.indicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1918,13 +1919,13 @@ const ItemGroupContext = createContext$1();
 //#endregion
 //#region src/components/menu/anatomy/item-group-label.tsx
 function ItemGroupLabel(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const [labelProps, componentProps] = splitItemGroupLabelProps$2({
 		htmlFor: use(ItemGroupContext).id,
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getItemGroupLabelProps(labelProps), { className: classesMenu.itemGroupLabel }, rest);
+	const attributes = mergeProps(menu.getItemGroupLabelProps(labelProps), { className: classes.menu.itemGroupLabel }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1934,13 +1935,13 @@ function ItemGroupLabel(props) {
 //#endregion
 //#region src/components/menu/anatomy/item-group.tsx
 function ItemGroup(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const [itemGroupProps, componentProps] = splitItemGroupProps$2({
 		id: useId(),
 		...props
 	});
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getItemGroupProps(itemGroupProps), { className: classesMenu.itemGroup }, rest);
+	const attributes = mergeProps(menu.getItemGroupProps(itemGroupProps), { className: classes.menu.itemGroup }, rest);
 	return /* @__PURE__ */ jsx(ItemGroupContext.Provider, {
 		value: itemGroupProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1952,15 +1953,15 @@ function ItemGroup(props) {
 
 //#endregion
 //#region src/components/menu/modules/item-context.ts
-const ItemContext$2 = createContext$1();
+const ItemContext$3 = createContext$1();
 
 //#endregion
 //#region src/components/menu/anatomy/item-indicator.tsx
 function ItemIndicator(props) {
-	const menu = use(RootContext$28);
-	const itemProps = use(ItemContext$2);
+	const menu = use(RootContext$30);
+	const itemProps = use(ItemContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getItemIndicatorProps(itemProps), { className: classesMenu.itemIndicator }, rest);
+	const attributes = mergeProps(menu.getItemIndicatorProps(itemProps), { className: classes.menu.itemIndicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1970,10 +1971,10 @@ function ItemIndicator(props) {
 //#endregion
 //#region src/components/menu/anatomy/item-text.tsx
 function ItemText$2(props) {
-	const menu = use(RootContext$28);
-	const itemProps = use(ItemContext$2);
+	const menu = use(RootContext$30);
+	const itemProps = use(ItemContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getItemTextProps(itemProps), { className: classesMenu.itemText }, rest);
+	const attributes = mergeProps(menu.getItemTextProps(itemProps), { className: classes.menu.itemText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -1982,12 +1983,12 @@ function ItemText$2(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/item.tsx
-function Item$6(props) {
-	const menu = use(RootContext$28);
+function Item$7(props) {
+	const menu = use(RootContext$30);
 	const [itemProps, componentProps] = splitItemProps$4(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getItemProps(itemProps), { className: classesMenu.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
+	const attributes = mergeProps(menu.getItemProps(itemProps), { className: classes.menu.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$3.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -1999,11 +2000,11 @@ function Item$6(props) {
 //#endregion
 //#region src/components/menu/anatomy/option-item.tsx
 function OptionItem(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const [itemProps, componentProps] = splitOptionItemProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getOptionItemProps(itemProps), { className: classesMenu.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
+	const attributes = mergeProps(menu.getOptionItemProps(itemProps), { className: classes.menu.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$3.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2015,9 +2016,9 @@ function OptionItem(props) {
 //#endregion
 //#region src/components/menu/anatomy/positioner.tsx
 function Positioner$2(props) {
-	const menu = use(RootContext$28);
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getPositionerProps(), { className: classesMenu.positioner }, rest);
+	const attributes = mergeProps(menu.getPositionerProps(), { className: classes.menu.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2026,8 +2027,8 @@ function Positioner$2(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/root-context.tsx
-function RootContext$27(props) {
-	const menu = use(RootContext$28);
+function RootContext$29(props) {
+	const menu = use(RootContext$30);
 	const { children } = props;
 	return children(menu);
 }
@@ -2038,15 +2039,15 @@ const TriggerItemContext = createContext$1();
 
 //#endregion
 //#region src/components/menu/anatomy/root-provider.tsx
-function RootProvider$9(props) {
-	const parentMenu = use(RootContext$28);
+function RootProvider$10(props) {
+	const parentMenu = use(RootContext$30);
 	const { children, value: menu } = props;
 	useEffect(() => {
 		if (!parentMenu) return;
 		parentMenu.setChild(menu.service);
 		menu.setParent(parentMenu.service);
 	}, []);
-	return /* @__PURE__ */ jsx(RootContext$28.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
 		value: menu,
 		children: /* @__PURE__ */ jsx(TriggerItemContext.Provider, {
 			value: parentMenu?.getTriggerItemProps(menu),
@@ -2071,7 +2072,7 @@ function useMenu(props = {}) {
 //#endregion
 //#region src/components/menu/anatomy/root.tsx
 function Root$11(props) {
-	const parentMenu = use(RootContext$28);
+	const parentMenu = use(RootContext$30);
 	const [menuProps, componentProps] = splitProps$9(props);
 	const { children } = componentProps;
 	const menu = useMenu(menuProps);
@@ -2080,7 +2081,7 @@ function Root$11(props) {
 		parentMenu.setChild(menu.service);
 		menu.setParent(parentMenu.service);
 	}, []);
-	return /* @__PURE__ */ jsx(RootContext$28.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
 		value: menu,
 		children: /* @__PURE__ */ jsx(TriggerItemContext.Provider, {
 			value: parentMenu?.getTriggerItemProps(menu),
@@ -2091,10 +2092,10 @@ function Root$11(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/separator.tsx
-function Separator(props) {
-	const menu = use(RootContext$28);
+function Separator$1(props) {
+	const menu = use(RootContext$30);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(menu.getSeparatorProps(), { className: classesMenu.separator }, rest);
+	const attributes = mergeProps(menu.getSeparatorProps(), { className: classes.menu.separator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("hr", { ...attributes });
 }
 
@@ -2104,8 +2105,8 @@ function TriggerItem(props) {
 	const triggerItemProps = use(TriggerItemContext);
 	const [itemProps, componentProps] = splitItemProps$4(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(triggerItemProps, { className: classesMenu.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
+	const attributes = mergeProps(triggerItemProps, { className: classes.menu.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$3.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2116,10 +2117,10 @@ function TriggerItem(props) {
 
 //#endregion
 //#region src/components/menu/anatomy/trigger.tsx
-function Trigger$3(props) {
-	const menu = use(RootContext$28);
+function Trigger$4(props) {
+	const menu = use(RootContext$30);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(menu.getTriggerProps(), { className: classesMenu.trigger }, rest);
+	const attributes = mergeProps(menu.getTriggerProps(), { className: classes.menu.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -2129,37 +2130,37 @@ function Trigger$3(props) {
 //#endregion
 //#region src/components/menu/modules/anatomy.ts
 const Menu = Object.assign(Root$11, {
-	Provider: RootProvider$9,
-	Context: RootContext$27,
-	Trigger: Trigger$3,
+	Provider: RootProvider$10,
+	Context: RootContext$29,
+	Trigger: Trigger$4,
 	ContextTrigger,
-	Indicator: Indicator$2,
+	Indicator: Indicator$3,
 	Positioner: Positioner$2,
-	Content: Content$3,
+	Content: Content$4,
 	ItemGroup,
 	ItemGroupLabel,
-	Item: Item$6,
+	Item: Item$7,
 	OptionItem,
 	TriggerItem,
 	ItemText: ItemText$2,
 	ItemIndicator,
-	Separator,
+	Separator: Separator$1,
 	Arrow: Arrow$2,
 	ArrowTip: ArrowTip$2
 });
 
 //#endregion
 //#region src/components/navigation/modules/root-context.ts
-const RootContext$26 = createContext$1();
+const RootContext$28 = createContext$1();
 
 //#endregion
 //#region src/components/navigation/anatomy/content.tsx
 function NavigationContent(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.content
+		className: classes.navigation.content
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2171,10 +2172,10 @@ function NavigationContent(props) {
 //#region src/components/navigation/anatomy/footer.tsx
 function NavigationFooter(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.footer
+		className: classes.navigation.footer
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("footer", {
 		...attributes,
@@ -2186,10 +2187,10 @@ function NavigationFooter(props) {
 //#region src/components/navigation/anatomy/group.tsx
 function NavigationGroup(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.group
+		className: classes.navigation.group
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2201,10 +2202,10 @@ function NavigationGroup(props) {
 //#region src/components/navigation/anatomy/header.tsx
 function NavigationHeader(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.header
+		className: classes.navigation.header
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("header", {
 		...attributes,
@@ -2216,10 +2217,10 @@ function NavigationHeader(props) {
 //#region src/components/navigation/anatomy/label.tsx
 function NavigationLabel(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.label
+		className: classes.navigation.label
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2231,10 +2232,10 @@ function NavigationLabel(props) {
 //#region src/components/navigation/anatomy/menu.tsx
 function NavigationMenu(props) {
 	const { element, children, ...rest } = props;
-	const navigation = use(RootContext$26);
+	const navigation = use(RootContext$28);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.menu
+		className: classes.navigation.menu
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2248,9 +2249,9 @@ function NavigationRoot(props) {
 	const { layout = "bar", element, children, ...rest } = props;
 	const attributes = mergeProps({
 		"data-layout": layout,
-		className: classesNavigation.root
+		className: classes.navigation.root
 	}, rest);
-	return /* @__PURE__ */ jsx(RootContext$26.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$28.Provider, {
 		value: { layout },
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2272,15 +2273,15 @@ const Navigation = Object.assign(NavigationRoot, {
 
 //#endregion
 //#region src/components/pagination/modules/root-context.ts
-const RootContext$25 = createContext$1();
+const RootContext$27 = createContext$1();
 
 //#endregion
 //#region src/components/pagination/anatomy/ellipsis.tsx
 function Ellipsis(props) {
-	const pagination = use(RootContext$25);
+	const pagination = use(RootContext$27);
 	const [ellipsisProps, componentProps] = splitEllipsisProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(pagination.getEllipsisProps(ellipsisProps), { className: classesPagination.ellipsis }, rest);
+	const attributes = mergeProps(pagination.getEllipsisProps(ellipsisProps), { className: classes.pagination.ellipsis }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -2290,10 +2291,10 @@ function Ellipsis(props) {
 //#endregion
 //#region src/components/pagination/anatomy/first-trigger.tsx
 function FirstTrigger(props) {
-	const pagination = use(RootContext$25);
+	const pagination = use(RootContext$27);
 	const { element, children, ...rest } = props;
 	const attributes = mergeProps({
-		className: classesPagination.nextTrigger,
+		className: classes.pagination.nextTrigger,
 		onClick: pagination.goToFirstPage
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
@@ -2304,11 +2305,11 @@ function FirstTrigger(props) {
 
 //#endregion
 //#region src/components/pagination/anatomy/item.tsx
-function Item$5(props) {
-	const pagination = use(RootContext$25);
+function Item$6(props) {
+	const pagination = use(RootContext$27);
 	const [itemProps, componentProps] = splitItemProps$5(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(pagination.getItemProps(itemProps), { className: classesPagination.item }, rest);
+	const attributes = mergeProps(pagination.getItemProps(itemProps), { className: classes.pagination.item }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("a", {
 		...attributes,
 		children
@@ -2318,10 +2319,10 @@ function Item$5(props) {
 //#endregion
 //#region src/components/pagination/anatomy/last-trigger.tsx
 function LastTrigger(props) {
-	const pagination = use(RootContext$25);
+	const pagination = use(RootContext$27);
 	const { element, children, ...rest } = props;
 	const attributes = mergeProps({
-		className: classesPagination.nextTrigger,
+		className: classes.pagination.nextTrigger,
 		onClick: pagination.goToLastPage
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
@@ -2332,10 +2333,10 @@ function LastTrigger(props) {
 
 //#endregion
 //#region src/components/pagination/anatomy/next-trigger.tsx
-function NextTrigger(props) {
-	const pagination = use(RootContext$25);
+function NextTrigger$1(props) {
+	const pagination = use(RootContext$27);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(pagination.getNextTriggerProps(), { className: classesPagination.nextTrigger }, rest);
+	const attributes = mergeProps(pagination.getNextTriggerProps(), { className: classes.pagination.nextTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -2344,10 +2345,10 @@ function NextTrigger(props) {
 
 //#endregion
 //#region src/components/pagination/anatomy/prev-trigger.tsx
-function PrevTrigger(props) {
-	const pagination = use(RootContext$25);
+function PrevTrigger$1(props) {
+	const pagination = use(RootContext$27);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(pagination.getPrevTriggerProps(), { className: classesPagination.prevTrigger }, rest);
+	const attributes = mergeProps(pagination.getPrevTriggerProps(), { className: classes.pagination.prevTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -2356,8 +2357,8 @@ function PrevTrigger(props) {
 
 //#endregion
 //#region src/components/pagination/anatomy/root-context.tsx
-function RootContext$24(props) {
-	const pagination = use(RootContext$25);
+function RootContext$26(props) {
+	const pagination = use(RootContext$27);
 	const { children } = props;
 	return children(pagination);
 }
@@ -2366,8 +2367,8 @@ function RootContext$24(props) {
 //#region src/components/pagination/anatomy/root-provider.tsx
 function PaginationRootProvider(props) {
 	const { element, children, value: pagination, ...rest } = props;
-	const attributes = mergeProps(pagination.getRootProps(), { className: classesPagination.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
+	const attributes = mergeProps(pagination.getRootProps(), { className: classes.pagination.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$27.Provider, {
 		value: pagination,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
 			...attributes,
@@ -2391,8 +2392,8 @@ function PaginationRoot(props) {
 	const [paginationProps, componentProps] = splitProps$10(props);
 	const { element, children, ...rest } = componentProps;
 	const pagination = usePagination(paginationProps);
-	const attributes = mergeProps(pagination.getRootProps(), { className: classesPagination.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
+	const attributes = mergeProps(pagination.getRootProps(), { className: classes.pagination.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$27.Provider, {
 		value: pagination,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
 			...attributes,
@@ -2405,25 +2406,25 @@ function PaginationRoot(props) {
 //#region src/components/pagination/modules/anatomy.ts
 const Pagination = Object.assign(PaginationRoot, {
 	Provider: PaginationRootProvider,
-	Context: RootContext$24,
+	Context: RootContext$26,
 	FirstTrigger,
-	PrevTrigger,
-	Item: Item$5,
+	PrevTrigger: PrevTrigger$1,
+	Item: Item$6,
 	Ellipsis,
-	NextTrigger,
+	NextTrigger: NextTrigger$1,
 	LastTrigger
 });
 
 //#endregion
 //#region src/components/popover/modules/root-context.ts
-const RootContext$23 = createContext$1();
+const RootContext$25 = createContext$1();
 
 //#endregion
 //#region src/components/popover/anatomy/anchor.tsx
 function Anchor(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getAnchorProps(), { className: classesPopover.anchor }, rest);
+	const attributes = mergeProps(popover.getAnchorProps(), { className: classes.popover.anchor }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2433,9 +2434,9 @@ function Anchor(props) {
 //#endregion
 //#region src/components/popover/anatomy/arrow-tip.tsx
 function ArrowTip$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getArrowTipProps(), { className: classesPopover.arrowTip }, rest);
+	const attributes = mergeProps(popover.getArrowTipProps(), { className: classes.popover.arrowTip }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2445,9 +2446,9 @@ function ArrowTip$1(props) {
 //#endregion
 //#region src/components/popover/anatomy/arrow.tsx
 function Arrow$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getArrowProps(), { className: classesPopover.arrow }, rest);
+	const attributes = mergeProps(popover.getArrowProps(), { className: classes.popover.arrow }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2457,9 +2458,9 @@ function Arrow$1(props) {
 //#endregion
 //#region src/components/popover/anatomy/close-trigger.tsx
 function CloseTrigger$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getCloseTriggerProps(), { className: classesPopover.closeTrigger }, rest);
+	const attributes = mergeProps(popover.getCloseTriggerProps(), { className: classes.popover.closeTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -2468,10 +2469,10 @@ function CloseTrigger$1(props) {
 
 //#endregion
 //#region src/components/popover/anatomy/content.tsx
-function Content$2(props) {
-	const popover = use(RootContext$23);
+function Content$3(props) {
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getContentProps(), { className: classesPopover.content }, rest);
+	const attributes = mergeProps(popover.getContentProps(), { className: classes.popover.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2481,9 +2482,9 @@ function Content$2(props) {
 //#endregion
 //#region src/components/popover/anatomy/description.tsx
 function Description$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getDescriptionProps(), { className: classesPopover.description }, rest);
+	const attributes = mergeProps(popover.getDescriptionProps(), { className: classes.popover.description }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2493,9 +2494,9 @@ function Description$1(props) {
 //#endregion
 //#region src/components/popover/anatomy/positioner.tsx
 function Positioner$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getPositionerProps(), { className: classesPopover.positioner }, rest);
+	const attributes = mergeProps(popover.getPositionerProps(), { className: classes.popover.positioner }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2504,17 +2505,17 @@ function Positioner$1(props) {
 
 //#endregion
 //#region src/components/popover/anatomy/root-context.tsx
-function RootContext$22(props) {
-	const popover = use(RootContext$23);
+function RootContext$24(props) {
+	const popover = use(RootContext$25);
 	const { children } = props;
 	return children(popover);
 }
 
 //#endregion
 //#region src/components/popover/anatomy/root-provider.tsx
-function RootProvider$8(props) {
+function RootProvider$9(props) {
 	const { children, value: popover } = props;
-	return /* @__PURE__ */ jsx(RootContext$23.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
 		value: popover,
 		children
 	});
@@ -2535,7 +2536,7 @@ function Root$10(props) {
 	const [popoverProps, componentProps] = splitProps$11(props);
 	const { children } = componentProps;
 	const popover = usePopover(popoverProps);
-	return /* @__PURE__ */ jsx(RootContext$23.Provider, {
+	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
 		value: popover,
 		children
 	});
@@ -2544,9 +2545,9 @@ function Root$10(props) {
 //#endregion
 //#region src/components/popover/anatomy/title.tsx
 function Title$1(props) {
-	const popover = use(RootContext$23);
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getTitleProps(), { className: classesPopover.title }, rest);
+	const attributes = mergeProps(popover.getTitleProps(), { className: classes.popover.title }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2555,10 +2556,10 @@ function Title$1(props) {
 
 //#endregion
 //#region src/components/popover/anatomy/trigger.tsx
-function Trigger$2(props) {
-	const popover = use(RootContext$23);
+function Trigger$3(props) {
+	const popover = use(RootContext$25);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(popover.getTriggerProps(), { className: classesPopover.trigger }, rest);
+	const attributes = mergeProps(popover.getTriggerProps(), { className: classes.popover.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -2568,12 +2569,12 @@ function Trigger$2(props) {
 //#endregion
 //#region src/components/popover/modules/anatomy.ts
 const Popover = Object.assign(Root$10, {
-	Provider: RootProvider$8,
-	Context: RootContext$22,
+	Provider: RootProvider$9,
+	Context: RootContext$24,
 	Anchor,
-	Trigger: Trigger$2,
+	Trigger: Trigger$3,
 	Positioner: Positioner$1,
-	Content: Content$2,
+	Content: Content$3,
 	Arrow: Arrow$1,
 	ArrowTip: ArrowTip$1,
 	Title: Title$1,
@@ -2595,15 +2596,15 @@ const Portal = Root$9;
 
 //#endregion
 //#region src/components/progress/modules/root-context.ts
-const RootContext$21 = createContext$1();
+const RootContext$23 = createContext$1();
 
 //#endregion
 //#region src/components/progress/anatomy/circle-range.tsx
 function CircleRange(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, ...rest } = props;
 	const attributes = mergeProps(progress.getCircleRangeProps(), {
-		className: classesProgress.circleRange,
+		className: classes.progress.circleRange,
 		strokeLinecap: "round"
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("circle", { ...attributes });
@@ -2612,18 +2613,18 @@ function CircleRange(props) {
 //#endregion
 //#region src/components/progress/anatomy/circle-track.tsx
 function CircleTrack(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(progress.getCircleTrackProps(), { className: classesProgress.circleTrack }, rest);
+	const attributes = mergeProps(progress.getCircleTrackProps(), { className: classes.progress.circleTrack }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("circle", { ...attributes });
 }
 
 //#endregion
 //#region src/components/progress/anatomy/circle.tsx
 function Circle(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(progress.getCircleProps(), { className: classesProgress.circle }, rest);
+	const attributes = mergeProps(progress.getCircleProps(), { className: classes.progress.circle }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("svg", {
 		...attributes,
 		children
@@ -2633,9 +2634,9 @@ function Circle(props) {
 //#endregion
 //#region src/components/progress/anatomy/label.tsx
 function Label$6(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(progress.getLabelProps(), { className: classesProgress.label }, rest);
+	const attributes = mergeProps(progress.getLabelProps(), { className: classes.progress.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2645,26 +2646,26 @@ function Label$6(props) {
 //#endregion
 //#region src/components/progress/anatomy/range.tsx
 function Range$1(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(progress.getRangeProps(), { className: classesProgress.range }, rest);
+	const attributes = mergeProps(progress.getRangeProps(), { className: classes.progress.range }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", { ...attributes });
 }
 
 //#endregion
 //#region src/components/progress/anatomy/root-context.tsx
-function RootContext$20(props) {
-	const progress = use(RootContext$21);
+function RootContext$22(props) {
+	const progress = use(RootContext$23);
 	const { children } = props;
 	return children(progress);
 }
 
 //#endregion
 //#region src/components/progress/anatomy/root-provider.tsx
-function RootProvider$7(props) {
+function RootProvider$8(props) {
 	const { element, children, value: progress, ...rest } = props;
-	const attributes = mergeProps(progress.getRootProps(), { className: classesProgress.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
+	const attributes = mergeProps(progress.getRootProps(), { className: classes.progress.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$23.Provider, {
 		value: progress,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2688,8 +2689,8 @@ function Root$8(props) {
 	const [progressProps, componentProps] = splitProps$12(props);
 	const { element, children, ...rest } = componentProps;
 	const progress = useProgress(progressProps);
-	const attributes = mergeProps(progress.getRootProps(), { className: classesProgress.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
+	const attributes = mergeProps(progress.getRootProps(), { className: classes.progress.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$23.Provider, {
 		value: progress,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2701,9 +2702,9 @@ function Root$8(props) {
 //#endregion
 //#region src/components/progress/anatomy/track.tsx
 function Track$1(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(progress.getTrackProps(), { className: classesProgress.track }, rest);
+	const attributes = mergeProps(progress.getTrackProps(), { className: classes.progress.track }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2713,9 +2714,9 @@ function Track$1(props) {
 //#endregion
 //#region src/components/progress/anatomy/value-text.tsx
 function ValueText$1(props) {
-	const progress = use(RootContext$21);
+	const progress = use(RootContext$23);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(progress.getValueTextProps(), { className: classesProgress.valueText }, rest);
+	const attributes = mergeProps(progress.getValueTextProps(), { className: classes.progress.valueText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children: children ?? progress.percentAsString
@@ -2725,8 +2726,8 @@ function ValueText$1(props) {
 //#endregion
 //#region src/components/progress/modules/anatomy.ts
 const Progress = Object.assign(Root$8, {
-	Provider: RootProvider$7,
-	Context: RootContext$20,
+	Provider: RootProvider$8,
+	Context: RootContext$22,
 	Label: Label$6,
 	ValueText: ValueText$1,
 	Track: Track$1,
@@ -2738,14 +2739,14 @@ const Progress = Object.assign(Root$8, {
 
 //#endregion
 //#region src/components/rating-group/modules/root-context.ts
-const RootContext$19 = createContext$1();
+const RootContext$21 = createContext$1();
 
 //#endregion
 //#region src/components/rating-group/anatomy/control.tsx
 function Control$4(props) {
-	const ratingGroup = use(RootContext$19);
+	const ratingGroup = use(RootContext$21);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(ratingGroup.getControlProps(), { className: classesRatingGroup.control }, rest);
+	const attributes = mergeProps(ratingGroup.getControlProps(), { className: classes.ratingGroup.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2755,9 +2756,9 @@ function Control$4(props) {
 //#endregion
 //#region src/components/rating-group/anatomy/hidden-input.tsx
 function HiddenInput$3(props) {
-	const ratingGroup = use(RootContext$19);
+	const ratingGroup = use(RootContext$21);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(ratingGroup.getHiddenInputProps(), { className: classesRatingGroup.hiddenInput }, rest);
+	const attributes = mergeProps(ratingGroup.getHiddenInputProps(), { className: classes.ratingGroup.hiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -2841,12 +2842,12 @@ function StarHalf(props) {
 
 //#endregion
 //#region src/components/rating-group/anatomy/item.tsx
-function Item$4(props) {
-	const ratingGroup = use(RootContext$19);
+function Item$5(props) {
+	const ratingGroup = use(RootContext$21);
 	const [itemProps, componentProps] = splitItemProps$6(props);
 	const { element, children, empty = /* @__PURE__ */ jsx(StarEmpty, {}), half = /* @__PURE__ */ jsx(StarHalf, {}), full = /* @__PURE__ */ jsx(StarFull, {}), ...rest } = componentProps;
 	const itemState = ratingGroup.getItemState(itemProps);
-	const attributes = mergeProps(ratingGroup.getItemProps(itemProps), { className: classesRatingGroup.item }, rest);
+	const attributes = mergeProps(ratingGroup.getItemProps(itemProps), { className: classes.ratingGroup.item }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children: children ? children : !itemState.highlighted ? empty : itemState.half ? half : full
@@ -2856,9 +2857,9 @@ function Item$4(props) {
 //#endregion
 //#region src/components/rating-group/anatomy/label.tsx
 function Label$5(props) {
-	const ratingGroup = use(RootContext$19);
+	const ratingGroup = use(RootContext$21);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(ratingGroup.getLabelProps(), { className: classesRatingGroup.label }, rest);
+	const attributes = mergeProps(ratingGroup.getLabelProps(), { className: classes.ratingGroup.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -2867,18 +2868,18 @@ function Label$5(props) {
 
 //#endregion
 //#region src/components/rating-group/anatomy/root-context.tsx
-function RootContext$18(props) {
-	const ratingGroup = use(RootContext$19);
+function RootContext$20(props) {
+	const ratingGroup = use(RootContext$21);
 	const { children } = props;
 	return children(ratingGroup);
 }
 
 //#endregion
 //#region src/components/rating-group/anatomy/root-provider.tsx
-function RootProvider$6(props) {
+function RootProvider$7(props) {
 	const { element, children, value: ratingGroup, ...rest } = props;
-	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classesRatingGroup.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
+	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classes.ratingGroup.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
 		value: ratingGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2902,8 +2903,8 @@ function Root$7(props) {
 	const [ratingGroupProps, componentProps] = splitProps$13(props);
 	const { element, children, ...rest } = componentProps;
 	const ratingGroup = useRatingGroup(ratingGroupProps);
-	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classesRatingGroup.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
+	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classes.ratingGroup.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
 		value: ratingGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -2915,11 +2916,11 @@ function Root$7(props) {
 //#endregion
 //#region src/components/rating-group/modules/anatomy.ts
 const RatingGroup = Object.assign(Root$7, {
-	Provider: RootProvider$6,
-	Context: RootContext$18,
+	Provider: RootProvider$7,
+	Context: RootContext$20,
 	Label: Label$5,
 	Control: Control$4,
-	Item: Item$4,
+	Item: Item$5,
 	HiddenInput: HiddenInput$3
 });
 
@@ -2927,7 +2928,7 @@ const RatingGroup = Object.assign(Root$7, {
 //#region src/components/segmented-control/anatomy/control.tsx
 function Control$3(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesSegmentedControl.control }, rest);
+	const attributes = mergeProps({ className: classes.segmentedControl.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -2936,38 +2937,38 @@ function Control$3(props) {
 
 //#endregion
 //#region src/components/segmented-control/modules/root-context.ts
-const RootContext$17 = createContext$1();
+const RootContext$19 = createContext$1();
 
 //#endregion
 //#region src/components/segmented-control/anatomy/indicator.tsx
-function Indicator$1(props) {
-	const segmentedControl = use(RootContext$17);
+function Indicator$2(props) {
+	const segmentedControl = use(RootContext$19);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getIndicatorProps(), { className: classesSegmentedControl.indicator }, rest);
+	const attributes = mergeProps(segmentedControl.getIndicatorProps(), { className: classes.segmentedControl.indicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", { ...attributes });
 }
 
 //#endregion
 //#region src/components/segmented-control/modules/item-context.ts
-const ItemContext$1 = createContext$1();
+const ItemContext$2 = createContext$1();
 
 //#endregion
 //#region src/components/segmented-control/anatomy/item-hidden-input.tsx
 function ItemHiddenInput(props) {
-	const segmentedControl = use(RootContext$17);
-	const itemProps = use(ItemContext$1);
+	const segmentedControl = use(RootContext$19);
+	const itemProps = use(ItemContext$2);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getItemHiddenInputProps(itemProps), { className: classesSegmentedControl.itemHiddenInput }, rest);
+	const attributes = mergeProps(segmentedControl.getItemHiddenInputProps(itemProps), { className: classes.segmentedControl.itemHiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
 //#endregion
 //#region src/components/segmented-control/anatomy/item-text.tsx
 function ItemText$1(props) {
-	const segmentedControl = use(RootContext$17);
-	const itemProps = use(ItemContext$1);
+	const segmentedControl = use(RootContext$19);
+	const itemProps = use(ItemContext$2);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getItemTextProps(itemProps), { className: classesSegmentedControl.itemText }, rest);
+	const attributes = mergeProps(segmentedControl.getItemTextProps(itemProps), { className: classes.segmentedControl.itemText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -2976,12 +2977,12 @@ function ItemText$1(props) {
 
 //#endregion
 //#region src/components/segmented-control/anatomy/item.tsx
-function Item$3(props) {
-	const segmentedControl = use(RootContext$17);
+function Item$4(props) {
+	const segmentedControl = use(RootContext$19);
 	const [itemProps, componentProps] = splitItemProps$7(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(segmentedControl.getItemProps(itemProps), { className: classesSegmentedControl.item }, rest);
-	return /* @__PURE__ */ jsx(ItemContext$1.Provider, {
+	const attributes = mergeProps(segmentedControl.getItemProps(itemProps), { className: classes.segmentedControl.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 			...attributes,
@@ -2993,9 +2994,9 @@ function Item$3(props) {
 //#endregion
 //#region src/components/segmented-control/anatomy/label.tsx
 function Label$4(props) {
-	const segmentedControl = use(RootContext$17);
+	const segmentedControl = use(RootContext$19);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getLabelProps(), { className: classesSegmentedControl.label }, rest);
+	const attributes = mergeProps(segmentedControl.getLabelProps(), { className: classes.segmentedControl.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -3004,18 +3005,18 @@ function Label$4(props) {
 
 //#endregion
 //#region src/components/segmented-control/anatomy/root-context.tsx
-function RootContext$16(props) {
-	const segmentedControl = use(RootContext$17);
+function RootContext$18(props) {
+	const segmentedControl = use(RootContext$19);
 	const { children } = props;
 	return children(segmentedControl);
 }
 
 //#endregion
 //#region src/components/segmented-control/anatomy/root-provider.tsx
-function RootProvider$5(props) {
+function RootProvider$6(props) {
 	const { element, children, value: segmentedControl, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classesSegmentedControl.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
+	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classes.segmentedControl.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
 		value: segmentedControl,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -3040,8 +3041,8 @@ function Root$6(props) {
 	const [segmentedControlProps, componentProps] = splitProps$14(props);
 	const { element, children, ...rest } = componentProps;
 	const segmentedControl = useSegmentedControl(segmentedControlProps);
-	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classesSegmentedControl.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
+	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classes.segmentedControl.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
 		value: segmentedControl,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -3053,26 +3054,26 @@ function Root$6(props) {
 //#endregion
 //#region src/components/segmented-control/modules/anatomy.ts
 const SegmentedControl = Object.assign(Root$6, {
-	Provider: RootProvider$5,
-	Context: RootContext$16,
+	Provider: RootProvider$6,
+	Context: RootContext$18,
 	Label: Label$4,
 	Control: Control$3,
-	Indicator: Indicator$1,
-	Item: Item$3,
+	Indicator: Indicator$2,
+	Item: Item$4,
 	ItemText: ItemText$1,
 	ItemHiddenInput
 });
 
 //#endregion
 //#region src/components/slider/modules/root-context.ts
-const RootContext$15 = createContext$1();
+const RootContext$17 = createContext$1();
 
 //#endregion
 //#region src/components/slider/anatomy/control.tsx
 function Control$2(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getControlProps(), { className: classesSlider.control }, rest);
+	const attributes = mergeProps(slider.getControlProps(), { className: classes.slider.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3086,19 +3087,19 @@ const ThumbContext = createContext$1();
 //#endregion
 //#region src/components/slider/anatomy/hidden-input.tsx
 function HiddenInput$2(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const thumbProps = use(ThumbContext);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(slider.getHiddenInputProps(thumbProps), { className: classesSlider.hiddenInput }, rest);
+	const attributes = mergeProps(slider.getHiddenInputProps(thumbProps), { className: classes.slider.hiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
 //#endregion
 //#region src/components/slider/anatomy/label.tsx
 function Label$3(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getLabelProps(), { className: classesSlider.label }, rest);
+	const attributes = mergeProps(slider.getLabelProps(), { className: classes.slider.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -3108,9 +3109,9 @@ function Label$3(props) {
 //#endregion
 //#region src/components/slider/anatomy/marker-group.tsx
 function MarkerGroup(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getMarkerGroupProps(), { className: classesSlider.markerGroup }, rest);
+	const attributes = mergeProps(slider.getMarkerGroupProps(), { className: classes.slider.markerGroup }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3120,9 +3121,9 @@ function MarkerGroup(props) {
 //#endregion
 //#region src/components/slider/anatomy/marker.tsx
 function Marker(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, value, ...rest } = props;
-	const attributes = mergeProps(slider.getMarkerProps({ value }), { className: classesSlider.marker }, rest);
+	const attributes = mergeProps(slider.getMarkerProps({ value }), { className: classes.slider.marker }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children: children ?? value
@@ -3132,9 +3133,9 @@ function Marker(props) {
 //#endregion
 //#region src/components/slider/anatomy/range.tsx
 function Range(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getRangeProps(), { className: classesSlider.range }, rest);
+	const attributes = mergeProps(slider.getRangeProps(), { className: classes.slider.range }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3143,8 +3144,8 @@ function Range(props) {
 
 //#endregion
 //#region src/components/slider/anatomy/root-context.tsx
-function RootContext$14(props) {
-	const slider = use(RootContext$15);
+function RootContext$16(props) {
+	const slider = use(RootContext$17);
 	const { children } = props;
 	return children(slider);
 }
@@ -3153,8 +3154,8 @@ function RootContext$14(props) {
 //#region src/components/slider/anatomy/root-provider.tsx
 function SliderRootProvider(props) {
 	const { element, children, value: slider, ...rest } = props;
-	const attributes = mergeProps(slider.getRootProps(), { className: classesSlider.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
+	const attributes = mergeProps(slider.getRootProps(), { className: classes.slider.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
 		value: slider,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -3174,12 +3175,12 @@ function useSlider(props = {}) {
 
 //#endregion
 //#region src/components/slider/anatomy/root.tsx
-function SliderRoot(props) {
+function SliderRoot$1(props) {
 	const [sliderProps, componentProps] = splitProps$15(props);
 	const { element, children, ...rest } = componentProps;
 	const slider = useSlider(sliderProps);
-	const attributes = mergeProps(slider.getRootProps(), { className: classesSlider.root }, rest);
-	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
+	const attributes = mergeProps(slider.getRootProps(), { className: classes.slider.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
 		value: slider,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 			...attributes,
@@ -3191,10 +3192,10 @@ function SliderRoot(props) {
 //#endregion
 //#region src/components/slider/anatomy/thumb.tsx
 function Thumb$1(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const [thumbProps, componentProps] = splitThumbProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(slider.getThumbProps(thumbProps), { className: classesSlider.thumb }, rest);
+	const attributes = mergeProps(slider.getThumbProps(thumbProps), { className: classes.slider.thumb }, rest);
 	return /* @__PURE__ */ jsx(ThumbContext.Provider, {
 		value: thumbProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3207,9 +3208,9 @@ function Thumb$1(props) {
 //#endregion
 //#region src/components/slider/anatomy/track.tsx
 function Track(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getTrackProps(), { className: classesSlider.track }, rest);
+	const attributes = mergeProps(slider.getTrackProps(), { className: classes.slider.track }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3219,9 +3220,9 @@ function Track(props) {
 //#endregion
 //#region src/components/slider/anatomy/value-text.tsx
 function ValueText(props) {
-	const slider = use(RootContext$15);
+	const slider = use(RootContext$17);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(slider.getValueTextProps(), { className: classesSlider.valueText }, rest);
+	const attributes = mergeProps(slider.getValueTextProps(), { className: classes.slider.valueText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("output", {
 		...attributes,
 		children
@@ -3230,9 +3231,9 @@ function ValueText(props) {
 
 //#endregion
 //#region src/components/slider/modules/anatomy.ts
-const Slider = Object.assign(SliderRoot, {
+const Slider = Object.assign(SliderRoot$1, {
 	Provider: SliderRootProvider,
-	Context: RootContext$14,
+	Context: RootContext$16,
 	Label: Label$3,
 	ValueText,
 	Control: Control$2,
@@ -3244,6 +3245,179 @@ const Slider = Object.assign(SliderRoot, {
 	Marker
 });
 
+//#endregion
+//#region src/components/steps/modules/root-context.ts
+const RootContext$15 = createContext$1();
+
+//#endregion
+//#region src/components/steps/anatomy/content.tsx
+function Content$2(props) {
+	const steps = use(RootContext$15);
+	const { element, children, index, ...rest } = props;
+	const attributes = mergeProps(steps.getContentProps({ index }), { className: classes.steps.content }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/modules/item-context.ts
+const ItemContext$1 = createContext$1();
+
+//#endregion
+//#region src/components/steps/anatomy/indicator.tsx
+function Indicator$1(props) {
+	const steps = use(RootContext$15);
+	const itemProps = use(ItemContext$1);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getIndicatorProps(itemProps), { className: classes.steps.indicator }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/item.tsx
+function Item$3(props) {
+	const steps = use(RootContext$15);
+	const { element, children, index, ...rest } = props;
+	const itemProps = { index };
+	const attributes = mergeProps(steps.getItemProps(itemProps), { className: classes.steps.item }, rest);
+	return /* @__PURE__ */ jsx(ItemContext$1.Provider, {
+		value: itemProps,
+		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+			...attributes,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/list.tsx
+function List$1(props) {
+	const steps = use(RootContext$15);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getListProps(), { className: classes.steps.list }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/next-trigger.tsx
+function NextTrigger(props) {
+	const steps = use(RootContext$15);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getNextTriggerProps(), { className: classes.steps.nextTrigger }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/prev-trigger.tsx
+function PrevTrigger(props) {
+	const steps = use(RootContext$15);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getPrevTriggerProps(), { className: classes.steps.prevTrigger }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/root-context.tsx
+function RootContext$14(props) {
+	const steps = use(RootContext$15);
+	const { children } = props;
+	return children(steps);
+}
+
+//#endregion
+//#region src/components/steps/anatomy/root-provider.tsx
+function RootProvider$5(props) {
+	const { element, children, value: steps, ...rest } = props;
+	const attributes = mergeProps(steps.getRootProps(), { className: classes.steps.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
+		value: steps,
+		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+			...attributes,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/steps/modules/provider.ts
+function useSteps(props = {}) {
+	return connect$16(useMachine(machine$16, {
+		id: useId(),
+		...props
+	}), normalizeProps);
+}
+
+//#endregion
+//#region src/components/steps/anatomy/root.tsx
+function SliderRoot(props) {
+	const [stepsProps, componentProps] = splitProps$16(props);
+	const { element, children, ...rest } = componentProps;
+	const steps = useSteps(stepsProps);
+	const attributes = mergeProps(steps.getRootProps(), { className: classes.steps.root }, rest);
+	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
+		value: steps,
+		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+			...attributes,
+			children
+		})
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/separator.tsx
+function Separator(props) {
+	const steps = use(RootContext$15);
+	const itemProps = use(ItemContext$1);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getSeparatorProps(itemProps), { className: classes.steps.separator }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/anatomy/trigger.tsx
+function Trigger$2(props) {
+	const steps = use(RootContext$15);
+	const itemProps = use(ItemContext$1);
+	const { element, children, ...rest } = props;
+	const attributes = mergeProps(steps.getTriggerProps(itemProps), { className: classes.steps.trigger }, rest);
+	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
+		...attributes,
+		children
+	});
+}
+
+//#endregion
+//#region src/components/steps/modules/anatomy.ts
+const Steps = Object.assign(SliderRoot, {
+	Provider: RootProvider$5,
+	Context: RootContext$14,
+	List: List$1,
+	Item: Item$3,
+	Trigger: Trigger$2,
+	Indicator: Indicator$1,
+	Separator,
+	Content: Content$2,
+	PrevTrigger,
+	NextTrigger
+});
+
 //#endregion
 //#region src/components/switch/modules/root-context.ts
 const RootContext$13 = createContext$1();
@@ -3253,7 +3427,7 @@ const RootContext$13 = createContext$1();
 function Control$1(props) {
 	const switch_ = use(RootContext$13);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(switch_.getControlProps(), { className: classesSwitch.control }, rest);
+	const attributes = mergeProps(switch_.getControlProps(), { className: classes.switch.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -3265,7 +3439,7 @@ function Control$1(props) {
 function HiddenInput$1(props) {
 	const switch_ = use(RootContext$13);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(switch_.getHiddenInputProps(), { className: classesSwitch.hiddenInput }, rest);
+	const attributes = mergeProps(switch_.getHiddenInputProps(), { className: classes.switch.hiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -3274,7 +3448,7 @@ function HiddenInput$1(props) {
 function Label$2(props) {
 	const switch_ = use(RootContext$13);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(switch_.getLabelProps(), { className: classesSwitch.label }, rest);
+	const attributes = mergeProps(switch_.getLabelProps(), { className: classes.switch.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -3293,7 +3467,7 @@ function RootContext$12(props) {
 //#region src/components/switch/anatomy/root-provider.tsx
 function RootProvider$4(props) {
 	const { element, children, value: switch_, ...rest } = props;
-	const attributes = mergeProps(switch_.getRootProps(), { className: classesSwitch.root }, rest);
+	const attributes = mergeProps(switch_.getRootProps(), { className: classes.switch.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$13.Provider, {
 		value: switch_,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("label", {
@@ -3306,7 +3480,7 @@ function RootProvider$4(props) {
 //#endregion
 //#region src/components/switch/modules/provider.ts
 function useSwitch(props = {}) {
-	return connect$16(useMachine(machine$16, {
+	return connect$17(useMachine(machine$17, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -3315,10 +3489,10 @@ function useSwitch(props = {}) {
 //#endregion
 //#region src/components/switch/anatomy/root.tsx
 function Root$5(props) {
-	const [switchProps, componentProps] = splitProps$16(props);
+	const [switchProps, componentProps] = splitProps$17(props);
 	const { element, children, ...rest } = componentProps;
 	const switch_ = useSwitch(switchProps);
-	const attributes = mergeProps(switch_.getRootProps(), { className: classesSwitch.root }, rest);
+	const attributes = mergeProps(switch_.getRootProps(), { className: classes.switch.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$13.Provider, {
 		value: switch_,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("label", {
@@ -3333,7 +3507,7 @@ function Root$5(props) {
 function Thumb(props) {
 	const switch_ = use(RootContext$13);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(switch_.getThumbProps(), { className: classesSwitch.thumb }, rest);
+	const attributes = mergeProps(switch_.getThumbProps(), { className: classes.switch.thumb }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -3361,7 +3535,7 @@ function Content$1(props) {
 	const tabs = use(RootContext$11);
 	const [contentProps, componentProps] = splitContentProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(tabs.getContentProps(contentProps), { className: classesTabs.content }, rest);
+	const attributes = mergeProps(tabs.getContentProps(contentProps), { className: classes.tabs.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3373,7 +3547,7 @@ function Content$1(props) {
 function Indicator(props) {
 	const tabs = use(RootContext$11);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(tabs.getIndicatorProps(), { className: classesTabs.indicator }, rest);
+	const attributes = mergeProps(tabs.getIndicatorProps(), { className: classes.tabs.indicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", { ...attributes });
 }
 
@@ -3382,7 +3556,7 @@ function Indicator(props) {
 function List(props) {
 	const tabs = use(RootContext$11);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tabs.getListProps(), { className: classesTabs.list }, rest);
+	const attributes = mergeProps(tabs.getListProps(), { className: classes.tabs.list }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3401,7 +3575,7 @@ function RootContext$10(props) {
 //#region src/components/tabs/anatomy/root-provider.tsx
 function RootProvider$3(props) {
 	const { element, children, value: tabs, ...rest } = props;
-	const attributes = mergeProps(tabs.getRootProps(), { className: classesTabs.root }, rest);
+	const attributes = mergeProps(tabs.getRootProps(), { className: classes.tabs.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$11.Provider, {
 		value: tabs,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3414,7 +3588,7 @@ function RootProvider$3(props) {
 //#endregion
 //#region src/components/tabs/modules/provider.ts
 function useTabs(props = {}) {
-	return connect$17(useMachine(machine$17, {
+	return connect$18(useMachine(machine$18, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -3423,10 +3597,10 @@ function useTabs(props = {}) {
 //#endregion
 //#region src/components/tabs/anatomy/root.tsx
 function Root$4(props) {
-	const [tabsProps, componentProps] = splitProps$17(props);
+	const [tabsProps, componentProps] = splitProps$18(props);
 	const { element, children, ...rest } = componentProps;
 	const tabs = useTabs(tabsProps);
-	const attributes = mergeProps(tabs.getRootProps(), { className: classesTabs.root }, rest);
+	const attributes = mergeProps(tabs.getRootProps(), { className: classes.tabs.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$11.Provider, {
 		value: tabs,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3442,7 +3616,7 @@ function Trigger$1(props) {
 	const tabs = use(RootContext$11);
 	const [triggerProps, componentProps] = splitTriggerProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(tabs.getTriggerProps(triggerProps), { className: classesTabs.trigger }, rest);
+	const attributes = mergeProps(tabs.getTriggerProps(triggerProps), { className: classes.tabs.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3469,7 +3643,7 @@ const RootContext$9 = createContext$1();
 function ClearTrigger(props) {
 	const tagsInput = use(RootContext$9);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getClearTriggerProps(), { className: classesTagsInput.clearTrigger }, rest);
+	const attributes = mergeProps(tagsInput.getClearTriggerProps(), { className: classes.tagsInput.clearTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3481,7 +3655,7 @@ function ClearTrigger(props) {
 function Control(props) {
 	const tagsInput = use(RootContext$9);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getControlProps(), { className: classesTagsInput.control }, rest);
+	const attributes = mergeProps(tagsInput.getControlProps(), { className: classes.tagsInput.control }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3493,7 +3667,7 @@ function Control(props) {
 function HiddenInput(props) {
 	const tagsInput = use(RootContext$9);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getHiddenInputProps(), { className: classesTagsInput.hiddenInput }, rest);
+	const attributes = mergeProps(tagsInput.getHiddenInputProps(), { className: classes.tagsInput.hiddenInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -3502,7 +3676,7 @@ function HiddenInput(props) {
 function Input(props) {
 	const tagsInput = use(RootContext$9);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getInputProps(), { className: classesTagsInput.input }, rest);
+	const attributes = mergeProps(tagsInput.getInputProps(), { className: classes.tagsInput.input }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -3516,7 +3690,7 @@ function ItemDeleteTrigger(props) {
 	const tagsInput = use(RootContext$9);
 	const itemProps = use(ItemContext);
 	const { element, children = /* @__PURE__ */ jsx(Fragment, { children: "×" }), ...rest } = props;
-	const attributes = mergeProps(tagsInput.getItemDeleteTriggerProps(itemProps), { className: classesTagsInput.itemDeleteTrigger }, rest);
+	const attributes = mergeProps(tagsInput.getItemDeleteTriggerProps(itemProps), { className: classes.tagsInput.itemDeleteTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3529,7 +3703,7 @@ function ItemInput(props) {
 	const tagsInput = use(RootContext$9);
 	const itemProps = use(ItemContext);
 	const { element, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getItemInputProps(itemProps), { className: classesTagsInput.itemInput }, rest);
+	const attributes = mergeProps(tagsInput.getItemInputProps(itemProps), { className: classes.tagsInput.itemInput }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("input", { ...attributes });
 }
 
@@ -3539,7 +3713,7 @@ function ItemPreview(props) {
 	const tagsInput = use(RootContext$9);
 	const itemProps = use(ItemContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getItemPreviewProps(itemProps), { className: classesTagsInput.itemPreview }, rest);
+	const attributes = mergeProps(tagsInput.getItemPreviewProps(itemProps), { className: classes.tagsInput.itemPreview }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3552,7 +3726,7 @@ function ItemText(props) {
 	const tagsInput = use(RootContext$9);
 	const itemProps = use(ItemContext);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getItemTextProps(itemProps), { className: classesTagsInput.itemText }, rest);
+	const attributes = mergeProps(tagsInput.getItemTextProps(itemProps), { className: classes.tagsInput.itemText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -3565,7 +3739,7 @@ function Item$2(props) {
 	const tagsInput = use(RootContext$9);
 	const [itemProps, componentProps] = splitItemProps$8(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(tagsInput.getItemProps(itemProps), { className: classesTagsInput.item }, rest);
+	const attributes = mergeProps(tagsInput.getItemProps(itemProps), { className: classes.tagsInput.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("span", {
@@ -3580,7 +3754,7 @@ function Item$2(props) {
 function Label$1(props) {
 	const tagsInput = use(RootContext$9);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getLabelProps(), { className: classesTagsInput.label }, rest);
+	const attributes = mergeProps(tagsInput.getLabelProps(), { className: classes.tagsInput.label }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("label", {
 		...attributes,
 		children
@@ -3599,7 +3773,7 @@ function RootContext$8(props) {
 //#region src/components/tags-input/anatomy/root-provider.tsx
 function RootProvider$2(props) {
 	const { element, children, value: tagsInput, ...rest } = props;
-	const attributes = mergeProps(tagsInput.getRootProps(), { className: classesTagsInput.root }, rest);
+	const attributes = mergeProps(tagsInput.getRootProps(), { className: classes.tagsInput.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$9.Provider, {
 		value: tagsInput,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3612,7 +3786,7 @@ function RootProvider$2(props) {
 //#endregion
 //#region src/components/tags-input/modules/provider.ts
 function useTagsInput(props = {}) {
-	return connect$18(useMachine(machine$18, {
+	return connect$19(useMachine(machine$19, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -3621,10 +3795,10 @@ function useTagsInput(props = {}) {
 //#endregion
 //#region src/components/tags-input/anatomy/root.tsx
 function Root$3(props) {
-	const [tagsInputProps, componentProps] = splitProps$18(props);
+	const [tagsInputProps, componentProps] = splitProps$19(props);
 	const { element, children, ...rest } = componentProps;
 	const tagsInput = useTagsInput(tagsInputProps);
-	const attributes = mergeProps(tagsInput.getRootProps(), { className: classesTagsInput.root }, rest);
+	const attributes = mergeProps(tagsInput.getRootProps(), { className: classes.tagsInput.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$9.Provider, {
 		value: tagsInput,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3660,7 +3834,7 @@ const RootContext$7 = createContext$1();
 function ActionTrigger(props) {
 	const toast = use(RootContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(toast.getActionTriggerProps(), { className: classesToast.actionTrigger }, rest);
+	const attributes = mergeProps(toast.getActionTriggerProps(), { className: classes.toast.actionTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3692,7 +3866,7 @@ function X(props) {
 function CloseTrigger(props) {
 	const toast = use(RootContext$7);
 	const { element, children = /* @__PURE__ */ jsx(X, {}), ...rest } = props;
-	const attributes = mergeProps(toast.getCloseTriggerProps(), { className: classesToast.closeTrigger }, rest);
+	const attributes = mergeProps(toast.getCloseTriggerProps(), { className: classes.toast.closeTrigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3704,7 +3878,7 @@ function CloseTrigger(props) {
 function Description(props) {
 	const toast = use(RootContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(toast.getDescriptionProps(), { className: classesToast.description }, rest);
+	const attributes = mergeProps(toast.getDescriptionProps(), { className: classes.toast.description }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3724,7 +3898,7 @@ function Group(props) {
 		store: toaster
 	});
 	const api = group.connect(service, normalizeProps);
-	const attributes = mergeProps(api.getGroupProps(), { className: classesToast.group }, rest);
+	const attributes = mergeProps(api.getGroupProps(), { className: classes.toast.group }, rest);
 	return /* @__PURE__ */ jsx(GroupContext.Provider, {
 		value: service,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3738,7 +3912,7 @@ function Group(props) {
 //#region src/components/toast/anatomy/message.tsx
 function Message(props) {
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps({ className: classesToast.message }, rest);
+	const attributes = mergeProps({ className: classes.toast.message }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3758,11 +3932,11 @@ function RootContext$6(props) {
 function Root$2(props) {
 	const group$1 = use(GroupContext);
 	const { element, children, toast: toastProps, ...rest } = props;
-	const toast = connect$19(useMachine(machine$19, {
+	const toast = connect$20(useMachine(machine$20, {
 		...toastProps,
 		parent: group$1
 	}), normalizeProps);
-	const attributes = mergeProps(toast.getRootProps(), { className: classesToast.root }, rest);
+	const attributes = mergeProps(toast.getRootProps(), { className: classes.toast.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$7.Provider, {
 		value: toast,
 		children: element ? element(attributes) : /* @__PURE__ */ jsxs("div", {
@@ -3781,7 +3955,7 @@ function Root$2(props) {
 function Title(props) {
 	const toast = use(RootContext$7);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(toast.getTitleProps(), { className: classesToast.title }, rest);
+	const attributes = mergeProps(toast.getTitleProps(), { className: classes.toast.title }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3810,7 +3984,7 @@ function Item$1(props) {
 	const toggleGroup = use(RootContext$5);
 	const [itemProps, componentProps] = splitItemProps$9(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(toggleGroup.getItemProps(itemProps), { className: classesToggleGroup.item }, rest);
+	const attributes = mergeProps(toggleGroup.getItemProps(itemProps), { className: classes.toggleGroup.item }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -3829,7 +4003,7 @@ function RootContext$4(props) {
 //#region src/components/toggle-group/anatomy/root-provider.tsx
 function ToggleGroupRootProvider(props) {
 	const { element, children, value: toggleGroup, ...rest } = props;
-	const attributes = mergeProps(toggleGroup.getRootProps(), { className: classesToggleGroup.root }, rest);
+	const attributes = mergeProps(toggleGroup.getRootProps(), { className: classes.toggleGroup.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$5.Provider, {
 		value: toggleGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3842,7 +4016,7 @@ function ToggleGroupRootProvider(props) {
 //#endregion
 //#region src/components/toggle-group/modules/provider.ts
 function useToggleGroup(props = {}) {
-	return connect$20(useMachine(machine$20, {
+	return connect$21(useMachine(machine$21, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -3851,10 +4025,10 @@ function useToggleGroup(props = {}) {
 //#endregion
 //#region src/components/toggle-group/anatomy/root.tsx
 function ToggleGroupRoot(props) {
-	const [toggleGroupProps, componentProps] = splitProps$19(props);
+	const [toggleGroupProps, componentProps] = splitProps$20(props);
 	const { element, children, ...rest } = componentProps;
 	const toggleGroup = useToggleGroup(toggleGroupProps);
-	const attributes = mergeProps(toggleGroup.getRootProps(), { className: classesToggleGroup.root }, rest);
+	const attributes = mergeProps(toggleGroup.getRootProps(), { className: classes.toggleGroup.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$5.Provider, {
 		value: toggleGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3881,7 +4055,7 @@ const RootContext$3 = createContext$1();
 function ArrowTip(props) {
 	const tooltip = use(RootContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tooltip.getArrowTipProps(), { className: classesTooltip.arrowTip }, rest);
+	const attributes = mergeProps(tooltip.getArrowTipProps(), { className: classes.tooltip.arrowTip }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3893,7 +4067,7 @@ function ArrowTip(props) {
 function Arrow(props) {
 	const tooltip = use(RootContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tooltip.getArrowProps(), { className: classesTooltip.arrow }, rest);
+	const attributes = mergeProps(tooltip.getArrowProps(), { className: classes.tooltip.arrow }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3905,7 +4079,7 @@ function Arrow(props) {
 function Content(props) {
 	const tooltip = use(RootContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tooltip.getContentProps(), { className: classesTooltip.content }, rest);
+	const attributes = mergeProps(tooltip.getContentProps(), { className: classes.tooltip.content }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3917,7 +4091,7 @@ function Content(props) {
 function Positioner(props) {
 	const tooltip = use(RootContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tooltip.getPositionerProps(), { className: classesTooltip.positioner }, rest);
+	const attributes = mergeProps(tooltip.getPositionerProps(), { className: classes.tooltip.positioner }, rest);
 	return /* @__PURE__ */ jsx(Portal$1, { children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -3945,7 +4119,7 @@ function RootProvider$1(props) {
 //#endregion
 //#region src/components/tooltip/modules/provider.ts
 function useTooltip(props = {}) {
-	return connect$21(useMachine(machine$21, {
+	return connect$22(useMachine(machine$22, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -3954,7 +4128,7 @@ function useTooltip(props = {}) {
 //#endregion
 //#region src/components/tooltip/anatomy/root.tsx
 function Root$1(props) {
-	const [tooltipProps, componentProps] = splitProps$20(props);
+	const [tooltipProps, componentProps] = splitProps$21(props);
 	const { children } = componentProps;
 	const tooltip = useTooltip(tooltipProps);
 	return /* @__PURE__ */ jsx(RootContext$3.Provider, {
@@ -3968,7 +4142,7 @@ function Root$1(props) {
 function Trigger(props) {
 	const tooltip = use(RootContext$3);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(tooltip.getTriggerProps(), { className: classesTooltip.trigger }, rest);
+	const attributes = mergeProps(tooltip.getTriggerProps(), { className: classes.tooltip.trigger }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("button", {
 		...attributes,
 		children
@@ -4001,7 +4175,7 @@ function BranchContent(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchContentProps(nodeProps), { className: classesTreeView.branchContent }, rest);
+	const attributes = mergeProps(treeView.getBranchContentProps(nodeProps), { className: classes.treeView.branchContent }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4014,7 +4188,7 @@ function BranchControl(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchControlProps(nodeProps), { className: classesTreeView.branchControl }, rest);
+	const attributes = mergeProps(treeView.getBranchControlProps(nodeProps), { className: classes.treeView.branchControl }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4027,7 +4201,7 @@ function BranchIndentGuide(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchIndentGuideProps(nodeProps), { className: classesTreeView.branchIndentGuide }, rest);
+	const attributes = mergeProps(treeView.getBranchIndentGuideProps(nodeProps), { className: classes.treeView.branchIndentGuide }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4040,7 +4214,7 @@ function BranchIndicator(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children = /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" }), ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchIndicatorProps(nodeProps), { className: classesTreeView.branchIndicator }, rest);
+	const attributes = mergeProps(treeView.getBranchIndicatorProps(nodeProps), { className: classes.treeView.branchIndicator }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -4053,7 +4227,7 @@ function BranchText(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchTextProps(nodeProps), { className: classesTreeView.branchText }, rest);
+	const attributes = mergeProps(treeView.getBranchTextProps(nodeProps), { className: classes.treeView.branchText }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("span", {
 		...attributes,
 		children
@@ -4066,7 +4240,7 @@ function Branch(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getBranchProps(nodeProps), { className: classesTreeView.branch }, rest);
+	const attributes = mergeProps(treeView.getBranchProps(nodeProps), { className: classes.treeView.branch }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4079,7 +4253,7 @@ function Item(props) {
 	const treeView = use(RootContext$1);
 	const nodeProps = use(NodeContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getItemProps(nodeProps), { className: classesTreeView.item }, rest);
+	const attributes = mergeProps(treeView.getItemProps(nodeProps), { className: classes.treeView.item }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4091,7 +4265,7 @@ function Item(props) {
 function Label(props) {
 	const treeView = use(RootContext$1);
 	const { element, children, level = 3, ...rest } = props;
-	const attributes = mergeProps(treeView.getLabelProps(), { className: classesTreeView.label }, rest);
+	const attributes = mergeProps(treeView.getLabelProps(), { className: classes.treeView.label }, rest);
 	const Tag = `h${level}`;
 	return element ? element(attributes) : /* @__PURE__ */ jsx(Tag, {
 		...attributes,
@@ -4129,7 +4303,7 @@ function RootContext(props) {
 //#region src/components/tree-view/anatomy/root-provider.tsx
 function RootProvider(props) {
 	const { element, children, value: treeView, ...rest } = props;
-	const attributes = mergeProps(treeView.getRootProps(), { className: classesTreeView.root }, rest);
+	const attributes = mergeProps(treeView.getRootProps(), { className: classes.treeView.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$1.Provider, {
 		value: treeView,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -4142,7 +4316,7 @@ function RootProvider(props) {
 //#endregion
 //#region src/components/tree-view/modules/provider.ts
 function useTreeView(props = {}) {
-	return connect$22(useMachine(machine$22, {
+	return connect$23(useMachine(machine$23, {
 		id: useId(),
 		...props
 	}), normalizeProps);
@@ -4151,10 +4325,10 @@ function useTreeView(props = {}) {
 //#endregion
 //#region src/components/tree-view/anatomy/root.tsx
 function Root(props) {
-	const [treeViewProps, componentProps] = splitProps$21(props);
+	const [treeViewProps, componentProps] = splitProps$22(props);
 	const { element, children, ...rest } = componentProps;
 	const treeView = useTreeView(treeViewProps);
-	const attributes = mergeProps(treeView.getRootProps(), { className: classesTreeView.root }, rest);
+	const attributes = mergeProps(treeView.getRootProps(), { className: classes.treeView.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$1.Provider, {
 		value: treeView,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -4169,7 +4343,7 @@ function Root(props) {
 function Tree(props) {
 	const treeView = use(RootContext$1);
 	const { element, children, ...rest } = props;
-	const attributes = mergeProps(treeView.getTreeProps(), { className: classesTreeView.tree }, rest);
+	const attributes = mergeProps(treeView.getTreeProps(), { className: classes.treeView.tree }, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
 		children
@@ -4201,4 +4375,4 @@ function useListCollection(options) {
 }
 
 //#endregion
-export { Accordion, AppBar, Avatar, Collapsible, Combobox, DatePicker, Dialog, FileUpload, FloatingPanel, Listbox, Menu, Navigation, Pagination, Popover, Portal, Progress, RatingGroup, SegmentedControl, Slider, Switch, Tabs, TagsInput, Toast, ToggleGroup, Tooltip, TreeView, createToaster, createTreeViewCollection, parseDate, useAccordion, useAvatar, useCollapsible, useCombobox, useDatePicker, useDialog, useFileUpload, useFloatingPanel, useListCollection, useListbox, useMenu, usePagination, usePopover, useProgress, useRatingGroup, useSegmentedControl, useSlider, useSwitch, useTabs, useTagsInput, useToggleGroup, useTooltip, useTreeView };
+export { Accordion, AppBar, Avatar, Collapsible, Combobox, DatePicker, Dialog, FileUpload, FloatingPanel, Listbox, Menu, Navigation, Pagination, Popover, Portal, Progress, RatingGroup, SegmentedControl, Slider, Steps, Switch, Tabs, TagsInput, Toast, ToggleGroup, Tooltip, TreeView, createToaster, createTreeViewCollection, parseDate, useAccordion, useAvatar, useCollapsible, useCombobox, useDatePicker, useDialog, useFileUpload, useFloatingPanel, useListCollection, useListbox, useMenu, usePagination, usePopover, useProgress, useRatingGroup, useSegmentedControl, useSlider, useSteps, useSwitch, useTabs, useTagsInput, useToggleGroup, useTooltip, useTreeView };