@plusui/library 0.1.0

package/dist/components/tab-group/tab-group.js

@@ -0,0 +1,347 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from '../tab/styles.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-tab-group
+ * @summary Tab group component that manages a set of tabs and panels.
+ *
+ * @slot tablist - Slot for tabs
+ * @slot panels - Slot for tab panels
+ *
+ * @csspart group - The component's base wrapper
+ * @csspart tablist - The tabs container
+ * @csspart panels - The tab panels container
+ * @csspart indicator - The animated indicator element (when animated=true)
+ *
+ * @cssproperty --tabs-gap - Controls the gap between tabs
+ * @cssproperty --tabs-indicator-color - Controls the color of the active tab indicator
+ * @cssproperty --tabs-indicator-height - Controls the height of the animated indicator
+ *
+ * @event plus-tabs-change - Emitted when a tab is selected with the tab's value
+ *
+ * @example
+ * ```html
+ * <plus-tab-group>
+ *   <plus-tab value="tab1" slot="tablist">Tab 1</plus-tab>
+ *   <plus-tab value="tab2" slot="tablist">Tab 2</plus-tab>
+ *   <plus-tab-panel value="tab1" slot="panels">Content 1</plus-tab-panel>
+ *   <plus-tab-panel value="tab2" slot="panels">Content 2</plus-tab-panel>
+ * </plus-tab-group>
+ * ```
+ */
+class PlusTabGroup extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Sets the size of the tabs
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the orientation of the tabs
+         * - horizontal: Tabs arranged horizontally
+         * - vertical: Tabs arranged vertically
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Disables all tabs
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Enables the dismiss button on all tabs
+         * @default false
+         */
+        this.dismissible = false;
+        /**
+         * Currently active tab value
+         */
+        this.value = '';
+        /**
+         * Enables animated sliding indicator for active tab
+         * @default false
+         */
+        this.animated = false;
+        /**
+         * Internal state to track tabs and panels
+         */
+        this.tabs = [];
+        this.panels = [];
+        this.addEventListener('plus-tab-click', this.handleTabClick);
+        this.addEventListener('plus-tab-dismiss', this.handleTabDismiss);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Initialize resize observer
+        this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+        this.resizeObserver.observe(this);
+        // Initialize mutation observer to watch for DOM changes
+        this.mutationObserver = new MutationObserver(() => this.updateIndicator());
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['active'],
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Get all tabs from the tablist slot
+     */
+    getTabs() {
+        if (!this.tablistSlot)
+            return [];
+        return [...this.tablistSlot.assignedElements({ flatten: true })].filter((el) => el.tagName.toLowerCase() === 'plus-tab');
+    }
+    /**
+     * Get all panels from the panels slot
+     */
+    getPanels() {
+        if (!this.panelsSlot)
+            return [];
+        return [...this.panelsSlot.assignedElements({ flatten: true })].filter((el) => el.tagName.toLowerCase() === 'plus-tab-panel');
+    }
+    /**
+     * Handle tab slot change
+     */
+    handleTabsSlotChange() {
+        this.tabs = this.getTabs();
+        this.syncTabsWithPanels();
+        // Update indicator when tabs change
+        setTimeout(() => this.updateIndicator(), 10);
+    }
+    /**
+     * Handle panels slot change
+     */
+    handlePanelsSlotChange() {
+        this.panels = this.getPanels();
+        this.syncTabsWithPanels();
+    }
+    /**
+     * Updates the indicator position and size
+     */
+    updateIndicator() {
+        if (!this.animated || !this.indicator)
+            return;
+        // Find the active tab
+        const activeTab = this.tabs.find((tab) => tab.active);
+        if (!activeTab)
+            return;
+        const tabElement = activeTab;
+        const tabRect = tabElement.getBoundingClientRect();
+        const containerRect = this.getBoundingClientRect();
+        if (this.orientation === 'horizontal') {
+            // Calculate position for horizontal orientation
+            const left = tabRect.left - containerRect.left;
+            const width = tabRect.width;
+            // Set style properties
+            this.indicator.style.left = `${left}px`;
+            this.indicator.style.width = `${width}px`;
+            this.indicator.style.top = '';
+            this.indicator.style.height = '2px'; // Horizontal line thickness
+        }
+        else {
+            // Calculate position for vertical orientation
+            const top = tabRect.top - containerRect.top;
+            const height = tabRect.height;
+            // Set style properties
+            this.indicator.style.top = `${top}px`;
+            this.indicator.style.height = `${height}px`;
+            this.indicator.style.left = '';
+            this.indicator.style.width = '2px'; // Vertical line thickness
+        }
+        // Ensure indicator is visible
+        this.indicator.style.display = 'block';
+    }
+    /**
+     * Synchronize tabs with panels and apply properties
+     */
+    syncTabsWithPanels() {
+        // If there's no active tab and we have tabs, activate the first one
+        if (!this.value && this.tabs.length > 0) {
+            const firstTab = this.tabs[0];
+            this.value = firstTab.value;
+        }
+        // Update all tabs with current properties
+        this.tabs.forEach((tab) => {
+            tab.active = tab.value === this.value;
+            tab.size = this.size;
+            tab.orientation = this.orientation;
+            tab.disabled = this.disabled || tab.disabled;
+            tab.dismissible = this.dismissible || tab.dismissible;
+            tab.animated = this.animated;
+        });
+        // Update all panels
+        this.panels.forEach((panel) => {
+            panel.active = panel.value === this.value;
+        });
+        // Update indicator position
+        setTimeout(() => this.updateIndicator(), 10);
+    }
+    /**
+     * Handle tab click event
+     */
+    handleTabClick(event) {
+        const newValue = event.detail.value;
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.syncTabsWithPanels();
+            this.emit('plus-tabs-change', { detail: { value: newValue } });
+        }
+    }
+    /**
+     * Handle tab dismiss event
+     */
+    handleTabDismiss(event) {
+        const dismissedValue = event.detail.value;
+        const dismissedTab = this.tabs.find((tab) => tab.value === dismissedValue);
+        const dismissedPanel = this.panels.find((panel) => panel.value === dismissedValue);
+        // Remove dismissed tab and panel from DOM
+        if (dismissedTab)
+            dismissedTab.remove();
+        if (dismissedPanel)
+            dismissedPanel.remove();
+        // Update internal state
+        this.tabs = this.getTabs();
+        this.panels = this.getPanels();
+        // If we dismissed the active tab, activate the first remaining tab
+        if (dismissedValue === this.value && this.tabs.length > 0) {
+            const firstTab = this.tabs[0];
+            this.value = firstTab.value;
+            this.syncTabsWithPanels();
+            this.emit('plus-tabs-change', { detail: { value: this.value } });
+        }
+        // Update indicator after dismissal
+        setTimeout(() => this.updateIndicator(), 100);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update indicator after relevant property changes
+        if (changedProperties.has('value') ||
+            changedProperties.has('orientation') ||
+            changedProperties.has('animated')) {
+            setTimeout(() => this.updateIndicator(), 10);
+        }
+    }
+    render() {
+        const { orientation, animated } = this;
+        const { tabGroup, tabHeader } = tabStyle({ orientation });
+        return x `
+      <div part="group" class=${tabGroup()}>
+        <div part="tablist" class="tablist-wrapper ${tabHeader()}">
+          <slot name="tablist" @slotchange=${this.handleTabsSlotChange}></slot>
+          ${animated
+            ? x `<div part="indicator" class="tab-indicator"></div>`
+            : ''}
+        </div>
+        <div part="panels" class="tab-panels">
+          <slot name="panels" @slotchange=${this.handlePanelsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+PlusTabGroup.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .tab-panels {
+        width: 100%;
+      }
+
+      .tablist-wrapper {
+        position: relative;
+      }
+
+      .tab-indicator {
+        position: absolute;
+        bottom: 0;
+        height: 2px;
+        background-color: var(
+          --tabs-indicator-color,
+          var(--plus-color-background-primary-default)
+        );
+        transition: all 0.25s ease;
+        z-index: 10;
+        opacity: 1;
+        visibility: visible;
+      }
+
+      :host([orientation='vertical']) .tab-indicator {
+        width: 2px;
+        right: 0;
+        left: auto;
+        height: auto;
+        bottom: auto;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTabGroup.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusTabGroup.prototype, "orientation", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "disabled", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "dismissible", void 0);
+__decorate([
+    n({ type: String })
+], PlusTabGroup.prototype, "value", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "animated", void 0);
+__decorate([
+    e('slot[name="tablist"]')
+], PlusTabGroup.prototype, "tablistSlot", void 0);
+__decorate([
+    e('slot[name="panels"]')
+], PlusTabGroup.prototype, "panelsSlot", void 0);
+__decorate([
+    e('.tab-indicator')
+], PlusTabGroup.prototype, "indicator", void 0);
+__decorate([
+    r()
+], PlusTabGroup.prototype, "tabs", void 0);
+__decorate([
+    r()
+], PlusTabGroup.prototype, "panels", void 0);
+
+export { PlusTabGroup, PlusTabGroup as default };

package/dist/components/tab-group/tab-group.js.map

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

package/dist/components/tab-panel/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tab-panel';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tab-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tab-panel/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC"}

package/dist/components/tab-panel/index.js

@@ -0,0 +1,13 @@
+import PlusTabPanel from './tab-panel.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../tab/styles.js';
+import '../../index-B9iart53.js';
+
+// Define the element
+customElements.define('plus-tab-panel', PlusTabPanel);
+
+export { PlusTabPanel };

package/dist/components/tab-panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tab-panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,cAAc,aAAa,CAAC;AAE5B,qBAAqB;AACrB,cAAc,CAAC,MAAM,CAAC,gBAAgB,EAAE,YAAY,CAAC,CAAC"}

package/dist/components/tab-panel/tab-panel.d.ts

@@ -0,0 +1,33 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-tab-panel
+ * @summary Tab panel component that displays content associated with a tab.
+ *
+ * @slot - The default slot for tab panel content
+ *
+ * @csspart panel - The component's base wrapper
+ *
+ * @example
+ * ```html
+ * <plus-tab-panel value="tab1">Tab 1 Content</plus-tab-panel>
+ * ```
+ */
+export default class PlusTabPanel extends Tailwind {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Sets the value of the tab panel, used for matching with a tab
+     */
+    value: string;
+    /**
+     * Indicates if the panel is currently visible
+     * @default false
+     */
+    active: boolean;
+    /**
+     * Custom CSS class to apply to the panel
+     */
+    panelClass: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusTabPanel };
+//# sourceMappingURL=tab-panel.d.ts.map

package/dist/components/tab-panel/tab-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tab-panel/tab-panel.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAG7C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,QAAQ;IAChD,OAAgB,MAAM,4BAQpB;IAEF;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,UAAU,SAAM;IAEP,MAAM;CAehB;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/components/tab-panel/tab-panel.js

@@ -0,0 +1,73 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from '../tab/styles.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-tab-panel
+ * @summary Tab panel component that displays content associated with a tab.
+ *
+ * @slot - The default slot for tab panel content
+ *
+ * @csspart panel - The component's base wrapper
+ *
+ * @example
+ * ```html
+ * <plus-tab-panel value="tab1">Tab 1 Content</plus-tab-panel>
+ * ```
+ */
+class PlusTabPanel extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the value of the tab panel, used for matching with a tab
+         */
+        this.value = '';
+        /**
+         * Indicates if the panel is currently visible
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Custom CSS class to apply to the panel
+         */
+        this.panelClass = '';
+    }
+    render() {
+        const { active, panelClass } = this;
+        const { tabPanel } = tabStyle({ active });
+        return x `
+      <div
+        part="panel"
+        class=${tabPanel({ class: panelClass })}
+        role="tabpanel"
+        aria-hidden=${!active}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+PlusTabPanel.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTabPanel.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusTabPanel.prototype, "active", void 0);
+__decorate([
+    n({ type: String })
+], PlusTabPanel.prototype, "panelClass", void 0);
+
+export { PlusTabPanel, PlusTabPanel as default };

