canvas-ui-sdk 0.3.14 → 0.3.16

package/dist/index.js

@@ -3,10 +3,10 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React14 from 'react';
+import React14__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import * as React13 from 'react';
-import React13__default, { createContext, useState, useContext, useEffect, useRef, Children, useMemo, useCallback } from 'react';
 import { Check, Calendar as Calendar$1, Upload, FileText, Trash2, ChevronLeft, ChevronRight, X, Search, Layout, Settings, User, LogIn, List, MessageSquare, CreditCard, Video, Play, Table, LayoutGrid, Layers, SlidersHorizontal, Type, Users, Image, Star, Award, Hash, MapPin, Megaphone, Newspaper, Building, Square, CheckSquare, ToggleLeft, CircleDot, Tags, Key, Bell, Home, PieChart, ShoppingBag, Mail, Phone, MessageCircle, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, XIcon, CheckIcon, CircleIcon, ChevronUpIcon, PanelLeftIcon, Info, ShoppingCart, LogOut, Menu, ChevronDown, Filter, Wand2, Paperclip, MoreHorizontal, PenSquare, Briefcase as Briefcase$1, MoreVertical, Minus, Plus, Instagram, Linkedin, Twitter, Facebook, Globe as Globe$1, DollarSign, BookOpen, Eye, CheckCircle, Zap, Camera as Camera$1, VideoOff, Mic, MicOff, Cast, Pencil, GripHorizontal, ChevronUp, Sparkles, Copy, ArrowRight, GitBranch, FileBox, ExternalLink, Target as Target$1, AlertCircle, Quote, GripVertical, ArrowUp, Heart as Heart$1, Link2, FolderPlus, ThumbsUp, ChevronsRight, ChevronsLeft, RefreshCw, Send, Bookmark } from 'lucide-react';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -157,6 +157,38 @@ var variantStyles = {
     borderColor: "var(--btn-delete-border)"
   }
 };
