@datalayer/primer-addons 1.0.17 → 1.0.19

package/lib/theme/themes/sunTheme.js

@@ -0,0 +1,257 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Sun Theme for Primer React.
+ *
+ * Warm, radiant golden light with a deep amber accent — energetic,
+ * optimistic, and welcoming. Uses a friendly humanist-sans type stack
+ * for an approachable, cheerful feel.
+ * Theming is applied via **CSS custom-property overrides**.
+ */
+import { theme as primerTheme } from '@primer/react';
+import { sunColors } from '../colors/sunColors';
+import { buildThemeStyles } from '../css/createThemeCSSVars';
+/* ── Light-mode colour definitions ───────────────────────────────────── */
+const sunLight = {
+    canvas: {
+        default: sunColors.white,
+        subtle: '#FFF3D6',
+    },
+    fg: {
+        default: '#2A2210',
+        muted: sunColors.gray,
+        onEmphasis: '#FFFBF0',
+    },
+    accent: {
+        fg: sunColors.sunText,
+        emphasis: sunColors.sunText,
+        muted: sunColors.sunAccent,
+        subtle: sunColors.sunTint,
+    },
+    success: {
+        fg: '#3E6B47',
+        emphasis: '#3E6B47',
+        muted: '#5E8A5E',
+        subtle: '#E1EEE0',
+    },
+    attention: {
+        fg: sunColors.attentionBrand,
+        emphasis: sunColors.attentionBrand,
+        muted: sunColors.attentionAccent,
+        subtle: sunColors.attentionTint,
+    },
+    danger: {
+        fg: sunColors.dangerBrand,
+        emphasis: sunColors.dangerBrand,
+        muted: sunColors.dangerAccent,
+        subtle: sunColors.dangerTint,
+    },
+    severe: {
+        fg: sunColors.severeBrand,
+        emphasis: sunColors.severeBrand,
+        muted: sunColors.severeAccent,
+        subtle: sunColors.severeTint,
+    },
+    done: {
+        fg: sunColors.doneBrand,
+        emphasis: sunColors.doneBrand,
+        muted: sunColors.doneAccent,
+        subtle: sunColors.doneTint,
+    },
+    border: {
+        default: '#F0E2BE',
+        muted: '#F6ECCF',
+    },
+    btn: {
+        text: '#2A2210',
+        bg: '#FFFCF3',
+        border: '#EEDCB2',
+        hoverBg: sunColors.sunTint,
+        hoverBorder: sunColors.gray,
+        activeBg: sunColors.sunTint,
+        activeBorder: sunColors.gray,
+        selectedBg: '#FFFCF3',
+        counterBg: sunColors.gray,
+        primary: {
+            text: '#FFFBF0',
+            bg: sunColors.sunText,
+            border: sunColors.sunText,
+            hoverBg: sunColors.sunHover,
+            hoverBorder: sunColors.sunHover,
+            selectedBg: sunColors.sunHover,
+            disabledText: 'rgba(255, 255, 255, 0.8)',
+            disabledBg: '#E0BE73',
+            disabledBorder: '#E0BE73',
+            icon: '#FFFBF0',
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: sunColors.sunText,
+            hoverText: '#FFFBF0',
+            hoverBg: sunColors.sunText,
+            hoverBorder: sunColors.sunText,
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FFFBF0',
+            selectedBg: sunColors.sunHover,
+            selectedBorder: sunColors.sunHover,
+            disabledText: sunColors.gray,
+            disabledBg: sunColors.sunTint,
+            disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+            counterBg: 'rgba(0, 0, 0, 0.05)',
+            counterFg: sunColors.sunText,
+            hoverCounterFg: '#FFFBF0',
+            disabledCounterFg: sunColors.gray,
+        },
+        danger: {
+            text: '#B42318',
+            hoverText: '#FFFBF0',
+            hoverBg: '#B42318',
+            hoverBorder: '#B42318',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FFFBF0',
+            selectedBg: '#8E1B12',
+            selectedBorder: '#8E1B12',
+            disabledText: 'rgba(180, 35, 24, 0.5)',
+            disabledBg: sunColors.sunTint,
+            disabledCounterBg: 'rgba(180, 35, 24, 0.05)',
+            counterBg: 'rgba(180, 35, 24, 0.1)',
+            counterFg: '#B42318',
+            hoverCounterFg: '#FFFBF0',
+            disabledCounterFg: 'rgba(180, 35, 24, 0.5)',
+            icon: '#B42318',
+        },
+    },
+};
+/* ── Dark-mode colour definitions ────────────────────────────────────── */
+const sunDark = {
+    canvas: {
+        default: sunColors.black,
+        subtle: '#2A2109',
+    },
+    fg: {
+        default: '#F3E9CF',
+        muted: '#BEAC82',
+        onEmphasis: '#FFFBF0',
+    },
+    accent: {
+        fg: sunColors.sunBright,
+        emphasis: '#8A6E00',
+        muted: sunColors.sunBrand,
+        subtle: '#33290C',
+    },
+    success: {
+        fg: '#7CB07E',
+        emphasis: '#3E6B47',
+        muted: '#5E8A5E',
+        subtle: '#16261A',
+    },
+    attention: {
+        fg: '#E7C24E',
+        emphasis: '#8A6D08',
+        muted: sunColors.attentionAccent,
+        subtle: '#2E2606',
+    },
+    danger: {
+        fg: '#F08A70',
+        emphasis: '#B23A1E',
+        muted: sunColors.dangerAccent,
+        subtle: '#2E140E',
+    },
+    severe: {
+        fg: '#E6A566',
+        emphasis: '#A85D0C',
+        muted: sunColors.severeAccent,
+        subtle: '#2E1D0A',
+    },
+    done: {
+        fg: '#B09AD0',
+        emphasis: '#6A4E9E',
+        muted: sunColors.doneAccent,
+        subtle: '#1F1830',
+    },
+    btn: {
+        text: '#F3E9CF',
+        bg: '#2E2509',
+        border: 'rgba(243, 233, 207, 0.12)',
+        hoverBg: '#3A2F0D',
+        hoverBorder: '#BEAC82',
+        activeBg: '#2E2509',
+        activeBorder: '#8C7C4A',
+        selectedBg: '#241D07',
+        counterBg: '#3A2F0D',
+        primary: {
+            text: '#211A08',
+            bg: sunColors.sunBright,
+            border: 'rgba(243, 233, 207, 0.12)',
+            hoverBg: sunColors.sunAccent,
+            hoverBorder: 'rgba(243, 233, 207, 0.12)',
+            selectedBg: sunColors.sunAccent,
+            disabledText: 'rgba(33, 26, 8, 0.5)',
+            disabledBg: 'rgba(255, 213, 74, 0.35)',
+            disabledBorder: 'rgba(255, 213, 74, 0.2)',
+            icon: '#211A08',
+            counterBg: 'rgba(0, 0, 0, 0.2)',
+        },
+        outline: {
+            text: sunColors.sunBright,
+            hoverText: '#211A08',
+            hoverBg: sunColors.sunBright,
+            hoverBorder: sunColors.sunBright,
+            hoverCounterBg: 'rgba(0, 0, 0, 0.2)',
+            selectedText: '#211A08',
+            selectedBg: sunColors.sunAccent,
+            selectedBorder: sunColors.sunAccent,
+            disabledText: 'rgba(255, 213, 74, 0.5)',
+            disabledBg: 'rgba(255, 213, 74, 0.1)',
+            disabledCounterBg: 'rgba(255, 213, 74, 0.05)',
+            counterBg: 'rgba(255, 213, 74, 0.1)',
+            counterFg: sunColors.sunBright,
+            hoverCounterFg: '#211A08',
+            disabledCounterFg: 'rgba(255, 213, 74, 0.5)',
+        },
+        danger: {
+            text: '#f85149',
+            hoverText: '#FFFBF0',
+            hoverBg: '#da3633',
+            hoverBorder: '#f85149',
+            hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+            selectedText: '#FFFBF0',
+            selectedBg: '#b62324',
+            selectedBorder: '#ff7b72',
+            disabledText: 'rgba(248, 81, 73, 0.5)',
+            disabledBg: 'rgba(248, 81, 73, 0.1)',
+            disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+            counterBg: 'rgba(248, 81, 73, 0.1)',
+            counterFg: '#f85149',
+            hoverCounterFg: '#FFFBF0',
+            disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+            icon: '#f85149',
+        },
+    },
+};
+/* ── Exports ─────────────────────────────────────────────────────────── */
+/**
+ * The Primer theme object.
+ *
+ * Since theming is done entirely via CSS custom properties
+ * (see `sunThemeStyles`), this is just the unmodified default Primer
+ * theme kept for backward compatibility.
+ */
+export const sunTheme = primerTheme;
+/**
+ * Friendly humanist-sans font stack for the Sun aesthetic.
+ *
+ * Leads with warm geometric-humanist sans-serifs (Avenir / Segoe UI /
+ * Ubuntu / Cantarell) for an approachable, optimistic feel, with
+ * cross-platform fallbacks across macOS / Windows / Linux so it renders
+ * consistently everywhere without web-font loading (same no-download
+ * approach as the Matrix monospace stack).
+ */
+const sunFontFamily = '"Avenir Next", Avenir, "Segoe UI", Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif';
+/** Comprehensive Primer CSS-variable overrides for light & dark mode. */
+export const sunThemeStyles = buildThemeStyles(sunLight, sunDark, {
+    fontFamily: sunFontFamily,
+});
+export default sunTheme;

