@geomak/ui 7.3.3 → 7.4.0

package/dist/{chunk-OAV4TA4B.cjs → chunk-CNUDNGJM.cjs}

@@ -230,6 +230,7 @@ var vars = {
     topbar: "var(--z-topbar)",
     overlay: "var(--z-overlay)",
     modal: "var(--z-modal)",
+    popover: "var(--z-popover)",
     toast: "var(--z-toast)",
     tooltip: "var(--z-tooltip)"
   }
@@ -239,5 +240,5 @@ exports.PALETTE = PALETTE;
 exports.colors_default = colors_default;
 exports.semanticTokens = semanticTokens;
 exports.vars = vars;
-//# sourceMappingURL=chunk-OAV4TA4B.cjs.map
-//# sourceMappingURL=chunk-OAV4TA4B.cjs.map
+//# sourceMappingURL=chunk-CNUDNGJM.cjs.map
+//# sourceMappingURL=chunk-CNUDNGJM.cjs.map

package/dist/chunk-CNUDNGJM.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/colors.ts","../src/tokens/index.ts"],"names":[],"mappings":"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","file":"chunk-CNUDNGJM.cjs","sourcesContent":["/**\n * Oxygen design-system colour palette.\n * Duplicated here so the published package is fully self-contained.\n */\nexport const PALETTE = {\n    'true-blue': '#0466C8',\n    'usafa-blue': '#0353A4',\n    'dark-cornflower-blue': '#023E7D',\n    'oxford-blue-700': '#002855',\n    'oxford-blue-800': '#001845',\n    'oxford-blue-900': '#001233',\n    independence: '#33415C',\n    'black-coral': '#5C677D',\n    'roman-silver': '#7D8597',\n    manatee: '#979DAC',\n    white: '#fff',\n    ice: '#DBF1FD',\n    'ice-dark': '#d0e3ed',\n    'midnight-green-eagle-900': '#013E53',\n    'midnight-green-eagle-700': '#125F6C',\n    'midnight-green-eagle-500': '#125F6C',\n    'rich-black-fogra': '#000202',\n    'rich-black-fogra-opaque': '#0000005b',\n    'prussian-blue': '#00273A',\n    'indigo-dye': '#013C54',\n    ming: '#0F6372',\n    skobeloff: '#217479',\n    'dark-cyan': '#2A8784',\n    'celadon-green': '#297E74',\n    turquise: '#2EB8B0',\n    'oxford-blue-700-opaque': 'rgba(0, 40, 85, .3)',\n    disabled: '#dee2e6',\n    error: 'tomato',\n    warning: 'orange',\n    success: 'lightgreen',\n    info: 'lightblue',\n    transparent: 'rgba(255, 255, 255, .0)',\n} as const\n\nconst COLORS = { PALETTE }\nexport default COLORS\n","/**\n * @geomak/ui — Design Tokens\n *\n * Three layers, each useful in a different context:\n *\n *  1. `palette`        — raw brand hex values from palette.json\n *  2. `semanticTokens` — resolved hex / px values keyed by light / dark / shared\n *  3. `vars`           — CSS custom-property reference strings for inline styles / CSS-in-JS\n *\n * CSS custom properties are injected by: import '@geomak/ui/styles'\n * Tailwind utilities map to these vars via the bundled tailwind preset.\n */\n\nexport { PALETTE as palette } from '../utils/colors'\n\n// ─── Resolved values (hex / px / ms) ─────────────────────────────────────────\n\n/**\n * Resolved token values for every semantic role.\n * Use when CSS custom properties aren't available (canvas, email, SSR snapshots).\n */\nexport const semanticTokens = {\n    light: {\n        // Surfaces\n        background:               '#eef4fa',\n        surface:                  '#ffffff',\n        'surface-raised':         '#ffffff',\n        // Borders\n        border:                   '#d3dde8',\n        'border-strong':          '#8898aa',\n        // Text\n        foreground:               '#0a1929',\n        'foreground-secondary':   '#2e4057',\n        'foreground-muted':       '#536878',\n        // Accent\n        accent:                   '#0466C8',\n        'accent-hover':           '#0353A4',\n        'accent-foreground':      '#ffffff',\n        // Status\n        error:                    '#c0392b',\n        warning:                  '#d68910',\n        success:                  '#1e8449',\n        info:                     '#1565c0',\n        // Scrim\n        backdrop:                 'rgba(6, 15, 26, 0.45)',\n    },\n\n    dark: {\n        // Surfaces\n        background:               '#060f1a',\n        surface:                  '#0d1f30',\n        'surface-raised':         '#152638',\n        // Borders\n        border:                   '#1e3348',\n        'border-strong':          '#2e4a64',\n        // Text\n        foreground:               '#e8f0f8',\n        'foreground-secondary':   '#9ab0c4',\n        'foreground-muted':       '#5c7a92',\n        // Accent\n        accent:                   '#2d88ff',\n        'accent-hover':           '#4d9aff',\n        'accent-foreground':      '#ffffff',\n        // Status (brightened for dark backgrounds)\n        error:                    '#ff6b6b',\n        warning:                  '#ffb347',\n        success:                  '#5cb85c',\n        info:                     '#5bc0de',\n        // Scrim (denser on dark backgrounds)\n        backdrop:                 'rgba(0, 0, 0, 0.6)',\n    },\n\n    // Mode-independent tokens\n    shared: {\n        // Radius — enterprise scale\n        'radius-sm':    '2px',\n        'radius-md':    '5px',\n        'radius-lg':    '7px',\n        'radius-xl':    '10px',\n        'radius-2xl':   '12px',\n        'radius-full':  '9999px',\n\n        // Typography\n        'font-size-xs':           '0.75rem',\n        'font-size-sm':           '0.875rem',\n        'font-size-base':         '1rem',\n        'font-size-lg':           '1.125rem',\n        'font-size-xl':           '1.25rem',\n        'font-size-2xl':          '1.5rem',\n        'font-size-3xl':          '1.875rem',\n        'font-weight-normal':     400,\n        'font-weight-medium':     500,\n        'font-weight-semibold':   600,\n        'font-weight-bold':       700,\n        'line-height-tight':      1.25,\n        'line-height-snug':       1.375,\n        'line-height-normal':     1.5,\n        'line-height-relaxed':    1.625,\n        'letter-spacing-tight':   '-0.025em',\n        'letter-spacing-normal':  '0em',\n        'letter-spacing-wide':    '0.025em',\n\n        // Component heights / density\n        'height-control-xs':   '24px',\n        'height-control-sm':   '28px',\n        'height-control-md':   '36px',\n        'height-control-lg':   '44px',\n        'height-topbar':       '56px',\n        'sidebar-expanded':    '220px',\n        'sidebar-collapsed':   '52px',\n\n        // Motion\n        'duration-instant':    '50ms',\n        'duration-fast':       '80ms',\n        'duration-normal':     '150ms',\n        'duration-slow':       '220ms',\n        'duration-gentle':     '350ms',\n        'ease-out-expo':       'cubic-bezier(0.16, 1, 0.3, 1)',\n        'ease-out-quart':      'cubic-bezier(0.25, 1, 0.5, 1)',\n        'ease-out-cubic':      'cubic-bezier(0.33, 1, 0.68, 1)',\n        'ease-in-out':         'cubic-bezier(0.4, 0, 0.2, 1)',\n        'ease-in':             'cubic-bezier(0.4, 0, 1, 1)',\n\n        // Z-index\n        'z-base':     0,\n        'z-raised':   10,\n        'z-dropdown': 100,\n        'z-sticky':   150,\n        'z-topbar':   200,\n        'z-overlay':  300,\n        'z-modal':    400,\n        'z-toast':    500,\n        'z-tooltip':  600,\n    },\n} as const\n\nexport type SemanticColorKey       = keyof typeof semanticTokens.light\nexport type SemanticSharedKey      = keyof typeof semanticTokens.shared\n\n// ─── CSS custom-property references ──────────────────────────────────────────\n\n/**\n * CSS custom-property reference strings.\n * Use in inline styles or CSS-in-JS — values respond to light/dark automatically.\n *\n * @example\n * // Inline style\n * <div style={{ color: vars.color.foreground }}>...</div>\n *\n * @example\n * // Emotion / styled-components\n * const Card = styled.div`\n *   background: ${vars.color.surface};\n *   border-radius: ${vars.radius.lg};\n *   box-shadow: ${vars.shadow.md};\n * `\n */\nexport const vars = {\n    color: {\n        background:          'var(--color-background)',\n        surface:             'var(--color-surface)',\n        surfaceRaised:       'var(--color-surface-raised)',\n        border:              'var(--color-border)',\n        borderStrong:        'var(--color-border-strong)',\n        foreground:          'var(--color-foreground)',\n        foregroundSecondary: 'var(--color-foreground-secondary)',\n        foregroundMuted:     'var(--color-foreground-muted)',\n        accent:              'var(--color-accent)',\n        accentHover:         'var(--color-accent-hover)',\n        accentForeground:    'var(--color-accent-foreground)',\n        error:               'var(--color-error)',\n        warning:             'var(--color-warning)',\n        success:             'var(--color-success)',\n        info:                'var(--color-info)',\n        backdrop:            'var(--color-backdrop)',\n    },\n\n    radius: {\n        sm:   'var(--radius-sm)',\n        md:   'var(--radius-md)',\n        lg:   'var(--radius-lg)',\n        xl:   'var(--radius-xl)',\n        '2xl': 'var(--radius-2xl)',\n        full: 'var(--radius-full)',\n    },\n\n    shadow: {\n        sm: 'var(--shadow-sm)',\n        md: 'var(--shadow-md)',\n        lg: 'var(--shadow-lg)',\n        xl: 'var(--shadow-xl)',\n    },\n\n    typography: {\n        fontFamily:       'var(--font-family-sans)',\n        fontSizeXs:       'var(--font-size-xs)',\n        fontSizeSm:       'var(--font-size-sm)',\n        fontSizeBase:     'var(--font-size-base)',\n        fontSizeLg:       'var(--font-size-lg)',\n        fontSizeXl:       'var(--font-size-xl)',\n        fontSize2xl:      'var(--font-size-2xl)',\n        fontSize3xl:      'var(--font-size-3xl)',\n        fontWeightNormal:   'var(--font-weight-normal)',\n        fontWeightMedium:   'var(--font-weight-medium)',\n        fontWeightSemibold: 'var(--font-weight-semibold)',\n        fontWeightBold:     'var(--font-weight-bold)',\n        lineHeightTight:   'var(--line-height-tight)',\n        lineHeightSnug:    'var(--line-height-snug)',\n        lineHeightNormal:  'var(--line-height-normal)',\n        lineHeightRelaxed: 'var(--line-height-relaxed)',\n        letterSpacingTight:  'var(--letter-spacing-tight)',\n        letterSpacingNormal: 'var(--letter-spacing-normal)',\n        letterSpacingWide:   'var(--letter-spacing-wide)',\n    },\n\n    density: {\n        controlXs:       'var(--height-control-xs)',\n        controlSm:       'var(--height-control-sm)',\n        controlMd:       'var(--height-control-md)',\n        controlLg:       'var(--height-control-lg)',\n        topbar:          'var(--height-topbar)',\n        sidebarExpanded:  'var(--sidebar-expanded)',\n        sidebarCollapsed: 'var(--sidebar-collapsed)',\n    },\n\n    motion: {\n        durationInstant: 'var(--duration-instant)',\n        durationFast:    'var(--duration-fast)',\n        durationNormal:  'var(--duration-normal)',\n        durationSlow:    'var(--duration-slow)',\n        durationGentle:  'var(--duration-gentle)',\n        easeOutExpo:     'var(--ease-out-expo)',\n        easeOutQuart:    'var(--ease-out-quart)',\n        easeOutCubic:    'var(--ease-out-cubic)',\n        easeInOut:       'var(--ease-in-out)',\n        easeIn:          'var(--ease-in)',\n    },\n\n    zIndex: {\n        base:     'var(--z-base)',\n        raised:   'var(--z-raised)',\n        dropdown: 'var(--z-dropdown)',\n        sticky:   'var(--z-sticky)',\n        topbar:   'var(--z-topbar)',\n        overlay:  'var(--z-overlay)',\n        modal:    'var(--z-modal)',\n        popover:  'var(--z-popover)',\n        toast:    'var(--z-toast)',\n        tooltip:  'var(--z-tooltip)',\n    },\n} as const\n\n// ─── Convenience type exports ─────────────────────────────────────────────────\nexport type VarColorKey    = keyof typeof vars.color\nexport type VarRadiusKey   = keyof typeof vars.radius\nexport type VarShadowKey   = keyof typeof vars.shadow\nexport type VarTypoKey     = keyof typeof vars.typography\nexport type VarDensityKey  = keyof typeof vars.density\nexport type VarMotionKey   = keyof typeof vars.motion\nexport type VarZIndexKey   = keyof typeof vars.zIndex\n"]}

