@rebasepro/ui 0.5.0 → 0.6.1

package/dist/src/index.css

@@ -0,0 +1,126 @@
+@theme {
+    /* Font Families */
+    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
+
+    /* Colors */
+    --color-primary: #0070F4;
+    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
+    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    --color-secondary: #FF5B79;
+    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
+    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+
+    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
+    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
+
+    /* Field Colors */
+    --color-field-disabled: rgb(224 224 226);
+    --color-field-disabled-dark: rgb(35 35 37);
+
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
+    --color-text-primary-dark: #ffffff;
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
+
+    /* Surface Colors */
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #262626;
+    --color-surface-800: #111111;
+    --color-surface-900: #0a0a0a;
+    --color-surface-950: #000000;
+
+    /* Surface Accent Colors */
+    --color-surface-accent-50: #f8fafc;
+    --color-surface-accent-100: #f1f5f9;
+    --color-surface-accent-200: #e2e8f0;
+    --color-surface-accent-300: #cbd5e1;
+    --color-surface-accent-400: #94a3b8;
+    --color-surface-accent-500: #64748b;
+    --color-surface-accent-600: #475569;
+    --color-surface-accent-700: #334155;
+    --color-surface-accent-800: #1e293b;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}
+
+/* Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+.no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+.typography-h1 {
+    @apply text-4xl font-headers font-semibold tracking-tight;
+}
+
+.typography-h2 {
+    @apply text-3xl font-headers font-semibold tracking-tight;
+}
+
+.typography-h3 {
+    @apply text-2xl font-headers font-semibold tracking-tight;
+}
+
+.typography-h4 {
+    @apply text-xl font-headers font-semibold tracking-[-0.01em];
+}
+
+.typography-h5 {
+    @apply text-lg font-headers font-semibold tracking-[-0.01em];
+}
+
+.typography-h6 {
+    @apply text-base font-headers font-semibold tracking-[-0.01em];
+}
+
+.typography-subtitle1 {
+    @apply text-sm font-headers font-semibold tracking-[-0.01em];
+}
+
+.typography-subtitle2 {
+    @apply text-sm font-headers font-medium;
+}
+
+.typography-body1 {
+    @apply text-sm;
+}
+
+.typography-body2 {
+    @apply text-xs;
+}
+
+.typography-caption {
+    @apply text-[11px] leading-[1.4];
+}
+
+.typography-label {
+    @apply text-xs font-medium tracking-wide;
+}
+
+.typography-inherit {
+    @apply text-inherit;
+}
+
+.typography-button {
+    @apply text-sm font-semibold tracking-wide;
+}
+
+:focus-visible {
+    @apply outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-0 focus-visible:ring-offset-transparent
+}
+

package/dist/styles.d.ts

@@ -1,12 +1,12 @@
 export declare const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export declare const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-surface-900 focus:dark:bg-opacity-60 focus:bg-surface-accent-100/70 dark:focus:bg-surface-900/60";
-export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-75 ring-primary/75 ring-offset-0 ring-offset-transparent ";
-export declare const fieldBackgroundMixin = "bg-opacity-50 bg-surface-accent-200 bg-surface-accent-200/50 dark:bg-surface-900 dark:bg-opacity-100 dark:bg-surface-900/100";
-export declare const fieldBackgroundInvisibleMixin = "bg-opacity-0 bg-surface-accent-100 dark:bg-surface-900 dark:bg-opacity-0 bg-surface-accent-200/0 dark:bg-surface-900/0";
-export declare const fieldBackgroundDisabledMixin = "dark:bg-surface-900 bg-opacity-50 dark:bg-opacity-90 bg-surface-accent-200/50 dark:bg-surface-900/90";
-export declare 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";
-export declare const defaultBorderMixin = "border-surface-200/60 dark:border-surface-700/60 ";
-export declare const paperMixin = "bg-white rounded-md dark:bg-surface-800 border border-surface-200/60 dark:border-surface-700/60";
-export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-md border border-surface-200/60 dark:border-surface-700/60 m-1 -p-1";
-export declare 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";
+export declare const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";
+export declare const fieldBackgroundMixin = "bg-surface-accent-200/50 dark:bg-black/30";
+export declare const fieldBackgroundInvisibleMixin = "bg-surface-accent-200/0 dark:bg-black/0";
+export declare const fieldBackgroundDisabledMixin = "bg-surface-accent-200/50 dark:bg-black/20";
+export declare const fieldBackgroundHoverMixin = "hover:bg-surface-accent-200/70 hover:dark:bg-black/50";
+export declare const defaultBorderMixin = "border-surface-200 dark:border-surface-700 ";
+export declare const paperMixin = "bg-white rounded-lg dark:bg-surface-900 border border-surface-200 dark:border-surface-700";
+export declare const cardMixin = "bg-white dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700";
+export declare const cardClickableMixin = "hover:bg-primary/5 dark:hover:bg-primary/5 cursor-pointer transition-colors duration-150";
 export declare const cardSelectedMixin = "bg-primary-bg/30 dark:bg-primary-bg/10 ring-1 ring-primary/75";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -46,31 +46,31 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-portal": "^1.1.10",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "@radix-ui/react-checkbox": "^1.3.4",
+    "@radix-ui/react-collapsible": "^1.1.13",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-menubar": "^1.1.17",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-portal": "^1.1.11",
+    "@radix-ui/react-radio-group": "^1.4.0",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slider": "^1.4.0",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-visually-hidden": "^1.2.5",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "fast-equals": "6.0.0",
-    "lucide-react": "1.14.0",
-    "markdown-it": "^14.1.1",
-    "tailwind-merge": "^2.6.1",
-    "react-dropzone": "^14.4.1",
+    "lucide-react": "1.18.0",
+    "markdown-it": "^14.2.0",
+    "react-dropzone": "^15.0.0",
     "react-use-measure": "^2.1.7",
-    "react-window": "^1.8.11"
+    "react-window": "^1.8.11",
+    "tailwind-merge": "^3.6.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -81,24 +81,25 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/markdown-it": "^14.1.2",
-    "@types/node": "^20.19.41",
+    "@types/node": "^25.9.3",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-measure": "^2.0.12",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@types/react-window": "^1.8.8",
+    "@vitejs/plugin-react": "^6.0.2",
     "babel-plugin-react-compiler": "beta",
-    "cross-env": "^7.0.3",
-    "jest": "^29.7.0",
+    "cross-env": "^10.1.0",
+    "jest": "^30.4.2",
     "rollup-preserve-directives": "^1.1.3",
-    "tailwindcss": "^4.3.0",
-    "ts-jest": "^29.4.10",
-    "tsd": "^0.31.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.3",
-    "vite-plugin-static-copy": "^3.4.0"
+    "tailwindcss": "^4.3.1",
+    "ts-jest": "^29.4.11",
+    "tsd": "^0.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vite-plugin-static-copy": "^4.1.1"
   },
   "files": [
     "dist",
@@ -111,7 +112,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "rm -rf dist || true && vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/index.css 2>/dev/null; tsc --emitDeclarationOnly -p tsconfig.prod.json",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",

package/src/components/Alert.tsx

@@ -58,7 +58,7 @@ export const Alert: React.FC<AlertProps> = ({
                 getSizeClasses(size),
                 "w-full",
                 "font-medium",
-                "rounded-md flex items-center gap-2",
+                "rounded-lg flex items-center gap-2",
                 classes,
                 outerClassName)}>
             <div className={cls("grow", className)}>{children}</div>

package/src/components/BooleanSwitchWithLabel.tsx

@@ -69,7 +69,7 @@ export const BooleanSwitchWithLabel = function BooleanSwitchWithLabel({
                 !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",
+                "rounded-lg 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")),
                 {

package/src/components/Button.tsx

@@ -32,17 +32,17 @@ const ButtonInner = React.memo(React.forwardRef<
    }: ButtonProps<React.ElementType>, ref) => {
 
     const baseClasses =
-        "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]";
+        "typography-button h-fit rounded-lg whitespace-nowrap inline-flex items-center justify-center p-2 px-4 focus:outline-none transition-colors ease-in-out duration-150 gap-2";
 
     const buttonClasses = cls({
         "w-full": fullWidth,
         "w-fit": !fullWidth,
 
         // Filled Variants
-        "border border-primary bg-primary focus:ring-primary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "primary" && !disabled,
-        "border border-secondary bg-secondary focus:ring-secondary shadow-sm hover:shadow-md hover:brightness-110 text-white hover:text-white": variant === "filled" && color === "secondary" && !disabled,
-        "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": variant === "filled" && color === "error" && !disabled,
-        "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": variant === "filled" && color === "text" && !disabled,
+        "border border-primary bg-primary focus:ring-primary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "primary" && !disabled,
+        "border border-secondary bg-secondary focus:ring-secondary text-white hover:text-white hover:brightness-105": variant === "filled" && color === "secondary" && !disabled,
+        "border border-red-500 bg-red-500 hover:bg-red-600 focus:ring-red-500 text-white hover:text-white": variant === "filled" && color === "error" && !disabled,
+        "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 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": variant === "filled" && color === "text" && !disabled,
         "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": variant === "filled" && color === "neutral" && !disabled,
 
         // Text Variants

package/src/components/Chip.tsx

@@ -25,10 +25,10 @@ export interface ChipProps {
 }
 
 const sizeClassNames = {
-    smallest: "px-1.5 text-xs",
-    small: "px-2 py-0.5 text-sm",
-    medium: "px-3 py-1 text-sm",
-    large: "px-4 py-1.5 text-sm"
+    smallest: "px-1.5 py-px text-[10px]",
+    small: "px-2 py-0.5 text-xs",
+    medium: "px-2.5 py-0.5 text-xs",
+    large: "px-3 py-1 text-xs"
 }
 
 /**
@@ -40,6 +40,21 @@ function isDarkMode(): boolean {
         document.documentElement.classList.contains("dark");
 }
 
+/**
+ * Helper to generate rgba from hex or standard colors.
+ */
+function getRgba(hex: string, alpha: number): string {
+    if (!hex || !hex.startsWith("#")) return hex;
+    let color = hex.slice(1);
+    if (color.length === 3) {
+        color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
+    }
+    const r = parseInt(color.slice(0, 2), 16);
+    const g = parseInt(color.slice(2, 4), 16);
+    const b = parseInt(color.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
 /**
  * @group Preview components
  */
@@ -50,28 +65,15 @@ export function Chip({
                          outlined,
                          onClick,
                          icon,
-                         size = "large",
+                         size = "medium",
                          className,
                          style
                      }: ChipProps) {
 
     const usedColorScheme = typeof colorScheme === "string" ? getColorSchemeForKey(colorScheme) : colorScheme;
-
-    // Resolve theme-aware colors
     const dark = isDarkMode();
 
-    // Helper to generate rgba from hex or standard colors
-    const getRgba = (hex: string, alpha: number): string => {
-        if (!hex || !hex.startsWith("#")) return hex;
-        let color = hex.slice(1);
-        if (color.length === 3) {
-            color = color[0] + color[0] + color[1] + color[1] + color[2] + color[2];
-        }
-        const r = parseInt(color.slice(0, 2), 16);
-        const g = parseInt(color.slice(2, 4), 16);
-        const b = parseInt(color.slice(4, 6), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    };
+    const hasScheme = error || usedColorScheme;
 
     let textColor = "";
     let bgColor = "";
@@ -81,44 +83,44 @@ export function Chip({
         textColor = dark ? "#f87171" : "#dc2626";
     } else if (usedColorScheme) {
         textColor = dark && usedColorScheme.darkText ? usedColorScheme.darkText : usedColorScheme.text;
-    } else {
-        textColor = dark ? "#d4d4d4" : "#404040";
     }
 
-    if (outlined) {
-        bgColor = getRgba(textColor, dark ? 0.12 : 0.06);
-        border = `1px solid ${getRgba(textColor, dark ? 0.25 : 0.18)}`;
-    } else {
-        if (error) {
-            bgColor = dark ? "rgba(220, 38, 38, 0.2)" : "rgba(239, 68, 68, 0.15)";
-            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.4)" : "rgba(239, 68, 68, 0.3)"}`;
+    if (hasScheme) {
+        if (outlined) {
+            bgColor = getRgba(textColor, dark ? 0.1 : 0.06);
+            border = `1px solid ${getRgba(textColor, dark ? 0.2 : 0.14)}`;
+        } else if (error) {
+            bgColor = dark ? "rgba(220, 38, 38, 0.15)" : "rgba(239, 68, 68, 0.1)";
+            border = `1px solid ${dark ? "rgba(220, 38, 38, 0.3)" : "rgba(239, 68, 68, 0.2)"}`;
         } else if (usedColorScheme) {
             bgColor = dark && usedColorScheme.darkColor ? usedColorScheme.darkColor : usedColorScheme.color;
-        } else {
-            bgColor = dark ? "#1f1f1f" : "#f4f4f5";
-            border = `1px solid ${dark ? "#2e2e30" : "#e4e4e7"}`;
         }
     }
 
     return (
         <div
-            className={cls("rounded-lg max-w-full w-max h-fit font-regular inline-flex gap-1",
+            className={cls("rounded-lg max-w-full w-max h-fit font-medium inline-flex gap-1",
                 "text-ellipsis",
                 "items-center",
-                onClick ? "cursor-pointer hover:bg-surface-accent-300 dark:hover:bg-surface-accent-700" : "",
+                "transition-colors duration-150",
+                !hasScheme && "bg-surface-100 dark:bg-surface-800 text-text-secondary dark:text-text-secondary-dark border border-surface-200 dark:border-surface-700",
+                !hasScheme && outlined && "bg-transparent dark:bg-transparent",
+                onClick ? "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5" : "",
                 sizeClassNames[size],
                 className)}
             onClick={onClick}
             style={{
-                backgroundColor: bgColor,
-                color: textColor,
-                border: border || undefined,
+                ...(hasScheme ? {
+                    backgroundColor: bgColor,
+                    color: textColor,
+                    border: border || undefined,
+                } : {}),
                 overflow: "hidden",
                 ...style
             }}
         >
-            {children}
             {icon}
+            {children}
         </div>
     );
 }

package/src/components/DateTimeField.tsx

@@ -225,7 +225,7 @@ hour12: false,
             <style>{inputStyles}</style>
             <div
                 className={cls(
-                    "rounded-md relative max-w-full",
+                    "rounded-lg relative max-w-full",
                     !invisible && fieldBackgroundMixin,
                     disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                     {
@@ -272,7 +272,7 @@ hour12: false,
                     className={cls(
                         "w-full outline-hidden bg-transparent leading-normal text-base px-3",
                         clearable ? "pr-14" : "pr-12",
-                        "rounded-md",
+                        "rounded-lg",
                         {
                             "min-h-[28px]": size === "smallest",
                             "min-h-[32px]": size === "small",

package/src/components/Dialog.tsx

@@ -26,6 +26,7 @@ export type DialogProps = {
      */
     disableInitialFocus?: boolean;
     portalContainer?: HTMLElement | null;
+    "aria-describedby"?: string;
 };
 
 const widthClasses = {
@@ -60,7 +61,8 @@ export const Dialog = ({
                            onPointerDownOutside,
                            onInteractOutside,
                            disableInitialFocus = true,
-                           portalContainer
+                           portalContainer,
+                           "aria-describedby": ariaDescribedby
                        }: DialogProps) => {
     const [displayed, setDisplayed] = useState(false);
 
@@ -92,7 +94,7 @@ export const Dialog = ({
                 <div className={cls("fixed inset-0 z-50", containerClassName)}>
 
                     <DialogPrimitive.Overlay
-                        className={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",
+                        className={cls("fixed inset-0 transition-opacity ease-in-out duration-200 bg-black/50 dark:bg-black/60 backdrop-blur-sm",
                             displayed && open ? "opacity-100" : "opacity-0",
                             "z-50 fixed top-0 left-0 w-full h-full flex justify-center items-center"
                         )}
@@ -111,7 +113,8 @@ export const Dialog = ({
                         }}
                         onPointerDownOutside={onPointerDownOutside}
                         onInteractOutside={onInteractOutside}
-                        className={cls("h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out")}
+                        aria-describedby={ariaDescribedby}
+                        className={cls("relative h-full outline-none flex justify-center items-center z-60 opacity-100 transition-all duration-200 ease-in-out")}
                     >
                         <div
                             className={cls(paperMixin,
@@ -124,7 +127,7 @@ export const Dialog = ({
                                 fullHeight && !fullScreen ? "h-full" : undefined,
                                 "text-surface-accent-900 dark:text-white",
                                 "justify-center items-center",
-                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-xl",
+                                fullScreen ? "h-screen w-screen" : "max-h-[90vh] shadow-lg",
                                 "ease-in-out duration-200",
                                 scrollable && "overflow-y-auto",
                                 displayed && open ? "opacity-100 scale-100" : "opacity-0 scale-[0.97]",

package/src/components/ErrorBoundary.tsx

@@ -48,7 +48,8 @@ interface ErrorBoundaryState {
 export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBoundaryProps>, ErrorBoundaryState> {
     constructor(props: PropsWithChildren<ErrorBoundaryProps>) {
         super(props);
-        this.state = { error: null, showDetails: false };
+        this.state = { error: null,
+showDetails: false };
     }
 
     static getDerivedStateFromError(error: Error) {
@@ -60,7 +61,8 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<ErrorBounda
     }
 
     private handleReset = () => {
-        this.setState({ error: null, showDetails: false });
+        this.setState({ error: null,
+showDetails: false });
         this.props.onReset?.();
     };
 

package/src/components/ExpandablePanel.tsx

@@ -82,7 +82,7 @@ export function ExpandablePanel({
             <Collapsible.Root
                 className={cls(
                     !invisible && defaultBorderMixin + " border",
-                    "rounded-md",
+                    "rounded-lg",
                     "w-full",
                     className
                 )}

package/src/components/FileUpload.tsx

@@ -70,7 +70,7 @@ export function FileUpload({
         className={cls(
             fieldBackgroundMixin,
             "flex gap-2",
-            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
+            "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid",
             {
                 "h-44": size === "large",
                 "h-28": size === "medium",

package/src/components/FilterChip.tsx

@@ -58,14 +58,14 @@ export const FilterChip = React.forwardRef<HTMLButtonElement, FilterChipProps>(f
             className={cls(
                 "inline-flex items-center gap-1 rounded-full",
                 "font-medium whitespace-nowrap select-none shrink-0",
-                "transition-all duration-150",
+                "transition-colors duration-150",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50",
                 sizeClasses[size],
                 active
                     ? "bg-primary/12 text-primary dark:bg-primary/20 dark:text-primary shadow-[inset_0_0_0_1.5px_var(--color-primary)]"
                     : cls(
                         "bg-surface-accent-100 text-text-secondary dark:bg-surface-accent-800 dark:text-text-secondary-dark",
-                        !disabled && "cursor-pointer hover:bg-surface-accent-200 dark:hover:bg-surface-accent-700"
+                        !disabled && "cursor-pointer hover:bg-primary/5 dark:hover:bg-primary/5"
                     ),
                 disabled && "opacity-50 cursor-not-allowed",
                 className

package/src/components/IconButton.tsx

@@ -21,7 +21,7 @@ const colorClasses = "text-surface-accent-500 visited:text-surface-accent-500 da
 const sizeClasses = {
     medium: "w-10 !h-10 min-w-10 min-h-10",
     small: "w-8 !h-8 min-w-8 min-h-8",
-    smallest: "w-6 !h-6 min-w-6 min-h-6",
+    smallest: "w-7 !h-7 min-w-7 min-h-7",
     large: "w-12 !h-12 min-w-12 min-h-12"
 }
 const shapeClasses = {

package/src/components/MultiSelect.tsx

@@ -235,7 +235,7 @@ export const MultiSelect = React.forwardRef<
                                     "px-2": size === "small" || size === "smallest",
                                     "px-4": size === "medium" || size === "large"
                                 },
-                                "select-none rounded-md text-sm",
+                                "select-none rounded-lg text-sm",
                                 "focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none",
                                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,

package/src/components/Select.tsx

@@ -139,7 +139,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
             {...props}>
             {typeof label === "string" ? <SelectInputLabel error={error}>{label}</SelectInputLabel> : label}
             <div className={cls(
-                "select-none rounded-md text-sm",
+                "select-none rounded-lg text-sm",
                 invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 "relative flex items-center",
@@ -169,7 +169,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(({
                         } : "",
                         "outline-hidden focus:outline-hidden",
                         "outline-none focus:outline-none",
-                        "select-none rounded-md text-sm",
+                        "select-none rounded-lg 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",