@codeenvision/ui-webcomponents 1.0.0

package/dist/components/web-components/switch.js

@@ -0,0 +1,321 @@
+import { defineComponentElement, } from "../../src/runtime/component-element.js";
+const DEFAULT_SWITCH_PROPS = {
+    checked: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+    loading: false,
+    size: "md",
+    theme: "light",
+    onLabel: "On",
+    offLabel: "Off",
+    uncheckedValue: "off",
+};
+const SWITCH_PROP_DEFINITIONS = [
+    { attribute: "label", prop: "label" },
+    { attribute: "hint", prop: "hint" },
+    { attribute: "checked", prop: "checked", type: "boolean" },
+    { attribute: "disabled", prop: "disabled", type: "boolean" },
+    { attribute: "readonly", prop: "readonly", type: "boolean" },
+    { attribute: "required", prop: "required", type: "boolean" },
+    { attribute: "loading", prop: "loading", type: "boolean" },
+    { attribute: "size", prop: "size" },
+    { attribute: "theme", prop: "theme" },
+    { attribute: "name", prop: "name" },
+    { attribute: "value", prop: "value" },
+    { attribute: "unchecked-value", prop: "uncheckedValue" },
+    { attribute: "on-label", prop: "onLabel" },
+    { attribute: "off-label", prop: "offLabel" },
+    { attribute: "aria-label", prop: "ariaLabel" },
+    { attribute: "aria-describedby", prop: "ariaDescribedBy" },
+    { attribute: "input-id", prop: "inputId" },
+];
+let switchInstanceCounter = 0;
+const applySwitchParts = (dom) => {
+    dom.container.setAttribute("data-ce-component", "switch");
+    dom.container.setAttribute("part", "base");
+    dom.control.setAttribute("part", "control");
+    dom.slider.setAttribute("part", "slider");
+    const text = dom.container.querySelector(".ce-switch__text");
+    if (text) {
+        text.setAttribute("part", "text");
+    }
+    dom.label.setAttribute("part", "label");
+    dom.state.setAttribute("part", "state");
+    dom.hint.setAttribute("part", "hint");
+    dom.hiddenInput.setAttribute("part", "input");
+};
+const switchComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const dom = createDom(host);
+        applySwitchParts(dom);
+        let currentProps = { ...DEFAULT_SWITCH_PROPS, ...props };
+        let instanceId = currentProps.inputId ?? `ce-switch-${++switchInstanceCounter}`;
+        const notifyChange = () => {
+            const checkedValue = currentProps.value ?? "on";
+            const uncheckedValue = currentProps.uncheckedValue ?? "off";
+            on?.change?.({
+                checked: Boolean(currentProps.checked),
+                value: currentProps.checked ? checkedValue : undefined,
+                uncheckedValue,
+            });
+        };
+        const toggleFromUser = () => {
+            if (currentProps.disabled || currentProps.readonly || currentProps.loading) {
+                return;
+            }
+            currentProps = { ...currentProps, checked: !currentProps.checked };
+            applyProps(dom, currentProps, instanceId);
+            notifyChange();
+        };
+        const handleKeydown = (event) => {
+            if (event.key === " " || event.key === "Enter") {
+                event.preventDefault();
+                toggleFromUser();
+            }
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+                event.preventDefault();
+                const nextChecked = event.key === "ArrowRight";
+                if (currentProps.checked !== nextChecked) {
+                    currentProps = { ...currentProps, checked: nextChecked };
+                    applyProps(dom, currentProps, instanceId);
+                    notifyChange();
+                }
+            }
+        };
+        const handleClick = (event) => {
+            event.preventDefault();
+            toggleFromUser();
+        };
+        dom.control.addEventListener("click", handleClick);
+        dom.control.addEventListener("keydown", handleKeydown);
+        dom.label.addEventListener("click", handleClick);
+        applyProps(dom, currentProps, instanceId);
+        return {
+            destroy() {
+                dom.control.removeEventListener("click", handleClick);
+                dom.control.removeEventListener("keydown", handleKeydown);
+                dom.label.removeEventListener("click", handleClick);
+                host.innerHTML = "";
+            },
+            updateProps(partial) {
+                currentProps = { ...currentProps, ...partial };
+                if (partial?.inputId) {
+                    instanceId = partial.inputId;
+                }
+                applyProps(dom, currentProps, instanceId);
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_SWITCH_PROPS, ...props };
+        const classes = buildClassNames(merged);
+        const stateLabel = (merged.checked ? merged.onLabel : merged.offLabel) ?? "";
+        const showState = Boolean(merged.onLabel || merged.offLabel);
+        const labelMarkup = merged.label
+            ? `<span class="ce-switch__label" part="label" id="ssr-label">${escapeHtml(merged.label)}</span>`
+            : "";
+        const stateMarkup = showState
+            ? `<span class="ce-switch__state-label" part="state">${escapeHtml(stateLabel)}</span>`
+            : "";
+        const hintMarkup = merged.hint
+            ? `<span class="ce-switch__hint" part="hint">${escapeHtml(merged.hint)}</span>`
+            : "";
+        const ariaLabel = merged.ariaLabel ?? (merged.label ? undefined : "Toggle switch");
+        const ariaLabelAttr = ariaLabel ? ` aria-label="${escapeHtml(ariaLabel)}"` : " aria-labelledby=\"ssr-label\"";
+        return `<div class="${classes}" data-ce-component="switch" part="base" role="presentation">
+  <button type="button" class="ce-switch__control" part="control" role="switch" aria-checked="${merged.checked ? "true" : "false"}"${ariaLabelAttr}>
+    <span class="ce-switch__slider" part="slider" aria-hidden="true"></span>
+  </button>
+  <div class="ce-switch__text" part="text">
+    ${labelMarkup}
+    ${stateMarkup}
+    ${hintMarkup}
+  </div>
+  <input class="ce-switch__input" part="input" type="checkbox" ${merged.checked ? "checked" : ""} ${merged.disabled ? "disabled" : ""} value="${escapeHtml(merged.value ?? "on")}" hidden />
+</div>`;
+    },
+};
+export function registerSwitchElement() {
+    const ctor = defineComponentElement({
+        tag: "ce-switch",
+        component: switchComponent,
+        props: SWITCH_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_SWITCH_PROPS,
+        events: ["change"],
+        shadow: false,
+        preserveLightDom: true,
+    });
+    attachSwitchHelpers(ctor);
+    return ctor;
+}
+function createDom(host) {
+    const existing = findExistingDom(host);
+    if (existing) {
+        return existing;
+    }
+    const container = document.createElement("div");
+    container.className = "ce-switch";
+    const control = document.createElement("button");
+    control.type = "button";
+    control.className = "ce-switch__control";
+    control.setAttribute("role", "switch");
+    control.setAttribute("aria-live", "polite");
+    const slider = document.createElement("span");
+    slider.className = "ce-switch__slider";
+    slider.setAttribute("aria-hidden", "true");
+    control.appendChild(slider);
+    const text = document.createElement("div");
+    text.className = "ce-switch__text";
+    const label = document.createElement("span");
+    label.className = "ce-switch__label";
+    const state = document.createElement("span");
+    state.className = "ce-switch__state-label";
+    const hint = document.createElement("span");
+    hint.className = "ce-switch__hint";
+    text.append(label, state, hint);
+    const hiddenInput = document.createElement("input");
+    hiddenInput.type = "checkbox";
+    hiddenInput.className = "ce-switch__input";
+    hiddenInput.hidden = true;
+    container.append(control, text, hiddenInput);
+    host.append(container);
+    return { container, control, slider, label, state, hint, hiddenInput };
+}
+function findExistingDom(host) {
+    const container = host.querySelector(".ce-switch");
+    if (!container) {
+        return null;
+    }
+    const control = container.querySelector(".ce-switch__control");
+    const slider = container.querySelector(".ce-switch__slider");
+    const label = container.querySelector(".ce-switch__label");
+    const state = container.querySelector(".ce-switch__state-label");
+    const hint = container.querySelector(".ce-switch__hint");
+    const hiddenInput = container.querySelector(".ce-switch__input");
+    if (!control || !slider || !label || !state || !hint || !hiddenInput) {
+        return null;
+    }
+    return { container, control, slider, label, state, hint, hiddenInput };
+}
+function applyProps(dom, props, id) {
+    const merged = { ...DEFAULT_SWITCH_PROPS, ...props };
+    const checked = Boolean(merged.checked);
+    const disabled = Boolean(merged.disabled || merged.loading);
+    const readonly = Boolean(merged.readonly);
+    dom.container.className = buildClassNames(merged);
+    dom.container.dataset.state = checked ? "on" : "off";
+    dom.container.dataset.size = merged.size ?? "md";
+    dom.container.toggleAttribute("data-disabled", disabled);
+    dom.control.setAttribute("aria-checked", checked ? "true" : "false");
+    dom.control.setAttribute("aria-disabled", disabled ? "true" : "false");
+    dom.control.setAttribute("aria-readonly", readonly ? "true" : "false");
+    if (merged.ariaDescribedBy) {
+        dom.control.setAttribute("aria-describedby", merged.ariaDescribedBy);
+    }
+    else {
+        dom.control.removeAttribute("aria-describedby");
+    }
+    if (merged.ariaLabel) {
+        dom.control.setAttribute("aria-label", merged.ariaLabel);
+        dom.control.removeAttribute("aria-labelledby");
+    }
+    else if (merged.label) {
+        dom.control.setAttribute("aria-labelledby", `${id}-label`);
+        dom.control.removeAttribute("aria-label");
+    }
+    else {
+        dom.control.setAttribute("aria-label", "Toggle switch");
+        dom.control.removeAttribute("aria-labelledby");
+    }
+    dom.control.tabIndex = disabled ? -1 : 0;
+    dom.control.disabled = disabled;
+    dom.hiddenInput.checked = checked;
+    dom.hiddenInput.disabled = disabled;
+    dom.hiddenInput.required = Boolean(merged.required);
+    dom.hiddenInput.id = `${id}-input`;
+    dom.hiddenInput.value = merged.value ?? "on";
+    if (merged.name) {
+        dom.hiddenInput.name = merged.name;
+    }
+    else {
+        dom.hiddenInput.removeAttribute("name");
+    }
+    dom.label.textContent = merged.label ?? "";
+    dom.label.id = `${id}-label`;
+    dom.label.toggleAttribute("hidden", !merged.label);
+    const showState = Boolean(merged.onLabel || merged.offLabel);
+    if (showState) {
+        dom.state.textContent = checked ? merged.onLabel ?? "On" : merged.offLabel ?? "Off";
+    }
+    else {
+        dom.state.textContent = "";
+    }
+    dom.state.toggleAttribute("hidden", !showState);
+    dom.hint.textContent = merged.hint ?? "";
+    dom.hint.toggleAttribute("hidden", !merged.hint);
+}
+function buildClassNames(props) {
+    const classes = ["ce-switch"];
+    const size = props.size ?? "md";
+    if (size && size !== "md") {
+        classes.push(`ce-switch--${size}`);
+    }
+    if (props.theme === "dark") {
+        classes.push("ce-switch--dark");
+    }
+    if (props.checked) {
+        classes.push("is-checked");
+    }
+    if (props.disabled || props.loading) {
+        classes.push("is-disabled");
+    }
+    if (props.loading) {
+        classes.push("is-loading");
+    }
+    return classes.join(" ");
+}
+const HTML_ESCAPE_LOOKUP = {
+    "&": "&amp;",
+    "\"": "&quot;",
+    "'": "&#39;",
+    "<": "&lt;",
+    ">": "&gt;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&"'<>]/g, (char) => HTML_ESCAPE_LOOKUP[char] ?? char);
+}
+const SWITCH_HELPERS_FLAG = Symbol.for("ce-ui.switch.helpers");
+function attachSwitchHelpers(ctor) {
+    if (!ctor) {
+        return;
+    }
+    const proto = ctor.prototype;
+    if (proto[SWITCH_HELPERS_FLAG]) {
+        return;
+    }
+    Object.defineProperty(proto, "checked", {
+        get() {
+            const container = this.querySelector(".ce-switch");
+            if (container) {
+                return container.classList.contains("is-checked");
+            }
+            return Boolean(this.props?.checked);
+        },
+        set(value) {
+            this.props = { checked: Boolean(value) };
+        },
+        configurable: true,
+    });
+    Object.defineProperty(proto, "toggle", {
+        value() {
+            this.props = { checked: !Boolean(this.props?.checked) };
+        },
+        configurable: true,
+    });
+    Object.defineProperty(proto, SWITCH_HELPERS_FLAG, {
+        value: true,
+    });
+}
+//# sourceMappingURL=switch.js.map