package/dist/components/tab-panel/tab-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tab-panel/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC;;;;;;;;;;;;GAYG;AACH,MAAqB,YAAa,SAAQ,QAAQ;IAAlD;;QAWE;;WAEG;QAEH,UAAK,GAAG,EAAE,CAAC;QAEX;;;WAGG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,eAAU,GAAG,EAAE,CAAC;IAiBlB,CAAC;IAfU,MAAM;QACb,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC;QACpC,MAAM,EAAE,QAAQ,EAAE,GAAG,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QAE1C,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;;sBAEzB,CAAC,MAAM;;;;KAIxB,CAAC;IACJ,CAAC;;AA3Ce,mBAAM,GAAG;IACvB,GAAG,QAAQ,CAAC,MAAM;IAClB,GAAG,CAAA;;;;;KAKF;CACF,AARqB,CAQpB;eATiB,YAAY;AAe/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAChB;AAOX;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAC5B;AAMf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACX;AAmBlB,OAAO,EAAE,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './tag.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAC"}

package/dist/components/tag/index.js

@@ -0,0 +1,14 @@
+import PlusTag from './tag.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import './tag.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-tag', PlusTag);
+
+export { PlusTag };

package/dist/components/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnC,cAAc,UAAU,CAAC;AAEzB,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC"}

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,91 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * A versatile tag component for displaying status, labels, and categories
+ *
+ * @tag plus-tag
+ *
+ * @csspart tag - The container element for the tag
+ *
+ * @cssproperty [--tag-bg-color] - Background color for default state (inherits from --plus-color-background-neutral-default)
+ * @cssproperty [--tag-text-color] - Text color for default state (inherits from --plus-color-text-default)
+ *
+ * @property {('success'|'warning'|'error'|'info'|'default')} status - Defines the tag's visual state and color scheme
+ * @property {('sm'|'md'|'lg')} size - Controls the tag's size variant
+ * @property {boolean} invert - Toggles between light/dark color themes
+ * @property {('full'|'medium'|'none')} radius - Sets the border radius style
+ *
+ * @attribute {string} aria-label - Accessible label for the tag (falls back to text content)
+ * @attribute {string} role - ARIA role (defaults to "status")
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <plus-tag>Default Tag</plus-tag>
+ *
+ * <!-- With status -->
+ * <plus-tag status="success">Success</plus-tag>
+ * <plus-tag status="warning">Warning</plus-tag>
+ * <plus-tag status="error">Error</plus-tag>
+ *
+ * <!-- Size variants -->
+ * <plus-tag size="sm">Small</plus-tag>
+ * <plus-tag size="md">Medium</plus-tag>
+ * <plus-tag size="lg">Large</plus-tag>
+ *
+ * <!-- Border radius options -->
+ * <plus-tag radius="full">Pill Shape</plus-tag>
+ * <plus-tag radius="medium">Rounded</plus-tag>
+ * <plus-tag radius="none">Square</plus-tag>
+ *
+ * <!-- Inverted theme -->
+ * <plus-tag invert>Dark Theme</plus-tag>
+ * ```
+ *
+ * @cssExample
+ * ```css
+ * plus-tag {
+ *   --tag-bg-color: #f0f0f0;
+ *   --tag-text-color: #333333;
+ * }
+ * ```
+ */
+export default class PlusTag extends Tailwind {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Sets the status/color variant of the tag
+     * - default: Neutral color scheme
+     * - primary: Brand color scheme
+     * - success: Green color scheme
+     * - warning: Yellow color scheme
+     * - danger: Red color scheme
+     * - info: Blue color scheme
+     * @default 'default'
+     */
+    status: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * Sets the size of the tag
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Toggles between light/dark color themes
+     * @default false
+     */
+    invert: boolean;
+    /**
+     * Sets the border radius style
+     * - full: Pill shape
+     * - medium: Rounded corners
+     * - none: Square corners
+     * @default 'full'
+     */
+    radius: 'full' | 'medium' | 'none';
+    constructor();
+    get ariaLabel(): string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusTag };
+//# sourceMappingURL=tag.d.ts.map

package/dist/components/tag/tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.ts"],"names":[],"mappings":"AACA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAiC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,QAAQ;IAC3C,OAAgB,MAAM,4BAUpB;IAEF;;;;;;;;;OASG;IAEH,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAC7D;IAEZ;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;;OAGG;IAEH,MAAM,UAAS;IAEf;;;;;;OAMG;IAEH,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAU;;IAM5C,IAAa,SAAS,IAAI,MAAM,CAE/B;IAEQ,MAAM;CAyChB;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}