@happyvertical/smrt-ui 0.30.0

package/dist/components/display/__tests__/DateDisplay.test.js

@@ -0,0 +1,114 @@
+/**
+ * Component tests for DateDisplay (Sweep S11, #1416).
+ *
+ * DateDisplay parses a Date/ISO/timestamp and renders a <time datetime> element
+ * (or a fallback <span> for null/invalid input). Expected formatted strings are
+ * derived via Intl.DateTimeFormat with the SAME options the component uses, so
+ * assertions stay locale/timezone-robust. Relative mode is exercised with
+ * offsets from `now`. Tests assert the real API from DateDisplay.svelte.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import DateDisplay from '../DateDisplay.svelte';
+const LOCALE = 'en-CA';
+/** Build the component's expected output for an absolute format. */
+function expected(date, options, locale = LOCALE) {
+    return new Intl.DateTimeFormat(locale, options).format(date);
+}
+const SHORT = { month: 'short', day: 'numeric' };
+const MEDIUM = { year: 'numeric', month: 'short', day: 'numeric' };
+const LONG = {
+    weekday: 'long',
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+describe('DateDisplay', () => {
+    // Use a fixed local-noon date so date-part is timezone-stable.
+    const sample = new Date(2024, 0, 15, 12, 0, 0); // 15 Jan 2024, local noon
+    it('renders a <time> element with the ISO datetime attribute', () => {
+        const { container } = render(DateDisplay, { props: { date: sample } });
+        const time = container.querySelector('time');
+        expect(time).toBeInTheDocument();
+        expect(time).toHaveAttribute('datetime', sample.toISOString());
+    });
+    it('formats with medium options by default', () => {
+        render(DateDisplay, { props: { date: sample } });
+        expect(screen.getByText(expected(sample, MEDIUM))).toBeInTheDocument();
+    });
+    it('formats with short options', () => {
+        render(DateDisplay, { props: { date: sample, format: 'short' } });
+        expect(screen.getByText(expected(sample, SHORT))).toBeInTheDocument();
+    });
+    it('formats with long options', () => {
+        render(DateDisplay, { props: { date: sample, format: 'long' } });
+        expect(screen.getByText(expected(sample, LONG))).toBeInTheDocument();
+    });
+    it('includes time when showTime is set', () => {
+        render(DateDisplay, { props: { date: sample, showTime: true } });
+        const withTime = expected(sample, {
+            ...MEDIUM,
+            hour: 'numeric',
+            minute: '2-digit',
+        });
+        expect(screen.getByText(withTime)).toBeInTheDocument();
+    });
+    it('respects a custom locale', () => {
+        render(DateDisplay, {
+            props: { date: sample, format: 'long', locale: 'fr-CA' },
+        });
+        expect(screen.getByText(expected(sample, LONG, 'fr-CA'))).toBeInTheDocument();
+    });
+    it('parses an ISO string input', () => {
+        const iso = '2024-01-15T12:00:00.000Z';
+        const d = new Date(iso);
+        const { container } = render(DateDisplay, { props: { date: iso } });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', d.toISOString());
+    });
+    it('parses a numeric timestamp input', () => {
+        const ts = sample.getTime();
+        const { container } = render(DateDisplay, { props: { date: ts } });
+        expect(container.querySelector('time')).toHaveAttribute('datetime', new Date(ts).toISOString());
+    });
+    it('renders the fallback span for null input', () => {
+        const { container } = render(DateDisplay, {
+            props: { date: null, fallback: 'No date' },
+        });
+        expect(container.querySelector('time')).not.toBeInTheDocument();
+        const span = screen.getByText('No date');
+        expect(span).toHaveClass('date-fallback');
+    });
+    it('renders the default fallback for an invalid date string', () => {
+        render(DateDisplay, { props: { date: 'not-a-date' } });
+        expect(screen.getByText('N/A')).toBeInTheDocument();
+    });
+    it('renders "just now" for the current time in relative mode', () => {
+        render(DateDisplay, { props: { date: new Date(), format: 'relative' } });
+        expect(screen.getByText('just now')).toBeInTheDocument();
+    });
+    it('renders "yesterday" for ~1 day ago in relative mode', () => {
+        const d = new Date(Date.now() - 25 * 60 * 60 * 1000); // 25h ago → 1 day
+        render(DateDisplay, { props: { date: d, format: 'relative' } });
+        expect(screen.getByText('yesterday')).toBeInTheDocument();
+    });
+    it('renders "tomorrow" for a near-future date in relative mode', () => {
+        const d = new Date(Date.now() + 23 * 60 * 60 * 1000); // 23h ahead → tomorrow
+        render(DateDisplay, { props: { date: d, format: 'relative' } });
+        expect(screen.getByText('tomorrow')).toBeInTheDocument();
+    });
+    it('appends a custom class to the time element', () => {
+        const { container } = render(DateDisplay, {
+            props: { date: sample, class: 'my-date' },
+        });
+        expect(container.querySelector('time')).toHaveClass('my-date');
+    });
+    it('is axe-clean with a date', async () => {
+        const { container } = render(DateDisplay, { props: { date: sample } });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with the fallback', async () => {
+        const { container } = render(DateDisplay, { props: { date: null } });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/display/__tests__/Icon.test.js

@@ -0,0 +1,93 @@
+/**
+ * Component tests for Icon (Sweep S11, #1416).
+ *
+ * Icon is a presentational SVG primitive: decorative by default (aria-hidden),
+ * informative when given an aria-label (role="img"). Tests assert the real API
+ * from Icon.svelte — preset/path resolution, size/color, and axe-cleanliness in
+ * both decorative and labelled modes.
+ */
+import { render } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Icon from '../Icon.svelte';
+/** The 'check' preset path, used to assert preset resolution. */
+const CHECK_PATH = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z';
+describe('Icon', () => {
+    it('renders an svg that is decorative (aria-hidden) by default', () => {
+        const { container } = render(Icon, { props: { name: 'check' } });
+        const svg = container.querySelector('svg');
+        expect(svg).toBeInTheDocument();
+        expect(svg).toHaveAttribute('aria-hidden', 'true');
+        expect(svg).not.toHaveAttribute('role');
+    });
+    it('resolves a named preset to its path', () => {
+        const { container } = render(Icon, { props: { name: 'check' } });
+        const path = container.querySelector('svg path');
+        expect(path).toHaveAttribute('d', CHECK_PATH);
+    });
+    it('renders a custom path verbatim, taking precedence over name', () => {
+        const custom = 'M0 0h10v10H0z';
+        const { container } = render(Icon, {
+            props: { name: 'check', path: custom },
+        });
+        const path = container.querySelector('svg path');
+        expect(path).toHaveAttribute('d', custom);
+    });
+    it('renders a path with no shape for an unknown preset name', () => {
+        // finalPath resolves to '' for an unknown preset; Svelte omits the empty
+        // `d` attribute entirely, so the path element renders without a shape.
+        const { container } = render(Icon, { props: { name: 'does-not-exist' } });
+        const path = container.querySelector('svg path');
+        expect(path).toBeInTheDocument();
+        expect(path).not.toHaveAttribute('d');
+    });
+    it('becomes informative (role=img + aria-label) when given an aria-label', () => {
+        const { container } = render(Icon, {
+            props: { name: 'search', 'aria-label': 'Search' },
+        });
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('role', 'img');
+        expect(svg).toHaveAttribute('aria-label', 'Search');
+        expect(svg).toHaveAttribute('aria-hidden', 'false');
+    });
+    it('converts a numeric size to a px width/height', () => {
+        const { container } = render(Icon, { props: { name: 'menu', size: 32 } });
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '32px');
+        expect(svg).toHaveAttribute('height', '32px');
+    });
+    it('passes a string size through unchanged', () => {
+        const { container } = render(Icon, {
+            props: { name: 'menu', size: '1.5em' },
+        });
+        const svg = container.querySelector('svg');
+        expect(svg).toHaveAttribute('width', '1.5em');
+        expect(svg).toHaveAttribute('height', '1.5em');
+    });
+    it('applies the color prop as the svg fill', () => {
+        const { container } = render(Icon, {
+            props: { name: 'menu', color: '#ff0000' },
+        });
+        expect(container.querySelector('svg')).toHaveAttribute('fill', '#ff0000');
+    });
+    it('uses currentColor as the default fill', () => {
+        const { container } = render(Icon, { props: { name: 'menu' } });
+        expect(container.querySelector('svg')).toHaveAttribute('fill', 'currentColor');
+    });
+    it('applies a custom viewBox', () => {
+        const { container } = render(Icon, {
+            props: { name: 'menu', viewBox: '0 0 48 48' },
+        });
+        expect(container.querySelector('svg')).toHaveAttribute('viewBox', '0 0 48 48');
+    });
+    it('is axe-clean when decorative', async () => {
+        const { container } = render(Icon, { props: { name: 'close' } });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean when labelled', async () => {
+        const { container } = render(Icon, {
+            props: { name: 'close', 'aria-label': 'Close dialog' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/display/__tests__/StatusBadge.test.js

@@ -0,0 +1,98 @@
+/**
+ * Component tests for StatusBadge (Sweep S11, #1416).
+ *
+ * StatusBadge is a presentational chip: it normalizes a status string, maps it
+ * to a color scheme per domain `type`, and renders a humanized label. Tests
+ * assert the real API from StatusBadge.svelte — label formatting, custom label
+ * override, size/variant classes, scheme-driven CSS custom properties, and
+ * axe-cleanliness across variants.
+ */
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import StatusBadge from '../StatusBadge.svelte';
+describe('StatusBadge', () => {
+    it('renders the status value as its label', () => {
+        render(StatusBadge, { props: { status: 'active' } });
+        expect(screen.getByText('active')).toBeInTheDocument();
+    });
+    it('humanizes underscores in the status into spaces', () => {
+        render(StatusBadge, { props: { status: 'on_hold', type: 'project' } });
+        expect(screen.getByText('on hold')).toBeInTheDocument();
+    });
+    it('prefers an explicit label over the status value', () => {
+        render(StatusBadge, {
+            props: { status: 'paid', type: 'invoice', label: 'Paid in full' },
+        });
+        expect(screen.getByText('Paid in full')).toBeInTheDocument();
+        expect(screen.queryByText('paid')).not.toBeInTheDocument();
+    });
+    it('always carries the base status-badge class', () => {
+        const { container } = render(StatusBadge, { props: { status: 'active' } });
+        expect(container.querySelector('span')).toHaveClass('status-badge');
+    });
+    it.each([
+        ['sm', 'sm'],
+        ['lg', 'lg'],
+    ])('applies the %s size class', (size, cls) => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'active', size },
+        });
+        expect(container.querySelector('span')).toHaveClass(cls);
+    });
+    it('omits a size class for the default md size', () => {
+        const { container } = render(StatusBadge, { props: { status: 'active' } });
+        const span = container.querySelector('span');
+        expect(span).not.toHaveClass('sm');
+        expect(span).not.toHaveClass('lg');
+    });
+    it('applies the outline class for the outline variant', () => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'active', variant: 'outline' },
+        });
+        expect(container.querySelector('span')).toHaveClass('outline');
+    });
+    it('maps a known status to its scheme colors via CSS custom properties', () => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'overdue', type: 'invoice' },
+        });
+        const span = container.querySelector('span');
+        // invoice/overdue → error container scheme
+        expect(span.style.getPropertyValue('--badge-bg')).toContain('smrt-color-error-container');
+        expect(span.style.getPropertyValue('--badge-text')).toContain('smrt-color-on-error-container');
+    });
+    it('falls back to a neutral scheme for an unknown status', () => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'totally-unknown', type: 'invoice' },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toContain('#e5e7eb');
+        expect(span.style.getPropertyValue('--badge-text')).toContain('#374151');
+    });
+    it('normalizes spaces and hyphens when matching a scheme key', () => {
+        // 'On-Hold' normalizes to 'on_hold', a known project status.
+        const { container } = render(StatusBadge, {
+            props: { status: 'On-Hold', type: 'project' },
+        });
+        const span = container.querySelector('span');
+        expect(span.style.getPropertyValue('--badge-bg')).toContain('smrt-color-secondary-container');
+    });
+    it.each([
+        ['default', 'active'],
+        ['invoice', 'paid'],
+        ['project', 'completed'],
+        ['expense', 'reimbursed'],
+        ['time', 'approved'],
+        ['compliance', 'valid'],
+        ['estimate', 'accepted'],
+    ])('is axe-clean for type=%s status=%s', async (type, status) => {
+        const { container } = render(StatusBadge, { props: { status, type } });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean for the outline variant', async () => {
+        const { container } = render(StatusBadge, {
+            props: { status: 'active', variant: 'outline' },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/display/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Display components - Read-only presentation components
+ */
+export { default as ConfidenceBadge } from './ConfidenceBadge.svelte';
+export { default as CurrencyDisplay } from './CurrencyDisplay.svelte';
+export { default as DateDisplay } from './DateDisplay.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';
+export type { StatusType } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/display/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/display/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAO9D,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/display/index.js

@@ -0,0 +1,9 @@
+/**
+ * Display components - Read-only presentation components
+ */
+// Export components
+export { default as ConfidenceBadge } from './ConfidenceBadge.svelte';
+export { default as CurrencyDisplay } from './CurrencyDisplay.svelte';
+export { default as DateDisplay } from './DateDisplay.svelte';
+export { default as Icon } from './Icon.svelte';
+export { default as StatusBadge } from './StatusBadge.svelte';

package/dist/components/display/types.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Display component types
+ */
+export type StatusType = 'default' | 'invoice' | 'project' | 'expense' | 'time' | 'compliance' | 'estimate';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/display/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/display/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,UAAU,GAClB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,MAAM,GACN,YAAY,GACZ,UAAU,CAAC"}

package/dist/components/display/types.js

@@ -0,0 +1,4 @@
+/**
+ * Display component types
+ */
+export {};

package/dist/components/feedback/ConfirmDialog.svelte

@@ -0,0 +1,226 @@
+<script lang="ts">
+/**
+ * ConfirmDialog - Modal confirmation dialog
+ * refactored for Material 3
+ *
+ * Provides a consistent confirmation dialog for destructive actions
+ * or important decisions.
+ */
+import { ripple } from '../../actions/ripple.js';
+
+/** Props for ConfirmDialog component */
+export interface Props {
+  /** Whether the dialog is open */
+  open: boolean;
+  /** Dialog title */
+  title: string;
+  /** Dialog message */
+  message: string;
+  /** Confirm button label */
+  confirmLabel?: string;
+  /** Cancel button label */
+  cancelLabel?: string;
+  /** Use destructive (red) styling for confirm */
+  destructive?: boolean;
+  /** Show loading state on confirm */
+  loading?: boolean;
+  /** Called when confirm is clicked */
+  onconfirm?: () => void;
+  /** Called when cancel is clicked or dialog closed */
+  oncancel?: () => void;
+}
+
+const {
+  open,
+  title,
+  message,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  destructive = false,
+  loading = false,
+  onconfirm,
+  oncancel,
+}: Props = $props();
+
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === e.currentTarget) {
+    oncancel?.();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    oncancel?.();
+  }
+}
+</script>
+
+{#if open}
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <div
+    class="dialog-backdrop"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="dialog-title"
+    tabindex="-1"
+    onclick={handleBackdropClick}
+    onkeydown={handleKeydown}
+  >
+    <div class="dialog-content">
+      <h2 id="dialog-title" class="dialog-title">{title}</h2>
+      <p class="dialog-message">{message}</p>
+
+      <div class="dialog-actions">
+        <button
+          type="button"
+          class="btn btn-text"
+          onclick={oncancel}
+          disabled={loading}
+          use:ripple
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="button"
+          class="btn btn-filled"
+          class:destructive
+          onclick={onconfirm}
+          disabled={loading}
+          use:ripple
+        >
+          {#if loading}
+            <span class="spinner"></span>
+          {/if}
+          {confirmLabel}
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .dialog-backdrop {
+    position: fixed;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--smrt-color-scrim, rgba(0, 0, 0, 0.4));
+    z-index: var(--smrt-z-index-dialog, 1000);
+    padding: 1rem;
+    backdrop-filter: blur(2px);
+  }
+
+  .dialog-content {
+    background-color: var(--smrt-color-surface-container-high);
+    border-radius: var(--smrt-radius-3xl, 32px);
+    padding: var(--smrt-spacing-6, 24px);
+    max-width: 400px;
+    width: 100%;
+    box-shadow: var(--smrt-elevation-3);
+    animation: dialogEnter 300ms cubic-bezier(0.2, 0, 0, 1);
+    display: flex;
+    flex-direction: column;
+  }
+
+  @keyframes dialogEnter {
+    from {
+      opacity: 0;
+      transform: translateY(20px) scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  .dialog-title {
+    font: var(--smrt-typography-headline-small-font);
+    color: var(--smrt-color-on-surface);
+    margin: 0 0 var(--smrt-spacing-4, 16px);
+  }
+
+  .dialog-message {
+    font: var(--smrt-typography-body-medium-font);
+    color: var(--smrt-color-on-surface-variant);
+    margin: 0 0 var(--smrt-spacing-6, 24px);
+    line-height: 1.5;
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--smrt-spacing-2, 8px);
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--smrt-spacing-2, 8px);
+    height: 40px;
+    padding: 0 var(--smrt-spacing-6, 24px);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    border-radius: var(--smrt-radius-2xl, 24px);
+    cursor: pointer;
+    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, ease);
+    border: none;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .btn-text {
+    background: transparent;
+    color: var(--smrt-color-primary);
+    padding: 0 var(--smrt-spacing-3, 12px);
+  }
+
+  .btn-text:hover:not(:disabled) {
+    background-color: var(--smrt-color-surface-container-highest);
+  }
+
+  .btn-filled {
+    background-color: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  .btn-filled:hover:not(:disabled) {
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .btn-filled.destructive {
+    background-color: var(--smrt-color-error);
+    color: var(--smrt-color-on-error);
+  }
+
+  .spinner {
+    width: 18px;
+    height: 18px;
+    border: 2px solid transparent;
+    border-top-color: currentColor;
+    border-radius: var(--smrt-radius-full, 9999px);
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .dialog-content {
+      animation: none;
+    }
+    .spinner {
+      animation: none;
+    }
+  }
+</style>

package/dist/components/feedback/ConfirmDialog.svelte.d.ts

@@ -0,0 +1,25 @@
+/** Props for ConfirmDialog component */
+export interface Props {
+    /** Whether the dialog is open */
+    open: boolean;
+    /** Dialog title */
+    title: string;
+    /** Dialog message */
+    message: string;
+    /** Confirm button label */
+    confirmLabel?: string;
+    /** Cancel button label */
+    cancelLabel?: string;
+    /** Use destructive (red) styling for confirm */
+    destructive?: boolean;
+    /** Show loading state on confirm */
+    loading?: boolean;
+    /** Called when confirm is clicked */
+    onconfirm?: () => void;
+    /** Called when cancel is clicked or dialog closed */
+    oncancel?: () => void;
+}
+declare const ConfirmDialog: import("svelte").Component<Props, {}, "">;
+type ConfirmDialog = ReturnType<typeof ConfirmDialog>;
+export default ConfirmDialog;
+//# sourceMappingURL=ConfirmDialog.svelte.d.ts.map

package/dist/components/feedback/ConfirmDialog.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmDialog.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/feedback/ConfirmDialog.svelte.ts"],"names":[],"mappings":"AAaA,wCAAwC;AACxC,MAAM,WAAW,KAAK;IACpB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0BAA0B;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAwDD,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}