+var variantHoverStyles = {
+  primary: {
+    backgroundColor: "var(--btn-primary-bg-hover)",
+    color: "var(--btn-primary-text-hover)",
+    borderColor: "var(--btn-primary-border-hover)"
+  },
+  "primary-outline": {
+    backgroundColor: "var(--btn-primary-outline-bg-hover)",
+    color: "var(--btn-primary-outline-text-hover)",
+    borderColor: "var(--btn-primary-outline-border-hover)"
+  },
+  "primary-neutral": {
+    backgroundColor: "var(--btn-primary-neutral-bg-hover)",
+    color: "var(--btn-primary-neutral-text-hover)",
+    borderColor: "var(--btn-primary-neutral-border-hover)"
+  },
+  neutral: {
+    backgroundColor: "var(--btn-neutral-bg-hover)",
+    color: "var(--btn-neutral-text-hover)",
+    borderColor: "var(--btn-neutral-border-hover)"
+  },
+  "neutral-delete": {
+    backgroundColor: "var(--btn-neutral-delete-bg-hover)",
+    color: "var(--btn-neutral-delete-text-hover)",
+    borderColor: "var(--btn-neutral-delete-border-hover)"
+  },
+  delete: {
+    backgroundColor: "var(--btn-delete-bg-hover)",
+    color: "var(--btn-delete-text-hover)",
+    borderColor: "var(--btn-delete-border-hover)"
+  }
+};
 var sizeStyles = {
   mini: {
     height: "var(--btn-mini-height)",
@@ -207,16 +239,31 @@ function Button({
   size = "default",
   asChild = false,
   style,
+  onMouseEnter,
+  onMouseLeave,
   ...props
 }) {
+  const [isHovered, setIsHovered] = React14.useState(false);
   const Comp = asChild ? Slot : "button";
+  const isCanvasVariant = variant && canvasVariants.includes(variant);
   const computedStyle = { ...style };
-  if (variant && canvasVariants.includes(variant)) {
+  if (isCanvasVariant) {
     Object.assign(computedStyle, variantStyles[variant]);
+    if (isHovered && !props.disabled) {
+      Object.assign(computedStyle, variantHoverStyles[variant]);
+    }
   }
   if (size && canvasSizes.includes(size)) {
     Object.assign(computedStyle, sizeStyles[size]);
   }
+  const handleMouseEnter = React14.useCallback((e) => {
+    setIsHovered(true);
+    onMouseEnter?.(e);
+  }, [onMouseEnter]);
+  const handleMouseLeave = React14.useCallback((e) => {
+    setIsHovered(false);
+    onMouseLeave?.(e);
+  }, [onMouseLeave]);
   return /* @__PURE__ */ jsx(
     Comp,
     {
@@ -225,6 +272,8 @@ function Button({
       "data-size": size,
       className: cn(buttonVariants({ variant, size, className })),
       style: Object.keys(computedStyle).length > 0 ? computedStyle : void 0,
+      onMouseEnter: isCanvasVariant ? handleMouseEnter : onMouseEnter,
+      onMouseLeave: isCanvasVariant ? handleMouseLeave : onMouseLeave,
       ...props
     }
   );
@@ -382,8 +431,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React13.useRef(null);
-  React13.useEffect(() => {
+  const ref = React14.useRef(null);
+  React14.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -406,14 +455,14 @@ function CalendarDayButton({
     }
   );
 }
-var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
     className: cn(
       "peer size-4 shrink-0 rounded-[var(--radius-xs)] border border-[var(--canvas-border-input)]",
       "bg-[var(--canvas-background)] transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
       "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
       "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=checked]:border-[var(--canvas-primary)]",
       "data-[state=checked]:disabled:bg-[var(--canvas-input-disabled-text)] data-[state=checked]:disabled:border-[var(--canvas-input-disabled-border)]",
@@ -430,8 +479,8 @@ var Checkbox = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var CheckboxWithLabel = React13.forwardRef(({ children, className, id, size = "default", ...props }, ref) => {
-  const generatedId = React13.useId();
+var CheckboxWithLabel = React14.forwardRef(({ children, className, id, size = "default", ...props }, ref) => {
+  const generatedId = React14.useId();
   const checkboxId = id || generatedId;
   const isSmall = size === "sm";
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", isSmall ? "gap-1.5" : "gap-2"), children: [
@@ -459,7 +508,7 @@ var CheckboxWithLabel = React13.forwardRef(({ children, className, id, size = "d
   ] });
 });
 CheckboxWithLabel.displayName = "CheckboxWithLabel";
-var DateInput = React13.forwardRef(
+var DateInput = React14.forwardRef(
   ({ className, inputSize = "default", placeholder = "mm/dd/yyyy", disabled, value, onChange, ...props }, ref) => {
     const sizeVar = inputSize === "default" ? "standard" : inputSize === "sm" ? "small" : "large";
     return /* @__PURE__ */ jsxs(
@@ -467,7 +516,7 @@ var DateInput = React13.forwardRef(
       {
         className: cn(
           "flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
-          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
+          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]",
           className
         ),
@@ -842,7 +891,7 @@ function formatFileSize(bytes) {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return parseFloat((bytes / Math.pow(k, i)).toFixed(0)) + sizes[i];
 }
-var FileUploader = React13.forwardRef(
+var FileUploader = React14.forwardRef(
   ({
     files = [],
     onFilesChange,
@@ -851,8 +900,8 @@ var FileUploader = React13.forwardRef(
     disabled,
     className
   }, ref) => {
-    const fileInputRef = React13.useRef(null);
-    const [isDragging, setIsDragging] = React13.useState(false);
+    const fileInputRef = React14.useRef(null);
+    const [isDragging, setIsDragging] = React14.useState(false);
     const handleDragOver = (e) => {
       e.preventDefault();
       if (!disabled) setIsDragging(true);
@@ -1036,7 +1085,7 @@ var FileUploader = React13.forwardRef(
   }
 );
 FileUploader.displayName = "FileUploader";
-var ImageUploader = React13.forwardRef(
+var ImageUploader = React14.forwardRef(
   ({
     images = [],
     selectedImageId,
@@ -1046,8 +1095,8 @@ var ImageUploader = React13.forwardRef(
     disabled,
     className
   }, ref) => {
-    const fileInputRef = React13.useRef(null);
-    const [isDragging, setIsDragging] = React13.useState(false);
+    const fileInputRef = React14.useRef(null);
+    const [isDragging, setIsDragging] = React14.useState(false);
     const handleDragOver = (e) => {
       e.preventDefault();
       if (!disabled) setIsDragging(true);
@@ -1367,7 +1416,7 @@ function LineTabs({
     /* @__PURE__ */ jsx("div", { className: "flex-1 h-0 border-b border-[var(--canvas-border)]" })
   ] });
 }
-var MultiselectCheckboxField = React13.forwardRef(
+var MultiselectCheckboxField = React14.forwardRef(
   ({
     options = [],
     selectedValues = [],
@@ -1401,7 +1450,7 @@ var MultiselectCheckboxField = React13.forwardRef(
               disabled,
               className: cn(
                 "flex items-center gap-2 bg-[var(--canvas-background)] border overflow-hidden transition-colors",
-                "focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2",
+                "focus:outline-none focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]",
                 isSelected ? "border-[var(--canvas-primary)]" : "border-[var(--canvas-border-input)]",
                 disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)] opacity-60"
               ),
@@ -1466,7 +1515,7 @@ var MultiselectCheckboxField = React13.forwardRef(
   }
 );
 MultiselectCheckboxField.displayName = "MultiselectCheckboxField";
-var MultiselectTags = React13.forwardRef(
+var MultiselectTags = React14.forwardRef(
   ({
     tags = [],
     placeholder = "Add...",
@@ -1476,7 +1525,7 @@ var MultiselectTags = React13.forwardRef(
     disabled,
     className
   }, ref) => {
-    const [inputValue, setInputValue] = React13.useState("");
+    const [inputValue, setInputValue] = React14.useState("");
     const sizeVar = inputSize === "default" ? "standard" : inputSize === "sm" ? "small" : "large";
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && inputValue.trim()) {
@@ -1490,7 +1539,7 @@ var MultiselectTags = React13.forwardRef(
       {
         className: cn(
           "flex flex-wrap items-center gap-1.5 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] p-1.5",
-          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
+          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]",
           disabled && "cursor-not-allowed bg-[var(--canvas-input-disabled-bg)] border-[var(--canvas-input-disabled-border)]",
           className
         ),
@@ -1604,7 +1653,7 @@ function RadioGroupItem({
       "data-slot": "radio-group-item",
       className: cn(
         "aspect-square size-4 shrink-0 rounded-full border border-[var(--canvas-border-input)] bg-[var(--canvas-background)] transition-colors",
-        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "aria-invalid:border-[var(--canvas-border-input-invalid)] aria-invalid:ring-[var(--canvas-border-input-invalid)]/20",
         "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)]",
         "data-[state=checked]:border-[var(--canvas-primary)]",
@@ -1622,7 +1671,7 @@ function RadioGroupItem({
     }
   );
 }
-var TextInput = React13.forwardRef(
+var TextInput = React14.forwardRef(
   ({ className, inputSize = "default", disabled, ...props }, ref) => {
     const sizeVar = inputSize === "default" ? "standard" : inputSize === "sm" ? "small" : "large";
     return /* @__PURE__ */ jsx(
@@ -1634,7 +1683,7 @@ var TextInput = React13.forwardRef(
         className: cn(
           "w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
           "text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)]",
-          "focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2",
+          "focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)]",
           "disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)]",
           className
         ),
@@ -1651,7 +1700,7 @@ var TextInput = React13.forwardRef(
   }
 );
 TextInput.displayName = "TextInput";
-var RangeInput = React13.forwardRef(
+var RangeInput = React14.forwardRef(
   ({
     inputSize = "default",
     minValue,
@@ -1774,7 +1823,7 @@ function ScrollBar({
     }
   );
 }
-var Searchbox = React13.forwardRef(
+var Searchbox = React14.forwardRef(
   ({ className, inputSize = "default", placeholder = "Search...", disabled, value, onChange, ...props }, ref) => {
     const sizeVar = inputSize === "default" ? "standard" : inputSize === "sm" ? "small" : "large";
     return /* @__PURE__ */ jsxs(
@@ -1782,7 +1831,7 @@ var Searchbox = React13.forwardRef(
       {
         className: cn(
           "flex items-center gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)]",
-          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)] focus-within:ring-offset-2",
+          "focus-within:border-[var(--canvas-border-input-focus)] focus-within:ring-2 focus-within:ring-[var(--canvas-border-input-focus)]",
           "has-[:disabled]:cursor-not-allowed has-[:disabled]:bg-[var(--canvas-input-disabled-bg)] has-[:disabled]:border-[var(--canvas-input-disabled-border)]",
           className
         ),
@@ -1822,7 +1871,7 @@ var Searchbox = React13.forwardRef(
 Searchbox.displayName = "Searchbox";
 var selectTriggerVariants = cva(
   // Base styles using CSS variables
-  "flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
+  "flex w-full items-center justify-between gap-2 bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] whitespace-nowrap transition-colors outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)] data-[placeholder]:text-[var(--canvas-text-placeholder)] [&_svg:not([class*='text-'])]:text-[var(--canvas-text-muted)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 font-[family-name:var(--typo-global-font)]",
   {
     variants: {
       inputSize: {
@@ -1995,7 +2044,7 @@ function SelectScrollDownButton({
     }
   );
 }
-var SelectablePills = React13.forwardRef(
+var SelectablePills = React14.forwardRef(
   ({
     inputSize = "default",
     options,
@@ -2056,7 +2105,7 @@ var SelectablePills = React13.forwardRef(
               className: cn(
                 "inline-flex items-center justify-center rounded-[var(--radius-xs)] border transition-colors cursor-pointer",
                 "font-medium whitespace-nowrap",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
                 "disabled:cursor-not-allowed disabled:opacity-50",
                 styles.pill,
                 isSelected ? "bg-[var(--canvas-surface-brand)] border-[var(--canvas-primary)] text-[var(--canvas-primary)]" : "bg-[var(--canvas-background)] border-[var(--canvas-border)] text-[var(--canvas-text-muted)] hover:border-[var(--canvas-text-muted)]"
@@ -2206,8 +2255,8 @@ function SheetDescription({
 }
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React13.useState(void 0);
-  React13.useEffect(() => {
+  const [isMobile, setIsMobile] = React14.useState(void 0);
+  React14.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -2280,9 +2329,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React13.createContext(null);
+var SidebarContext = React14.createContext(null);
 function useSidebar() {
-  const context = React13.useContext(SidebarContext);
+  const context = React14.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -2298,10 +2347,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React13.useState(false);
-  const [_open, _setOpen] = React13.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React14.useState(false);
+  const [_open, _setOpen] = React14.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React13.useCallback(
+  const setOpen = React14.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -2313,10 +2362,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React13.useCallback(() => {
+  const toggleSidebar = React14.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -2327,7 +2376,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React13.useMemo(
+  const contextValue = React14.useMemo(
     () => ({
       state,
       open,
@@ -2785,7 +2834,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React13.useMemo(() => {
+  const width = React14.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -2873,7 +2922,7 @@ function SidebarMenuSubButton({
     }
   );
 }
-var Slider = React13.forwardRef(({
+var Slider = React14.forwardRef(({
   className,
   inputSize = "default",
   value,
@@ -2942,7 +2991,7 @@ var Slider = React13.forwardRef(({
                 "block rounded-full border-2 border-[var(--canvas-background)] bg-[var(--canvas-primary)]",
                 "shadow-[0px_1px_2px_0px_rgba(0,0,0,0.08)]",
                 "ring-offset-background transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
                 "disabled:pointer-events-none disabled:opacity-50",
                 styles.thumbSize
               )
@@ -2976,7 +3025,7 @@ function Switch({
       className: cn(
         "peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent transition-colors",
         "data-[state=checked]:bg-[var(--canvas-primary)] data-[state=unchecked]:bg-[var(--canvas-border)]",
-        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)] focus-visible:ring-offset-2",
+        "outline-none focus-visible:ring-2 focus-visible:ring-[var(--canvas-border-input-focus)]",
         "disabled:cursor-not-allowed disabled:data-[state=checked]:bg-[var(--canvas-input-disabled-text)] disabled:data-[state=unchecked]:bg-[var(--canvas-input-disabled-border)]",
         className
       ),
@@ -3054,7 +3103,7 @@ function TabsContent({
 }
 var textareaVariants = cva(
   // Base styles using CSS variables
-  "flex w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)]",
+  "flex w-full bg-[var(--canvas-background)] border border-[var(--canvas-border-input)] text-[var(--canvas-text)] placeholder:text-[var(--canvas-text-placeholder)] transition-colors resize-none focus:outline-none focus:border-[var(--canvas-border-input-focus)] focus:ring-2 focus:ring-[var(--canvas-border-input-focus)] disabled:cursor-not-allowed disabled:bg-[var(--canvas-input-disabled-bg)] disabled:border-[var(--canvas-input-disabled-border)] disabled:text-[var(--canvas-input-disabled-text)] aria-invalid:border-[var(--canvas-border-input-invalid)]",
   {
     variants: {
       inputSize: {
@@ -3069,7 +3118,7 @@ var textareaVariants = cva(
     }
   }
 );
-var Textarea = React13.forwardRef(
+var Textarea = React14.forwardRef(
   ({ className, inputSize, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -3088,11 +3137,11 @@ function getDefaultElement(variant) {
   }
   return "p";
 }
-var Typography = React13.forwardRef(
+var Typography = React14.forwardRef(
   ({ variant = "body-m", color = "default", as, className, children, style, ...props }, ref) => {
     const Component = as || getDefaultElement(variant);
     const varPrefix = `--typo-${variant}`;
-    return React13.createElement(
+    return React14.createElement(
       Component,
       {
         ref,
@@ -4714,14 +4763,14 @@ function DashboardShell({
           "div",
           {
             className: cn(
-              "flex flex-col gap-[var(--spacing-6xl)]",
+              "flex flex-col gap-[var(--spacing-xl)]",
               "px-[var(--spacing-xl)] lg:px-[var(--spacing-5xl)]",
               "pt-10 pb-[var(--spacing-5xl)]",
               contentClassName
             ),
             children: [
               pageHeader && /* @__PURE__ */ jsx("section", { className: "pt-0", children: pageHeader }),
-              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-6xl)]", children })
+              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-4xl)]", children })
             ]
           }
         )
@@ -4972,14 +5021,14 @@ function IconSidebarShell({
           "div",
           {
             className: cn(
-              "flex flex-col gap-[var(--spacing-6xl)]",
+              "flex flex-col gap-[var(--spacing-xl)]",
               "px-[var(--spacing-xl)] lg:px-[var(--spacing-5xl)]",
               "pt-10 pb-[var(--spacing-5xl)]",
               contentClassName
             ),
             children: [
               pageHeader && /* @__PURE__ */ jsx("section", { className: "pt-0", children: pageHeader }),
-              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-6xl)]", children })
+              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-4xl)]", children })
             ]
           }
         )
@@ -5352,14 +5401,14 @@ function DoubleSidebarShell({
           "div",
           {
             className: cn(
-              "flex flex-col gap-[var(--spacing-6xl)]",
+              "flex flex-col gap-[var(--spacing-xl)]",
               "px-[var(--spacing-xl)] lg:px-[var(--spacing-5xl)]",
               "pt-10 pb-[var(--spacing-5xl)]",
               contentClassName
             ),
             children: [
               pageHeader && /* @__PURE__ */ jsx("section", { className: "pt-0", children: pageHeader }),
-              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-6xl)]", children })
+              /* @__PURE__ */ jsx("section", { className: "flex flex-col gap-[var(--spacing-4xl)]", children })
             ]
           }
         )
@@ -8289,7 +8338,7 @@ function CheckboxFilterSection({
   onSelectionChange,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleToggle = (optionId, checked) => {
     if (checked) {
       onSelectionChange([...selected, optionId]);
@@ -8331,7 +8380,7 @@ function PillsFilterSection({
   onSelectionChange,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleClear = () => {
     onSelectionChange([]);
     onClear?.();
@@ -8366,7 +8415,7 @@ function PriceRangeFilterSection({
   onMaxChange,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleClear = () => {
     onMinChange("");
     onMaxChange("");
@@ -8405,7 +8454,7 @@ function RadioFilterSection({
   onSelectionChange,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleClear = () => {
     onSelectionChange("");
     onClear?.();
@@ -8445,7 +8494,7 @@ function SliderFilterSection({
   labelFormatter,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleClear = () => {
     onValueChange([min, max]);
     onClear?.();
@@ -8483,7 +8532,7 @@ function ToggleFilterSection({
   onCheckedChange,
   onClear
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(true);
+  const [isExpanded, setIsExpanded] = React14.useState(true);
   const handleClear = () => {
     onCheckedChange(false);
     onClear?.();
@@ -8754,12 +8803,12 @@ function StandardDataTable({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -8803,13 +8852,13 @@ function StandardDataTable({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0 gap-3",
+                  className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -9125,12 +9174,12 @@ function FixedColumnDataTable({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -9174,13 +9223,13 @@ function FixedColumnDataTable({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0 gap-3",
+                  className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -9523,12 +9572,12 @@ function NestedDataTable({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -9572,13 +9621,13 @@ function NestedDataTable({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0 gap-3",
+                  className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -9951,7 +10000,7 @@ function ReviewsTable({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -9995,13 +10044,13 @@ function ReviewsTable({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0 gap-3",
+                  className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -10690,12 +10739,12 @@ function UpvotingPostsTable({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -10739,14 +10788,14 @@ function UpvotingPostsTable({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0",
+                  className: "flex items-end justify-end shrink-0 max-sm:w-full max-sm:flex-wrap",
                   style: { gap: "var(--spacing-3xl)" },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -11175,7 +11224,7 @@ function NestedCommentsTable({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -11307,7 +11356,7 @@ function FaqsTable({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: /* @__PURE__ */ jsx(
               "div",
@@ -12150,7 +12199,7 @@ function StandardListWithImage({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -12191,8 +12240,8 @@ function StandardListWithImage({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-end shrink-0 gap-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(
                   Select,
                   {
                     value: sortValue || void 0,
@@ -12203,7 +12252,7 @@ function StandardListWithImage({
                     ]
                   }
                 ) }),
-                /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(
                   Select,
                   {
                     value: filterValue || void 0,
@@ -12584,7 +12633,7 @@ function LargeImageLabelsList({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -12628,13 +12677,13 @@ function LargeImageLabelsList({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0 gap-3",
+                  className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) })
@@ -12800,7 +12849,7 @@ function CircularProgressBarList({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -12844,14 +12893,14 @@ function CircularProgressBarList({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0",
+                  className: "flex items-end justify-end shrink-0 max-sm:w-full max-sm:flex-wrap",
                   style: { gap: "var(--spacing-3xl)" },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) })
@@ -13290,12 +13339,12 @@ function ActivityFeed({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-wrap items-start w-full overflow-hidden",
+            className: "flex flex-wrap items-end w-full overflow-hidden",
             style: { gap: "var(--spacing-xl)" },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -14154,7 +14203,7 @@ function SocialFeed({
       className: cn("flex flex-col w-full", className),
       style: { gap: "var(--spacing-xl)" },
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start w-full", style: { gap: "var(--spacing-xl)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-w-[200px]", style: { gap: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx(
+        title && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-end w-full", style: { gap: "var(--spacing-xl)" }, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-w-[200px]", style: { gap: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx(
           "h2",
           {
             style: {
@@ -14570,7 +14619,7 @@ function ImageFeedWithNestedComments({
         (title || subtitle) && /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -17042,12 +17091,12 @@ function SlideshowGridTiles({
     "div",
     {
       className: cn("flex flex-col w-full", className),
-      style: { gap: "var(--spacing-3xl)" },
+      style: { gap: "var(--spacing-xl)" },
       children: [
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -17091,14 +17140,14 @@ function SlideshowGridTiles({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0",
+                  className: "flex items-end justify-end shrink-0 max-sm:w-full max-sm:flex-wrap",
                   style: { gap: "var(--spacing-3xl)" },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -17450,7 +17499,7 @@ function GridTilesList({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl, 16px)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -17494,14 +17543,14 @@ function GridTilesList({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex items-start justify-end shrink-0",
+                  className: "flex items-end justify-end shrink-0 max-sm:w-full max-sm:flex-wrap",
                   style: { gap: "var(--spacing-3xl, 24px)" },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -17983,7 +18032,7 @@ function ProfileGridTilesList({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -18027,14 +18076,14 @@ function ProfileGridTilesList({
               /* @__PURE__ */ jsxs(
                 "div",
                 {
-                  className: "flex flex-wrap items-start justify-end shrink-0",
+                  className: "flex flex-wrap items-end justify-end shrink-0 max-sm:w-full max-sm:flex-wrap",
                   style: { gap: "var(--spacing-3xl)" },
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
-                    /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: filterValue || void 0, onValueChange: handleFilterChange, children: [
                       /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Filter" }) }),
                       /* @__PURE__ */ jsx(SelectContent, { children: filterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                     ] }) }),
@@ -18106,8 +18155,15 @@ function useCSSVariableColors() {
   const readColors = useCallback(() => {
     if (typeof window === "undefined") return;
     const style = getComputedStyle(document.documentElement);
+    const primary = style.getPropertyValue("--canvas-primary").trim() || "#1165ef";
+    const hexToRgba = (hex, alpha) => {
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    };
     setColors({
-      primary: style.getPropertyValue("--canvas-primary").trim() || "#1165ef",
+      primary,
       background: style.getPropertyValue("--canvas-background").trim() || "#ffffff",
       text: style.getPropertyValue("--canvas-text").trim() || "#0d121c",
       textMuted: style.getPropertyValue("--canvas-text-muted").trim() || "#4b5565",
@@ -18119,8 +18175,8 @@ function useCSSVariableColors() {
       chartColor3: style.getPropertyValue("--chart-color-3").trim() || "#f8f578",
       chartColor4: style.getPropertyValue("--chart-color-4").trim() || "#f2b66b",
       chartColor5: style.getPropertyValue("--chart-color-5").trim() || "#6c7684",
-      chartLineColor: style.getPropertyValue("--chart-line-color").trim() || "#1165ef",
-      chartAreaColor: style.getPropertyValue("--chart-area-color").trim() || "rgba(17, 101, 239, 0.1)"
+      chartLineColor: style.getPropertyValue("--chart-line-color").trim() || primary,
+      chartAreaColor: style.getPropertyValue("--chart-area-color").trim() || hexToRgba(primary, 0.1)
     });
   }, []);
   useEffect(() => {
@@ -18240,7 +18296,7 @@ function WidgetFooter({
   );
 }
 function MetricCard({ label, value, change, className }) {
-  return /* @__PURE__ */ jsx(WidgetCard, { className: cn("flex-1 min-w-0", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(WidgetCard, { className: cn("flex-1 min-w-[200px]", className), children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: "flex flex-col justify-center",
@@ -18300,7 +18356,7 @@ function MetricCardsRow({ metrics, columns = 4, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex w-full", className),
+      className: cn("flex flex-wrap w-full", className),
       style: { gap: "var(--spacing-4xl, 32px)" },
       children: metrics.slice(0, columns).map((metric) => /* @__PURE__ */ jsx(
         MetricCard,
@@ -18927,7 +18983,7 @@ function TwoColumnWidgets({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("flex w-full", className),
+      className: cn("flex w-full items-start", className),
       style: { gap: "var(--spacing-4xl, 32px)" },
       children
     }
@@ -19245,20 +19301,20 @@ var defaultRows = [
   }
 ];
 function FormField({ field, inputSize = "default", onChange }) {
-  const [localValue, setLocalValue] = React13.useState(field.value);
-  const [tags, setTags] = React13.useState(
+  const [localValue, setLocalValue] = React14.useState(field.value);
+  const [tags, setTags] = React14.useState(
     Array.isArray(field.value) && field.type === "multiselect-tags" ? field.value : []
   );
-  const [checkedItems, setCheckedItems] = React13.useState(
+  const [checkedItems, setCheckedItems] = React14.useState(
     Array.isArray(field.value) && field.type === "checkbox-group" ? field.value : []
   );
-  const [images, setImages] = React13.useState(
+  const [images, setImages] = React14.useState(
     Array.isArray(field.value) && field.type === "image-uploader" ? field.value : []
   );
-  const [files, setFiles] = React13.useState(
+  const [files, setFiles] = React14.useState(
     Array.isArray(field.value) && field.type === "file-uploader" ? field.value : []
   );
-  const [sliderValue, setSliderValue] = React13.useState(
+  const [sliderValue, setSliderValue] = React14.useState(
     Array.isArray(field.value) && field.type === "slider" ? field.value : [0]
   );
   const handleChange = (value) => {
@@ -19511,8 +19567,8 @@ function FormGroup({
   showFooter = true,
   className
 }) {
-  const [sortValue, setSortValue] = React13.useState("");
-  const [filterValue, setFilterValue] = React13.useState("");
+  const [sortValue, setSortValue] = React14.useState("");
+  const [filterValue, setFilterValue] = React14.useState("");
   const handleSortChange = (value) => {
     setSortValue(value);
     onSort?.(value);
@@ -19530,7 +19586,7 @@ function FormGroup({
         showHeader && /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: [
               /* @__PURE__ */ jsxs(
@@ -19571,12 +19627,12 @@ function FormGroup({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-end shrink-0 gap-3", children: [
-                /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-end shrink-0 gap-3 max-sm:w-full max-sm:flex-wrap", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(Select, { value: sortValue || void 0, onValueChange: handleSortChange, children: [
                   /* @__PURE__ */ jsx(SelectTrigger, { inputSize: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Sort" }) }),
                   /* @__PURE__ */ jsx(SelectContent, { children: sortOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.id, children: option.label }, option.id)) })
                 ] }) }),
-                /* @__PURE__ */ jsx("div", { className: "w-[120px]", children: /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx("div", { className: "w-[120px] max-sm:flex-1 max-sm:min-w-[120px]", children: /* @__PURE__ */ jsxs(
                   Select,
                   {
                     value: filterValue || void 0,
@@ -19934,7 +19990,7 @@ function MonthlyCalendarWidget({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: "flex flex-wrap items-start w-full",
+            className: "flex flex-wrap items-end w-full",
             style: { gap: "var(--spacing-xl)" },
             children: /* @__PURE__ */ jsxs(
               "div",
@@ -25009,7 +25065,16 @@ function SliderRow({
                   borderRadius: "4px",
                   background: "#ffffff",
                   color: "#374151",
-                  textAlign: "right"
+                  textAlign: "right",
+                  outline: "none"
+                },
+                onFocus: (e) => {
+                  e.currentTarget.style.borderColor = "var(--canvas-primary)";
+                  e.currentTarget.style.boxShadow = "0 0 0 2px var(--canvas-primary)";
+                },
+                onBlur: (e) => {
+                  e.currentTarget.style.borderColor = "#e5e7eb";
+                  e.currentTarget.style.boxShadow = "none";
                 }
               }
             ),
@@ -25033,7 +25098,8 @@ function SliderRow({
           appearance: "none",
           WebkitAppearance: "none",
           cursor: "pointer",
-          background: gradient
+          background: gradient,
+          outline: "none"
         }
       }
     )
@@ -25137,7 +25203,16 @@ function ColorInputRow({
               color: "#374151",
               background: "#ffffff",
               textTransform: "uppercase",
-              textAlign: "center"
+              textAlign: "center",
+              outline: "none"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = "var(--canvas-primary)";
+              e.currentTarget.style.boxShadow = "0 0 0 2px var(--canvas-primary)";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "#e5e7eb";
+              e.currentTarget.style.boxShadow = "none";
             },
             placeholder: "#000000"
           }
@@ -25289,7 +25364,16 @@ function VariableColorRow({
               color: "#374151",
               background: "#ffffff",
               textTransform: "uppercase",
-              textAlign: "center"
+              textAlign: "center",
+              outline: "none"
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.borderColor = "var(--canvas-primary)";
+              e.currentTarget.style.boxShadow = "0 0 0 2px var(--canvas-primary)";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.borderColor = "#e5e7eb";
+              e.currentTarget.style.boxShadow = "none";
             },
             placeholder: "#000000"
           }
@@ -25406,6 +25490,7 @@ function ColorsPanel({ theme }) {
                   appearance: "none",
                   WebkitAppearance: "none",
                   cursor: "pointer",
+                  outline: "none",
                   background: "linear-gradient(to right, hsl(0, 80%, 50%), hsl(60, 80%, 50%), hsl(120, 80%, 50%), hsl(180, 80%, 50%), hsl(240, 80%, 50%), hsl(300, 80%, 50%), hsl(360, 80%, 50%))"
                 }
               }
@@ -25455,6 +25540,7 @@ function ColorsPanel({ theme }) {
                   appearance: "none",
                   WebkitAppearance: "none",
                   cursor: "pointer",
+                  outline: "none",
                   background: `linear-gradient(to right, #d1d5db, ${theme.variables["--canvas-primary"] || "#1165ef"})`
                 }
               }
@@ -25575,10 +25661,10 @@ var brandingColorOptions = [
   { value: "var(--canvas-destructive)", label: "Destructive" }
 ];
 var imageConfig = [
-  { key: "logoLight", label: "Logo (Light)" },
-  { key: "logoDark", label: "Logo (Dark)" },
-  { key: "faviconLight", label: "Favicon (Light)" },
-  { key: "faviconDark", label: "Favicon (Dark)" }
+  { key: "logoLight", label: "Logo (Above light background)" },
+  { key: "logoDark", label: "Logo (Above dark background)" },
+  { key: "faviconLight", label: "Favicon (Above light background)" },
+  { key: "faviconDark", label: "Favicon (Above dark background)" }
 ];
 function ImagesPanel({ theme, onImageUpload }) {
   const currentShape = iconShapes6.find((s) => s.id === theme.branding.iconShape) ?? iconShapes6[0];
@@ -25684,7 +25770,16 @@ function ImagesPanel({ theme, onImageUpload }) {
                     borderRadius: "6px",
                     color: "#374151",
                     background: "#ffffff",
-                    boxSizing: "border-box"
+                    boxSizing: "border-box",
+                    outline: "none"
+                  },
+                  onFocus: (e) => {
+                    e.currentTarget.style.borderColor = "var(--canvas-primary)";
+                    e.currentTarget.style.boxShadow = "0 0 0 2px var(--canvas-primary)";
+                  },
+                  onBlur: (e) => {
+                    e.currentTarget.style.borderColor = "#e5e7eb";
+                    e.currentTarget.style.boxShadow = "none";
                   },
                   placeholder: "Your brand name"
                 }
@@ -25718,7 +25813,16 @@ function ImagesPanel({ theme, onImageUpload }) {
                     color: "#374151",
                     background: "#ffffff",
                     cursor: "pointer",
-                    boxSizing: "border-box"
+                    boxSizing: "border-box",
+                    outline: "none"
+                  },
+                  onFocus: (e) => {
+                    e.currentTarget.style.borderColor = "var(--canvas-primary)";
+                    e.currentTarget.style.boxShadow = "0 0 0 2px var(--canvas-primary)";
+                  },
+                  onBlur: (e) => {
+                    e.currentTarget.style.borderColor = "#e5e7eb";
+                    e.currentTarget.style.boxShadow = "none";
                   },
                   children: iconShapes6.map((shape) => /* @__PURE__ */ jsx("option", { value: shape.id, children: shape.label }, shape.id))
                 }
@@ -26366,7 +26470,7 @@ function SizeGroup({
   size,
   theme
 }) {
-  const [expanded, setExpanded] = React13__default.useState(false);
+  const [expanded, setExpanded] = React14__default.useState(false);
   const heightVar = `${size.prefix}-height`;
   const fontSizeVar = `${size.prefix}-font-size`;
   const pxVar = `${size.prefix}-px`;
@@ -26517,7 +26621,7 @@ function ButtonColorGroup({
   style,
   theme
 }) {
-  const [expanded, setExpanded] = React13__default.useState(false);
+  const [expanded, setExpanded] = React14__default.useState(false);
   const prefix = `--btn-${style.id}`;
   const bg = theme.variables[`${prefix}-bg`] ?? defaultButtonColors[`${prefix}-bg`] ?? "";
   const text = theme.variables[`${prefix}-text`] ?? defaultButtonColors[`${prefix}-text`] ?? "";
@@ -26666,7 +26770,7 @@ function InputSizeGroup({
   size,
   theme
 }) {
-  const [expanded, setExpanded] = React13__default.useState(false);
+  const [expanded, setExpanded] = React14__default.useState(false);
   const heightVar = `${size.prefix}-height`;
   const fontSizeVar = `${size.prefix}-font-size`;
   const pxVar = `${size.prefix}-px`;
@@ -27099,25 +27203,24 @@ var drawerStyles = {
   },
   tabBar: {
     display: "flex",
-    borderBottom: "1px solid #e5e7eb",
     background: "#ffffff",
-    padding: "0 8px",
-    gap: "0",
+    padding: "0 16px",
+    gap: "16px",
     flexShrink: 0,
-    overflowX: "auto"
+    overflowX: "auto",
+    borderBottom: "1px solid #e5e7eb"
   },
   tab: (active) => ({
-    flex: 1,
-    padding: "10px 4px",
+    padding: "10px 0",
     fontSize: "12px",
     fontWeight: active ? 500 : 400,
     color: active ? "#111827" : "#9ca3af",
     background: "none",
     border: "none",
     borderBottom: active ? "2px solid #111827" : "2px solid transparent",
+    marginBottom: "-1px",
     cursor: "pointer",
     transition: "color 150ms, border-color 150ms",
-    textAlign: "center",
     whiteSpace: "nowrap"
   }),
   footer: {
@@ -27348,7 +27451,6 @@ function ThemeDrawer({
               className: "!p-0",
               style: {
                 padding: "16px 16px 12px",
-                borderBottom: "1px solid #e5e7eb",
                 background: "#ffffff"
               },
               children: /* @__PURE__ */ jsxs("div", { style: { padding: "16px 16px 0" }, children: [
@@ -27371,7 +27473,7 @@ function ThemeDrawer({
                       fontSize: "13px",
                       color: "#6b7280",
                       marginTop: "2px",
-                      marginBottom: "4px",
+                      marginBottom: "12px",
                       fontFamily: drawerStyles.container.fontFamily
                     },
                     children: theme.unsavedChangesCount > 0 ? `${theme.unsavedChangesCount} unsaved change${theme.unsavedChangesCount !== 1 ? "s" : ""}` : "Customize your design system"