@usefragments/ui 1.7.0 → 2.0.0

package/dist/components/Select/Select.module.scss.cjs

@@ -1,26 +1,26 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const wrapper = "_wrapper_aykjj_1";
-const label = "_label_aykjj_8";
-const helper = "_helper_aykjj_17";
-const helperError = "_helperError_aykjj_27";
-const errorMessage = "_errorMessage_aykjj_28";
-const trigger = "_trigger_aykjj_38";
-const triggerSm = "_triggerSm_aykjj_92";
-const triggerLg = "_triggerLg_aykjj_104";
-const triggerGhost = "_triggerGhost_aykjj_116";
-const wrapperGhost = "_wrapperGhost_aykjj_142";
-const triggerIcon = "_triggerIcon_aykjj_147";
-const value = "_value_aykjj_155";
-const placeholder = "_placeholder_aykjj_168";
-const hint = "_hint_aykjj_172";
-const icon = "_icon_aykjj_178";
-const positioner = "_positioner_aykjj_206";
-const popup = "_popup_aykjj_211";
-const item = "_item_aykjj_262";
-const itemIndicator = "_itemIndicator_aykjj_293";
-const group = "_group_aykjj_307";
-const groupLabel = "_groupLabel_aykjj_315";
+const wrapper = "_wrapper_3iy7b_1";
+const label = "_label_3iy7b_8";
+const helper = "_helper_3iy7b_17";
+const helperError = "_helperError_3iy7b_27";
+const errorMessage = "_errorMessage_3iy7b_28";
+const trigger = "_trigger_3iy7b_38";
+const triggerSm = "_triggerSm_3iy7b_110";
+const triggerLg = "_triggerLg_3iy7b_122";
+const triggerGhost = "_triggerGhost_3iy7b_135";
+const wrapperGhost = "_wrapperGhost_3iy7b_161";
+const triggerIcon = "_triggerIcon_3iy7b_166";
+const value = "_value_3iy7b_174";
+const placeholder = "_placeholder_3iy7b_187";
+const hint = "_hint_3iy7b_191";
+const icon = "_icon_3iy7b_197";
+const positioner = "_positioner_3iy7b_225";
+const popup = "_popup_3iy7b_230";
+const item = "_item_3iy7b_276";
+const itemIndicator = "_itemIndicator_3iy7b_309";
+const group = "_group_3iy7b_323";
+const groupLabel = "_groupLabel_3iy7b_331";
 const styles = {
   wrapper,
   label,

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

@@ -1,24 +1,24 @@
-const wrapper = "_wrapper_aykjj_1";
-const label = "_label_aykjj_8";
-const helper = "_helper_aykjj_17";
-const helperError = "_helperError_aykjj_27";
-const errorMessage = "_errorMessage_aykjj_28";
-const trigger = "_trigger_aykjj_38";
-const triggerSm = "_triggerSm_aykjj_92";
-const triggerLg = "_triggerLg_aykjj_104";
-const triggerGhost = "_triggerGhost_aykjj_116";
-const wrapperGhost = "_wrapperGhost_aykjj_142";
-const triggerIcon = "_triggerIcon_aykjj_147";
-const value = "_value_aykjj_155";
-const placeholder = "_placeholder_aykjj_168";
-const hint = "_hint_aykjj_172";
-const icon = "_icon_aykjj_178";
-const positioner = "_positioner_aykjj_206";
-const popup = "_popup_aykjj_211";
-const item = "_item_aykjj_262";
-const itemIndicator = "_itemIndicator_aykjj_293";
-const group = "_group_aykjj_307";
-const groupLabel = "_groupLabel_aykjj_315";
+const wrapper = "_wrapper_3iy7b_1";
+const label = "_label_3iy7b_8";
+const helper = "_helper_3iy7b_17";
+const helperError = "_helperError_3iy7b_27";
+const errorMessage = "_errorMessage_3iy7b_28";
+const trigger = "_trigger_3iy7b_38";
+const triggerSm = "_triggerSm_3iy7b_110";
+const triggerLg = "_triggerLg_3iy7b_122";
+const triggerGhost = "_triggerGhost_3iy7b_135";
+const wrapperGhost = "_wrapperGhost_3iy7b_161";
+const triggerIcon = "_triggerIcon_3iy7b_166";
+const value = "_value_3iy7b_174";
+const placeholder = "_placeholder_3iy7b_187";
+const hint = "_hint_3iy7b_191";
+const icon = "_icon_3iy7b_197";
+const positioner = "_positioner_3iy7b_225";
+const popup = "_popup_3iy7b_230";
+const item = "_item_3iy7b_276";
+const itemIndicator = "_itemIndicator_3iy7b_309";
+const group = "_group_3iy7b_323";
+const groupLabel = "_groupLabel_3iy7b_331";
 const styles = {
   wrapper,
   label,

package/dist/components/Select/index.cjs

@@ -68,7 +68,7 @@ const SelectContext = React__namespace.createContext({
   unregisterItem: () => {
   },
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null
 });
 function renderOptionLabel(option) {
@@ -113,7 +113,7 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
   helperText,
   error,
   size: sizeProp,
-  variant = "field",
+  variant = "outline",
   className
 }, ref) {
   const size = index.useResolvedControlSize(sizeProp);
@@ -173,6 +173,11 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
     items.forEach((content, itemValue) => merged.set(itemValue, content));
     return merged;
   }, [declaredItems, items]);
