@timeax/form-palette 0.0.15 → 0.0.17

package/dist/index.js

@@ -1179,11 +1179,11 @@ var init_parseHeaders = __esm({
 function normalizeHeader(header) {
   return header && String(header).trim().toLowerCase();
 }
-function normalizeValue(value) {
+function normalizeValue2(value) {
   if (value === false || value == null) {
     return value;
   }
-  return utils_default.isArray(value) ? value.map(normalizeValue) : String(value);
+  return utils_default.isArray(value) ? value.map(normalizeValue2) : String(value);
 }
 function parseTokens(str) {
   const tokens = /* @__PURE__ */ Object.create(null);
@@ -1245,7 +1245,7 @@ var init_AxiosHeaders = __esm({
           }
           const key = utils_default.findKey(self2, lHeader);
           if (!key || self2[key] === void 0 || _rewrite === true || _rewrite === void 0 && self2[key] !== false) {
-            self2[key || _header] = normalizeValue(_value);
+            self2[key || _header] = normalizeValue2(_value);
           }
         }
         const setHeaders = (headers, _rewrite) => utils_default.forEach(headers, (_value, _header) => setHeader(_value, _header, _rewrite));
@@ -1336,7 +1336,7 @@ var init_AxiosHeaders = __esm({
         utils_default.forEach(this, (value, header) => {
           const key = utils_default.findKey(headers, header);
           if (key) {
-            self2[key] = normalizeValue(value);
+            self2[key] = normalizeValue2(value);
             delete self2[header];
             return;
           }
@@ -1344,7 +1344,7 @@ var init_AxiosHeaders = __esm({
           if (normalized !== header) {
             delete self2[header];
           }
-          self2[normalized] = normalizeValue(value);
+          self2[normalized] = normalizeValue2(value);
           headers[normalized] = true;
         });
         return this;
@@ -14089,516 +14089,6 @@ function CoreRoot(props) {
     children
   ] });
 }
-function CoreShell(props) {
-  if (props.wrapped) {
-    const {
-      formProps: formProps2,
-      children: children2,
-      wrapped,
-      // eslint-disable-line @typescript-eslint/no-unused-vars
-      gap,
-      contentClassName,
-      ...coreProps2
-    } = props;
-    const content = /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: contentClassName,
-        style: gap !== void 0 ? { gap } : void 0,
-        children: children2
-      }
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(CoreProvider, { ...coreProps2, children: /* @__PURE__ */ jsxRuntime.jsx(CoreRoot, { ...formProps2 != null ? formProps2 : {}, children: content }) });
-  }
-  const { formProps, children, ...coreProps } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(CoreProvider, { ...coreProps, children: /* @__PURE__ */ jsxRuntime.jsx(CoreRoot, { ...formProps != null ? formProps : {}, children }) });
-}
-function useButton(options) {
-  const form = useCoreContext();
-  const { name, submit, disabled: disabledProp = false, onClick } = options;
-  const [loading, setLoadingState] = React54__namespace.useState(false);
-  const [disabled, setDisabledState] = React54__namespace.useState(
-    Boolean(disabledProp)
-  );
-  const ref = React54__namespace.useRef(null);
-  const optsRef = React54__namespace.useRef(options);
-  React54__namespace.useEffect(() => {
-    optsRef.current = options;
-  }, [options]);
-  const buttonRef = React54__namespace.useRef(null);
-  if (!buttonRef.current) {
-    const btn = {
-      name,
-      // Accessor for "loading" as required by ButtonRef
-      set loading(v) {
-        setLoadingState(v);
-      },
-      // Accessor for "disable" (note: interface uses `disable`, not `disabled`)
-      //@ts-ignore
-      set disable(v) {
-        setDisabledState(v);
-      },
-      // Extra properties used by CoreProvider via any-casts
-      get loading() {
-        return loading;
-      },
-      setDisabled(v) {
-        setDisabledState(v);
-      },
-      get disabled() {
-        return disabled;
-      },
-      ref
-    };
-    btn.setLoading = (v) => {
-      setLoadingState(v);
-    };
-    buttonRef.current = btn;
-  }
-  React54__namespace.useEffect(() => {
-    if (!buttonRef.current) return;
-    buttonRef.current.name = name;
-  }, [name]);
-  React54__namespace.useEffect(() => {
-    if (!buttonRef.current) return;
-    form.button = buttonRef.current;
-    return () => {
-      const anyForm = form;
-      if (anyForm.button === buttonRef.current) {
-        anyForm.button = null;
-      }
-    };
-  }, [form]);
-  const handleClick = (event) => {
-    const currentOpts = optsRef.current;
-    const shouldSubmit = !!currentOpts.submit;
-    if (currentOpts.onClick) {
-      currentOpts.onClick(event, form);
-    }
-    if (event.defaultPrevented) {
-      return;
-    }
-    if (shouldSubmit) {
-      form.setActiveButton(currentOpts.name);
-      form.go();
-    }
-  };
-  const setLoading = (v) => {
-    setLoadingState(v);
-  };
-  const setDisabled = (v) => {
-    setDisabledState(v);
-  };
-  return {
-    loading,
-    setLoading,
-    disabled,
-    setDisabled,
-    ref,
-    onClick: handleClick,
-    buttonProps: {
-      ref,
-      disabled: disabled || loading,
-      "data-loading": loading ? "true" : "false",
-      onClick: handleClick
-    }
-  };
-}
-function useField(options) {
-  var _a;
-  const form = useCoreContext();
-  const {
-    name: rawName,
-    bindId: rawBindId,
-    bind: bind2,
-    shared,
-    groupId,
-    alias,
-    main,
-    ignore,
-    required: requiredProp = false,
-    defaultValue,
-    disabled: disabledProp = false,
-    readOnly: readOnlyProp = false,
-    validate,
-    getOriginalValue,
-    onValueChange
-  } = options;
-  const ref = React54__namespace.useRef(null);
-  const stateRef = React54__namespace.useRef({
-    value: defaultValue,
-    error: "",
-    loading: false,
-    original: getOriginalValue ? getOriginalValue(defaultValue) : defaultValue
-  });
-  const [value, setValueState] = React54__namespace.useState(
-    stateRef.current.value
-  );
-  const [error, setErrorState] = React54__namespace.useState(
-    stateRef.current.error
-  );
-  const [loading, setLoadingState] = React54__namespace.useState(
-    stateRef.current.loading
-  );
-  const [required, setRequired] = React54__namespace.useState(
-    Boolean(requiredProp)
-  );
-  const [disabled, setDisabled] = React54__namespace.useState(
-    Boolean(disabledProp)
-  );
-  const [readOnly, setReadOnly] = React54__namespace.useState(
-    Boolean(readOnlyProp)
-  );
-  const id = React54__namespace.useId();
-  const keyRef = React54__namespace.useRef((() => {
-    if (rawName && rawName.trim()) return `${rawName.trim()}-${id}`;
-    if (rawBindId && rawBindId.trim()) return `${rawBindId.trim()}-${id}`;
-    return `field-${Math.random().toString(36).slice(2)}-${id}`;
-  })());
-  const bindIdRef = React54__namespace.useRef(
-    rawBindId && rawBindId.trim() || keyRef.current
-  );
-  const fieldRef = React54__namespace.useRef(null);
-  if (!fieldRef.current) {
-    const key = keyRef.current;
-    const bindId = bindIdRef.current;
-    const trimmedName = (_a = rawName == null ? void 0 : rawName.trim()) != null ? _a : "";
-    const validateFn = (report) => {
-      const curDisabled = disabled || readOnly;
-      if (curDisabled && !report) {
-        return true;
-      }
-      const current = stateRef.current.value;
-      let ok = true;
-      let message2 = "";
-      if (required && (current === void 0 || current === null || typeof current === "string" && current.trim() === "" || Array.isArray(current) && current.length === 0)) {
-        ok = false;
-        message2 = "This field is required.";
-      } else if (validate) {
-        const result = validate(current, !!report);
-        if (typeof result === "string") {
-          ok = false;
-          message2 = result;
-        } else if (result === false) {
-          ok = false;
-        }
-      }
-      if (!report) {
-        return ok;
-      }
-      stateRef.current.error = ok ? "" : message2;
-      setErrorState(ok ? "" : message2);
-      return ok;
-    };
-    const f = {
-      key,
-      bindId,
-      bind: bind2,
-      name: trimmedName,
-      shared,
-      groupId,
-      alias,
-      main,
-      ignore,
-      required,
-      ref,
-      get defaultValue() {
-        return stateRef.current.original;
-      },
-      get value() {
-        return stateRef.current.value;
-      },
-      set value(v) {
-        stateRef.current.value = v;
-        setValueState(v);
-      },
-      get originalValue() {
-        return stateRef.current.original;
-      },
-      get error() {
-        return stateRef.current.error;
-      },
-      set error(msg) {
-        stateRef.current.error = msg;
-        setErrorState(msg);
-      },
-      get loading() {
-        return stateRef.current.loading;
-      },
-      set loading(v) {
-        stateRef.current.loading = v;
-        setLoadingState(v);
-      },
-      validate: validateFn,
-      onChange(value2, old, variant) {
-        if (onValueChange) {
-          onValueChange(value2, old, variant);
-        }
-      }
-      // Flags not directly on the Field interface but used via `as any`
-      // in core-provider (getValue/setValue/reset).
-    };
-    f.getValue = () => stateRef.current.value;
-    f.setValue = (next) => {
-      stateRef.current.value = next;
-      setValueState(next);
-    };
-    f.reset = () => {
-      stateRef.current.value = defaultValue;
-      stateRef.current.error = "";
-      stateRef.current.loading = false;
-      setValueState(defaultValue);
-      setErrorState("");
-      setLoadingState(false);
-    };
-    fieldRef.current = f;
-  }
-  const field = fieldRef.current;
-  React54__namespace.useEffect(() => {
-    setRequired(!!requiredProp);
-    if (field) {
-      field.required = !!requiredProp;
-    }
-  }, [requiredProp, field]);
-  React54__namespace.useEffect(() => {
-    setDisabled(!!disabledProp);
-  }, [disabledProp]);
-  React54__namespace.useEffect(() => {
-    setReadOnly(!!readOnlyProp);
-  }, [readOnlyProp]);
-  React54__namespace.useEffect(() => {
-    if (!field) return;
-    form.addField(field);
-    return () => {
-      const registry3 = form.inputs;
-      if (registry3 && typeof registry3.remove === "function") {
-        registry3.remove(field.key);
-      }
-    };
-  }, [form, field]);
-  function setValue(next, variant = "direct") {
-    var _a2;
-    const prev = stateRef.current.value;
-    if (Object.is(prev, next)) return;
-    const runFormOnChange = () => {
-      var _a3;
-      const props2 = (_a3 = form.props) != null ? _a3 : {};
-      const fn = props2.onChange;
-      if (!fn) return;
-      fn(form, field, {
-        variant,
-        value: next,
-        previous: prev
-      });
-    };
-    const props = (_a2 = form.props) != null ? _a2 : {};
-    const changeBefore = !!props.changeBefore;
-    if (changeBefore) {
-      runFormOnChange();
-    }
-    stateRef.current.value = next;
-    setValueState(next);
-    if (field.onChange) {
-      field.onChange(next, prev, variant);
-    }
-    if (!changeBefore) {
-      runFormOnChange();
-    }
-    form.controlButton();
-  }
-  function setError(message2) {
-    stateRef.current.error = message2;
-    setErrorState(message2);
-  }
-  function setLoading(loading2) {
-    stateRef.current.loading = loading2;
-    setLoadingState(loading2);
-  }
-  return {
-    ref,
-    get key() {
-      return keyRef.current;
-    },
-    value,
-    setValue,
-    error,
-    setError,
-    loading,
-    setLoading,
-    required,
-    setRequired,
-    disabled,
-    setDisabled,
-    readOnly,
-    setReadOnly,
-    name: field.name,
-    bindId: field.bindId,
-    bind: field.bind,
-    shared: field.shared,
-    groupId: field.groupId,
-    alias: field.alias,
-    main: field.main,
-    ignore: field.ignore,
-    get defaultValue() {
-      return stateRef.current.original;
-    },
-    get originalValue() {
-      return stateRef.current.original;
-    },
-    form,
-    validate(report) {
-      var _a2;
-      return (_a2 = field.validate) == null ? void 0 : _a2.call(field, report);
-    }
-  };
-}
-function useOptionalField(options) {
-  var _a;
-  try {
-    return useField(options);
-  } catch {
-  }
-  {
-    console.warn(
-      "[FormPalette] useOptionalField: No CoreProvider found. Running in self-managed mode."
-    );
-  }
-  const {
-    name: rawName,
-    bindId: rawBindId,
-    bind: bind2,
-    shared,
-    groupId,
-    alias,
-    main,
-    ignore,
-    required: requiredProp = false,
-    defaultValue,
-    disabled: disabledProp = false,
-    readOnly: readOnlyProp = false,
-    validate,
-    getOriginalValue,
-    onValueChange
-  } = options;
-  const ref = React54__namespace.useRef(null);
-  const [value, setValueState] = React54__namespace.useState(defaultValue);
-  const [error, setErrorState] = React54__namespace.useState("");
-  const [loading, setLoadingState] = React54__namespace.useState(false);
-  const [required, setRequired] = React54__namespace.useState(!!requiredProp);
-  const [disabled, setDisabled] = React54__namespace.useState(!!disabledProp);
-  const [readOnly, setReadOnly] = React54__namespace.useState(!!readOnlyProp);
-  const originalRef = React54__namespace.useRef(
-    getOriginalValue ? getOriginalValue(defaultValue) : defaultValue
-  );
-  const id = React54__namespace.useId();
-  const keyRef = React54__namespace.useRef("");
-  if (!keyRef.current) {
-    if (rawName && rawName.trim()) {
-      keyRef.current = `${rawName.trim()}-${id}`;
-    } else if (rawBindId && rawBindId.trim()) {
-      keyRef.current = `${rawBindId.trim()}-${id}`;
-    } else {
-      keyRef.current = `field-${Math.random().toString(36).slice(2)}-${id}`;
-    }
-  }
-  const bindIdRef = React54__namespace.useRef("");
-  if (!bindIdRef.current) {
-    bindIdRef.current = rawBindId && rawBindId.trim() || keyRef.current;
-  }
-  React54__namespace.useEffect(() => {
-    setRequired(!!requiredProp);
-  }, [requiredProp]);
-  React54__namespace.useEffect(() => {
-    setDisabled(!!disabledProp);
-  }, [disabledProp]);
-  React54__namespace.useEffect(() => {
-    setReadOnly(!!readOnlyProp);
-  }, [readOnlyProp]);
-  function setValue(next, variant = "direct") {
-    const prev = value;
-    if (Object.is(prev, next)) return;
-    setValueState(next);
-    if (onValueChange) {
-      onValueChange(next, prev, variant);
-    }
-  }
-  function setError(message2) {
-    setErrorState(message2);
-  }
-  function setLoading(next) {
-    setLoadingState(next);
-  }
-  function runValidate(report) {
-    const current = value;
-    let ok = true;
-    let message2 = "";
-    if (required && (current === void 0 || current === null || typeof current === "string" && current.trim() === "" || Array.isArray(current) && current.length === 0)) {
-      ok = false;
-      message2 = "This field is required.";
-    } else if (validate) {
-      const result = validate(current, !!report);
-      if (typeof result === "string") {
-        ok = false;
-        message2 = result;
-      } else if (result === false) {
-        ok = false;
-      }
-    }
-    if (report) {
-      setErrorState(ok ? "" : message2);
-    }
-    return ok;
-  }
-  const dummyForm = {};
-  return {
-    ref,
-    get key() {
-      return keyRef.current;
-    },
-    value,
-    setValue,
-    error,
-    setError,
-    loading,
-    setLoading,
-    required,
-    setRequired,
-    disabled,
-    setDisabled,
-    readOnly,
-    setReadOnly,
-    name: (_a = rawName == null ? void 0 : rawName.trim()) != null ? _a : "",
-    bindId: bindIdRef.current,
-    bind: bind2,
-    shared,
-    groupId,
-    alias,
-    main,
-    ignore,
-    get defaultValue() {
-      return originalRef.current;
-    },
-    get originalValue() {
-      return originalRef.current;
-    },
-    form: dummyForm,
-    validate(report) {
-      return runValidate(report);
-    }
-  };
-}
-
-// src/variants/registry.ts
-var registry2 = /* @__PURE__ */ new Map();
-function registerVariant(module2) {
-  registry2.set(module2.variant, module2);
-}
-function getVariant(key) {
-  return registry2.get(key);
-}
-function listVariants() {
-  return Array.from(registry2.values());
-}
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -17628,6 +17118,516 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+function CoreShell(props) {
+  if (props.wrapped) {
+    const {
+      formProps: formProps2,
+      children: children2,
+      wrapped,
+      // eslint-disable-line @typescript-eslint/no-unused-vars
+      gap,
+      contentClassName,
+      ...coreProps2
+    } = props;
+    const content = /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("flex flex-col", contentClassName),
+        style: gap !== void 0 ? { gap } : void 0,
+        children: children2
+      }
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(CoreProvider, { ...coreProps2, children: /* @__PURE__ */ jsxRuntime.jsx(CoreRoot, { ...formProps2 != null ? formProps2 : {}, children: content }) });
+  }
+  const { formProps, children, ...coreProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(CoreProvider, { ...coreProps, children: /* @__PURE__ */ jsxRuntime.jsx(CoreRoot, { ...formProps != null ? formProps : {}, children }) });
+}
+function useButton(options) {
+  const form = useCoreContext();
+  const { name, submit, disabled: disabledProp = false, onClick } = options;
+  const [loading, setLoadingState] = React54__namespace.useState(false);
+  const [disabled, setDisabledState] = React54__namespace.useState(
+    Boolean(disabledProp)
+  );
+  const ref = React54__namespace.useRef(null);
+  const optsRef = React54__namespace.useRef(options);
+  React54__namespace.useEffect(() => {
+    optsRef.current = options;
+  }, [options]);
+  const buttonRef = React54__namespace.useRef(null);
+  if (!buttonRef.current) {
+    const btn = {
+      name,
+      // Accessor for "loading" as required by ButtonRef
+      set loading(v) {
+        setLoadingState(v);
+      },
+      // Accessor for "disable" (note: interface uses `disable`, not `disabled`)
+      //@ts-ignore
+      set disable(v) {
+        setDisabledState(v);
+      },
+      // Extra properties used by CoreProvider via any-casts
+      get loading() {
+        return loading;
+      },
+      setDisabled(v) {
+        setDisabledState(v);
+      },
+      get disabled() {
+        return disabled;
+      },
+      ref
+    };
+    btn.setLoading = (v) => {
+      setLoadingState(v);
+    };
+    buttonRef.current = btn;
+  }
+  React54__namespace.useEffect(() => {
+    if (!buttonRef.current) return;
+    buttonRef.current.name = name;
+  }, [name]);
+  React54__namespace.useEffect(() => {
+    if (!buttonRef.current) return;
+    form.button = buttonRef.current;
+    return () => {
+      const anyForm = form;
+      if (anyForm.button === buttonRef.current) {
+        anyForm.button = null;
+      }
+    };
+  }, [form]);
+  const handleClick = (event) => {
+    const currentOpts = optsRef.current;
+    const shouldSubmit = !!currentOpts.submit;
+    if (currentOpts.onClick) {
+      currentOpts.onClick(event, form);
+    }
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (shouldSubmit) {
+      form.setActiveButton(currentOpts.name);
+      form.go();
+    }
+  };
+  const setLoading = (v) => {
+    setLoadingState(v);
+  };
+  const setDisabled = (v) => {
+    setDisabledState(v);
+  };
+  return {
+    loading,
+    setLoading,
+    disabled,
+    setDisabled,
+    ref,
+    onClick: handleClick,
+    buttonProps: {
+      ref,
+      disabled: disabled || loading,
+      "data-loading": loading ? "true" : "false",
+      onClick: handleClick
+    }
+  };
+}
+function useField(options) {
+  var _a;
+  const form = useCoreContext();
+  const {
+    name: rawName,
+    bindId: rawBindId,
+    bind: bind2,
+    shared,
+    groupId,
+    alias,
+    main,
+    ignore,
+    required: requiredProp = false,
+    defaultValue,
+    disabled: disabledProp = false,
+    readOnly: readOnlyProp = false,
+    validate,
+    getOriginalValue,
+    onValueChange
+  } = options;
+  const ref = React54__namespace.useRef(null);
+  const stateRef = React54__namespace.useRef({
+    value: defaultValue,
+    error: "",
+    loading: false,
+    original: getOriginalValue ? getOriginalValue(defaultValue) : defaultValue
+  });
+  const [value, setValueState] = React54__namespace.useState(
+    stateRef.current.value
+  );
+  const [error, setErrorState] = React54__namespace.useState(
+    stateRef.current.error
+  );
+  const [loading, setLoadingState] = React54__namespace.useState(
+    stateRef.current.loading
+  );
+  const [required, setRequired] = React54__namespace.useState(
+    Boolean(requiredProp)
+  );
+  const [disabled, setDisabled] = React54__namespace.useState(
+    Boolean(disabledProp)
+  );
+  const [readOnly, setReadOnly] = React54__namespace.useState(
+    Boolean(readOnlyProp)
+  );
+  const id = React54__namespace.useId();
+  const keyRef = React54__namespace.useRef((() => {
+    if (rawName && rawName.trim()) return `${rawName.trim()}-${id}`;
+    if (rawBindId && rawBindId.trim()) return `${rawBindId.trim()}-${id}`;
+    return `field-${Math.random().toString(36).slice(2)}-${id}`;
+  })());
+  const bindIdRef = React54__namespace.useRef(
+    rawBindId && rawBindId.trim() || keyRef.current
+  );
+  const fieldRef = React54__namespace.useRef(null);
+  if (!fieldRef.current) {
+    const key = keyRef.current;
+    const bindId = bindIdRef.current;
+    const trimmedName = (_a = rawName == null ? void 0 : rawName.trim()) != null ? _a : "";
+    const validateFn = (report) => {
+      const curDisabled = disabled || readOnly;
+      if (curDisabled && !report) {
+        return true;
+      }
+      const current = stateRef.current.value;
+      let ok = true;
+      let message2 = "";
+      if (required && (current === void 0 || current === null || typeof current === "string" && current.trim() === "" || Array.isArray(current) && current.length === 0)) {
+        ok = false;
+        message2 = "This field is required.";
+      } else if (validate) {
+        const result = validate(current, !!report);
+        if (typeof result === "string") {
+          ok = false;
+          message2 = result;
+        } else if (result === false) {
+          ok = false;
+        }
+      }
+      if (!report) {
+        return ok;
+      }
+      stateRef.current.error = ok ? "" : message2;
+      setErrorState(ok ? "" : message2);
+      return ok;
+    };
+    const f = {
+      key,
+      bindId,
+      bind: bind2,
+      name: trimmedName,
+      shared,
+      groupId,
+      alias,
+      main,
+      ignore,
+      required,
+      ref,
+      get defaultValue() {
+        return stateRef.current.original;
+      },
+      get value() {
+        return stateRef.current.value;
+      },
+      set value(v) {
+        stateRef.current.value = v;
+        setValueState(v);
+      },
+      get originalValue() {
+        return stateRef.current.original;
+      },
+      get error() {
+        return stateRef.current.error;
+      },
+      set error(msg) {
+        stateRef.current.error = msg;
+        setErrorState(msg);
+      },
+      get loading() {
+        return stateRef.current.loading;
+      },
+      set loading(v) {
+        stateRef.current.loading = v;
+        setLoadingState(v);
+      },
+      validate: validateFn,
+      onChange(value2, old, variant) {
+        if (onValueChange) {
+          onValueChange(value2, old, variant);
+        }
+      }
+      // Flags not directly on the Field interface but used via `as any`
+      // in core-provider (getValue/setValue/reset).
+    };
+    f.getValue = () => stateRef.current.value;
+    f.setValue = (next) => {
+      stateRef.current.value = next;
+      setValueState(next);
+    };
+    f.reset = () => {
+      stateRef.current.value = defaultValue;
+      stateRef.current.error = "";
+      stateRef.current.loading = false;
+      setValueState(defaultValue);
+      setErrorState("");
+      setLoadingState(false);
+    };
+    fieldRef.current = f;
+  }
+  const field = fieldRef.current;
+  React54__namespace.useEffect(() => {
+    setRequired(!!requiredProp);
+    if (field) {
+      field.required = !!requiredProp;
+    }
+  }, [requiredProp, field]);
+  React54__namespace.useEffect(() => {
+    setDisabled(!!disabledProp);
+  }, [disabledProp]);
+  React54__namespace.useEffect(() => {
+    setReadOnly(!!readOnlyProp);
+  }, [readOnlyProp]);
+  React54__namespace.useEffect(() => {
+    if (!field) return;
+    form.addField(field);
+    return () => {
+      const registry3 = form.inputs;
+      if (registry3 && typeof registry3.remove === "function") {
+        registry3.remove(field.key);
+      }
+    };
+  }, [form, field]);
+  function setValue(next, variant = "direct") {
+    var _a2;
+    const prev = stateRef.current.value;
+    if (Object.is(prev, next)) return;
+    const runFormOnChange = () => {
+      var _a3;
+      const props2 = (_a3 = form.props) != null ? _a3 : {};
+      const fn = props2.onChange;
+      if (!fn) return;
+      fn(form, field, {
+        variant,
+        value: next,
+        previous: prev
+      });
+    };
+    const props = (_a2 = form.props) != null ? _a2 : {};
+    const changeBefore = !!props.changeBefore;
+    if (changeBefore) {
+      runFormOnChange();
+    }
+    stateRef.current.value = next;
+    setValueState(next);
+    if (field.onChange) {
+      field.onChange(next, prev, variant);
+    }
+    if (!changeBefore) {
+      runFormOnChange();
+    }
+    form.controlButton();
+  }
+  function setError(message2) {
+    stateRef.current.error = message2;
+    setErrorState(message2);
+  }
+  function setLoading(loading2) {
+    stateRef.current.loading = loading2;
+    setLoadingState(loading2);
+  }
+  return {
+    ref,
+    get key() {
+      return keyRef.current;
+    },
+    value,
+    setValue,
+    error,
+    setError,
+    loading,
+    setLoading,
+    required,
+    setRequired,
+    disabled,
+    setDisabled,
+    readOnly,
+    setReadOnly,
+    name: field.name,
+    bindId: field.bindId,
+    bind: field.bind,
+    shared: field.shared,
+    groupId: field.groupId,
+    alias: field.alias,
+    main: field.main,
+    ignore: field.ignore,
+    get defaultValue() {
+      return stateRef.current.original;
+    },
+    get originalValue() {
+      return stateRef.current.original;
+    },
+    form,
+    validate(report) {
+      var _a2;
+      return (_a2 = field.validate) == null ? void 0 : _a2.call(field, report);
+    }
+  };
+}
+function useOptionalField(options) {
+  var _a;
+  try {
+    return useField(options);
+  } catch {
+  }
+  {
+    console.warn(
+      "[FormPalette] useOptionalField: No CoreProvider found. Running in self-managed mode."
+    );
+  }
+  const {
+    name: rawName,
+    bindId: rawBindId,
+    bind: bind2,
+    shared,
+    groupId,
+    alias,
+    main,
+    ignore,
+    required: requiredProp = false,
+    defaultValue,
+    disabled: disabledProp = false,
+    readOnly: readOnlyProp = false,
+    validate,
+    getOriginalValue,
+    onValueChange
+  } = options;
+  const ref = React54__namespace.useRef(null);
+  const [value, setValueState] = React54__namespace.useState(defaultValue);
+  const [error, setErrorState] = React54__namespace.useState("");
+  const [loading, setLoadingState] = React54__namespace.useState(false);
+  const [required, setRequired] = React54__namespace.useState(!!requiredProp);
+  const [disabled, setDisabled] = React54__namespace.useState(!!disabledProp);
+  const [readOnly, setReadOnly] = React54__namespace.useState(!!readOnlyProp);
+  const originalRef = React54__namespace.useRef(
+    getOriginalValue ? getOriginalValue(defaultValue) : defaultValue
+  );
+  const id = React54__namespace.useId();
+  const keyRef = React54__namespace.useRef("");
+  if (!keyRef.current) {
+    if (rawName && rawName.trim()) {
+      keyRef.current = `${rawName.trim()}-${id}`;
+    } else if (rawBindId && rawBindId.trim()) {
+      keyRef.current = `${rawBindId.trim()}-${id}`;
+    } else {
+      keyRef.current = `field-${Math.random().toString(36).slice(2)}-${id}`;
+    }
+  }
+  const bindIdRef = React54__namespace.useRef("");
+  if (!bindIdRef.current) {
+    bindIdRef.current = rawBindId && rawBindId.trim() || keyRef.current;
+  }
+  React54__namespace.useEffect(() => {
+    setRequired(!!requiredProp);
+  }, [requiredProp]);
+  React54__namespace.useEffect(() => {
+    setDisabled(!!disabledProp);
+  }, [disabledProp]);
+  React54__namespace.useEffect(() => {
+    setReadOnly(!!readOnlyProp);
+  }, [readOnlyProp]);
+  function setValue(next, variant = "direct") {
+    const prev = value;
+    if (Object.is(prev, next)) return;
+    setValueState(next);
+    if (onValueChange) {
+      onValueChange(next, prev, variant);
+    }
+  }
+  function setError(message2) {
+    setErrorState(message2);
+  }
+  function setLoading(next) {
+    setLoadingState(next);
+  }
+  function runValidate(report) {
+    const current = value;
+    let ok = true;
+    let message2 = "";
+    if (required && (current === void 0 || current === null || typeof current === "string" && current.trim() === "" || Array.isArray(current) && current.length === 0)) {
+      ok = false;
+      message2 = "This field is required.";
+    } else if (validate) {
+      const result = validate(current, !!report);
+      if (typeof result === "string") {
+        ok = false;
+        message2 = result;
+      } else if (result === false) {
+        ok = false;
+      }
+    }
+    if (report) {
+      setErrorState(ok ? "" : message2);
+    }
+    return ok;
+  }
+  const dummyForm = {};
+  return {
+    ref,
+    get key() {
+      return keyRef.current;
+    },
+    value,
+    setValue,
+    error,
+    setError,
+    loading,
+    setLoading,
+    required,
+    setRequired,
+    disabled,
+    setDisabled,
+    readOnly,
+    setReadOnly,
+    name: (_a = rawName == null ? void 0 : rawName.trim()) != null ? _a : "",
+    bindId: bindIdRef.current,
+    bind: bind2,
+    shared,
+    groupId,
+    alias,
+    main,
+    ignore,
+    get defaultValue() {
+      return originalRef.current;
+    },
+    get originalValue() {
+      return originalRef.current;
+    },
+    form: dummyForm,
+    validate(report) {
+      return runValidate(report);
+    }
+  };
+}
+
+// src/variants/registry.ts
+var registry2 = /* @__PURE__ */ new Map();
+function registerVariant(module2) {
+  registry2.set(module2.variant, module2);
+}
+function getVariant(key) {
+  return registry2.get(key);
+}
+function listVariants() {
+  return Array.from(registry2.values());
+}
 var isEmpty = (val) => val === null || val === void 0 || val === "";
 var isAndroid = () => typeof navigator !== "undefined" && /android/i.test(navigator.userAgent || "");
 var isIOS = () => typeof navigator !== "undefined" && /(iphone|ipad|ipod)/i.test(navigator.userAgent || "");
@@ -20603,19 +20603,19 @@ function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForD
 }
 function createContext2(rootComponentName, defaultContext) {
   const Context = React54__namespace.createContext(defaultContext);
-  const Provider = (props) => {
+  const Provider2 = (props) => {
     const { children, ...context } = props;
     const value = React54__namespace.useMemo(() => context, Object.values(context));
     return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
   };
-  Provider.displayName = rootComponentName + "Provider";
+  Provider2.displayName = rootComponentName + "Provider";
   function useContext22(consumerName) {
     const context = React54__namespace.useContext(Context);
     if (context) return context;
     if (defaultContext !== void 0) return defaultContext;
     throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
   }
-  return [Provider, useContext22];
+  return [Provider2, useContext22];
 }
 function createContextScope(scopeName, createContextScopeDeps = []) {
   let defaultContexts = [];
@@ -20623,14 +20623,14 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
     const BaseContext = React54__namespace.createContext(defaultContext);
     const index2 = defaultContexts.length;
     defaultContexts = [...defaultContexts, defaultContext];
-    const Provider = (props) => {
+    const Provider2 = (props) => {
       var _a;
       const { scope, children, ...context } = props;
       const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index2]) || BaseContext;
       const value = React54__namespace.useMemo(() => context, Object.values(context));
       return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
     };
-    Provider.displayName = rootComponentName + "Provider";
+    Provider2.displayName = rootComponentName + "Provider";
     function useContext22(consumerName, scope) {
       var _a;
       const Context = ((_a = scope == null ? void 0 : scope[scopeName]) == null ? void 0 : _a[index2]) || BaseContext;
@@ -20639,7 +20639,7 @@ function createContextScope(scopeName, createContextScopeDeps = []) {
       if (defaultContext !== void 0) return defaultContext;
       throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
     }
-    return [Provider, useContext22];
+    return [Provider2, useContext22];
   }
   const createScope = () => {
     const scopeContexts = defaultContexts.map((defaultContext) => {
@@ -20794,10 +20794,10 @@ function getElementRef(element) {
   return element.props.ref || element.ref;
 }
 function createCollection(name) {
-  const PROVIDER_NAME = name + "CollectionProvider";
-  const [createCollectionContext, createCollectionScope4] = createContextScope(PROVIDER_NAME);
+  const PROVIDER_NAME2 = name + "CollectionProvider";
+  const [createCollectionContext, createCollectionScope4] = createContextScope(PROVIDER_NAME2);
   const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
-    PROVIDER_NAME,
+    PROVIDER_NAME2,
     { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
   );
   const CollectionProvider = (props) => {
@@ -20806,7 +20806,7 @@ function createCollection(name) {
     const itemMap = React54__namespace.default.useRef(/* @__PURE__ */ new Map()).current;
     return /* @__PURE__ */ jsxRuntime.jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
   };
-  CollectionProvider.displayName = PROVIDER_NAME;
+  CollectionProvider.displayName = PROVIDER_NAME2;
   const COLLECTION_SLOT_NAME = name + "CollectionSlot";
   const CollectionSlotImpl = createSlot(COLLECTION_SLOT_NAME);
   const CollectionSlot = React54__namespace.default.forwardRef(
@@ -24452,6 +24452,7 @@ var VisuallyHidden = React54__namespace.forwardRef(
   }
 );
 VisuallyHidden.displayName = NAME2;
+var Root3 = VisuallyHidden;
 
 // ../../node_modules/aria-hidden/dist/es2015/index.js
 var getDefaultParent = function(originalTarget) {
@@ -30486,7 +30487,7 @@ __export(custom_components_exports, {
   NextMonthButton: () => NextMonthButton,
   Option: () => Option,
   PreviousMonthButton: () => PreviousMonthButton,
-  Root: () => Root3,
+  Root: () => Root4,
   Select: () => Select3,
   Week: () => Week,
   WeekNumber: () => WeekNumber,
@@ -30676,7 +30677,7 @@ function PreviousMonthButton(props) {
   const { components } = useDayPicker();
   return React54__namespace.default.createElement(components.Button, { ...props });
 }
-function Root3(props) {
+function Root4(props) {
   const { rootRef, ...rest } = props;
   return React54__namespace.default.createElement("div", { ...rest, ref: rootRef });
 }
@@ -34529,7 +34530,7 @@ SwitchBubbleInput.displayName = BUBBLE_INPUT_NAME2;
 function getState2(checked) {
   return checked ? "checked" : "unchecked";
 }
-var Root4 = Switch;
+var Root5 = Switch;
 var Thumb = SwitchThumb;
 function Switch2({
   className,
@@ -34537,7 +34538,7 @@ function Switch2({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root4,
+    Root5,
     {
       "data-slot": "switch",
       className: cn(
@@ -35140,7 +35141,7 @@ function focusFirst2(candidates, preventScroll = false) {
 function wrapArray2(array, startIndex) {
   return array.map((_, index2) => array[(startIndex + index2) % array.length]);
 }
-var Root5 = RovingFocusGroup;
+var Root6 = RovingFocusGroup;
 var Item2 = RovingFocusGroupItem;
 var RADIO_NAME = "Radio";
 var [createRadioContext, createRadioScope] = createContextScope(RADIO_NAME);
@@ -35314,7 +35315,7 @@ var RadioGroup = React54__namespace.forwardRef(
         value,
         onValueChange: setValue,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          Root5,
+          Root6,
           {
             asChild: true,
             ...rovingFocusGroupScope,
@@ -38569,7 +38570,7 @@ function roundValue(value, decimalCount) {
   const rounder = Math.pow(10, decimalCount);
   return Math.round(value * rounder) / rounder;
 }
-var Root6 = Slider;
+var Root7 = Slider;
 var Track = SliderTrack;
 var Range = SliderRange;
 var Thumb2 = SliderThumb;
@@ -38586,7 +38587,7 @@ function Slider2({
     [value, defaultValue, min3, max3]
   );
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root6,
+    Root7,
     {
       "data-slot": "slider",
       defaultValue,
@@ -39426,7 +39427,7 @@ var DescriptionWarning = ({ contentRef, descriptionId }) => {
   }, [MESSAGE, contentRef, descriptionId]);
   return null;
 };
-var Root7 = Dialog;
+var Root8 = Dialog;
 var Portal4 = DialogPortal;
 var Overlay = DialogOverlay;
 var Content3 = DialogContent;
@@ -39436,7 +39437,7 @@ var Close = DialogClose;
 function Dialog2({
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Root7, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Root8, { "data-slot": "dialog", ...props });
 }
 function DialogPortal2({
   ...props
@@ -41341,7 +41342,7 @@ function useResizeObserver(element, onResize) {
     }
   }, [element, handleResize]);
 }
-var Root8 = ScrollArea;
+var Root9 = ScrollArea;
 var Viewport2 = ScrollAreaViewport;
 var Corner = ScrollAreaCorner;
 function ScrollArea2({
@@ -41350,7 +41351,7 @@ function ScrollArea2({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    Root8,
+    Root9,
     {
       "data-slot": "scroll-area",
       className: cn("relative", className),
@@ -41622,32 +41623,77 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
     };
     const FileChip = ({ item, condensed = false }) => {
       const name = formatFileName ? formatFileName(item) : item.name;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center gap-1.5 overflow-hidden rounded-sm border bg-muted/60 px-1.5 py-0.5 text-xs transition-colors hover:bg-muted",
-            condensed ? "max-w-[120px]" : "max-w-[200px]"
-          ),
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(File2, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: name }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleRemove(item.id);
-                },
-                className: "ml-auto rounded-full text-muted-foreground/70 hover:text-destructive",
-                children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "h-3 w-3" })
-              }
-            )
-          ]
+      const [preview, setPreview] = React54__namespace.useState(null);
+      const [isOpen, setIsOpen] = React54__namespace.useState(false);
+      React54__namespace.useEffect(() => {
+        var _a;
+        const isImage2 = ((_a = item.type) == null ? void 0 : _a.startsWith("image/")) || item.name.match(/\.(jpg|jpeg|png|gif|webp)$/i);
+        if (!isImage2) {
+          setPreview(null);
+          return;
         }
-      );
+        if (item.file) {
+          const url = URL.createObjectURL(item.file);
+          setPreview(url);
+          return () => URL.revokeObjectURL(url);
+        }
+        if (item.url || item.path) {
+          setPreview(item.url || item.path || null);
+        }
+      }, [item]);
+      return /* @__PURE__ */ jsxRuntime.jsxs(Popover2, { open: isOpen, onOpenChange: setIsOpen, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            className: cn(
+              "flex items-center gap-1.5 overflow-hidden rounded-sm border bg-muted/60 px-1.5 py-0.5 text-xs transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none cursor-pointer",
+              condensed ? "max-w-[120px]" : "max-w-[200px]"
+            ),
+            onClick: (e) => {
+              e.stopPropagation();
+              setIsOpen(true);
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.stopPropagation();
+                setIsOpen(true);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(File2, { className: "h-3 w-3 text-muted-foreground shrink-0" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium", children: name }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleRemove(item.id);
+                  },
+                  className: "ml-auto flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-muted-foreground/70 hover:bg-destructive/20 hover:text-destructive focus:outline-none",
+                  "aria-label": "Remove file",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(X, { className: "h-3 w-3" })
+                }
+              )
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(PopoverContent2, { className: "w-64 p-0", align: "start", side: "bottom", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-video w-full flex items-center justify-center bg-muted/30 border-b", children: preview ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: preview, alt: item.name, className: "h-full w-full object-contain" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-muted-foreground/50", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(File2, { className: "h-10 w-10" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase", children: "No Preview" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm truncate", title: item.name, children: name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 flex items-center justify-between text-xs text-muted-foreground", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatFileSize(item.size) }),
+              item.type && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase opacity-70", children: item.type.split("/").pop() })
+            ] })
+          ] })
+        ] })
+      ] });
     };
     const TriggerRegion = React54__namespace.useMemo(() => {
       if (showDropArea) {
@@ -41667,7 +41713,7 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
               dropAreaClassName
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-background p-3 shadow-sm", children: dropIcon != null ? dropIcon : /* @__PURE__ */ jsxRuntime.jsx(CloudUpload, { className: "h-5 w-5 text-muted-foreground" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-surfaces-input p-3 shadow-sm", children: dropIcon != null ? dropIcon : /* @__PURE__ */ jsxRuntime.jsx(CloudUpload, { className: "h-5 w-5 text-muted-foreground" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-foreground", children: dropTitle != null ? dropTitle : "Click or drag to select" }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: dropDescription != null ? dropDescription : multiple ? "Select files" : "Select a file" })
@@ -41688,7 +41734,7 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
             className: cn(
               "relative flex w-full cursor-pointer items-center gap-2 px-3 transition-all",
               heightCls,
-              (!joinControls || !hasExternalControls) && "rounded-md border border-input bg-[var(--surfaces-input,_transparent)] shadow-xs ring-offset-background hover:bg-accent/5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+              (!joinControls || !hasExternalControls) && "rounded-md border border-input bg-surfaces-input ring-offset-background hover:bg-accent/5 focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
               dragOver && "border-primary ring-2 ring-primary/20",
               isDisabled && "cursor-not-allowed opacity-50",
               error && "border-destructive text-destructive",
@@ -41728,7 +41774,7 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
         /* @__PURE__ */ jsxRuntime.jsx(
           PopoverContent2,
           {
-            className: "w-[--radix-popover-trigger-width] p-0",
+            className: "w-(--radix-popover-trigger-width) p-0",
             align: "start",
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2 text-xs font-medium text-muted-foreground", children: [
@@ -41800,7 +41846,7 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(Plus, { className: "mr-2 h-3 w-3" }),
-                    "Add files..."
+                    multiple ? "Add files..." : items.length ? "Replace file" : "Add file"
                   ]
                 }
               ) })
@@ -41891,7 +41937,7 @@ var ShadcnFileVariant = React54__namespace.forwardRef(
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
             "flex w-full",
-            joinControls && extendBoxToControls && !showDropArea ? "items-stretch rounded-md border border-input bg-[var(--surfaces-input,_transparent)] shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2" : "items-start gap-2"
+            joinControls && extendBoxToControls && !showDropArea ? "items-stretch rounded-md border border-input bg-surfaces-input shadow-xs ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2" : "items-start gap-2"
           ), children: [
             leadingControl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
               "flex items-center",
@@ -41930,6 +41976,1410 @@ var fileManagerModule = {
   Variant: file_default,
   variant: "file"
 };
+// @__NO_SIDE_EFFECTS__
+function createSlot18(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone18(ownerName);
+  const Slot22 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React54__namespace.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable18);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React54__namespace.Children.count(newElement) > 1) return React54__namespace.Children.only(null);
+          return React54__namespace.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React54__namespace.isValidElement(newElement) ? React54__namespace.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone18(ownerName) {
+  const SlotClone = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React54__namespace.isValidElement(children)) {
+      const childrenRef = getElementRef19(children);
+      const props2 = mergeProps18(slotProps, children.props);
+      if (children.type !== React54__namespace.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React54__namespace.cloneElement(children, props2);
+    }
+    return React54__namespace.Children.count(children) > 1 ? React54__namespace.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER18 = /* @__PURE__ */ Symbol("radix.slottable");
+function isSlottable18(child) {
+  return React54__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER18;
+}
+function mergeProps18(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef19(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var NODES16 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive16 = NODES16.reduce((primitive, node) => {
+  const Slot5 = createSlot18(`Primitive.${node}`);
+  const Node2 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot5 : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+// @__NO_SIDE_EFFECTS__
+function createSlot19(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone19(ownerName);
+  const Slot22 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React54__namespace.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable19);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React54__namespace.Children.count(newElement) > 1) return React54__namespace.Children.only(null);
+          return React54__namespace.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React54__namespace.isValidElement(newElement) ? React54__namespace.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone19(ownerName) {
+  const SlotClone = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React54__namespace.isValidElement(children)) {
+      const childrenRef = getElementRef20(children);
+      const props2 = mergeProps19(slotProps, children.props);
+      if (children.type !== React54__namespace.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React54__namespace.cloneElement(children, props2);
+    }
+    return React54__namespace.Children.count(children) > 1 ? React54__namespace.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER19 = /* @__PURE__ */ Symbol("radix.slottable");
+function isSlottable19(child) {
+  return React54__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER19;
+}
+function mergeProps19(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef20(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var NODES17 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive17 = NODES17.reduce((primitive, node) => {
+  const Slot5 = createSlot19(`Primitive.${node}`);
+  const Node2 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot5 : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+var NAME3 = "Toggle";
+var Toggle = React54__namespace.forwardRef((props, forwardedRef) => {
+  const { pressed: pressedProp, defaultPressed, onPressedChange, ...buttonProps } = props;
+  const [pressed, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed != null ? defaultPressed : false,
+    caller: NAME3
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Primitive17.button,
+    {
+      type: "button",
+      "aria-pressed": pressed,
+      "data-state": pressed ? "on" : "off",
+      "data-disabled": props.disabled ? "" : void 0,
+      ...buttonProps,
+      ref: forwardedRef,
+      onClick: composeEventHandlers(props.onClick, () => {
+        if (!props.disabled) {
+          setPressed(!pressed);
+        }
+      })
+    }
+  );
+});
+Toggle.displayName = NAME3;
+var TOGGLE_GROUP_NAME = "ToggleGroup";
+var [createToggleGroupContext] = createContextScope(TOGGLE_GROUP_NAME, [
+  createRovingFocusGroupScope
+]);
+var useRovingFocusGroupScope2 = createRovingFocusGroupScope();
+var ToggleGroup = React54__namespace.default.forwardRef((props, forwardedRef) => {
+  const { type, ...toggleGroupProps } = props;
+  if (type === "single") {
+    const singleProps = toggleGroupProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupImplSingle, { ...singleProps, ref: forwardedRef });
+  }
+  if (type === "multiple") {
+    const multipleProps = toggleGroupProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupImplMultiple, { ...multipleProps, ref: forwardedRef });
+  }
+  throw new Error(`Missing prop \`type\` expected on \`${TOGGLE_GROUP_NAME}\``);
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+var [ToggleGroupValueProvider, useToggleGroupValueContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+var ToggleGroupImplSingle = React54__namespace.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...toggleGroupSingleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue != null ? defaultValue : "",
+    onChange: onValueChange,
+    caller: TOGGLE_GROUP_NAME
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "single",
+      value: React54__namespace.default.useMemo(() => value ? [value] : [], [value]),
+      onItemActivate: setValue,
+      onItemDeactivate: React54__namespace.default.useCallback(() => setValue(""), [setValue]),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupImpl, { ...toggleGroupSingleProps, ref: forwardedRef })
+    }
+  );
+});
+var ToggleGroupImplMultiple = React54__namespace.default.forwardRef((props, forwardedRef) => {
+  const {
+    value: valueProp,
+    defaultValue,
+    onValueChange = () => {
+    },
+    ...toggleGroupMultipleProps
+  } = props;
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue != null ? defaultValue : [],
+    onChange: onValueChange,
+    caller: TOGGLE_GROUP_NAME
+  });
+  const handleButtonActivate = React54__namespace.default.useCallback(
+    (itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
+    [setValue]
+  );
+  const handleButtonDeactivate = React54__namespace.default.useCallback(
+    (itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
+    [setValue]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroupValueProvider,
+    {
+      scope: props.__scopeToggleGroup,
+      type: "multiple",
+      value,
+      onItemActivate: handleButtonActivate,
+      onItemDeactivate: handleButtonDeactivate,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupImpl, { ...toggleGroupMultipleProps, ref: forwardedRef })
+    }
+  );
+});
+ToggleGroup.displayName = TOGGLE_GROUP_NAME;
+var [ToggleGroupContext, useToggleGroupContext] = createToggleGroupContext(TOGGLE_GROUP_NAME);
+var ToggleGroupImpl = React54__namespace.default.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeToggleGroup,
+      disabled = false,
+      rovingFocus = true,
+      orientation,
+      dir,
+      loop = true,
+      ...toggleGroupProps
+    } = props;
+    const rovingFocusGroupScope = useRovingFocusGroupScope2(__scopeToggleGroup);
+    const direction = useDirection(dir);
+    const commonProps = { role: "group", dir: direction, ...toggleGroupProps };
+    return /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext, { scope: __scopeToggleGroup, rovingFocus, disabled, children: rovingFocus ? /* @__PURE__ */ jsxRuntime.jsx(
+      Root6,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        orientation,
+        dir: direction,
+        loop,
+        children: /* @__PURE__ */ jsxRuntime.jsx(Primitive16.div, { ...commonProps, ref: forwardedRef })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(Primitive16.div, { ...commonProps, ref: forwardedRef }) });
+  }
+);
+var ITEM_NAME4 = "ToggleGroupItem";
+var ToggleGroupItem = React54__namespace.default.forwardRef(
+  (props, forwardedRef) => {
+    const valueContext = useToggleGroupValueContext(ITEM_NAME4, props.__scopeToggleGroup);
+    const context = useToggleGroupContext(ITEM_NAME4, props.__scopeToggleGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope2(props.__scopeToggleGroup);
+    const pressed = valueContext.value.includes(props.value);
+    const disabled = context.disabled || props.disabled;
+    const commonProps = { ...props, pressed, disabled };
+    const ref = React54__namespace.default.useRef(null);
+    return context.rovingFocus ? /* @__PURE__ */ jsxRuntime.jsx(
+      Item2,
+      {
+        asChild: true,
+        ...rovingFocusGroupScope,
+        focusable: !disabled,
+        active: pressed,
+        ref,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupItemImpl, { ...commonProps, ref: forwardedRef });
+  }
+);
+ToggleGroupItem.displayName = ITEM_NAME4;
+var ToggleGroupItemImpl = React54__namespace.default.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeToggleGroup, value, ...itemProps } = props;
+    const valueContext = useToggleGroupValueContext(ITEM_NAME4, __scopeToggleGroup);
+    const singleProps = { role: "radio", "aria-checked": props.pressed, "aria-pressed": void 0 };
+    const typeProps = valueContext.type === "single" ? singleProps : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Toggle,
+      {
+        ...typeProps,
+        ...itemProps,
+        ref: forwardedRef,
+        onPressedChange: (pressed) => {
+          if (pressed) {
+            valueContext.onItemActivate(value);
+          } else {
+            valueContext.onItemDeactivate(value);
+          }
+        }
+      }
+    );
+  }
+);
+var Root25 = ToggleGroup;
+var Item23 = ToggleGroupItem;
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleGroupContext2 = React54__namespace.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0
+});
+function ToggleGroup2({
+  className,
+  variant,
+  size: size4,
+  spacing = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Root25,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size4,
+      "data-spacing": spacing,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ToggleGroupContext2.Provider, { value: { variant, size: size4, spacing }, children })
+    }
+  );
+}
+function ToggleGroupItem2({
+  className,
+  children,
+  variant,
+  size: size4,
+  ...props
+}) {
+  const context = React54__namespace.useContext(ToggleGroupContext2);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Item23,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size4,
+      "data-spacing": context.spacing,
+      className: cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size4
+        }),
+        "w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10",
+        "data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:first:rounded-l-md data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:data-[variant=outline]:first:border-l",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+// @__NO_SIDE_EFFECTS__
+function createSlot20(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone20(ownerName);
+  const Slot22 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React54__namespace.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable20);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React54__namespace.Children.count(newElement) > 1) return React54__namespace.Children.only(null);
+          return React54__namespace.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children: React54__namespace.isValidElement(newElement) ? React54__namespace.cloneElement(newElement, void 0, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot22.displayName = `${ownerName}.Slot`;
+  return Slot22;
+}
+// @__NO_SIDE_EFFECTS__
+function createSlotClone20(ownerName) {
+  const SlotClone = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React54__namespace.isValidElement(children)) {
+      const childrenRef = getElementRef21(children);
+      const props2 = mergeProps20(slotProps, children.props);
+      if (children.type !== React54__namespace.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React54__namespace.cloneElement(children, props2);
+    }
+    return React54__namespace.Children.count(children) > 1 ? React54__namespace.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER20 = /* @__PURE__ */ Symbol("radix.slottable");
+// @__NO_SIDE_EFFECTS__
+function createSlottable(ownerName) {
+  const Slottable2 = ({ children }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
+  };
+  Slottable2.displayName = `${ownerName}.Slottable`;
+  Slottable2.__radixId = SLOTTABLE_IDENTIFIER20;
+  return Slottable2;
+}
+function isSlottable20(child) {
+  return React54__namespace.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER20;
+}
+function mergeProps20(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef21(element) {
+  var _a, _b;
+  let getter = (_a = Object.getOwnPropertyDescriptor(element.props, "ref")) == null ? void 0 : _a.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = (_b = Object.getOwnPropertyDescriptor(element, "ref")) == null ? void 0 : _b.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+var NODES18 = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive18 = NODES18.reduce((primitive, node) => {
+  const Slot5 = createSlot20(`Primitive.${node}`);
+  const Node2 = React54__namespace.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot5 : node;
+    if (typeof window !== "undefined") {
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node2.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node2 };
+}, {});
+var [createTooltipContext] = createContextScope("Tooltip", [
+  createPopperScope
+]);
+var usePopperScope3 = createPopperScope();
+var PROVIDER_NAME = "TooltipProvider";
+var DEFAULT_DELAY_DURATION = 700;
+var TOOLTIP_OPEN = "tooltip.open";
+var [TooltipProviderContextProvider, useTooltipProviderContext] = createTooltipContext(PROVIDER_NAME);
+var TooltipProvider = (props) => {
+  const {
+    __scopeTooltip,
+    delayDuration = DEFAULT_DELAY_DURATION,
+    skipDelayDuration = 300,
+    disableHoverableContent = false,
+    children
+  } = props;
+  const isOpenDelayedRef = React54__namespace.useRef(true);
+  const isPointerInTransitRef = React54__namespace.useRef(false);
+  const skipDelayTimerRef = React54__namespace.useRef(0);
+  React54__namespace.useEffect(() => {
+    const skipDelayTimer = skipDelayTimerRef.current;
+    return () => window.clearTimeout(skipDelayTimer);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipProviderContextProvider,
+    {
+      scope: __scopeTooltip,
+      isOpenDelayedRef,
+      delayDuration,
+      onOpen: React54__namespace.useCallback(() => {
+        window.clearTimeout(skipDelayTimerRef.current);
+        isOpenDelayedRef.current = false;
+      }, []),
+      onClose: React54__namespace.useCallback(() => {
+        window.clearTimeout(skipDelayTimerRef.current);
+        skipDelayTimerRef.current = window.setTimeout(
+          () => isOpenDelayedRef.current = true,
+          skipDelayDuration
+        );
+      }, [skipDelayDuration]),
+      isPointerInTransitRef,
+      onPointerInTransitChange: React54__namespace.useCallback((inTransit) => {
+        isPointerInTransitRef.current = inTransit;
+      }, []),
+      disableHoverableContent,
+      children
+    }
+  );
+};
+TooltipProvider.displayName = PROVIDER_NAME;
+var TOOLTIP_NAME = "Tooltip";
+var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
+var Tooltip = (props) => {
+  const {
+    __scopeTooltip,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    disableHoverableContent: disableHoverableContentProp,
+    delayDuration: delayDurationProp
+  } = props;
+  const providerContext = useTooltipProviderContext(TOOLTIP_NAME, props.__scopeTooltip);
+  const popperScope = usePopperScope3(__scopeTooltip);
+  const [trigger, setTrigger] = React54__namespace.useState(null);
+  const contentId = useId3();
+  const openTimerRef = React54__namespace.useRef(0);
+  const disableHoverableContent = disableHoverableContentProp != null ? disableHoverableContentProp : providerContext.disableHoverableContent;
+  const delayDuration = delayDurationProp != null ? delayDurationProp : providerContext.delayDuration;
+  const wasOpenDelayedRef = React54__namespace.useRef(false);
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen != null ? defaultOpen : false,
+    onChange: (open2) => {
+      if (open2) {
+        providerContext.onOpen();
+        document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
+      } else {
+        providerContext.onClose();
+      }
+      onOpenChange == null ? void 0 : onOpenChange(open2);
+    },
+    caller: TOOLTIP_NAME
+  });
+  const stateAttribute = React54__namespace.useMemo(() => {
+    return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
+  }, [open]);
+  const handleOpen = React54__namespace.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    wasOpenDelayedRef.current = false;
+    setOpen(true);
+  }, [setOpen]);
+  const handleClose = React54__namespace.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = 0;
+    setOpen(false);
+  }, [setOpen]);
+  const handleDelayedOpen = React54__namespace.useCallback(() => {
+    window.clearTimeout(openTimerRef.current);
+    openTimerRef.current = window.setTimeout(() => {
+      wasOpenDelayedRef.current = true;
+      setOpen(true);
+      openTimerRef.current = 0;
+    }, delayDuration);
+  }, [delayDuration, setOpen]);
+  React54__namespace.useEffect(() => {
+    return () => {
+      if (openTimerRef.current) {
+        window.clearTimeout(openTimerRef.current);
+        openTimerRef.current = 0;
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(Root2, { ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipContextProvider,
+    {
+      scope: __scopeTooltip,
+      contentId,
+      open,
+      stateAttribute,
+      trigger,
+      onTriggerChange: setTrigger,
+      onTriggerEnter: React54__namespace.useCallback(() => {
+        if (providerContext.isOpenDelayedRef.current) handleDelayedOpen();
+        else handleOpen();
+      }, [providerContext.isOpenDelayedRef, handleDelayedOpen, handleOpen]),
+      onTriggerLeave: React54__namespace.useCallback(() => {
+        if (disableHoverableContent) {
+          handleClose();
+        } else {
+          window.clearTimeout(openTimerRef.current);
+          openTimerRef.current = 0;
+        }
+      }, [handleClose, disableHoverableContent]),
+      onOpen: handleOpen,
+      onClose: handleClose,
+      disableHoverableContent,
+      children
+    }
+  ) });
+};
+Tooltip.displayName = TOOLTIP_NAME;
+var TRIGGER_NAME5 = "TooltipTrigger";
+var TooltipTrigger = React54__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTooltip, ...triggerProps } = props;
+    const context = useTooltipContext(TRIGGER_NAME5, __scopeTooltip);
+    const providerContext = useTooltipProviderContext(TRIGGER_NAME5, __scopeTooltip);
+    const popperScope = usePopperScope3(__scopeTooltip);
+    const ref = React54__namespace.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, ref, context.onTriggerChange);
+    const isPointerDownRef = React54__namespace.useRef(false);
+    const hasPointerMoveOpenedRef = React54__namespace.useRef(false);
+    const handlePointerUp = React54__namespace.useCallback(() => isPointerDownRef.current = false, []);
+    React54__namespace.useEffect(() => {
+      return () => document.removeEventListener("pointerup", handlePointerUp);
+    }, [handlePointerUp]);
+    return /* @__PURE__ */ jsxRuntime.jsx(Anchor, { asChild: true, ...popperScope, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Primitive18.button,
+      {
+        "aria-describedby": context.open ? context.contentId : void 0,
+        "data-state": context.stateAttribute,
+        ...triggerProps,
+        ref: composedRefs,
+        onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
+          if (event.pointerType === "touch") return;
+          if (!hasPointerMoveOpenedRef.current && !providerContext.isPointerInTransitRef.current) {
+            context.onTriggerEnter();
+            hasPointerMoveOpenedRef.current = true;
+          }
+        }),
+        onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
+          context.onTriggerLeave();
+          hasPointerMoveOpenedRef.current = false;
+        }),
+        onPointerDown: composeEventHandlers(props.onPointerDown, () => {
+          if (context.open) {
+            context.onClose();
+          }
+          isPointerDownRef.current = true;
+          document.addEventListener("pointerup", handlePointerUp, { once: true });
+        }),
+        onFocus: composeEventHandlers(props.onFocus, () => {
+          if (!isPointerDownRef.current) context.onOpen();
+        }),
+        onBlur: composeEventHandlers(props.onBlur, context.onClose),
+        onClick: composeEventHandlers(props.onClick, context.onClose)
+      }
+    ) });
+  }
+);
+TooltipTrigger.displayName = TRIGGER_NAME5;
+var PORTAL_NAME5 = "TooltipPortal";
+var [PortalProvider3, usePortalContext3] = createTooltipContext(PORTAL_NAME5, {
+  forceMount: void 0
+});
+var TooltipPortal = (props) => {
+  const { __scopeTooltip, forceMount, children, container } = props;
+  const context = useTooltipContext(PORTAL_NAME5, __scopeTooltip);
+  return /* @__PURE__ */ jsxRuntime.jsx(PortalProvider3, { scope: __scopeTooltip, forceMount, children: /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsxRuntime.jsx(Portal, { asChild: true, container, children }) }) });
+};
+TooltipPortal.displayName = PORTAL_NAME5;
+var CONTENT_NAME5 = "TooltipContent";
+var TooltipContent = React54__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const portalContext = usePortalContext3(CONTENT_NAME5, props.__scopeTooltip);
+    const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
+    const context = useTooltipContext(CONTENT_NAME5, props.__scopeTooltip);
+    return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || context.open, children: context.disableHoverableContent ? /* @__PURE__ */ jsxRuntime.jsx(TooltipContentImpl, { side, ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntime.jsx(TooltipContentHoverable, { side, ...contentProps, ref: forwardedRef }) });
+  }
+);
+var TooltipContentHoverable = React54__namespace.forwardRef((props, forwardedRef) => {
+  const context = useTooltipContext(CONTENT_NAME5, props.__scopeTooltip);
+  const providerContext = useTooltipProviderContext(CONTENT_NAME5, props.__scopeTooltip);
+  const ref = React54__namespace.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const [pointerGraceArea, setPointerGraceArea] = React54__namespace.useState(null);
+  const { trigger, onClose } = context;
+  const content = ref.current;
+  const { onPointerInTransitChange } = providerContext;
+  const handleRemoveGraceArea = React54__namespace.useCallback(() => {
+    setPointerGraceArea(null);
+    onPointerInTransitChange(false);
+  }, [onPointerInTransitChange]);
+  const handleCreateGraceArea = React54__namespace.useCallback(
+    (event, hoverTarget) => {
+      const currentTarget = event.currentTarget;
+      const exitPoint = { x: event.clientX, y: event.clientY };
+      const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
+      const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
+      const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
+      const graceArea = getHull([...paddedExitPoints, ...hoverTargetPoints]);
+      setPointerGraceArea(graceArea);
+      onPointerInTransitChange(true);
+    },
+    [onPointerInTransitChange]
+  );
+  React54__namespace.useEffect(() => {
+    return () => handleRemoveGraceArea();
+  }, [handleRemoveGraceArea]);
+  React54__namespace.useEffect(() => {
+    if (trigger && content) {
+      const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
+      const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
+      trigger.addEventListener("pointerleave", handleTriggerLeave);
+      content.addEventListener("pointerleave", handleContentLeave);
+      return () => {
+        trigger.removeEventListener("pointerleave", handleTriggerLeave);
+        content.removeEventListener("pointerleave", handleContentLeave);
+      };
+    }
+  }, [trigger, content, handleCreateGraceArea, handleRemoveGraceArea]);
+  React54__namespace.useEffect(() => {
+    if (pointerGraceArea) {
+      const handleTrackPointerGrace = (event) => {
+        const target = event.target;
+        const pointerPosition = { x: event.clientX, y: event.clientY };
+        const hasEnteredTarget = (trigger == null ? void 0 : trigger.contains(target)) || (content == null ? void 0 : content.contains(target));
+        const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
+        if (hasEnteredTarget) {
+          handleRemoveGraceArea();
+        } else if (isPointerOutsideGraceArea) {
+          handleRemoveGraceArea();
+          onClose();
+        }
+      };
+      document.addEventListener("pointermove", handleTrackPointerGrace);
+      return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
+    }
+  }, [trigger, content, pointerGraceArea, onClose, handleRemoveGraceArea]);
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipContentImpl, { ...props, ref: composedRefs });
+});
+var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, { isInside: false });
+var Slottable = createSlottable("TooltipContent");
+var TooltipContentImpl = React54__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeTooltip,
+      children,
+      "aria-label": ariaLabel,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      ...contentProps
+    } = props;
+    const context = useTooltipContext(CONTENT_NAME5, __scopeTooltip);
+    const popperScope = usePopperScope3(__scopeTooltip);
+    const { onClose } = context;
+    React54__namespace.useEffect(() => {
+      document.addEventListener(TOOLTIP_OPEN, onClose);
+      return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
+    }, [onClose]);
+    React54__namespace.useEffect(() => {
+      if (context.trigger) {
+        const handleScroll2 = (event) => {
+          const target = event.target;
+          if (target == null ? void 0 : target.contains(context.trigger)) onClose();
+        };
+        window.addEventListener("scroll", handleScroll2, { capture: true });
+        return () => window.removeEventListener("scroll", handleScroll2, { capture: true });
+      }
+    }, [context.trigger, onClose]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      DismissableLayer,
+      {
+        asChild: true,
+        disableOutsidePointerEvents: false,
+        onEscapeKeyDown,
+        onPointerDownOutside,
+        onFocusOutside: (event) => event.preventDefault(),
+        onDismiss: onClose,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          Content,
+          {
+            "data-state": context.stateAttribute,
+            ...popperScope,
+            ...contentProps,
+            ref: forwardedRef,
+            style: {
+              ...contentProps.style,
+              // re-namespace exposed content custom properties
+              ...{
+                "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
+                "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
+                "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
+                "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
+                "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Slottable, { children }),
+              /* @__PURE__ */ jsxRuntime.jsx(VisuallyHiddenContentContextProvider, { scope: __scopeTooltip, isInside: true, children: /* @__PURE__ */ jsxRuntime.jsx(Root3, { id: context.contentId, role: "tooltip", children: ariaLabel || children }) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+TooltipContent.displayName = CONTENT_NAME5;
+var ARROW_NAME4 = "TooltipArrow";
+var TooltipArrow = React54__namespace.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeTooltip, ...arrowProps } = props;
+    const popperScope = usePopperScope3(__scopeTooltip);
+    const visuallyHiddenContentContext = useVisuallyHiddenContentContext(
+      ARROW_NAME4,
+      __scopeTooltip
+    );
+    return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ jsxRuntime.jsx(Arrow2, { ...popperScope, ...arrowProps, ref: forwardedRef });
+  }
+);
+TooltipArrow.displayName = ARROW_NAME4;
+function getExitSideFromRect(point, rect) {
+  const top = Math.abs(rect.top - point.y);
+  const bottom = Math.abs(rect.bottom - point.y);
+  const right = Math.abs(rect.right - point.x);
+  const left = Math.abs(rect.left - point.x);
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return "left";
+    case right:
+      return "right";
+    case top:
+      return "top";
+    case bottom:
+      return "bottom";
+    default:
+      throw new Error("unreachable");
+  }
+}
+function getPaddedExitPoints(exitPoint, exitSide, padding = 5) {
+  const paddedExitPoints = [];
+  switch (exitSide) {
+    case "top":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding }
+      );
+      break;
+    case "bottom":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y - padding }
+      );
+      break;
+    case "left":
+      paddedExitPoints.push(
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding }
+      );
+      break;
+    case "right":
+      paddedExitPoints.push(
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x - padding, y: exitPoint.y + padding }
+      );
+      break;
+  }
+  return paddedExitPoints;
+}
+function getPointsFromRect(rect) {
+  const { top, right, bottom, left } = rect;
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom }
+  ];
+}
+function isPointInPolygon(point, polygon) {
+  const { x, y } = point;
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const ii = polygon[i];
+    const jj = polygon[j];
+    const xi = ii.x;
+    const yi = ii.y;
+    const xj = jj.x;
+    const yj = jj.y;
+    const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
+    if (intersect) inside = !inside;
+  }
+  return inside;
+}
+function getHull(points) {
+  const newPoints = points.slice();
+  newPoints.sort((a, b) => {
+    if (a.x < b.x) return -1;
+    else if (a.x > b.x) return 1;
+    else if (a.y < b.y) return -1;
+    else if (a.y > b.y) return 1;
+    else return 0;
+  });
+  return getHullPresorted(newPoints);
+}
+function getHullPresorted(points) {
+  if (points.length <= 1) return points.slice();
+  const upperHull = [];
+  for (let i = 0; i < points.length; i++) {
+    const p = points[i];
+    while (upperHull.length >= 2) {
+      const q = upperHull[upperHull.length - 1];
+      const r2 = upperHull[upperHull.length - 2];
+      if ((q.x - r2.x) * (p.y - r2.y) >= (q.y - r2.y) * (p.x - r2.x)) upperHull.pop();
+      else break;
+    }
+    upperHull.push(p);
+  }
+  upperHull.pop();
+  const lowerHull = [];
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i];
+    while (lowerHull.length >= 2) {
+      const q = lowerHull[lowerHull.length - 1];
+      const r2 = lowerHull[lowerHull.length - 2];
+      if ((q.x - r2.x) * (p.y - r2.y) >= (q.y - r2.y) * (p.x - r2.x)) lowerHull.pop();
+      else break;
+    }
+    lowerHull.push(p);
+  }
+  lowerHull.pop();
+  if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
+    return upperHull;
+  } else {
+    return upperHull.concat(lowerHull);
+  }
+}
+var Provider = TooltipProvider;
+var Root32 = Tooltip;
+var Trigger4 = TooltipTrigger;
+var Portal5 = TooltipPortal;
+var Content23 = TooltipContent;
+var Arrow22 = TooltipArrow;
+function TooltipProvider2({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider2, { children: /* @__PURE__ */ jsxRuntime.jsx(Root32, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Trigger4, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent2({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Portal5, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    Content23,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(Arrow22, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+function mapSizeToToggleSize(size4) {
+  switch (size4) {
+    case "sm":
+      return "sm";
+    case "lg":
+      return "lg";
+    case "md":
+    default:
+      return "default";
+  }
+}
+function normalizeValue(val, multiple) {
+  if (multiple) {
+    if (Array.isArray(val)) return val;
+    if (typeof val === "string") return [val];
+    return [];
+  }
+  if (Array.isArray(val)) return val[0] || "";
+  return val || "";
+}
+function capitalizeFirst6(label) {
+  if (!label) return label;
+  return label.charAt(0).toUpperCase() + label.slice(1);
+}
+function normalizeOption(input, {
+  optionValue,
+  optionLabel,
+  optionIcon,
+  optionDisabled,
+  optionTooltip,
+  optionMeta
+}, autoCap) {
+  var _a, _b, _c, _d, _e, _f;
+  const anyInput = input;
+  if (optionValue || optionLabel || optionIcon || optionDisabled || optionTooltip || optionMeta) {
+    const rawValue = optionValue != null ? anyInput[optionValue] : (_a = anyInput.value) != null ? _a : input;
+    const value2 = String(rawValue);
+    let label2;
+    if (optionLabel != null) {
+      label2 = anyInput[optionLabel];
+    } else if (anyInput.label != null) {
+      label2 = anyInput.label;
+    } else {
+      label2 = String(rawValue != null ? rawValue : value2);
+    }
+    if (autoCap && typeof label2 === "string") {
+      label2 = capitalizeFirst6(label2);
+    }
+    const icon = optionIcon != null ? anyInput[optionIcon] : (_b = anyInput.icon) != null ? _b : void 0;
+    const disabled = optionDisabled != null ? !!anyInput[optionDisabled] : !!anyInput.disabled;
+    const tooltip = optionTooltip != null ? anyInput[optionTooltip] : (_c = anyInput.tooltip) != null ? _c : void 0;
+    const meta = optionMeta != null ? anyInput[optionMeta] : (_d = anyInput.meta) != null ? _d : void 0;
+    return {
+      ui: {
+        value: value2,
+        label: label2,
+        icon,
+        disabled,
+        tooltip,
+        meta
+      },
+      raw: input
+    };
+  }
+  if (typeof input === "string" || typeof input === "number" || typeof input === "boolean") {
+    const value2 = String(input);
+    let label2 = value2;
+    if (autoCap && typeof label2 === "string") {
+      label2 = capitalizeFirst6(label2);
+    }
+    return {
+      ui: {
+        value: value2,
+        label: label2
+      },
+      raw: input
+    };
+  }
+  const baseValue = (_f = anyInput.value) != null ? _f : String((_e = anyInput.label) != null ? _e : "");
+  const value = String(baseValue);
+  let label = anyInput.label != null ? anyInput.label : String(value);
+  if (autoCap && typeof label === "string") {
+    label = capitalizeFirst6(label);
+  }
+  return {
+    ui: {
+      value,
+      label,
+      icon: anyInput.icon,
+      disabled: !!anyInput.disabled,
+      tooltip: anyInput.tooltip,
+      meta: anyInput.meta
+    },
+    raw: input
+  };
+}
+var ShadcnToggleVariant3 = React54__namespace.forwardRef(function ShadcnToggleVariant4(props, ref) {
+  const {
+    value,
+    onValue,
+    disabled,
+    readOnly,
+    error,
+    size: size4 = "md",
+    options = [],
+    multiple = false,
+    variant = "default",
+    layout = "horizontal",
+    gridCols = 2,
+    fillWidth: fullWidth = false,
+    optionValue,
+    optionLabel,
+    optionIcon,
+    optionDisabled,
+    optionTooltip,
+    optionMeta,
+    renderOption,
+    className,
+    itemClassName,
+    activeClassName,
+    autoCap = false,
+    gap: itemGapPx
+  } = props;
+  const isDisabled = !!disabled || !!readOnly;
+  const toggleSize = mapSizeToToggleSize(size4);
+  const currentValue = normalizeValue(value, multiple);
+  const normalizedOptions = React54__namespace.useMemo(
+    () => options.map(
+      (opt) => normalizeOption(
+        opt,
+        {
+          optionValue,
+          optionLabel,
+          optionIcon,
+          optionDisabled,
+          optionTooltip,
+          optionMeta
+        },
+        autoCap
+      )
+    ),
+    [
+      options,
+      optionValue,
+      optionLabel,
+      optionIcon,
+      optionDisabled,
+      optionTooltip,
+      optionMeta,
+      autoCap
+    ]
+  );
+  const handleChange = React54__namespace.useCallback(
+    (val) => {
+      if (readOnly) return;
+      if (!onValue) return;
+      let rawSelection;
+      if (Array.isArray(val)) {
+        const selected = normalizedOptions.filter(
+          (entry) => val.includes(entry.ui.value)
+        );
+        rawSelection = selected.map((entry) => entry.raw);
+      } else {
+        const found = normalizedOptions.find(
+          (entry) => entry.ui.value === val
+        );
+        rawSelection = found == null ? void 0 : found.raw;
+      }
+      const detail = {
+        source: "variant",
+        raw: rawSelection,
+        // original item(s)
+        nativeEvent: void 0,
+        meta: { action: "toggle" }
+      };
+      onValue(val, detail);
+    },
+    [onValue, readOnly, normalizedOptions]
+  );
+  const layoutClasses = cn(
+    layout === "horizontal" && "flex flex-wrap",
+    layout === "vertical" && "flex flex-col items-stretch",
+    layout === "grid" && "grid",
+    fullWidth && "w-full",
+    fullWidth && layout === "horizontal" && "[&>*]:flex-1",
+    fullWidth && layout === "vertical" && "[&>*]:w-full",
+    className
+  );
+  console.log(layoutClasses, fullWidth, autoCap);
+  const groupStyle = React54__namespace.useMemo(() => {
+    const style = {};
+    if (layout === "grid") {
+      style.gridTemplateColumns = `repeat(${gridCols}, minmax(0, 1fr))`;
+    }
+    if (typeof itemGapPx === "number") {
+      style.gap = itemGapPx;
+    }
+    return Object.keys(style).length ? style : void 0;
+  }, [layout, gridCols, itemGapPx]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ToggleGroup2,
+    {
+      ref,
+      type: multiple ? "multiple" : "single",
+      value: currentValue,
+      onValueChange: handleChange,
+      disabled: isDisabled,
+      variant,
+      size: toggleSize,
+      className: layoutClasses,
+      style: groupStyle,
+      "aria-invalid": !!error,
+      children: normalizedOptions.map(({ ui: opt }) => {
+        const isSelected = multiple ? currentValue.includes(opt.value) : currentValue === opt.value;
+        const contentNode = renderOption ? renderOption(opt, isSelected) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+          opt.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: opt.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: opt.label })
+        ] });
+        const itemNode = /* @__PURE__ */ jsxRuntime.jsx(
+          ToggleGroupItem2,
+          {
+            value: opt.value,
+            disabled: opt.disabled,
+            "aria-label": typeof opt.label === "string" ? opt.label : opt.value,
+            className: cn(
+              // Base Transitions
+              "transition-all",
+              // Default Active State (Shadcn defaults)
+              "data-[state=on]:bg-primary data-[state=on]:text-primary-foreground",
+              // Error State
+              error && "border-destructive/50 hover:bg-destructive/10 data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground",
+              // Variant: Outline specific tweaks
+              variant === "outline" && layout === "horizontal" && !fullWidth && "first:rounded-l-md last:rounded-r-md rounded-none border-l-0 first:border-l",
+              // Layout tweaks
+              fullWidth && "justify-center",
+              // Custom Item Class
+              itemClassName,
+              // Active Class Name (Applied only when selected)
+              isSelected && activeClassName
+            ),
+            children: contentNode
+          },
+          opt.value
+        );
+        if (opt.tooltip && !isDisabled) {
+          return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider2, { delayDuration: 300, children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip2, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipTrigger2, { asChild: true, children: itemNode }),
+            /* @__PURE__ */ jsxRuntime.jsx(TooltipContent2, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: opt.tooltip }) })
+          ] }) }, opt.value);
+        }
+        return itemNode;
+      })
+    }
+  );
+});
+ShadcnToggleVariant3.displayName = "ShadcnToggleVariant";
+
+// src/variants/core/toggle-group.tsx
+var toggleGroupModule = {
+  variant: "toggle-group",
+  Variant: ShadcnToggleVariant3,
+  meta: {
+    label: "Toggle group",
+    description: "Toggle group component buttons.",
+    tags: ["buttons", "toggle"]
+  }
+};
 
 // src/variants/index.ts
 var variants = [
@@ -41950,13 +43400,14 @@ var variants = [
   keyValueModule,
   custom_default,
   treeselect_default2,
-  fileManagerModule
+  fileManagerModule,
+  toggleGroupModule
 ];
 function registerCoreVariants() {
   variants.forEach((item) => registerVariant(item));
 }
 registerCoreVariants();
-var NODES16 = [
+var NODES19 = [
   "a",
   "button",
   "div",
@@ -41975,7 +43426,7 @@ var NODES16 = [
   "svg",
   "ul"
 ];
-var Primitive16 = NODES16.reduce((primitive, node) => {
+var Primitive19 = NODES19.reduce((primitive, node) => {
   const Slot5 = createSlot10(`Primitive.${node}`);
   const Node2 = React54__namespace.forwardRef((props, forwardedRef) => {
     const { asChild, ...primitiveProps } = props;
@@ -41988,10 +43439,10 @@ var Primitive16 = NODES16.reduce((primitive, node) => {
   Node2.displayName = `Primitive.${node}`;
   return { ...primitive, [node]: Node2 };
 }, {});
-var NAME3 = "Label";
+var NAME4 = "Label";
 var Label2 = React54__namespace.forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Primitive16.label,
+    Primitive19.label,
     {
       ...props,
       ref: forwardedRef,
@@ -42005,14 +43456,14 @@ var Label2 = React54__namespace.forwardRef((props, forwardedRef) => {
     }
   );
 });
-Label2.displayName = NAME3;
-var Root9 = Label2;
+Label2.displayName = NAME4;
+var Root10 = Label2;
 function Label3({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Root9,
+    Root10,
     {
       "data-slot": "label",
       className: cn(
@@ -42752,7 +44203,7 @@ function InputField(props) {
   ].filter(Boolean).join(" ");
   const hasStackedLabelBlock = lp !== "hidden" && hasAnyLabelBlockContent;
   const stackedGroupClassName = [
-    hasStackedLabelBlock && hasLabelRowContent ? "mt-1" : null,
+    hasStackedLabelBlock && hasLabelRowContent ? "mt-0.5" : null,
     classes == null ? void 0 : classes.group
   ].filter(Boolean).join(" ");
   const Element2 = contain ? "div" : React54__namespace.Fragment;