package/dist/components/web-components/switch.js.map

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

package/dist/components/web-components/tab-layout.d.ts

@@ -0,0 +1,11 @@
+import type { TabLayoutChangePayload, TabLayoutClosePayload, TabLayoutOptions, TabLayoutTab } from "../TabLayout/TabLayout.types.js";
+export interface TabLayoutProps extends Omit<TabLayoutOptions, "selector" | "onChange" | "onClose" | "onAdd">, Record<string, unknown> {
+    tabs: TabLayoutTab[];
+    onAdd?: TabLayoutOptions["onAdd"];
+}
+export interface TabLayoutChangeDetail extends TabLayoutChangePayload {
+}
+export interface TabLayoutCloseDetail extends TabLayoutClosePayload {
+}
+export declare function registerTabLayoutElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=tab-layout.d.ts.map

package/dist/components/web-components/tab-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-layout.d.ts","sourceRoot":"","sources":["../../../components/web-components/tab-layout.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,sBAAsB,EACtB,qBAAqB,EACrB,gBAAgB,EAChB,YAAY,EACb,MAAM,iCAAiC,CAAC;AAIzC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC,EAC3E,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,qBAAsB,SAAQ,sBAAsB;CAAG;AACxE,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;CAAG;AAuJtE,wBAAgB,wBAAwB,IAAI,wBAAwB,GAAG,SAAS,CAU/E"}

