@misael703/ui 1.14.0 → 1.16.0

package/dist/components/AppShell.d.mts

@@ -17,6 +17,15 @@ interface NavSection {
     items: NavItem[];
 }
 type AppShellTheme = 'default' | 'brand';
+type AppShellHeaderLayout = 'side' | 'top';
+interface AppShellHeader {
+    /** Left slot — typically a menu/hamburger trigger or back action. */
+    left?: React.ReactNode;
+    /** Center slot — typically the brand (Logo). Lands at the true viewport centre. */
+    center?: React.ReactNode;
+    /** Right slot — notifications, user avatar, utilities. */
+    right?: React.ReactNode;
+}
 interface AppShellProps {
     brand?: React.ReactNode;
     brandCollapsed?: React.ReactNode;
@@ -37,8 +46,22 @@ interface AppShellProps {
     theme?: AppShellTheme;
     /** Render-prop for navigation links so the host app can use Next.js Link, etc. */
     linkAs?: (item: NavItem, content: React.ReactNode, className: string) => React.ReactNode;
+    /**
+     * Where the chrome lives. Default `'side'` is the legacy layout. `'top'`
+     * renders a full-width header above the body with three slots
+     * (`header.left/center/right`); the centre slot lands at the **true
+     * viewport centre** (1fr·auto·1fr column grid). The sidebar has no brand
+     * block (brand goes in `header.center`) and `collapsed` hides the
+     * sidebar entirely — no 72px rail. The topbar is **invariant** to the
+     * collapse (only the sidebar changes width). `theme="brand"` tints both
+     * header and sidebar with the same brand colour (single knob). `brand`,
+     * `brandCollapsed` and `topbar` are ignored when `'top'`.
+     */
+    headerLayout?: AppShellHeaderLayout;
+    /** Slots for the top-layout header (only used when `headerLayout="top"`). */
+    header?: AppShellHeader;
 }
-declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, headerLayout, header, }: AppShellProps): react_jsx_runtime.JSX.Element;
 interface PageHeaderProps {
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -52,4 +75,4 @@ interface PageHeaderProps {
 }
 declare function PageHeader({ title, description, breadcrumbs, actions, meta, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };
+export { AppShell, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };

package/dist/components/AppShell.d.ts

@@ -17,6 +17,15 @@ interface NavSection {
     items: NavItem[];
 }
 type AppShellTheme = 'default' | 'brand';
+type AppShellHeaderLayout = 'side' | 'top';
+interface AppShellHeader {
+    /** Left slot — typically a menu/hamburger trigger or back action. */
+    left?: React.ReactNode;
+    /** Center slot — typically the brand (Logo). Lands at the true viewport centre. */
+    center?: React.ReactNode;
+    /** Right slot — notifications, user avatar, utilities. */
+    right?: React.ReactNode;
+}
 interface AppShellProps {
     brand?: React.ReactNode;
     brandCollapsed?: React.ReactNode;
@@ -37,8 +46,22 @@ interface AppShellProps {
     theme?: AppShellTheme;
     /** Render-prop for navigation links so the host app can use Next.js Link, etc. */
     linkAs?: (item: NavItem, content: React.ReactNode, className: string) => React.ReactNode;
+    /**
+     * Where the chrome lives. Default `'side'` is the legacy layout. `'top'`
+     * renders a full-width header above the body with three slots
+     * (`header.left/center/right`); the centre slot lands at the **true
+     * viewport centre** (1fr·auto·1fr column grid). The sidebar has no brand
+     * block (brand goes in `header.center`) and `collapsed` hides the
+     * sidebar entirely — no 72px rail. The topbar is **invariant** to the
+     * collapse (only the sidebar changes width). `theme="brand"` tints both
+     * header and sidebar with the same brand colour (single knob). `brand`,
+     * `brandCollapsed` and `topbar` are ignored when `'top'`.
+     */
+    headerLayout?: AppShellHeaderLayout;
+    /** Slots for the top-layout header (only used when `headerLayout="top"`). */
+    header?: AppShellHeader;
 }
-declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, }: AppShellProps): react_jsx_runtime.JSX.Element;
+declare function AppShell({ brand, brandCollapsed, sections, topbar, footer, user, defaultCollapsed, collapsed: ctrlCollapsed, onCollapsedChange, children, className, theme, linkAs, headerLayout, header, }: AppShellProps): react_jsx_runtime.JSX.Element;
 interface PageHeaderProps {
     title: React.ReactNode;
     description?: React.ReactNode;
@@ -52,4 +75,4 @@ interface PageHeaderProps {
 }
 declare function PageHeader({ title, description, breadcrumbs, actions, meta, className }: PageHeaderProps): react_jsx_runtime.JSX.Element;
 
-export { AppShell, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };
+export { AppShell, type AppShellHeader, type AppShellHeaderLayout, type AppShellProps, type AppShellTheme, type NavItem, type NavSection, PageHeader, type PageHeaderProps };

package/dist/components/AppShell.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var chunkQLYPHMPH_js = require('../chunk-QLYPHMPH.js');
+var chunk7LCZ6ABE_js = require('../chunk-7LCZ6ABE.js');
 require('../chunk-4VMQLSHV.js');
 require('../chunk-RQOTH7I7.js');
 require('../chunk-PASF6T4H.js');
@@ -10,11 +10,11 @@ require('../chunk-PASF6T4H.js');
 
 Object.defineProperty(exports, "AppShell", {
   enumerable: true,
-  get: function () { return chunkQLYPHMPH_js.AppShell; }
+  get: function () { return chunk7LCZ6ABE_js.AppShell; }
 });
 Object.defineProperty(exports, "PageHeader", {
   enumerable: true,
-  get: function () { return chunkQLYPHMPH_js.PageHeader; }
+  get: function () { return chunk7LCZ6ABE_js.PageHeader; }
 });
 //# sourceMappingURL=AppShell.js.map
 //# sourceMappingURL=AppShell.js.map

package/dist/components/AppShell.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { AppShell, PageHeader } from '../chunk-HUEO23A2.mjs';
+export { AppShell, PageHeader } from '../chunk-Y6AYAE4O.mjs';
 import '../chunk-PQV7HHCJ.mjs';
 import '../chunk-CIBJKJV3.mjs';
 import '../chunk-IEPCH3JB.mjs';

package/dist/components/Pickers.d.mts

@@ -19,8 +19,16 @@ interface ComboboxProps<T = string> {
     invalid?: boolean;
     disabled?: boolean;
     id?: string;
+    /**
+     * Whether the trigger is a typeable text input that filters options.
+     * Default `true` (the searchable Combobox). Set `false` for a non-typing
+     * picker: button trigger + the same kit-styled listbox, no filter, full
+     * list always. Closes the gap between native `<Select>` (jarring native
+     * dropdown) and the searchable Combobox — same visual register, no input.
+     */
+    searchable?: boolean;
 }
-declare function Combobox<T = string>({ value, onChange, options, placeholder, emptyMessage, filter, className, invalid, disabled, id, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T = string>({ value, onChange, options, placeholder, emptyMessage, filter, className, invalid, disabled, id, searchable, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 interface DatePickerProps {
     value: Date | null;
     onChange: (date: Date | null) => void;

package/dist/components/Pickers.d.ts

@@ -19,8 +19,16 @@ interface ComboboxProps<T = string> {
     invalid?: boolean;
     disabled?: boolean;
     id?: string;
+    /**
+     * Whether the trigger is a typeable text input that filters options.
+     * Default `true` (the searchable Combobox). Set `false` for a non-typing
+     * picker: button trigger + the same kit-styled listbox, no filter, full
+     * list always. Closes the gap between native `<Select>` (jarring native
+     * dropdown) and the searchable Combobox — same visual register, no input.
+     */
+    searchable?: boolean;
 }
-declare function Combobox<T = string>({ value, onChange, options, placeholder, emptyMessage, filter, className, invalid, disabled, id, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
+declare function Combobox<T = string>({ value, onChange, options, placeholder, emptyMessage, filter, className, invalid, disabled, id, searchable, }: ComboboxProps<T>): react_jsx_runtime.JSX.Element;
 interface DatePickerProps {
     value: Date | null;
     onChange: (date: Date | null) => void;

package/dist/components/Pickers.js

@@ -1,7 +1,7 @@
 'use client';
 'use strict';
 
-var chunkCPATAMLH_js = require('../chunk-CPATAMLH.js');
+var chunk62F5E5NQ_js = require('../chunk-62F5E5NQ.js');
 require('../chunk-HHEYTMBY.js');
 require('../chunk-XMLBKK7X.js');
 require('../chunk-7I5LFBQR.js');
@@ -15,23 +15,23 @@ require('../chunk-PASF6T4H.js');
 
 Object.defineProperty(exports, "Combobox", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.Combobox; }
+  get: function () { return chunk62F5E5NQ_js.Combobox; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.DatePicker; }
+  get: function () { return chunk62F5E5NQ_js.DatePicker; }
 });
 Object.defineProperty(exports, "FileUpload", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.FileUpload; }
+  get: function () { return chunk62F5E5NQ_js.FileUpload; }
 });
 Object.defineProperty(exports, "MonthPicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.MonthPicker; }
+  get: function () { return chunk62F5E5NQ_js.MonthPicker; }
 });
 Object.defineProperty(exports, "YearPicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.YearPicker; }
+  get: function () { return chunk62F5E5NQ_js.YearPicker; }
 });
 //# sourceMappingURL=Pickers.js.map
 //# sourceMappingURL=Pickers.js.map

package/dist/components/Pickers.mjs

@@ -1,5 +1,5 @@
 'use client';
-export { Combobox, DatePicker, FileUpload, MonthPicker, YearPicker } from '../chunk-TS6HCQLX.mjs';
+export { Combobox, DatePicker, FileUpload, MonthPicker, YearPicker } from '../chunk-5MIN6LUP.mjs';
 import '../chunk-N5D6AC6M.mjs';
 import '../chunk-6P2TKRTL.mjs';
 import '../chunk-PRML6VEF.mjs';

package/dist/index.d.mts

@@ -15,7 +15,7 @@ export { Accordion, AccordionItem, AccordionProps, BreadcrumbItem, Breadcrumbs,
 export { CheckboxGroup, CheckboxGroupProps, MoneyInput, MoneyInputProps, OptionItem, PhoneInput, PhoneInputProps, Progress, ProgressCircle, ProgressCircleProps, ProgressProps, RadioGroup, RadioGroupProps, Slider, SliderProps, TagInput, TagInputProps, TimePicker, TimePickerProps } from './components/InputsExtra.mjs';
 export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Menu, MenuItemProps, MenuProps, Stat, StatProps } from './components/Display2.mjs';
 export { CommandItem, CommandPalette, CommandPaletteProps, DateRange, DateRangePicker, DateRangePickerProps, MultiCombobox, MultiComboboxOption, MultiComboboxProps, UseCommandPaletteOptions, useCommandPalette } from './components/AdvancedPickers.mjs';
-export { AppShell, AppShellProps, AppShellTheme, NavItem, NavSection, PageHeader, PageHeaderProps } from './components/AppShell.mjs';
+export { AppShell, AppShellHeader, AppShellHeaderLayout, AppShellProps, AppShellTheme, NavItem, NavSection, PageHeader, PageHeaderProps } from './components/AppShell.mjs';
 export { AreaChart, AreaChartProps, BarChart, BarChartProps, BaseChartProps, DonutChart, DonutChartProps, LineChart, LineChartProps, RechartsLike, Sparkline, SparklineProps } from './components/Charts.mjs';
 export { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bold, Building, CalendarIcon, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Copy, CreditCard, Download, Edit, ExternalLink, Eye, EyeOff, FileText, Filter, Folder, Globe, Heart, Home, IconProps, Info, Italic, Link, Loader, Lock, LogOut, Mail, MapPin, MenuIcon, Minus, Moon, MoreHorizontal, MoreVertical, Package, Phone, Plus, RefreshCw, Search, Settings, ShoppingCart, Star, Sun, Tag, Tool, Trash, Truck, Underline, Unlock, Upload, User, Users, Wrench, X } from './components/Icons.mjs';
 export { Logo, LogoBg, LogoFormat, LogoProps, LogoVariant } from './components/Logo.mjs';

package/dist/index.d.ts

@@ -15,7 +15,7 @@ export { Accordion, AccordionItem, AccordionProps, BreadcrumbItem, Breadcrumbs,
 export { CheckboxGroup, CheckboxGroupProps, MoneyInput, MoneyInputProps, OptionItem, PhoneInput, PhoneInputProps, Progress, ProgressCircle, ProgressCircleProps, ProgressProps, RadioGroup, RadioGroupProps, Slider, SliderProps, TagInput, TagInputProps, TimePicker, TimePickerProps } from './components/InputsExtra.js';
 export { Avatar, AvatarGroup, AvatarGroupProps, AvatarProps, Menu, MenuItemProps, MenuProps, Stat, StatProps } from './components/Display2.js';
 export { CommandItem, CommandPalette, CommandPaletteProps, DateRange, DateRangePicker, DateRangePickerProps, MultiCombobox, MultiComboboxOption, MultiComboboxProps, UseCommandPaletteOptions, useCommandPalette } from './components/AdvancedPickers.js';
-export { AppShell, AppShellProps, AppShellTheme, NavItem, NavSection, PageHeader, PageHeaderProps } from './components/AppShell.js';
+export { AppShell, AppShellHeader, AppShellHeaderLayout, AppShellProps, AppShellTheme, NavItem, NavSection, PageHeader, PageHeaderProps } from './components/AppShell.js';
 export { AreaChart, AreaChartProps, BarChart, BarChartProps, BaseChartProps, DonutChart, DonutChartProps, LineChart, LineChartProps, RechartsLike, Sparkline, SparklineProps } from './components/Charts.js';
 export { AlertCircle, AlertTriangle, AlignCenter, AlignLeft, AlignRight, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Bell, Bold, Building, CalendarIcon, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Clock, Copy, CreditCard, Download, Edit, ExternalLink, Eye, EyeOff, FileText, Filter, Folder, Globe, Heart, Home, IconProps, Info, Italic, Link, Loader, Lock, LogOut, Mail, MapPin, MenuIcon, Minus, Moon, MoreHorizontal, MoreVertical, Package, Phone, Plus, RefreshCw, Search, Settings, ShoppingCart, Star, Sun, Tag, Tool, Trash, Truck, Underline, Unlock, Upload, User, Users, Wrench, X } from './components/Icons.js';
 export { Logo, LogoBg, LogoFormat, LogoProps, LogoVariant } from './components/Logo.js';

package/dist/index.js

@@ -1,11 +1,11 @@
 'use client';
 'use strict';
 
-require('./chunk-427NHGTX.js');
 require('./chunk-4REALDR3.js');
 require('./chunk-2LTV7VB5.js');
+require('./chunk-427NHGTX.js');
 var chunkJT2SFHBH_js = require('./chunk-JT2SFHBH.js');
-var chunkCPATAMLH_js = require('./chunk-CPATAMLH.js');
+var chunk62F5E5NQ_js = require('./chunk-62F5E5NQ.js');
 var chunkVDBGWTIG_js = require('./chunk-VDBGWTIG.js');
 var chunkQHRP73CS_js = require('./chunk-QHRP73CS.js');
 var chunk55ITZTLL_js = require('./chunk-55ITZTLL.js');
@@ -41,7 +41,7 @@ var chunkXMLBKK7X_js = require('./chunk-XMLBKK7X.js');
 var chunk7I5LFBQR_js = require('./chunk-7I5LFBQR.js');
 var chunkWAGWB35Q_js = require('./chunk-WAGWB35Q.js');
 var chunk3PXYCXDW_js = require('./chunk-3PXYCXDW.js');
-var chunkQLYPHMPH_js = require('./chunk-QLYPHMPH.js');
+var chunk7LCZ6ABE_js = require('./chunk-7LCZ6ABE.js');
 var chunk4VMQLSHV_js = require('./chunk-4VMQLSHV.js');
 var chunkAJ22SXI2_js = require('./chunk-AJ22SXI2.js');
 var chunkEUB4PHPI_js = require('./chunk-EUB4PHPI.js');
@@ -59,23 +59,23 @@ Object.defineProperty(exports, "PermissionMatrix", {
 });
 Object.defineProperty(exports, "Combobox", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.Combobox; }
+  get: function () { return chunk62F5E5NQ_js.Combobox; }
 });
 Object.defineProperty(exports, "DatePicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.DatePicker; }
+  get: function () { return chunk62F5E5NQ_js.DatePicker; }
 });
 Object.defineProperty(exports, "FileUpload", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.FileUpload; }
+  get: function () { return chunk62F5E5NQ_js.FileUpload; }
 });
 Object.defineProperty(exports, "MonthPicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.MonthPicker; }
+  get: function () { return chunk62F5E5NQ_js.MonthPicker; }
 });
 Object.defineProperty(exports, "YearPicker", {
   enumerable: true,
-  get: function () { return chunkCPATAMLH_js.YearPicker; }
+  get: function () { return chunk62F5E5NQ_js.YearPicker; }
 });
 Object.defineProperty(exports, "Popover", {
   enumerable: true,
@@ -635,11 +635,11 @@ Object.defineProperty(exports, "resetBrand", {
 });
 Object.defineProperty(exports, "AppShell", {
   enumerable: true,
-  get: function () { return chunkQLYPHMPH_js.AppShell; }
+  get: function () { return chunk7LCZ6ABE_js.AppShell; }
 });
 Object.defineProperty(exports, "PageHeader", {
   enumerable: true,
-  get: function () { return chunkQLYPHMPH_js.PageHeader; }
+  get: function () { return chunk7LCZ6ABE_js.PageHeader; }
 });
 Object.defineProperty(exports, "LocaleProvider", {
   enumerable: true,

package/dist/index.mjs

@@ -1,9 +1,9 @@
 'use client';
-import './chunk-BVQRDAR7.mjs';
 import './chunk-CHVTPN3K.mjs';
 import './chunk-XTHC46M2.mjs';
+import './chunk-BVQRDAR7.mjs';
 export { PermissionMatrix } from './chunk-LVLJ75ND.mjs';
-export { Combobox, DatePicker, FileUpload, MonthPicker, YearPicker } from './chunk-TS6HCQLX.mjs';
+export { Combobox, DatePicker, FileUpload, MonthPicker, YearPicker } from './chunk-5MIN6LUP.mjs';
 export { Popover } from './chunk-FA6526ME.mjs';
 export { ResizableGroup, ResizableHandle, ResizablePanel } from './chunk-ML5IYW5D.mjs';
 export { ToastProvider, useToast } from './chunk-CGOUG3W5.mjs';
@@ -39,7 +39,7 @@ export { useDismiss } from './chunk-6P2TKRTL.mjs';
 export { usePopoverPosition } from './chunk-PRML6VEF.mjs';
 export { Portal } from './chunk-FKBQYQQD.mjs';
 export { BRAND_DEFAULTS, configureBrand, getBrand, resetBrand } from './chunk-5GEWIK4T.mjs';
-export { AppShell, PageHeader } from './chunk-HUEO23A2.mjs';
+export { AppShell, PageHeader } from './chunk-Y6AYAE4O.mjs';
 export { LocaleProvider, esMessages, useLocale } from './chunk-PQV7HHCJ.mjs';
 export { Button, ButtonGroup } from './chunk-NAL457NQ.mjs';
 export { AspectRatio, ScrollArea, Separator, Slot, Slottable } from './chunk-IEPKSPBX.mjs';

package/dist/presets/elalba/styles.css

@@ -1 +1 @@
-:root{--color-primary-900:#001a4d;--color-primary-800:#00246b;--color-primary-700:#002f87;--color-primary-600:#1a46a0;--color-primary-500:#3a62b4;--color-primary-400:#6b8aca;--color-primary-300:#9bb1dc;--color-primary-200:#c7d3ea;--color-primary-100:#e3eaf4;--color-primary-50:#f2f5fb;--color-secondary-900:#8c3000;--color-secondary-800:#b84300;--color-secondary-700:#e05400;--color-secondary-600:#ff671d;--color-secondary-500:#ff8344;--color-secondary-400:#ffa06e;--color-secondary-300:#ffbe98;--color-secondary-200:#ffd6bb;--color-secondary-100:#ffe8d7;--color-secondary-50:#fff5ee;--color-ink:#0c1220;--color-gray-900:#161c2c;--color-gray-800:#23293a;--color-gray-700:#3a4052;--color-gray-600:#5b6173;--color-gray-500:#7e8495;--color-gray-400:#a6acbb;--color-gray-300:#c9cdd7;--color-gray-200:#e3e6ec;--color-gray-150:#eceef3;--color-gray-100:#f4f5f8;--color-gray-50:#fafbfc;--bg-canvas:var(--color-white);--color-primary:var(--color-primary-700);--color-secondary:var(--color-secondary-600);--fg-on-secondary:var(--color-white);--fg-muted:var(--color-gray-600);--fg-subtle:#686d7c;--btn-primary-bg:var(--color-secondary);--btn-primary-fg:var(--color-white);--btn-primary-bg-hover:var(--color-secondary-500);--btn-secondary-bg:var(--color-primary);--btn-secondary-fg:var(--color-white);--btn-secondary-bg-hover:var(--color-primary-900)}
+:root{--color-primary-900:#001a4d;--color-primary-800:#00246b;--color-primary-700:#002f87;--color-primary-600:#1a46a0;--color-primary-500:#3a62b4;--color-primary-400:#6b8aca;--color-primary-300:#9bb1dc;--color-primary-200:#c7d3ea;--color-primary-100:#e3eaf4;--color-primary-50:#f2f5fb;--color-secondary-900:#8c3000;--color-secondary-800:#b84300;--color-secondary-700:#e05400;--color-secondary-600:#ff671d;--color-secondary-500:#ff8344;--color-secondary-400:#ffa06e;--color-secondary-300:#ffbe98;--color-secondary-200:#ffd6bb;--color-secondary-100:#ffe8d7;--color-secondary-50:#fff5ee;--color-ink:#0c1220;--color-gray-900:#161c2c;--color-gray-800:#23293a;--color-gray-700:#3a4052;--color-gray-600:#5b6173;--color-gray-500:#7e8495;--color-gray-400:#a6acbb;--color-gray-300:#c9cdd7;--color-gray-200:#e3e6ec;--color-gray-150:#eceef3;--color-gray-100:#f4f5f8;--color-gray-50:#fafbfc;--bg-canvas:#eaeef5;--bg-subtle:#f1f4f9;--bg-muted:#e7ebf2;--color-primary:var(--color-primary-700);--color-secondary:var(--color-secondary-600);--fg-on-secondary:var(--color-white);--fg-muted:var(--color-gray-600);--fg-subtle:#666b78;--btn-primary-bg:var(--color-secondary);--btn-primary-fg:var(--color-white);--btn-primary-bg-hover:var(--color-secondary-500);--btn-secondary-bg:var(--color-primary);--btn-secondary-fg:var(--color-white);--btn-secondary-bg-hover:var(--color-primary-900)}