@mission-studio/puck 1.0.5 → 1.0.16

package/dist/{chunk-OZYZPWP7.mjs → chunk-SYXQQITG.mjs}

@@ -1,20 +1,24 @@
 import {
   borderRadiusScale,
-  cn,
   fontFamilies,
   fontSizes,
   fontWeights,
   getClosestBorderRadiusValue,
   getClosestSpacingValue,
   getFontSizeCSS,
-  hexToRgba,
-  isValidHex,
-  normalizeHex,
+  spacingScale
+} from "./chunk-A3QDUUOF.mjs";
+import {
   shadowPresets,
-  spacingScale,
   useEntries,
   useTheme
-} from "./chunk-TTKY3YGP.mjs";
+} from "./chunk-KV2RSRAM.mjs";
+import {
+  cn,
+  hexToRgba,
+  isValidHex,
+  normalizeHex
+} from "./chunk-D3L26TIT.mjs";
 
 // fields/BorderRadiusField.tsx
 import { useState } from "react";
@@ -408,8 +412,8 @@ function ColorPickerField({
 }
 
 // node_modules/@radix-ui/react-select/dist/index.mjs
-import * as React32 from "react";
-import * as ReactDOM5 from "react-dom";
+import * as React31 from "react";
+import * as ReactDOM4 from "react-dom";
 
 // node_modules/@radix-ui/number/dist/index.mjs
 function clamp(value, [min2, max2]) {
@@ -3375,51 +3379,13 @@ var Portal = React18.forwardRef((props, forwardedRef) => {
 });
 Portal.displayName = PORTAL_NAME;
 
-// node_modules/@radix-ui/react-select/node_modules/@radix-ui/react-primitive/dist/index.mjs
-import * as React19 from "react";
-import * as ReactDOM4 from "react-dom";
-import { createSlot as createSlot4 } from "@radix-ui/react-slot";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var NODES2 = [
-  "a",
-  "button",
-  "div",
-  "form",
-  "h2",
-  "h3",
-  "img",
-  "input",
-  "label",
-  "li",
-  "nav",
-  "ol",
-  "p",
-  "select",
-  "span",
-  "svg",
-  "ul"
-];
-var Primitive2 = NODES2.reduce((primitive, node) => {
-  const Slot3 = createSlot4(`Primitive.${node}`);
-  const Node2 = React19.forwardRef((props, forwardedRef) => {
-    const { asChild, ...primitiveProps } = props;
-    const Comp = asChild ? Slot3 : node;
-    if (typeof window !== "undefined") {
-      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
-    }
-    return /* @__PURE__ */ jsx17(Comp, { ...primitiveProps, ref: forwardedRef });
-  });
-  Node2.displayName = `Primitive.${node}`;
-  return { ...primitive, [node]: Node2 };
-}, {});
-
 // node_modules/@radix-ui/react-select/dist/index.mjs
-import { createSlot as createSlot5 } from "@radix-ui/react-slot";
+import { createSlot as createSlot4 } from "@radix-ui/react-slot";
 
 // node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
-import * as React20 from "react";
+import * as React19 from "react";
 import * as React23 from "react";
-var useInsertionEffect = React20[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+var useInsertionEffect = React19[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
 function useControllableState({
   prop,
   defaultProp,
@@ -3434,8 +3400,8 @@ function useControllableState({
   const isControlled = prop !== void 0;
   const value = isControlled ? prop : uncontrolledProp;
   if (true) {
-    const isControlledRef = React20.useRef(prop !== void 0);
-    React20.useEffect(() => {
+    const isControlledRef = React19.useRef(prop !== void 0);
+    React19.useEffect(() => {
       const wasControlled = isControlledRef.current;
       if (wasControlled !== isControlled) {
         const from = wasControlled ? "controlled" : "uncontrolled";
@@ -3447,7 +3413,7 @@ function useControllableState({
       isControlledRef.current = isControlled;
     }, [isControlled, caller]);
   }
-  const setValue = React20.useCallback(
+  const setValue = React19.useCallback(
     (nextValue) => {
       if (isControlled) {
         const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
@@ -3466,13 +3432,13 @@ function useUncontrolledState({
   defaultProp,
   onChange
 }) {
-  const [value, setValue] = React20.useState(defaultProp);
-  const prevValueRef = React20.useRef(value);
-  const onChangeRef = React20.useRef(onChange);
+  const [value, setValue] = React19.useState(defaultProp);
+  const prevValueRef = React19.useRef(value);
+  const onChangeRef = React19.useRef(onChange);
   useInsertionEffect(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     if (prevValueRef.current !== value) {
       onChangeRef.current?.(value);
       prevValueRef.current = value;
@@ -3485,10 +3451,10 @@ function isFunction(value) {
 }
 
 // node_modules/@radix-ui/react-use-previous/dist/index.mjs
-import * as React21 from "react";
+import * as React20 from "react";
 function usePrevious(value) {
-  const ref = React21.useRef({ value, previous: value });
-  return React21.useMemo(() => {
+  const ref = React20.useRef({ value, previous: value });
+  return React20.useMemo(() => {
     if (ref.current.value !== value) {
       ref.current.previous = ref.current.value;
       ref.current.value = value;
@@ -3498,8 +3464,8 @@ function usePrevious(value) {
 }
 
 // node_modules/@radix-ui/react-visually-hidden/dist/index.mjs
-import * as React24 from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import * as React21 from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var VISUALLY_HIDDEN_STYLES = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
@@ -3514,9 +3480,9 @@ var VISUALLY_HIDDEN_STYLES = Object.freeze({
   wordWrap: "normal"
 });
 var NAME2 = "VisuallyHidden";
-var VisuallyHidden = React24.forwardRef(
+var VisuallyHidden = React21.forwardRef(
   (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx17(
       Primitive.span,
       {
         ...props,
@@ -3682,10 +3648,10 @@ function __spreadArray(to, from, pack) {
 }
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-import * as React31 from "react";
+import * as React30 from "react";
 
 // node_modules/react-remove-scroll/dist/es2015/UI.js
-import * as React27 from "react";
+import * as React26 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/constants.js
 var zeroRightClassName = "right-scroll-bar-position";
@@ -3732,8 +3698,8 @@ function useCallbackRef2(initialValue, callback) {
 }
 
 // node_modules/use-callback-ref/dist/es2015/useMergeRef.js
-import * as React25 from "react";
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React25.useLayoutEffect : React25.useEffect;
+import * as React24 from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React24.useLayoutEffect : React24.useEffect;
 var currentValues = /* @__PURE__ */ new WeakMap();
 function useMergeRefs(refs, defaultValue) {
   var callbackRef = useCallbackRef2(defaultValue || null, function(newValue) {
@@ -3850,7 +3816,7 @@ function createSidecarMedium(options) {
 }
 
 // node_modules/use-sidecar/dist/es2015/exports.js
-import * as React26 from "react";
+import * as React25 from "react";
 var SideCar = function(_a) {
   var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]);
   if (!sideCar) {
@@ -3860,7 +3826,7 @@ var SideCar = function(_a) {
   if (!Target) {
     throw new Error("Sidecar medium not found");
   }
-  return React26.createElement(Target, __assign({}, rest));
+  return React25.createElement(Target, __assign({}, rest));
 };
 SideCar.isSideCarExport = true;
 function exportSidecar(medium, exported) {
@@ -3875,9 +3841,9 @@ var effectCar = createSidecarMedium();
 var nothing = function() {
   return;
 };
-var RemoveScroll = React27.forwardRef(function(props, parentRef) {
-  var ref = React27.useRef(null);
-  var _a = React27.useState({
+var RemoveScroll = React26.forwardRef(function(props, parentRef) {
+  var ref = React26.useRef(null);
+  var _a = React26.useState({
     onScrollCapture: nothing,
     onWheelCapture: nothing,
     onTouchMoveCapture: nothing
@@ -3886,11 +3852,11 @@ var RemoveScroll = React27.forwardRef(function(props, parentRef) {
   var SideCar2 = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
   var containerProps = __assign(__assign({}, rest), callbacks);
-  return React27.createElement(
-    React27.Fragment,
+  return React26.createElement(
+    React26.Fragment,
     null,
-    enabled && React27.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
-    forwardProps ? React27.cloneElement(React27.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React27.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
+    enabled && React26.createElement(SideCar2, { sideCar: effectCar, removeScrollBar, shards, noRelative, noIsolation, inert, setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref, gapMode }),
+    forwardProps ? React26.cloneElement(React26.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef })) : React26.createElement(Container, __assign({}, containerProps, { className, ref: containerRef }), children)
   );
 });
 RemoveScroll.defaultProps = {
@@ -3904,13 +3870,13 @@ RemoveScroll.classNames = {
 };
 
 // node_modules/react-remove-scroll/dist/es2015/SideEffect.js
-import * as React30 from "react";
+import * as React29 from "react";
 
 // node_modules/react-remove-scroll-bar/dist/es2015/component.js
-import * as React29 from "react";
+import * as React28 from "react";
 
 // node_modules/react-style-singleton/dist/es2015/hook.js
-import * as React28 from "react";
+import * as React27 from "react";
 
 // node_modules/get-nonce/dist/es2015/index.js
 var currentNonce;
@@ -3974,7 +3940,7 @@ var stylesheetSingleton = function() {
 var styleHookSingleton = function() {
   var sheet = stylesheetSingleton();
   return function(styles, isDynamic) {
-    React28.useEffect(function() {
+    React27.useEffect(function() {
       sheet.add(styles);
       return function() {
         sheet.remove();
@@ -4048,7 +4014,7 @@ var getCurrentUseCounter = function() {
   return isFinite(counter) ? counter : 0;
 };
 var useLockAttribute = function() {
-  React29.useEffect(function() {
+  React28.useEffect(function() {
     document.body.setAttribute(lockAttribute, (getCurrentUseCounter() + 1).toString());
     return function() {
       var newCounter = getCurrentUseCounter() - 1;
@@ -4063,10 +4029,10 @@ var useLockAttribute = function() {
 var RemoveScrollBar = function(_a) {
   var noRelative = _a.noRelative, noImportant = _a.noImportant, _b = _a.gapMode, gapMode = _b === void 0 ? "margin" : _b;
   useLockAttribute();
-  var gap = React29.useMemo(function() {
+  var gap = React28.useMemo(function() {
     return getGapWidth(gapMode);
   }, [gapMode]);
-  return React29.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
+  return React28.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? "!important" : "") });
 };
 
 // node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js
@@ -4207,16 +4173,16 @@ var generateStyle = function(id) {
 var idCounter = 0;
 var lockStack = [];
 function RemoveScrollSideCar(props) {
-  var shouldPreventQueue = React30.useRef([]);
-  var touchStartRef = React30.useRef([0, 0]);
-  var activeAxis = React30.useRef();
-  var id = React30.useState(idCounter++)[0];
-  var Style2 = React30.useState(styleSingleton)[0];
-  var lastProps = React30.useRef(props);
-  React30.useEffect(function() {
+  var shouldPreventQueue = React29.useRef([]);
+  var touchStartRef = React29.useRef([0, 0]);
+  var activeAxis = React29.useRef();
+  var id = React29.useState(idCounter++)[0];
+  var Style2 = React29.useState(styleSingleton)[0];
+  var lastProps = React29.useRef(props);
+  React29.useEffect(function() {
     lastProps.current = props;
   }, [props]);
-  React30.useEffect(function() {
+  React29.useEffect(function() {
     if (props.inert) {
       document.body.classList.add("block-interactivity-".concat(id));
       var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean);
@@ -4232,7 +4198,7 @@ function RemoveScrollSideCar(props) {
     }
     return;
   }, [props.inert, props.lockRef.current, props.shards]);
-  var shouldCancelEvent = React30.useCallback(function(event, parent) {
+  var shouldCancelEvent = React29.useCallback(function(event, parent) {
     if ("touches" in event && event.touches.length === 2 || event.type === "wheel" && event.ctrlKey) {
       return !lastProps.current.allowPinchZoom;
     }
@@ -4274,7 +4240,7 @@ function RemoveScrollSideCar(props) {
     var cancelingAxis = activeAxis.current || currentAxis;
     return handleScroll(cancelingAxis, parent, event, cancelingAxis === "h" ? deltaX : deltaY, true);
   }, []);
-  var shouldPrevent = React30.useCallback(function(_event) {
+  var shouldPrevent = React29.useCallback(function(_event) {
     var event = _event;
     if (!lockStack.length || lockStack[lockStack.length - 1] !== Style2) {
       return;
@@ -4301,7 +4267,7 @@ function RemoveScrollSideCar(props) {
       }
     }
   }, []);
-  var shouldCancel = React30.useCallback(function(name, delta, target, should) {
+  var shouldCancel = React29.useCallback(function(name, delta, target, should) {
     var event = { name, delta, target, should, shadowParent: getOutermostShadowParent(target) };
     shouldPreventQueue.current.push(event);
     setTimeout(function() {
@@ -4310,17 +4276,17 @@ function RemoveScrollSideCar(props) {
       });
     }, 1);
   }, []);
-  var scrollTouchStart = React30.useCallback(function(event) {
+  var scrollTouchStart = React29.useCallback(function(event) {
     touchStartRef.current = getTouchXY(event);
     activeAxis.current = void 0;
   }, []);
-  var scrollWheel = React30.useCallback(function(event) {
+  var scrollWheel = React29.useCallback(function(event) {
     shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  var scrollTouchMove = React30.useCallback(function(event) {
+  var scrollTouchMove = React29.useCallback(function(event) {
     shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current));
   }, []);
-  React30.useEffect(function() {
+  React29.useEffect(function() {
     lockStack.push(Style2);
     props.setCallbacks({
       onScrollCapture: scrollWheel,
@@ -4340,11 +4306,11 @@ function RemoveScrollSideCar(props) {
     };
   }, []);
   var removeScrollBar = props.removeScrollBar, inert = props.inert;
-  return React30.createElement(
-    React30.Fragment,
+  return React29.createElement(
+    React29.Fragment,
     null,
-    inert ? React30.createElement(Style2, { styles: generateStyle(id) }) : null,
-    removeScrollBar ? React30.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
+    inert ? React29.createElement(Style2, { styles: generateStyle(id) }) : null,
+    removeScrollBar ? React29.createElement(RemoveScrollBar, { noRelative: props.noRelative, gapMode: props.gapMode }) : null
   );
 }
 function getOutermostShadowParent(node) {
@@ -4363,14 +4329,14 @@ function getOutermostShadowParent(node) {
 var sidecar_default = exportSidecar(effectCar, RemoveScrollSideCar);
 
 // node_modules/react-remove-scroll/dist/es2015/Combination.js
-var ReactRemoveScroll = React31.forwardRef(function(props, ref) {
-  return React31.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
+var ReactRemoveScroll = React30.forwardRef(function(props, ref) {
+  return React30.createElement(RemoveScroll, __assign({}, props, { ref, sideCar: sidecar_default }));
 });
 ReactRemoveScroll.classNames = RemoveScroll.classNames;
 var Combination_default = ReactRemoveScroll;
 
 // node_modules/@radix-ui/react-select/dist/index.mjs
-import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs4 } from "react/jsx-runtime";
 var OPEN_KEYS = [" ", "Enter", "ArrowUp", "ArrowDown"];
 var SELECTION_KEYS = [" ", "Enter"];
 var SELECT_NAME = "Select";
@@ -4400,9 +4366,9 @@ var Select = (props) => {
     form
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  const [trigger, setTrigger] = React32.useState(null);
-  const [valueNode, setValueNode] = React32.useState(null);
-  const [valueNodeHasChildren, setValueNodeHasChildren] = React32.useState(false);
+  const [trigger, setTrigger] = React31.useState(null);
+  const [valueNode, setValueNode] = React31.useState(null);
+  const [valueNodeHasChildren, setValueNodeHasChildren] = React31.useState(false);
   const direction = useDirection(dir);
   const [open, setOpen] = useControllableState({
     prop: openProp,
@@ -4416,11 +4382,11 @@ var Select = (props) => {
     onChange: onValueChange,
     caller: SELECT_NAME
   });
-  const triggerPointerDownPosRef = React32.useRef(null);
+  const triggerPointerDownPosRef = React31.useRef(null);
   const isFormControl = trigger ? form || !!trigger.closest("form") : true;
-  const [nativeOptionsSet, setNativeOptionsSet] = React32.useState(/* @__PURE__ */ new Set());
+  const [nativeOptionsSet, setNativeOptionsSet] = React31.useState(/* @__PURE__ */ new Set());
   const nativeSelectKey = Array.from(nativeOptionsSet).map((option) => option.props.value).join(";");
-  return /* @__PURE__ */ jsx19(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx18(Root22, { ...popperScope, children: /* @__PURE__ */ jsxs4(
     SelectProvider,
     {
       required,
@@ -4440,14 +4406,14 @@ var Select = (props) => {
       triggerPointerDownPosRef,
       disabled,
       children: [
-        /* @__PURE__ */ jsx19(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx19(
+        /* @__PURE__ */ jsx18(Collection.Provider, { scope: __scopeSelect, children: /* @__PURE__ */ jsx18(
           SelectNativeOptionsProvider,
           {
             scope: props.__scopeSelect,
-            onNativeOptionAdd: React32.useCallback((option) => {
+            onNativeOptionAdd: React31.useCallback((option) => {
               setNativeOptionsSet((prev) => new Set(prev).add(option));
             }, []),
-            onNativeOptionRemove: React32.useCallback((option) => {
+            onNativeOptionRemove: React31.useCallback((option) => {
               setNativeOptionsSet((prev) => {
                 const optionsSet = new Set(prev);
                 optionsSet.delete(option);
@@ -4470,7 +4436,7 @@ var Select = (props) => {
             disabled,
             form,
             children: [
-              value === void 0 ? /* @__PURE__ */ jsx19("option", { value: "" }) : null,
+              value === void 0 ? /* @__PURE__ */ jsx18("option", { value: "" }) : null,
               Array.from(nativeOptionsSet)
             ]
           },
@@ -4482,7 +4448,7 @@ var Select = (props) => {
 };
 Select.displayName = SELECT_NAME;
 var TRIGGER_NAME = "SelectTrigger";
-var SelectTrigger = React32.forwardRef(
+var SelectTrigger = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, disabled = false, ...triggerProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
@@ -4490,7 +4456,7 @@ var SelectTrigger = React32.forwardRef(
     const isDisabled = context.disabled || disabled;
     const composedRefs = useComposedRefs(forwardedRef, context.onTriggerChange);
     const getItems = useCollection(__scopeSelect);
-    const pointerTypeRef = React32.useRef("touch");
+    const pointerTypeRef = React31.useRef("touch");
     const [searchRef, handleTypeaheadSearch, resetTypeahead] = useTypeaheadSearch((search) => {
       const enabledItems = getItems().filter((item) => !item.disabled);
       const currentItem = enabledItems.find((item) => item.value === context.value);
@@ -4511,8 +4477,8 @@ var SelectTrigger = React32.forwardRef(
         };
       }
     };
-    return /* @__PURE__ */ jsx19(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx19(
-      Primitive2.button,
+    return /* @__PURE__ */ jsx18(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsx18(
+      Primitive.button,
       {
         type: "button",
         role: "combobox",
@@ -4560,7 +4526,7 @@ var SelectTrigger = React32.forwardRef(
 );
 SelectTrigger.displayName = TRIGGER_NAME;
 var VALUE_NAME = "SelectValue";
-var SelectValue = React32.forwardRef(
+var SelectValue = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, className, style, children, placeholder = "", ...valueProps } = props;
     const context = useSelectContext(VALUE_NAME, __scopeSelect);
@@ -4570,55 +4536,55 @@ var SelectValue = React32.forwardRef(
     useLayoutEffect2(() => {
       onValueNodeHasChildrenChange(hasChildren);
     }, [onValueNodeHasChildrenChange, hasChildren]);
-    return /* @__PURE__ */ jsx19(
-      Primitive2.span,
+    return /* @__PURE__ */ jsx18(
+      Primitive.span,
       {
         ...valueProps,
         ref: composedRefs,
         style: { pointerEvents: "none" },
-        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx19(Fragment3, { children: placeholder }) : children
+        children: shouldShowPlaceholder(context.value) ? /* @__PURE__ */ jsx18(Fragment3, { children: placeholder }) : children
       }
     );
   }
 );
 SelectValue.displayName = VALUE_NAME;
 var ICON_NAME = "SelectIcon";
-var SelectIcon = React32.forwardRef(
+var SelectIcon = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, children, ...iconProps } = props;
-    return /* @__PURE__ */ jsx19(Primitive2.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
+    return /* @__PURE__ */ jsx18(Primitive.span, { "aria-hidden": true, ...iconProps, ref: forwardedRef, children: children || "\u25BC" });
   }
 );
 SelectIcon.displayName = ICON_NAME;
 var PORTAL_NAME2 = "SelectPortal";
 var SelectPortal = (props) => {
-  return /* @__PURE__ */ jsx19(Portal, { asChild: true, ...props });
+  return /* @__PURE__ */ jsx18(Portal, { asChild: true, ...props });
 };
 SelectPortal.displayName = PORTAL_NAME2;
 var CONTENT_NAME2 = "SelectContent";
-var SelectContent = React32.forwardRef(
+var SelectContent = React31.forwardRef(
   (props, forwardedRef) => {
     const context = useSelectContext(CONTENT_NAME2, props.__scopeSelect);
-    const [fragment, setFragment] = React32.useState();
+    const [fragment, setFragment] = React31.useState();
     useLayoutEffect2(() => {
       setFragment(new DocumentFragment());
     }, []);
     if (!context.open) {
       const frag = fragment;
-      return frag ? ReactDOM5.createPortal(
-        /* @__PURE__ */ jsx19(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx19(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx19("div", { children: props.children }) }) }),
+      return frag ? ReactDOM4.createPortal(
+        /* @__PURE__ */ jsx18(SelectContentProvider, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx18(Collection.Slot, { scope: props.__scopeSelect, children: /* @__PURE__ */ jsx18("div", { children: props.children }) }) }),
         frag
       ) : null;
     }
-    return /* @__PURE__ */ jsx19(SelectContentImpl, { ...props, ref: forwardedRef });
+    return /* @__PURE__ */ jsx18(SelectContentImpl, { ...props, ref: forwardedRef });
   }
 );
 SelectContent.displayName = CONTENT_NAME2;
 var CONTENT_MARGIN = 10;
 var [SelectContentProvider, useSelectContentContext] = createSelectContext(CONTENT_NAME2);
 var CONTENT_IMPL_NAME = "SelectContentImpl";
-var Slot2 = createSlot5("SelectContent.RemoveScroll");
-var SelectContentImpl = React32.forwardRef(
+var Slot2 = createSlot4("SelectContent.RemoveScroll");
+var SelectContentImpl = React31.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSelect,
@@ -4642,21 +4608,21 @@ var SelectContentImpl = React32.forwardRef(
       ...contentProps
     } = props;
     const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
-    const [content, setContent] = React32.useState(null);
-    const [viewport, setViewport] = React32.useState(null);
+    const [content, setContent] = React31.useState(null);
+    const [viewport, setViewport] = React31.useState(null);
     const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
-    const [selectedItem, setSelectedItem] = React32.useState(null);
-    const [selectedItemText, setSelectedItemText] = React32.useState(
+    const [selectedItem, setSelectedItem] = React31.useState(null);
+    const [selectedItemText, setSelectedItemText] = React31.useState(
       null
     );
     const getItems = useCollection(__scopeSelect);
-    const [isPositioned, setIsPositioned] = React32.useState(false);
-    const firstValidItemFoundRef = React32.useRef(false);
-    React32.useEffect(() => {
+    const [isPositioned, setIsPositioned] = React31.useState(false);
+    const firstValidItemFoundRef = React31.useRef(false);
+    React31.useEffect(() => {
       if (content) return hideOthers(content);
     }, [content]);
     useFocusGuards();
-    const focusFirst2 = React32.useCallback(
+    const focusFirst2 = React31.useCallback(
       (candidates) => {
         const [firstItem, ...restItems] = getItems().map((item) => item.ref.current);
         const [lastItem] = restItems.slice(-1);
@@ -4672,17 +4638,17 @@ var SelectContentImpl = React32.forwardRef(
       },
       [getItems, viewport]
     );
-    const focusSelectedItem = React32.useCallback(
+    const focusSelectedItem = React31.useCallback(
       () => focusFirst2([selectedItem, content]),
       [focusFirst2, selectedItem, content]
     );
-    React32.useEffect(() => {
+    React31.useEffect(() => {
       if (isPositioned) {
         focusSelectedItem();
       }
     }, [isPositioned, focusSelectedItem]);
     const { onOpenChange, triggerPointerDownPosRef } = context;
-    React32.useEffect(() => {
+    React31.useEffect(() => {
       if (content) {
         let pointerMoveDelta = { x: 0, y: 0 };
         const handlePointerMove = (event) => {
@@ -4712,7 +4678,7 @@ var SelectContentImpl = React32.forwardRef(
         };
       }
     }, [content, onOpenChange, triggerPointerDownPosRef]);
-    React32.useEffect(() => {
+    React31.useEffect(() => {
       const close = () => onOpenChange(false);
       window.addEventListener("blur", close);
       window.addEventListener("resize", close);
@@ -4729,7 +4695,7 @@ var SelectContentImpl = React32.forwardRef(
         setTimeout(() => nextItem.ref.current.focus());
       }
     });
-    const itemRefCallback = React32.useCallback(
+    const itemRefCallback = React31.useCallback(
       (node, value, disabled) => {
         const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
         const isSelectedItem = context.value !== void 0 && context.value === value;
@@ -4740,8 +4706,8 @@ var SelectContentImpl = React32.forwardRef(
       },
       [context.value]
     );
-    const handleItemLeave = React32.useCallback(() => content?.focus(), [content]);
-    const itemTextRefCallback = React32.useCallback(
+    const handleItemLeave = React31.useCallback(() => content?.focus(), [content]);
+    const itemTextRefCallback = React31.useCallback(
       (node, value, disabled) => {
         const isFirstValidItem = !firstValidItemFoundRef.current && !disabled;
         const isSelectedItem = context.value !== void 0 && context.value === value;
@@ -4764,7 +4730,7 @@ var SelectContentImpl = React32.forwardRef(
       hideWhenDetached,
       avoidCollisions
     } : {};
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx18(
       SelectContentProvider,
       {
         scope: __scopeSelect,
@@ -4780,7 +4746,7 @@ var SelectContentImpl = React32.forwardRef(
         position,
         isPositioned,
         searchRef,
-        children: /* @__PURE__ */ jsx19(Combination_default, { as: Slot2, allowPinchZoom: true, children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx18(Combination_default, { as: Slot2, allowPinchZoom: true, children: /* @__PURE__ */ jsx18(
           FocusScope,
           {
             asChild: true,
@@ -4792,7 +4758,7 @@ var SelectContentImpl = React32.forwardRef(
               context.trigger?.focus({ preventScroll: true });
               event.preventDefault();
             }),
-            children: /* @__PURE__ */ jsx19(
+            children: /* @__PURE__ */ jsx18(
               DismissableLayer,
               {
                 asChild: true,
@@ -4801,7 +4767,7 @@ var SelectContentImpl = React32.forwardRef(
                 onPointerDownOutside,
                 onFocusOutside: (event) => event.preventDefault(),
                 onDismiss: () => context.onOpenChange(false),
-                children: /* @__PURE__ */ jsx19(
+                children: /* @__PURE__ */ jsx18(
                   SelectPosition,
                   {
                     role: "listbox",
@@ -4852,18 +4818,18 @@ var SelectContentImpl = React32.forwardRef(
 );
 SelectContentImpl.displayName = CONTENT_IMPL_NAME;
 var ITEM_ALIGNED_POSITION_NAME = "SelectItemAlignedPosition";
-var SelectItemAlignedPosition = React32.forwardRef((props, forwardedRef) => {
+var SelectItemAlignedPosition = React31.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onPlaced, ...popperProps } = props;
   const context = useSelectContext(CONTENT_NAME2, __scopeSelect);
   const contentContext = useSelectContentContext(CONTENT_NAME2, __scopeSelect);
-  const [contentWrapper, setContentWrapper] = React32.useState(null);
-  const [content, setContent] = React32.useState(null);
+  const [contentWrapper, setContentWrapper] = React31.useState(null);
+  const [content, setContent] = React31.useState(null);
   const composedRefs = useComposedRefs(forwardedRef, (node) => setContent(node));
   const getItems = useCollection(__scopeSelect);
-  const shouldExpandOnScrollRef = React32.useRef(false);
-  const shouldRepositionRef = React32.useRef(true);
+  const shouldExpandOnScrollRef = React31.useRef(false);
+  const shouldRepositionRef = React31.useRef(true);
   const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
-  const position = React32.useCallback(() => {
+  const position = React31.useCallback(() => {
     if (context.trigger && context.valueNode && contentWrapper && content && viewport && selectedItem && selectedItemText) {
       const triggerRect = context.trigger.getBoundingClientRect();
       const contentRect = content.getBoundingClientRect();
@@ -4963,11 +4929,11 @@ var SelectItemAlignedPosition = React32.forwardRef((props, forwardedRef) => {
     onPlaced
   ]);
   useLayoutEffect2(() => position(), [position]);
-  const [contentZIndex, setContentZIndex] = React32.useState();
+  const [contentZIndex, setContentZIndex] = React31.useState();
   useLayoutEffect2(() => {
     if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
-  const handleScrollButtonChange = React32.useCallback(
+  const handleScrollButtonChange = React31.useCallback(
     (node) => {
       if (node && shouldRepositionRef.current === true) {
         position();
@@ -4977,14 +4943,14 @@ var SelectItemAlignedPosition = React32.forwardRef((props, forwardedRef) => {
     },
     [position, focusSelectedItem]
   );
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     SelectViewportProvider,
     {
       scope: __scopeSelect,
       contentWrapper,
       shouldExpandOnScrollRef,
       onScrollButtonChange: handleScrollButtonChange,
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx18(
         "div",
         {
           ref: setContentWrapper,
@@ -4994,8 +4960,8 @@ var SelectItemAlignedPosition = React32.forwardRef((props, forwardedRef) => {
             position: "fixed",
             zIndex: contentZIndex
           },
-          children: /* @__PURE__ */ jsx19(
-            Primitive2.div,
+          children: /* @__PURE__ */ jsx18(
+            Primitive.div,
             {
               ...popperProps,
               ref: composedRefs,
@@ -5016,7 +4982,7 @@ var SelectItemAlignedPosition = React32.forwardRef((props, forwardedRef) => {
 });
 SelectItemAlignedPosition.displayName = ITEM_ALIGNED_POSITION_NAME;
 var POPPER_POSITION_NAME = "SelectPopperPosition";
-var SelectPopperPosition = React32.forwardRef((props, forwardedRef) => {
+var SelectPopperPosition = React31.forwardRef((props, forwardedRef) => {
   const {
     __scopeSelect,
     align = "start",
@@ -5024,7 +4990,7 @@ var SelectPopperPosition = React32.forwardRef((props, forwardedRef) => {
     ...popperProps
   } = props;
   const popperScope = usePopperScope(__scopeSelect);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx18(
     Content,
     {
       ...popperScope,
@@ -5051,15 +5017,15 @@ var SelectPopperPosition = React32.forwardRef((props, forwardedRef) => {
 SelectPopperPosition.displayName = POPPER_POSITION_NAME;
 var [SelectViewportProvider, useSelectViewportContext] = createSelectContext(CONTENT_NAME2, {});
 var VIEWPORT_NAME = "SelectViewport";
-var SelectViewport = React32.forwardRef(
+var SelectViewport = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, nonce, ...viewportProps } = props;
     const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
     const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
     const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
-    const prevScrollTopRef = React32.useRef(0);
+    const prevScrollTopRef = React31.useRef(0);
     return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx18(
         "style",
         {
           dangerouslySetInnerHTML: {
@@ -5068,8 +5034,8 @@ var SelectViewport = React32.forwardRef(
           nonce
         }
       ),
-      /* @__PURE__ */ jsx19(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx19(
-        Primitive2.div,
+      /* @__PURE__ */ jsx18(Collection.Slot, { scope: __scopeSelect, children: /* @__PURE__ */ jsx18(
+        Primitive.div,
         {
           "data-radix-select-viewport": "",
           role: "presentation",
@@ -5120,26 +5086,26 @@ var SelectViewport = React32.forwardRef(
 SelectViewport.displayName = VIEWPORT_NAME;
 var GROUP_NAME = "SelectGroup";
 var [SelectGroupContextProvider, useSelectGroupContext] = createSelectContext(GROUP_NAME);
-var SelectGroup = React32.forwardRef(
+var SelectGroup = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...groupProps } = props;
     const groupId = useId();
-    return /* @__PURE__ */ jsx19(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx19(Primitive2.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
+    return /* @__PURE__ */ jsx18(SelectGroupContextProvider, { scope: __scopeSelect, id: groupId, children: /* @__PURE__ */ jsx18(Primitive.div, { role: "group", "aria-labelledby": groupId, ...groupProps, ref: forwardedRef }) });
   }
 );
 SelectGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "SelectLabel";
-var SelectLabel = React32.forwardRef(
+var SelectLabel = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...labelProps } = props;
     const groupContext = useSelectGroupContext(LABEL_NAME, __scopeSelect);
-    return /* @__PURE__ */ jsx19(Primitive2.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx18(Primitive.div, { id: groupContext.id, ...labelProps, ref: forwardedRef });
   }
 );
 SelectLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "SelectItem";
 var [SelectItemContextProvider, useSelectItemContext] = createSelectContext(ITEM_NAME);
-var SelectItem = React32.forwardRef(
+var SelectItem = React31.forwardRef(
   (props, forwardedRef) => {
     const {
       __scopeSelect,
@@ -5151,14 +5117,14 @@ var SelectItem = React32.forwardRef(
     const context = useSelectContext(ITEM_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ITEM_NAME, __scopeSelect);
     const isSelected = context.value === value;
-    const [textValue, setTextValue] = React32.useState(textValueProp ?? "");
-    const [isFocused, setIsFocused] = React32.useState(false);
+    const [textValue, setTextValue] = React31.useState(textValueProp ?? "");
+    const [isFocused, setIsFocused] = React31.useState(false);
     const composedRefs = useComposedRefs(
       forwardedRef,
       (node) => contentContext.itemRefCallback?.(node, value, disabled)
     );
     const textId = useId();
-    const pointerTypeRef = React32.useRef("touch");
+    const pointerTypeRef = React31.useRef("touch");
     const handleSelect = () => {
       if (!disabled) {
         context.onValueChange(value);
@@ -5170,7 +5136,7 @@ var SelectItem = React32.forwardRef(
         "A <Select.Item /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder."
       );
     }
-    return /* @__PURE__ */ jsx19(
+    return /* @__PURE__ */ jsx18(
       SelectItemContextProvider,
       {
         scope: __scopeSelect,
@@ -5178,18 +5144,18 @@ var SelectItem = React32.forwardRef(
         disabled,
         textId,
         isSelected,
-        onItemTextChange: React32.useCallback((node) => {
+        onItemTextChange: React31.useCallback((node) => {
           setTextValue((prevTextValue) => prevTextValue || (node?.textContent ?? "").trim());
         }, []),
-        children: /* @__PURE__ */ jsx19(
+        children: /* @__PURE__ */ jsx18(
           Collection.ItemSlot,
           {
             scope: __scopeSelect,
             value,
             disabled,
             textValue,
-            children: /* @__PURE__ */ jsx19(
-              Primitive2.div,
+            children: /* @__PURE__ */ jsx18(
+              Primitive.div,
               {
                 role: "option",
                 "aria-labelledby": textId,
@@ -5241,14 +5207,14 @@ var SelectItem = React32.forwardRef(
 );
 SelectItem.displayName = ITEM_NAME;
 var ITEM_TEXT_NAME = "SelectItemText";
-var SelectItemText = React32.forwardRef(
+var SelectItemText = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, className, style, ...itemTextProps } = props;
     const context = useSelectContext(ITEM_TEXT_NAME, __scopeSelect);
     const contentContext = useSelectContentContext(ITEM_TEXT_NAME, __scopeSelect);
     const itemContext = useSelectItemContext(ITEM_TEXT_NAME, __scopeSelect);
     const nativeOptionsContext = useSelectNativeOptionsContext(ITEM_TEXT_NAME, __scopeSelect);
-    const [itemTextNode, setItemTextNode] = React32.useState(null);
+    const [itemTextNode, setItemTextNode] = React31.useState(null);
     const composedRefs = useComposedRefs(
       forwardedRef,
       (node) => setItemTextNode(node),
@@ -5256,8 +5222,8 @@ var SelectItemText = React32.forwardRef(
       (node) => contentContext.itemTextRefCallback?.(node, itemContext.value, itemContext.disabled)
     );
     const textContent = itemTextNode?.textContent;
-    const nativeOption = React32.useMemo(
-      () => /* @__PURE__ */ jsx19("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
+    const nativeOption = React31.useMemo(
+      () => /* @__PURE__ */ jsx18("option", { value: itemContext.value, disabled: itemContext.disabled, children: textContent }, itemContext.value),
       [itemContext.disabled, itemContext.value, textContent]
     );
     const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
@@ -5266,26 +5232,26 @@ var SelectItemText = React32.forwardRef(
       return () => onNativeOptionRemove(nativeOption);
     }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
     return /* @__PURE__ */ jsxs4(Fragment3, { children: [
-      /* @__PURE__ */ jsx19(Primitive2.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
-      itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM5.createPortal(itemTextProps.children, context.valueNode) : null
+      /* @__PURE__ */ jsx18(Primitive.span, { id: itemContext.textId, ...itemTextProps, ref: composedRefs }),
+      itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? ReactDOM4.createPortal(itemTextProps.children, context.valueNode) : null
     ] });
   }
 );
 SelectItemText.displayName = ITEM_TEXT_NAME;
 var ITEM_INDICATOR_NAME = "SelectItemIndicator";
-var SelectItemIndicator = React32.forwardRef(
+var SelectItemIndicator = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...itemIndicatorProps } = props;
     const itemContext = useSelectItemContext(ITEM_INDICATOR_NAME, __scopeSelect);
-    return itemContext.isSelected ? /* @__PURE__ */ jsx19(Primitive2.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
+    return itemContext.isSelected ? /* @__PURE__ */ jsx18(Primitive.span, { "aria-hidden": true, ...itemIndicatorProps, ref: forwardedRef }) : null;
   }
 );
 SelectItemIndicator.displayName = ITEM_INDICATOR_NAME;
 var SCROLL_UP_BUTTON_NAME = "SelectScrollUpButton";
-var SelectScrollUpButton = React32.forwardRef((props, forwardedRef) => {
+var SelectScrollUpButton = React31.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollUp, setCanScrollUp] = React32.useState(false);
+  const [canScrollUp, setCanScrollUp] = React31.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect2(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -5300,7 +5266,7 @@ var SelectScrollUpButton = React32.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollUp ? /* @__PURE__ */ jsx19(
+  return canScrollUp ? /* @__PURE__ */ jsx18(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -5316,10 +5282,10 @@ var SelectScrollUpButton = React32.forwardRef((props, forwardedRef) => {
 });
 SelectScrollUpButton.displayName = SCROLL_UP_BUTTON_NAME;
 var SCROLL_DOWN_BUTTON_NAME = "SelectScrollDownButton";
-var SelectScrollDownButton = React32.forwardRef((props, forwardedRef) => {
+var SelectScrollDownButton = React31.forwardRef((props, forwardedRef) => {
   const contentContext = useSelectContentContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
-  const [canScrollDown, setCanScrollDown] = React32.useState(false);
+  const [canScrollDown, setCanScrollDown] = React31.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
   useLayoutEffect2(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
@@ -5335,7 +5301,7 @@ var SelectScrollDownButton = React32.forwardRef((props, forwardedRef) => {
       return () => viewport.removeEventListener("scroll", handleScroll22);
     }
   }, [contentContext.viewport, contentContext.isPositioned]);
-  return canScrollDown ? /* @__PURE__ */ jsx19(
+  return canScrollDown ? /* @__PURE__ */ jsx18(
     SelectScrollButtonImpl,
     {
       ...props,
@@ -5350,26 +5316,26 @@ var SelectScrollDownButton = React32.forwardRef((props, forwardedRef) => {
   ) : null;
 });
 SelectScrollDownButton.displayName = SCROLL_DOWN_BUTTON_NAME;
-var SelectScrollButtonImpl = React32.forwardRef((props, forwardedRef) => {
+var SelectScrollButtonImpl = React31.forwardRef((props, forwardedRef) => {
   const { __scopeSelect, onAutoScroll, ...scrollIndicatorProps } = props;
   const contentContext = useSelectContentContext("SelectScrollButton", __scopeSelect);
-  const autoScrollTimerRef = React32.useRef(null);
+  const autoScrollTimerRef = React31.useRef(null);
   const getItems = useCollection(__scopeSelect);
-  const clearAutoScrollTimer = React32.useCallback(() => {
+  const clearAutoScrollTimer = React31.useCallback(() => {
     if (autoScrollTimerRef.current !== null) {
       window.clearInterval(autoScrollTimerRef.current);
       autoScrollTimerRef.current = null;
     }
   }, []);
-  React32.useEffect(() => {
+  React31.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
   useLayoutEffect2(() => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
-  return /* @__PURE__ */ jsx19(
-    Primitive2.div,
+  return /* @__PURE__ */ jsx18(
+    Primitive.div,
     {
       "aria-hidden": true,
       ...scrollIndicatorProps,
@@ -5393,31 +5359,31 @@ var SelectScrollButtonImpl = React32.forwardRef((props, forwardedRef) => {
   );
 });
 var SEPARATOR_NAME = "SelectSeparator";
-var SelectSeparator = React32.forwardRef(
+var SelectSeparator = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...separatorProps } = props;
-    return /* @__PURE__ */ jsx19(Primitive2.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
+    return /* @__PURE__ */ jsx18(Primitive.div, { "aria-hidden": true, ...separatorProps, ref: forwardedRef });
   }
 );
 SelectSeparator.displayName = SEPARATOR_NAME;
 var ARROW_NAME2 = "SelectArrow";
-var SelectArrow = React32.forwardRef(
+var SelectArrow = React31.forwardRef(
   (props, forwardedRef) => {
     const { __scopeSelect, ...arrowProps } = props;
     const popperScope = usePopperScope(__scopeSelect);
     const context = useSelectContext(ARROW_NAME2, __scopeSelect);
     const contentContext = useSelectContentContext(ARROW_NAME2, __scopeSelect);
-    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx19(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
+    return context.open && contentContext.position === "popper" ? /* @__PURE__ */ jsx18(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef }) : null;
   }
 );
 SelectArrow.displayName = ARROW_NAME2;
 var BUBBLE_INPUT_NAME = "SelectBubbleInput";
-var SelectBubbleInput = React32.forwardRef(
+var SelectBubbleInput = React31.forwardRef(
   ({ __scopeSelect, value, ...props }, forwardedRef) => {
-    const ref = React32.useRef(null);
+    const ref = React31.useRef(null);
     const composedRefs = useComposedRefs(forwardedRef, ref);
     const prevValue = usePrevious(value);
-    React32.useEffect(() => {
+    React31.useEffect(() => {
       const select = ref.current;
       if (!select) return;
       const selectProto = window.HTMLSelectElement.prototype;
@@ -5432,8 +5398,8 @@ var SelectBubbleInput = React32.forwardRef(
         select.dispatchEvent(event);
       }
     }, [prevValue, value]);
-    return /* @__PURE__ */ jsx19(
-      Primitive2.select,
+    return /* @__PURE__ */ jsx18(
+      Primitive.select,
       {
         ...props,
         style: { ...VISUALLY_HIDDEN_STYLES, ...props.style },
@@ -5449,9 +5415,9 @@ function shouldShowPlaceholder(value) {
 }
 function useTypeaheadSearch(onSearchChange) {
   const handleSearchChange = useCallbackRef(onSearchChange);
-  const searchRef = React32.useRef("");
-  const timerRef = React32.useRef(0);
-  const handleTypeaheadSearch = React32.useCallback(
+  const searchRef = React31.useRef("");
+  const timerRef = React31.useRef(0);
+  const handleTypeaheadSearch = React31.useCallback(
     (key) => {
       const search = searchRef.current + key;
       handleSearchChange(search);
@@ -5463,11 +5429,11 @@ function useTypeaheadSearch(onSearchChange) {
     },
     [handleSearchChange]
   );
-  const resetTypeahead = React32.useCallback(() => {
+  const resetTypeahead = React31.useCallback(() => {
     searchRef.current = "";
     window.clearTimeout(timerRef.current);
   }, []);
-  React32.useEffect(() => {
+  React31.useEffect(() => {
     return () => window.clearTimeout(timerRef.current);
   }, []);
   return [searchRef, handleTypeaheadSearch, resetTypeahead];
@@ -5502,16 +5468,16 @@ var ScrollDownButton = SelectScrollDownButton;
 
 // shadcn/select.tsx
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
 function Select2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(Root23, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx19(Root23, { "data-slot": "select", ...props });
 }
 function SelectValue2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx19(Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger2({
   className,
@@ -5531,7 +5497,7 @@ function SelectTrigger2({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx20(Icon, { asChild: true, children: /* @__PURE__ */ jsx20(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+        /* @__PURE__ */ jsx19(Icon, { asChild: true, children: /* @__PURE__ */ jsx19(ChevronDownIcon, { className: "size-4 opacity-50" }) })
       ]
     }
   );
@@ -5543,7 +5509,7 @@ function SelectContent2({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(Portal2, { children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx19(Portal2, { children: /* @__PURE__ */ jsxs5(
     Content2,
     {
       "data-slot": "select-content",
@@ -5556,8 +5522,8 @@ function SelectContent2({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx20(SelectScrollUpButton2, {}),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(SelectScrollUpButton2, {}),
+        /* @__PURE__ */ jsx19(
           Viewport,
           {
             className: cn(
@@ -5567,7 +5533,7 @@ function SelectContent2({
             children
           }
         ),
-        /* @__PURE__ */ jsx20(SelectScrollDownButton2, {})
+        /* @__PURE__ */ jsx19(SelectScrollDownButton2, {})
       ]
     }
   ) });
@@ -5587,15 +5553,15 @@ function SelectItem2({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx19(
           "span",
           {
             "data-slot": "select-item-indicator",
             className: "absolute right-2 flex size-3.5 items-center justify-center",
-            children: /* @__PURE__ */ jsx20(ItemIndicator, { children: /* @__PURE__ */ jsx20(CheckIcon, { className: "size-4" }) })
+            children: /* @__PURE__ */ jsx19(ItemIndicator, { children: /* @__PURE__ */ jsx19(CheckIcon, { className: "size-4" }) })
           }
         ),
-        /* @__PURE__ */ jsx20(ItemText, { children })
+        /* @__PURE__ */ jsx19(ItemText, { children })
       ]
     }
   );
@@ -5604,7 +5570,7 @@ function SelectScrollUpButton2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -5613,7 +5579,7 @@ function SelectScrollUpButton2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx20(ChevronUpIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx19(ChevronUpIcon, { className: "size-4" })
     }
   );
 }
@@ -5621,7 +5587,7 @@ function SelectScrollDownButton2({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx19(
     ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -5630,13 +5596,13 @@ function SelectScrollDownButton2({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx20(ChevronDownIcon, { className: "size-4" })
+      children: /* @__PURE__ */ jsx19(ChevronDownIcon, { className: "size-4" })
     }
   );
 }
 
 // fields/EntryBoundTextField.tsx
-import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function isEntryBoundValue(value) {
   return typeof value === "object" && value !== null && "useEntry" in value;
 }
@@ -5693,8 +5659,8 @@ function EntryBoundTextField({
   const hasEntries = entryNames.length > 0;
   return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium", children: label }),
-      hasEntries && /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium", children: label }),
+      hasEntries && /* @__PURE__ */ jsx20(
         Toggle,
         {
           pressed: isUsingEntry,
@@ -5716,8 +5682,8 @@ function EntryBoundTextField({
             onValueChange: handleEntryChange,
             disabled,
             children: [
-              /* @__PURE__ */ jsx21(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ jsx21(SelectValue2, { placeholder: "Select entry" }) }),
-              /* @__PURE__ */ jsx21(SelectContent2, { children: entryNames.map((name) => /* @__PURE__ */ jsx21(SelectItem2, { value: name, children: name }, name)) })
+              /* @__PURE__ */ jsx20(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ jsx20(SelectValue2, { placeholder: "Select entry" }) }),
+              /* @__PURE__ */ jsx20(SelectContent2, { children: entryNames.map((name) => /* @__PURE__ */ jsx20(SelectItem2, { value: name, children: name }, name)) })
             ]
           }
         ),
@@ -5728,17 +5694,17 @@ function EntryBoundTextField({
             onValueChange: handleFieldChange,
             disabled: disabled || !currentEntryName,
             children: [
-              /* @__PURE__ */ jsx21(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ jsx21(SelectValue2, { placeholder: "Select field" }) }),
-              /* @__PURE__ */ jsx21(SelectContent2, { children: availableFields.map((field) => /* @__PURE__ */ jsx21(SelectItem2, { value: field, children: field }, field)) })
+              /* @__PURE__ */ jsx20(SelectTrigger2, { className: "flex-1", children: /* @__PURE__ */ jsx20(SelectValue2, { placeholder: "Select field" }) }),
+              /* @__PURE__ */ jsx20(SelectContent2, { children: availableFields.map((field) => /* @__PURE__ */ jsx20(SelectItem2, { value: field, children: field }, field)) })
             ]
           }
         )
       ] }),
       resolvedValue && /* @__PURE__ */ jsxs6("div", { className: "bg-muted rounded-md p-2", children: [
-        /* @__PURE__ */ jsx21(Label, { className: "text-muted-foreground text-xs", children: "Preview" }),
-        /* @__PURE__ */ jsx21("p", { className: "text-sm", children: resolvedValue })
+        /* @__PURE__ */ jsx20(Label, { className: "text-muted-foreground text-xs", children: "Preview" }),
+        /* @__PURE__ */ jsx20("p", { className: "text-sm", children: resolvedValue })
       ] })
-    ] }) : /* @__PURE__ */ jsx21(
+    ] }) : /* @__PURE__ */ jsx20(
       Input,
       {
         value: resolvedValue,
@@ -5757,7 +5723,7 @@ function createEntryBoundTextField(label, placeholder) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx21(
+    }) => /* @__PURE__ */ jsx20(
       EntryBoundTextField,
       {
         value,
@@ -5772,7 +5738,7 @@ function createEntryBoundTextField(label, placeholder) {
 
 // fields/ResponsiveToggleField.tsx
 import { Monitor, Smartphone } from "lucide-react";
-import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 var breakpoints = [
   { key: "mobile", label: "Mobile", icon: Smartphone },
   { key: "desktop", label: "Desktop", icon: Monitor }
@@ -5794,8 +5760,8 @@ function ResponsiveToggleField({
     });
   };
   return /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx23(Label, { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsx23("div", { className: "flex gap-2", children: breakpoints.map(({ key, label: bpLabel, icon: Icon2 }) => /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsx21(Label, { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx21("div", { className: "flex gap-2", children: breakpoints.map(({ key, label: bpLabel, icon: Icon2 }) => /* @__PURE__ */ jsxs7(
       "button",
       {
         type: "button",
@@ -5807,13 +5773,13 @@ function ResponsiveToggleField({
         ),
         "aria-label": `${bpLabel} visibility`,
         children: [
-          /* @__PURE__ */ jsx23(Icon2, { className: "size-5" }),
-          /* @__PURE__ */ jsx23("span", { className: "text-xs font-medium", children: bpLabel })
+          /* @__PURE__ */ jsx21(Icon2, { className: "size-5" }),
+          /* @__PURE__ */ jsx21("span", { className: "text-xs font-medium", children: bpLabel })
         ]
       },
       key
     )) }),
-    /* @__PURE__ */ jsx23("p", { className: "text-muted-foreground text-xs", children: !visibility.mobile && !visibility.desktop ? "Hidden on all devices" : `Visible on ${[
+    /* @__PURE__ */ jsx21("p", { className: "text-muted-foreground text-xs", children: !visibility.mobile && !visibility.desktop ? "Hidden on all devices" : `Visible on ${[
       visibility.mobile && "mobile",
       visibility.desktop && "desktop"
     ].filter(Boolean).join(" & ")}` })
@@ -5821,7 +5787,7 @@ function ResponsiveToggleField({
 }
 
 // fields/ShadowField.tsx
-import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 function ShadowField({
   value,
   onChangeAction,
@@ -5830,8 +5796,8 @@ function ShadowField({
 }) {
   const currentValue = value ?? "none";
   return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx24(Label, { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsx24("div", { className: "grid grid-cols-4 gap-2", children: shadowPresets.map((preset) => /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx23(Label, { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx23("div", { className: "grid grid-cols-4 gap-2", children: shadowPresets.map((preset) => /* @__PURE__ */ jsxs8(
       Button,
       {
         type: "button",
@@ -5844,14 +5810,14 @@ function ShadowField({
           currentValue === preset.value && "ring-ring ring-2"
         ),
         children: [
-          /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: "bg-background size-8 rounded",
               style: { boxShadow: preset.css }
             }
           ),
-          /* @__PURE__ */ jsx24("span", { className: "text-xs", children: preset.label })
+          /* @__PURE__ */ jsx23("span", { className: "text-xs", children: preset.label })
         ]
       },
       preset.value
@@ -5862,7 +5828,7 @@ function ShadowField({
 // fields/SpacingSliderField.tsx
 import { useState as useState15 } from "react";
 import { Magnet as Magnet2 } from "lucide-react";
-import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
 var MAX_VALUE2 = spacingScale[spacingScale.length - 1].value;
 function SpacingSliderField({
   value,
@@ -5904,8 +5870,8 @@ function SpacingSliderField({
   const displayLabel = matchingPreset?.label ?? "Custom";
   return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-3", children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx25(Label, { className: "text-sm font-medium", children: label }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24(Label, { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ jsx24(
         Toggle,
         {
           pressed: quantized,
@@ -5914,13 +5880,13 @@ function SpacingSliderField({
           variant: "outline",
           "aria-label": "Snap to grid",
           title: quantized ? "Snap to grid (on)" : "Snap to grid (off)",
-          children: /* @__PURE__ */ jsx25(Magnet2, { className: "size-3.5" })
+          children: /* @__PURE__ */ jsx24(Magnet2, { className: "size-3.5" })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx25("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx24("span", { className: "text-muted-foreground flex-1 text-sm", children: displayLabel }),
+      /* @__PURE__ */ jsx24(
         Input,
         {
           type: "number",
@@ -5932,9 +5898,9 @@ function SpacingSliderField({
           max: MAX_VALUE2
         }
       ),
-      /* @__PURE__ */ jsx25("span", { className: "text-muted-foreground text-xs", children: "px" })
+      /* @__PURE__ */ jsx24("span", { className: "text-muted-foreground text-xs", children: "px" })
     ] }),
-    /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24(
       Slider,
       {
         value: [currentValue],
@@ -5945,7 +5911,7 @@ function SpacingSliderField({
         disabled
       }
     ),
-    /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-1", children: spacingScale.filter((_, i) => i % 2 === 0 || i === spacingScale.length - 1).map((preset) => /* @__PURE__ */ jsx25(
+    /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-1", children: spacingScale.filter((_, i) => i % 2 === 0 || i === spacingScale.length - 1).map((preset) => /* @__PURE__ */ jsx24(
       Button,
       {
         type: "button",
@@ -5961,7 +5927,7 @@ function SpacingSliderField({
 }
 
 // fields/ThemeableColorField.tsx
-import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 function isThemeableValue(value) {
   return typeof value === "object" && value !== null && "useTheme" in value;
 }
@@ -5988,8 +5954,8 @@ function ThemeableColorField({
   };
   return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx26("span", { className: "text-sm font-medium", children: label }),
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx25("span", { className: "text-sm font-medium", children: label }),
+      /* @__PURE__ */ jsx25(
         Toggle,
         {
           pressed: isUsingTheme,
@@ -6003,7 +5969,7 @@ function ThemeableColorField({
       )
     ] }),
     isUsingTheme ? /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 rounded-md border p-2", children: [
-      /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsx25(
         "div",
         {
           className: "size-6 shrink-0 rounded border",
@@ -6016,7 +5982,7 @@ function ThemeableColorField({
         "Theme: ",
         themeKey
       ] })
-    ] }) : /* @__PURE__ */ jsx26(
+    ] }) : /* @__PURE__ */ jsx25(
       ColorPickerField,
       {
         value: customValue,
@@ -6035,7 +6001,7 @@ function createThemeableColorField(label, themeKey) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx26(
+    }) => /* @__PURE__ */ jsx25(
       ThemeableColorField,
       {
         value,
@@ -6049,7 +6015,7 @@ function createThemeableColorField(label, themeKey) {
 }
 
 // fields/TypographyField.tsx
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 function TypographyField({
   value,
   onChangeAction,
@@ -6081,8 +6047,8 @@ function TypographyField({
     });
   };
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3", children: [
-    /* @__PURE__ */ jsx27(Label, { className: "text-sm font-medium", children: label }),
-    /* @__PURE__ */ jsx27(
+    /* @__PURE__ */ jsx26(Label, { className: "text-sm font-medium", children: label }),
+    /* @__PURE__ */ jsx26(
       "div",
       {
         className: "bg-muted rounded-md p-3 text-center",
@@ -6095,7 +6061,7 @@ function TypographyField({
       }
     ),
     /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx27(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Family" }),
+      /* @__PURE__ */ jsx26(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Family" }),
       /* @__PURE__ */ jsxs11(
         Select2,
         {
@@ -6103,8 +6069,8 @@ function TypographyField({
           onValueChange: handleFamilyChange,
           disabled,
           children: [
-            /* @__PURE__ */ jsx27(SelectTrigger2, { className: "h-8", children: /* @__PURE__ */ jsx27(SelectValue2, {}) }),
-            /* @__PURE__ */ jsx27(SelectContent2, { children: fontFamilies.map((font) => /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx26(SelectTrigger2, { className: "h-8", children: /* @__PURE__ */ jsx26(SelectValue2, {}) }),
+            /* @__PURE__ */ jsx26(SelectContent2, { children: fontFamilies.map((font) => /* @__PURE__ */ jsx26(
               SelectItem2,
               {
                 value: font.value,
@@ -6118,8 +6084,8 @@ function TypographyField({
       )
     ] }),
     /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx27(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Size" }),
-      /* @__PURE__ */ jsx27("div", { className: "flex flex-wrap gap-1", children: fontSizes.map((size4) => /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Size" }),
+      /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1", children: fontSizes.map((size4) => /* @__PURE__ */ jsx26(
         Button,
         {
           type: "button",
@@ -6133,8 +6099,8 @@ function TypographyField({
       )) })
     ] }),
     /* @__PURE__ */ jsxs11("div", { children: [
-      /* @__PURE__ */ jsx27(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Weight" }),
-      /* @__PURE__ */ jsx27("div", { className: "flex flex-wrap gap-1", children: fontWeights.map((weight) => /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx26(Label, { className: "text-muted-foreground mb-1.5 text-xs", children: "Weight" }),
+      /* @__PURE__ */ jsx26("div", { className: "flex flex-wrap gap-1", children: fontWeights.map((weight) => /* @__PURE__ */ jsx26(
         Button,
         {
           type: "button",
@@ -6151,7 +6117,7 @@ function TypographyField({
 }
 
 // fields/index.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function createColorField(label) {
   return {
     type: "custom",
@@ -6160,7 +6126,7 @@ function createColorField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       ColorPickerField,
       {
         value,
@@ -6179,7 +6145,7 @@ function createSpacingField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       SpacingSliderField,
       {
         value,
@@ -6198,7 +6164,7 @@ function createShadowField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       ShadowField,
       {
         value,
@@ -6217,7 +6183,7 @@ function createBorderRadiusField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       BorderRadiusField,
       {
         value,
@@ -6236,7 +6202,7 @@ function createTypographyField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       TypographyField,
       {
         value,
@@ -6255,7 +6221,7 @@ function createResponsiveField(label) {
       value,
       onChange,
       readOnly
-    }) => /* @__PURE__ */ jsx28(
+    }) => /* @__PURE__ */ jsx27(
       ResponsiveToggleField,
       {
         value,