@rebasepro/ui 0.0.1-canary.eae7889 → 0.1.0

package/dist/components/FileUpload.d.ts

@@ -9,7 +9,7 @@ export type OnFileUploadRejected = (fileRejections: {
 }[], event: object) => void;
 export type OnFilesUploadAdded = (files: File[]) => void;
 export type FileUploadProps = {
-    accept: Record<string, string[]>;
+    accept?: Record<string, string[]>;
     onFilesAdded: OnFilesUploadAdded;
     onFilesRejected?: OnFileUploadRejected;
     maxSize?: number;

package/dist/components/SearchBar.d.ts

@@ -17,6 +17,10 @@ interface SearchBarProps {
     disabled?: boolean;
     loading?: boolean;
     inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * Optional initial value for the search input, e.g. from URL params.
+     */
+    initialValue?: string;
 }
-export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare function SearchBar({ onClick, onTextSearch, placeholder, expandable, size, innerClassName, className, autoFocus, disabled, loading, inputRef, initialValue }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.css

@@ -97,6 +97,7 @@
 }
 
 .typography-body1 {
+    @apply text-base;
 }
 
 .typography-body2 {

package/dist/index.es.js

@@ -200,8 +200,8 @@ const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-
 const fieldBackgroundHoverMixin = "hover:bg-opacity-70 dark:hover:bg-surface-700 dark:hover:bg-opacity-40 hover:bg-surface-accent-200/70 hover:dark:bg-surface-700/40";
 const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
 const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-const cardMixin = "bg-white dark:bg-surface-800 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-2 hover:ring-primary cursor-pointer hover:bg-primary/20 dark:hover:bg-primary/10 ";
+const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
+const cardClickableMixin = "hover:bg-surface-accent-100 dark:hover:bg-surface-800 hover:ring-1 hover:ring-primary/50 hover:shadow-sm cursor-pointer hover:bg-primary/10 dark:hover:bg-primary/10 transition-all duration-150";
 const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";
 const PortalContainerContext = createContext(void 0);
 function PortalContainerProvider(t0) {
@@ -624,16 +624,16 @@ const getSizeClasses = (size) => {
 const getColorClasses = (severity) => {
   switch (severity) {
     case "error":
-      return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900";
+      return "bg-red-50 dark:bg-red-800 dark:text-red-100 text-red-900 border-l-[3px] border-l-red-500";
     case "warning":
-      return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900";
+      return "bg-amber-50 dark:bg-amber-800 dark:text-amber-100 text-amber-900 border-l-[3px] border-l-amber-500";
     case "info":
-      return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900";
+      return "bg-blue-100 dark:bg-blue-800 dark:text-blue-100 text-blue-900 border-l-[3px] border-l-blue-500";
     case "success":
-      return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900";
+      return "bg-emerald-50 dark:bg-emerald-800 dark:text-emerald-100 text-emerald-900 border-l-[3px] border-l-emerald-500";
     case "base":
     default:
-      return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900";
+      return "bg-surface-accent-50 dark:bg-surface-accent-800 dark:text-white text-surface-accent-900 border-l-[3px] border-l-surface-accent-400";
   }
 };
 const Alert = (t0) => {
@@ -817,7 +817,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
       onValueChange?.(!value);
     }
   }, 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-[44px] h-[26px] min-w-[44px] min-h-[26px]", "outline-none outline-hidden rounded-full relative shadow-sm", value ? disabled ? "bg-white bg-opacity-54 bg-white/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 bg-white/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", {
+    allowIndeterminate && (value === null || value === void 0) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", 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",
@@ -825,7 +825,7 @@ const BooleanSwitch = React__default.forwardRef(function BooleanSwitch2({
       "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", {
+    !(allowIndeterminate && (value === null || value === void 0)) && /* @__PURE__ */ jsx("div", { className: cls("block rounded-full transition-transform duration-100 ease-out transform will-change-auto shadow-sm", disabled ? "bg-surface-accent-300 dark:bg-surface-700" : value ? "bg-white shadow" : "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",
@@ -961,21 +961,21 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
       const buttonClasses2 = cls({
         "w-full": fullWidth,
         "w-fit": t7,
-        "border border-primary bg-primary focus:ring-primary shadow hover:ring-1 hover:ring-primary text-white hover:text-white": t8,
-        "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-900 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-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t8,
+        "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": t9,
+        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 shadow-sm hover:shadow-md 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-sm hover:shadow-md text-text-primary hover:text-text-primary dark:border-surface-accent-700 dark:bg-surface-accent-700 dark:hover:bg-surface-accent-600 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-700 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 hover:bg-surface-accent-200/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 hover:bg-surface-accent-200/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 hover:bg-red-500/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:text-text-primary-dark dark:hover:bg-surface-accent-700": t17,
+        "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:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t16,
+        "border border-transparent text-text-primary hover:text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:text-text-primary-dark dark:hover:text-text-primary-dark dark:hover:bg-surface-accent-800": t17,
         "border border-primary text-primary hover:text-primary hover:bg-primary-bg hover:bg-primary/10": 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,
-        "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-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,
+        "border border-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark dark:border-surface-accent-600 hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800": t21,
+        "border border-surface-300 text-text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:border-surface-600 dark:text-text-primary-dark dark:hover:bg-surface-accent-800": t22,
         "text-text-disabled dark:text-text-disabled-dark": disabled,
         "border border-transparent opacity-50": t23,
         "border border-surface-500 opacity-50": t24,
@@ -990,7 +990,7 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
       });
       const iconColorClass = (color === "neutral" || color === "text") && !disabled ? "[&>svg]:text-surface-accent-500 dark:[&>svg]:text-surface-accent-300" : "";
       if (Component) {
-        t30 = /* @__PURE__ */ jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
+        t30 = /* @__PURE__ */ jsxs(Component, { ref, onClick: props.onClick, className: cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className), ...props, children: [
           startIcon,
           children
         ] });
@@ -999,7 +999,7 @@ const ButtonInner = React__default.memo(React__default.forwardRef((t0, ref) => {
       t26 = ref;
       t27 = props.type ?? "button";
       t28 = props.onClick;
-      t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition ease-in-out duration-150 gap-2", buttonClasses2, sizeClasses2, iconColorClass, className);
+      t29 = cls(startIcon ? "pl-3" : "", "typography-button h-fit rounded-md whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-all ease-in-out duration-150 gap-2 active:scale-[0.98]", buttonClasses2, sizeClasses2, iconColorClass, className);
     }
     $[11] = Component;
     $[12] = children;
@@ -1635,7 +1635,7 @@ const Checkbox = React__default.memo((t0) => {
   const t13 = sizeClasses$1[size];
   const t14 = disabled ? indeterminate || isChecked ? "bg-surface-accent-400 dark:bg-surface-accent-600" : "bg-surface-accent-400 dark:bg-surface-accent-600" : indeterminate || isChecked ? colorClasses$2[color] : "bg-white dark:bg-surface-900";
   const t15 = indeterminate || isChecked ? "text-surface-accent-100 dark:text-surface-accent-900" : "";
-  const t16 = disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-200";
+  const t16 = disabled ? "border-transparent" : indeterminate || isChecked ? "border-transparent" : "border-surface-accent-800 dark:border-surface-accent-500";
   let t17;
   if ($[5] !== t13 || $[6] !== t14 || $[7] !== t15 || $[8] !== t16) {
     t17 = cls("border-2 relative transition-colors ease-in-out duration-150", t13, t14, t15, t16);
@@ -1776,7 +1776,7 @@ function Chip(t0) {
   return t11;
 }
 const Tooltip = (t0) => {
-  const $ = c(28);
+  const $ = c(30);
   const {
     open,
     defaultOpen,
@@ -1824,61 +1824,72 @@ const Tooltip = (t0) => {
   }
   const trigger = t4;
   let t5;
-  if ($[7] !== tooltipClassName) {
-    t5 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
-    $[7] = tooltipClassName;
-    $[8] = t5;
+  if ($[7] !== onOpenChange || $[8] !== open) {
+    t5 = open !== void 0 ? {
+      open,
+      onOpenChange
+    } : {};
+    $[7] = onOpenChange;
+    $[8] = open;
+    $[9] = t5;
   } else {
-    t5 = $[8];
+    t5 = $[9];
   }
-  const t6 = sideOffset === void 0 ? 4 : sideOffset;
-  let t7;
-  if ($[9] !== align || $[10] !== side || $[11] !== t5 || $[12] !== t6 || $[13] !== title || $[14] !== tooltipStyle) {
-    t7 = /* @__PURE__ */ jsx(TooltipPrimitive.Content, { className: t5, style: tooltipStyle, sideOffset: t6, align, side, children: title });
-    $[9] = align;
-    $[10] = side;
-    $[11] = t5;
-    $[12] = t6;
-    $[13] = title;
-    $[14] = tooltipStyle;
-    $[15] = t7;
+  let t6;
+  if ($[10] !== tooltipClassName) {
+    t6 = cls("TooltipContent", "max-w-lg leading-relaxed", "z-50 rounded px-3 py-2 text-xs leading-none bg-surface-accent-700 dark:bg-surface-accent-800 bg-opacity-90 bg-surface-accent-700/90 dark:bg-surface-accent-800/90 font-medium text-surface-accent-50 shadow-2xl select-none duration-400 ease-in transform opacity-100", tooltipClassName);
+    $[10] = tooltipClassName;
+    $[11] = t6;
   } else {
-    t7 = $[15];
+    t6 = $[11];
   }
+  const t7 = sideOffset === void 0 ? 4 : sideOffset;
   let t8;
-  if ($[16] !== finalContainer || $[17] !== t7) {
-    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t7 });
-    $[16] = finalContainer;
-    $[17] = t7;
+  if ($[12] !== align || $[13] !== side || $[14] !== t6 || $[15] !== t7 || $[16] !== title || $[17] !== tooltipStyle) {
+    t8 = /* @__PURE__ */ jsx(TooltipPrimitive.Content, { className: t6, style: tooltipStyle, sideOffset: t7, align, side, children: title });
+    $[12] = align;
+    $[13] = side;
+    $[14] = t6;
+    $[15] = t7;
+    $[16] = title;
+    $[17] = tooltipStyle;
     $[18] = t8;
   } else {
     t8 = $[18];
   }
   let t9;
-  if ($[19] !== defaultOpen || $[20] !== onOpenChange || $[21] !== open || $[22] !== t8 || $[23] !== trigger) {
-    t9 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, onOpenChange, defaultOpen, children: [
+  if ($[19] !== finalContainer || $[20] !== t8) {
+    t9 = /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { container: finalContainer, children: t8 });
+    $[19] = finalContainer;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== defaultOpen || $[23] !== t5 || $[24] !== t9 || $[25] !== trigger) {
+    t10 = /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { ...t5, defaultOpen, children: [
       trigger,
-      t8
+      t9
     ] });
-    $[19] = defaultOpen;
-    $[20] = onOpenChange;
-    $[21] = open;
-    $[22] = t8;
-    $[23] = trigger;
+    $[22] = defaultOpen;
+    $[23] = t5;
     $[24] = t9;
+    $[25] = trigger;
+    $[26] = t10;
   } else {
-    t9 = $[24];
+    t10 = $[26];
   }
-  let t10;
-  if ($[25] !== delayDuration || $[26] !== t9) {
-    t10 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t9 });
-    $[25] = delayDuration;
-    $[26] = t9;
-    $[27] = t10;
+  let t11;
+  if ($[27] !== delayDuration || $[28] !== t10) {
+    t11 = /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: t10 });
+    $[27] = delayDuration;
+    $[28] = t10;
+    $[29] = t11;
   } else {
-    t10 = $[27];
+    t11 = $[29];
   }
-  return t10;
+  return t11;
 };
 const styles$2 = `
 
@@ -2023,7 +2034,7 @@ function ColorPicker(t0) {
   }
   return t7;
 }
-const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-105 transition-transform";
+const buttonClasses = "hover:bg-surface-accent-200 hover:bg-opacity-75 hover:bg-surface-accent-200/75 dark:hover:bg-surface-accent-800 hover:scale-[1.04] active:scale-95 transition-transform";
 const baseClasses = "inline-flex items-center justify-center p-2 text-sm font-medium focus:outline-none transition-colors ease-in-out duration-150";
 const colorClasses$1 = "text-surface-accent-500 visited:text-surface-accent-500 dark:text-surface-accent-300 dark:visited:text-surface-300";
 const sizeClasses = {
@@ -2334,7 +2345,7 @@ const DateTimeField = ({
       /* @__PURE__ */ jsx(IconButton, { onClick: (e_2) => {
         e_2.stopPropagation();
         inputRef.current?.showPicker();
-      }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsx(CalendarIcon, { color: "disabled" }) }),
+      }, className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-surface-accent-500!", children: /* @__PURE__ */ jsx(CalendarIcon, {}) }),
       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(XIcon, {}) })
     ] }),
     invalidValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center m-2", children: [
@@ -2437,7 +2448,7 @@ const Dialog = (t0) => {
   const t10 = displayed && open ? "opacity-100" : "opacity-0";
   let t11;
   if ($[5] !== t10) {
-    t11 = cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 dark: bg-black/60  backdrop-blur-sm ", t10, "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center");
+    t11 = cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black dark:bg-opacity-60 dark:bg-black/60 bg-opacity-50 bg-black/50 backdrop-blur-sm", t10, "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center");
     $[5] = t10;
     $[6] = t11;
   } else {
@@ -2488,7 +2499,7 @@ const Dialog = (t0) => {
   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 t21 = displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]";
   const t22 = maxWidth && !fullScreen ? widthClasses[maxWidth] : void 0;
   let t23;
   if ($[16] !== className || $[17] !== t17 || $[18] !== t18 || $[19] !== t19 || $[20] !== t20 || $[21] !== t21 || $[22] !== t22) {
@@ -2823,7 +2834,7 @@ function ExpandablePanel(t0) {
   const t13 = asField && fieldBackgroundMixin;
   let t14;
   if ($[11] !== t10 || $[12] !== t11 || $[13] !== t12 || $[14] !== t13 || $[15] !== titleClassName) {
-    t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "cursor-pointer");
+    t14 = cls("rounded-t flex items-center justify-between w-full min-h-[52px]", "hover:bg-surface-accent-200 hover:bg-opacity-40 hover:bg-surface-accent-200/40 dark:hover:bg-surface-800 dark:hover:bg-opacity-40 dark:hover:bg-surface-800/40 active:bg-surface-accent-300/50 dark:active:bg-surface-700/50", t10, t11, "transition-all duration-200", t12, t13, titleClassName, "cursor-pointer");
     $[11] = t10;
     $[12] = t11;
     $[13] = t12;
@@ -4032,7 +4043,7 @@ function Separator(t0) {
   if (orientation === "horizontal") {
     let t1;
     if ($[0] !== className) {
-      t1 = cls("dark:bg-opacity-80 dark:bg-surface-900 dark:bg-surface-900/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
+      t1 = cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-4", className);
       $[0] = className;
       $[1] = t1;
     } else {
@@ -4051,7 +4062,7 @@ function Separator(t0) {
   } else {
     let t1;
     if ($[5] !== className) {
-      t1 = cls("dark:bg-opacity-80 dark:bg-surface-900 dark:bg-surface-900/80 bg-surface-100 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
+      t1 = cls("dark:bg-surface-700 bg-surface-200 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px mx-4", className);
       $[5] = className;
       $[6] = t1;
     } else {
@@ -5046,12 +5057,13 @@ function SearchBar(t0) {
     autoFocus,
     disabled,
     loading,
-    inputRef
+    inputRef,
+    initialValue
   } = t0;
   const placeholder = t1 === void 0 ? "Search" : t1;
   const expandable = t2 === void 0 ? false : t2;
   const size = t3 === void 0 ? "medium" : t3;
-  const [searchText, setSearchText] = useState("");
+  const [searchText, setSearchText] = useState(initialValue ?? "");
   const [active, setActive] = useState(false);
   const deferredValues = useDebounceValue(searchText, 200);
   let t4;
@@ -5101,7 +5113,7 @@ function SearchBar(t0) {
   const inputPaddingClass = size === "smallest" ? "pl-8" : size === "small" ? "pl-8" : "pl-12";
   let t7;
   if ($[7] !== className || $[8] !== heightClass) {
-    t7 = cls("relative transition-all", heightClass, "bg-surface-accent-50 dark:bg-surface-900 border", defaultBorderMixin, "focus-within:ring-2 focus-within:ring-primary focus-within:border-primary", "rounded-lg overflow-hidden", className);
+    t7 = cls("relative transition-all", heightClass, "bg-surface-accent-50 dark:bg-surface-900 border", defaultBorderMixin, "focus-within:ring-1 focus-within:ring-primary/60 focus-within:border-primary focus-within:shadow-[0_0_0_3px_rgba(0,112,244,0.1)]", "rounded-lg overflow-hidden", className);
     $[7] = className;
     $[8] = heightClass;
     $[9] = t7;
@@ -5609,7 +5621,7 @@ const Select = forwardRef((t0, ref) => {
   }
   let t40;
   if ($[99] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t40 = cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg", defaultBorderMixin);
+    t40 = cls(focusedDisabled, "z-50 relative overflow-hidden border bg-white dark:bg-surface-800 p-2 rounded-lg shadow-lg animate-in fade-in-0 zoom-in-95 duration-150", defaultBorderMixin);
     $[99] = t40;
   } else {
     t40 = $[99];
@@ -6701,7 +6713,7 @@ function Tab(t0) {
   const {
     variant
   } = useContext(TabsContext);
-  const t1 = variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50";
+  const t1 = variant === "standard" && "rounded-sm px-3 py-1.5 data-[state=active]:bg-white data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:bg-surface-900 dark:data-[state=active]:text-surface-50";
   let t2;
   if ($[0] !== className || $[1] !== innerClassName || $[2] !== t1 || $[3] !== variant) {
     t2 = cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-white transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2", "disabled:pointer-events-none disabled:opacity-50", t1, variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 border-r border-surface-200 dark:border-surface-800 cursor-pointer text-[12px] font-medium transition-colors group relative box-border overflow-hidden", "border-b-2 border-b-transparent", "data-[state=active]:bg-surface-50 dark:data-[state=active]:bg-surface-900", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "data-[state=active]:border-b-primary", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-100 dark:hover:bg-surface-800"), variant === "pill" && cls("px-2 py-0.5 rounded text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-blue-400", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName);
@@ -7285,8 +7297,8 @@ function Skeleton(t0) {
   }
   let t5;
   if ($[5] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
-    t5 = /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/40 dark:via-white/5 to-transparent", style: {
-      animation: "shimmer 1s infinite"
+    t5 = /* @__PURE__ */ jsx("span", { className: "absolute inset-0 bg-gradient-to-r from-transparent via-white/50 dark:via-white/8 to-transparent", style: {
+      animation: "shimmer 1.8s ease-in-out infinite"
     } });
     $[5] = t5;
   } else {
@@ -7328,7 +7340,7 @@ function ToggleButtonGroup(t0) {
         if (!option.disabled) {
           onValueChange(option.value);
         }
-      }, disabled: option.disabled, "aria-pressed": value === option.value, "aria-disabled": option.disabled || void 0, className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors", value === option.value ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300" : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700", option.disabled && "opacity-50 cursor-not-allowed"), children: [
+      }, disabled: option.disabled, "aria-pressed": value === option.value, "aria-disabled": option.disabled || void 0, className: cls("flex flex-row items-center justify-center gap-2 py-3 px-4 rounded-md transition-colors", value === option.value ? "bg-white dark:bg-surface-900 text-primary dark:text-primary-300 shadow-sm" : "text-surface-500 dark:text-surface-400 hover:bg-surface-100 dark:hover:bg-surface-700", option.disabled && "opacity-50 cursor-not-allowed"), children: [
         option.icon,
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: option.label })
       ] }, option.value);
@@ -8098,7 +8110,7 @@ const innerElementType = forwardRef((t0, ref) => {
           /* @__PURE__ */ jsx("div", { style: {
             position: "sticky",
             top: 0,
-            zIndex: 10
+            zIndex: 20
           }, children: /* @__PURE__ */ jsx(VirtualTableHeaderRow, { ...virtualTableProps }) }),
           !customView && children
         ] }) }),
@@ -8291,7 +8303,7 @@ const VirtualTable = React__default.memo(function VirtualTable2({
   const customView = error ? /* @__PURE__ */ jsxs(CenteredView, { maxWidth: "2xl", className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Error" }),
     error?.message && /* @__PURE__ */ jsx(SafeLinkRenderer, { text: error.message })
-  ] }) : empty ? loading ? /* @__PURE__ */ jsx(CircularProgressCenter, {}) : /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-auto items-center justify-center p-8 h-full", children: emptyComponent }) : void 0;
+  ] }) : empty ? loading ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 px-8", children: /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col overflow-auto items-center justify-center py-12 px-8", children: emptyComponent }) : void 0;
   const virtualListController = useMemo(() => ({
     data,
     rowHeight,