package/lib/theme/useThemeStore.d.ts

@@ -22,11 +22,13 @@
 import { type StoreApi, type UseBoundStore } from 'zustand';
 import type { ThemeVariant } from './themeRegistry';
 import type { ColorMode } from './DatalayerBrandThemeProvider';
-/** Per-variant theme + colorMode preferences. */
-export type VariantDefaults = Record<string, {
+export type VariantPreference = {
     theme: ThemeVariant;
     colorMode: ColorMode;
-}>;
+    version?: number;
+};
+/** Per-variant theme + colorMode preferences. */
+export type VariantDefaults = Record<string, VariantPreference>;
 export interface ThemeState {
     /** Current color mode (light, dark, or auto = follow OS). */
     colorMode: ColorMode;

package/lib/theme/useThemeStore.js

@@ -26,6 +26,33 @@
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
 import { themeConfigs } from './themeRegistry';
+const VARIANT_SCHEMA_VERSION = 1;
+function normalizeVariantPreference(pref) {
+    return {
+        theme: pref.theme,
+        colorMode: pref.colorMode,
+        version: typeof pref.version === 'number' ? pref.version : VARIANT_SCHEMA_VERSION,
+    };
+}
+function normalizeVariants(variants) {
+    if (!variants) {
+        return {};
+    }
+    const normalized = {};
+    for (const [key, pref] of Object.entries(variants)) {
+        if (!pref || typeof pref !== 'object' || !('theme' in pref) || !('colorMode' in pref)) {
+            continue;
+        }
+        normalized[key] = normalizeVariantPreference(pref);
+    }
+    return normalized;
+}
+function hasMissingVariantVersion(variants) {
+    if (!variants || Object.keys(variants).length === 0) {
+        return false;
+    }
+    return Object.values(variants).some(pref => typeof pref?.version !== 'number');
+}
 /* ── Helpers ─────────────────────────────────────────────────────── */
 const colorModeCycle = {
     light: 'dark',
@@ -49,7 +76,7 @@ export function createThemeStore(storageKey, defaults) {
         theme: defaults?.theme ?? 'matrix',
         /* ── variant state ──────────────────────────────────── */
         activeVariant: null,
-        variants: defaults?.variants ?? {},
+        variants: normalizeVariants(defaults?.variants),
         /* ── actions ────────────────────────────────────────── */
         toggleColorMode: () => set(state => {
             const next = colorModeCycle[state.colorMode];
@@ -58,7 +85,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: next,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: next },
+                        [state.activeVariant]: {
+                            ...state.variants[state.activeVariant],
+                            colorMode: next,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -70,7 +101,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: mode,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { ...state.variants[state.activeVariant], colorMode: mode },
+                        [state.activeVariant]: {
+                            ...state.variants[state.activeVariant],
+                            colorMode: mode,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -86,7 +121,11 @@ export function createThemeStore(storageKey, defaults) {
                     colorMode: nextColorMode,
                     variants: {
                         ...state.variants,
-                        [state.activeVariant]: { theme, colorMode: nextColorMode },
+                        [state.activeVariant]: {
+                            theme,
+                            colorMode: nextColorMode,
+                            version: VARIANT_SCHEMA_VERSION,
+                        },
                     },
                 };
             }
@@ -96,7 +135,13 @@ export function createThemeStore(storageKey, defaults) {
             const merged = { ...state.variants };
             for (const [key, val] of Object.entries(defs)) {
                 if (!merged[key]) {
-                    merged[key] = val;
+                    merged[key] = normalizeVariantPreference(val);
+                }
+                else {
+                    merged[key] = normalizeVariantPreference({
+                        ...merged[key],
+                        version: merged[key].version ?? VARIANT_SCHEMA_VERSION,
+                    });
                 }
             }
             return { variants: merged };
@@ -114,7 +159,7 @@ export function createThemeStore(storageKey, defaults) {
         }),
     }), {
         name: storageKey,
-        version: 2,
+        version: 3,
         storage: createJSONStorage(() => localStorage),
         partialize: state => ({
             colorMode: state.colorMode,
@@ -127,7 +172,31 @@ export function createThemeStore(storageKey, defaults) {
          * value the persisted state is discarded and the store starts fresh
          * from code-defined defaults.
          */
-        migrate: () => ({}),
+        migrate: persisted => {
+            const p = (persisted ?? {});
+            const legacyVariants = p.variants;
+            const missingVariantVersion = hasMissingVariantVersion(legacyVariants);
+            const variants = normalizeVariants(legacyVariants);
+            // Legacy snapshots without per-variant versions are upgraded to v1.
+            // Anonymous defaults are forced to matrix/dark during this upgrade.
+            if (missingVariantVersion) {
+                variants['agent-anonymous'] = {
+                    theme: 'matrix',
+                    colorMode: 'dark',
+                    version: VARIANT_SCHEMA_VERSION,
+                };
+            }
+            return {
+                ...p,
+                variants,
+                ...(missingVariantVersion
+                    ? {
+                        theme: p.activeVariant === 'agent-anonymous' ? 'matrix' : p.theme,
+                        colorMode: p.activeVariant === 'agent-anonymous' ? 'dark' : p.colorMode,
+                    }
+                    : {}),
+            };
+        },
         /**
          * Deep-merge variants during hydration so that:
          *  - Code-defined variants (from defaults or registerVariants) are
@@ -139,11 +208,11 @@ export function createThemeStore(storageKey, defaults) {
             const p = (persisted ?? {});
             // Build merged variants: start from code-defined, then overlay
             // any persisted variant whose prefs differ (user customisations).
-            const mergedVariants = { ...current.variants };
+            const mergedVariants = normalizeVariants(current.variants);
             if (p.variants) {
                 for (const [key, val] of Object.entries(p.variants)) {
                     if (val && typeof val === 'object' && 'theme' in val) {
-                        mergedVariants[key] = val;
+                        mergedVariants[key] = normalizeVariantPreference(val);
                     }
                 }
             }

package/lib/utils/Helper.d.ts

@@ -1,5 +1,5 @@
 import React, { Ref, PropsWithChildren } from 'react';
-import { AnimateProps } from '@primer/react-brand';
+import type { AnimateProps } from '@primer/react-brand';
 /**
  * Layout
  */

package/lib/utils/Portals.d.ts

@@ -1,5 +1,4 @@
 import { type CSSProperties } from 'react';
-import '@primer/react-brand/lib/css/main.css';
 type Colormode = 'light' | 'dark' | 'auto';
 /**
  * Ensure we define a root for Primer portal root.

package/lib/utils/Portals.js

@@ -3,7 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 import { registerPortalRoot } from '@primer/react';
-import '@primer/react-brand/lib/css/main.css';
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
 /**
  * Key used on `document.body` to track the CSS-property names we

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "license": "BSD-3-Clause",
   "scripts": {
-    "build": "tsc && vite build",
+    "build": "npm run build:lib",
     "build-storybook": "storybook build",
     "build:lib": "npm run clean:lib&& tsc -b",
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
-    "dev": "vite",
+    "dev": "npm run gallery",
+    "gallery": "npm --prefix examples/gallery run dev",
+    "gallery:build": "npm --prefix examples/gallery run build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "start": "vite",
+    "preview": "npm --prefix examples/gallery run preview",
+    "start": "npm run gallery",
     "storybook": "storybook dev -p 6006",
     "watch": "tsc -w",
     "watch:lib": "tsc -b -w"
   },
   "main": "lib/index.js",
+  "sideEffects": [
+    "*.css",
+    "**/*.css"
+  ],
   "files": [
     "lib",
     "style"
@@ -27,9 +33,9 @@
   "homepage": "https://primer-addons.datalayer.tech",
   "dependencies": {
     "@datalayer/icons-react": "^1.0.0",
-    "@primer/octicons-react": "^19.15.1",
-    "@primer/primitives": "^10.5.0",
-    "@primer/react": "^37.19.0",
+    "@primer/octicons-react": "^19.29.1",
+    "@primer/primitives": "^10.7.0",
+    "@primer/react": "^37.31.0",
     "react": "^18.3.1 || ^19.0.0",
     "react-dom": "^18.3.1 || ^19.0.0",
     "react-loading-skeleton": "^3.5.0",

package/lib/App.d.ts

@@ -1,13 +0,0 @@
-import "@primer/primitives/dist/css/base/typography/typography.css";
-import "@primer/primitives/dist/css/base/motion/motion.css";
-import "@primer/primitives/dist/css/functional/themes/light.css";
-import "@primer/primitives/dist/css/functional/size/border.css";
-import "@primer/primitives/dist/css/functional/size/breakpoints.css";
-import "@primer/primitives/dist/css/functional/size/size-coarse.css";
-import "@primer/primitives/dist/css/functional/size/size-fine.css";
-import "@primer/primitives/dist/css/functional/size/size.css";
-import "@primer/primitives/dist/css/functional/size/viewport.css";
-import "@primer/primitives/dist/css/functional/typography/typography.css";
-import "./App.css";
-declare const App: () => import("react/jsx-runtime").JSX.Element;
-export default App;

package/lib/App.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef } from "react";
-import { BaseStyles, Box, Text, NavList, Heading, ThemeProvider, Button, theme, ActionMenu, IconButton, ActionList } from "@primer/react";
-import { KebabHorizontalIcon } from "@primer/octicons-react";
-import { DatalayerIcon, LogOutIcon, SettingsIcon } from "@datalayer/icons-react";
-import { Slider, Overlay } from ".";
-import "@primer/primitives/dist/css/base/typography/typography.css";
-import "@primer/primitives/dist/css/base/motion/motion.css";
-import "@primer/primitives/dist/css/functional/themes/light.css";
-import "@primer/primitives/dist/css/functional/size/border.css";
-import "@primer/primitives/dist/css/functional/size/breakpoints.css";
-import "@primer/primitives/dist/css/functional/size/size-coarse.css";
-import "@primer/primitives/dist/css/functional/size/size-fine.css";
-import "@primer/primitives/dist/css/functional/size/size.css";
-import "@primer/primitives/dist/css/functional/size/viewport.css";
-import "@primer/primitives/dist/css/functional/typography/typography.css";
-import "./App.css";
-const App = () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const openButtonRef = useRef(null);
-    const closeButtonRef = useRef(null);
-    const headingRef = useRef(null);
-    return (_jsx(ThemeProvider, { colorMode: "day", theme: theme, children: _jsxs(BaseStyles, { children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: KebabHorizontalIcon, variant: "invisible", "aria-label": "jupyter-runtimes-more" }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "More\u2026" }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(SettingsIcon, {}) }), "Settings", _jsx(ActionList.Description, { variant: "block", children: "Configure your personal settings." })] }), _jsxs(ActionList.Item, { onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(DatalayerIcon, {}) }), "About", _jsx(ActionList.Description, { variant: "block", children: "About Runtimes." })] })] }), _jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), _jsxs(ActionList.Item, { variant: "danger", onSelect: () => alert('click'), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(LogOutIcon, {}) }), "Logout"] })] })] }) })] }), _jsxs(Box, { bg: "canvas.default", sx: { display: 'flex' }, children: [_jsx(Box, { children: _jsxs(NavList, { children: [_jsx(NavList.Item, { href: "/", "aria-current": "page", children: "Home" }), _jsx(NavList.Item, { href: "/about", children: "About" }), _jsx(NavList.Item, { href: "/contact", children: "Contact" })] }) }), _jsxs(Box, { p: 3, sx: { flexGrow: 1 }, children: [_jsx(Box, { children: _jsx(Text, { children: "Primer React Addons" }) }), _jsx(Box, { children: _jsx(Slider, { id: "slider", name: "slider", min: 1, max: 10, onChange: () => { } }) }), _jsx(Box, { p: 3, bg: "canvas.default", children: _jsxs(Box, { children: [_jsx(Box, { sx: { width: '100%', bg: 'darkgray' }, children: _jsx(Heading, { ref: headingRef, children: "Header" }) }), _jsxs(Box, { children: [_jsx(Button, { ref: openButtonRef, onClick: () => { setIsOpen(!isOpen); }, children: "Open overlay" }), _jsx(Overlay, { isOpen: isOpen, content: _jsxs(Text, { children: ["Look, I am an ", _jsx(Button, { children: "Overlay \uD83D\uDC49" })] }), setIsOpen: setIsOpen, openButtonRef: openButtonRef, closeButtonRef: closeButtonRef, headingRef: headingRef })] })] }) })] })] })] }) }));
-};
-export default App;

package/lib/components/overlay/Overlay.stories.d.ts

@@ -1,16 +0,0 @@
-import type { StoryObj } from '@storybook/react';
-import { OverlayProps } from '../..';
-declare const meta: {
-    title: string;
-    component: ({ width, direction, zIndex, ...rest }: OverlayProps) => import("react/jsx-runtime").JSX.Element;
-    tags: string[];
-    parameters: {
-        layout: string;
-    };
-};
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const OverlayDayLeft: Story;
-export declare const OverlayDayRight: Story;
-export declare const OverlayNightLeft: Story;
-export declare const OverlayNightRight: Story;