package/dist/{chunk-I2P4JJDB.js → chunk-DXOWXLKK.js}

@@ -228,11 +228,12 @@ var vars = {
     topbar: "var(--z-topbar)",
     overlay: "var(--z-overlay)",
     modal: "var(--z-modal)",
+    popover: "var(--z-popover)",
     toast: "var(--z-toast)",
     tooltip: "var(--z-tooltip)"
   }
 };
 
 export { PALETTE, colors_default, semanticTokens, vars };
-//# sourceMappingURL=chunk-I2P4JJDB.js.map
-//# sourceMappingURL=chunk-I2P4JJDB.js.map
+//# sourceMappingURL=chunk-DXOWXLKK.js.map
+//# sourceMappingURL=chunk-DXOWXLKK.js.map

package/dist/chunk-DXOWXLKK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/colors.ts","../src/tokens/index.ts"],"names":[],"mappings":";AAIO,IAAM,OAAA,GAAU;AAAA,EACnB,WAAA,EAAa,SAAA;AAAA,EACb,YAAA,EAAc,SAAA;AAAA,EACd,sBAAA,EAAwB,SAAA;AAAA,EACxB,iBAAA,EAAmB,SAAA;AAAA,EACnB,iBAAA,EAAmB,SAAA;AAAA,EACnB,iBAAA,EAAmB,SAAA;AAAA,EACnB,YAAA,EAAc,SAAA;AAAA,EACd,aAAA,EAAe,SAAA;AAAA,EACf,cAAA,EAAgB,SAAA;AAAA,EAChB,OAAA,EAAS,SAAA;AAAA,EACT,KAAA,EAAO,MAAA;AAAA,EACP,GAAA,EAAK,SAAA;AAAA,EACL,UAAA,EAAY,SAAA;AAAA,EACZ,0BAAA,EAA4B,SAAA;AAAA,EAC5B,0BAAA,EAA4B,SAAA;AAAA,EAC5B,0BAAA,EAA4B,SAAA;AAAA,EAC5B,kBAAA,EAAoB,SAAA;AAAA,EACpB,yBAAA,EAA2B,WAAA;AAAA,EAC3B,eAAA,EAAiB,SAAA;AAAA,EACjB,YAAA,EAAc,SAAA;AAAA,EACd,IAAA,EAAM,SAAA;AAAA,EACN,SAAA,EAAW,SAAA;AAAA,EACX,WAAA,EAAa,SAAA;AAAA,EACb,eAAA,EAAiB,SAAA;AAAA,EACjB,QAAA,EAAU,SAAA;AAAA,EACV,wBAAA,EAA0B,qBAAA;AAAA,EAC1B,QAAA,EAAU,SAAA;AAAA,EACV,KAAA,EAAO,QAAA;AAAA,EACP,OAAA,EAAS,QAAA;AAAA,EACT,OAAA,EAAS,YAAA;AAAA,EACT,IAAA,EAAM,WAAA;AAAA,EACN,WAAA,EAAa;AACjB;AAEA,IAAM,MAAA,GAAS,EAAE,OAAA,EAAQ;AACzB,IAAO,cAAA,GAAQ;;;ACnBR,IAAM,cAAA,GAAiB;AAAA,EAC1B,KAAA,EAAO;AAAA;AAAA,IAEH,UAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,gBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,MAAA,EAA0B,SAAA;AAAA,IAC1B,eAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,UAAA,EAA0B,SAAA;AAAA,IAC1B,sBAAA,EAA0B,SAAA;AAAA,IAC1B,kBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,MAAA,EAA0B,SAAA;AAAA,IAC1B,cAAA,EAA0B,SAAA;AAAA,IAC1B,mBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,KAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,IAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,QAAA,EAA0B;AAAA,GAC9B;AAAA,EAEA,IAAA,EAAM;AAAA;AAAA,IAEF,UAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,gBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,MAAA,EAA0B,SAAA;AAAA,IAC1B,eAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,UAAA,EAA0B,SAAA;AAAA,IAC1B,sBAAA,EAA0B,SAAA;AAAA,IAC1B,kBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,MAAA,EAA0B,SAAA;AAAA,IAC1B,cAAA,EAA0B,SAAA;AAAA,IAC1B,mBAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,KAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,OAAA,EAA0B,SAAA;AAAA,IAC1B,IAAA,EAA0B,SAAA;AAAA;AAAA,IAE1B,QAAA,EAA0B;AAAA,GAC9B;AAAA;AAAA,EAGA,MAAA,EAAQ;AAAA;AAAA,IAEJ,WAAA,EAAgB,KAAA;AAAA,IAChB,WAAA,EAAgB,KAAA;AAAA,IAChB,WAAA,EAAgB,KAAA;AAAA,IAChB,WAAA,EAAgB,MAAA;AAAA,IAChB,YAAA,EAAgB,MAAA;AAAA,IAChB,aAAA,EAAgB,QAAA;AAAA;AAAA,IAGhB,cAAA,EAA0B,SAAA;AAAA,IAC1B,cAAA,EAA0B,UAAA;AAAA,IAC1B,gBAAA,EAA0B,MAAA;AAAA,IAC1B,cAAA,EAA0B,UAAA;AAAA,IAC1B,cAAA,EAA0B,SAAA;AAAA,IAC1B,eAAA,EAA0B,QAAA;AAAA,IAC1B,eAAA,EAA0B,UAAA;AAAA,IAC1B,oBAAA,EAA0B,GAAA;AAAA,IAC1B,oBAAA,EAA0B,GAAA;AAAA,IAC1B,sBAAA,EAA0B,GAAA;AAAA,IAC1B,kBAAA,EAA0B,GAAA;AAAA,IAC1B,mBAAA,EAA0B,IAAA;AAAA,IAC1B,kBAAA,EAA0B,KAAA;AAAA,IAC1B,oBAAA,EAA0B,GAAA;AAAA,IAC1B,qBAAA,EAA0B,KAAA;AAAA,IAC1B,sBAAA,EAA0B,UAAA;AAAA,IAC1B,uBAAA,EAA0B,KAAA;AAAA,IAC1B,qBAAA,EAA0B,SAAA;AAAA;AAAA,IAG1B,mBAAA,EAAuB,MAAA;AAAA,IACvB,mBAAA,EAAuB,MAAA;AAAA,IACvB,mBAAA,EAAuB,MAAA;AAAA,IACvB,mBAAA,EAAuB,MAAA;AAAA,IACvB,eAAA,EAAuB,MAAA;AAAA,IACvB,kBAAA,EAAuB,OAAA;AAAA,IACvB,mBAAA,EAAuB,MAAA;AAAA;AAAA,IAGvB,kBAAA,EAAuB,MAAA;AAAA,IACvB,eAAA,EAAuB,MAAA;AAAA,IACvB,iBAAA,EAAuB,OAAA;AAAA,IACvB,eAAA,EAAuB,OAAA;AAAA,IACvB,iBAAA,EAAuB,OAAA;AAAA,IACvB,eAAA,EAAuB,+BAAA;AAAA,IACvB,gBAAA,EAAuB,+BAAA;AAAA,IACvB,gBAAA,EAAuB,gCAAA;AAAA,IACvB,aAAA,EAAuB,8BAAA;AAAA,IACvB,SAAA,EAAuB,4BAAA;AAAA;AAAA,IAGvB,QAAA,EAAc,CAAA;AAAA,IACd,UAAA,EAAc,EAAA;AAAA,IACd,YAAA,EAAc,GAAA;AAAA,IACd,UAAA,EAAc,GAAA;AAAA,IACd,UAAA,EAAc,GAAA;AAAA,IACd,WAAA,EAAc,GAAA;AAAA,IACd,SAAA,EAAc,GAAA;AAAA,IACd,SAAA,EAAc,GAAA;AAAA,IACd,WAAA,EAAc;AAAA;AAEtB;AAuBO,IAAM,IAAA,GAAO;AAAA,EAChB,KAAA,EAAO;AAAA,IACH,UAAA,EAAqB,yBAAA;AAAA,IACrB,OAAA,EAAqB,sBAAA;AAAA,IACrB,aAAA,EAAqB,6BAAA;AAAA,IACrB,MAAA,EAAqB,qBAAA;AAAA,IACrB,YAAA,EAAqB,4BAAA;AAAA,IACrB,UAAA,EAAqB,yBAAA;AAAA,IACrB,mBAAA,EAAqB,mCAAA;AAAA,IACrB,eAAA,EAAqB,+BAAA;AAAA,IACrB,MAAA,EAAqB,qBAAA;AAAA,IACrB,WAAA,EAAqB,2BAAA;AAAA,IACrB,gBAAA,EAAqB,gCAAA;AAAA,IACrB,KAAA,EAAqB,oBAAA;AAAA,IACrB,OAAA,EAAqB,sBAAA;AAAA,IACrB,OAAA,EAAqB,sBAAA;AAAA,IACrB,IAAA,EAAqB,mBAAA;AAAA,IACrB,QAAA,EAAqB;AAAA,GACzB;AAAA,EAEA,MAAA,EAAQ;AAAA,IACJ,EAAA,EAAM,kBAAA;AAAA,IACN,EAAA,EAAM,kBAAA;AAAA,IACN,EAAA,EAAM,kBAAA;AAAA,IACN,EAAA,EAAM,kBAAA;AAAA,IACN,KAAA,EAAO,mBAAA;AAAA,IACP,IAAA,EAAM;AAAA,GACV;AAAA,EAEA,MAAA,EAAQ;AAAA,IACJ,EAAA,EAAI,kBAAA;AAAA,IACJ,EAAA,EAAI,kBAAA;AAAA,IACJ,EAAA,EAAI,kBAAA;AAAA,IACJ,EAAA,EAAI;AAAA,GACR;AAAA,EAEA,UAAA,EAAY;AAAA,IACR,UAAA,EAAkB,yBAAA;AAAA,IAClB,UAAA,EAAkB,qBAAA;AAAA,IAClB,UAAA,EAAkB,qBAAA;AAAA,IAClB,YAAA,EAAkB,uBAAA;AAAA,IAClB,UAAA,EAAkB,qBAAA;AAAA,IAClB,UAAA,EAAkB,qBAAA;AAAA,IAClB,WAAA,EAAkB,sBAAA;AAAA,IAClB,WAAA,EAAkB,sBAAA;AAAA,IAClB,gBAAA,EAAoB,2BAAA;AAAA,IACpB,gBAAA,EAAoB,2BAAA;AAAA,IACpB,kBAAA,EAAoB,6BAAA;AAAA,IACpB,cAAA,EAAoB,yBAAA;AAAA,IACpB,eAAA,EAAmB,0BAAA;AAAA,IACnB,cAAA,EAAmB,yBAAA;AAAA,IACnB,gBAAA,EAAmB,2BAAA;AAAA,IACnB,iBAAA,EAAmB,4BAAA;AAAA,IACnB,kBAAA,EAAqB,6BAAA;AAAA,IACrB,mBAAA,EAAqB,8BAAA;AAAA,IACrB,iBAAA,EAAqB;AAAA,GACzB;AAAA,EAEA,OAAA,EAAS;AAAA,IACL,SAAA,EAAiB,0BAAA;AAAA,IACjB,SAAA,EAAiB,0BAAA;AAAA,IACjB,SAAA,EAAiB,0BAAA;AAAA,IACjB,SAAA,EAAiB,0BAAA;AAAA,IACjB,MAAA,EAAiB,sBAAA;AAAA,IACjB,eAAA,EAAkB,yBAAA;AAAA,IAClB,gBAAA,EAAkB;AAAA,GACtB;AAAA,EAEA,MAAA,EAAQ;AAAA,IACJ,eAAA,EAAiB,yBAAA;AAAA,IACjB,YAAA,EAAiB,sBAAA;AAAA,IACjB,cAAA,EAAiB,wBAAA;AAAA,IACjB,YAAA,EAAiB,sBAAA;AAAA,IACjB,cAAA,EAAiB,wBAAA;AAAA,IACjB,WAAA,EAAiB,sBAAA;AAAA,IACjB,YAAA,EAAiB,uBAAA;AAAA,IACjB,YAAA,EAAiB,uBAAA;AAAA,IACjB,SAAA,EAAiB,oBAAA;AAAA,IACjB,MAAA,EAAiB;AAAA,GACrB;AAAA,EAEA,MAAA,EAAQ;AAAA,IACJ,IAAA,EAAU,eAAA;AAAA,IACV,MAAA,EAAU,iBAAA;AAAA,IACV,QAAA,EAAU,mBAAA;AAAA,IACV,MAAA,EAAU,iBAAA;AAAA,IACV,MAAA,EAAU,iBAAA;AAAA,IACV,OAAA,EAAU,kBAAA;AAAA,IACV,KAAA,EAAU,gBAAA;AAAA,IACV,OAAA,EAAU,kBAAA;AAAA,IACV,KAAA,EAAU,gBAAA;AAAA,IACV,OAAA,EAAU;AAAA;AAElB","file":"chunk-DXOWXLKK.js","sourcesContent":["/**\n * Oxygen design-system colour palette.\n * Duplicated here so the published package is fully self-contained.\n */\nexport const PALETTE = {\n    'true-blue': '#0466C8',\n    'usafa-blue': '#0353A4',\n    'dark-cornflower-blue': '#023E7D',\n    'oxford-blue-700': '#002855',\n    'oxford-blue-800': '#001845',\n    'oxford-blue-900': '#001233',\n    independence: '#33415C',\n    'black-coral': '#5C677D',\n    'roman-silver': '#7D8597',\n    manatee: '#979DAC',\n    white: '#fff',\n    ice: '#DBF1FD',\n    'ice-dark': '#d0e3ed',\n    'midnight-green-eagle-900': '#013E53',\n    'midnight-green-eagle-700': '#125F6C',\n    'midnight-green-eagle-500': '#125F6C',\n    'rich-black-fogra': '#000202',\n    'rich-black-fogra-opaque': '#0000005b',\n    'prussian-blue': '#00273A',\n    'indigo-dye': '#013C54',\n    ming: '#0F6372',\n    skobeloff: '#217479',\n    'dark-cyan': '#2A8784',\n    'celadon-green': '#297E74',\n    turquise: '#2EB8B0',\n    'oxford-blue-700-opaque': 'rgba(0, 40, 85, .3)',\n    disabled: '#dee2e6',\n    error: 'tomato',\n    warning: 'orange',\n    success: 'lightgreen',\n    info: 'lightblue',\n    transparent: 'rgba(255, 255, 255, .0)',\n} as const\n\nconst COLORS = { PALETTE }\nexport default COLORS\n","/**\n * @geomak/ui — Design Tokens\n *\n * Three layers, each useful in a different context:\n *\n *  1. `palette`        — raw brand hex values from palette.json\n *  2. `semanticTokens` — resolved hex / px values keyed by light / dark / shared\n *  3. `vars`           — CSS custom-property reference strings for inline styles / CSS-in-JS\n *\n * CSS custom properties are injected by: import '@geomak/ui/styles'\n * Tailwind utilities map to these vars via the bundled tailwind preset.\n */\n\nexport { PALETTE as palette } from '../utils/colors'\n\n// ─── Resolved values (hex / px / ms) ─────────────────────────────────────────\n\n/**\n * Resolved token values for every semantic role.\n * Use when CSS custom properties aren't available (canvas, email, SSR snapshots).\n */\nexport const semanticTokens = {\n    light: {\n        // Surfaces\n        background:               '#eef4fa',\n        surface:                  '#ffffff',\n        'surface-raised':         '#ffffff',\n        // Borders\n        border:                   '#d3dde8',\n        'border-strong':          '#8898aa',\n        // Text\n        foreground:               '#0a1929',\n        'foreground-secondary':   '#2e4057',\n        'foreground-muted':       '#536878',\n        // Accent\n        accent:                   '#0466C8',\n        'accent-hover':           '#0353A4',\n        'accent-foreground':      '#ffffff',\n        // Status\n        error:                    '#c0392b',\n        warning:                  '#d68910',\n        success:                  '#1e8449',\n        info:                     '#1565c0',\n        // Scrim\n        backdrop:                 'rgba(6, 15, 26, 0.45)',\n    },\n\n    dark: {\n        // Surfaces\n        background:               '#060f1a',\n        surface:                  '#0d1f30',\n        'surface-raised':         '#152638',\n        // Borders\n        border:                   '#1e3348',\n        'border-strong':          '#2e4a64',\n        // Text\n        foreground:               '#e8f0f8',\n        'foreground-secondary':   '#9ab0c4',\n        'foreground-muted':       '#5c7a92',\n        // Accent\n        accent:                   '#2d88ff',\n        'accent-hover':           '#4d9aff',\n        'accent-foreground':      '#ffffff',\n        // Status (brightened for dark backgrounds)\n        error:                    '#ff6b6b',\n        warning:                  '#ffb347',\n        success:                  '#5cb85c',\n        info:                     '#5bc0de',\n        // Scrim (denser on dark backgrounds)\n        backdrop:                 'rgba(0, 0, 0, 0.6)',\n    },\n\n    // Mode-independent tokens\n    shared: {\n        // Radius — enterprise scale\n        'radius-sm':    '2px',\n        'radius-md':    '5px',\n        'radius-lg':    '7px',\n        'radius-xl':    '10px',\n        'radius-2xl':   '12px',\n        'radius-full':  '9999px',\n\n        // Typography\n        'font-size-xs':           '0.75rem',\n        'font-size-sm':           '0.875rem',\n        'font-size-base':         '1rem',\n        'font-size-lg':           '1.125rem',\n        'font-size-xl':           '1.25rem',\n        'font-size-2xl':          '1.5rem',\n        'font-size-3xl':          '1.875rem',\n        'font-weight-normal':     400,\n        'font-weight-medium':     500,\n        'font-weight-semibold':   600,\n        'font-weight-bold':       700,\n        'line-height-tight':      1.25,\n        'line-height-snug':       1.375,\n        'line-height-normal':     1.5,\n        'line-height-relaxed':    1.625,\n        'letter-spacing-tight':   '-0.025em',\n        'letter-spacing-normal':  '0em',\n        'letter-spacing-wide':    '0.025em',\n\n        // Component heights / density\n        'height-control-xs':   '24px',\n        'height-control-sm':   '28px',\n        'height-control-md':   '36px',\n        'height-control-lg':   '44px',\n        'height-topbar':       '56px',\n        'sidebar-expanded':    '220px',\n        'sidebar-collapsed':   '52px',\n\n        // Motion\n        'duration-instant':    '50ms',\n        'duration-fast':       '80ms',\n        'duration-normal':     '150ms',\n        'duration-slow':       '220ms',\n        'duration-gentle':     '350ms',\n        'ease-out-expo':       'cubic-bezier(0.16, 1, 0.3, 1)',\n        'ease-out-quart':      'cubic-bezier(0.25, 1, 0.5, 1)',\n        'ease-out-cubic':      'cubic-bezier(0.33, 1, 0.68, 1)',\n        'ease-in-out':         'cubic-bezier(0.4, 0, 0.2, 1)',\n        'ease-in':             'cubic-bezier(0.4, 0, 1, 1)',\n\n        // Z-index\n        'z-base':     0,\n        'z-raised':   10,\n        'z-dropdown': 100,\n        'z-sticky':   150,\n        'z-topbar':   200,\n        'z-overlay':  300,\n        'z-modal':    400,\n        'z-toast':    500,\n        'z-tooltip':  600,\n    },\n} as const\n\nexport type SemanticColorKey       = keyof typeof semanticTokens.light\nexport type SemanticSharedKey      = keyof typeof semanticTokens.shared\n\n// ─── CSS custom-property references ──────────────────────────────────────────\n\n/**\n * CSS custom-property reference strings.\n * Use in inline styles or CSS-in-JS — values respond to light/dark automatically.\n *\n * @example\n * // Inline style\n * <div style={{ color: vars.color.foreground }}>...</div>\n *\n * @example\n * // Emotion / styled-components\n * const Card = styled.div`\n *   background: ${vars.color.surface};\n *   border-radius: ${vars.radius.lg};\n *   box-shadow: ${vars.shadow.md};\n * `\n */\nexport const vars = {\n    color: {\n        background:          'var(--color-background)',\n        surface:             'var(--color-surface)',\n        surfaceRaised:       'var(--color-surface-raised)',\n        border:              'var(--color-border)',\n        borderStrong:        'var(--color-border-strong)',\n        foreground:          'var(--color-foreground)',\n        foregroundSecondary: 'var(--color-foreground-secondary)',\n        foregroundMuted:     'var(--color-foreground-muted)',\n        accent:              'var(--color-accent)',\n        accentHover:         'var(--color-accent-hover)',\n        accentForeground:    'var(--color-accent-foreground)',\n        error:               'var(--color-error)',\n        warning:             'var(--color-warning)',\n        success:             'var(--color-success)',\n        info:                'var(--color-info)',\n        backdrop:            'var(--color-backdrop)',\n    },\n\n    radius: {\n        sm:   'var(--radius-sm)',\n        md:   'var(--radius-md)',\n        lg:   'var(--radius-lg)',\n        xl:   'var(--radius-xl)',\n        '2xl': 'var(--radius-2xl)',\n        full: 'var(--radius-full)',\n    },\n\n    shadow: {\n        sm: 'var(--shadow-sm)',\n        md: 'var(--shadow-md)',\n        lg: 'var(--shadow-lg)',\n        xl: 'var(--shadow-xl)',\n    },\n\n    typography: {\n        fontFamily:       'var(--font-family-sans)',\n        fontSizeXs:       'var(--font-size-xs)',\n        fontSizeSm:       'var(--font-size-sm)',\n        fontSizeBase:     'var(--font-size-base)',\n        fontSizeLg:       'var(--font-size-lg)',\n        fontSizeXl:       'var(--font-size-xl)',\n        fontSize2xl:      'var(--font-size-2xl)',\n        fontSize3xl:      'var(--font-size-3xl)',\n        fontWeightNormal:   'var(--font-weight-normal)',\n        fontWeightMedium:   'var(--font-weight-medium)',\n        fontWeightSemibold: 'var(--font-weight-semibold)',\n        fontWeightBold:     'var(--font-weight-bold)',\n        lineHeightTight:   'var(--line-height-tight)',\n        lineHeightSnug:    'var(--line-height-snug)',\n        lineHeightNormal:  'var(--line-height-normal)',\n        lineHeightRelaxed: 'var(--line-height-relaxed)',\n        letterSpacingTight:  'var(--letter-spacing-tight)',\n        letterSpacingNormal: 'var(--letter-spacing-normal)',\n        letterSpacingWide:   'var(--letter-spacing-wide)',\n    },\n\n    density: {\n        controlXs:       'var(--height-control-xs)',\n        controlSm:       'var(--height-control-sm)',\n        controlMd:       'var(--height-control-md)',\n        controlLg:       'var(--height-control-lg)',\n        topbar:          'var(--height-topbar)',\n        sidebarExpanded:  'var(--sidebar-expanded)',\n        sidebarCollapsed: 'var(--sidebar-collapsed)',\n    },\n\n    motion: {\n        durationInstant: 'var(--duration-instant)',\n        durationFast:    'var(--duration-fast)',\n        durationNormal:  'var(--duration-normal)',\n        durationSlow:    'var(--duration-slow)',\n        durationGentle:  'var(--duration-gentle)',\n        easeOutExpo:     'var(--ease-out-expo)',\n        easeOutQuart:    'var(--ease-out-quart)',\n        easeOutCubic:    'var(--ease-out-cubic)',\n        easeInOut:       'var(--ease-in-out)',\n        easeIn:          'var(--ease-in)',\n    },\n\n    zIndex: {\n        base:     'var(--z-base)',\n        raised:   'var(--z-raised)',\n        dropdown: 'var(--z-dropdown)',\n        sticky:   'var(--z-sticky)',\n        topbar:   'var(--z-topbar)',\n        overlay:  'var(--z-overlay)',\n        modal:    'var(--z-modal)',\n        popover:  'var(--z-popover)',\n        toast:    'var(--z-toast)',\n        tooltip:  'var(--z-tooltip)',\n    },\n} as const\n\n// ─── Convenience type exports ─────────────────────────────────────────────────\nexport type VarColorKey    = keyof typeof vars.color\nexport type VarRadiusKey   = keyof typeof vars.radius\nexport type VarShadowKey   = keyof typeof vars.shadow\nexport type VarTypoKey     = keyof typeof vars.typography\nexport type VarDensityKey  = keyof typeof vars.density\nexport type VarMotionKey   = keyof typeof vars.motion\nexport type VarZIndexKey   = keyof typeof vars.zIndex\n"]}

