@bspk/ui 1.1.34 → 1.2.0

package/dist/components/TabGroup/tab-group.css

@@ -1,67 +1,30 @@
-[data-bspk=tab-group] {
-  display: flex;
-  flex-direction: row;
-  --btn-flex-grow: 0;
-  border-bottom: 1px solid var(--stroke-neutral-low);
-  width: 100%;
-  --font: var(--labels-base);
-  --height: var(--spacing-sizing-10);
-}
-[data-bspk=tab-group][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
-}
-[data-bspk=tab-group][data-size=small] {
-  --font: var(--labels-small);
-  --height: var(--spacing-sizing-08);
-}
-[data-bspk=tab-group][data-size=large] {
-  --font: var(--labels-large);
-  --height: var(--spacing-sizing-12);
+ul[data-bspk=tab-group] {
+  border-bottom: none;
 }
-[data-bspk=tab-group] button {
+ul[data-bspk=tab-group] li {
   border: 0;
-  cursor: pointer;
   color: var(--foreground-neutral-on-surface-variant-02);
   background: none;
-  flex-grow: var(--btn-flex-grow);
-  font: var(--font);
-  white-space: nowrap;
+  border-bottom: 1px solid var(--stroke-neutral-low);
+  position: relative;
+  padding: 0 var(--spacing-sizing-04);
 }
-[data-bspk=tab-group] button:hover {
+ul[data-bspk=tab-group] li:not([aria-disabled])[data-active] {
   background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=tab-group] button:active {
+ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=tab-group] button:disabled {
-  pointer-events: none;
+ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=tab-group] button:focus-visible {
-  outline: solid 2px var(--stroke-neutral-focus);
-}
-[data-bspk=tab-group] button span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0 var(--spacing-sizing-04);
-  height: var(--height);
-  justify-content: center;
-  position: relative;
-  gap: var(--spacing-sizing-02);
-}
-[data-bspk=tab-group] button span svg {
-  width: var(--spacing-sizing-05);
-}
-[data-bspk=tab-group] button[data-active] {
+ul[data-bspk=tab-group] li[aria-selected] {
   color: var(--foreground-brand-primary);
 }
-[data-bspk=tab-group] button[data-active] span::after {
+ul[data-bspk=tab-group] li[aria-selected]::after {
   content: "";
   display: block;
-  width: 100%;
+  width: calc(100% - var(--spacing-sizing-04) * 2);
   height: 2px;
   background-color: var(--stroke-brand-primary);
   bottom: -1px;
@@ -69,14 +32,15 @@
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-[data-bspk=tab-group] button[data-active] span svg {
+ul[data-bspk=tab-group] li[aria-selected] svg {
   color: var(--surface-brand-primary);
 }
-[data-bspk=tab-group][data-hide-trail] {
-  border-bottom: none;
-}
-[data-bspk=tab-group][data-hide-trail] button {
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
+  width: 100%;
   border-bottom: 1px solid var(--stroke-neutral-low);
 }
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
+  border-bottom: none;
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

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

@@ -1,70 +1,33 @@
 /** * This file is generated by the build script.
 * Do not edit this file directly. */
 const style = document.createElement('style');
-style.appendChild(document.createTextNode(`[data-bspk=tab-group] {
-  display: flex;
-  flex-direction: row;
-  --btn-flex-grow: 0;
-  border-bottom: 1px solid var(--stroke-neutral-low);
-  width: 100%;
-  --font: var(--labels-base);
-  --height: var(--spacing-sizing-10);
-}
-[data-bspk=tab-group][data-width=fill] {
-  align-items: stretch;
-  width: 100%;
-  --btn-flex-grow: 1;
-}
-[data-bspk=tab-group][data-size=small] {
-  --font: var(--labels-small);
-  --height: var(--spacing-sizing-08);
-}
-[data-bspk=tab-group][data-size=large] {
-  --font: var(--labels-large);
-  --height: var(--spacing-sizing-12);
+style.appendChild(document.createTextNode(`ul[data-bspk=tab-group] {
+  border-bottom: none;
 }
-[data-bspk=tab-group] button {
+ul[data-bspk=tab-group] li {
   border: 0;
-  cursor: pointer;
   color: var(--foreground-neutral-on-surface-variant-02);
   background: none;
-  flex-grow: var(--btn-flex-grow);
-  font: var(--font);
-  white-space: nowrap;
+  border-bottom: 1px solid var(--stroke-neutral-low);
+  position: relative;
+  padding: 0 var(--spacing-sizing-04);
 }
-[data-bspk=tab-group] button:hover {
+ul[data-bspk=tab-group] li:not([aria-disabled])[data-active] {
   background: var(--interactions-neutral-hover-opacity);
 }
-[data-bspk=tab-group] button:active {
+ul[data-bspk=tab-group] li:not([aria-disabled]):active {
   background: var(--interactions-neutral-press-opacity);
 }
-[data-bspk=tab-group] button:disabled {
-  pointer-events: none;
+ul[data-bspk=tab-group] li[aria-disabled] {
   color: var(--foreground-neutral-disabled-on-surface);
 }
-[data-bspk=tab-group] button:focus-visible {
-  outline: solid 2px var(--stroke-neutral-focus);
-}
-[data-bspk=tab-group] button span {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0 var(--spacing-sizing-04);
-  height: var(--height);
-  justify-content: center;
-  position: relative;
-  gap: var(--spacing-sizing-02);
-}
-[data-bspk=tab-group] button span svg {
-  width: var(--spacing-sizing-05);
-}
-[data-bspk=tab-group] button[data-active] {
+ul[data-bspk=tab-group] li[aria-selected] {
   color: var(--foreground-brand-primary);
 }
-[data-bspk=tab-group] button[data-active] span::after {
+ul[data-bspk=tab-group] li[aria-selected]::after {
   content: "";
   display: block;
-  width: 100%;
+  width: calc(100% - var(--spacing-sizing-04) * 2);
   height: 2px;
   background-color: var(--stroke-brand-primary);
   bottom: -1px;
@@ -72,17 +35,17 @@ style.appendChild(document.createTextNode(`[data-bspk=tab-group] {
   border-top-right-radius: 2px;
   border-top-left-radius: 2px;
 }
-[data-bspk=tab-group] button[data-active] span svg {
+ul[data-bspk=tab-group] li[aria-selected] svg {
   color: var(--surface-brand-primary);
 }
-[data-bspk=tab-group][data-hide-trail] {
-  border-bottom: none;
-}
-[data-bspk=tab-group][data-hide-trail] button {
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] {
+  width: 100%;
   border-bottom: 1px solid var(--stroke-neutral-low);
 }
+ul[data-bspk=tab-group][data-show-trail][data-width=hug] li {
+  border-bottom: none;
+}
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-

package/dist/components/TabList/TabList.d.ts

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react';
+import { ElementProps } from '-/types/common';
+import './tab-list.scss';
+export type TabSize = 'large' | 'medium' | 'small';
+export type TabOption = {
+    /**
+     * The label of the tab. This is the text that will be displayed on the tab.
+     *
+     * @required
+     */
+    label: string;
+    /**
+     * Determines if the element is [disabled](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled).
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The value of the tab sent to onChange when selected.
+     *
+     * If not provided, the label will be used as the value.
+     */
+    value: string;
+    /**
+     * The icon to display on the left side of the tab.
+     *
+     * @type BspkIcon
+     */
+    icon?: ReactNode;
+    /**
+     * The icon to display on the left side of the tab when the tab is currently selected.
+     *
+     * @type BspkIcon
+     */
+    iconSelected?: ReactNode;
+    /** The badge count to display on the tab */
+    badge?: number;
+};
+export type TabListProps<O extends TabOption = TabOption> = {
+    /**
+     * The tabs to display.
+     *
+     * If **less than 2** items are provided, the component will not render.
+     *
+     * @example
+     *     [
+     *         { value: '1', label: 'Option 1' },
+     *         { value: '2', label: 'Disabled 2 ', disabled: true },
+     *         { value: '3', label: 'Option 3' },
+     *     ];
+     *
+     * @type Array<TabOption>
+     * @required
+     */
+    options: O[];
+    /**
+     * The value of the selected tab.
+     *
+     * @example
+     *     1;
+     *
+     * @required
+     */
+    value: TabOption['value'];
+    /**
+     * The function to call when the tab is clicked.
+     *
+     * @required
+     */
+    onChange: (tabValue: string) => void;
+    /**
+     * The size of the tabs.
+     *
+     * @default medium
+     */
+    size?: TabSize;
+    /**
+     * When 'fill' the options will fill the width of the container. When 'hug', the options will be as wide as their
+     * content.
+     *
+     * @default hug
+     */
+    width?: 'fill' | 'hug';
+    /**
+     * The label for the tab utility, used for accessibility.
+     *
+     * @required
+     */
+    label: string;
+    /** The id of the tab utility, used for accessibility. */
+    id?: string;
+    /**
+     * Determines if the labels of the options should be displayed. If icons are not provided for every option this is
+     * ignored and labels are shown.
+     *
+     * @default false
+     */
+    iconsOnly?: boolean;
+};
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabList } from '@bspk/ui/TabList';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabList
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabList
+ * @phase Utility
+ */
+export declare function TabList({ onChange, value: valueProp, size, options: optionsProp, width, label, id: idProp, iconsOnly: iconsOnlyProp, ...containerProps }: ElementProps<TabListProps, 'ul'>): import("react/jsx-runtime").JSX.Element;
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabList/TabList.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useMemo } from 'react';
+import { Badge } from '../Badge';
+import { Tooltip } from '../Tooltip';
+import { Truncated } from '../Truncated';
+import { useId } from '../../hooks/useId';
+import { useKeyNavigation } from '../../hooks/useKeyNavigation';
+import './tab-list.css.js';
+const TAB_BADGE_SIZES = {
+    large: 'small',
+    medium: 'x-small',
+    small: 'x-small',
+};
+const optionId = (id, index) => `${id}-item-${index + 1}`;
+/**
+ * Navigation tool that organizes content across different screens and views.
+ *
+ * See TabGroup or SegmentedControl for examples.
+ *
+ * @example
+ *     import { useState } from 'react';
+ *     import { TabList } from '@bspk/ui/TabList';
+ *
+ *     export function Example() {
+ *         const [selectedTab, setSelectedTab] = useState<string>();
+ *
+ *         return (
+ *             <TabList
+ *                 onChange={setSelectedTab}
+ *                 options={[
+ *                     { value: '1', label: 'Option 1' },
+ *                     { value: '2', label: 'Option 2' },
+ *                     { value: '3', label: 'Option 3' },
+ *                 ]}
+ *                 value={selectedTab}
+ *             />
+ *         );
+ *     }
+ *
+ * @name TabList
+ * @phase Utility
+ */
+export function TabList({ 
+//
+onChange, value: valueProp, size = 'medium', options: optionsProp, width = 'hug', label, id: idProp, iconsOnly: iconsOnlyProp = false, ...containerProps }) {
+    const id = useId(idProp);
+    const options = useMemo(() => {
+        if (!Array.isArray(optionsProp))
+            return [];
+        return optionsProp.map((opt, index) => ({ ...opt, id: optionId(id, index) }));
+    }, [id, optionsProp]);
+    const value = useMemo(() => {
+        const option = options.find((opt) => opt.value === valueProp);
+        return option ? option.value : options[0]?.value;
+    }, [options, valueProp]);
+    const { handleKeyDown, activeElementId, setElements, setActiveElementId } = useKeyNavigation({
+        onSelect: (nextActiveId) => {
+            onChange(options.find((opt) => opt.id === nextActiveId)?.value || '');
+        },
+    });
+    // If all options have icons, we can hide the labels
+    const iconsOnly = iconsOnlyProp === true && options.every((item) => item.icon && item.label);
+    const handleClick = (item) => (e) => {
+        setTimeout(() => e.target.focus(), 100);
+        setActiveElementId(item.id);
+        if (!item.disabled)
+            onChange(item.value);
+    };
+    return (_jsx("ul", { ...containerProps, "aria-label": label, "data-bspk-utility": "tab-list", "data-hug": width === 'hug' || undefined, "data-size": size, "data-width": width, id: id, ref: (node) => {
+            if (node) {
+                const newElements = Array.from(node.children).filter((el) => !el.hasAttribute('aria-disabled'));
+                setElements(newElements);
+            }
+        }, role: "tablist", children: options.map((item) => {
+            const isSelected = item.value === value;
+            const icon = isSelected ? item.iconSelected : item.icon;
+            return (_jsx(Fragment, { children: _jsx(Tooltip, { disabled: !iconsOnly, label: item.label, placement: "top", children: (triggerProps) => (_jsxs("li", { "aria-controls": id, "aria-disabled": item.disabled || undefined, "aria-selected": isSelected || undefined, "data-active": activeElementId === item.id || undefined, "data-value": item.value, id: item.id, onClick: handleClick(item), onKeyDown: handleKeyDown, role: "tab", tabIndex: isSelected ? 0 : -1, ...triggerProps, children: [icon && _jsx("span", { "aria-hidden": "true", children: icon }), !iconsOnly && _jsx(Truncated, { "data-label": true, children: item.label }), item.badge && !item.disabled && (_jsx(Badge, { count: item.badge, size: TAB_BADGE_SIZES[size] }))] })) }) }, item.id));
+        }) }));
+}
+//# sourceMappingURL=TabList.js.map

package/dist/components/TabList/TabList.js.map

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

package/dist/components/TabList/TabListExample.d.ts

@@ -0,0 +1,3 @@
+import { TabListProps } from './TabList';
+import { ComponentExample } from '-/utils/demo';
+export declare const TabListExample: ComponentExample<TabListProps>;

package/dist/components/TabList/TabListExample.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const TabListExample = {
+    containerStyle: { width: '100%' },
+    render: ({ props, Component }) => _jsx(Component, { ...props }),
+};
+//# sourceMappingURL=TabListExample.js.map

package/dist/components/TabList/TabListExample.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListExample.js","sourceRoot":"","sources":["../../../src/components/TabList/TabListExample.tsx"],"names":[],"mappings":";AAGA,MAAM,CAAC,MAAM,cAAc,GAAmC;IAC1D,cAAc,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;IACjC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,KAAK,GAAI;CAC7D,CAAC"}

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

@@ -0,0 +1 @@
+export * from './TabList';

package/dist/components/TabList/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TabList/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/components/TabList/tab-list.css

@@ -0,0 +1,64 @@
+ul[data-bspk-utility=tab-list] {
+  --item-flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  width: fit-content;
+  height: var(--height);
+  font: var(--font);
+  --icon-size: var(--spacing-sizing-05);
+  --font: var(--labels-base);
+  --height: var(--spacing-sizing-10);
+}
+ul[data-bspk-utility=tab-list][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --item-flex-grow: 1;
+}
+ul[data-bspk-utility=tab-list][data-size=small] {
+  --font: var(--labels-small);
+  --height: var(--spacing-sizing-08);
+  --icon-size: var(--spacing-sizing-04);
+}
+ul[data-bspk-utility=tab-list][data-size=large] {
+  --font: var(--labels-large);
+  --height: var(--spacing-sizing-12);
+  --icon-size: var(--spacing-sizing-06);
+}
+ul[data-bspk-utility=tab-list]:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: 2px;
+}
+ul[data-bspk-utility=tab-list] li {
+  list-style: none;
+  cursor: pointer;
+  flex-grow: var(--item-flex-grow);
+  font: var(--font);
+  white-space: nowrap;
+  outline: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-02);
+}
+ul[data-bspk-utility=tab-list] li[aria-disabled] {
+  cursor: not-allowed;
+}
+ul[data-bspk-utility=tab-list] li span {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+ul[data-bspk-utility=tab-list] li [data-label][style] {
+  justify-content: left;
+  max-width: 200px !important;
+}
+ul[data-bspk-utility=tab-list] li svg {
+  width: var(--icon-size);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/components/TabList/tab-list.css.js

@@ -0,0 +1,69 @@
+/** * This file is generated by the build script.
+* Do not edit this file directly. */
+const style = document.createElement('style');
+style.appendChild(document.createTextNode(`ul[data-bspk-utility=tab-list] {
+  --item-flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  width: fit-content;
+  height: var(--height);
+  font: var(--font);
+  --icon-size: var(--spacing-sizing-05);
+  --font: var(--labels-base);
+  --height: var(--spacing-sizing-10);
+}
+ul[data-bspk-utility=tab-list][data-width=fill] {
+  align-items: stretch;
+  width: 100%;
+  --item-flex-grow: 1;
+}
+ul[data-bspk-utility=tab-list][data-size=small] {
+  --font: var(--labels-small);
+  --height: var(--spacing-sizing-08);
+  --icon-size: var(--spacing-sizing-04);
+}
+ul[data-bspk-utility=tab-list][data-size=large] {
+  --font: var(--labels-large);
+  --height: var(--spacing-sizing-12);
+  --icon-size: var(--spacing-sizing-06);
+}
+ul[data-bspk-utility=tab-list]:has(:focus-visible) {
+  outline: 2px solid var(--stroke-neutral-focus);
+  outline-offset: 2px;
+}
+ul[data-bspk-utility=tab-list] li {
+  list-style: none;
+  cursor: pointer;
+  flex-grow: var(--item-flex-grow);
+  font: var(--font);
+  white-space: nowrap;
+  outline: none;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sizing-02);
+}
+ul[data-bspk-utility=tab-list] li[aria-disabled] {
+  cursor: not-allowed;
+}
+ul[data-bspk-utility=tab-list] li span {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+ul[data-bspk-utility=tab-list] li [data-label][style] {
+  justify-content: left;
+  max-width: 200px !important;
+}
+ul[data-bspk-utility=tab-list] li svg {
+  width: var(--icon-size);
+}
+
+/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
+`));
+document.head.appendChild(style);

package/dist/components/Table/Footer.d.ts

@@ -0,0 +1,8 @@
+export declare function TableFooter({ pageIndex, pageSize, setPageIndex, totalRows, id, totalPages, }: {
+    pageIndex: number;
+    pageSize: number;
+    setPageIndex: (newVal: number) => void;
+    totalRows: number;
+    id: string;
+    totalPages: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Footer.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Pagination } from '../Pagination';
+export function TableFooter({ pageIndex, pageSize, setPageIndex, totalRows, id, totalPages, }) {
+    const startRow = totalRows === 0 ? 0 : pageIndex * pageSize + 1;
+    const endRow = Math.min(startRow + pageSize - 1, totalRows);
+    return (_jsxs("div", { "data-pagination": true, role: "group", children: [_jsxs("div", { "data-pagination-label": true, children: ["Showing ", startRow, "-", endRow, " of ", totalRows, " results"] }), _jsx("div", { "data-sr-only": true, id: `${id}-pagination-description`, children: _jsxs("p", { children: ["The buttons inside this control allow you to paginate through the data in the table above,", pageSize, "rows at a time."] }) }), _jsx(Pagination, { "aria-labelledby": `${id}-pagination-description`, numPages: totalPages, onChange: (newVal) => setPageIndex(newVal - 1), value: pageIndex + 1 })] }));
+}
+//# sourceMappingURL=Footer.js.map

package/dist/components/Table/Footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/Table/Footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,MAAM,UAAU,WAAW,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,EAAE,EACF,UAAU,GAQb;IACG,MAAM,QAAQ,GAAG,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAC;IAChE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,GAAG,QAAQ,GAAG,CAAC,EAAE,SAAS,CAAC,CAAC;IAC5D,OAAO,CACH,wCAAqB,IAAI,EAAC,OAAO,aAC7B,qEACa,QAAQ,OAAG,MAAM,UAAM,SAAS,gBACvC,EACN,oCAAkB,EAAE,EAAE,GAAG,EAAE,yBAAyB,YAChD,sHAEK,QAAQ,uBAET,GACF,EACN,KAAC,UAAU,uBACU,GAAG,EAAE,yBAAyB,EAC/C,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC,CAAC,EAC9C,KAAK,EAAE,SAAS,GAAG,CAAC,GACtB,IACA,CACT,CAAC;AACN,CAAC"}