@skeletonlabs/skeleton-react 4.6.0 → 4.6.1

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";
@@ -56,7 +56,7 @@ function ItemContent(props) {
 	const accordion = use(RootContext$46);
 	const itemProps = use(ItemContext$6);
 	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
@@ -69,7 +69,7 @@ function ItemIndicator$3(props) {
 	const accordion = use(RootContext$46);
 	const itemProps = use(ItemContext$6);
 	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
@@ -82,7 +82,7 @@ function ItemTrigger(props) {
 	const accordion = use(RootContext$46);
 	const itemProps = use(ItemContext$6);
 	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
@@ -95,7 +95,7 @@ function Item$10(props) {
 	const accordion = use(RootContext$46);
 	const [itemProps, componentProps] = splitItemProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(accordion.getItemProps(itemProps), { className: classesAccordion.item }, rest);
+	const attributes = mergeProps(accordion.getItemProps(itemProps), { className: classes.accordion.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$6.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -117,7 +117,7 @@ function RootContext$45(props) {
 //#region src/components/accordion/anatomy/root-provider.tsx
 function RootProvider$16(props) {
 	const { element, children, value: accordion, ...rest } = props;
-	const attributes = mergeProps(accordion.getRootProps(), { className: classesAccordion.root }, rest);
+	const attributes = mergeProps(accordion.getRootProps(), { className: classes.accordion.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
 		value: accordion,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -133,7 +133,7 @@ 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);
+	const attributes = mergeProps(accordion.getRootProps(), { className: classes.accordion.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$46.Provider, {
 		value: accordion,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -158,7 +158,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 +169,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 +180,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 +191,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 +202,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
@@ -227,7 +227,7 @@ const RootContext$44 = createContext$1();
 function Fallback(props) {
 	const avatar = use(RootContext$44);
 	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
@@ -239,7 +239,7 @@ function Fallback(props) {
 function Image(props) {
 	const avatar = use(RootContext$44);
 	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 });
 }
 
@@ -255,7 +255,7 @@ 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);
+	const attributes = mergeProps(avatar.getRootProps(), { className: classes.avatar.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
 		value: avatar,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -280,7 +280,7 @@ 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);
+	const attributes = mergeProps(avatar.getRootProps(), { className: classes.avatar.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$44.Provider, {
 		value: avatar,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -308,7 +308,7 @@ const RootContext$42 = createContext$1();
 function Content$9(props) {
 	const collapsible = use(RootContext$42);
 	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
@@ -320,7 +320,7 @@ function Content$9(props) {
 function Indicator$3(props) {
 	const collapsible = use(RootContext$42);
 	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
@@ -339,7 +339,7 @@ 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);
+	const attributes = mergeProps(collapsible.getRootProps(), { className: classes.collapsible.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
 		value: collapsible,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -364,7 +364,7 @@ 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);
+	const attributes = mergeProps(collapsible.getRootProps(), { className: classes.collapsible.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$42.Provider, {
 		value: collapsible,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -379,7 +379,7 @@ function CollapsibleRoot(props) {
 function Trigger$9(props) {
 	const collapsible = use(RootContext$42);
 	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
@@ -405,7 +405,7 @@ const RootContext$40 = createContext$1();
 function ClearTrigger$2(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -417,7 +417,7 @@ function ClearTrigger$2(props) {
 function Content$8(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -429,7 +429,7 @@ function Content$8(props) {
 function Control$7(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -441,7 +441,7 @@ function Control$7(props) {
 function Input$3(props) {
 	const combobox = use(RootContext$40);
 	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 });
 }
 
@@ -458,7 +458,7 @@ function ItemGroupLabel$2(props) {
 		...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
@@ -474,7 +474,7 @@ function ItemGroup$3(props) {
 		...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", {
@@ -514,7 +514,7 @@ function ItemIndicator$2(props) {
 	const combobox = use(RootContext$40);
 	const itemProps = use(ItemContext$5);
 	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
@@ -527,7 +527,7 @@ function ItemText$4(props) {
 	const combobox = use(RootContext$40);
 	const itemProps = use(ItemContext$5);
 	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
@@ -540,7 +540,7 @@ function Item$9(props) {
 	const combobox = use(RootContext$40);
 	const [itemProps, componentProps] = splitItemProps$1(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(combobox.getItemProps(itemProps), { className: classesCombobox.item }, rest);
+	const attributes = mergeProps(combobox.getItemProps(itemProps), { className: classes.combobox.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$5.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
@@ -555,7 +555,7 @@ function Item$9(props) {
 function Label$10(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -567,7 +567,7 @@ function Label$10(props) {
 function Positioner$6(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -595,7 +595,7 @@ function useCombobox(props = {}) {
 //#region src/components/combobox/anatomy/root-provider.tsx
 function RootProvider$15(props) {
 	const { element, children, value: combobox, ...rest } = props;
-	const attributes = mergeProps(combobox.getRootProps(), { className: classesCombobox.root }, rest);
+	const attributes = mergeProps(combobox.getRootProps(), { className: classes.combobox.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
 		value: combobox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -611,7 +611,7 @@ 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);
+	const attributes = mergeProps(combobox.getRootProps(), { className: classes.combobox.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$40.Provider, {
 		value: combobox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -646,7 +646,7 @@ function ChevronDown(props) {
 function Trigger$8(props) {
 	const combobox = use(RootContext$40);
 	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
@@ -681,7 +681,7 @@ const RootContext$38 = createContext$1();
 function Content$7(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -693,7 +693,7 @@ function Content$7(props) {
 function Control$6(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -706,7 +706,7 @@ function Input$2(props) {
 	const datePicker = use(RootContext$38);
 	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 });
 }
 
@@ -715,7 +715,7 @@ function Input$2(props) {
 function Label$9(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -727,7 +727,7 @@ function Label$9(props) {
 function MonthSelect(props) {
 	const datePicker = use(RootContext$38);
 	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", {
@@ -767,7 +767,7 @@ function NextTrigger$1(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -779,7 +779,7 @@ function NextTrigger$1(props) {
 function Positioner$5(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -792,7 +792,7 @@ function PresetTrigger(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -825,7 +825,7 @@ function PrevTrigger$1(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -838,7 +838,7 @@ function RangeText(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -866,7 +866,7 @@ function useDatePicker(props = {}) {
 //#region src/components/date-picker/anatomy/root-provider.tsx
 function RootProvider$14(props) {
 	const { element, children, value: datePicker, ...rest } = props;
-	const attributes = mergeProps(datePicker.getRootProps(), { className: classesDatePicker.root }, rest);
+	const attributes = mergeProps(datePicker.getRootProps(), { className: classes.datePicker.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
 		value: datePicker,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -882,7 +882,7 @@ 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);
+	const attributes = mergeProps(datePicker.getRootProps(), { className: classes.datePicker.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$38.Provider, {
 		value: datePicker,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -898,7 +898,7 @@ function TableBody(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -923,7 +923,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
@@ -944,7 +944,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", {
@@ -960,7 +960,7 @@ function TableHead(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -973,7 +973,7 @@ function TableHeader(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -986,7 +986,7 @@ function TableRow(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -999,7 +999,7 @@ function Table(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -1042,7 +1042,7 @@ function Calendar(props) {
 function Trigger$7(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -1055,7 +1055,7 @@ function ViewControl(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -1068,7 +1068,7 @@ function ViewTrigger(props) {
 	const datePicker = use(RootContext$38);
 	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
@@ -1081,7 +1081,7 @@ function View(props) {
 	const datePicker = use(RootContext$38);
 	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", {
@@ -1096,7 +1096,7 @@ function View(props) {
 function YearSelect(props) {
 	const datePicker = use(RootContext$38);
 	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", {
@@ -1144,7 +1144,7 @@ const RootContext$36 = createContext$1();
 function Backdrop(props) {
 	const dialog = use(RootContext$36);
 	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 });
 }
 
@@ -1153,7 +1153,7 @@ function Backdrop(props) {
 function CloseTrigger$3(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1165,7 +1165,7 @@ function CloseTrigger$3(props) {
 function Content$6(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1177,7 +1177,7 @@ function Content$6(props) {
 function Description$2(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1189,7 +1189,7 @@ function Description$2(props) {
 function Positioner$4(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1240,7 +1240,7 @@ function Root$15(props) {
 function Title$3(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1252,7 +1252,7 @@ function Title$3(props) {
 function Trigger$6(props) {
 	const dialog = use(RootContext$36);
 	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
@@ -1282,7 +1282,7 @@ const RootContext$34 = createContext$1();
 function ClearTrigger$1(props) {
 	const fileUpload = use(RootContext$34);
 	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
@@ -1294,7 +1294,7 @@ function ClearTrigger$1(props) {
 function Dropzone(props) {
 	const fileUpload = use(RootContext$34);
 	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
@@ -1306,7 +1306,7 @@ function Dropzone(props) {
 function HiddenInput$4(props) {
 	const fileUpload = use(RootContext$34);
 	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 });
 }
 
@@ -1320,7 +1320,7 @@ function ItemDeleteTrigger$1(props) {
 	const fileUpload = use(RootContext$34);
 	const itemProps = use(ItemContext$4);
 	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
@@ -1332,7 +1332,7 @@ function ItemDeleteTrigger$1(props) {
 function ItemGroup$2(props) {
 	const fileUpload = use(RootContext$34);
 	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
@@ -1345,7 +1345,7 @@ function ItemName(props) {
 	const fileUpload = use(RootContext$34);
 	const itemProps = use(ItemContext$4);
 	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
@@ -1358,7 +1358,7 @@ function ItemSizeText(props) {
 	const fileUpload = use(RootContext$34);
 	const itemProps = use(ItemContext$4);
 	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
@@ -1371,7 +1371,7 @@ function Item$8(props) {
 	const fileUpload = use(RootContext$34);
 	const [itemProps, componentProps] = splitItemProps$2(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(fileUpload.getItemProps(itemProps), { className: classesFileUpload.item }, rest);
+	const attributes = mergeProps(fileUpload.getItemProps(itemProps), { className: classes.fileUpload.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$4.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
@@ -1386,7 +1386,7 @@ function Item$8(props) {
 function Label$8(props) {
 	const fileUpload = use(RootContext$34);
 	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
@@ -1405,7 +1405,7 @@ function RootContext$33(props) {
 //#region src/components/file-upload/anatomy/root-provider.tsx
 function RootProvider$12(props) {
 	const { element, children, value: fileUpload, ...rest } = props;
-	const attributes = mergeProps(fileUpload.getRootProps(), { className: classesFileUpload.root }, rest);
+	const attributes = mergeProps(fileUpload.getRootProps(), { className: classes.fileUpload.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
 		value: fileUpload,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1430,7 +1430,7 @@ 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);
+	const attributes = mergeProps(fileUpload.getRootProps(), { className: classes.fileUpload.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$34.Provider, {
 		value: fileUpload,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1445,7 +1445,7 @@ function Root$14(props) {
 function Trigger$5(props) {
 	const fileUpload = use(RootContext$34);
 	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
@@ -1478,7 +1478,7 @@ const RootContext$32 = createContext$1();
 function Body(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1490,7 +1490,7 @@ function Body(props) {
 function CloseTrigger$2(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1502,7 +1502,7 @@ function CloseTrigger$2(props) {
 function Content$5(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1514,7 +1514,7 @@ function Content$5(props) {
 function Control$5(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1526,7 +1526,7 @@ function Control$5(props) {
 function DragTrigger(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1538,7 +1538,7 @@ function DragTrigger(props) {
 function Header(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1550,7 +1550,7 @@ function Header(props) {
 function Positioner$3(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1563,7 +1563,7 @@ function ResizeTrigger(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1614,7 +1614,7 @@ function Root$13(props) {
 function StageTrigger(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1626,7 +1626,7 @@ function StageTrigger(props) {
 function Title$2(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1638,7 +1638,7 @@ function Title$2(props) {
 function Trigger$4(props) {
 	const floatingPanel = use(RootContext$32);
 	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
@@ -1672,7 +1672,7 @@ const RootContext$30 = createContext$1();
 function Content$4(props) {
 	const listbox = use(RootContext$30);
 	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
@@ -1684,7 +1684,7 @@ function Content$4(props) {
 function Input$1(props) {
 	const listbox = use(RootContext$30);
 	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 });
 }
 
@@ -1701,7 +1701,7 @@ function ItemGroupLabel$1(props) {
 		...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
@@ -1717,7 +1717,7 @@ function ItemGroup$1(props) {
 		...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", {
@@ -1737,7 +1737,7 @@ function ItemIndicator$1(props) {
 	const listbox = use(RootContext$30);
 	const itemProps = use(ItemContext$3);
 	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
@@ -1750,7 +1750,7 @@ function ItemText$3(props) {
 	const listbox = use(RootContext$30);
 	const itemProps = use(ItemContext$3);
 	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
@@ -1763,7 +1763,7 @@ function Item$7(props) {
 	const listbox = use(RootContext$30);
 	const [itemProps, componentProps] = splitItemProps$3(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(listbox.getItemProps(itemProps), { className: classesListbox.item }, rest);
+	const attributes = mergeProps(listbox.getItemProps(itemProps), { className: classes.listbox.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$3.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("li", {
@@ -1778,7 +1778,7 @@ function Item$7(props) {
 function Label$7(props) {
 	const listbox = use(RootContext$30);
 	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
@@ -1806,7 +1806,7 @@ function useListbox(props) {
 //#region src/components/listbox/anatomy/root-provider.tsx
 function RootProvider$10(props) {
 	const { element, children, value: listbox, ...rest } = props;
-	const attributes = mergeProps(listbox.getRootProps(), { className: classesListbox.root }, rest);
+	const attributes = mergeProps(listbox.getRootProps(), { className: classes.listbox.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
 		value: listbox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1822,7 +1822,7 @@ 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);
+	const attributes = mergeProps(listbox.getRootProps(), { className: classes.listbox.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$30.Provider, {
 		value: listbox,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -1856,7 +1856,7 @@ const RootContext$28 = createContext$1();
 function ArrowTip$2(props) {
 	const menu = use(RootContext$28);
 	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
@@ -1868,7 +1868,7 @@ function ArrowTip$2(props) {
 function Arrow$2(props) {
 	const menu = use(RootContext$28);
 	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
@@ -1880,7 +1880,7 @@ function Arrow$2(props) {
 function Content$3(props) {
 	const menu = use(RootContext$28);
 	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
@@ -1892,7 +1892,7 @@ function Content$3(props) {
 function ContextTrigger(props) {
 	const menu = use(RootContext$28);
 	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
@@ -1904,7 +1904,7 @@ function ContextTrigger(props) {
 function Indicator$2(props) {
 	const menu = use(RootContext$28);
 	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
@@ -1924,7 +1924,7 @@ function ItemGroupLabel(props) {
 		...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
@@ -1940,7 +1940,7 @@ function ItemGroup(props) {
 		...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", {
@@ -1960,7 +1960,7 @@ function ItemIndicator(props) {
 	const menu = use(RootContext$28);
 	const itemProps = use(ItemContext$2);
 	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
@@ -1973,7 +1973,7 @@ function ItemText$2(props) {
 	const menu = use(RootContext$28);
 	const itemProps = use(ItemContext$2);
 	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
@@ -1986,7 +1986,7 @@ function Item$6(props) {
 	const menu = use(RootContext$28);
 	const [itemProps, componentProps] = splitItemProps$4(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getItemProps(itemProps), { className: classesMenu.item }, rest);
+	const attributes = mergeProps(menu.getItemProps(itemProps), { className: classes.menu.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2002,7 +2002,7 @@ function OptionItem(props) {
 	const menu = use(RootContext$28);
 	const [itemProps, componentProps] = splitOptionItemProps(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(menu.getOptionItemProps(itemProps), { className: classesMenu.item }, rest);
+	const attributes = mergeProps(menu.getOptionItemProps(itemProps), { className: classes.menu.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2017,7 +2017,7 @@ function OptionItem(props) {
 function Positioner$2(props) {
 	const menu = use(RootContext$28);
 	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
@@ -2094,7 +2094,7 @@ function Root$11(props) {
 function Separator(props) {
 	const menu = use(RootContext$28);
 	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,7 +2104,7 @@ 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);
+	const attributes = mergeProps(triggerItemProps, { className: classes.menu.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$2.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2119,7 +2119,7 @@ function TriggerItem(props) {
 function Trigger$3(props) {
 	const menu = use(RootContext$28);
 	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
@@ -2159,7 +2159,7 @@ function NavigationContent(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.content
+		className: classes.navigation.content
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2174,7 +2174,7 @@ function NavigationFooter(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.footer
+		className: classes.navigation.footer
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("footer", {
 		...attributes,
@@ -2189,7 +2189,7 @@ function NavigationGroup(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.group
+		className: classes.navigation.group
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2204,7 +2204,7 @@ function NavigationHeader(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.header
+		className: classes.navigation.header
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("header", {
 		...attributes,
@@ -2219,7 +2219,7 @@ function NavigationLabel(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.label
+		className: classes.navigation.label
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2234,7 +2234,7 @@ function NavigationMenu(props) {
 	const navigation = use(RootContext$26);
 	const attributes = mergeProps({
 		"data-layout": navigation.layout,
-		className: classesNavigation.menu
+		className: classes.navigation.menu
 	}, rest);
 	return element ? element(attributes) : /* @__PURE__ */ jsx("div", {
 		...attributes,
@@ -2248,7 +2248,7 @@ 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, {
 		value: { layout },
@@ -2280,7 +2280,7 @@ function Ellipsis(props) {
 	const pagination = use(RootContext$25);
 	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
@@ -2293,7 +2293,7 @@ function FirstTrigger(props) {
 	const pagination = use(RootContext$25);
 	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", {
@@ -2308,7 +2308,7 @@ function Item$5(props) {
 	const pagination = use(RootContext$25);
 	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
@@ -2321,7 +2321,7 @@ function LastTrigger(props) {
 	const pagination = use(RootContext$25);
 	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", {
@@ -2335,7 +2335,7 @@ function LastTrigger(props) {
 function NextTrigger(props) {
 	const pagination = use(RootContext$25);
 	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
@@ -2347,7 +2347,7 @@ function NextTrigger(props) {
 function PrevTrigger(props) {
 	const pagination = use(RootContext$25);
 	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
@@ -2366,7 +2366,7 @@ 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);
+	const attributes = mergeProps(pagination.getRootProps(), { className: classes.pagination.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
 		value: pagination,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
@@ -2391,7 +2391,7 @@ 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);
+	const attributes = mergeProps(pagination.getRootProps(), { className: classes.pagination.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$25.Provider, {
 		value: pagination,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("nav", {
@@ -2423,7 +2423,7 @@ const RootContext$23 = createContext$1();
 function Anchor(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2435,7 +2435,7 @@ function Anchor(props) {
 function ArrowTip$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2447,7 +2447,7 @@ function ArrowTip$1(props) {
 function Arrow$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2459,7 +2459,7 @@ function Arrow$1(props) {
 function CloseTrigger$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2471,7 +2471,7 @@ function CloseTrigger$1(props) {
 function Content$2(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2483,7 +2483,7 @@ function Content$2(props) {
 function Description$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2495,7 +2495,7 @@ function Description$1(props) {
 function Positioner$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2546,7 +2546,7 @@ function Root$10(props) {
 function Title$1(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2558,7 +2558,7 @@ function Title$1(props) {
 function Trigger$2(props) {
 	const popover = use(RootContext$23);
 	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
@@ -2603,7 +2603,7 @@ function CircleRange(props) {
 	const progress = use(RootContext$21);
 	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 });
@@ -2614,7 +2614,7 @@ function CircleRange(props) {
 function CircleTrack(props) {
 	const progress = use(RootContext$21);
 	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 });
 }
 
@@ -2623,7 +2623,7 @@ function CircleTrack(props) {
 function Circle(props) {
 	const progress = use(RootContext$21);
 	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
@@ -2635,7 +2635,7 @@ function Circle(props) {
 function Label$6(props) {
 	const progress = use(RootContext$21);
 	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
@@ -2647,7 +2647,7 @@ function Label$6(props) {
 function Range$1(props) {
 	const progress = use(RootContext$21);
 	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 });
 }
 
@@ -2663,7 +2663,7 @@ function RootContext$20(props) {
 //#region src/components/progress/anatomy/root-provider.tsx
 function RootProvider$7(props) {
 	const { element, children, value: progress, ...rest } = props;
-	const attributes = mergeProps(progress.getRootProps(), { className: classesProgress.root }, rest);
+	const attributes = mergeProps(progress.getRootProps(), { className: classes.progress.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
 		value: progress,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2688,7 +2688,7 @@ 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);
+	const attributes = mergeProps(progress.getRootProps(), { className: classes.progress.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$21.Provider, {
 		value: progress,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2703,7 +2703,7 @@ function Root$8(props) {
 function Track$1(props) {
 	const progress = use(RootContext$21);
 	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
@@ -2715,7 +2715,7 @@ function Track$1(props) {
 function ValueText$1(props) {
 	const progress = use(RootContext$21);
 	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
@@ -2745,7 +2745,7 @@ const RootContext$19 = createContext$1();
 function Control$4(props) {
 	const ratingGroup = use(RootContext$19);
 	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
@@ -2757,7 +2757,7 @@ function Control$4(props) {
 function HiddenInput$3(props) {
 	const ratingGroup = use(RootContext$19);
 	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 });
 }
 
@@ -2846,7 +2846,7 @@ function Item$4(props) {
 	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
@@ -2858,7 +2858,7 @@ function Item$4(props) {
 function Label$5(props) {
 	const ratingGroup = use(RootContext$19);
 	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
@@ -2877,7 +2877,7 @@ function RootContext$18(props) {
 //#region src/components/rating-group/anatomy/root-provider.tsx
 function RootProvider$6(props) {
 	const { element, children, value: ratingGroup, ...rest } = props;
-	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classesRatingGroup.root }, rest);
+	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classes.ratingGroup.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
 		value: ratingGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2902,7 +2902,7 @@ 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);
+	const attributes = mergeProps(ratingGroup.getRootProps(), { className: classes.ratingGroup.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$19.Provider, {
 		value: ratingGroup,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -2927,7 +2927,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
@@ -2943,7 +2943,7 @@ const RootContext$17 = createContext$1();
 function Indicator$1(props) {
 	const segmentedControl = use(RootContext$17);
 	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 });
 }
 
@@ -2957,7 +2957,7 @@ function ItemHiddenInput(props) {
 	const segmentedControl = use(RootContext$17);
 	const itemProps = use(ItemContext$1);
 	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 });
 }
 
@@ -2967,7 +2967,7 @@ function ItemText$1(props) {
 	const segmentedControl = use(RootContext$17);
 	const itemProps = use(ItemContext$1);
 	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
@@ -2980,7 +2980,7 @@ function Item$3(props) {
 	const segmentedControl = use(RootContext$17);
 	const [itemProps, componentProps] = splitItemProps$7(props);
 	const { element, children, ...rest } = componentProps;
-	const attributes = mergeProps(segmentedControl.getItemProps(itemProps), { className: classesSegmentedControl.item }, rest);
+	const attributes = mergeProps(segmentedControl.getItemProps(itemProps), { className: classes.segmentedControl.item }, rest);
 	return /* @__PURE__ */ jsx(ItemContext$1.Provider, {
 		value: itemProps,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("label", {
@@ -2995,7 +2995,7 @@ function Item$3(props) {
 function Label$4(props) {
 	const segmentedControl = use(RootContext$17);
 	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
@@ -3014,7 +3014,7 @@ function RootContext$16(props) {
 //#region src/components/segmented-control/anatomy/root-provider.tsx
 function RootProvider$5(props) {
 	const { element, children, value: segmentedControl, ...rest } = props;
-	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classesSegmentedControl.root }, rest);
+	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classes.segmentedControl.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
 		value: segmentedControl,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3040,7 +3040,7 @@ 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);
+	const attributes = mergeProps(segmentedControl.getRootProps(), { className: classes.segmentedControl.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$17.Provider, {
 		value: segmentedControl,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3072,7 +3072,7 @@ const RootContext$15 = createContext$1();
 function Control$2(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3089,7 +3089,7 @@ function HiddenInput$2(props) {
 	const slider = use(RootContext$15);
 	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 });
 }
 
@@ -3098,7 +3098,7 @@ function HiddenInput$2(props) {
 function Label$3(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3110,7 +3110,7 @@ function Label$3(props) {
 function MarkerGroup(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3122,7 +3122,7 @@ function MarkerGroup(props) {
 function Marker(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3134,7 +3134,7 @@ function Marker(props) {
 function Range(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3153,7 +3153,7 @@ 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);
+	const attributes = mergeProps(slider.getRootProps(), { className: classes.slider.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
 		value: slider,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3178,7 +3178,7 @@ function SliderRoot(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);
+	const attributes = mergeProps(slider.getRootProps(), { className: classes.slider.root }, rest);
 	return /* @__PURE__ */ jsx(RootContext$15.Provider, {
 		value: slider,
 		children: element ? element(attributes) : /* @__PURE__ */ jsx("div", {
@@ -3194,7 +3194,7 @@ function Thumb$1(props) {
 	const slider = use(RootContext$15);
 	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", {
@@ -3209,7 +3209,7 @@ function Thumb$1(props) {
 function Track(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3221,7 +3221,7 @@ function Track(props) {
 function ValueText(props) {
 	const slider = use(RootContext$15);
 	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
@@ -3253,7 +3253,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 +3265,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 +3274,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 +3293,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", {
@@ -3318,7 +3318,7 @@ function Root$5(props) {
 	const [switchProps, componentProps] = splitProps$16(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 +3333,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 +3361,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 +3373,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 +3382,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 +3401,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", {
@@ -3426,7 +3426,7 @@ function Root$4(props) {
 	const [tabsProps, componentProps] = splitProps$17(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 +3442,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 +3469,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 +3481,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 +3493,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 +3502,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 +3516,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 +3529,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 +3539,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 +3552,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 +3565,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 +3580,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 +3599,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", {
@@ -3624,7 +3624,7 @@ function Root$3(props) {
 	const [tagsInputProps, componentProps] = splitProps$18(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 +3660,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 +3692,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 +3704,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 +3724,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 +3738,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
@@ -3762,7 +3762,7 @@ function Root$2(props) {
 		...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 +3781,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 +3810,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 +3829,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", {
@@ -3854,7 +3854,7 @@ function ToggleGroupRoot(props) {
 	const [toggleGroupProps, componentProps] = splitProps$19(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 +3881,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 +3893,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 +3905,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 +3917,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
@@ -3968,7 +3968,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 +4001,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 +4014,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 +4027,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 +4040,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 +4053,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 +4066,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 +4079,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 +4091,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 +4129,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", {
@@ -4154,7 +4154,7 @@ function Root(props) {
 	const [treeViewProps, componentProps] = splitProps$21(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 +4169,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