package/dist/{index-5FQ64bx1.d.ts → index-BktppxXp.d.cts}

@@ -281,6 +281,7 @@ declare const vars: {
         readonly topbar: "var(--z-topbar)";
         readonly overlay: "var(--z-overlay)";
         readonly modal: "var(--z-modal)";
+        readonly popover: "var(--z-popover)";
         readonly toast: "var(--z-toast)";
         readonly tooltip: "var(--z-tooltip)";
     };

package/dist/{index-5FQ64bx1.d.cts → index-BktppxXp.d.ts}

@@ -281,6 +281,7 @@ declare const vars: {
         readonly topbar: "var(--z-topbar)";
         readonly overlay: "var(--z-overlay)";
         readonly modal: "var(--z-modal)";
+        readonly popover: "var(--z-popover)";
         readonly toast: "var(--z-toast)";
         readonly tooltip: "var(--z-tooltip)";
     };

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunk4V4U2W7K_cjs = require('./chunk-4V4U2W7K.cjs');
-var chunkOAV4TA4B_cjs = require('./chunk-OAV4TA4B.cjs');
+var chunkCNUDNGJM_cjs = require('./chunk-CNUDNGJM.cjs');
 var React30 = require('react');
 var reactDom = require('react-dom');
 var jsxRuntime = require('react/jsx-runtime');
