@firecms/ui 3.0.0-beta.14 → 3.0.0-beta.15

package/dist/components/Alert.d.ts

@@ -6,6 +6,7 @@ export interface AlertProps {
     size?: "small" | "medium" | "large";
     action?: React.ReactNode;
     className?: string;
+    outerClassName?: string;
     style?: React.CSSProperties;
 }
 export declare const Alert: React.FC<AlertProps>;

package/dist/components/Dialog.d.ts

@@ -15,6 +15,10 @@ export type DialogProps = {
     onEscapeKeyDown?: (e: KeyboardEvent) => void;
     onPointerDownOutside?: (e: Event) => void;
     onInteractOutside?: (e: Event) => void;
+    /**
+     * If `true`, the dialog will not focus the first focusable element when opened.
+     */
+    disableInitialFocus?: boolean;
 };
 declare const widthClasses: {
     xs: string;
@@ -30,5 +34,5 @@ declare const widthClasses: {
     "7xl": string;
     full: string;
 };
-export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside }: DialogProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dialog: ({ open, onOpenChange, children, className, containerClassName, fullWidth, fullHeight, fullScreen, scrollable, maxWidth, modal, onOpenAutoFocus, onEscapeKeyDown, onPointerDownOutside, onInteractOutside, disableInitialFocus }: DialogProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Select.d.ts

@@ -9,6 +9,7 @@ export type SelectProps<T extends SelectValue = string> = {
     value?: T;
     className?: string;
     inputClassName?: string;
+    viewportClassName?: string;
     onChange?: React.EventHandler<ChangeEvent<HTMLSelectElement>>;
     onValueChange?: (updatedValue: T) => void;
     placeholder?: React.ReactNode;

package/dist/index.es.js

@@ -34,8 +34,8 @@ const fieldBackgroundDisabledMixin = "dark:bg-surface-800 bg-opacity-50 dark:bg-
 const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40";
 const defaultBorderMixin = "border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
 const paperMixin = "bg-white rounded-md dark:bg-surface-950 border border-surface-200 border-opacity-40 dark:border-surface-700 dark:border-opacity-40";
-const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40 m-1 -p-1";
-const cardClickableMixin = "hover:bg-primary-bg dark:hover:bg-primary-bg hover:bg-opacity-20 dark:hover:bg-opacity-20 hover:ring-2 hover:ring-primary cursor-pointer";
+const cardMixin = "bg-white border border-surface-200 border-opacity-40 dark:border-transparent rounded-md dark:bg-surface-950 dark:border-surface-700 dark:border-opacity-40";
+const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800 hover:ring-2 hover:ring-primary cursor-pointer";
 const cardSelectedMixin = "bg-primary-bg dark:bg-primary-bg bg-opacity-30 dark:bg-opacity-10 ring-1 ring-primary ring-opacity-75";
 function cls(...classes) {
   return twMerge(clsx(classes));
@@ -563,13 +563,14 @@ const getColorClasses = (severity) => {
   }
 };
 const Alert = (t0) => {
-  const $ = c(16);
+  const $ = c(19);
   const {
     children,
     onDismiss,
     color: t1,
     size: t2,
     action,
+    outerClassName,
     className,
     style
   } = t0;
@@ -577,12 +578,12 @@ const Alert = (t0) => {
   const size = t2 === void 0 ? "medium" : t2;
   let t3;
   let t4;
-  if ($[0] !== className || $[1] !== color || $[2] !== size || $[3] !== style) {
+  if ($[0] !== color || $[1] !== outerClassName || $[2] !== size || $[3] !== style) {
     const classes = getColorClasses(color);
     t3 = style;
-    t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, className);
-    $[0] = className;
-    $[1] = color;
+    t4 = cls(getSizeClasses(size), "w-full", "font-medium", "rounded-md flex items-center gap-2", classes, outerClassName);
+    $[0] = color;
+    $[1] = outerClassName;
     $[2] = size;
     $[3] = style;
     $[4] = t3;
@@ -592,38 +593,47 @@ const Alert = (t0) => {
     t4 = $[5];
   }
   let t5;
-  if ($[6] !== children) {
-    t5 = /* @__PURE__ */ jsx("div", { className: "flex-grow", children });
-    $[6] = children;
+  if ($[6] !== className) {
+    t5 = cls("flex-grow", className);
+    $[6] = className;
     $[7] = t5;
   } else {
     t5 = $[7];
   }
   let t6;
-  if ($[8] !== onDismiss) {
-    t6 = onDismiss && /* @__PURE__ */ jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
-    $[8] = onDismiss;
-    $[9] = t6;
+  if ($[8] !== children || $[9] !== t5) {
+    t6 = /* @__PURE__ */ jsx("div", { className: t5, children });
+    $[8] = children;
+    $[9] = t5;
+    $[10] = t6;
   } else {
-    t6 = $[9];
+    t6 = $[10];
   }
   let t7;
-  if ($[10] !== action || $[11] !== t3 || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
-    t7 = /* @__PURE__ */ jsxs("div", { style: t3, className: t4, children: [
-      t5,
+  if ($[11] !== onDismiss) {
+    t7 = onDismiss && /* @__PURE__ */ jsx("button", { className: "text-surface-accent-400 hover:text-surface-accent-600 dark:text-surface-accent-500 dark:hover:text-surface-accent-400", onClick: onDismiss, children: "×" });
+    $[11] = onDismiss;
+    $[12] = t7;
+  } else {
+    t7 = $[12];
+  }
+  let t8;
+  if ($[13] !== action || $[14] !== t3 || $[15] !== t4 || $[16] !== t6 || $[17] !== t7) {
+    t8 = /* @__PURE__ */ jsxs("div", { style: t3, className: t4, children: [
       t6,
+      t7,
       action
     ] });
-    $[10] = action;
-    $[11] = t3;
-    $[12] = t4;
-    $[13] = t5;
-    $[14] = t6;
-    $[15] = t7;
+    $[13] = action;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
   } else {
-    t7 = $[15];
+    t8 = $[18];
   }
-  return t7;
+  return t8;
 };
 const AvatarInner = (t0, ref) => {
   const $ = c(25);
@@ -732,18 +742,22 @@ 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(size === "smallest" ? "w-[34px] h-[18px] min-w-[34px] min-h-[18px]" : 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: [
     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",
+      "w-[16px] h-[6px]": size === "smallest",
       "translate-x-[10px]": size === "medium" || size === "large",
-      "translate-x-[9px]": size === "small"
+      "translate-x-[9px]": size === "small",
+      "translate-x-[8px]": size === "smallest"
     }) }, "knob"),
     !(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-300 dark:bg-surface-accent-700" : value ? "bg-white" : "bg-surface-accent-600 dark:bg-surface-accent-400", {
       "w-[21px] h-[21px]": size === "medium" || size === "large",
       "w-[19px] h-[19px]": size === "small",
+      "w-[16px] h-[16px]": size === "smallest",
       [value ? "translate-x-[19px]" : "translate-x-[3px]"]: size === "medium" || size === "large",
-      [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small"
+      [value ? "translate-x-[17px]" : "translate-x-[2px]"]: size === "small",
+      [value ? "translate-x-[16px]" : "translate-x-[1px]"]: size === "smallest"
     }) }, "knob")
   ] });
 });
@@ -775,7 +789,7 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     "min-h-[32px]": 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) => {
+  }, size === "small" || size === "smallest" ? "pl-2" : "pl-4", size === "small" || size === "smallest" ? "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);
@@ -785,11 +799,11 @@ const BooleanSwitchWithLabel = function BooleanSwitchWithLabel2({
     }
   }, children: [
     /* @__PURE__ */ jsx(BooleanSwitch, { value, ref: refInput, size, className: cls(invisible && focus ? focusedClasses : "", inputClassName), disabled, ...props }),
-    /* @__PURE__ */ jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" ? "text-sm" : "text-base"), children: label })
+    /* @__PURE__ */ jsx("div", { className: cls("flex-grow", position === "end" ? "mr-4" : "ml-4", size === "small" || size === "smallest" ? "text-sm" : "text-base"), children: label })
   ] });
 };
 const ButtonInner = React__default.forwardRef((t0, ref) => {
-  const $ = c(53);
+  const $ = c(55);
   let Component;
   let children;
   let className;
@@ -841,7 +855,7 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
   const size = t3 === void 0 ? "medium" : t3;
   const startIcon = t4 === void 0 ? null : t4;
   const fullWidth = t5 === void 0 ? false : t5;
-  const color = t6 === void 0 ? "primary" : t6;
+  const color = t6 === void 0 ? "neutral" : t6;
   const t7 = !fullWidth;
   const t8 = variant === "filled" && color === "primary" && !disabled;
   const t9 = variant === "filled" && color === "secondary" && !disabled;
@@ -876,7 +890,7 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "border border-secondary bg-secondary focus:ring-secondary shadow hover:ring-1 hover:ring-secondary text-white hover:text-white": t9,
         "border border-red-500 bg-red-500 hover:bg-red-500 focus:ring-red-500 shadow hover:ring-1 hover:ring-red-600 text-white hover:text-white": t10,
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t11,
-        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark": t12,
+        "border border-transparent bg-surface-100 hover:bg-surface-accent-200 text-text-primary dark:bg-surface-800 dark:hover:bg-surface-accent-700 dark:text-text-primary-dark hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": t12,
         "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t13,
         "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": t14,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": t15,
@@ -886,7 +900,7 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "border border-secondary text-secondary hover:text-secondary hover:bg-secondary-bg": t19,
         "border border-red-500 text-red-500 hover:text-red-500 hover:bg-red-500 hover:text-white": t20,
         "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:bg-surface-accent-200": t21,
-        "border border-surface-400 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
+        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t22,
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": t23,
         "border border-surface-500 opacity-50": t24,
@@ -956,22 +970,24 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
   }
   const t31 = props;
   let t32;
-  if ($[44] !== children || $[45] !== disabled || $[46] !== startIcon || $[47] !== t26 || $[48] !== t27 || $[49] !== t28 || $[50] !== t29 || $[51] !== t31) {
-    t32 = /* @__PURE__ */ jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, ...t31, children: [
+  if ($[44] !== children || $[45] !== disabled || $[46] !== size || $[47] !== startIcon || $[48] !== t26 || $[49] !== t27 || $[50] !== t28 || $[51] !== t29 || $[52] !== t31 || $[53] !== variant) {
+    t32 = /* @__PURE__ */ jsxs("button", { ref: t26, type: t27, onClick: t28, className: t29, disabled, "data-variant": variant, "data-size": size, ...t31, children: [
       startIcon,
       children
     ] });
     $[44] = children;
     $[45] = disabled;
-    $[46] = startIcon;
-    $[47] = t26;
-    $[48] = t27;
-    $[49] = t28;
-    $[50] = t29;
-    $[51] = t31;
-    $[52] = t32;
-  } else {
-    t32 = $[52];
+    $[46] = size;
+    $[47] = startIcon;
+    $[48] = t26;
+    $[49] = t27;
+    $[50] = t28;
+    $[51] = t29;
+    $[52] = t31;
+    $[53] = variant;
+    $[54] = t32;
+  } else {
+    t32 = $[54];
   }
   return t32;
 });
@@ -27995,7 +28011,7 @@ const widthClasses = {
   full: "max-w-full min-w-full w-full"
 };
 const Dialog = (t0) => {
-  const $ = c(39);
+  const $ = c(42);
   const {
     open,
     onOpenChange,
@@ -28011,17 +28027,19 @@ const Dialog = (t0) => {
     onOpenAutoFocus,
     onEscapeKeyDown,
     onPointerDownOutside,
-    onInteractOutside
+    onInteractOutside,
+    disableInitialFocus: t5
   } = t0;
   const fullWidth = t1 === void 0 ? true : t1;
   const scrollable = t2 === void 0 ? true : t2;
   const maxWidth = t3 === void 0 ? "lg" : t3;
   const modal = t4 === void 0 ? true : t4;
+  const disableInitialFocus = t5 === void 0 ? true : t5;
   const [displayed, setDisplayed] = useState(false);
-  let t5;
   let t6;
+  let t7;
   if ($[0] !== open) {
-    t5 = () => {
+    t6 = () => {
       if (!open) {
         const timeout = setTimeout(() => {
           setDisplayed(false);
@@ -28032,126 +28050,140 @@ const Dialog = (t0) => {
         return _temp$2;
       }
     };
-    t6 = [open];
+    t7 = [open];
     $[0] = open;
-    $[1] = t5;
-    $[2] = t6;
+    $[1] = t6;
+    $[2] = t7;
   } else {
-    t5 = $[1];
-    t6 = $[2];
+    t6 = $[1];
+    t7 = $[2];
   }
-  useEffect(t5, t6);
-  const t7 = displayed || open;
-  let t8;
+  useEffect(t6, t7);
+  const t8 = displayed || open;
+  let t9;
   if ($[3] !== containerClassName) {
-    t8 = cls("fixed inset-0 z-30", containerClassName);
+    t9 = cls("fixed inset-0 z-30", containerClassName);
     $[3] = containerClassName;
-    $[4] = t8;
+    $[4] = t9;
   } else {
-    t8 = $[4];
+    t9 = $[4];
   }
-  const t9 = displayed && open ? "opacity-100" : "opacity-0";
-  let t10;
-  if ($[5] !== t9) {
-    t10 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t9, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
-    $[5] = t9;
-    $[6] = t10;
+  const t10 = displayed && open ? "opacity-100" : "opacity-0";
+  let t11;
+  if ($[5] !== t10) {
+    t11 = cls("fixed inset-0 transition-opacity z-20 ease-in-out duration-200 bg-black bg-opacity-50 dark:bg-opacity-60 backdrop-blur-sm ", t10, "z-20 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+    $[5] = t10;
+    $[6] = t11;
   } else {
-    t10 = $[6];
+    t11 = $[6];
   }
-  const t11 = displayed ? "auto" : "none";
-  let t12;
-  if ($[7] !== t11) {
-    t12 = {
-      pointerEvents: t11
+  const t12 = displayed ? "auto" : "none";
+  let t13;
+  if ($[7] !== t12) {
+    t13 = {
+      pointerEvents: t12
     };
-    $[7] = t11;
-    $[8] = t12;
+    $[7] = t12;
+    $[8] = t13;
   } else {
-    t12 = $[8];
+    t13 = $[8];
   }
-  let t13;
-  if ($[9] !== t10 || $[10] !== t12) {
-    t13 = /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: t10, style: t12 });
-    $[9] = t10;
-    $[10] = t12;
-    $[11] = t13;
+  let t14;
+  if ($[9] !== t11 || $[10] !== t13) {
+    t14 = /* @__PURE__ */ jsx(DialogPrimitive.Overlay, { className: t11, style: t13 });
+    $[9] = t11;
+    $[10] = t13;
+    $[11] = t14;
   } else {
-    t13 = $[11];
+    t14 = $[11];
   }
-  let t14;
-  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
-    $[12] = t14;
-  } else {
-    t14 = $[12];
-  }
-  const t15 = fullWidth && !fullScreen ? "w-11/12" : void 0;
-  const t16 = fullHeight && !fullScreen ? "h-full" : void 0;
-  const t17 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
-  const t18 = scrollable && "overflow-y-auto";
-  const t19 = displayed && open ? "opacity-100" : "opacity-0";
-  const t20 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
-  let t21;
-  if ($[13] !== className || $[14] !== t15 || $[15] !== t16 || $[16] !== t17 || $[17] !== t18 || $[18] !== t19 || $[19] !== t20) {
-    t21 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t15, t16, "text-surface-accent-900 dark:text-white", "justify-center items-center", t17, "ease-in-out duration-200", t18, t19, t20, className);
-    $[13] = className;
+  let t15;
+  if ($[12] !== disableInitialFocus || $[13] !== onOpenAutoFocus) {
+    t15 = (e) => {
+      if (disableInitialFocus) {
+        e.preventDefault();
+      }
+      onOpenAutoFocus?.(e);
+    };
+    $[12] = disableInitialFocus;
+    $[13] = onOpenAutoFocus;
     $[14] = t15;
-    $[15] = t16;
-    $[16] = t17;
-    $[17] = t18;
-    $[18] = t19;
-    $[19] = t20;
-    $[20] = t21;
   } else {
-    t21 = $[20];
+    t15 = $[14];
   }
-  let t22;
-  if ($[21] !== children || $[22] !== t21) {
-    t22 = /* @__PURE__ */ jsx("div", { className: t21, children });
-    $[21] = children;
-    $[22] = t21;
-    $[23] = t22;
+  let t16;
+  if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+    t16 = cls("h-full outline-none flex justify-center items-center z-40 opacity-100 transition-all duration-200 ease-in-out");
+    $[15] = t16;
   } else {
-    t22 = $[23];
+    t16 = $[15];
   }
+  const t17 = fullWidth && !fullScreen ? "w-11/12" : void 0;
+  const t18 = fullHeight && !fullScreen ? "h-full" : void 0;
+  const t19 = fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl";
+  const t20 = scrollable && "overflow-y-auto";
+  const t21 = displayed && open ? "opacity-100" : "opacity-0";
+  const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
   let t23;
-  if ($[24] !== onEscapeKeyDown || $[25] !== onInteractOutside || $[26] !== onOpenAutoFocus || $[27] !== onPointerDownOutside || $[28] !== t22) {
-    t23 = /* @__PURE__ */ jsx(DialogPrimitive.Content, { onEscapeKeyDown, onOpenAutoFocus, onPointerDownOutside, onInteractOutside, className: t14, children: t22 });
-    $[24] = onEscapeKeyDown;
-    $[25] = onInteractOutside;
-    $[26] = onOpenAutoFocus;
-    $[27] = onPointerDownOutside;
-    $[28] = t22;
-    $[29] = t23;
-  } else {
-    t23 = $[29];
+  if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
+    t23 = cls(paperMixin, "z-30", "relative", "outline-none focus:outline-none", t17, t18, "text-surface-accent-900 dark:text-white", "justify-center items-center", t19, "ease-in-out duration-200", t20, t21, t22, className);
+    $[16] = className;
+    $[17] = t17;
+    $[18] = t18;
+    $[19] = t19;
+    $[20] = t20;
+    $[21] = t21;
+    $[22] = t22;
+    $[23] = t23;
+  } else {
+    t23 = $[23];
   }
   let t24;
-  if ($[30] !== t13 || $[31] !== t23 || $[32] !== t8) {
-    t24 = /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", { className: t8, children: [
-      t13,
-      t23
-    ] }) });
-    $[30] = t13;
-    $[31] = t23;
-    $[32] = t8;
-    $[33] = t24;
+  if ($[24] !== children || $[25] !== t23) {
+    t24 = /* @__PURE__ */ jsx("div", { className: t23, children });
+    $[24] = children;
+    $[25] = t23;
+    $[26] = t24;
   } else {
-    t24 = $[33];
+    t24 = $[26];
   }
   let t25;
-  if ($[34] !== modal || $[35] !== onOpenChange || $[36] !== t24 || $[37] !== t7) {
-    t25 = /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: t7, modal, onOpenChange, children: t24 });
-    $[34] = modal;
-    $[35] = onOpenChange;
-    $[36] = t24;
-    $[37] = t7;
-    $[38] = t25;
+  if ($[27] !== onEscapeKeyDown || $[28] !== onInteractOutside || $[29] !== onPointerDownOutside || $[30] !== t15 || $[31] !== t24) {
+    t25 = /* @__PURE__ */ jsx(DialogPrimitive.Content, { onEscapeKeyDown, onOpenAutoFocus: t15, onPointerDownOutside, onInteractOutside, className: t16, children: t24 });
+    $[27] = onEscapeKeyDown;
+    $[28] = onInteractOutside;
+    $[29] = onPointerDownOutside;
+    $[30] = t15;
+    $[31] = t24;
+    $[32] = t25;
   } else {
-    t25 = $[38];
+    t25 = $[32];
   }
-  return t25;
+  let t26;
+  if ($[33] !== t14 || $[34] !== t25 || $[35] !== t9) {
+    t26 = /* @__PURE__ */ jsx(DialogPrimitive.Portal, { children: /* @__PURE__ */ jsxs("div", { className: t9, children: [
+      t14,
+      t25
+    ] }) });
+    $[33] = t14;
+    $[34] = t25;
+    $[35] = t9;
+    $[36] = t26;
+  } else {
+    t26 = $[36];
+  }
+  let t27;
+  if ($[37] !== modal || $[38] !== onOpenChange || $[39] !== t26 || $[40] !== t8) {
+    t27 = /* @__PURE__ */ jsx(DialogPrimitive.Root, { open: t8, modal, onOpenChange, children: t26 });
+    $[37] = modal;
+    $[38] = onOpenChange;
+    $[39] = t26;
+    $[40] = t8;
+    $[41] = t27;
+  } else {
+    t27 = $[41];
+  }
+  return t27;
 };
 function _temp$2() {
 }
@@ -28721,7 +28753,7 @@ const Label = React.forwardRef((t0, ref) => {
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 function LoadingButton(t0) {
-  const $ = c(18);
+  const $ = c(17);
   let children;
   let disabled;
   let loading;
@@ -28755,32 +28787,31 @@ function LoadingButton(t0) {
   const t1 = loading || disabled;
   const t2 = props.component;
   let t3;
-  if ($[7] !== loading || $[8] !== props.size) {
-    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: props.size === "small" ? "smallest" : "small" });
+  if ($[7] !== loading) {
+    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" });
     $[7] = loading;
-    $[8] = props.size;
-    $[9] = t3;
+    $[8] = t3;
   } else {
-    t3 = $[9];
+    t3 = $[8];
   }
   const t4 = !loading && startIcon;
   let t5;
-  if ($[10] !== children || $[11] !== onClick || $[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
+  if ($[9] !== children || $[10] !== onClick || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
     t5 = /* @__PURE__ */ jsxs(Button, { disabled: t1, onClick, component: t2, ...props, children: [
       t3,
       t4,
       children
     ] });
-    $[10] = children;
-    $[11] = onClick;
-    $[12] = props;
-    $[13] = t1;
-    $[14] = t2;
-    $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
+    $[9] = children;
+    $[10] = onClick;
+    $[11] = props;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
   } else {
-    t5 = $[17];
+    t5 = $[16];
   }
   return t5;
 }
@@ -30540,6 +30571,7 @@ const Select = forwardRef(({
   onValueChange,
   className,
   inputClassName,
+  viewportClassName,
   placeholder,
   renderValue,
   label,
@@ -30634,7 +30666,7 @@ const Select = forwardRef(({
         e_0.stopPropagation();
       }, children: endAdornment })
     ] }),
-    /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "p-1", style: {
+    /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(SelectPrimitive.Content, { position, className: cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-900 p-2 rounded-lg", defaultBorderMixin), children: /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: cls("p-1", viewportClassName), style: {
       maxHeight: "var(--radix-select-content-available-height)"
     }, children }) }) })
   ] });