@locus-ui/components 0.0.15 → 0.0.16

package/dist/index.mjs

@@ -1671,10 +1671,100 @@ var Container = React11.forwardRef((props, ref) => {
 });
 Container.displayName = "Container";
 
-// src/components/panel/panel.tsx
+// src/components/flex/flex.tsx
 import clsx14 from "clsx";
 import * as React12 from "react";
 
+// src/components/flex/flex.props.ts
+var FlexGapValues = ["0", "1", "2", "3", "4", "5", "6", "8"];
+var FlexDirectionValues = [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse"
+];
+var FlexJustifyValues = [
+  "start",
+  "end",
+  "center",
+  "between",
+  "around",
+  "evenly"
+];
+var FlexAlignValues = [
+  "start",
+  "end",
+  "center",
+  "stretch",
+  "baseline"
+];
+var FlexWrapValues = ["nowrap", "wrap", "wrap-reverse"];
+var FlexPropsDefs = {
+  /**
+   * Sets the gap between flex items.
+   */
+  gap: {
+    type: "enum | string",
+    values: FlexGapValues,
+    dataAttr: "gap",
+    responsive: true
+  },
+  /**
+   * Sets the justification of flex items along the main axis.
+   */
+  justify: {
+    type: "enum",
+    values: FlexJustifyValues,
+    dataAttr: "justify",
+    responsive: true
+  },
+  /**
+   * Sets the direction of flex items.
+   */
+  direction: {
+    type: "enum",
+    values: FlexDirectionValues,
+    dataAttr: "direction",
+    responsive: true
+  },
+  /**
+   * Sets the alignment of flex items along the cross axis.
+   */
+  align: {
+    type: "enum",
+    values: FlexAlignValues,
+    dataAttr: "align",
+    responsive: true
+  },
+  /**
+   * Sets the wrapping behavior of flex items.
+   */
+  wrap: {
+    type: "enum",
+    values: FlexWrapValues,
+    dataAttr: "wrap",
+    responsive: true
+  }
+};
+
+// src/components/flex/flex.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Flex = React12.forwardRef((props, ref) => {
+  const { className, dataAttrs, children, ...rest } = getComponentProps(
+    props,
+    FlexPropsDefs,
+    MarginPropDefs,
+    PaddingPropDefs,
+    SpacingPropDef
+  );
+  return /* @__PURE__ */ jsx15("div", { ref, className: clsx14("flex", className), ...dataAttrs, ...rest, children });
+});
+Flex.displayName = "Flex";
+
+// src/components/panel/panel.tsx
+import clsx15 from "clsx";
+import * as React13 from "react";
+
 // src/components/panel/panel.props.ts
 var PanelVariants = ["solid", "outlined", "muted"];
 var PanelPropsDefs = {
@@ -1700,8 +1790,8 @@ var PanelPropsDefs = {
 };
 
 // src/components/panel/panel.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Panel = React12.forwardRef((props, ref) => {
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Panel = React13.forwardRef((props, ref) => {
   const { className, dataAttrs, children, ...rest } = getComponentProps(
     props,
     PanelPropsDefs,
@@ -1712,11 +1802,11 @@ var Panel = React12.forwardRef((props, ref) => {
     RoundnessPropDef,
     ColorPropDef
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref,
-      className: clsx14("panel", className),
+      className: clsx15("panel", className),
       ...dataAttrs,
       ...rest,
       children
@@ -1726,16 +1816,16 @@ var Panel = React12.forwardRef((props, ref) => {
 Panel.displayName = "Panel";
 
 // src/components/portal/backdrop/portal-backdrop.tsx
-import clsx15 from "clsx";
-import * as React14 from "react";
+import clsx16 from "clsx";
+import * as React15 from "react";
 
 // src/components/portal/portal-context.tsx
-import * as React13 from "react";
-var PortalContext = React13.createContext(
+import * as React14 from "react";
+var PortalContext = React14.createContext(
   void 0
 );
 function usePortalContext() {
-  const context = React13.useContext(PortalContext);
+  const context = React14.useContext(PortalContext);
   if (!context) {
     throw new Error("`usePortalContext` must be used within a `Portal.Root`");
   }
@@ -1782,8 +1872,8 @@ var PortalBackdropPropsDefs = {
 };
 
 // src/components/portal/backdrop/portal-backdrop.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var PortalBackdrop = React14.forwardRef(
+import { jsx as jsx17 } from "react/jsx-runtime";
+var PortalBackdrop = React15.forwardRef(
   (props, ref) => {
     const context = usePortalContext();
     const { className, dataAttrs, ...rest } = getComponentProps(
@@ -1791,11 +1881,11 @@ var PortalBackdrop = React14.forwardRef(
       PortalBackdropPropsDefs
     );
     if (!context.open) return null;
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       "div",
       {
         ref,
-        className: clsx15("portal-backdrop", className),
+        className: clsx16("portal-backdrop", className),
         ...dataAttrs,
         ...rest
       }
@@ -1805,17 +1895,17 @@ var PortalBackdrop = React14.forwardRef(
 PortalBackdrop.displayName = "Portal.Backdrop";
 
 // src/components/portal/content/portal-content.tsx
-import clsx16 from "clsx";
-import * as React17 from "react";
+import clsx17 from "clsx";
+import * as React18 from "react";
 import ReactDOM from "react-dom";
 
 // src/components/theme/theme-context.tsx
-import * as React15 from "react";
-var ThemeContext = React15.createContext(
+import * as React16 from "react";
+var ThemeContext = React16.createContext(
   void 0
 );
 function useTheme() {
-  const context = React15.useContext(ThemeContext);
+  const context = React16.useContext(ThemeContext);
   if (!context) {
     throw new Error("`useTheme` must be used within a `Theme`");
   }
@@ -1823,7 +1913,7 @@ function useTheme() {
 }
 
 // src/components/portal/utils/use-anchor-position.ts
-import * as React16 from "react";
+import * as React17 from "react";
 function useAnchorPosition({
   anchorRef,
   contentRef,
@@ -1833,9 +1923,9 @@ function useAnchorPosition({
   alignOffset = 0,
   enabled = true
 }) {
-  const [position, setPosition] = React16.useState(null);
-  const [, _forceUpdate] = React16.useReducer((x) => x + 1, 0);
-  const updatePosition = React16.useCallback(() => {
+  const [position, setPosition] = React17.useState(null);
+  const [, _forceUpdate] = React17.useReducer((x) => x + 1, 0);
+  const updatePosition = React17.useCallback(() => {
     const anchor = anchorRef.current;
     const content = contentRef.current;
     if (!anchor || !content || !enabled) {
@@ -1896,7 +1986,7 @@ function useAnchorPosition({
     );
     setPosition({ top, left });
   }, [anchorRef, contentRef, side, align, sideOffset, alignOffset, enabled]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!enabled) {
       setPosition(null);
       return;
@@ -1977,12 +2067,12 @@ var PortalContentPropsDefs = {
 };
 
 // src/components/portal/content/portal-content.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var PortalContent = React17.forwardRef(
+import { jsx as jsx18 } from "react/jsx-runtime";
+var PortalContent = React18.forwardRef(
   (props, ref) => {
     const portalContext = usePortalContext();
-    const themeContext = React17.useContext(ThemeContext);
-    const contentRef = React17.useRef(null);
+    const themeContext = React18.useContext(ThemeContext);
+    const contentRef = React18.useRef(null);
     const {
       side = "bottom",
       align = "center",
@@ -2004,7 +2094,7 @@ var PortalContent = React17.forwardRef(
       alignOffset: parseInt(alignOffset, 10) || 0,
       enabled: anchored && portalContext.open
     });
-    const setRefs = React17.useCallback(
+    const setRefs = React18.useCallback(
       (node) => {
         contentRef.current = node;
         if (typeof ref === "function") {
@@ -2015,7 +2105,7 @@ var PortalContent = React17.forwardRef(
       },
       [ref]
     );
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (!portalContext.open) return;
       function onKeyDown(e) {
         if (e.key === "Escape") {
@@ -2027,7 +2117,7 @@ var PortalContent = React17.forwardRef(
         document.removeEventListener("keydown", onKeyDown);
       };
     }, [portalContext.open, portalContext.onOpenChange]);
-    React17.useEffect(() => {
+    React18.useEffect(() => {
       if (!portalContext.open || !anchored) return;
       function onClickOutside(e) {
         const target = e.target;
@@ -2062,11 +2152,11 @@ var PortalContent = React17.forwardRef(
         left: anchorPosition.left
       } : {}
     };
-    const portalContent = /* @__PURE__ */ jsx17(
+    const portalContent = /* @__PURE__ */ jsx18(
       "div",
       {
         ref: setRefs,
-        className: clsx16("portal", className),
+        className: clsx17("portal", className),
         "data-appearance": themeContext?.appearance,
         "data-radius": themeContext?.radius,
         "data-roundness": themeContext?.roundness ?? "theme",
@@ -2077,7 +2167,7 @@ var PortalContent = React17.forwardRef(
         onClick: anchored ? void 0 : () => portalContext.onOpenChange?.(false),
         style: combinedStyle,
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx17(
+        children: /* @__PURE__ */ jsx18(
           "div",
           {
             className: "portal-content",
@@ -2087,23 +2177,23 @@ var PortalContent = React17.forwardRef(
         )
       }
     );
-    const content = themeContext ? /* @__PURE__ */ jsx17(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
+    const content = themeContext ? /* @__PURE__ */ jsx18(ThemeContext.Provider, { value: themeContext, children: portalContent }) : portalContent;
     return ReactDOM.createPortal(content, container);
   }
 );
 PortalContent.displayName = "Portal.Content";
 
 // src/components/portal/root/portal-root.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/components/portal/trigger/portal-trigger.tsx
-import * as React18 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
-var PortalTrigger = React18.forwardRef(
+import * as React19 from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var PortalTrigger = React19.forwardRef(
   ({ children, asChild, onClick, ...props }, ref) => {
     const context = usePortalContext();
-    const internalRef = React18.useRef(null);
-    React18.useEffect(() => {
+    const internalRef = React19.useRef(null);
+    React19.useEffect(() => {
       if (internalRef.current) {
         context.triggerRef.current = internalRef.current;
       }
@@ -2112,7 +2202,7 @@ var PortalTrigger = React18.forwardRef(
       context.onOpenChange?.(!context.open);
       onClick?.(event);
     };
-    const setRefs = React18.useCallback(
+    const setRefs = React19.useCallback(
       (node) => {
         internalRef.current = node;
         if (typeof ref === "function") {
@@ -2124,14 +2214,14 @@ var PortalTrigger = React18.forwardRef(
       },
       [ref, context.triggerRef]
     );
-    if (asChild && React18.isValidElement(children)) {
-      return React18.cloneElement(children, {
+    if (asChild && React19.isValidElement(children)) {
+      return React19.cloneElement(children, {
         ref: setRefs,
         onClick: handleClick,
         ...props
       });
     }
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "button",
       {
         ref: setRefs,
@@ -2170,7 +2260,7 @@ var PortalRootPropsDefs = {
 };
 
 // src/components/portal/root/portal-root.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN4 = [
   PortalTrigger.displayName,
   PortalBackdrop.displayName,
@@ -2189,8 +2279,8 @@ var PortalRoot = (props) => {
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const triggerRef = React19.useRef(null);
-  const value = React19.useMemo(
+  const triggerRef = React20.useRef(null);
+  const value = React20.useMemo(
     () => ({
       open,
       onOpenChange: setOpen,
@@ -2202,7 +2292,7 @@ var PortalRoot = (props) => {
   const validChildren = filterChildren(children, ALLOWED_CHILDREN4, {
     parentDisplayName: PortalRoot.displayName
   });
-  return /* @__PURE__ */ jsx19(PortalContext.Provider, { value, children: validChildren });
+  return /* @__PURE__ */ jsx20(PortalContext.Provider, { value, children: validChildren });
 };
 PortalRoot.displayName = "Portal.Root";
 
@@ -2219,12 +2309,12 @@ var Portal = {
 };
 
 // src/components/progress-bar/fill/progress-bar-fill.tsx
-import clsx17 from "clsx";
+import clsx18 from "clsx";
 import { useContext as useContext4 } from "react";
 
 // src/components/progress-bar/progress-bar-context.ts
-import React20 from "react";
-var ProgressBarContext = React20.createContext(null);
+import React21 from "react";
+var ProgressBarContext = React21.createContext(null);
 
 // src/components/progress-bar/fill/progress-bar-fill.props.ts
 var ProgressBarFillPropsDefs = {
@@ -2238,17 +2328,17 @@ var ProgressBarFillPropsDefs = {
 };
 
 // src/components/progress-bar/fill/progress-bar-fill.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var ProgressBarFill = (props) => {
   const context = useContext4(ProgressBarContext);
   const { value, color, style, className, dataAttrs, ...rest } = getComponentProps(props, ProgressBarFillPropsDefs);
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-color": color ?? context?.color,
       "data-variant": context?.variant,
       style: { ...style, width: `${(value ?? 0) / ((context?.totalValue ?? 0) > 1 ? context.totalValue : 1) * 100}%` },
-      className: clsx17("progress-bar-fill", className),
+      className: clsx18("progress-bar-fill", className),
       ...dataAttrs,
       ...rest
     }
@@ -2257,8 +2347,8 @@ var ProgressBarFill = (props) => {
 ProgressBarFill.displayName = "ProgressBar.Fill";
 
 // src/components/progress-bar/root/progress-bar-root.tsx
-import clsx18 from "clsx";
-import React21, { isValidElement as isValidElement4, useMemo as useMemo5 } from "react";
+import clsx19 from "clsx";
+import React22, { isValidElement as isValidElement4, useMemo as useMemo5 } from "react";
 
 // src/components/progress-bar/root/progress-bar-root.props.ts
 var ProgressBarVariants = ["solid", "outlined", "muted"];
@@ -2281,7 +2371,7 @@ var ProgressBarRootPropsDefs = {
 };
 
 // src/components/progress-bar/root/progress-bar-root.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN5 = [ProgressBarFill.displayName];
 var ProgressBarRoot = (props) => {
   const { value, size, color, variant, className, dataAttrs, ...rest } = getComponentProps(
@@ -2308,20 +2398,20 @@ var ProgressBarRoot = (props) => {
       };
     }
     return {
-      fills: [/* @__PURE__ */ jsx21(ProgressBarFill, { color, value })],
+      fills: [/* @__PURE__ */ jsx22(ProgressBarFill, { color, value })],
       totalValue: value ?? 0
     };
   }, [validChildren, color, value]);
-  return /* @__PURE__ */ jsx21(ProgressBarContext.Provider, { value: { color, variant, totalValue }, children: /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(ProgressBarContext.Provider, { value: { color, variant, totalValue }, children: /* @__PURE__ */ jsx22(
     "div",
     {
       "data-size": size,
       "data-color": color,
       "data-variant": variant,
-      className: clsx18("progress-bar-root", className),
+      className: clsx19("progress-bar-root", className),
       ...dataAttrs,
       ...rest,
-      children: fills.map((fill, index) => /* @__PURE__ */ jsx21(React21.Fragment, { children: fill }, index))
+      children: fills.map((fill, index) => /* @__PURE__ */ jsx22(React22.Fragment, { children: fill }, index))
     }
   ) });
 };
@@ -2340,16 +2430,16 @@ var ProgressBar = Object.assign(ProgressBarRoot, {
 });
 
 // src/components/select/content/select-content.tsx
-import clsx20 from "clsx";
-import * as React25 from "react";
+import clsx21 from "clsx";
+import * as React26 from "react";
 
 // src/components/select/select-context.tsx
-import * as React22 from "react";
-var SelectContext = React22.createContext(
+import * as React23 from "react";
+var SelectContext = React23.createContext(
   null
 );
 function useSelectContext() {
-  const context = React22.useContext(SelectContext);
+  const context = React23.useContext(SelectContext);
   if (!context) {
     throw new Error("Select components must be used within a Select.Root");
   }
@@ -2357,9 +2447,9 @@ function useSelectContext() {
 }
 
 // src/components/select/utils/user-composed-refs.ts
-import * as React23 from "react";
+import * as React24 from "react";
 function useComposedRefs(...refs) {
-  return React23.useCallback(
+  return React24.useCallback(
     (node) => {
       refs.forEach((ref) => {
         if (typeof ref === "function") {
@@ -2374,20 +2464,20 @@ function useComposedRefs(...refs) {
 }
 
 // src/components/select/viewport/select-viewport.tsx
-import clsx19 from "clsx";
-import * as React24 from "react";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var SelectViewport = React24.forwardRef(
+import clsx20 from "clsx";
+import * as React25 from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var SelectViewport = React25.forwardRef(
   (props, ref) => {
     const { className, children, ...rest } = props;
-    return /* @__PURE__ */ jsx22("div", { ref, className: clsx19("select-viewport", className), ...rest, children });
+    return /* @__PURE__ */ jsx23("div", { ref, className: clsx20("select-viewport", className), ...rest, children });
   }
 );
 SelectViewport.displayName = "Select.Viewport";
 
 // src/components/select/content/select-content.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var SelectContent = React25.forwardRef(
+import { jsx as jsx24 } from "react/jsx-runtime";
+var SelectContent = React26.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2400,10 +2490,10 @@ var SelectContent = React25.forwardRef(
     } = props;
     const context = useSelectContext();
     const composedRef = useComposedRefs(forwardedRef, context.contentRef);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       context.itemValues.current = [];
     }, [context.open]);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!context.open) return;
       const handleClickOutside = (event) => {
         const target = event.target;
@@ -2414,7 +2504,7 @@ var SelectContent = React25.forwardRef(
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [context.open]);
-    React25.useEffect(() => {
+    React26.useEffect(() => {
       if (!context.open) return;
       const handleKeyDown = (event) => {
         const items = context.itemValues.current;
@@ -2467,24 +2557,24 @@ var SelectContent = React25.forwardRef(
       document.addEventListener("keydown", handleKeyDown);
       return () => document.removeEventListener("keydown", handleKeyDown);
     }, [context.open, context.highlightedIndex]);
-    const [contentWidth, setContentWidth] = React25.useState();
+    const [contentWidth, setContentWidth] = React26.useState();
     const labelInside = context.labelPosition === "inside";
     const anchorRef = labelInside ? context.rootRef : context.triggerRef;
-    React25.useLayoutEffect(() => {
+    React26.useLayoutEffect(() => {
       if (context.open && anchorRef.current) {
         setContentWidth(anchorRef.current.getBoundingClientRect().width);
       }
     }, [context.open, context.labelPosition, anchorRef]);
     if (!context.open) {
-      return /* @__PURE__ */ jsx23("div", { style: { display: "none" }, "aria-hidden": "true", children });
+      return /* @__PURE__ */ jsx24("div", { style: { display: "none" }, "aria-hidden": "true", children });
     }
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       Portal.Root,
       {
         open: context.open,
         onOpenChange: context.onOpenChange,
         anchorRef,
-        children: /* @__PURE__ */ jsx23(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx23(
+        children: /* @__PURE__ */ jsx24(Portal.Content, { anchored: true, side, align, sideOffset: offset, children: /* @__PURE__ */ jsx24(
           "div",
           {
             ref: composedRef,
@@ -2493,10 +2583,10 @@ var SelectContent = React25.forwardRef(
             "data-side": side,
             "data-align": align,
             "data-trigger-variant": context.triggerVariant,
-            className: clsx20("select-content", className),
+            className: clsx21("select-content", className),
             style: { width: contentWidth },
             ...rest,
-            children: /* @__PURE__ */ jsx23(SelectViewport, { children })
+            children: /* @__PURE__ */ jsx24(SelectViewport, { children })
           }
         ) })
       }
@@ -2506,8 +2596,8 @@ var SelectContent = React25.forwardRef(
 SelectContent.displayName = "Select.Content";
 
 // src/components/select/group/select-group.tsx
-import clsx21 from "clsx";
-import * as React26 from "react";
+import clsx22 from "clsx";
+import * as React27 from "react";
 
 // src/components/select/group/select-group.props.ts
 var SelectGroupsPropDefs = {
@@ -2517,8 +2607,8 @@ var SelectGroupsPropDefs = {
 };
 
 // src/components/select/group/select-group.tsx
-import { jsx as jsx24, jsxs as jsxs5 } from "react/jsx-runtime";
-var SelectGroup = React26.forwardRef(
+import { jsx as jsx25, jsxs as jsxs5 } from "react/jsx-runtime";
+var SelectGroup = React27.forwardRef(
   (props, ref) => {
     const { className, children, dataAttrs, ...rest } = getComponentProps(
       props,
@@ -2529,10 +2619,10 @@ var SelectGroup = React26.forwardRef(
       {
         ref,
         role: "group",
-        className: clsx21("select-group", className),
+        className: clsx22("select-group", className),
         ...rest,
         children: [
-          /* @__PURE__ */ jsx24(Text, { className: "select-group-label", disabled: true, children: props.title }),
+          /* @__PURE__ */ jsx25(Text, { className: "select-group-label", disabled: true, children: props.title }),
           children
         ]
       }
@@ -2542,13 +2632,13 @@ var SelectGroup = React26.forwardRef(
 SelectGroup.displayName = "Select.Group";
 
 // src/components/select/item/select-item.tsx
-import clsx22 from "clsx";
-import * as React27 from "react";
+import clsx23 from "clsx";
+import * as React28 from "react";
 
 // src/components/select/item/select-item-indicator.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var SelectItemIndicator = () => {
-  return /* @__PURE__ */ jsx25("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26("span", { className: "select-item-indicator", children: /* @__PURE__ */ jsx26(
     "svg",
     {
       width: "20",
@@ -2556,7 +2646,7 @@ var SelectItemIndicator = () => {
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ jsx25(
+      children: /* @__PURE__ */ jsx26(
         "path",
         {
           d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
@@ -2581,8 +2671,8 @@ var SelectItemPropDefs = {
 };
 
 // src/components/select/item/select-item.tsx
-import { jsx as jsx26, jsxs as jsxs6 } from "react/jsx-runtime";
-var SelectItem = React27.forwardRef(
+import { jsx as jsx27, jsxs as jsxs6 } from "react/jsx-runtime";
+var SelectItem = React28.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { value, disabled, children, className, ...rest } = getComponentProps(
@@ -2590,12 +2680,12 @@ var SelectItem = React27.forwardRef(
       SelectItemPropDefs
     );
     const selected = context.value === value;
-    React27.useEffect(() => {
+    React28.useEffect(() => {
       if (selected && children) {
         context.setDisplayValue(children);
       }
     }, [selected]);
-    React27.useEffect(() => {
+    React28.useEffect(() => {
       if (!value) return;
       if (!disabled) {
         const values = context.itemValues.current;
@@ -2634,20 +2724,20 @@ var SelectItem = React27.forwardRef(
         "data-state": selected ? "checked" : "unchecked",
         "data-highlighted": isHighlighted ? "" : void 0,
         "data-disabled": disabled ? "" : void 0,
-        className: clsx22("select-item", className),
+        className: clsx23("select-item", className),
         onClick: handleClick,
         onMouseEnter: handleMouseEnter,
         ...rest,
         children: [
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(
             Box,
             {
               style: { width: 24, height: 24, justifyContent: "center" },
               className: "flex items-center",
-              children: selected && /* @__PURE__ */ jsx26(SelectItemIndicator, {})
+              children: selected && /* @__PURE__ */ jsx27(SelectItemIndicator, {})
             }
           ),
-          /* @__PURE__ */ jsx26(Text, { disabled, children })
+          /* @__PURE__ */ jsx27(Text, { disabled, children })
         ]
       }
     );
@@ -2656,8 +2746,8 @@ var SelectItem = React27.forwardRef(
 SelectItem.displayName = "Select.Item";
 
 // src/components/select/label/select-label.tsx
-import clsx23 from "clsx";
-import * as React28 from "react";
+import clsx24 from "clsx";
+import * as React29 from "react";
 
 // src/components/select/label/select-label.props.ts
 var labelPositions2 = ["top", "left", "inside"];
@@ -2671,25 +2761,25 @@ var SelectLabelPropDefs = {
 };
 
 // src/components/select/label/select-label.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
-var SelectLabel = React28.forwardRef(
+import { jsx as jsx28 } from "react/jsx-runtime";
+var SelectLabel = React29.forwardRef(
   (props, ref) => {
     const context = useSelectContext();
     const { className, children, position, dataAttrs } = getComponentProps(
       props,
       SelectLabelPropDefs
     );
-    React28.useLayoutEffect(() => {
+    React29.useLayoutEffect(() => {
       context.setLabelPosition?.(position ?? "top");
     }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "label",
       {
         ref,
         htmlFor: context.labelId,
-        className: clsx23("select-label", className),
+        className: clsx24("select-label", className),
         ...dataAttrs,
-        children: /* @__PURE__ */ jsx27(Text, { disabled: context.disabled, children })
+        children: /* @__PURE__ */ jsx28(Text, { disabled: context.disabled, children })
       }
     );
   }
@@ -2697,7 +2787,7 @@ var SelectLabel = React28.forwardRef(
 SelectLabel.displayName = "Select.Label";
 
 // src/components/select/root/select-root.tsx
-import clsx27 from "clsx";
+import clsx28 from "clsx";
 import {
   useId as useId2,
   useLayoutEffect as useLayoutEffect3,
@@ -2707,26 +2797,26 @@ import {
 } from "react";
 
 // src/components/select/trigger/select-trigger.tsx
-import clsx26 from "clsx";
-import * as React30 from "react";
+import clsx27 from "clsx";
+import * as React31 from "react";
 
 // src/components/select/value/select-value.tsx
-import clsx24 from "clsx";
-import * as React29 from "react";
-import { jsx as jsx28 } from "react/jsx-runtime";
-var SelectValue = React29.forwardRef(
+import clsx25 from "clsx";
+import * as React30 from "react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var SelectValue = React30.forwardRef(
   (props, ref) => {
     const { className, placeholder: placeholderProp, ...rest } = props;
     const context = useSelectContext();
     const placeholder = placeholderProp ?? context.placeholder;
-    return /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx29(
       "span",
       {
         ref,
-        className: clsx24("select-value", className),
+        className: clsx25("select-value", className),
         "data-placeholder": !context.value ? "" : void 0,
         ...rest,
-        children: /* @__PURE__ */ jsx28(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
+        children: /* @__PURE__ */ jsx29(Text, { disabled: context.disabled, children: context.displayValue || placeholder })
       }
     );
   }
@@ -2734,21 +2824,21 @@ var SelectValue = React29.forwardRef(
 SelectValue.displayName = "Select.Value";
 
 // src/components/select/trigger/select-trigger-icon.tsx
-import clsx25 from "clsx";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import clsx26 from "clsx";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var SelectTriggerIcon = (props) => {
   const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "svg",
     {
-      className: clsx25("select-trigger-icon", className),
+      className: clsx26("select-trigger-icon", className),
       width: "20",
       height: "20",
       viewBox: "0 0 15 15",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       ...rest,
-      children: /* @__PURE__ */ jsx29(
+      children: /* @__PURE__ */ jsx30(
         "path",
         {
           d: "M4.18179 6.18181C4.35753 6.00608 4.64245 6.00608 4.81819 6.18181L7.49999 8.86362L10.1818 6.18181C10.3575 6.00608 10.6424 6.00608 10.8182 6.18181C10.9939 6.35755 10.9939 6.64247 10.8182 6.81821L7.81819 9.81821C7.73379 9.9026 7.61934 9.95001 7.49999 9.95001C7.38064 9.95001 7.26618 9.9026 7.18179 9.81821L4.18179 6.81821C4.00605 6.64247 4.00605 6.35755 4.18179 6.18181Z",
@@ -2765,8 +2855,8 @@ var SelectTriggerIcon = (props) => {
 var SelectTriggerPropsDefs = {};
 
 // src/components/select/trigger/select-trigger.tsx
-import { jsx as jsx30, jsxs as jsxs7 } from "react/jsx-runtime";
-var SelectTrigger = React30.forwardRef(
+import { jsx as jsx31, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectTrigger = React31.forwardRef(
   (props, forwardedRef) => {
     const {
       className,
@@ -2802,11 +2892,11 @@ var SelectTrigger = React30.forwardRef(
           "data-state": context.open ? "open" : "closed",
           "data-disabled": disabled ? "" : void 0,
           "data-variant": context.triggerVariant,
-          className: clsx26("select-trigger", className),
+          className: clsx27("select-trigger", className),
           ...dataAttrs,
           children: [
-            /* @__PURE__ */ jsx30(SelectValue, {}),
-            /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
+            /* @__PURE__ */ jsx31(SelectValue, {}),
+            /* @__PURE__ */ jsx31(SelectTriggerIcon, {})
           ]
         }
       );
@@ -2823,14 +2913,14 @@ var SelectTrigger = React30.forwardRef(
         disabled,
         "data-state": context.open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx26("select-trigger", className),
+        className: clsx27("select-trigger", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         "data-variant": context.triggerVariant,
         ...dataAttrs,
         children: [
-          /* @__PURE__ */ jsx30(SelectValue, {}),
-          /* @__PURE__ */ jsx30(SelectTriggerIcon, {})
+          /* @__PURE__ */ jsx31(SelectValue, {}),
+          /* @__PURE__ */ jsx31(SelectTriggerIcon, {})
         ]
       }
     );
@@ -2870,7 +2960,7 @@ var SelectRootPropsDefs = {
 };
 
 // src/components/select/root/select-root.tsx
-import { jsx as jsx31, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs8 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN6 = [
   SelectLabel.displayName,
   SelectTrigger.displayName,
@@ -2976,7 +3066,7 @@ var SelectRoot = (props) => {
     }
   };
   if (labelInside) {
-    return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsx32(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
       "button",
       {
         type: "button",
@@ -2988,26 +3078,26 @@ var SelectRoot = (props) => {
         ref: rootRef,
         "data-state": open ? "open" : "closed",
         "data-disabled": disabled ? "" : void 0,
-        className: clsx27("select-root", className),
+        className: clsx28("select-root", className),
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         ...dataAttrs,
         children: [
           validChildren,
-          name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
+          name && /* @__PURE__ */ jsx32("input", { type: "hidden", name, value })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx31(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsx32(SelectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs8(
     Box,
     {
       ref: rootRef,
-      className: clsx27("select-root", className),
+      className: clsx28("select-root", className),
       ...dataAttrs,
       children: [
         validChildren,
-        name && /* @__PURE__ */ jsx31("input", { type: "hidden", name, value })
+        name && /* @__PURE__ */ jsx32("input", { type: "hidden", name, value })
       ]
     }
   ) });
@@ -3015,17 +3105,17 @@ var SelectRoot = (props) => {
 SelectRoot.displayName = "Select.Root";
 
 // src/components/select/separator/select-separator.tsx
-import clsx28 from "clsx";
-import * as React31 from "react";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var SelectSeparator = React31.forwardRef(
+import clsx29 from "clsx";
+import * as React32 from "react";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var SelectSeparator = React32.forwardRef(
   (props, ref) => {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ jsx32(
+    return /* @__PURE__ */ jsx33(
       "div",
       {
         ref,
-        className: clsx28("select-separator", className),
+        className: clsx29("select-separator", className),
         ...rest
       }
     );
@@ -3046,7 +3136,7 @@ var Select = {
 };
 
 // src/components/separator/separator.tsx
-import clsx29 from "clsx";
+import clsx30 from "clsx";
 
 // src/components/separator/separator.props.ts
 var directions = ["horizontal", "vertical"];
@@ -3077,16 +3167,16 @@ var SeparatorPropsDefs = {
 };
 
 // src/components/separator/separator.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var Separator = (props) => {
   const { className, dataAttrs, style } = getComponentProps(
     props,
     SeparatorPropsDefs
   );
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
-      className: clsx29("separator", className),
+      className: clsx30("separator", className),
       style,
       ...dataAttrs
     }
@@ -3095,16 +3185,16 @@ var Separator = (props) => {
 Separator.displayName = "Separator";
 
 // src/components/switch/indicator/switch-indicator.tsx
-import clsx30 from "clsx";
-import React33 from "react";
+import clsx31 from "clsx";
+import React34 from "react";
 
 // src/components/switch/switch-context.ts
-import React32 from "react";
-var SwitchContext = React32.createContext(
+import React33 from "react";
+var SwitchContext = React33.createContext(
   null
 );
 function useSwitchContext() {
-  const context = React32.useContext(SwitchContext);
+  const context = React33.useContext(SwitchContext);
   if (!context) {
     throw new Error("Switch components must be used within a Switch.Root");
   }
@@ -3199,8 +3289,8 @@ var SwitchIndicatorPropDefs = {
 };
 
 // src/components/switch/indicator/switch-indicator.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
-var SwitchIndicator = React33.forwardRef((props, ref) => {
+import { jsx as jsx35 } from "react/jsx-runtime";
+var SwitchIndicator = React34.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -3230,7 +3320,7 @@ var SwitchIndicator = React33.forwardRef((props, ref) => {
     ...readonly && { "data-readonly": true },
     ...(variant || contextVariant) && { "data-variant": indicatorVariant }
   };
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       ref,
@@ -3244,7 +3334,7 @@ var SwitchIndicator = React33.forwardRef((props, ref) => {
       "aria-readonly": readonly,
       onKeyDown: handleKeyDown,
       tabIndex: disabled || readonly ? -1 : 0,
-      className: clsx30("switch-indicator", className),
+      className: clsx31("switch-indicator", className),
       ...indicatorProps,
       ...dataAttrs
     }
@@ -3253,8 +3343,8 @@ var SwitchIndicator = React33.forwardRef((props, ref) => {
 SwitchIndicator.displayName = "Switch.Indicator";
 
 // src/components/switch/label/switch-label.tsx
-import clsx31 from "clsx";
-import React34 from "react";
+import clsx32 from "clsx";
+import React35 from "react";
 
 // src/components/switch/label/switch-label.props.ts
 var labelPositions3 = ["top", "left", "right", "bottom"];
@@ -3273,25 +3363,25 @@ var SwitchLabelPropDefs = {
 };
 
 // src/components/switch/label/switch-label.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
-var SwitchLabel = React34.forwardRef(
+import { jsx as jsx36 } from "react/jsx-runtime";
+var SwitchLabel = React35.forwardRef(
   (props, ref) => {
     const context = useSwitchContext();
     const { className, children, position } = getComponentProps(
       props,
       SwitchLabelPropDefs
     );
-    React34.useLayoutEffect(() => {
+    React35.useLayoutEffect(() => {
       context.setLabelPosition?.(position ?? "right");
     }, [position, context.setLabelPosition]);
-    return /* @__PURE__ */ jsx35(
+    return /* @__PURE__ */ jsx36(
       "label",
       {
         ref,
         htmlFor: context.labelId,
-        className: clsx31("switch-label", className),
+        className: clsx32("switch-label", className),
         ...position && { [`data-position`]: position },
-        children: /* @__PURE__ */ jsx35(Text, { children })
+        children: /* @__PURE__ */ jsx36(Text, { children })
       }
     );
   }
@@ -3299,14 +3389,14 @@ var SwitchLabel = React34.forwardRef(
 SwitchLabel.displayName = "Switch.Label";
 
 // src/components/switch/root/switch-root.tsx
-import clsx32 from "clsx";
+import clsx33 from "clsx";
 import {
   isValidElement as isValidElement5,
   useId as useId3,
   useMemo as useMemo7,
   useState as useState7
 } from "react";
-import { jsx as jsx36, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs9 } from "react/jsx-runtime";
 var ALLOWED_CHILDREN7 = [
   SwitchLabel.displayName,
   SwitchIndicator.displayName
@@ -3360,7 +3450,7 @@ var SwitchRoot = (props) => {
       };
     }
     return {
-      indicator: /* @__PURE__ */ jsx36(SwitchIndicator, { size }),
+      indicator: /* @__PURE__ */ jsx37(SwitchIndicator, { size }),
       otherChildren: validChildren
     };
   }, [validChildren, size]);
@@ -3402,10 +3492,10 @@ var SwitchRoot = (props) => {
     if (disabled || readonly) return;
     setValue(!value);
   };
-  return /* @__PURE__ */ jsx36(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx37(SwitchContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs9(
     "div",
     {
-      className: clsx32("switch-root", props.className),
+      className: clsx33("switch-root", props.className),
       onClick: () => handleClick(),
       onFocus: () => setFocused(true),
       onBlur: () => setFocused(false),
@@ -3413,7 +3503,7 @@ var SwitchRoot = (props) => {
       onMouseLeave: () => setHovered(false),
       ...restDataAttrs,
       children: [
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37(
           "div",
           {
             className: "switch-container",
@@ -3427,7 +3517,7 @@ var SwitchRoot = (props) => {
           }
         ),
         otherChildren,
-        name && /* @__PURE__ */ jsx36("input", { type: "hidden", name, value: String(value) })
+        name && /* @__PURE__ */ jsx37("input", { type: "hidden", name, value: String(value) })
       ]
     }
   ) });
@@ -3442,16 +3532,16 @@ var Switch = Object.assign(SwitchRoot, {
 });
 
 // src/components/theme/theme.tsx
-import * as React36 from "react";
-import { jsx as jsx37 } from "react/jsx-runtime";
-var Theme = React36.forwardRef((props, ref) => {
-  const context = React36.useContext(ThemeContext);
+import * as React37 from "react";
+import { jsx as jsx38 } from "react/jsx-runtime";
+var Theme = React37.forwardRef((props, ref) => {
+  const context = React37.useContext(ThemeContext);
   const isRoot = context === void 0;
-  if (isRoot) return /* @__PURE__ */ jsx37(ThemeRoot, { ...props, ref });
-  return /* @__PURE__ */ jsx37(ThemeSub, { ...props, ref });
+  if (isRoot) return /* @__PURE__ */ jsx38(ThemeRoot, { ...props, ref });
+  return /* @__PURE__ */ jsx38(ThemeSub, { ...props, ref });
 });
 Theme.displayName = "Theme";
-var ThemeRoot = React36.forwardRef((props, ref) => {
+var ThemeRoot = React37.forwardRef((props, ref) => {
   const {
     appearance: themeAppearance,
     radius: themeRadius,
@@ -3460,15 +3550,15 @@ var ThemeRoot = React36.forwardRef((props, ref) => {
     children,
     ...rest
   } = props;
-  const [appearance, setAppearance] = React36.useState(
+  const [appearance, setAppearance] = React37.useState(
     themeAppearance ?? "light"
   );
-  const [radius, setRadius] = React36.useState(themeRadius ?? "md");
-  const [roundness2, setRoundness] = React36.useState(
+  const [radius, setRadius] = React37.useState(themeRadius ?? "md");
+  const [roundness2, setRoundness] = React37.useState(
     themeRoundness ?? "3"
   );
-  const [spacing, setSpacing] = React36.useState(themeSpacing ?? "md");
-  const value = React36.useMemo(
+  const [spacing, setSpacing] = React37.useState(themeSpacing ?? "md");
+  const value = React37.useMemo(
     () => ({
       appearance,
       radius,
@@ -3481,7 +3571,7 @@ var ThemeRoot = React36.forwardRef((props, ref) => {
     }),
     [appearance, radius, roundness2, spacing]
   );
-  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx38(
     "div",
     {
       ref,
@@ -3495,8 +3585,8 @@ var ThemeRoot = React36.forwardRef((props, ref) => {
   ) });
 });
 ThemeRoot.displayName = "ThemeRoot";
-var ThemeSub = React36.forwardRef((props, ref) => {
-  const context = React36.useContext(ThemeContext);
+var ThemeSub = React37.forwardRef((props, ref) => {
+  const context = React37.useContext(ThemeContext);
   const {
     appearance,
     radius,
@@ -3519,7 +3609,7 @@ var ThemeSub = React36.forwardRef((props, ref) => {
     onRoundnessChange: context.onRoundnessChange,
     onSpacingChange: context.onSpacingChange
   };
-  return /* @__PURE__ */ jsx37(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(ThemeContext.Provider, { value: contextProps, children: /* @__PURE__ */ jsx38(
     "div",
     {
       ref,
@@ -3537,7 +3627,7 @@ ThemeSub.displayName = "ThemeSub";
 
 // src/components/theme/theme-control.tsx
 import { useEffect as useEffect7, useState as useState9 } from "react";
-import { jsx as jsx38, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs10 } from "react/jsx-runtime";
 function ThemeControl({ position = "bottom" }) {
   const {
     appearance,
@@ -3560,7 +3650,7 @@ function ThemeControl({ position = "bottom" }) {
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [visible]);
-  return /* @__PURE__ */ jsx38(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx38(Portal.Content, { position, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx39(Portal.Root, { open: visible, onOpenChange: setVisible, children: /* @__PURE__ */ jsx39(Portal.Content, { position, children: /* @__PURE__ */ jsxs10(
     Box,
     {
       m: "4",
@@ -3574,11 +3664,11 @@ function ThemeControl({ position = "bottom" }) {
             value: appearance,
             onValueChange: (change) => onAppearanceChange?.(change),
             children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Theme Settings" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsx39(Select.Label, { position: "inside", children: "Theme Settings" }),
+              /* @__PURE__ */ jsx39(Select.Trigger, {}),
               /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "light", children: "Light" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "dark", children: "Dark" })
+                /* @__PURE__ */ jsx39(Select.Item, { value: "light", children: "Light" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "dark", children: "Dark" })
               ] })
             ]
           }
@@ -3590,16 +3680,16 @@ function ThemeControl({ position = "bottom" }) {
             value: radius,
             onValueChange: (change) => onRadiusChange?.(change),
             children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Radius" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsx39(Select.Label, { position: "inside", children: "Radius" }),
+              /* @__PURE__ */ jsx39(Select.Trigger, {}),
               /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "none", children: "None" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "full", children: "FULL" })
+                /* @__PURE__ */ jsx39(Select.Item, { value: "none", children: "None" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "xl", children: "XL" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "full", children: "FULL" })
               ] })
             ]
           }
@@ -3611,15 +3701,15 @@ function ThemeControl({ position = "bottom" }) {
             value: roundness2,
             onValueChange: (change) => onRoundnessChange?.(change),
             children: [
-              /* @__PURE__ */ jsx38(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsx39(Select.Label, { className: "min-w-40!", position: "inside", children: "Roundness" }),
+              /* @__PURE__ */ jsx39(Select.Trigger, {}),
               /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "1", children: "1" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "2", children: "2" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "3", children: "3" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "4", children: "4" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "5", children: "5" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "6", children: "6" })
+                /* @__PURE__ */ jsx39(Select.Item, { value: "1", children: "1" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "2", children: "2" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "3", children: "3" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "4", children: "4" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "5", children: "5" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "6", children: "6" })
               ] })
             ]
           }
@@ -3631,14 +3721,14 @@ function ThemeControl({ position = "bottom" }) {
             value: spacing,
             onValueChange: (change) => onSpacingChange?.(change),
             children: [
-              /* @__PURE__ */ jsx38(Select.Label, { position: "inside", children: "Spacing" }),
-              /* @__PURE__ */ jsx38(Select.Trigger, {}),
+              /* @__PURE__ */ jsx39(Select.Label, { position: "inside", children: "Spacing" }),
+              /* @__PURE__ */ jsx39(Select.Trigger, {}),
               /* @__PURE__ */ jsxs10(Select.Content, { children: [
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xs", children: "XS" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "sm", children: "SM" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "md", children: "MD" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "lg", children: "LG" }),
-                /* @__PURE__ */ jsx38(Select.Item, { value: "xl", children: "XL" })
+                /* @__PURE__ */ jsx39(Select.Item, { value: "xs", children: "XS" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "sm", children: "SM" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "md", children: "MD" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "lg", children: "LG" }),
+                /* @__PURE__ */ jsx39(Select.Item, { value: "xl", children: "XL" })
               ] })
             ]
           }
@@ -3654,6 +3744,7 @@ export {
   Button,
   Checkbox,
   Container,
+  Flex,
   Panel,
   Portal,
   ProgressBar,