@furystack/shades-common-components 11.0.0 → 12.0.0

package/esm/components/page-container/index.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.spec.js","sourceRoot":"","sources":["../../../src/components/page-container/index.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/page-container/page-header.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Props for the PageHeader component.
+ */
+export type PageHeaderProps = {
+    /** Optional icon (emoji or single character) displayed before the title */
+    icon?: string;
+    /** The page title */
+    title: string;
+    /** Optional description text displayed below the title */
+    description?: string;
+    /** Optional action elements (buttons, etc.) aligned to the right */
+    actions?: JSX.Element;
+};
+/**
+ * PageHeader component for consistent page titles and descriptions.
+ *
+ * Provides a standardized header with:
+ * - Optional icon before the title
+ * - Main title with primary text styling
+ * - Optional description with secondary text styling
+ * - Optional action buttons aligned to the right
+ *
+ * @example
+ * ```tsx
+ * // Simple header with icon and description
+ * <PageHeader
+ *   icon="👥"
+ *   title="Users"
+ *   description="Manage user accounts and their roles."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Header with action buttons
+ * <PageHeader
+ *   icon="📁"
+ *   title="Projects"
+ *   description="View and manage your projects."
+ *   actions={
+ *     <Button variant="contained">Create Project</Button>
+ *   }
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Minimal header (title only)
+ * <PageHeader title="Dashboard" />
+ * ```
+ */
+export declare const PageHeader: (props: PageHeaderProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=page-header.d.ts.map

package/esm/components/page-container/page-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/page-header.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,oEAAoE;IACpE,OAAO,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACtB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,eAAO,MAAM,UAAU;;;;sEAsErB,CAAA"}

package/esm/components/page-container/page-header.js

@@ -0,0 +1,93 @@
+import { Shade, createComponent } from '@furystack/shades';
+import { cssVariableTheme } from '../../services/css-variable-theme.js';
+import { Paper } from '../paper.js';
+/**
+ * PageHeader component for consistent page titles and descriptions.
+ *
+ * Provides a standardized header with:
+ * - Optional icon before the title
+ * - Main title with primary text styling
+ * - Optional description with secondary text styling
+ * - Optional action buttons aligned to the right
+ *
+ * @example
+ * ```tsx
+ * // Simple header with icon and description
+ * <PageHeader
+ *   icon="👥"
+ *   title="Users"
+ *   description="Manage user accounts and their roles."
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Header with action buttons
+ * <PageHeader
+ *   icon="📁"
+ *   title="Projects"
+ *   description="View and manage your projects."
+ *   actions={
+ *     <Button variant="contained">Create Project</Button>
+ *   }
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Minimal header (title only)
+ * <PageHeader title="Dashboard" />
+ * ```
+ */
+export const PageHeader = Shade({
+    shadowDomName: 'shade-page-header',
+    css: {
+        display: 'block',
+        position: 'sticky',
+        top: '0',
+        zIndex: `calc(${cssVariableTheme.zIndex.drawer} - 1)`,
+        '& .page-header-container': {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: cssVariableTheme.spacing.md,
+        },
+        '& .page-header-content': {
+            flex: '1',
+            minWidth: '0',
+        },
+        '& .page-header-title': {
+            margin: '0',
+            fontSize: cssVariableTheme.typography.fontSize.xl,
+            fontWeight: cssVariableTheme.typography.fontWeight.semibold,
+            lineHeight: cssVariableTheme.typography.lineHeight.tight,
+            color: cssVariableTheme.text.primary,
+        },
+        '& .page-header-icon': {
+            marginRight: cssVariableTheme.spacing.sm,
+        },
+        '& .page-header-description': {
+            margin: `${cssVariableTheme.spacing.sm} 0 0 0`,
+            fontSize: cssVariableTheme.typography.fontSize.md,
+            lineHeight: cssVariableTheme.typography.lineHeight.normal,
+            color: cssVariableTheme.text.secondary,
+        },
+        '& .page-header-actions': {
+            display: 'flex',
+            alignItems: 'center',
+            gap: cssVariableTheme.spacing.sm,
+            flexShrink: '0',
+        },
+    },
+    render: ({ props }) => {
+        const { icon, title, description, actions } = props;
+        return (createComponent(Paper, { elevation: 2, className: "page-header-container" },
+            createComponent("div", { className: "page-header-content" },
+                createComponent("h2", { className: "page-header-title", "data-testid": "page-header-title" },
+                    icon && createComponent("span", { className: "page-header-icon" }, icon),
+                    title),
+                description && (createComponent("p", { className: "page-header-description", "data-testid": "page-header-description" }, description))),
+            actions && (createComponent("div", { className: "page-header-actions", "data-testid": "page-header-actions" }, actions))));
+    },
+});
+//# sourceMappingURL=page-header.js.map

package/esm/components/page-container/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../src/components/page-container/page-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAgBnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAkB;IAC/C,aAAa,EAAE,mBAAmB;IAClC,GAAG,EAAE;QACH,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,GAAG,EAAE,GAAG;QACR,MAAM,EAAE,QAAQ,gBAAgB,CAAC,MAAM,CAAC,MAAM,OAAO;QAErD,0BAA0B,EAAE;YAC1B,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,eAAe;YAC/B,GAAG,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;SACjC;QAED,wBAAwB,EAAE;YACxB,IAAI,EAAE,GAAG;YACT,QAAQ,EAAE,GAAG;SACd;QAED,sBAAsB,EAAE;YACtB,MAAM,EAAE,GAAG;YACX,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YACjD,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ;YAC3D,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK;YACxD,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,OAAO;SACrC;QAED,qBAAqB,EAAE;YACrB,WAAW,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;SACzC;QAED,4BAA4B,EAAE;YAC5B,MAAM,EAAE,GAAG,gBAAgB,CAAC,OAAO,CAAC,EAAE,QAAQ;YAC9C,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;YACjD,UAAU,EAAE,gBAAgB,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM;YACzD,KAAK,EAAE,gBAAgB,CAAC,IAAI,CAAC,SAAS;SACvC;QAED,wBAAwB,EAAE;YACxB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,gBAAgB,CAAC,OAAO,CAAC,EAAE;YAChC,UAAU,EAAE,GAAG;SAChB;KACF;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;QACpB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;QAEnD,OAAO,CACL,gBAAC,KAAK,IAAC,SAAS,EAAE,CAAC,EAAE,SAAS,EAAC,uBAAuB;YACpD,yBAAK,SAAS,EAAC,qBAAqB;gBAClC,wBAAI,SAAS,EAAC,mBAAmB,iBAAa,mBAAmB;oBAC9D,IAAI,IAAI,0BAAM,SAAS,EAAC,kBAAkB,IAAE,IAAI,CAAQ;oBACxD,KAAK,CACH;gBACJ,WAAW,IAAI,CACd,uBAAG,SAAS,EAAC,yBAAyB,iBAAa,yBAAyB,IACzE,WAAW,CACV,CACL,CACG;YACL,OAAO,IAAI,CACV,yBAAK,SAAS,EAAC,qBAAqB,iBAAa,qBAAqB,IACnE,OAAO,CACJ,CACP,CACK,CACT,CAAA;IACH,CAAC;CACF,CAAC,CAAA"}

package/esm/components/page-container/page-header.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=page-header.spec.d.ts.map

package/esm/components/page-container/page-header.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.spec.d.ts","sourceRoot":"","sources":["../../../src/components/page-container/page-header.spec.tsx"],"names":[],"mappings":""}

package/esm/components/page-container/page-header.spec.js

@@ -0,0 +1,230 @@
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { PageHeader } from './page-header.js';
+describe('PageHeader component', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    describe('rendering', () => {
+        it('should render the shade-page-header custom element', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Test Title" }),
+                });
+                await sleepAsync(50);
+                const element = document.querySelector('shade-page-header');
+                expect(element).not.toBeNull();
+                expect(element?.tagName.toLowerCase()).toBe('shade-page-header');
+            });
+        });
+        it('should render the title', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Users" }),
+                });
+                await sleepAsync(50);
+                const title = document.querySelector('[data-testid="page-header-title"]');
+                expect(title).not.toBeNull();
+                expect(title?.textContent).toBe('Users');
+            });
+        });
+        it('should render the title as h2', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Dashboard" }),
+                });
+                await sleepAsync(50);
+                const title = document.querySelector('[data-testid="page-header-title"]');
+                expect(title?.tagName.toLowerCase()).toBe('h2');
+            });
+        });
+    });
+    describe('icon', () => {
+        it('should render icon when provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { icon: "\uD83D\uDC65", title: "Users" }),
+                });
+                await sleepAsync(50);
+                const icon = document.querySelector('.page-header-icon');
+                expect(icon).not.toBeNull();
+                expect(icon?.textContent).toBe('👥');
+            });
+        });
+        it('should not render icon element when not provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Users" }),
+                });
+                await sleepAsync(50);
+                const icon = document.querySelector('.page-header-icon');
+                expect(icon).toBeNull();
+            });
+        });
+        it('should include icon in title text', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { icon: "\uD83D\uDCC1", title: "Projects" }),
+                });
+                await sleepAsync(50);
+                const title = document.querySelector('[data-testid="page-header-title"]');
+                expect(title?.textContent).toContain('📁');
+                expect(title?.textContent).toContain('Projects');
+            });
+        });
+    });
+    describe('description', () => {
+        it('should render description when provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Users", description: "Manage user accounts." }),
+                });
+                await sleepAsync(50);
+                const description = document.querySelector('[data-testid="page-header-description"]');
+                expect(description).not.toBeNull();
+                expect(description?.textContent).toBe('Manage user accounts.');
+            });
+        });
+        it('should not render description element when not provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Users" }),
+                });
+                await sleepAsync(50);
+                const description = document.querySelector('[data-testid="page-header-description"]');
+                expect(description).toBeNull();
+            });
+        });
+        it('should render description as p element', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Dashboard", description: "Overview of your data." }),
+                });
+                await sleepAsync(50);
+                const description = document.querySelector('[data-testid="page-header-description"]');
+                expect(description?.tagName.toLowerCase()).toBe('p');
+            });
+        });
+    });
+    describe('actions', () => {
+        it('should render actions when provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(PageHeader, { title: "Users", actions: createComponent("button", { type: "button", "data-testid": "action-button" }, "Add User") })),
+                });
+                await sleepAsync(50);
+                const actionsContainer = document.querySelector('[data-testid="page-header-actions"]');
+                expect(actionsContainer).not.toBeNull();
+                const actionButton = document.querySelector('[data-testid="action-button"]');
+                expect(actionButton).not.toBeNull();
+                expect(actionButton?.textContent).toBe('Add User');
+            });
+        });
+        it('should not render actions element when not provided', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: createComponent(PageHeader, { title: "Users" }),
+                });
+                await sleepAsync(50);
+                const actionsContainer = document.querySelector('[data-testid="page-header-actions"]');
+                expect(actionsContainer).toBeNull();
+            });
+        });
+        it('should render multiple action elements', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(PageHeader, { title: "Users", actions: createComponent(createComponent, null,
+                            createComponent("button", { type: "button" }, "Export"),
+                            createComponent("button", { type: "button" }, "Add User")) })),
+                });
+                await sleepAsync(50);
+                const actionsContainer = document.querySelector('[data-testid="page-header-actions"]');
+                const buttons = actionsContainer?.querySelectorAll('button');
+                expect(buttons?.length).toBe(2);
+            });
+        });
+    });
+    describe('combined props', () => {
+        it('should render all props together', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(PageHeader, { icon: "\uD83D\uDC65", title: "Users", description: "Manage user accounts and their roles.", actions: createComponent("button", { type: "button" }, "Add User") })),
+                });
+                await sleepAsync(50);
+                const icon = document.querySelector('.page-header-icon');
+                expect(icon?.textContent).toBe('👥');
+                const title = document.querySelector('[data-testid="page-header-title"]');
+                expect(title?.textContent).toContain('Users');
+                const description = document.querySelector('[data-testid="page-header-description"]');
+                expect(description?.textContent).toBe('Manage user accounts and their roles.');
+                const actionsContainer = document.querySelector('[data-testid="page-header-actions"]');
+                expect(actionsContainer?.querySelector('button')).not.toBeNull();
+            });
+        });
+        it('should work with PageContainer integration', async () => {
+            await usingAsync(new Injector(), async (injector) => {
+                const rootElement = document.getElementById('root');
+                const { PageContainer } = await import('./index.js');
+                initializeShadeRoot({
+                    injector,
+                    rootElement,
+                    jsxElement: (createComponent(PageContainer, { maxWidth: "800px", centered: true },
+                        createComponent(PageHeader, { icon: "\uD83D\uDCCA", title: "Dashboard", description: "Your data overview." }),
+                        createComponent("div", null, "Content area"))),
+                });
+                await sleepAsync(50);
+                const container = document.querySelector('div[is="shade-page-container"]');
+                expect(container).not.toBeNull();
+                const header = document.querySelector('shade-page-header');
+                expect(header).not.toBeNull();
+                const title = document.querySelector('[data-testid="page-header-title"]');
+                expect(title?.textContent).toContain('Dashboard');
+            });
+        });
+    });
+});
+//# sourceMappingURL=page-header.spec.js.map

