@moduix/react 1.1.0 → 2.0.0

package/dist/components/select/Select.css

@@ -1,8 +1,10 @@
 @layer ui.components {
-  @keyframes _0a5E3a_select-content-open {
+  @keyframes FGbIOa_select-content-open {
     from {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-starting-opacity, 0));
+      translate: var(--popup-motion-starting-translate-x, 0)
+        var(--popup-motion-starting-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-starting-scale, var(--scale-popup))));
     }
 
     to {
@@ -11,19 +13,20 @@
     }
   }
 
-  @keyframes _0a5E3a_select-content-closed {
+  @keyframes FGbIOa_select-content-closed {
     from {
       opacity: 1;
       transform: scale(1);
     }
 
     to {
-      opacity: var(--select-content-closed-opacity, 0);
-      transform: scale(var(--select-content-closed-scale, var(--scale-popup)));
+      opacity: var(--select-content-closed-opacity, var(--popup-motion-ending-opacity, 0));
+      translate: var(--popup-motion-ending-translate-x, 0) var(--popup-motion-ending-translate-y, 0);
+      transform: scale(var(--select-content-closed-scale, var(--popup-motion-ending-scale, var(--scale-popup))));
     }
   }
 
-  ._0a5E3a_root {
+  .FGbIOa_root {
     box-sizing: border-box;
     width: var(--select-width, 14rem);
     max-width: var(--select-max-width, 100%);
@@ -34,7 +37,7 @@
     display: flex;
   }
 
-  ._0a5E3a_label {
+  .FGbIOa_label {
     color: var(--select-label-color, var(--select-color, var(--color-foreground)));
     font-size: var(--select-label-font-size, var(--text-sm));
     font-weight: var(--select-label-font-weight, var(--weight-medium));
@@ -48,7 +51,7 @@
     }
   }
 
-  ._0a5E3a_control {
+  .FGbIOa_control {
     width: 100%;
     min-width: 0;
     color: var(--select-color, var(--color-foreground));
@@ -61,7 +64,7 @@
     }
   }
 
-  ._0a5E3a_trigger {
+  .FGbIOa_trigger {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
@@ -102,17 +105,17 @@
       cursor: default;
     }
 
-    ._0a5E3a_control[data-focus] & {
+    .FGbIOa_control[data-focus] & {
       border-color: var(--select-focus-ring-color, var(--color-ring));
       outline-color: var(--select-focus-ring-color, var(--color-ring));
     }
 
-    ._0a5E3a_control[data-invalid] & {
+    .FGbIOa_control[data-invalid] & {
       border-color: var(--select-invalid-color, var(--color-destructive));
       outline-color: var(--select-invalid-color, var(--color-destructive));
     }
 
-    ._0a5E3a_control:not([data-disabled]) & {
+    .FGbIOa_control:not([data-disabled]) & {
       @media (hover: hover) {
         &:hover {
           background-color: var(--select-bg-hover, var(--color-accent));
@@ -121,11 +124,11 @@
     }
   }
 
-  ._0a5E3a_control:has(._0a5E3a_clearTrigger:not([hidden])) ._0a5E3a_trigger {
+  .FGbIOa_control:has(.FGbIOa_clearTrigger:not([hidden])) .FGbIOa_trigger {
     padding-inline-end: var(--select-trigger-padding-x-end, 4.25rem);
   }
 
-  ._0a5E3a_valueText {
+  .FGbIOa_valueText {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -133,7 +136,7 @@
     overflow: hidden;
   }
 
-  ._0a5E3a_indicators {
+  .FGbIOa_indicators {
     top: 50%;
     right: var(--select-action-offset-right, .5rem);
     align-items: center;
@@ -145,7 +148,7 @@
     transform: translateY(-50%);
   }
 
-  ._0a5E3a_indicator, ._0a5E3a_clearTrigger {
+  .FGbIOa_indicator {
     box-sizing: border-box;
     width: var(--select-action-size, 1.5rem);
     height: var(--select-action-size, 1.5rem);
@@ -179,30 +182,32 @@
     }
   }
 
-  ._0a5E3a_indicator {
+  .FGbIOa_indicator {
     pointer-events: none;
   }
 
-  ._0a5E3a_clearTrigger {
-    cursor: pointer;
+  .FGbIOa_clearTrigger {
+    --close-button-size: var(--select-action-size, 1.5rem);
+    --close-button-icon-size: var(--select-icon-size, 1rem);
+    --close-button-radius: var(--select-action-radius, var(--radius-sm));
+    --close-button-bg: var(--select-action-bg, transparent);
+    --close-button-bg-hover: var(--select-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--select-icon-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--select-action-color-hover, var(--color-foreground));
+    --close-button-transition: var(--select-transition, var(--transition-default));
     pointer-events: auto;
 
-    &:not(:is([disabled], [data-disabled])) {
-      @media (hover: hover) {
-        &:hover {
-          background-color: var(--select-action-bg-hover, var(--color-muted));
-          color: var(--select-action-color-hover, var(--color-foreground));
-        }
-      }
+    &[hidden] {
+      display: none;
     }
   }
 
-  ._0a5E3a_positioner {
+  .FGbIOa_positioner {
     z-index: var(--z-index);
     outline: 0;
   }
 
-  ._0a5E3a_content {
+  .FGbIOa_content {
     box-sizing: border-box;
     z-index: calc(var(--z-popup) + var(--layer-index, 0));
     min-width: var(--reference-width);
@@ -224,16 +229,20 @@
     overflow: auto;
 
     &[data-state="open"] {
-      animation: _0a5E3a_select-content-open var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-open
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
     }
 
     &[data-state="closed"] {
-      animation: _0a5E3a_select-content-closed var(--select-transition, var(--transition-default));
+      animation: FGbIOa_select-content-closed
+        var(--select-transition, var(--popup-motion-duration, var(--duration-normal))
+            var(--popup-motion-easing, var(--ease-in-out)));
       pointer-events: none;
     }
   }
 
-  ._0a5E3a_list {
+  .FGbIOa_list {
     overscroll-behavior: contain;
     min-height: 0;
     scroll-padding-block: var(--select-content-padding-y, var(--spacing-1));
@@ -243,7 +252,7 @@
     overflow-y: auto;
   }
 
-  ._0a5E3a_itemGroup {
+  .FGbIOa_itemGroup {
     flex-direction: column;
     display: flex;
 
@@ -252,7 +261,7 @@
     }
   }
 
-  ._0a5E3a_itemGroupLabel {
+  .FGbIOa_itemGroupLabel {
     padding-block: var(--select-item-group-label-padding-y, .375rem);
     padding-inline: var(--select-item-group-label-padding-x, .625rem);
     color: var(--select-item-group-label-color, var(--color-muted-foreground));
@@ -261,7 +270,7 @@
     line-height: var(--select-item-group-label-line-height, var(--line-height-text-xs));
   }
 
-  ._0a5E3a_item {
+  .FGbIOa_item {
     box-sizing: border-box;
     width: calc(100% - var(--select-item-inset-x, var(--spacing-2)));
     min-height: var(--select-item-min-height, 2rem);
@@ -300,7 +309,7 @@
     }
   }
 
-  ._0a5E3a_itemText {
+  .FGbIOa_itemText {
     text-overflow: ellipsis;
     white-space: nowrap;
     flex: 1;
@@ -308,7 +317,7 @@
     overflow: hidden;
   }
 
-  ._0a5E3a_itemIndicator {
+  .FGbIOa_itemIndicator {
     width: var(--select-item-indicator-size, .875rem);
     height: var(--select-item-indicator-size, .875rem);
     color: var(--select-item-indicator-color, currentColor);
@@ -323,7 +332,7 @@
     }
   }
 
-  ._0a5E3a_itemTextContent {
+  .FGbIOa_itemTextContent {
     align-items: center;
     gap: var(--select-item-text-content-gap, var(--spacing-2));
     vertical-align: top;
@@ -332,7 +341,7 @@
     display: inline-flex;
   }
 
-  ._0a5E3a_itemTextIcon {
+  .FGbIOa_itemTextIcon {
     width: var(--select-item-text-icon-size, 1rem);
     height: var(--select-item-text-icon-size, 1rem);
     color: var(--select-item-text-icon-color, currentColor);
@@ -342,7 +351,7 @@
     display: inline-flex;
   }
 
-  ._0a5E3a_itemTextLabel {
+  .FGbIOa_itemTextLabel {
     text-overflow: ellipsis;
     white-space: nowrap;
     min-width: 0;

package/dist/components/select/Select.d.ts

@@ -1,10 +1,19 @@
 import { OverlayPortalProps } from "../../lib/moduix/overlayPortal.js";
-import { ComponentProps } from "react";
+import { ComponentProps, ReactNode } from "react";
 import { Select, SelectRootComponent, SelectRootProviderComponent } from "@ark-ui/react/select";
 
 //#region src/components/select/Select.d.ts
-type SelectRootComponent$1 = SelectRootComponent<OverlayPortalProps>;
-type SelectRootProviderComponent$1 = SelectRootProviderComponent<OverlayPortalProps>;
+type SelectNativeFormControl = 'select' | 'input';
+type SelectRootOwnProps = OverlayPortalProps & {
+  nativeFormControl?: SelectNativeFormControl;
+};
+type SelectRootComponent$1 = SelectRootComponent<SelectRootOwnProps>;
+type SelectRootProviderComponent$1 = SelectRootProviderComponent<SelectRootOwnProps>;
+type SelectFieldProps = Omit<ComponentProps<typeof Select.Control>, 'asChild' | 'children'> & {
+  clearLabel?: string;
+  indicator?: ReactNode;
+  placeholder?: ComponentProps<typeof Select.ValueText>['placeholder'];
+};
 declare function SelectIndicators({
   className,
   ...props
@@ -24,8 +33,14 @@ declare function SelectItemTextLabel({
 declare const Select$1: SelectRootComponent$1 & {
   Root: SelectRootComponent$1;
   RootProvider: SelectRootProviderComponent$1;
+  Context: <T extends unknown>(props: Select.ContextProps<T>) => ReactNode;
+  ItemContext: (props: Select.ItemContextProps) => ReactNode;
+  useSelect: <T extends unknown>(props: import("@ark-ui/react/select").UseSelectProps<T>) => import("@ark-ui/react/select").UseSelectReturn<T>;
+  useSelectContext: () => import("@ark-ui/react/select").UseSelectContext<any>;
+  useSelectItemContext: () => import("@ark-ui/react/select").UseSelectItemContext;
   Label: import("react").ForwardRefExoticComponent<Omit<Select.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Control: import("react").ForwardRefExoticComponent<Omit<Select.ControlProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Field: import("react").ForwardRefExoticComponent<Omit<SelectFieldProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   Trigger: import("react").ForwardRefExoticComponent<Omit<Select.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ValueText: import("react").ForwardRefExoticComponent<Omit<Select.ValueTextProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<Select.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -39,7 +54,6 @@ declare const Select$1: SelectRootComponent$1 & {
   Item: import("react").ForwardRefExoticComponent<Omit<Select.ItemProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemText: import("react").ForwardRefExoticComponent<Omit<Select.ItemTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemIndicator: import("react").ForwardRefExoticComponent<Omit<Select.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-  HiddenSelect: import("react").ForwardRefExoticComponent<Omit<Select.HiddenSelectProps & import("react").RefAttributes<HTMLSelectElement>, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
   ItemTextContent: typeof SelectItemTextContent;
   ItemTextIcon: typeof SelectItemTextIcon;
   ItemTextLabel: typeof SelectItemTextLabel;

package/dist/components/select/Select.js

@@ -1,13 +1,14 @@
-import { CheckIcon, ChevronUpDownIcon, CloseIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CheckIcon, ChevronUpDownIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import { OverlayPortal, OverlayPortalProvider } from "../../lib/moduix/overlayPortal.js";
 import Select_module_default from "./Select.module.js";
-import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { Select } from "@ark-ui/react/select";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Select, useSelect, useSelectContext, useSelectItemContext } from "@ark-ui/react/select";
 //#region src/components/select/Select.tsx
-const SelectRoot = forwardRef(function SelectRoot({ className, portalled, portalRef, ...props }, ref) {
+const SelectRoot = forwardRef(function SelectRoot({ asChild, children, className, nativeFormControl = "select", portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
@@ -15,11 +16,13 @@ const SelectRoot = forwardRef(function SelectRoot({ className, portalled, portal
 			ref,
 			"data-slot": "select-root",
 			className: clsx(Select_module_default.root, normalizeClassName(className)),
-			...props
+			asChild,
+			...props,
+			children: withNativeFormControl(children, asChild, nativeFormControl)
 		})
 	});
 });
-const SelectRootProvider = forwardRef(function SelectRootProvider({ className, portalled, portalRef, ...props }, ref) {
+const SelectRootProvider = forwardRef(function SelectRootProvider({ asChild, children, className, nativeFormControl = "select", portalled, portalRef, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortalProvider, {
 		portalled,
 		portalRef,
@@ -27,7 +30,9 @@ const SelectRootProvider = forwardRef(function SelectRootProvider({ className, p
 			ref,
 			"data-slot": "select-root-provider",
 			className: clsx(Select_module_default.root, normalizeClassName(className)),
-			...props
+			asChild,
+			...props,
+			children: withNativeFormControl(children, asChild, nativeFormControl)
 		})
 	});
 });
@@ -64,13 +69,29 @@ const SelectValueText = forwardRef(function SelectValueText({ className, ...prop
 		...props
 	});
 });
-const SelectClearTrigger = forwardRef(function SelectClearTrigger({ className, children, ...props }, ref) {
+const SelectClearTrigger = forwardRef(function SelectClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(Select_module_default.clearTrigger, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(Select.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "select-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(Select.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "select-clear-trigger",
-		className: clsx(Select_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel ?? (ariaLabelledBy == null ? "Clear selection" : void 0),
+			"aria-labelledby": ariaLabelledBy,
+			children
+		})
 	});
 });
 const SelectIndicator = forwardRef(function SelectIndicator({ className, children, ...props }, ref) {
@@ -89,6 +110,13 @@ function SelectIndicators({ className, ...props }) {
 		...props
 	});
 }
+const SelectField = forwardRef(function SelectField({ clearLabel, indicator, placeholder, ...props }, ref) {
+	return /* @__PURE__ */ jsxs(SelectControl, {
+		ref,
+		...props,
+		children: [/* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValueText, { placeholder }) }), /* @__PURE__ */ jsxs(SelectIndicators, { children: [clearLabel && /* @__PURE__ */ jsx(SelectClearTrigger, { "aria-label": clearLabel }), /* @__PURE__ */ jsx(SelectIndicator, { children: indicator })] })]
+	});
+});
 const SelectPositioner = forwardRef(function SelectPositioner({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(OverlayPortal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
 		ref,
@@ -154,14 +182,26 @@ const SelectItemIndicator = forwardRef(function SelectItemIndicator({ className,
 		children: children ?? /* @__PURE__ */ jsx(CheckIcon, {})
 	});
 });
-const SelectHiddenSelect = forwardRef(function SelectHiddenSelect({ className, ...props }, ref) {
-	return /* @__PURE__ */ jsx(Select.HiddenSelect, {
-		ref,
-		"data-slot": "select-hidden-select",
-		className: normalizeClassName(className),
-		...props
-	});
-});
+function withNativeFormControl(children, asChild, nativeFormControl) {
+	const formControl = /* @__PURE__ */ jsx(SelectFormControl, { nativeFormControl });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, formControl] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, formControl);
+}
+function SelectFormControl({ nativeFormControl }) {
+	const select = useSelectContext();
+	if (nativeFormControl === "select") return /* @__PURE__ */ jsx(Select.HiddenSelect, { "data-slot": "select-hidden-select" });
+	const hiddenSelectProps = select.getHiddenSelectProps();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: select.value.map((value) => /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		"data-slot": "select-hidden-input",
+		name: hiddenSelectProps.name,
+		form: hiddenSelectProps.form,
+		autoComplete: hiddenSelectProps.autoComplete,
+		disabled: hiddenSelectProps.disabled,
+		value
+	}, value)) });
+}
 function SelectItemTextContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "select-item-text-content",
@@ -186,8 +226,14 @@ function SelectItemTextLabel({ className, ...props }) {
 const Select$1 = Object.assign(SelectRoot, {
 	Root: SelectRoot,
 	RootProvider: SelectRootProvider,
+	Context: Select.Context,
+	ItemContext: Select.ItemContext,
+	useSelect,
+	useSelectContext,
+	useSelectItemContext,
 	Label: SelectLabel,
 	Control: SelectControl,
+	Field: SelectField,
 	Trigger: SelectTrigger,
 	ValueText: SelectValueText,
 	ClearTrigger: SelectClearTrigger,
@@ -201,7 +247,6 @@ const Select$1 = Object.assign(SelectRoot, {
 	Item: SelectItem,
 	ItemText: SelectItemText,
 	ItemIndicator: SelectItemIndicator,
-	HiddenSelect: SelectHiddenSelect,
 	ItemTextContent: SelectItemTextContent,
 	ItemTextIcon: SelectItemTextIcon,
 	ItemTextLabel: SelectItemTextLabel

package/dist/components/select/Select.module.js

@@ -1,27 +1,27 @@
 import './Select.css';
 //#region src/components/select/Select.module.css
 var Select_module_default = {
-	"clearTrigger": "_0a5E3a_clearTrigger",
-	"content": "_0a5E3a_content",
-	"control": "_0a5E3a_control",
-	"indicator": "_0a5E3a_indicator",
-	"indicators": "_0a5E3a_indicators",
-	"item": "_0a5E3a_item",
-	"itemGroup": "_0a5E3a_itemGroup",
-	"itemGroupLabel": "_0a5E3a_itemGroupLabel",
-	"itemIndicator": "_0a5E3a_itemIndicator",
-	"itemText": "_0a5E3a_itemText",
-	"itemTextContent": "_0a5E3a_itemTextContent",
-	"itemTextIcon": "_0a5E3a_itemTextIcon",
-	"itemTextLabel": "_0a5E3a_itemTextLabel",
-	"label": "_0a5E3a_label",
-	"list": "_0a5E3a_list",
-	"positioner": "_0a5E3a_positioner",
-	"root": "_0a5E3a_root",
-	"select-content-closed": "_0a5E3a_select-content-closed",
-	"select-content-open": "_0a5E3a_select-content-open",
-	"trigger": "_0a5E3a_trigger",
-	"valueText": "_0a5E3a_valueText"
+	"clearTrigger": "FGbIOa_clearTrigger",
+	"content": "FGbIOa_content",
+	"control": "FGbIOa_control",
+	"indicator": "FGbIOa_indicator",
+	"indicators": "FGbIOa_indicators",
+	"item": "FGbIOa_item",
+	"itemGroup": "FGbIOa_itemGroup",
+	"itemGroupLabel": "FGbIOa_itemGroupLabel",
+	"itemIndicator": "FGbIOa_itemIndicator",
+	"itemText": "FGbIOa_itemText",
+	"itemTextContent": "FGbIOa_itemTextContent",
+	"itemTextIcon": "FGbIOa_itemTextIcon",
+	"itemTextLabel": "FGbIOa_itemTextLabel",
+	"label": "FGbIOa_label",
+	"list": "FGbIOa_list",
+	"positioner": "FGbIOa_positioner",
+	"root": "FGbIOa_root",
+	"select-content-closed": "FGbIOa_select-content-closed",
+	"select-content-open": "FGbIOa_select-content-open",
+	"trigger": "FGbIOa_trigger",
+	"valueText": "FGbIOa_valueText"
 };
 //#endregion
 export { Select_module_default as default };

package/dist/components/separator/Separator.css

@@ -1,5 +1,5 @@
 @layer ui.components {
-  .cDoSda_root {
+  .Jd5mwa_root {
     border: 0;
     border-color: var(--separator-color, var(--color-border));
     border-style: var(--separator-border-style, var(--separator-variant-border-style, solid));

package/dist/components/separator/Separator.js

@@ -1,9 +1,9 @@
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
 import Separator_module_default from "./Separator.module.js";
-import { jsx } from "react/jsx-runtime";
 import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/separator/Separator.tsx
 const SeparatorRoot = forwardRef(function SeparatorRoot({ asChild, className, orientation = "horizontal", role, size = "sm", variant = "solid", "aria-orientation": ariaOrientation, ...props }, ref) {
 	const resolvedRole = role ?? "separator";

package/dist/components/separator/Separator.module.js

@@ -1,5 +1,5 @@
 import './Separator.css';
 //#region src/components/separator/Separator.module.css
-var Separator_module_default = { "root": "cDoSda_root" };
+var Separator_module_default = { "root": "Jd5mwa_root" };
 //#endregion
 export { Separator_module_default as default };