@synthaxai/ui 1.0.0

package/dist/styles/tokens.css

@@ -0,0 +1,399 @@
+/**
+ * @synthaxai/ui - Design Tokens
+ *
+ * Core design tokens for the Synthax component library.
+ * These tokens ensure visual consistency across all components.
+ *
+ * Usage:
+ *   @import '@synthaxai/ui/styles';
+ *
+ * Or include in your app.css:
+ *   @import '@synthaxai/ui/dist/styles/tokens.css';
+ */
+
+:root {
+	/* ========================================================================
+	 * Color Tokens
+	 * ======================================================================== */
+
+	/* Primary Brand Colors (Deep Teal) */
+	--ui-color-primary: 18 69 69;
+	--ui-color-primary-light: 26 107 107;
+	--ui-color-primary-dark: 13 51 51;
+	--ui-color-primary-hover: 22 85 85;
+
+	/* Semantic Colors */
+	--ui-color-success: 39 174 96;
+	--ui-color-success-light: 46 204 113;
+	--ui-color-success-bg: 39 174 96 / 0.1;
+
+	--ui-color-warning: 243 156 18;
+	--ui-color-warning-light: 241 196 15;
+	--ui-color-warning-bg: 243 156 18 / 0.1;
+
+	--ui-color-error: 231 76 60;
+	--ui-color-error-light: 236 112 99;
+	--ui-color-error-bg: 231 76 60 / 0.1;
+
+	--ui-color-info: 52 152 219;
+	--ui-color-info-light: 93 173 226;
+	--ui-color-info-bg: 52 152 219 / 0.1;
+
+	/* ========================================================================
+	 * Spacing Scale (8px base)
+	 * ======================================================================== */
+	--ui-space-0: 0;
+	--ui-space-0-5: 0.125rem; /* 2px */
+	--ui-space-1: 0.25rem; /* 4px */
+	--ui-space-1-5: 0.375rem; /* 6px */
+	--ui-space-2: 0.5rem; /* 8px */
+	--ui-space-2-5: 0.625rem; /* 10px */
+	--ui-space-3: 0.75rem; /* 12px */
+	--ui-space-3-5: 0.875rem; /* 14px */
+	--ui-space-4: 1rem; /* 16px */
+	--ui-space-5: 1.25rem; /* 20px */
+	--ui-space-6: 1.5rem; /* 24px */
+	--ui-space-7: 1.75rem; /* 28px */
+	--ui-space-8: 2rem; /* 32px */
+	--ui-space-9: 2.25rem; /* 36px */
+	--ui-space-10: 2.5rem; /* 40px */
+	--ui-space-12: 3rem; /* 48px */
+	--ui-space-14: 3.5rem; /* 56px */
+	--ui-space-16: 4rem; /* 64px */
+	--ui-space-20: 5rem; /* 80px */
+	--ui-space-24: 6rem; /* 96px */
+
+	/* ========================================================================
+	 * Typography Scale
+	 * ======================================================================== */
+
+	/* Font Families */
+	--ui-font-sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+		'Helvetica Neue', Arial, sans-serif;
+	--ui-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
+
+	/* Font Sizes */
+	--ui-text-xs: 0.75rem; /* 12px */
+	--ui-text-sm: 0.875rem; /* 14px */
+	--ui-text-base: 1rem; /* 16px */
+	--ui-text-lg: 1.125rem; /* 18px */
+	--ui-text-xl: 1.25rem; /* 20px */
+	--ui-text-2xl: 1.5rem; /* 24px */
+	--ui-text-3xl: 1.875rem; /* 30px */
+	--ui-text-4xl: 2.25rem; /* 36px */
+	--ui-text-5xl: 3rem; /* 48px */
+
+	/* Line Heights */
+	--ui-leading-none: 1;
+	--ui-leading-tight: 1.25;
+	--ui-leading-snug: 1.375;
+	--ui-leading-normal: 1.5;
+	--ui-leading-relaxed: 1.625;
+	--ui-leading-loose: 2;
+
+	/* Font Weights */
+	--ui-font-normal: 400;
+	--ui-font-medium: 500;
+	--ui-font-semibold: 600;
+	--ui-font-bold: 700;
+
+	/* ========================================================================
+	 * Border Radius (following designer guidelines)
+	 * ======================================================================== */
+	--ui-radius-none: 0;
+	--ui-radius-sm: 0.25rem; /* 4px - badges, tags */
+	--ui-radius-default: 0.375rem; /* 6px - small elements */
+	--ui-radius-lg: 0.5rem; /* 8px - buttons, inputs */
+	--ui-radius-xl: 0.75rem; /* 12px - small/medium cards */
+	--ui-radius-2xl: 1rem; /* 16px - large cards, modals */
+	--ui-radius-3xl: 1.5rem; /* 24px - hero sections */
+	--ui-radius-full: 9999px; /* circular */
+
+	/* ========================================================================
+	 * Shadows (minimal, only for floating elements per designer)
+	 * ======================================================================== */
+	--ui-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+	--ui-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+	--ui-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+	--ui-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+	--ui-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+	/* ========================================================================
+	 * Transitions
+	 * ======================================================================== */
+	--ui-duration-fast: 100ms;
+	--ui-duration-normal: 200ms;
+	--ui-duration-slow: 300ms;
+	--ui-duration-slower: 500ms;
+
+	--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+	--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+	--ui-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+	/* ========================================================================
+	 * Z-Index Scale
+	 * ======================================================================== */
+	--ui-z-dropdown: 50;
+	--ui-z-sticky: 60;
+	--ui-z-fixed: 70;
+	--ui-z-modal-backdrop: 80;
+	--ui-z-modal: 90;
+	--ui-z-popover: 100;
+	--ui-z-tooltip: 110;
+	--ui-z-toast: 120;
+
+	/* ========================================================================
+	 * Container Widths
+	 * ======================================================================== */
+	--ui-container-sm: 640px;
+	--ui-container-md: 768px;
+	--ui-container-lg: 1024px;
+	--ui-container-xl: 1280px;
+	--ui-container-2xl: 1536px;
+
+	/* ========================================================================
+	 * Focus Ring (accessibility)
+	 * ======================================================================== */
+	--ui-ring-width: 2px;
+	--ui-ring-offset: 2px;
+	--ui-ring-color: rgb(var(--ui-color-primary));
+}
+
+/* ============================================================================
+ * Light Theme (default)
+ * ============================================================================ */
+:root,
+[data-theme='light'] {
+	/* Text Colors */
+	--ui-text-primary: #111827;
+	--ui-text-secondary: #4b5563;
+	--ui-text-tertiary: #9ca3af;
+	--ui-text-inverse: #ffffff;
+	--ui-text-disabled: #d1d5db;
+
+	/* Background Colors */
+	--ui-bg-primary: #ffffff;
+	--ui-bg-secondary: #f9fafb;
+	--ui-bg-tertiary: #f3f4f6;
+	--ui-bg-inverse: #111827;
+
+	/* Border Colors */
+	--ui-border-default: #e5e7eb;
+	--ui-border-hover: #d1d5db;
+	--ui-border-focus: rgb(var(--ui-color-primary));
+
+	/* Glass Effect */
+	--ui-glass-bg: rgba(255, 255, 255, 0.7);
+	--ui-glass-border: rgba(255, 255, 255, 0.2);
+	--ui-glass-shadow: rgba(0, 0, 0, 0.1);
+
+	/* Backdrop */
+	--ui-backdrop: rgba(0, 0, 0, 0.5);
+}
+
+/* ============================================================================
+ * Dark Theme (explicit via data-theme attribute)
+ * ============================================================================ */
+[data-theme='dark'] {
+	/* Text Colors */
+	--ui-text-primary: #f9fafb;
+	--ui-text-secondary: #d1d5db;
+	--ui-text-tertiary: #9ca3af;
+	--ui-text-inverse: #111827;
+	--ui-text-disabled: #4b5563;
+
+	/* Background Colors */
+	--ui-bg-primary: #0a0a0a;
+	--ui-bg-secondary: #121212;
+	--ui-bg-tertiary: #1f1f1f;
+	--ui-bg-inverse: #f9fafb;
+
+	/* Border Colors */
+	--ui-border-default: #374151;
+	--ui-border-hover: #4b5563;
+	--ui-border-focus: rgb(var(--ui-color-primary-light));
+
+	/* Glass Effect */
+	--ui-glass-bg: rgba(18, 18, 18, 0.8);
+	--ui-glass-border: rgba(255, 255, 255, 0.1);
+	--ui-glass-shadow: rgba(0, 0, 0, 0.3);
+
+	/* Backdrop */
+	--ui-backdrop: rgba(0, 0, 0, 0.7);
+}
+
+/* ============================================================================
+ * Dark Theme (automatic via system preference)
+ * Only applies when no explicit data-theme is set
+ * ============================================================================ */
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		/* Text Colors */
+		--ui-text-primary: #f9fafb;
+		--ui-text-secondary: #d1d5db;
+		--ui-text-tertiary: #9ca3af;
+		--ui-text-inverse: #111827;
+		--ui-text-disabled: #4b5563;
+
+		/* Background Colors */
+		--ui-bg-primary: #0a0a0a;
+		--ui-bg-secondary: #121212;
+		--ui-bg-tertiary: #1f1f1f;
+		--ui-bg-inverse: #f9fafb;
+
+		/* Border Colors */
+		--ui-border-default: #374151;
+		--ui-border-hover: #4b5563;
+		--ui-border-focus: rgb(var(--ui-color-primary-light));
+
+		/* Glass Effect */
+		--ui-glass-bg: rgba(18, 18, 18, 0.8);
+		--ui-glass-border: rgba(255, 255, 255, 0.1);
+		--ui-glass-shadow: rgba(0, 0, 0, 0.3);
+
+		/* Backdrop */
+		--ui-backdrop: rgba(0, 0, 0, 0.7);
+	}
+}
+
+/* ============================================================================
+ * Utility Classes
+ * ============================================================================ */
+
+/* Screen reader only */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Focus visible ring */
+.focus-ring {
+	outline: none;
+}
+
+.focus-ring:focus-visible {
+	outline: var(--ui-ring-width) solid var(--ui-ring-color);
+	outline-offset: var(--ui-ring-offset);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*::before,
+	*::after {
+		animation-duration: 0.01ms !important;
+		animation-iteration-count: 1 !important;
+		transition-duration: 0.01ms !important;
+	}
+}
+
+/* ============================================================================
+ * Animation Utility Classes
+ * ============================================================================ */
+.ui-animate-spin {
+	animation: ui-spin 1s linear infinite;
+}
+
+.ui-animate-pulse {
+	animation: ui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.ui-animate-fade-in {
+	animation: ui-fade-in 0.2s ease-out;
+}
+
+.ui-animate-slide-in {
+	animation: ui-slide-up 0.2s ease-out;
+}
+
+.ui-animate-scale-in {
+	animation: ui-scale-in 0.3s ease-out;
+}
+
+/* ============================================================================
+ * Animation Keyframes
+ * ============================================================================ */
+@keyframes ui-fade-in {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes ui-fade-out {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes ui-slide-up {
+	from {
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ui-slide-down {
+	from {
+		opacity: 0;
+		transform: translateY(-8px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+@keyframes ui-scale-in {
+	from {
+		opacity: 0;
+		transform: scale(0.95);
+	}
+	to {
+		opacity: 1;
+		transform: scale(1);
+	}
+}
+
+@keyframes ui-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes ui-pulse {
+	0%,
+	100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+}
+
+@keyframes ui-shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}

package/dist/types/index.d.ts

@@ -0,0 +1,175 @@
+/**
+ * @synthaxai/ui - Type Definitions
+ *
+ * Core types used across all components in the library.
+ * These types ensure consistency and type safety throughout the component library.
+ */
+/**
+ * Standard size variants used across components.
+ * Follows a consistent naming convention for predictable sizing.
+ */
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Common component size (most components use these three).
+ */
+export type ComponentSize = 'sm' | 'md' | 'lg';
+/**
+ * Component variants for visual hierarchy.
+ * - primary: Main action, prominent styling
+ * - secondary: Supporting action, subdued styling
+ * - ghost: Minimal styling, often transparent
+ * - outline: Border-only styling
+ */
+export type Variant = 'primary' | 'secondary' | 'ghost' | 'outline';
+/**
+ * Semantic status variants for feedback components.
+ * Used for badges, alerts, toasts, and status indicators.
+ */
+export type Status = 'success' | 'warning' | 'error' | 'info' | 'neutral';
+/**
+ * Loading states for async operations.
+ */
+export type LoadingState = 'idle' | 'loading' | 'success' | 'error';
+/**
+ * Standard validation result for form fields.
+ */
+export interface ValidationResult {
+    /** Whether the field is valid */
+    valid: boolean;
+    /** Error message if invalid */
+    message?: string;
+}
+/**
+ * Validator function signature for form fields.
+ */
+export type ValidatorFn = (value: string) => ValidationResult;
+/**
+ * Form field state for tracking interaction and validation.
+ */
+export interface FieldState {
+    /** Current field value */
+    value: string;
+    /** Whether the field has been touched (focused and blurred) */
+    touched: boolean;
+    /** Whether the field has been modified */
+    dirty: boolean;
+    /** Current validation error message, if any */
+    error?: string;
+    /** Whether the field is currently focused */
+    focused: boolean;
+}
+/**
+ * Input mode types for mobile keyboards.
+ */
+export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+/**
+ * HTML autocomplete attribute values for form inputs.
+ */
+export type AutoComplete = 'off' | 'on' | 'name' | 'given-name' | 'family-name' | 'email' | 'tel' | 'street-address' | 'postal-code' | 'address-level1' | 'address-level2' | 'country' | 'bday' | 'sex' | 'new-password' | 'current-password' | 'one-time-code' | 'organization' | 'cc-name' | 'cc-number' | 'cc-exp' | 'cc-csc';
+/**
+ * Step state for multi-step flows.
+ */
+export type StepState = 'pending' | 'active' | 'completed' | 'error';
+/**
+ * Step definition for step indicators and wizards.
+ */
+export interface Step {
+    /** Unique identifier for the step */
+    id: string;
+    /** Display label for the step */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Current state of the step */
+    state: StepState;
+    /** Whether the step is optional */
+    optional?: boolean;
+}
+/**
+ * Column definition for data tables.
+ */
+export interface TableColumn<T = unknown> {
+    /** Unique key for the column, corresponds to data property */
+    key: string;
+    /** Display header for the column */
+    header: string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Custom width (CSS value) */
+    width?: string;
+    /** Hide column on mobile */
+    hideOnMobile?: boolean;
+    /** Custom render function */
+    render?: (value: unknown, row: T) => string;
+}
+/**
+ * Sort direction for data tables.
+ */
+export type SortDirection = 'asc' | 'desc' | null;
+/**
+ * Sort state for data tables.
+ */
+export interface SortState {
+    column: string | null;
+    direction: SortDirection;
+}
+/**
+ * Dialog variant for styling.
+ */
+export type DialogVariant = 'default' | 'danger' | 'success';
+/**
+ * Position for modals and dialogs.
+ */
+export type DialogPosition = 'center' | 'top' | 'bottom';
+/**
+ * Toast notification configuration.
+ */
+export interface Toast {
+    /** Unique identifier */
+    id: string;
+    /** Toast message */
+    message: string;
+    /** Toast type/status */
+    type: Status;
+    /** Duration in milliseconds (0 = persistent) */
+    duration?: number;
+    /** Optional title */
+    title?: string;
+    /** Optional action */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+/**
+ * Generic icon component type for Lucide icons.
+ * Allows passing any Lucide Svelte icon component as a prop.
+ */
+export type IconComponent = typeof import('lucide-svelte').AlertCircle;
+/**
+ * ARIA live region politeness levels.
+ */
+export type AriaLive = 'off' | 'polite' | 'assertive';
+/**
+ * ARIA role types commonly used in UI components.
+ */
+export type AriaRole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'grid' | 'gridcell' | 'listbox' | 'menu' | 'menuitem' | 'option' | 'progressbar' | 'radio' | 'radiogroup' | 'row' | 'rowgroup' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'tooltip' | 'tree' | 'treeitem';
+/**
+ * Makes specified properties required.
+ */
+export type WithRequired<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+/**
+ * Makes all properties optional except specified ones.
+ */
+export type PartialExcept<T, K extends keyof T> = Partial<T> & Pick<T, K>;
+/**
+ * Extracts the props type from a component.
+ */
+export type ComponentProps<T> = T extends new (...args: unknown[]) => {
+    $props: infer P;
+} ? P : never;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/types/index.js

@@ -0,0 +1,7 @@
+/**
+ * @synthaxai/ui - Type Definitions
+ *
+ * Core types used across all components in the library.
+ * These types ensure consistency and type safety throughout the component library.
+ */
+export {};

package/dist/utils/accessibility.d.ts

@@ -0,0 +1,103 @@
+/**
+ * Accessibility utilities for healthcare UI components.
+ *
+ * Implements WCAG 2.1 Level AA compliance requirements for
+ * critical healthcare applications.
+ */
+/**
+ * Screen reader only text.
+ * Visually hidden but accessible to assistive technologies.
+ */
+export declare const srOnlyClass = "sr-only";
+/**
+ * Announces a message to screen readers.
+ *
+ * @param message - The message to announce
+ * @param priority - 'polite' (default) or 'assertive'
+ *
+ * @example
+ * announce('Form submitted successfully');
+ * announce('Error: Please fix the highlighted fields', 'assertive');
+ */
+export declare function announce(message: string, priority?: 'polite' | 'assertive'): void;
+/**
+ * Checks if the user prefers reduced motion.
+ *
+ * @returns true if reduced motion is preferred
+ */
+export declare function prefersReducedMotion(): boolean;
+/**
+ * Returns animation duration based on user preferences.
+ * Returns 0 if user prefers reduced motion, otherwise returns the provided duration.
+ *
+ * @param duration - Normal animation duration in ms
+ * @returns Adjusted duration
+ */
+export declare function getAnimationDuration(duration: number): number;
+/**
+ * Checks if high contrast mode is preferred.
+ *
+ * @returns true if high contrast is preferred
+ */
+export declare function prefersHighContrast(): boolean;
+/**
+ * Describes an element for screen readers.
+ * Returns appropriate ARIA attributes for a described element.
+ *
+ * @param description - The description text
+ * @param id - The ID to use for the description element
+ */
+export declare function createDescription(description: string, id: string): {
+    describedById: string;
+    descriptionProps: Record<string, string>;
+    text: string;
+};
+/**
+ * Formats a value for screen reader announcement.
+ * Useful for live regions that need to announce changes.
+ *
+ * @param value - The value to format
+ * @param label - Label describing the value
+ * @param unit - Optional unit (e.g., 'percent', 'dollars')
+ */
+export declare function formatForAnnouncement(value: number | string, label: string, unit?: string): string;
+/**
+ * Checks if an element is visible and focusable.
+ */
+export declare function isElementFocusable(element: Element): boolean;
+/**
+ * Gets all focusable elements within a container.
+ */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Creates an accessible label for a form field.
+ * Returns either labelledby or label props based on visibility.
+ */
+export declare function createFieldLabel(label: string, fieldId: string, options?: {
+    visible?: boolean;
+    required?: boolean;
+}): {
+    labelId: string;
+    labelProps: Record<string, string | boolean>;
+    fieldProps: Record<string, string>;
+};
+/**
+ * Creates ARIA props for an error message.
+ */
+export declare function createErrorProps(fieldId: string, error?: string): {
+    errorId: string;
+    errorProps: Record<string, string>;
+    fieldErrorProps: Record<string, string | boolean>;
+};
+/**
+ * Role descriptions for healthcare-specific contexts.
+ * Can be used with aria-roledescription for more specific announcements.
+ */
+export declare const healthcareRoles: {
+    readonly patientCard: "patient information card";
+    readonly vitalSign: "vital sign indicator";
+    readonly medicationItem: "medication entry";
+    readonly alertBanner: "clinical alert";
+    readonly statusIndicator: "status indicator";
+};
+//# sourceMappingURL=accessibility.d.ts.map

package/dist/utils/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/utils/accessibility.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAY,CAAC;AAErC;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,GAAE,QAAQ,GAAG,WAAsB,GAAG,IAAI,CAmC3F;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,IAAI,OAAO,CAG9C;AAED;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAE7D;AAED;;;;GAIG;AACH,wBAAgB,mBAAmB,IAAI,OAAO,CAG7C;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAChC,WAAW,EAAE,MAAM,EACnB,EAAE,EAAE,MAAM,GACR;IAAE,aAAa,EAAE,MAAM,CAAC;IAAC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CASnF;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,KAAK,EAAE,MAAM,EACb,IAAI,CAAC,EAAE,MAAM,GACX,MAAM,CAGR;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CA0B5D;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,WAAW,GAAG,WAAW,EAAE,CAY1E;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,OAAO,GAAE;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAO,GACrD;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IAC7C,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC,CAeA;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC/B,OAAO,EAAE,MAAM,EACf,KAAK,CAAC,EAAE,MAAM,GACZ;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;CAClD,CAcA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe;;;;;;CAMlB,CAAC"}