@firecms/ui 3.0.0-canary.211 → 3.0.0-canary.213

package/dist/index.es.js

@@ -720,7 +720,11 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
     } else {
       onValueChange?.(!value);
     }
-  }, className: cls(size === "small" ? "w-[38px] h-[22px] min-w-[38px] min-h-[22px]" : "w-[42px] h-[26px] min-w-[42px] min-h-[26px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
+  }, className: cls({
+    "min-h-[32px]": size === "small",
+    "min-h-[48px]": size === "medium",
+    "min-h-[64px]": size === "large"
+  }, size === "small" ? "w-[38px] min-w-[38px]" : "w-[42px] min-w-[42px]", "outline-none rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 dark:bg-surface-accent-950 border-surface-accent-100 dark:border-surface-accent-700 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700" : "ring-secondary ring-1 bg-secondary dark:bg-secondary" : "bg-white bg-opacity-54 dark:bg-surface-accent-900 ring-1 ring-surface-accent-200 dark:ring-surface-accent-700", className), ...props, children: [
     allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 transform will-change-auto", disabled ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600", {
       "w-[21px] h-[10px]": size === "medium" || size === "large",
       "w-[19px] h-[8px]": size === "small",
@@ -758,7 +762,11 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
   React__default.useEffect(() => {
   }, []);
   const focus = document.activeElement === refInput?.current || document.activeElement === ref?.current;
-  return /* @__PURE__ */ jsxs("div", { ref, onFocus, onBlur, tabIndex: -1, className: cls(!invisible && fieldBackgroundMixin, !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", size === "small" ? "min-h-[40px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
+  return /* @__PURE__ */ jsxs("div", { ref, onFocus, onBlur, tabIndex: -1, className: cls(!invisible && fieldBackgroundMixin, !invisible && (disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin), disabled ? "cursor-default" : "cursor-pointer", "rounded-md max-w-full justify-between box-border relative inline-flex items-center", !invisible && focus && !disabled ? focusedClasses : "", error ? "text-red-500 dark:text-red-600" : focus && !disabled ? "text-primary" : !disabled ? "text-text-primary dark:text-text-primary-dark" : "text-text-secondary dark:text-text-secondary-dark", {
+    "min-h-[28px]": size === "small",
+    "min-h-[42px]": size === "medium",
+    "min-h-[64px]": size === "large"
+  }, size === "small" ? "pl-2" : "pl-4", size === "small" ? "pr-4" : "pr-6", position === "end" ? "flex-row-reverse" : "flex-row", fullWidth ? "w-full" : "", className), onClick: disabled ? void 0 : (e) => {
     if (props.allowIndeterminate) {
       if (value === null || value === void 0) onValueChange?.(true);
       else if (value) onValueChange?.(false);
@@ -27685,7 +27693,7 @@ function Typography(t0) {
   return t15;
 }
 const DateTimeField = (t0) => {
-  const $ = c(52);
+  const $ = c(55);
   const {
     value,
     label,
@@ -27759,161 +27767,170 @@ const DateTimeField = (t0) => {
   }
   const t6 = !invisible && fieldBackgroundMixin;
   const t7 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-  const t8 = size === "medium";
-  const t9 = size === "large";
-  let t10;
-  if ($[6] !== className || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
-    t10 = cls("rounded-md relative max-w-full", t6, t7, {
-      "min-h-[48px]": t8,
-      "min-h-[64px]": t9
+  const t8 = size === "small";
+  const t9 = size === "medium";
+  const t10 = size === "large";
+  let t11;
+  if ($[6] !== className || $[7] !== t10 || $[8] !== t6 || $[9] !== t7 || $[10] !== t8 || $[11] !== t9) {
+    t11 = cls("rounded-md relative max-w-full", t6, t7, {
+      "min-h-[28px]": t8,
+      "min-h-[42px]": t9,
+      "min-h-[64px]": t10
     }, className);
     $[6] = className;
-    $[7] = t6;
-    $[8] = t7;
-    $[9] = t8;
-    $[10] = t9;
-    $[11] = t10;
+    $[7] = t10;
+    $[8] = t6;
+    $[9] = t7;
+    $[10] = t8;
+    $[11] = t9;
+    $[12] = t11;
   } else {
-    t10 = $[11];
+    t11 = $[12];
   }
-  let t11;
-  if ($[12] !== disabled) {
-    t11 = () => {
+  let t12;
+  if ($[13] !== disabled) {
+    t12 = () => {
       if (!disabled) {
         inputRef.current?.focus();
       }
     };
-    $[12] = disabled;
-    $[13] = t11;
+    $[13] = disabled;
+    $[14] = t12;
   } else {
-    t11 = $[13];
+    t12 = $[14];
   }
-  let t12;
-  if ($[14] !== disabled || $[15] !== error || $[16] !== focused || $[17] !== label) {
-    t12 = label && /* @__PURE__ */ jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
-    $[14] = disabled;
-    $[15] = error;
-    $[16] = focused;
-    $[17] = label;
-    $[18] = t12;
-  } else {
-    t12 = $[18];
-  }
-  const t13 = mode === "date_time" ? "datetime-local" : "date";
-  const t14 = valueAsInputValue(value ?? null, mode);
-  let t15;
+  let t13;
+  if ($[15] !== disabled || $[16] !== error || $[17] !== focused || $[18] !== label) {
+    t13 = label && /* @__PURE__ */ jsx(InputLabel, { className: cls("absolute top-1 pointer-events-none", !error ? focused ? "text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-500", disabled ? "opacity-50" : ""), shrink: true, children: label });
+    $[15] = disabled;
+    $[16] = error;
+    $[17] = focused;
+    $[18] = label;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  const t14 = mode === "date_time" ? "datetime-local" : "date";
+  const t15 = valueAsInputValue(value ?? null, mode);
   let t16;
-  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = () => setFocused(true);
-    t16 = () => setFocused(false);
-    $[19] = t15;
+  let t17;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = () => setFocused(true);
+    t17 = () => setFocused(false);
     $[20] = t16;
+    $[21] = t17;
   } else {
-    t15 = $[19];
     t16 = $[20];
+    t17 = $[21];
   }
-  const t17 = clearable ? "pr-14" : "pr-12";
-  const t18 = size === "medium" ? "min-h-[48px]" : "min-h-[64px]";
-  const t19 = label ? "pt-8 pb-2" : "py-2";
-  const t20 = disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500";
-  let t21;
-  if ($[21] !== inputClassName || $[22] !== t17 || $[23] !== t18 || $[24] !== t19 || $[25] !== t20) {
-    t21 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t17, "rounded-md", t18, t19, inputClassName, t20);
-    $[21] = inputClassName;
-    $[22] = t17;
-    $[23] = t18;
-    $[24] = t19;
-    $[25] = t20;
-    $[26] = t21;
-  } else {
-    t21 = $[26];
-  }
+  const t18 = clearable ? "pr-14" : "pr-12";
+  const t19 = size === "small";
+  const t20 = size === "medium";
+  const t21 = size === "large";
   let t22;
-  if ($[27] !== disabled || $[28] !== handleInputChange || $[29] !== t13 || $[30] !== t14 || $[31] !== t21) {
-    t22 = /* @__PURE__ */ jsx("input", { ref: inputRef, type: t13, value: t14, onChange: handleInputChange, onFocus: t15, onBlur: t16, disabled, className: t21 });
-    $[27] = disabled;
-    $[28] = handleInputChange;
-    $[29] = t13;
-    $[30] = t14;
-    $[31] = t21;
-    $[32] = t22;
+  if ($[22] !== disabled || $[23] !== inputClassName || $[24] !== label || $[25] !== t18 || $[26] !== t19 || $[27] !== t20 || $[28] !== t21) {
+    t22 = cls("w-full outline-none bg-transparent leading-normal text-base px-3", t18, "rounded-md", {
+      "min-h-[28px]": t19,
+      "min-h-[42px]": t20,
+      "min-h-[64px]": t21
+    }, label ? "pt-8 pb-2" : "py-2", inputClassName, disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-surface-accent-600 dark:text-surface-accent-500");
+    $[22] = disabled;
+    $[23] = inputClassName;
+    $[24] = label;
+    $[25] = t18;
+    $[26] = t19;
+    $[27] = t20;
+    $[28] = t21;
+    $[29] = t22;
   } else {
-    t22 = $[32];
+    t22 = $[29];
   }
   let t23;
-  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = (e_2) => {
-      e_2.stopPropagation();
-      inputRef.current?.showPicker();
-    };
-    $[33] = t23;
+  if ($[30] !== disabled || $[31] !== handleInputChange || $[32] !== t14 || $[33] !== t15 || $[34] !== t22) {
+    t23 = /* @__PURE__ */ jsx("input", { ref: inputRef, type: t14, value: t15, onChange: handleInputChange, onFocus: t16, onBlur: t17, disabled, className: t22 });
+    $[30] = disabled;
+    $[31] = handleInputChange;
+    $[32] = t14;
+    $[33] = t15;
+    $[34] = t22;
+    $[35] = t23;
   } else {
-    t23 = $[33];
+    t23 = $[35];
   }
   let t24;
-  if ($[34] === Symbol.for("react.memo_cache_sentinel")) {
-    t24 = /* @__PURE__ */ jsx(IconButton, { onClick: t23, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) });
-    $[34] = t24;
+  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = (e_2) => {
+      e_2.stopPropagation();
+      inputRef.current?.showPicker();
+    };
+    $[36] = t24;
   } else {
-    t24 = $[34];
+    t24 = $[36];
   }
   let t25;
-  if ($[35] !== clearable || $[36] !== handleClear || $[37] !== value) {
-    t25 = clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
-    $[35] = clearable;
-    $[36] = handleClear;
-    $[37] = value;
-    $[38] = t25;
+  if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
+    t25 = /* @__PURE__ */ jsx(IconButton, { onClick: t24, className: "absolute right-3 top-1/2 transform -translate-y-1/2 !text-surface-accent-500", children: /* @__PURE__ */ jsx(CalendarMonthIcon, { color: "disabled" }) });
+    $[37] = t25;
   } else {
-    t25 = $[38];
+    t25 = $[37];
   }
   let t26;
-  if ($[39] !== style || $[40] !== t10 || $[41] !== t11 || $[42] !== t12 || $[43] !== t22 || $[44] !== t25) {
-    t26 = /* @__PURE__ */ jsxs("div", { className: t10, style, onClick: t11, children: [
-      t12,
-      t22,
-      t24,
-      t25
-    ] });
-    $[39] = style;
-    $[40] = t10;
-    $[41] = t11;
-    $[42] = t12;
-    $[43] = t22;
-    $[44] = t25;
-    $[45] = t26;
+  if ($[38] !== clearable || $[39] !== handleClear || $[40] !== value) {
+    t26 = clearable && value && /* @__PURE__ */ jsx(IconButton, { onClick: handleClear, className: "absolute right-14 top-1/2 transform -translate-y-1/2 text-surface-accent-400 ", children: /* @__PURE__ */ jsx(CloseIcon, {}) });
+    $[38] = clearable;
+    $[39] = handleClear;
+    $[40] = value;
+    $[41] = t26;
   } else {
-    t26 = $[45];
+    t26 = $[41];
   }
   let t27;
-  if ($[46] !== invalidValue || $[47] !== value) {
-    t27 = invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
-      /* @__PURE__ */ jsx(ErrorIcon, { size: "medium", color: "error" }),
-      /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
-        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
-      ] })
+  if ($[42] !== style || $[43] !== t11 || $[44] !== t12 || $[45] !== t13 || $[46] !== t23 || $[47] !== t26) {
+    t27 = /* @__PURE__ */ jsxs("div", { className: t11, style, onClick: t12, children: [
+      t13,
+      t23,
+      t25,
+      t26
     ] });
-    $[46] = invalidValue;
-    $[47] = value;
+    $[42] = style;
+    $[43] = t11;
+    $[44] = t12;
+    $[45] = t13;
+    $[46] = t23;
+    $[47] = t26;
     $[48] = t27;
   } else {
     t27 = $[48];
   }
   let t28;
-  if ($[49] !== t26 || $[50] !== t27) {
-    t28 = /* @__PURE__ */ jsxs(Fragment, { children: [
-      t5,
-      t26,
-      t27
+  if ($[49] !== invalidValue || $[50] !== value) {
+    t28 = invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
+      /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }),
+      /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: "Invalid date value for this field" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "body2", children: `The provided value is: ${JSON.stringify(value)}` })
+      ] })
     ] });
-    $[49] = t26;
-    $[50] = t27;
+    $[49] = invalidValue;
+    $[50] = value;
     $[51] = t28;
   } else {
     t28 = $[51];
   }
-  return t28;
+  let t29;
+  if ($[52] !== t27 || $[53] !== t28) {
+    t29 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      t5,
+      t27,
+      t28
+    ] });
+    $[52] = t27;
+    $[53] = t28;
+    $[54] = t29;
+  } else {
+    t29 = $[54];
+  }
+  return t29;
 };
 const inputStyles = `
     /* Hide the default calendar icon in Chrome, Safari, Edge, Opera */
@@ -29623,91 +29640,92 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(98);
+  const $ = c(101);
   const {
     value,
-    size,
+    size: t1,
     label,
     error,
     onValueChange,
     invisible,
     disabled,
     placeholder,
-    modalPopover: t1,
-    includeClear: t2,
-    includeSelectAll: t3,
-    useChips: t4,
+    modalPopover: t2,
+    includeClear: t3,
+    includeSelectAll: t4,
+    useChips: t5,
     className,
     children,
     renderValues,
     open,
     onOpenChange
   } = t0;
-  const modalPopover = t1 === void 0 ? true : t1;
-  const includeClear = t2 === void 0 ? true : t2;
-  const includeSelectAll = t3 === void 0 ? true : t3;
-  const useChips = t4 === void 0 ? true : t4;
+  const size = t1 === void 0 ? "large" : t1;
+  const modalPopover = t2 === void 0 ? true : t2;
+  const includeClear = t3 === void 0 ? true : t3;
+  const includeSelectAll = t4 === void 0 ? true : t4;
+  const useChips = t5 === void 0 ? true : t5;
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(open ?? false);
-  let t5;
+  let t6;
   if ($[0] !== value) {
-    t5 = value ?? [];
+    t6 = value ?? [];
     $[0] = value;
-    $[1] = t5;
+    $[1] = t6;
   } else {
-    t5 = $[1];
+    t6 = $[1];
   }
-  const [selectedValues, setSelectedValues] = React.useState(t5);
-  let t6;
+  const [selectedValues, setSelectedValues] = React.useState(t6);
+  let t7;
   if ($[2] !== onOpenChange) {
-    t6 = (open_0) => {
+    t7 = (open_0) => {
       setIsPopoverOpen(open_0);
       onOpenChange?.(open_0);
     };
     $[2] = onOpenChange;
-    $[3] = t6;
+    $[3] = t7;
   } else {
-    t6 = $[3];
+    t7 = $[3];
   }
-  const onPopoverOpenChange = t6;
-  let t7;
+  const onPopoverOpenChange = t7;
   let t8;
+  let t9;
   if ($[4] !== open) {
-    t7 = () => {
+    t8 = () => {
       setIsPopoverOpen(open ?? false);
     };
-    t8 = [open];
+    t9 = [open];
     $[4] = open;
-    $[5] = t7;
-    $[6] = t8;
+    $[5] = t8;
+    $[6] = t9;
   } else {
-    t7 = $[5];
-    t8 = $[6];
+    t8 = $[5];
+    t9 = $[6];
   }
-  useEffect(t7, t8);
-  let t9;
+  useEffect(t8, t9);
+  let t10;
   if ($[7] !== children) {
-    t9 = children ? Children.map(children, _temp$1).filter(Boolean) : [];
+    t10 = children ? Children.map(children, _temp$1).filter(Boolean) : [];
     $[7] = children;
-    $[8] = t9;
+    $[8] = t10;
   } else {
-    t9 = $[8];
+    t10 = $[8];
   }
-  const allValues = t9;
-  let t10;
+  const allValues = t10;
   let t11;
+  let t12;
   if ($[9] !== value) {
-    t10 = () => {
+    t11 = () => {
       setSelectedValues(value ?? []);
     };
-    t11 = [value];
+    t12 = [value];
     $[9] = value;
-    $[10] = t10;
-    $[11] = t11;
+    $[10] = t11;
+    $[11] = t12;
   } else {
-    t10 = $[10];
-    t11 = $[11];
+    t11 = $[10];
+    t12 = $[11];
   }
-  React.useEffect(t10, t11);
+  React.useEffect(t11, t12);
   let onItemClick;
   let updateValues;
   if ($[12] !== onValueChange || $[13] !== selectedValues) {
@@ -29732,9 +29750,9 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     onItemClick = $[14];
     updateValues = $[15];
   }
-  let t12;
+  let t13;
   if ($[16] !== onPopoverOpenChange || $[17] !== selectedValues || $[18] !== updateValues) {
-    t12 = (event) => {
+    t13 = (event) => {
       if (event.key === "Enter") {
         onPopoverOpenChange(true);
       } else {
@@ -29748,50 +29766,50 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     $[16] = onPopoverOpenChange;
     $[17] = selectedValues;
     $[18] = updateValues;
-    $[19] = t12;
+    $[19] = t13;
   } else {
-    t12 = $[19];
+    t13 = $[19];
   }
-  const handleInputKeyDown = t12;
-  let t13;
+  const handleInputKeyDown = t13;
+  let t14;
   if ($[20] !== selectedValues || $[21] !== updateValues) {
-    t13 = (value_0) => {
+    t14 = (value_0) => {
       const newSelectedValues_1 = selectedValues.some((v_2) => String(v_2) === String(value_0)) ? selectedValues.filter((v_1) => String(v_1) !== String(value_0)) : [...selectedValues, value_0];
       updateValues(newSelectedValues_1);
     };
     $[20] = selectedValues;
     $[21] = updateValues;
-    $[22] = t13;
+    $[22] = t14;
   } else {
-    t13 = $[22];
+    t14 = $[22];
   }
-  const toggleOption = t13;
-  let t14;
+  const toggleOption = t14;
+  let t15;
   if ($[23] !== updateValues) {
-    t14 = () => {
+    t15 = () => {
       updateValues([]);
     };
     $[23] = updateValues;
-    $[24] = t14;
+    $[24] = t15;
   } else {
-    t14 = $[24];
+    t15 = $[24];
   }
-  const handleClear = t14;
-  let t15;
+  const handleClear = t15;
+  let t16;
   if ($[25] !== isPopoverOpen || $[26] !== onPopoverOpenChange) {
-    t15 = () => {
+    t16 = () => {
       onPopoverOpenChange(!isPopoverOpen);
     };
     $[25] = isPopoverOpen;
     $[26] = onPopoverOpenChange;
-    $[27] = t15;
+    $[27] = t16;
   } else {
-    t15 = $[27];
+    t16 = $[27];
   }
-  const handleTogglePopover = t15;
-  let t16;
+  const handleTogglePopover = t16;
+  let t17;
   if ($[28] !== allValues || $[29] !== handleClear || $[30] !== onPopoverOpenChange || $[31] !== selectedValues.length || $[32] !== updateValues) {
-    t16 = () => {
+    t17 = () => {
       if (selectedValues.length === allValues.length) {
         handleClear();
       } else {
@@ -29804,55 +29822,68 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     $[30] = onPopoverOpenChange;
     $[31] = selectedValues.length;
     $[32] = updateValues;
-    $[33] = t16;
+    $[33] = t17;
   } else {
-    t16 = $[33];
+    t17 = $[33];
   }
-  const toggleAll = t16;
+  const toggleAll = t17;
   useInjectStyles("MultiSelect", `
 [cmdk-group] {
   max-height: 45vh;
   overflow-y: auto;
   // width: 400px;
 } `);
-  let t17;
+  let t18;
   if ($[34] !== onItemClick || $[35] !== selectedValues) {
-    t17 = {
+    t18 = {
       fieldValue: selectedValues,
       onItemClick
     };
     $[34] = onItemClick;
     $[35] = selectedValues;
-    $[36] = t17;
+    $[36] = t18;
   } else {
-    t17 = $[36];
+    t18 = $[36];
   }
-  let t18;
+  let t19;
   if ($[37] !== error || $[38] !== label) {
-    t18 = typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label;
+    t19 = typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label;
     $[37] = error;
     $[38] = label;
-    $[39] = t18;
+    $[39] = t19;
   } else {
-    t18 = $[39];
+    t19 = $[39];
   }
-  const t19 = size === "small" ? "min-h-[42px]" : "min-h-[64px]";
-  const t20 = invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin;
-  const t21 = disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin;
-  let t22;
-  if ($[40] !== className || $[41] !== t19 || $[42] !== t20 || $[43] !== t21) {
-    t22 = cls(t19, "py-2", "px-4", "select-none rounded-md text-sm", t20, t21, "relative flex items-center", className);
+  const t20 = size === "small";
+  const t21 = size === "medium";
+  const t22 = size === "large";
+  let t23;
+  if ($[40] !== className || $[41] !== disabled || $[42] !== invisible || $[43] !== size || $[44] !== t20 || $[45] !== t21 || $[46] !== t22) {
+    t23 = cls({
+      "min-h-[28px]": t20,
+      "min-h-[42px]": t21,
+      "min-h-[64px]": t22
+    }, {
+      "py-1": size === "small",
+      "py-2": size === "medium" || size === "large"
+    }, {
+      "px-2": size === "small",
+      "px-4": size === "medium" || size === "large"
+    }, "select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className);
     $[40] = className;
-    $[41] = t19;
-    $[42] = t20;
-    $[43] = t21;
-    $[44] = t22;
+    $[41] = disabled;
+    $[42] = invisible;
+    $[43] = size;
+    $[44] = t20;
+    $[45] = t21;
+    $[46] = t22;
+    $[47] = t23;
   } else {
-    t22 = $[44];
+    t23 = $[47];
   }
-  let t23;
-  if ($[45] !== children || $[46] !== handleClear || $[47] !== includeClear || $[48] !== isPopoverOpen || $[49] !== placeholder || $[50] !== renderValues || $[51] !== selectedValues || $[52] !== toggleOption || $[53] !== useChips) {
-    t23 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+  let t24;
+  if ($[48] !== children || $[49] !== handleClear || $[50] !== includeClear || $[51] !== isPopoverOpen || $[52] !== placeholder || $[53] !== renderValues || $[54] !== selectedValues || $[55] !== toggleOption || $[56] !== useChips) {
+    t24 = selectedValues.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5 text-start", children: [
         renderValues && renderValues(selectedValues),
         !renderValues && selectedValues.map((value_1) => {
@@ -29881,175 +29912,175 @@ const MultiSelect = React.forwardRef((t0, ref) => {
       /* @__PURE__ */ jsx("span", { className: "text-sm", children: placeholder }),
       /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
     ] });
-    $[45] = children;
-    $[46] = handleClear;
-    $[47] = includeClear;
-    $[48] = isPopoverOpen;
-    $[49] = placeholder;
-    $[50] = renderValues;
-    $[51] = selectedValues;
-    $[52] = toggleOption;
-    $[53] = useChips;
-    $[54] = t23;
-  } else {
-    t23 = $[54];
-  }
-  let t24;
-  if ($[55] !== handleTogglePopover || $[56] !== ref || $[57] !== t22 || $[58] !== t23) {
-    t24 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t22, children: t23 }) });
-    $[55] = handleTogglePopover;
-    $[56] = ref;
-    $[57] = t22;
-    $[58] = t23;
-    $[59] = t24;
-  } else {
-    t24 = $[59];
+    $[48] = children;
+    $[49] = handleClear;
+    $[50] = includeClear;
+    $[51] = isPopoverOpen;
+    $[52] = placeholder;
+    $[53] = renderValues;
+    $[54] = selectedValues;
+    $[55] = toggleOption;
+    $[56] = useChips;
+    $[57] = t24;
+  } else {
+    t24 = $[57];
   }
   let t25;
-  if ($[60] === Symbol.for("react.memo_cache_sentinel")) {
-    t25 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
-    $[60] = t25;
+  if ($[58] !== handleTogglePopover || $[59] !== ref || $[60] !== t23 || $[61] !== t24) {
+    t25 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t23, children: t24 }) });
+    $[58] = handleTogglePopover;
+    $[59] = ref;
+    $[60] = t23;
+    $[61] = t24;
+    $[62] = t25;
   } else {
-    t25 = $[60];
+    t25 = $[62];
   }
   let t26;
-  if ($[61] !== onPopoverOpenChange) {
-    t26 = () => onPopoverOpenChange(false);
-    $[61] = onPopoverOpenChange;
-    $[62] = t26;
+  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
+    t26 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
+    $[63] = t26;
   } else {
-    t26 = $[62];
+    t26 = $[63];
   }
   let t27;
-  if ($[63] === Symbol.for("react.memo_cache_sentinel")) {
-    t27 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
-    $[63] = t27;
+  if ($[64] !== onPopoverOpenChange) {
+    t27 = () => onPopoverOpenChange(false);
+    $[64] = onPopoverOpenChange;
+    $[65] = t27;
   } else {
-    t27 = $[63];
+    t27 = $[65];
   }
   let t28;
-  if ($[64] !== handleInputKeyDown) {
-    t28 = /* @__PURE__ */ jsx(Command.Input, { className: t27, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-    $[64] = handleInputKeyDown;
-    $[65] = t28;
+  if ($[66] === Symbol.for("react.memo_cache_sentinel")) {
+    t28 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
+    $[66] = t28;
   } else {
-    t28 = $[65];
+    t28 = $[66];
   }
   let t29;
-  if ($[66] !== handleClear || $[67] !== selectedValues.length) {
-    t29 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
-    $[66] = handleClear;
-    $[67] = selectedValues.length;
+  if ($[67] !== handleInputKeyDown) {
+    t29 = /* @__PURE__ */ jsx(Command.Input, { className: t28, placeholder: "Search...", onKeyDown: handleInputKeyDown });
+    $[67] = handleInputKeyDown;
     $[68] = t29;
   } else {
     t29 = $[68];
   }
   let t30;
-  if ($[69] !== t28 || $[70] !== t29) {
-    t30 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
-      t28,
-      t29
-    ] });
-    $[69] = t28;
-    $[70] = t29;
+  if ($[69] !== handleClear || $[70] !== selectedValues.length) {
+    t30 = selectedValues.length > 0 && /* @__PURE__ */ jsx("div", { onClick: handleClear, className: "text-sm justify-center cursor-pointer py-3 px-4 text-text-secondary dark:text-text-secondary-dark", children: "Clear" });
+    $[69] = handleClear;
+    $[70] = selectedValues.length;
     $[71] = t30;
   } else {
     t30 = $[71];
   }
   let t31;
-  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
-    t31 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[72] = t31;
+  if ($[72] !== t29 || $[73] !== t30) {
+    t31 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
+      t29,
+      t30
+    ] });
+    $[72] = t29;
+    $[73] = t30;
+    $[74] = t31;
   } else {
-    t31 = $[72];
+    t31 = $[74];
   }
   let t32;
-  if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
-    t32 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
-    $[73] = t32;
+  if ($[75] === Symbol.for("react.memo_cache_sentinel")) {
+    t32 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
+    $[75] = t32;
   } else {
-    t32 = $[73];
+    t32 = $[75];
   }
   let t33;
-  if ($[74] !== allValues.length || $[75] !== includeSelectAll || $[76] !== selectedValues.length || $[77] !== toggleAll) {
-    t33 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
-      /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
-      /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
-    ] }, "all");
-    $[74] = allValues.length;
-    $[75] = includeSelectAll;
-    $[76] = selectedValues.length;
-    $[77] = toggleAll;
-    $[78] = t33;
+  if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+    t33 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
+    $[76] = t33;
   } else {
-    t33 = $[78];
+    t33 = $[76];
   }
   let t34;
-  if ($[79] !== children || $[80] !== t33) {
-    t34 = /* @__PURE__ */ jsxs(Command.List, { children: [
-      t32,
-      /* @__PURE__ */ jsxs(Command.Group, { children: [
-        t33,
-        children
-      ] })
-    ] });
-    $[79] = children;
-    $[80] = t33;
+  if ($[77] !== allValues.length || $[78] !== includeSelectAll || $[79] !== selectedValues.length || $[80] !== toggleAll) {
+    t34 = includeSelectAll && /* @__PURE__ */ jsxs(Command.Item, { onSelect: toggleAll, className: cls("flex flex-row items-center gap-1.5", "cursor-pointer", "m-1", "ring-offset-transparent", "p-1 rounded aria-[selected=true]:outline-none aria-[selected=true]:ring-2 aria-[selected=true]:ring-primary aria-[selected=true]:ring-opacity-75 aria-[selected=true]:ring-offset-2", "aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900", "cursor-pointer p-2 rounded aria-[selected=true]:bg-surface-accent-100 aria-[selected=true]:dark:bg-surface-accent-900"), children: [
+      /* @__PURE__ */ jsx(InnerCheckBox, { checked: selectedValues.length === allValues.length }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary dark:text-text-secondary-dark", children: "(Select All)" })
+    ] }, "all");
+    $[77] = allValues.length;
+    $[78] = includeSelectAll;
+    $[79] = selectedValues.length;
+    $[80] = toggleAll;
     $[81] = t34;
   } else {
     t34 = $[81];
   }
   let t35;
-  if ($[82] !== t30 || $[83] !== t34) {
-    t35 = /* @__PURE__ */ jsxs(Command, { children: [
-      t30,
-      t31,
-      t34
+  if ($[82] !== children || $[83] !== t34) {
+    t35 = /* @__PURE__ */ jsxs(Command.List, { children: [
+      t33,
+      /* @__PURE__ */ jsxs(Command.Group, { children: [
+        t34,
+        children
+      ] })
     ] });
-    $[82] = t30;
+    $[82] = children;
     $[83] = t34;
     $[84] = t35;
   } else {
     t35 = $[84];
   }
   let t36;
-  if ($[85] !== t26 || $[86] !== t35) {
-    t36 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t25, align: "start", sideOffset: 8, onEscapeKeyDown: t26, children: t35 });
-    $[85] = t26;
+  if ($[85] !== t31 || $[86] !== t35) {
+    t36 = /* @__PURE__ */ jsxs(Command, { children: [
+      t31,
+      t32,
+      t35
+    ] });
+    $[85] = t31;
     $[86] = t35;
     $[87] = t36;
   } else {
     t36 = $[87];
   }
   let t37;
-  if ($[88] !== isPopoverOpen || $[89] !== modalPopover || $[90] !== onPopoverOpenChange || $[91] !== t24 || $[92] !== t36) {
-    t37 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
-      t24,
-      t36
-    ] });
-    $[88] = isPopoverOpen;
-    $[89] = modalPopover;
-    $[90] = onPopoverOpenChange;
-    $[91] = t24;
-    $[92] = t36;
-    $[93] = t37;
+  if ($[88] !== t27 || $[89] !== t36) {
+    t37 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t26, align: "start", sideOffset: 8, onEscapeKeyDown: t27, children: t36 });
+    $[88] = t27;
+    $[89] = t36;
+    $[90] = t37;
   } else {
-    t37 = $[93];
+    t37 = $[90];
   }
   let t38;
-  if ($[94] !== t17 || $[95] !== t18 || $[96] !== t37) {
-    t38 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t17, children: [
-      t18,
+  if ($[91] !== isPopoverOpen || $[92] !== modalPopover || $[93] !== onPopoverOpenChange || $[94] !== t25 || $[95] !== t37) {
+    t38 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
+      t25,
       t37
     ] });
-    $[94] = t17;
-    $[95] = t18;
-    $[96] = t37;
-    $[97] = t38;
+    $[91] = isPopoverOpen;
+    $[92] = modalPopover;
+    $[93] = onPopoverOpenChange;
+    $[94] = t25;
+    $[95] = t37;
+    $[96] = t38;
+  } else {
+    t38 = $[96];
+  }
+  let t39;
+  if ($[97] !== t18 || $[98] !== t19 || $[99] !== t38) {
+    t39 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
+      t19,
+      t38
+    ] });
+    $[97] = t18;
+    $[98] = t19;
+    $[99] = t38;
+    $[100] = t39;
   } else {
-    t38 = $[97];
+    t39 = $[100];
   }
-  return t38;
+  return t39;
 });
 MultiSelect.displayName = "MultiSelect";
 function MultiSelectItem(t0) {
@@ -31317,7 +31348,11 @@ const TextField = forwardRef(({
       element?.removeEventListener("wheel", handleWheel);
     };
   }, [inputRef, type]);
-  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, size === "small" ? "min-h-[32px]" : size === "medium" ? "min-h-[48px]" : "min-h-[64px]", label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
+  const input = multiline ? /* @__PURE__ */ jsx(TextareaAutosize, { ...inputProps, ref: inputRef, placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, minRows, maxRows, value: value ?? "", onChange, style: inputStyle, className: cls(invisible ? focusedInvisibleMixin : "", "rounded-md resize-none w-full outline-none p-[32px] text-base bg-transparent min-h-[64px] px-3 pt-8", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName) }) : /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, disabled, style: inputStyle, className: cls("w-full outline-none bg-transparent leading-normal px-3", "rounded-md", "focused:text-text-primary focused:dark:text-text-primary-dark", invisible ? focusedInvisibleMixin : "", disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, {
+    "min-h-[28px]": size === "small",
+    "min-h-[42px]": size === "medium",
+    "min-h-[64px]": size === "large"
+  }, label ? size === "large" ? "pt-8 pb-2" : "pt-4 pb-2" : "py-2", endAdornment ? "pr-10" : "pr-3", disabled && "outline-none opacity-50 dark:opacity-50 text-surface-accent-800 dark:text-white", inputClassName), placeholder: focused || hasValue || !label ? placeholder : void 0, autoFocus, onFocus: () => setFocused(true), onBlur: () => setFocused(false), type, value: type === "number" && Number.isNaN(value) ? "" : value ?? "", onChange });
   return /* @__PURE__ */ jsxs("div", { ref, className: cls("rounded-md relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
     "min-h-[32px]": !invisible && size === "small",
     "min-h-[48px]": !invisible && size === "medium",