package/esm/components/page-container/page-header.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.spec.js","sourceRoot":"","sources":["../../../src/components/page-container/page-header.spec.tsx"],"names":[],"mappings":"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"}

package/esm/components/page-layout/index.d.ts

@@ -0,0 +1,83 @@
+import { type ScreenSize } from '@furystack/shades';
+/**
+ * AppBar configuration for PageLayout.
+ */
+export type AppBarConfig = {
+    /** AppBar visibility behavior */
+    variant: 'permanent' | 'auto-hide';
+    /** Height of the AppBar (CSS value). Default: '48px' */
+    height?: string;
+    /** The AppBar component to render */
+    component: JSX.Element;
+};
+/**
+ * Drawer configuration for a single side.
+ */
+export type DrawerConfig = {
+    /** Drawer behavior variant */
+    variant: 'permanent' | 'collapsible' | 'temporary';
+    /** Width of the drawer (CSS value). Default: '240px' */
+    width?: string;
+    /** The drawer content component */
+    component: JSX.Element;
+    /** Initial open state for collapsible drawers. Default: true */
+    defaultOpen?: boolean;
+    /** Auto-collapse the drawer below this breakpoint (uses ScreenService) */
+    collapseOnBreakpoint?: ScreenSize;
+};
+/**
+ * Props for the PageLayout component.
+ */
+export type PageLayoutProps = {
+    /** AppBar configuration */
+    appBar?: AppBarConfig;
+    /** Drawer configurations for left and/or right sides */
+    drawer?: {
+        left?: DrawerConfig;
+        right?: DrawerConfig;
+    };
+    /** Gap between the AppBar and the content area (CSS value). Default: '0px' */
+    topGap?: string;
+    /** Gap between the drawers and the content area (CSS value). Default: '0px' */
+    sideGap?: string;
+};
+/**
+ * PageLayout component for full-viewport application layouts.
+ *
+ * Provides a structured layout with:
+ * - Optional AppBar (permanent or auto-hide)
+ * - Optional left/right drawers (permanent, collapsible, or temporary)
+ * - Main content area with automatic margin management
+ * - Configurable gaps between AppBar/drawers and content
+ * - Responsive drawer collapse via `collapseOnBreakpoint`
+ *
+ * The LayoutService is scoped to this component, so CSS variables are isolated
+ * and automatically cleaned up when navigating away.
+ *
+ * @example
+ * ```tsx
+ * <PageLayout
+ *   appBar={{
+ *     variant: 'permanent',
+ *     component: <MyAppBar />,
+ *   }}
+ *   drawer={{
+ *     left: {
+ *       variant: 'collapsible',
+ *       component: <Sidebar />,
+ *       collapseOnBreakpoint: 'md', // Auto-collapse below 900px
+ *     },
+ *   }}
+ *   topGap="16px"
+ *   sideGap="24px"
+ * >
+ *   <MainContent />
+ * </PageLayout>
+ * ```
+ */
+export declare const PageLayout: (props: PageLayoutProps & Omit<Partial<HTMLElement>, "style"> & {
+    style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
+}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/esm/components/page-layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-layout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyC,KAAK,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAK1F;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,iCAAiC;IACjC,OAAO,EAAE,WAAW,GAAG,WAAW,CAAA;IAClC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qCAAqC;IACrC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IACzB,8BAA8B;IAC9B,OAAO,EAAE,WAAW,GAAG,aAAa,GAAG,WAAW,CAAA;IAClD,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,SAAS,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0EAA0E;IAC1E,oBAAoB,CAAC,EAAE,UAAU,CAAA;CAClC,CAAA;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,wDAAwD;IACxD,MAAM,CAAC,EAAE;QACP,IAAI,CAAC,EAAE,YAAY,CAAA;QACnB,KAAK,CAAC,EAAE,YAAY,CAAA;KACrB,CAAA;IACD,8EAA8E;IAC9E,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,UAAU;;;;sEAgTrB,CAAA"}