package/dist/components/web-components/tab-layout.js

@@ -0,0 +1,157 @@
+import { TabLayout } from "../TabLayout/TabLayout.js";
+import { defineComponentElement } from "../../src/runtime/component-element.js";
+import { readDataAttr, readNumberDataAttr, shouldUseDomValue } from "./utils/hydration.js";
+const DEFAULT_TABLAYOUT_PROPS = {
+    tabs: [],
+    defaultIndex: 0,
+    allowAdd: false,
+};
+const TABLAYOUT_PROP_DEFINITIONS = [
+    { attribute: "tabs", prop: "tabs", type: "json" },
+    { attribute: "default-index", prop: "defaultIndex", type: "number" },
+    { attribute: "allow-add", prop: "allowAdd", type: "boolean" },
+];
+let tabLayoutId = 0;
+const applyTabLayoutParts = (wrapper) => {
+    wrapper.setAttribute("data-ce-component", "tab-layout");
+    wrapper.setAttribute("part", "base");
+    wrapper.querySelectorAll(".ce-tablayout__header").forEach((node) => { node.setAttribute("part", "header"); node.setAttribute("data-ce-slot", "header"); });
+    wrapper.querySelectorAll(".ce-tablayout__list").forEach((node) => node.setAttribute("part", "list"));
+    wrapper.querySelectorAll(".ce-tablayout__add").forEach((node) => node.setAttribute("part", "add"));
+    wrapper.querySelectorAll(".ce-tablayout__item").forEach((node) => node.setAttribute("part", "item"));
+    wrapper.querySelectorAll(".ce-tablayout__tab").forEach((node) => node.setAttribute("part", "tab"));
+    wrapper.querySelectorAll(".ce-tablayout__label").forEach((node) => node.setAttribute("part", "label"));
+    wrapper.querySelectorAll(".ce-tablayout__close").forEach((node) => node.setAttribute("part", "close"));
+    wrapper.querySelectorAll(".ce-tablayout__body").forEach((node) => node.setAttribute("part", "body"));
+    wrapper.querySelectorAll(".ce-tablayout__panel").forEach((node) => node.setAttribute("part", "panel"));
+};
+const tabLayoutComponent = {
+    mount({ target, props, on }) {
+        const host = target;
+        const existingWrapper = host.querySelector(".ce-tablayout");
+        const elementId = existingWrapper?.id || `ce-tablayout-${++tabLayoutId}`;
+        let wrapper = existingWrapper ?? undefined;
+        let currentProps = { ...DEFAULT_TABLAYOUT_PROPS, ...props };
+        if (existingWrapper) {
+            const dataTabs = readDataAttr(existingWrapper, "tabs");
+            if (shouldUseDomValue(host, "tabs", dataTabs)) {
+                try {
+                    currentProps.tabs = JSON.parse(dataTabs ?? "[]");
+                }
+                catch {
+                    currentProps.tabs = DEFAULT_TABLAYOUT_PROPS.tabs;
+                }
+            }
+            else if (!currentProps.tabs?.length) {
+                currentProps.tabs = Array.from(existingWrapper.querySelectorAll(".ce-tablayout__panel")).map((panel, index) => ({
+                    id: panel.id || `ce-tablayout-${index}`,
+                    label: existingWrapper.querySelector(`.ce-tablayout__tab[data-index="${index}"] .ce-tablayout__label`)
+                        ?.textContent ?? `Tab ${index + 1}`,
+                    content: panel.innerHTML,
+                }));
+            }
+            const dataDefault = readNumberDataAttr(existingWrapper, "default-index");
+            if (shouldUseDomValue(host, "default-index", dataDefault)) {
+                currentProps.defaultIndex = dataDefault ?? DEFAULT_TABLAYOUT_PROPS.defaultIndex;
+            }
+            const dataAllowAdd = readDataAttr(existingWrapper, "allow-add");
+            if (shouldUseDomValue(host, "allow-add", dataAllowAdd)) {
+                currentProps.allowAdd = dataAllowAdd === "true";
+            }
+            else if (shouldUseDomValue(host, "allow-add", existingWrapper.querySelector(".ce-tablayout__add") ? "true" : "false")) {
+                currentProps.allowAdd = Boolean(existingWrapper.querySelector(".ce-tablayout__add"));
+            }
+        }
+        let instance;
+        const destroy = () => {
+            instance?.destroy?.();
+            instance = undefined;
+            if (!existingWrapper) {
+                host.innerHTML = "";
+            }
+        };
+        const updateProps = (partial) => {
+            currentProps = { ...currentProps, ...partial };
+            instance?.destroy?.();
+            render();
+        };
+        function createInstance(container, propsToUse) {
+            if (!propsToUse.tabs?.length) {
+                container.innerHTML = "";
+                return undefined;
+            }
+            const instance = new TabLayout({
+                ...propsToUse,
+                selector: `#${elementId}`,
+                hydrate: Boolean(container && container === existingWrapper),
+                onChange: (payload) => on?.change?.(payload),
+                onClose: (payload) => on?.close?.(payload),
+                onAdd: propsToUse.onAdd,
+            });
+            instance.init();
+            return instance;
+        }
+        const render = () => {
+            if (!wrapper) {
+                host.innerHTML = "";
+                wrapper = document.createElement("div");
+                wrapper.id = elementId;
+                host.appendChild(wrapper);
+            }
+            else {
+                if (!wrapper.id) {
+                    wrapper.id = elementId;
+                }
+                if (!wrapper.classList.contains("ce-tablayout")) {
+                    wrapper.classList.add("ce-tablayout");
+                }
+            }
+            applyTabLayoutParts(wrapper);
+            instance?.destroy?.();
+            instance = createInstance(wrapper, currentProps);
+        };
+        render();
+        return {
+            destroy,
+            updateProps(partial) {
+                updateProps(partial ?? {});
+            },
+        };
+    },
+    renderToString(props) {
+        const merged = { ...DEFAULT_TABLAYOUT_PROPS, ...props };
+        const tabs = merged.tabs?.map((tab, index) => renderTab(tab, index)).join("") ?? "";
+        const panels = merged.tabs
+            ?.map((tab, index) => `<section class="ce-tablayout__panel" part="panel" id="${escapeHtml(tab.id ?? `ce-tablayout-${index}`)}-panel" role="tabpanel" aria-labelledby="${escapeHtml(tab.id ?? `ce-tablayout-${index}`)}-trigger">${tab.content ?? ""}</section>`)
+            .join("") ?? "";
+        const addButton = merged.allowAdd ? `<button class="ce-tablayout__add" part="add" aria-label="Add tab">+</button>` : "";
+        const dataAttrs = ` data-tabs="${escapeHtml(JSON.stringify(merged.tabs ?? []))}" data-default-index="${merged.defaultIndex ?? 0}" data-allow-add="${merged.allowAdd ? "true" : "false"}"`;
+        return `<div class="ce-tablayout" data-ce-component="tab-layout" part="base"${dataAttrs}><div class="ce-tablayout__header" part="header" data-ce-slot="header"><div class="ce-tablayout__list" part="list" role="tablist">${tabs}</div>${addButton}</div><div class="ce-tablayout__body" part="body">${panels}</div></div>`;
+    },
+};
+export function registerTabLayoutElement() {
+    return defineComponentElement({
+        tag: "ce-tab-layout",
+        component: tabLayoutComponent,
+        props: TABLAYOUT_PROP_DEFINITIONS,
+        defaultProps: DEFAULT_TABLAYOUT_PROPS,
+        shadow: false,
+        events: ["change", "close"],
+        preserveLightDom: true,
+    });
+}
+function renderTab(tab, index) {
+    const id = tab.id ?? `ce-tablayout-${index}`;
+    const disabled = tab.disabled ? ' aria-disabled="true"' : "";
+    const close = tab.closable === false || tab.disabled
+        ? ""
+        : `<button type="button" class="ce-tablayout__close" part="close" aria-label="Close ${escapeHtml(tab.label)}">×</button>`;
+    return `<div class="ce-tablayout__item" part="item"><div class="ce-tablayout__tab" part="tab" id="${escapeHtml(id)}-trigger" role="tab" aria-controls="${escapeHtml(id)}-panel" data-index="${index}"${disabled}><span class="ce-tablayout__label" part="label">${escapeHtml(tab.label)}</span></div>${close}</div>`;
+}
+const escapeHtml = (value) => value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+//# sourceMappingURL=tab-layout.js.map

package/dist/components/web-components/tab-layout.js.map

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

package/dist/components/web-components/table.d.ts

@@ -0,0 +1,8 @@
+import type { TableOptions } from "../Table/Table.types.js";
+export interface TableProps extends Omit<TableOptions, "selector">, Record<string, unknown> {
+}
+export interface TableUpdateDetail {
+    data: Record<string, unknown>[];
+}
+export declare function registerTableElement(): CustomElementConstructor | undefined;
+//# sourceMappingURL=table.d.ts.map

package/dist/components/web-components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../components/web-components/table.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAI5D,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAAG;AAE9F,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;CACjC;AAqKD,wBAAgB,oBAAoB,IAAI,wBAAwB,GAAG,SAAS,CAU3E"}