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

package/dist/components/Autocomplete.d.ts

@@ -3,6 +3,7 @@ export type AutocompleteProps = {
     children: React.ReactNode;
     open: boolean;
     setOpen: (open: boolean) => void;
+    className?: string;
 };
 export declare const useAutoComplete: ({ ref }: {
     ref: React.MutableRefObject<HTMLDivElement | null>;
@@ -11,9 +12,10 @@ export declare const useAutoComplete: ({ ref }: {
     autoCompleteOpen: boolean;
     setAutoCompleteOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export declare function Autocomplete({ children, open, setOpen }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Autocomplete({ children, open, setOpen, className }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
 export type AutocompleteItemProps = {
     children: React.ReactNode;
     onClick?: () => void;
+    className?: string;
 };
-export declare function AutocompleteItem({ children, onClick }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function AutocompleteItem({ children, onClick, className }: AutocompleteItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Select.d.ts

@@ -23,6 +23,7 @@ export type SelectProps<T extends SelectValue = string> = {
     padding?: boolean;
     invisible?: boolean;
     children?: React.ReactNode;
+    dataType?: "string" | "number" | "boolean";
 };
 export declare const Select: React.ForwardRefExoticComponent<SelectProps<string> & React.RefAttributes<HTMLDivElement>>;
 export type SelectItemProps<T extends SelectValue = string> = {

package/dist/index.css

@@ -71,3 +71,4 @@
 a {
     @apply text-blue-600 dark:text-blue-400 dark:hover:text-blue-600 hover:text-blue-800
 }
+

package/dist/index.es.js

@@ -452,11 +452,12 @@ const useAutoComplete = ({
   };
 };
 function Autocomplete(t0) {
-  const $ = c(13);
+  const $ = c(14);
   const {
     children,
     open,
-    setOpen
+    setOpen,
+    className
   } = t0;
   const autocompleteRef = React__default.useRef(null);
   let t1;
@@ -479,50 +480,61 @@ function Autocomplete(t0) {
   }
   const t4 = open ? paperMixin : "";
   let t5;
-  if ($[4] !== t4) {
-    t5 = cls(t4, "bg-surface-50 dark:bg-surface-900 py-2");
-    $[4] = t4;
-    $[5] = t5;
+  if ($[4] !== className || $[5] !== t4) {
+    t5 = cls(t4, "bg-surface-50 dark:bg-surface-900", className);
+    $[4] = className;
+    $[5] = t4;
+    $[6] = t5;
   } else {
-    t5 = $[5];
+    t5 = $[6];
   }
   let t6;
-  if ($[6] !== children || $[7] !== t5) {
+  if ($[7] !== children || $[8] !== t5) {
     t6 = /* @__PURE__ */ jsx("div", { ref: autocompleteRef, className: t5, children });
-    $[6] = children;
-    $[7] = t5;
-    $[8] = t6;
+    $[7] = children;
+    $[8] = t5;
+    $[9] = t6;
   } else {
-    t6 = $[8];
+    t6 = $[9];
   }
   let t7;
-  if ($[9] !== open || $[10] !== t3 || $[11] !== t6) {
-    t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 50, className: t3, children: t6 });
-    $[9] = open;
-    $[10] = t3;
-    $[11] = t6;
-    $[12] = t7;
+  if ($[10] !== open || $[11] !== t3 || $[12] !== t6) {
+    t7 = /* @__PURE__ */ jsx(Collapse, { in: open, duration: 30, className: t3, children: t6 });
+    $[10] = open;
+    $[11] = t3;
+    $[12] = t6;
+    $[13] = t7;
   } else {
-    t7 = $[12];
+    t7 = $[13];
   }
   return t7;
 }
 function AutocompleteItem(t0) {
-  const $ = c(3);
+  const $ = c(6);
   const {
     children,
-    onClick
+    onClick,
+    className
   } = t0;
   let t1;
-  if ($[0] !== children || $[1] !== onClick) {
-    t1 = /* @__PURE__ */ jsx("div", { className: "flex w-full items-center pr-6 pl-14 h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", onClick, children });
-    $[0] = children;
-    $[1] = onClick;
-    $[2] = t1;
+  if ($[0] !== className) {
+    t1 = cls("flex w-full items-center h-[48px] cursor-pointer hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", className);
+    $[0] = className;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
-  return t1;
+  let t2;
+  if ($[2] !== children || $[3] !== onClick || $[4] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { className: t1, onClick, children });
+    $[2] = children;
+    $[3] = onClick;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
 }
 const getSizeClasses = (size) => {
   switch (size) {
@@ -869,7 +881,7 @@ const ButtonInner = React__default.forwardRef((t0, ref) => {
         "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,
         "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": t16,
-        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
+        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg": t18,
         "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,
@@ -1267,6 +1279,7 @@ const Icon = React.forwardRef((t0, ref) => {
   if ($[0] !== style || $[1] !== t2) {
     t3 = {
       fontSize: t2,
+      verticalAlign: "middle",
       ...style
     };
     $[0] = style;
@@ -1278,7 +1291,7 @@ const Icon = React.forwardRef((t0, ref) => {
   const t4 = color ? colorClassesMapping[color] : "";
   let t5;
   if ($[3] !== className || $[4] !== t4) {
-    t5 = cls("material-icons", "block", t4, "select-none", className);
+    t5 = cls("material-icons", t4, "select-none", className);
     $[3] = className;
     $[4] = t4;
     $[5] = t5;
@@ -28708,7 +28721,7 @@ const Label = React.forwardRef((t0, ref) => {
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 function LoadingButton(t0) {
-  const $ = c(17);
+  const $ = c(18);
   let children;
   let disabled;
   let loading;
@@ -28742,31 +28755,32 @@ function LoadingButton(t0) {
   const t1 = loading || disabled;
   const t2 = props.component;
   let t3;
-  if ($[7] !== loading) {
-    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: "small" });
+  if ($[7] !== loading || $[8] !== props.size) {
+    t3 = loading && /* @__PURE__ */ jsx(CircularProgress, { size: props.size === "small" ? "smallest" : "small" });
     $[7] = loading;
-    $[8] = t3;
+    $[8] = props.size;
+    $[9] = t3;
   } else {
-    t3 = $[8];
+    t3 = $[9];
   }
   const t4 = !loading && startIcon;
   let t5;
-  if ($[9] !== children || $[10] !== onClick || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t4) {
+  if ($[10] !== children || $[11] !== onClick || $[12] !== props || $[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
     t5 = /* @__PURE__ */ jsxs(Button, { disabled: t1, onClick, component: t2, ...props, children: [
       t3,
       t4,
       children
     ] });
-    $[9] = children;
-    $[10] = onClick;
-    $[11] = props;
-    $[12] = t1;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = t4;
-    $[16] = t5;
+    $[10] = children;
+    $[11] = onClick;
+    $[12] = props;
+    $[13] = t1;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
   } else {
-    t5 = $[16];
+    t5 = $[17];
   }
   return t5;
 }
@@ -29653,7 +29667,7 @@ function SelectInputLabel(t0) {
 }
 const MultiSelectContext = React.createContext({});
 const MultiSelect = React.forwardRef((t0, ref) => {
-  const $ = c(102);
+  const $ = c(103);
   const {
     value,
     size: t1,
@@ -29898,7 +29912,7 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     t24 = $[48];
   }
   let t25;
-  if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== toggleOption || $[57] !== useChips) {
+  if ($[49] !== children || $[50] !== handleClear || $[51] !== includeClear || $[52] !== isPopoverOpen || $[53] !== placeholder || $[54] !== renderValues || $[55] !== selectedValues || $[56] !== size || $[57] !== toggleOption || $[58] !== useChips) {
     t25 = 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),
@@ -29922,11 +29936,11 @@ const MultiSelect = React.forwardRef((t0, ref) => {
           event_1.stopPropagation();
           handleClear();
         } }),
-        /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
+        /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
       ] })
     ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full mx-auto", children: [
       /* @__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" : "") }) })
+      /* @__PURE__ */ jsx("div", { className: cls("px-2 h-full flex items-center"), children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", isPopoverOpen ? "rotate-180" : "") }) })
     ] });
     $[49] = children;
     $[50] = handleClear;
@@ -29935,104 +29949,105 @@ const MultiSelect = React.forwardRef((t0, ref) => {
     $[53] = placeholder;
     $[54] = renderValues;
     $[55] = selectedValues;
-    $[56] = toggleOption;
-    $[57] = useChips;
-    $[58] = t25;
+    $[56] = size;
+    $[57] = toggleOption;
+    $[58] = useChips;
+    $[59] = t25;
   } else {
-    t25 = $[58];
+    t25 = $[59];
   }
   let t26;
-  if ($[59] !== handleTogglePopover || $[60] !== ref || $[61] !== t24 || $[62] !== t25) {
+  if ($[60] !== handleTogglePopover || $[61] !== ref || $[62] !== t24 || $[63] !== t25) {
     t26 = /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsx("button", { ref, onClick: handleTogglePopover, className: t24, children: t25 }) });
-    $[59] = handleTogglePopover;
-    $[60] = ref;
-    $[61] = t24;
-    $[62] = t25;
-    $[63] = t26;
+    $[60] = handleTogglePopover;
+    $[61] = ref;
+    $[62] = t24;
+    $[63] = t25;
+    $[64] = t26;
   } else {
-    t26 = $[63];
+    t26 = $[64];
   }
   let t27;
-  if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
     t27 = cls("z-50 relative overflow-hidden border bg-white dark:bg-surface-900 rounded-lg w-[400px]", defaultBorderMixin);
-    $[64] = t27;
+    $[65] = t27;
   } else {
-    t27 = $[64];
+    t27 = $[65];
   }
   let t28;
-  if ($[65] !== onPopoverOpenChange) {
+  if ($[66] !== onPopoverOpenChange) {
     t28 = () => onPopoverOpenChange(false);
-    $[65] = onPopoverOpenChange;
-    $[66] = t28;
+    $[66] = onPopoverOpenChange;
+    $[67] = t28;
   } else {
-    t28 = $[66];
+    t28 = $[67];
   }
   let t29;
-  if ($[67] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
     t29 = cls(focusedDisabled, "bg-transparent outline-none flex-1 h-full w-full m-4 flex-grow ");
-    $[67] = t29;
+    $[68] = t29;
   } else {
-    t29 = $[67];
+    t29 = $[68];
   }
   let t30;
-  if ($[68] !== handleInputKeyDown) {
+  if ($[69] !== handleInputKeyDown) {
     t30 = /* @__PURE__ */ jsx(Command.Input, { className: t29, placeholder: "Search...", onKeyDown: handleInputKeyDown });
-    $[68] = handleInputKeyDown;
-    $[69] = t30;
+    $[69] = handleInputKeyDown;
+    $[70] = t30;
   } else {
-    t30 = $[69];
+    t30 = $[70];
   }
   let t31;
-  if ($[70] !== handleClear || $[71] !== selectedValues.length) {
+  if ($[71] !== handleClear || $[72] !== selectedValues.length) {
     t31 = 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" });
-    $[70] = handleClear;
-    $[71] = selectedValues.length;
-    $[72] = t31;
+    $[71] = handleClear;
+    $[72] = selectedValues.length;
+    $[73] = t31;
   } else {
-    t31 = $[72];
+    t31 = $[73];
   }
   let t32;
-  if ($[73] !== t30 || $[74] !== t31) {
+  if ($[74] !== t30 || $[75] !== t31) {
     t32 = /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center", children: [
       t30,
       t31
     ] });
-    $[73] = t30;
-    $[74] = t31;
-    $[75] = t32;
+    $[74] = t30;
+    $[75] = t31;
+    $[76] = t32;
   } else {
-    t32 = $[75];
+    t32 = $[76];
   }
   let t33;
-  if ($[76] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
     t33 = /* @__PURE__ */ jsx(Separator, { orientation: "horizontal", className: "my-0" });
-    $[76] = t33;
+    $[77] = t33;
   } else {
-    t33 = $[76];
+    t33 = $[77];
   }
   let t34;
-  if ($[77] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[78] === Symbol.for("react.memo_cache_sentinel")) {
     t34 = /* @__PURE__ */ jsx(Command.Empty, { className: "px-4 py-2", children: "No results found." });
-    $[77] = t34;
+    $[78] = t34;
   } else {
-    t34 = $[77];
+    t34 = $[78];
   }
   let t35;
-  if ($[78] !== allValues.length || $[79] !== includeSelectAll || $[80] !== selectedValues.length || $[81] !== toggleAll) {
+  if ($[79] !== allValues.length || $[80] !== includeSelectAll || $[81] !== selectedValues.length || $[82] !== toggleAll) {
     t35 = 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");
-    $[78] = allValues.length;
-    $[79] = includeSelectAll;
-    $[80] = selectedValues.length;
-    $[81] = toggleAll;
-    $[82] = t35;
+    $[79] = allValues.length;
+    $[80] = includeSelectAll;
+    $[81] = selectedValues.length;
+    $[82] = toggleAll;
+    $[83] = t35;
   } else {
-    t35 = $[82];
+    t35 = $[83];
   }
   let t36;
-  if ($[83] !== children || $[84] !== t35) {
+  if ($[84] !== children || $[85] !== t35) {
     t36 = /* @__PURE__ */ jsxs(Command.List, { children: [
       t34,
       /* @__PURE__ */ jsxs(Command.Group, { children: [
@@ -30040,61 +30055,61 @@ const MultiSelect = React.forwardRef((t0, ref) => {
         children
       ] })
     ] });
-    $[83] = children;
-    $[84] = t35;
-    $[85] = t36;
+    $[84] = children;
+    $[85] = t35;
+    $[86] = t36;
   } else {
-    t36 = $[85];
+    t36 = $[86];
   }
   let t37;
-  if ($[86] !== t32 || $[87] !== t36) {
+  if ($[87] !== t32 || $[88] !== t36) {
     t37 = /* @__PURE__ */ jsxs(Command, { children: [
       t32,
       t33,
       t36
     ] });
-    $[86] = t32;
-    $[87] = t36;
-    $[88] = t37;
+    $[87] = t32;
+    $[88] = t36;
+    $[89] = t37;
   } else {
-    t37 = $[88];
+    t37 = $[89];
   }
   let t38;
-  if ($[89] !== t28 || $[90] !== t37) {
+  if ($[90] !== t28 || $[91] !== t37) {
     t38 = /* @__PURE__ */ jsx(PopoverPrimitive.Content, { className: t27, align: "start", sideOffset: 8, onEscapeKeyDown: t28, children: t37 });
-    $[89] = t28;
-    $[90] = t37;
-    $[91] = t38;
+    $[90] = t28;
+    $[91] = t37;
+    $[92] = t38;
   } else {
-    t38 = $[91];
+    t38 = $[92];
   }
   let t39;
-  if ($[92] !== isPopoverOpen || $[93] !== modalPopover || $[94] !== onPopoverOpenChange || $[95] !== t26 || $[96] !== t38) {
+  if ($[93] !== isPopoverOpen || $[94] !== modalPopover || $[95] !== onPopoverOpenChange || $[96] !== t26 || $[97] !== t38) {
     t39 = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open: isPopoverOpen, onOpenChange: onPopoverOpenChange, modal: modalPopover, children: [
       t26,
       t38
     ] });
-    $[92] = isPopoverOpen;
-    $[93] = modalPopover;
-    $[94] = onPopoverOpenChange;
-    $[95] = t26;
-    $[96] = t38;
-    $[97] = t39;
+    $[93] = isPopoverOpen;
+    $[94] = modalPopover;
+    $[95] = onPopoverOpenChange;
+    $[96] = t26;
+    $[97] = t38;
+    $[98] = t39;
   } else {
-    t39 = $[97];
+    t39 = $[98];
   }
   let t40;
-  if ($[98] !== t18 || $[99] !== t19 || $[100] !== t39) {
+  if ($[99] !== t18 || $[100] !== t19 || $[101] !== t39) {
     t40 = /* @__PURE__ */ jsxs(MultiSelectContext.Provider, { value: t18, children: [
       t19,
       t39
     ] });
-    $[98] = t18;
-    $[99] = t19;
-    $[100] = t39;
-    $[101] = t40;
+    $[99] = t18;
+    $[100] = t19;
+    $[101] = t39;
+    $[102] = t40;
   } else {
-    t40 = $[101];
+    t40 = $[102];
   }
   return t40;
 });
@@ -30536,6 +30551,7 @@ const Select = forwardRef(({
   endAdornment,
   invisible,
   children,
+  dataType = "string",
   ...props
 }, ref) => {
   const [openInternal, setOpenInternal] = useState(open ?? false);
@@ -30544,9 +30560,12 @@ const Select = forwardRef(({
   }, [open]);
   const onValueChangeInternal = useCallback((newValue) => {
     let typedValue = newValue;
-    if (newValue === "true") typedValue = true;
-    else if (newValue === "false") typedValue = false;
-    else if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+    if (dataType === "boolean") {
+      if (newValue === "true") typedValue = true;
+      else if (newValue === "false") typedValue = false;
+    } else if (dataType === "number") {
+      if (!isNaN(Number(newValue)) && newValue.trim() !== "") typedValue = Number(newValue);
+    }
     onValueChange?.(typedValue);
     if (onChange) {
       const event = {
@@ -30565,54 +30584,56 @@ const Select = forwardRef(({
     setOpenInternal(open_0);
   }, ...props, children: [
     typeof label === "string" ? /* @__PURE__ */ jsx(SelectInputLabel, { error, children: label }) : label,
-    /* @__PURE__ */ jsx("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
+    /* @__PURE__ */ jsxs("div", { className: cls("select-none rounded-md text-sm", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin, "relative flex items-center", className, {
       "min-h-[28px]": size === "smallest",
       "min-h-[32px]": size === "small",
       "min-h-[42px]": size === "medium",
       "min-h-[64px]": size === "large",
       "w-fit": !fullWidth,
       "w-full": fullWidth
-    }), children: /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
-      "px-4": size === "large",
-      "px-3": size === "medium",
-      "px-2": size === "small" || size === "smallest"
-    } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
-      "min-h-[28px]": size === "smallest",
-      "min-h-[32px]": size === "small",
-      "min-h-[42px]": size === "medium",
-      "min-h-[64px]": size === "large",
-      "w-full": fullWidth,
-      "w-fit": !fullWidth
-    }, inputClassName), children: [
-      /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
+    }), children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.Trigger, { ref: inputRef, id, asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cls("h-full", padding ? {
+        "px-4": size === "large",
+        "px-3": size === "medium",
+        "px-2": size === "small" || size === "smallest"
+      } : "", "outline-none focus:outline-none", "select-none rounded-md text-sm", error ? "text-red-500 dark:text-red-600" : "focus:text-text-primary dark:focus:text-text-primary-dark", error ? "border border-red-500 dark:border-red-600" : "", disabled ? "text-surface-accent-600 dark:text-surface-accent-400" : "text-surface-accent-800 dark:text-white", "relative flex flex-row items-center", {
         "min-h-[28px]": size === "smallest",
         "min-h-[32px]": size === "small",
         "min-h-[42px]": size === "medium",
-        "min-h-[64px]": size === "large"
-      }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }, placeholder, className: "w-full", children: [
-        hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
-        hasValue && !renderValue && (() => {
-          const childrenProps = Children.map(children, (child) => {
-            if (React__default.isValidElement(child)) {
-              return child.props;
-            }
-          }).filter(Boolean);
-          const option = childrenProps.find((o) => String(o.value) === String(value));
-          return option?.children;
-        })()
+        "min-h-[64px]": size === "large",
+        "w-full": fullWidth,
+        "w-fit": !fullWidth
+      }, inputClassName), children: [
+        /* @__PURE__ */ jsx("div", { ref, className: cls("flex-grow max-w-full flex flex-row gap-2 items-center", "overflow-visible", {
+          "min-h-[28px]": size === "smallest",
+          "min-h-[32px]": size === "small",
+          "min-h-[42px]": size === "medium",
+          "min-h-[64px]": size === "large"
+        }), children: /* @__PURE__ */ jsxs(SelectPrimitive.Value, { onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }, placeholder, className: "w-full", children: [
+          hasValue && value !== void 0 && renderValue ? renderValue(value) : placeholder,
+          hasValue && !renderValue && (() => {
+            const childrenProps = Children.map(children, (child) => {
+              if (React__default.isValidElement(child)) {
+                return child.props;
+              }
+            }).filter(Boolean);
+            const option = childrenProps.find((o) => String(o.value) === String(value));
+            return option?.children;
+          })()
+        ] }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: size === "large" ? "medium" : "small", className: cls("transition", open ? "rotate-180" : "", {
+          "px-2": size === "large",
+          "px-1": size === "medium" || size === "small"
+        }) }) })
       ] }) }),
-      endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center"), onClick: (e_0) => {
+      endAdornment && /* @__PURE__ */ jsx("div", { className: cls("h-full flex items-center absolute right-0 pr-12"), onClick: (e_0) => {
         e_0.preventDefault();
         e_0.stopPropagation();
-      }, children: endAdornment }),
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "medium", className: cls("transition", open ? "rotate-180" : "", {
-        "px-2": size === "large",
-        "px-1": size === "medium" || size === "small"
-      }) }) })
-    ] }) }) }),
+      }, 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: {
       maxHeight: "var(--radix-select-content-available-height)"
     }, children }) }) })