+  const { helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("select", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React__namespace.useMemo(
     () => ({
       placeholder,
@@ -182,7 +187,8 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      invalid: hasError
     }),
     [
       placeholder,
@@ -192,21 +198,13 @@ const SelectRoot = React__namespace.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      hasError
     ]
   );
-  const { helperId, errorId, hasError, errorMessage } = aria.useFormFieldIds("select", {
-    label,
-    helperText,
-    error
-  });
-  const wrapperClasses = [
-    Select_module.default.wrapper,
-    variant === "ghost" && Select_module.default.wrapperGhost,
-    className
-  ].filter(Boolean).join(" ");
+  const wrapperClasses = [Select_module.default.wrapper, variant === "ghost" && Select_module.default.wrapperGhost, className].filter(Boolean).join(" ");
   const helperClasses = [Select_module.default.helper, hasError && Select_module.default.helperError].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       select.Select.Root,
       {
@@ -255,11 +253,19 @@ function SelectTrigger({
   ].filter(Boolean).join(" ");
   const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.placeholder, children: placeholderText }) : null);
-  return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.triggerIcon, children: icon }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
-    /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    select.Select.Trigger,
+    {
+      ...htmlProps,
+      className: classes,
+      "aria-invalid": context.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.triggerIcon, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: Select_module.default.value, children: displayContent }),
+        /* @__PURE__ */ jsxRuntime.jsx(select.Select.Icon, { className: Select_module.default.icon, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}) })
+      ] })
+    }
+  );
 }
 function SelectContent({
   children,

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type FormFieldProps } from "../../utils/aria";
 export type SelectValue = string;
-export type SelectVariant = "field" | "ghost";
+export type SelectVariant = "outline" | "ghost";
 export interface SelectOption {
     value: SelectValue;
     label: string;
@@ -50,10 +50,10 @@ export interface SelectProps extends FormFieldProps {
     /** Size variant.
      * @default "md" */
     size?: "sm" | "md" | "lg";
-    /** Visual treatment. `ghost` drops the field shell for a compact, borderless
-     * control — for toolbars and dense rows, where a bordered field reads as a
-     * form. Pair with `size="sm"`.
-     * @default "field" */
+    /** Chrome. `outline` is the bordered field shell; `ghost` drops it for a
+     * compact, borderless control — for toolbars and dense rows, where a bordered
+     * field reads as a form. Pair with `size="sm"`.
+     * @default "outline" */
     variant?: SelectVariant;
     /** Wrapper class name */
     className?: string;

package/dist/components/Select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Select/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/index.js

@@ -49,7 +49,7 @@ const SelectContext = React.createContext({
   unregisterItem: () => {
   },
   size: "md",
-  variant: "field",
+  variant: "outline",
   optionItems: null
 });
 function renderOptionLabel(option) {
@@ -94,7 +94,7 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
   helperText,
   error,
   size: sizeProp,
-  variant = "field",
+  variant = "outline",
   className
 }, ref) {
   const size = useResolvedControlSize(sizeProp);
@@ -154,6 +154,11 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
     items.forEach((content, itemValue) => merged.set(itemValue, content));
     return merged;
   }, [declaredItems, items]);
+  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
+    label,
+    helperText,
+    error
+  });
   const contextValue = React.useMemo(
     () => ({
       placeholder,
@@ -163,7 +168,8 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      invalid: hasError
     }),
     [
       placeholder,
@@ -173,21 +179,13 @@ const SelectRoot = React.forwardRef(function SelectRoot2({
       unregisterItem,
       size,
       variant,
-      optionItems
+      optionItems,
+      hasError
     ]
   );
-  const { helperId, errorId, hasError, errorMessage } = useFormFieldIds("select", {
-    label,
-    helperText,
-    error
-  });
-  const wrapperClasses = [
-    styles.wrapper,
-    variant === "ghost" && styles.wrapperGhost,
-    className
-  ].filter(Boolean).join(" ");
+  const wrapperClasses = [styles.wrapper, variant === "ghost" && styles.wrapperGhost, className].filter(Boolean).join(" ");
   const helperClasses = [styles.helper, hasError && styles.helperError].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, children: [
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("div", { ref, className: wrapperClasses, "data-invalid": hasError || void 0, children: [
     /* @__PURE__ */ jsxs(
       Select$1.Root,
       {
@@ -236,11 +234,19 @@ function SelectTrigger({
   ].filter(Boolean).join(" ");
   const selectedContent = context.value != null ? context.items.get(context.value) : null;
   const displayContent = selectedContent ?? (placeholderText ? /* @__PURE__ */ jsx("span", { className: styles.placeholder, children: placeholderText }) : null);
-  return /* @__PURE__ */ jsx(Select$1.Trigger, { ...htmlProps, className: classes, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: icon }),
-    /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
-    /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Select$1.Trigger,
+    {
+      ...htmlProps,
+      className: classes,
+      "aria-invalid": context.invalid || void 0,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon && /* @__PURE__ */ jsx("span", { className: styles.triggerIcon, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: styles.value, children: displayContent }),
+        /* @__PURE__ */ jsx(Select$1.Icon, { className: styles.icon, children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      ] })
+    }
+  );
 }
 function SelectContent({
   children,

package/dist/components/Separator/Separator.module.scss.cjs

@@ -1,16 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const separator = "_separator_ddx8o_1";
-const horizontal = "_horizontal_ddx8o_6";
-const line = "_line_ddx8o_9";
-const vertical = "_vertical_ddx8o_16";
-const withLabel = "_withLabel_ddx8o_27";
-const label = "_label_ddx8o_40";
-const spacingNone = "_spacingNone_ddx8o_51";
-const spacingSm = "_spacingSm_ddx8o_55";
-const spacingMd = "_spacingMd_ddx8o_62";
-const spacingLg = "_spacingLg_ddx8o_69";
-const soft = "_soft_ddx8o_76";
+const separator = "_separator_10yvl_1";
+const horizontal = "_horizontal_10yvl_6";
+const line = "_line_10yvl_9";
+const vertical = "_vertical_10yvl_16";
+const withLabel = "_withLabel_10yvl_27";
+const label = "_label_10yvl_40";
+const gapNone = "_gapNone_10yvl_50";
+const gapXs = "_gapXs_10yvl_54";
+const gapSm = "_gapSm_10yvl_61";
+const gapMd = "_gapMd_10yvl_68";
+const gapLg = "_gapLg_10yvl_75";
+const gapXl = "_gapXl_10yvl_82";
+const soft = "_soft_10yvl_89";
 const styles = {
   separator,
   horizontal,
@@ -18,21 +20,25 @@ const styles = {
   vertical,
   withLabel,
   label,
-  spacingNone,
-  spacingSm,
-  spacingMd,
-  spacingLg,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
   soft
 };
 exports.default = styles;
+exports.gapLg = gapLg;
+exports.gapMd = gapMd;
+exports.gapNone = gapNone;
+exports.gapSm = gapSm;
+exports.gapXl = gapXl;
+exports.gapXs = gapXs;
 exports.horizontal = horizontal;
 exports.label = label;
 exports.line = line;
 exports.separator = separator;
 exports.soft = soft;
-exports.spacingLg = spacingLg;
-exports.spacingMd = spacingMd;
-exports.spacingNone = spacingNone;
-exports.spacingSm = spacingSm;
 exports.vertical = vertical;
 exports.withLabel = withLabel;

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

@@ -1,14 +1,16 @@
-const separator = "_separator_ddx8o_1";
-const horizontal = "_horizontal_ddx8o_6";
-const line = "_line_ddx8o_9";
-const vertical = "_vertical_ddx8o_16";
-const withLabel = "_withLabel_ddx8o_27";
-const label = "_label_ddx8o_40";
-const spacingNone = "_spacingNone_ddx8o_51";
-const spacingSm = "_spacingSm_ddx8o_55";
-const spacingMd = "_spacingMd_ddx8o_62";
-const spacingLg = "_spacingLg_ddx8o_69";
-const soft = "_soft_ddx8o_76";
+const separator = "_separator_10yvl_1";
+const horizontal = "_horizontal_10yvl_6";
+const line = "_line_10yvl_9";
+const vertical = "_vertical_10yvl_16";
+const withLabel = "_withLabel_10yvl_27";
+const label = "_label_10yvl_40";
+const gapNone = "_gapNone_10yvl_50";
+const gapXs = "_gapXs_10yvl_54";
+const gapSm = "_gapSm_10yvl_61";
+const gapMd = "_gapMd_10yvl_68";
+const gapLg = "_gapLg_10yvl_75";
+const gapXl = "_gapXl_10yvl_82";
+const soft = "_soft_10yvl_89";
 const styles = {
   separator,
   horizontal,
@@ -16,23 +18,27 @@ const styles = {
   vertical,
   withLabel,
   label,
-  spacingNone,
-  spacingSm,
-  spacingMd,
-  spacingLg,
+  gapNone,
+  gapXs,
+  gapSm,
+  gapMd,
+  gapLg,
+  gapXl,
   soft
 };
 export {
   styles as default,
+  gapLg,
+  gapMd,
+  gapNone,
+  gapSm,
+  gapXl,
+  gapXs,
   horizontal,
   label,
   line,
   separator,
   soft,
-  spacingLg,
-  spacingMd,
-  spacingNone,
-  spacingSm,
   vertical,
   withLabel
 };

package/dist/components/Separator/index.cjs

@@ -22,15 +22,17 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const spacingClasses = {
-  none: Separator_module.default.spacingNone,
-  sm: Separator_module.default.spacingSm,
-  md: Separator_module.default.spacingMd,
-  lg: Separator_module.default.spacingLg
+const GAP_CLASS = {
+  none: Separator_module.default.gapNone,
+  xs: Separator_module.default.gapXs,
+  sm: Separator_module.default.gapSm,
+  md: Separator_module.default.gapMd,
+  lg: Separator_module.default.gapLg,
+  xl: Separator_module.default.gapXl
 };
 const SeparatorRoot = React__namespace.forwardRef(function Separator2({
   orientation = "horizontal",
-  spacing = "none",
+  gap = "none",
   soft = false,
   label,
   className,
@@ -41,7 +43,7 @@ const SeparatorRoot = React__namespace.forwardRef(function Separator2({
     const classes2 = [
       Separator_module.default.separator,
       Separator_module.default.withLabel,
-      spacingClasses[spacing],
+      GAP_CLASS[gap],
       soft && Separator_module.default.soft,
       className
     ].filter(Boolean).join(" ");
@@ -61,7 +63,7 @@ const SeparatorRoot = React__namespace.forwardRef(function Separator2({
   const classes = [
     Separator_module.default.separator,
     orientation === "horizontal" ? Separator_module.default.horizontal : Separator_module.default.vertical,
-    spacingClasses[spacing],
+    GAP_CLASS[gap],
     soft && Separator_module.default.soft,
     className
   ].filter(Boolean).join(" ");

package/dist/components/Separator/index.d.ts

@@ -1,9 +1,11 @@
 import * as React from "react";
+export type SeparatorGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
 export interface SeparatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
     /** Orientation of the separator */
     orientation?: "horizontal" | "vertical";
-    /** Spacing around the separator */
-    spacing?: "none" | "sm" | "md" | "lg";
+    /** Breathing room around the rule
+     * @default "none" */
+    gap?: SeparatorGap;
     /** Softer visual appearance */
     soft?: boolean;
     /** Optional label text (creates a labeled divider) */

package/dist/components/Separator/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+ED,eAAO,MAAM,SAAS;;CAEpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAErE,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;yBACqB;IACrB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,+BAA+B;IAC/B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAiFD,eAAO,MAAM,SAAS;;CAEpB,CAAC"}

package/dist/components/Separator/index.js

@@ -3,15 +3,17 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 import styles from "./Separator.module.scss.js";
-const spacingClasses = {
-  none: styles.spacingNone,
-  sm: styles.spacingSm,
-  md: styles.spacingMd,
-  lg: styles.spacingLg
+const GAP_CLASS = {
+  none: styles.gapNone,
+  xs: styles.gapXs,
+  sm: styles.gapSm,
+  md: styles.gapMd,
+  lg: styles.gapLg,
+  xl: styles.gapXl
 };
 const SeparatorRoot = React.forwardRef(function Separator2({
   orientation = "horizontal",
-  spacing = "none",
+  gap = "none",
   soft = false,
   label,
   className,
@@ -22,7 +24,7 @@ const SeparatorRoot = React.forwardRef(function Separator2({
     const classes2 = [
       styles.separator,
       styles.withLabel,
-      spacingClasses[spacing],
+      GAP_CLASS[gap],
       soft && styles.soft,
       className
     ].filter(Boolean).join(" ");
@@ -42,7 +44,7 @@ const SeparatorRoot = React.forwardRef(function Separator2({
   const classes = [
     styles.separator,
     orientation === "horizontal" ? styles.horizontal : styles.vertical,
-    spacingClasses[spacing],
+    GAP_CLASS[gap],
     soft && styles.soft,
     className
   ].filter(Boolean).join(" ");

package/dist/components/Sidebar/Sidebar.module.scss.cjs

@@ -1,48 +1,48 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_17sht_1";
-const mobile = "_mobile_17sht_51";
-const positionRight = "_positionRight_17sht_57";
-const collapsed = "_collapsed_17sht_62";
-const header = "_header_17sht_65";
-const nav = "_nav_17sht_66";
-const footer = "_footer_17sht_67";
-const sectionLabel = "_sectionLabel_17sht_74";
-const itemLabel = "_itemLabel_17sht_85";
-const itemBadge = "_itemBadge_17sht_86";
-const itemChevron = "_itemChevron_17sht_87";
-const item = "_item_17sht_85";
-const itemIcon = "_itemIcon_17sht_95";
-const collapseToggle = "_collapseToggle_17sht_98";
-const collapsedNoIcons = "_collapsedNoIcons_17sht_102";
-const offcanvasCollapsed = "_offcanvasCollapsed_17sht_105";
-const collapseToggleFloating = "_collapseToggleFloating_17sht_111";
-const rail = "_rail_17sht_125";
-const navScrollArea = "_navScrollArea_17sht_166";
-const section = "_section_17sht_74";
-const sectionHeader = "_sectionHeader_17sht_175";
-const sectionTrigger = "_sectionTrigger_17sht_205";
-const sectionActionWrapper = "_sectionActionWrapper_17sht_219";
-const sectionAction = "_sectionAction_17sht_219";
-const sectionList = "_sectionList_17sht_303";
-const submenu = "_submenu_17sht_304";
-const sectionCollapsible = "_sectionCollapsible_17sht_313";
-const itemWrapper = "_itemWrapper_17sht_361";
-const subItemWrapper = "_subItemWrapper_17sht_362";
-const submenuWrapper = "_submenuWrapper_17sht_363";
-const itemDisabled = "_itemDisabled_17sht_436";
-const itemActive = "_itemActive_17sht_445";
-const subItemDisabled = "_subItemDisabled_17sht_530";
-const itemMultiline = "_itemMultiline_17sht_586";
-const itemExpanded = "_itemExpanded_17sht_613";
-const subItem = "_subItem_17sht_362";
-const subItemActive = "_subItemActive_17sht_712";
-const trigger = "_trigger_17sht_730";
-const overlay = "_overlay_17sht_797";
-const railCollapsed = "_railCollapsed_17sht_945";
-const menuSkeleton = "_menuSkeleton_17sht_949";
-const skeletonItem = "_skeletonItem_17sht_956";
-const skeletonLabel = "_skeletonLabel_17sht_985";
+const root = "_root_12q6f_1";
+const mobile = "_mobile_12q6f_37";
+const positionRight = "_positionRight_12q6f_43";
+const collapsed = "_collapsed_12q6f_48";
+const header = "_header_12q6f_51";
+const nav = "_nav_12q6f_52";
+const footer = "_footer_12q6f_53";
+const sectionLabel = "_sectionLabel_12q6f_60";
+const itemLabel = "_itemLabel_12q6f_71";
+const itemBadge = "_itemBadge_12q6f_72";
+const itemChevron = "_itemChevron_12q6f_73";
+const item = "_item_12q6f_71";
+const itemIcon = "_itemIcon_12q6f_81";
+const collapseToggle = "_collapseToggle_12q6f_84";
+const collapsedNoIcons = "_collapsedNoIcons_12q6f_88";
+const offcanvasCollapsed = "_offcanvasCollapsed_12q6f_91";
+const collapseToggleFloating = "_collapseToggleFloating_12q6f_97";
+const rail = "_rail_12q6f_111";
+const navScrollArea = "_navScrollArea_12q6f_151";
+const section = "_section_12q6f_60";
+const sectionHeader = "_sectionHeader_12q6f_160";
+const sectionTrigger = "_sectionTrigger_12q6f_185";
+const sectionActionWrapper = "_sectionActionWrapper_12q6f_200";
+const sectionAction = "_sectionAction_12q6f_200";
+const sectionList = "_sectionList_12q6f_284";
+const submenu = "_submenu_12q6f_285";
+const sectionCollapsible = "_sectionCollapsible_12q6f_294";
+const itemWrapper = "_itemWrapper_12q6f_336";
+const subItemWrapper = "_subItemWrapper_12q6f_337";
+const submenuWrapper = "_submenuWrapper_12q6f_338";
+const itemDisabled = "_itemDisabled_12q6f_404";
+const itemActive = "_itemActive_12q6f_413";
+const subItemDisabled = "_subItemDisabled_12q6f_486";
+const itemMultiline = "_itemMultiline_12q6f_536";
+const itemExpanded = "_itemExpanded_12q6f_563";
+const subItem = "_subItem_12q6f_337";
+const subItemActive = "_subItemActive_12q6f_657";
+const trigger = "_trigger_12q6f_675";
+const overlay = "_overlay_12q6f_743";
+const railCollapsed = "_railCollapsed_12q6f_892";
+const menuSkeleton = "_menuSkeleton_12q6f_896";
+const skeletonItem = "_skeletonItem_12q6f_903";
+const skeletonLabel = "_skeletonLabel_12q6f_926";
 const styles = {
   root,
   mobile,