@@ -4577,6 +4577,10 @@ function List2({
     );
   }) });
 }
+var rectOf = (el) => {
+  const r = el.getBoundingClientRect();
+  return { left: r.left, top: r.top, width: r.width, height: r.height };
+};
 var TOGGLE_POSITION_CLASS = {
   "top-left": "top-2 left-2",
   "top-right": "top-2 right-2",
@@ -4595,17 +4599,56 @@ function ScalableContainer({
   expandIcon,
   collapseIcon,
   togglePosition = "top-right",
+  expandContainerRef,
   className = ""
 }) {
   const containerRef = React30.useRef(null);
   const [internalScaled, setInternalScaled] = React30.useState(false);
   const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
+  const usePortal = expandContainerRef != null;
+  const [overlay, setOverlay] = React30.useState("closed");
+  const [fromRect, setFromRect] = React30.useState(null);
+  const [targetRect, setTargetRect] = React30.useState(null);
+  const prevScaled = React30.useRef(isScaled);
+  React30.useEffect(() => {
+    if (!usePortal || isScaled === prevScaled.current) return;
+    prevScaled.current = isScaled;
+    if (isScaled) {
+      const src = containerRef.current ? rectOf(containerRef.current) : null;
+      const tgt = expandContainerRef.current ? rectOf(expandContainerRef.current) : null;
+      if (src && tgt) {
+        setFromRect(src);
+        setTargetRect(tgt);
+        setOverlay("open");
+      }
+    } else if (containerRef.current) {
+      setTargetRect(rectOf(containerRef.current));
+      setOverlay("closing");
+    }
+  }, [isScaled, usePortal, expandContainerRef]);
+  React30.useEffect(() => {
+    if (overlay !== "closing") return;
+    const t = window.setTimeout(() => setOverlay("closed"), reduced ? 0 : 360);
+    return () => window.clearTimeout(t);
+  }, [overlay, reduced]);
+  React30.useEffect(() => {
+    if (overlay !== "open" || !expandContainerRef?.current) return;
+    const update = () => {
+      if (expandContainerRef.current) setTargetRect(rectOf(expandContainerRef.current));
+    };
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [overlay, expandContainerRef]);
   const onToggle = () => {
     const next = !isScaled;
     if (expanded === void 0) setInternalScaled(next);
     onExpandedChange?.(next);
-    if (next) {
+    if (next && !usePortal) {
       window.setTimeout(
         () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
         reduced ? 0 : 340
@@ -4613,50 +4656,79 @@ function ScalableContainer({
     }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    framerMotion.motion.div,
+  const overlayActive = usePortal && overlay !== "closed";
+  const toggleButton = (scaled) => /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: scaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
     {
-      ref: containerRef,
-      animate: {
-        width: isScaled ? expandedWidth : width,
-        height: isScaled ? expandedHeight : height
-      },
-      transition: reduced ? { duration: 0 } : {
-        width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
-      },
-      className: cx(
-        "relative rounded-lg overflow-hidden",
-        // OS-window aesthetic: subtle elevation at rest, lifted shadow
-        // when expanded. No background colour change.
-        isScaled ? "shadow-2xl" : "shadow-md",
-        "transition-shadow duration-300",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { placement: "bottom", title: isScaled ? "Collapse" : "Expand", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: onToggle,
-            "aria-label": isScaled ? "Collapse container" : "Expand container",
-            "aria-expanded": isScaled,
-            className: [
-              "absolute z-10",
-              TOGGLE_POSITION_CLASS[togglePosition],
-              "w-7 h-7 inline-flex items-center justify-center",
-              "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
-              "text-foreground-secondary hover:text-foreground hover:bg-surface",
-              "shadow-sm transition-colors duration-150",
-              "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
-            ].join(" "),
-            children: isScaled ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, children })
-      ]
+      type: "button",
+      onClick: onToggle,
+      "aria-label": scaled ? "Collapse container" : "Expand container",
+      "aria-expanded": scaled,
+      className: [
+        "absolute z-10",
+        TOGGLE_POSITION_CLASS[togglePosition],
+        "w-7 h-7 inline-flex items-center justify-center",
+        "rounded-md bg-surface/80 backdrop-blur-sm border border-border",
+        "text-foreground-secondary hover:text-foreground hover:bg-surface",
+        "shadow-sm transition-colors duration-150",
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+      ].join(" "),
+      children: scaled ? collapseIcon ?? /* @__PURE__ */ jsxRuntime.jsx(CollapseIcon, {}) : expandIcon ?? /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, {})
     }
-  );
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      framerMotion.motion.div,
+      {
+        ref: containerRef,
+        animate: {
+          // Breakout mode never grows in place — the in-flow box stays
+          // at its resting size and acts as the collapse target.
+          width: isScaled && !usePortal ? expandedWidth : width,
+          height: isScaled && !usePortal ? expandedHeight : height
+        },
+        transition: reduced ? { duration: 0 } : {
+          width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        },
+        className: cx(
+          "relative rounded-lg overflow-hidden",
+          // OS-window aesthetic: subtle elevation at rest, lifted shadow
+          // when expanded. No background colour change.
+          isScaled && !usePortal ? "shadow-2xl" : "shadow-md",
+          "transition-shadow duration-300",
+          className
+        ),
+        children: [
+          !overlayActive && toggleButton(isScaled),
+          !overlayActive && /* @__PURE__ */ jsxRuntime.jsx("div", { className: wrapperClass, children })
+        ]
+      }
+    ),
+    overlayActive && fromRect && targetRect && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        framerMotion.motion.div,
+        {
+          initial: { ...fromRect },
+          animate: { ...targetRect },
+          transition: reduced ? { duration: 0 } : { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
+          onAnimationComplete: () => {
+            if (overlay === "closing") setOverlay("closed");
+          },
+          style: { position: "fixed" },
+          className: cx(
+            "z-dropdown rounded-lg overflow-hidden bg-surface shadow-2xl",
+            className
+          ),
+          children: [
+            toggleButton(isScaled),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("h-full w-full", wrapperClass), children })
+          ]
+        }
+      ),
+      document.body
+    )
+  ] });
 }
 function CollapseIcon() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 9L4 4M9 9V4M9 9H4M15 9L20 4M15 9V4M15 9H20M9 15L4 20M9 15V20M9 15H4M15 15L20 20M15 15V20M15 15H20" }) });
@@ -4780,7 +4852,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
         onClick: previousApp,
         "aria-label": "Previous",
         className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rotate-180",
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkCNUDNGJM_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: indexPool.map((index, id) => {
@@ -4817,7 +4889,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
         onClick: nextApp,
         "aria-label": "Next",
         className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence",
-        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: chunkCNUDNGJM_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
       }
     )
   ] }) });
@@ -7581,8 +7653,9 @@ function Dropdown({
               {
                 align: "start",
                 sideOffset: 4,
+                collisionPadding: 8,
                 style: { width: style?.width || 240 },
-                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+                className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-2 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
                 onInteractOutside: () => setOpen(false),
                 children: [
                   hasSearch && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -7765,8 +7838,9 @@ function AutoComplete({
           {
             align: "start",
             sideOffset: 4,
+            collisionPadding: 8,
             onOpenAutoFocus: (e) => e.preventDefault(),
-            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-popover overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
             children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
               /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
               /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
@@ -7950,8 +8024,9 @@ function TreeSelect({
           {
             align: "start",
             sideOffset: 4,
+            collisionPadding: 8,
             style: { width: style?.width || 280 },
-            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               listRef.current?.focus();
@@ -8399,7 +8474,8 @@ function DatePicker({
           {
             align: "start",
             sideOffset: 4,
-            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+            collisionPadding: 8,
+            className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
             },
@@ -9198,7 +9274,8 @@ function TimePicker({
         {
           align: "start",
           sideOffset: 4,
-          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
+          collisionPadding: 8,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-2 flex gap-1 animate-in fade-in-0 zoom-in-95",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               Column,
@@ -9371,7 +9448,8 @@ function DateRangePicker({
       {
         align: "start",
         sideOffset: 4,
-        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 flex flex-col gap-3 sm:flex-row max-w-[calc(100vw-1rem)] max-h-[calc(100vh-2rem)] overflow-auto animate-in fade-in-0 zoom-in-95",
+        collisionPadding: 8,
+        className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 flex flex-col gap-3 sm:flex-row max-w-[calc(100vw-1rem)] max-h-[calc(100vh-2rem)] overflow-auto animate-in fade-in-0 zoom-in-95",
         children: [
           presets && presets.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 min-w-[120px] sm:pr-3 sm:border-r sm:border-border", children: presets.map((p) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -9494,7 +9572,8 @@ function ColorPicker({
         {
           align: "start",
           sideOffset: 4,
-          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-50 p-3 w-56 animate-in fade-in-0 zoom-in-95",
+          collisionPadding: 8,
+          className: "bg-surface text-foreground border border-border rounded-lg shadow-md z-popover p-3 w-56 animate-in fade-in-0 zoom-in-95",
           children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-6 gap-2 mb-3", children: swatches.map((sw) => /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -10199,19 +10278,19 @@ Object.defineProperty(exports, "createIcon", {
 });
 Object.defineProperty(exports, "COLORS", {
   enumerable: true,
-  get: function () { return chunkOAV4TA4B_cjs.colors_default; }
+  get: function () { return chunkCNUDNGJM_cjs.colors_default; }
 });
 Object.defineProperty(exports, "palette", {
   enumerable: true,
-  get: function () { return chunkOAV4TA4B_cjs.PALETTE; }
+  get: function () { return chunkCNUDNGJM_cjs.PALETTE; }
 });
 Object.defineProperty(exports, "semanticTokens", {
   enumerable: true,
-  get: function () { return chunkOAV4TA4B_cjs.semanticTokens; }
+  get: function () { return chunkCNUDNGJM_cjs.semanticTokens; }
 });
 Object.defineProperty(exports, "vars", {
   enumerable: true,
-  get: function () { return chunkOAV4TA4B_cjs.vars; }
+  get: function () { return chunkCNUDNGJM_cjs.vars; }
 });
 exports.Accordion = Accordion_default;
 exports.AppShell = AppShell;