@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-es/deck-item/DeckItem.js

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useMemo } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './DeckItem.css.js';
+
+const withBaseName = makePrefixer("saltDeckItem");
+const DeckItem = forwardRef(
+  function DeckItem2({
+    activeIndex = 0,
+    animation,
+    children,
+    className,
+    index,
+    role = "group",
+    id: idProp,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-deck-item",
+      css: css_248z,
+      window: targetWindow
+    });
+    const sliderRef = useRef(null);
+    const isCurrent = activeIndex === index;
+    const position = useMemo(() => {
+      return isCurrent ? "current" : activeIndex < index ? "next" : "previous";
+    }, [activeIndex, index, isCurrent]);
+    const classesIndex = animation && position === "current" ? 0 : 1;
+    const getActiveClasses = [
+      `${animation || "fade"}-in`,
+      // in-right
+      `${animation || "fade"}-out`
+      // out-left
+    ];
+    const id = useId(idProp);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          withBaseName(`${animation ? animation : "static"}-${position}`),
+          {
+            [withBaseName(getActiveClasses[classesIndex])]: animation === "fade"
+          },
+          className
+        ),
+        ref: useForkRef(ref, sliderRef),
+        role,
+        tabIndex: isCurrent ? 0 : -1,
+        id,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+
+export { DeckItem };
+//# sourceMappingURL=DeckItem.js.map

package/dist-es/deck-item/DeckItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckItem.js","sources":["../src/deck-item/DeckItem.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo, useRef } from \"react\";\nimport type { LayoutAnimation } from \"../deck-layout\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport deckItemCss from \"./DeckItem.css\";\n\nconst withBaseName = makePrefixer(\"saltDeckItem\");\n\nexport interface DeckItemProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex?: number;\n  animation?: LayoutAnimation;\n  index: number;\n  role?: string;\n}\n\nexport const DeckItem = forwardRef<HTMLDivElement, DeckItemProps>(\n  function DeckItem(\n    {\n      activeIndex = 0,\n      animation,\n      children,\n      className,\n      index,\n      role = \"group\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-item\",\n      css: deckItemCss,\n      window: targetWindow,\n    });\n\n    const sliderRef = useRef<HTMLDivElement | null>(null);\n\n    const isCurrent = activeIndex === index;\n\n    const position = useMemo(() => {\n      return isCurrent ? \"current\" : activeIndex < index ? \"next\" : \"previous\";\n    }, [activeIndex, index, isCurrent]);\n\n    const classesIndex = animation && position === \"current\" ? 0 : 1;\n\n    const getActiveClasses = [\n      `${animation || \"fade\"}-in`, // in-right\n      `${animation || \"fade\"}-out`, // out-left\n    ];\n\n    const id = useId(idProp);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(`${animation ? animation : \"static\"}-${position}`),\n          {\n            [withBaseName(getActiveClasses[classesIndex])]:\n              animation === \"fade\",\n          },\n          className,\n        )}\n        ref={useForkRef(ref, sliderRef)}\n        role={role}\n        tabIndex={isCurrent ? 0 : -1}\n        id={id}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["DeckItem","deckItemCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AASzC,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,SAASA,SACP,CAAA;AAAA,IACE,WAAc,GAAA,CAAA;AAAA,IACd,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,gBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,SAAA,GAAY,OAA8B,IAAI,CAAA;AAEpD,IAAA,MAAM,YAAY,WAAgB,KAAA,KAAA;AAElC,IAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,MAAA,OAAO,SAAY,GAAA,SAAA,GAAY,WAAc,GAAA,KAAA,GAAQ,MAAS,GAAA,UAAA;AAAA,KAC7D,EAAA,CAAC,WAAa,EAAA,KAAA,EAAO,SAAS,CAAC,CAAA;AAElC,IAAA,MAAM,YAAe,GAAA,SAAA,IAAa,QAAa,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA;AAE/D,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,CAAA,EAAG,aAAa,MAAM,CAAA,GAAA,CAAA;AAAA;AAAA,MACtB,CAAA,EAAG,aAAa,MAAM,CAAA,IAAA;AAAA;AAAA,KACxB;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AAEvB,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,CAAG,EAAA,SAAA,GAAY,YAAY,QAAQ,CAAA,CAAA,EAAI,QAAQ,CAAE,CAAA,CAAA;AAAA,UAC9D;AAAA,YACE,CAAC,YAAa,CAAA,gBAAA,CAAiB,YAAY,CAAC,CAAC,GAC3C,SAAc,KAAA;AAAA,WAClB;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA,EAAK,UAAW,CAAA,GAAA,EAAK,SAAS,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA,QAAA,EAAU,YAAY,CAAI,GAAA,EAAA;AAAA,QAC1B,EAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/deck-layout/DeckLayout.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDeckLayout {\n  overflow: hidden;\n}\n\n.saltDeckLayout-animate {\n  white-space: nowrap;\n}\n\n.saltDeckLayout-slide-horizontal {\n  width: var(--deckLayout-width);\n  transition: transform var(--salt-animation-duration);\n  transform: translateX(var(--deckLayout-transform-value));\n}\n\n.saltDeckLayout-slide-vertical {\n  height: var(--deckLayout-height);\n  transition: transform var(--salt-animation-duration);\n  transform: translateY(var(--deckLayout-transform-value));\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DeckLayout.css.js.map

package/dist-es/deck-layout/DeckLayout.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/deck-layout/DeckLayout.js

@@ -0,0 +1,98 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { forwardRef, useState, useCallback, Children } from 'react';
+import { DeckItem } from '../deck-item/DeckItem.js';
+import '../responsive/useResizeObserver.js';
+import { useWidth } from '../responsive/useWidth.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import css_248z from './DeckLayout.css.js';
+
+const withBaseName = makePrefixer("saltDeckLayout");
+const DeckLayout = forwardRef(
+  function DeckLayout2({
+    activeIndex = 0,
+    animation,
+    className,
+    children,
+    direction = "horizontal",
+    style,
+    deckItemProps,
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-deck-layout",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [deckItemRef, deckItemWidth] = useWidth(true);
+    const [deckItemHeight, setDeckItemHeight] = useState(0);
+    const handleResize = useCallback(function handleResize2(contentRect) {
+      setDeckItemHeight(contentRect.height);
+    }, []);
+    useIsomorphicLayoutEffect(() => {
+      if (!deckItemRef.current) {
+        return void 0;
+      }
+      handleResize(deckItemRef.current.getBoundingClientRect());
+      const observer = new ResizeObserver(
+        ([{ contentRect }]) => {
+          handleResize(contentRect);
+        }
+      );
+      observer.observe(deckItemRef.current);
+      return () => {
+        observer.disconnect();
+      };
+    }, [deckItemRef, handleResize]);
+    const deckLayoutStyles = {
+      ...style,
+      "--deckLayout-width": `${deckItemWidth}px`,
+      "--deckLayout-height": `${deckItemHeight}px`
+    };
+    const innerStyles = {
+      "--deckLayout-transform-value": `-${activeIndex * 100}%`
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        style: deckLayoutStyles,
+        ref,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clsx(
+              {
+                [withBaseName("animate")]: animation
+              },
+              {
+                [withBaseName(`${animation || "slide"}-${direction}`)]: animation
+              }
+            ),
+            style: innerStyles,
+            children: Children.map(children, (child, index) => {
+              return /* @__PURE__ */ jsx(
+                DeckItem,
+                {
+                  ref: deckItemRef,
+                  index,
+                  activeIndex,
+                  animation,
+                  ...deckItemProps,
+                  children: child
+                }
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+
+export { DeckLayout };
+//# sourceMappingURL=DeckLayout.js.map

package/dist-es/deck-layout/DeckLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeckLayout.js","sources":["../src/deck-layout/DeckLayout.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type CSSProperties,\n  Children,\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useState,\n} from \"react\";\nimport { DeckItem, type DeckItemProps } from \"../deck-item\";\nimport { useWidth } from \"../responsive\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\n\nimport deckLayoutCss from \"./DeckLayout.css\";\n\nexport type LayoutAnimation = \"slide\" | \"fade\";\nexport type LayoutAnimationDirection = \"horizontal\" | \"vertical\";\nexport type LayoutAnimationTransition = \"increase\" | \"decrease\";\n\nexport interface DeckLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial item to render.\n   **/\n  activeIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   **/\n  animation?: LayoutAnimation;\n  /**\n   * The direction in which items will transition.\n   **/\n  direction?: LayoutAnimationDirection;\n  /**\n   * Props to be passed to the DeckItem component.\n   */\n  deckItemProps?: Partial<DeckItemProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltDeckLayout\");\n\nexport const DeckLayout = forwardRef<HTMLDivElement, DeckLayoutProps>(\n  function DeckLayout(\n    {\n      activeIndex = 0,\n      animation,\n      className,\n      children,\n      direction = \"horizontal\",\n      style,\n      deckItemProps,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-deck-layout\",\n      css: deckLayoutCss,\n      window: targetWindow,\n    });\n\n    const [deckItemRef, deckItemWidth] = useWidth<HTMLDivElement>(true);\n\n    const [deckItemHeight, setDeckItemHeight] = useState<number>(0);\n\n    const handleResize = useCallback(function handleResize(\n      contentRect: DOMRect,\n    ) {\n      setDeckItemHeight(contentRect.height);\n    }, []);\n\n    useIsomorphicLayoutEffect(() => {\n      if (!deckItemRef.current) {\n        return undefined;\n      }\n\n      handleResize(deckItemRef.current.getBoundingClientRect());\n\n      const observer = new ResizeObserver(\n        ([{ contentRect }]: ResizeObserverEntry[]) => {\n          handleResize(contentRect);\n        },\n      );\n      observer.observe(deckItemRef.current);\n\n      return () => {\n        observer.disconnect();\n      };\n    }, [deckItemRef, handleResize]);\n\n    const deckLayoutStyles = {\n      ...style,\n      \"--deckLayout-width\": `${deckItemWidth}px`,\n      \"--deckLayout-height\": `${deckItemHeight}px`,\n    };\n\n    const innerStyles = {\n      \"--deckLayout-transform-value\": `-${activeIndex * 100}%`,\n    } as CSSProperties;\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        style={deckLayoutStyles}\n        ref={ref}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            {\n              [withBaseName(\"animate\")]: animation,\n            },\n            {\n              [withBaseName(`${animation || \"slide\"}-${direction}`)]: animation,\n            },\n          )}\n          style={innerStyles}\n        >\n          {Children.map(children, (child, index) => {\n            return (\n              <DeckItem\n                ref={deckItemRef}\n                index={index}\n                activeIndex={activeIndex}\n                animation={animation}\n                {...deckItemProps}\n              >\n                {child}\n              </DeckItem>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["DeckLayout","deckLayoutCss","handleResize"],"mappings":"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"}

package/dist-es/dropdown/Dropdown.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 8px;\n  display: inline-block;\n  line-height: 0;\n  position: relative;\n}\n\n.saltDropdownBase-fullWidth {\n  width: 100%;\n}\n\n.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  z-index: calc(var(--salt-zIndex-flyover) - 1);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Dropdown.css.js.map

package/dist-es/dropdown/Dropdown.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/dropdown/Dropdown.js

@@ -0,0 +1,135 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIdMemo, useForkRef } from '@salt-ds/core';
+import { forwardRef, useRef, useCallback, cloneElement } from 'react';
+import { CollectionProvider } from '../common-hooks/collectionProvider.js';
+import { itemToString } from '../common-hooks/itemToString.js';
+import '../common-hooks/keyUtils.js';
+import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
+import '../responsive/useResizeObserver.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import { List } from '../list/List.js';
+import { DropdownBase } from './DropdownBase.js';
+import { DropdownButton } from './DropdownButton.js';
+import { useDropdown } from './useDropdown.js';
+
+const Dropdown = forwardRef(function Dropdown2({
+  "aria-label": ariaLabel,
+  children,
+  defaultIsOpen,
+  defaultSelected,
+  id: idProp,
+  isOpen: isOpenProp,
+  itemToString: itemToString$1 = itemToString,
+  onOpenChange,
+  onSelectionChange,
+  onSelect,
+  selected: selectedProp,
+  selectionStrategy,
+  source,
+  triggerComponent,
+  ListItem,
+  ListProps,
+  width = 180,
+  ...props
+}, forwardedRef) {
+  const id = useIdMemo(idProp);
+  const rootRef = useRef(null);
+  const forkedRef = useForkRef(rootRef, forwardedRef);
+  const collectionHook = useCollectionItems({
+    id,
+    source,
+    children,
+    options: {
+      itemToString: itemToString$1
+    }
+  });
+  const {
+    highlightedIndex,
+    triggerLabel,
+    listHandlers,
+    listControlProps,
+    selected,
+    ...dropdownListHook
+  } = useDropdown({
+    collectionHook,
+    defaultHighlightedIndex: ListProps == null ? void 0 : ListProps.defaultHighlightedIndex,
+    defaultIsOpen,
+    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    highlightedIndex: ListProps == null ? void 0 : ListProps.highlightedIndex,
+    isOpen: isOpenProp,
+    itemToString: itemToString$1,
+    onHighlight: ListProps == null ? void 0 : ListProps.onHighlight,
+    onOpenChange,
+    onSelectionChange,
+    onSelect,
+    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selectionStrategy
+  });
+  const collectionItemsToItem = useCallback(
+    (itemOrItems) => {
+      if (Array.isArray(itemOrItems)) {
+        return itemOrItems.map((i) => i.value);
+      }
+      if (itemOrItems) {
+        return itemOrItems.value;
+      }
+    },
+    []
+  );
+  const getTriggerComponent = () => {
+    const ariaProps = {
+      "aria-activedescendant": dropdownListHook.isOpen ? listControlProps == null ? void 0 : listControlProps["aria-activedescendant"] : void 0,
+      "aria-label": ariaLabel
+    };
+    if (triggerComponent) {
+      const ownProps = triggerComponent.props;
+      return cloneElement(
+        triggerComponent,
+        forwardCallbackProps(ownProps, {
+          ...dropdownListHook.isOpen ? listControlProps : {},
+          ...ariaProps
+        })
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      DropdownButton,
+      {
+        label: triggerLabel,
+        ...dropdownListHook.isOpen ? listControlProps : {},
+        ...ariaProps
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(CollectionProvider, { collectionHook, children: /* @__PURE__ */ jsxs(
+    DropdownBase,
+    {
+      ...props,
+      id,
+      isOpen: dropdownListHook.isOpen,
+      onOpenChange: dropdownListHook.onOpenChange,
+      ref: forkedRef,
+      width,
+      children: [
+        getTriggerComponent(),
+        /* @__PURE__ */ jsx(
+          List,
+          {
+            ListItem,
+            itemToString: itemToString$1,
+            ...ListProps,
+            highlightedIndex,
+            listHandlers,
+            onSelectionChange,
+            onSelect,
+            selected: collectionItemsToItem(selected),
+            selectionStrategy,
+            "data-testid": "dropdown-list"
+          }
+        )
+      ]
+    }
+  ) });
+});
+
+export { Dropdown };
+//# sourceMappingURL=Dropdown.js.map

package/dist-es/dropdown/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import { useForkRef, useIdMemo as useId } from \"@salt-ds/core\";\nimport {\n  type ForwardedRef,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  type CollectionItem,\n  CollectionProvider,\n  type SelectionProps,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  itemToString as defaultItemToString,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport { List } from \"../list/List\";\nimport type { ListProps } from \"../list/listTypes\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { DropdownBase, type MaybeChildProps } from \"./DropdownBase\";\nimport { DropdownButton } from \"./DropdownButton\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdown } from \"./useDropdown\";\n\nexport interface DropdownProps<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n> extends DropdownBaseProps,\n    Pick<\n      ListProps<Item, Selection>,\n      \"ListItem\" | \"itemToString\" | \"source\" | \"width\"\n    >,\n    SelectionProps<Item, Selection> {\n  ListProps?: Omit<\n    ListProps<Item, Selection>,\n    \"ListItem\" | \"itemToString\" | \"source\"\n  >;\n}\n\nexport const Dropdown = forwardRef(function Dropdown<\n  Item = string,\n  Selection extends SelectionStrategy = \"default\",\n>(\n  {\n    \"aria-label\": ariaLabel,\n    children,\n    defaultIsOpen,\n    defaultSelected,\n    id: idProp,\n    isOpen: isOpenProp,\n    itemToString = defaultItemToString,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    triggerComponent,\n    ListItem,\n    ListProps,\n    width = 180,\n    ...props\n  }: DropdownProps<Item, Selection>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const id = useId(idProp);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef<HTMLDivElement>(rootRef, forwardedRef);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    children,\n    options: {\n      itemToString,\n    },\n  });\n\n  const {\n    highlightedIndex,\n    triggerLabel,\n    listHandlers,\n    listControlProps,\n    selected,\n    ...dropdownListHook\n  } = useDropdown<Item, Selection>({\n    collectionHook,\n    defaultHighlightedIndex: ListProps?.defaultHighlightedIndex,\n    defaultIsOpen,\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    highlightedIndex: ListProps?.highlightedIndex,\n    isOpen: isOpenProp,\n    itemToString,\n    label: \"Dropdown\",\n    onHighlight: ListProps?.onHighlight,\n    onOpenChange,\n    onSelectionChange,\n    onSelect,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  const collectionItemsToItem = useCallback(\n    (\n      itemOrItems?: CollectionItem<Item> | null | CollectionItem<Item>[],\n    ):\n      | undefined\n      | (Selection extends SingleSelectionStrategy ? Item | null : Item[]) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (Array.isArray(itemOrItems)) {\n        return itemOrItems.map((i) => i.value) as returnType;\n      }\n      if (itemOrItems) {\n        return itemOrItems.value as returnType;\n      }\n    },\n    [],\n  );\n\n  const getTriggerComponent = () => {\n    const ariaProps = {\n      \"aria-activedescendant\": dropdownListHook.isOpen\n        ? listControlProps?.[\"aria-activedescendant\"]\n        : undefined,\n      \"aria-label\": ariaLabel,\n    };\n    if (triggerComponent) {\n      const ownProps = triggerComponent.props as MaybeChildProps;\n      return cloneElement(\n        triggerComponent,\n        forwardCallbackProps(ownProps, {\n          ...(dropdownListHook.isOpen ? listControlProps : {}),\n          ...ariaProps,\n        }),\n      );\n    }\n    return (\n      <DropdownButton\n        label={triggerLabel}\n        {...(dropdownListHook.isOpen ? listControlProps : {})}\n        {...ariaProps}\n      />\n    );\n  };\n\n  return (\n    <CollectionProvider<Item> collectionHook={collectionHook}>\n      <DropdownBase\n        {...props}\n        id={id}\n        isOpen={dropdownListHook.isOpen}\n        onOpenChange={dropdownListHook.onOpenChange}\n        ref={forkedRef}\n        width={width}\n      >\n        {getTriggerComponent()}\n        <List<Item, Selection>\n          ListItem={ListItem}\n          itemToString={itemToString}\n          {...ListProps}\n          highlightedIndex={highlightedIndex}\n          listHandlers={listHandlers}\n          onSelectionChange={onSelectionChange}\n          onSelect={onSelect}\n          selected={collectionItemsToItem(selected)}\n          selectionStrategy={selectionStrategy}\n          data-testid=\"dropdown-list\"\n        />\n      </DropdownBase>\n    </CollectionProvider>\n  );\n}) as <Item, Selection extends SelectionStrategy = \"default\">(\n  props: DropdownProps<Item, Selection> & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<DropdownProps<Item, Selection>>;\n"],"names":["Dropdown","itemToString","defaultItemToString","useId"],"mappings":"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"}

package/dist-es/dropdown/DropdownBase.js

@@ -0,0 +1,160 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { flip, shift, size, limitShift } from '@floating-ui/react';
+import { makePrefixer, useIdMemo, useFloatingUI, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, Children, useState, cloneElement } from 'react';
+import { Portal } from '../portal/Portal.js';
+import { forwardCallbackProps } from '../utils/forwardCallbackProps.js';
+import { useWindow as useWindow$1, isDesktop } from '../window/WindowContext.js';
+import '../window/ElectronWindow.js';
+import { useDropdownBase } from './useDropdownBase.js';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './Dropdown.css.js';
+
+const withBaseName = makePrefixer("saltDropdownBase");
+const DropdownBase = forwardRef(
+  function Dropdown({
+    "aria-labelledby": ariaLabelledByProp,
+    children,
+    className: classNameProp,
+    container,
+    defaultIsOpen,
+    disabled,
+    disablePortal,
+    fullWidth,
+    id: idProp,
+    isOpen: isOpenProp,
+    onKeyDown,
+    onOpenChange,
+    openOnFocus,
+    placement = "bottom-start",
+    popupWidth,
+    width,
+    ...htmlAttributes
+  }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-dropdown",
+      css: css_248z,
+      window: targetWindow
+    });
+    const rootRef = useRef(null);
+    const className = clsx(withBaseName(), classNameProp, {
+      [withBaseName("fullWidth")]: fullWidth,
+      [withBaseName("disabled")]: disabled
+    });
+    const [trigger, popupComponent] = Children.toArray(
+      children
+    );
+    const id = useIdMemo(idProp);
+    const Window = useWindow$1();
+    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(
+      {
+        ariaLabelledBy: ariaLabelledByProp,
+        defaultIsOpen,
+        disabled,
+        fullWidth,
+        id,
+        isOpen: isOpenProp,
+        onOpenChange,
+        onKeyDown,
+        openOnFocus,
+        popupWidth,
+        rootRef,
+        width
+      }
+    );
+    const [maxPopupHeight, setMaxPopupHeight] = useState(
+      void 0
+    );
+    const middleware = isDesktop ? [] : [
+      flip({
+        fallbackPlacements: ["bottom-start", "top-start"]
+      }),
+      shift({ limiter: limitShift() }),
+      size({
+        apply({ availableHeight }) {
+          setMaxPopupHeight(availableHeight);
+        }
+      })
+    ];
+    const { reference, floating, x, y, strategy } = useFloatingUI({
+      placement,
+      middleware
+    });
+    const handlePopperListAdapterRef = useForkRef(
+      reference,
+      forwardedRef
+    );
+    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);
+    const handleFloatingRef = useForkRef(floating, popperRef);
+    const getTriggerComponent = () => {
+      const {
+        id: defaultId,
+        role: defaultRole,
+        ...restTriggerProps
+      } = triggerProps;
+      const {
+        id: id2 = defaultId,
+        role = defaultRole,
+        ...ownProps
+      } = trigger.props;
+      return cloneElement(
+        trigger,
+        forwardCallbackProps(ownProps, {
+          ...restTriggerProps,
+          id: id2,
+          role
+        })
+      );
+    };
+    const getPopupComponent = () => {
+      const { id: defaultId, width: width2, ...restComponentProps } = componentProps;
+      const {
+        className: className2,
+        id: id2 = defaultId,
+        width: ownWidth,
+        ...ownProps
+      } = popupComponent.props;
+      return cloneElement(popupComponent, {
+        ...ownProps,
+        ...restComponentProps,
+        className: clsx(className2, withBaseName("popup-component")),
+        id: id2,
+        width: ownWidth ?? width2
+      });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...htmlAttributes,
+        className,
+        "data-testid": "dropdown",
+        id: idProp,
+        ref: handleRootRef,
+        children: [
+          getTriggerComponent(),
+          isOpen && /* @__PURE__ */ jsx(Portal, { disablePortal, container, children: /* @__PURE__ */ jsx(
+            Window,
+            {
+              className: clsx(withBaseName("popup"), classNameProp),
+              id: `${id}-popup`,
+              style: {
+                top: y ?? 0,
+                left: x ?? 0,
+                position: strategy,
+                maxHeight: maxPopupHeight
+              },
+              ref: handleFloatingRef,
+              children: getPopupComponent()
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+
+export { DropdownBase };
+//# sourceMappingURL=DropdownBase.js.map

package/dist-es/dropdown/DropdownBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownBase.js","sources":["../src/dropdown/DropdownBase.tsx"],"sourcesContent":["import { flip, limitShift, shift, size } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { clsx } from \"clsx\";\nimport { Children, cloneElement, forwardRef, useRef, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { forwardCallbackProps } from \"../utils\";\nimport { isDesktop, useWindow as usePortalWindow } from \"../window\";\nimport type { DropdownBaseProps } from \"./dropdownTypes\";\nimport { useDropdownBase } from \"./useDropdownBase\";\n\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownCss from \"./Dropdown.css\";\n// Any component may be passed as our trigger or popup component.\n// Define the common props that we will act on, if present,\n// so we can type them.\nexport type MaybeChildProps = {\n  className?: string;\n  id?: string;\n  role?: string;\n  width: number | string;\n};\n\nconst withBaseName = makePrefixer(\"saltDropdownBase\");\n\nexport const DropdownBase = forwardRef<HTMLDivElement, DropdownBaseProps>(\n  function Dropdown(\n    {\n      \"aria-labelledby\": ariaLabelledByProp,\n      children,\n      className: classNameProp,\n      container,\n      defaultIsOpen,\n      disabled,\n      disablePortal,\n      fullWidth,\n      id: idProp,\n      isOpen: isOpenProp,\n      onKeyDown,\n      onOpenChange,\n      openOnFocus,\n      placement = \"bottom-start\",\n      popupWidth,\n      width,\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-dropdown\",\n      css: dropdownCss,\n      window: targetWindow,\n    });\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const className = clsx(withBaseName(), classNameProp, {\n      [withBaseName(\"fullWidth\")]: fullWidth,\n      [withBaseName(\"disabled\")]: disabled,\n    });\n    const [trigger, popupComponent] = Children.toArray(\n      children,\n    ) as JSX.Element[];\n    const id = useId(idProp);\n    const Window = usePortalWindow();\n\n    const { componentProps, popperRef, isOpen, triggerProps } = useDropdownBase(\n      {\n        ariaLabelledBy: ariaLabelledByProp,\n        defaultIsOpen,\n        disabled,\n        fullWidth,\n        id,\n        isOpen: isOpenProp,\n        onOpenChange,\n        onKeyDown,\n        openOnFocus,\n        popupComponent,\n        popupWidth,\n        rootRef,\n        width,\n      },\n    );\n    const [maxPopupHeight, setMaxPopupHeight] = useState<number | undefined>(\n      undefined,\n    );\n\n    const middleware = isDesktop\n      ? []\n      : [\n          flip({\n            fallbackPlacements: [\"bottom-start\", \"top-start\"],\n          }),\n          shift({ limiter: limitShift() }),\n          size({\n            apply({ availableHeight }) {\n              setMaxPopupHeight(availableHeight);\n            },\n          }),\n        ];\n\n    const { reference, floating, x, y, strategy } = useFloatingUI({\n      placement,\n      middleware,\n    });\n\n    const handlePopperListAdapterRef = useForkRef<HTMLDivElement>(\n      reference,\n      forwardedRef,\n    );\n    const handleRootRef = useForkRef(rootRef, handlePopperListAdapterRef);\n    const handleFloatingRef = useForkRef<HTMLDivElement>(floating, popperRef);\n    // TODO maybe we should pass style, with maxHeight, to the popupComponent\n\n    const getTriggerComponent = () => {\n      const {\n        id: defaultId,\n        role: defaultRole,\n        ...restTriggerProps\n      } = triggerProps;\n\n      const {\n        id = defaultId,\n        role = defaultRole,\n        ...ownProps\n      } = trigger.props as MaybeChildProps;\n\n      return cloneElement(\n        trigger,\n        forwardCallbackProps(ownProps, {\n          ...restTriggerProps,\n          id,\n          role,\n        }),\n      );\n    };\n\n    const getPopupComponent = () => {\n      const { id: defaultId, width, ...restComponentProps } = componentProps;\n      const {\n        className,\n        id = defaultId,\n        width: ownWidth,\n        ...ownProps\n      } = popupComponent.props as MaybeChildProps;\n      return cloneElement(popupComponent, {\n        ...ownProps,\n        ...restComponentProps,\n        className: clsx(className, withBaseName(\"popup-component\")),\n        id,\n        width: ownWidth ?? width,\n      });\n    };\n\n    return (\n      <div\n        {...htmlAttributes}\n        className={className}\n        data-testid=\"dropdown\"\n        id={idProp}\n        ref={handleRootRef}\n      >\n        {getTriggerComponent()}\n        {isOpen && (\n          <Portal disablePortal={disablePortal} container={container}>\n            <Window\n              className={clsx(withBaseName(\"popup\"), classNameProp)}\n              id={`${id}-popup`}\n              style={{\n                top: y ?? 0,\n                left: x ?? 0,\n                position: strategy,\n                maxHeight: maxPopupHeight,\n              }}\n              ref={handleFloatingRef}\n            >\n              {getPopupComponent()}\n            </Window>\n          </Portal>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["dropdownCss","useId","usePortalWindow","id","width","className"],"mappings":"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"}

package/dist-es/dropdown/DropdownButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=DropdownButton.css.js.map

package/dist-es/dropdown/DropdownButton.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/dropdown/DropdownButton.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useIcon, Button } from '@salt-ds/core';
+import { DEFAULT_ICON_SIZE } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import '../form-field-context-legacy/FormFieldLegacyContext.js';
+import { useFormFieldLegacyProps } from '../form-field-context-legacy/useFormFieldLegacyProps.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './DropdownButton.css.js';
+
+const withBaseName = makePrefixer("saltDropdownButton");
+const DropdownButton = forwardRef(function DropdownButton2({
+  IconComponent,
+  ariaHideOptionRole,
+  className,
+  disabled,
+  iconSize = DEFAULT_ICON_SIZE,
+  isOpen,
+  label,
+  labelId,
+  fullWidth,
+  posInSet,
+  setSize,
+  labelAriaAttributes,
+  ...rest
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-dropdown-button",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { ExpandIcon } = useIcon();
+  const Icon = IconComponent === void 0 ? ExpandIcon : IconComponent;
+  const { inFormField } = useFormFieldLegacyProps();
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("fullwidth")]: fullWidth,
+          [withBaseName("formField")]: inFormField
+        },
+        className
+      ),
+      "data-testid": "dropdown-button",
+      disabled,
+      variant: "secondary",
+      ...rest,
+      ref,
+      children: /* @__PURE__ */ jsxs("div", { className: withBaseName("content"), children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": ariaHideOptionRole ? "true" : void 0,
+            ...labelAriaAttributes,
+            className: withBaseName("buttonLabel"),
+            id: labelId,
+            role: "option",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: withBaseName("icon"),
+            size: iconSize,
+            "aria-label": null,
+            "aria-hidden": "true"
+          }
+        )
+      ] })
+    }
+  );
+});
+
+export { DropdownButton };
+//# sourceMappingURL=DropdownButton.js.map

package/dist-es/dropdown/DropdownButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownButton.js","sources":["../src/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { DEFAULT_ICON_SIZE, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  type AriaAttributes,\n  type ComponentType,\n  type ForwardedRef,\n  forwardRef,\n} from \"react\";\nimport { useFormFieldLegacyProps } from \"../form-field-context-legacy\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport dropdownButtonCss from \"./DropdownButton.css\";\n\nexport interface DropdownButtonProps extends ButtonProps {\n  /**\n   * Replace the default Icon component\n   */\n  IconComponent?: ComponentType<any>;\n  /**\n   * Whether the dropdown button should hide role='option' via 'aria-hidden'\n   */\n  ariaHideOptionRole?: boolean;\n  /**\n   * If, `true`, the Dropdown button will occupy the full width of it's container\n   */\n  fullWidth?: boolean;\n  /**\n   * Sets the size of the down arrow icon. If this is not specified, a default size based on density is used.\n   */\n  iconSize?: IconProps[\"size\"];\n  /**\n   * Is the dropdown list open\n   */\n  isOpen?: boolean;\n  /**\n   * Label for the dropdown button\n   */\n  label?: string;\n  /**\n   * Id for the label. This is needed for ARIA attributes.\n   */\n  labelId?: string;\n  /**\n   * When the dropdown is collapsed this value is set as aria-posinset on the span containing the selected value\n   * **/\n  posInSet?: number;\n  /**\n   * When the dropdown is collapsed this value is set as aria-setsize on the span containing the selected value\n   * **/\n  setSize?: number;\n  /**\n   *\n   * **/\n  labelAriaAttributes?: Pick<\n    AriaAttributes,\n    \"aria-posinset\" | \"aria-setsize\" | \"aria-selected\"\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdownButton\");\n\nexport const DropdownButton = forwardRef(function DropdownButton(\n  {\n    IconComponent,\n    ariaHideOptionRole,\n    className,\n    disabled,\n    iconSize = DEFAULT_ICON_SIZE,\n    isOpen,\n    label,\n    labelId,\n    fullWidth,\n    posInSet,\n    setSize,\n    labelAriaAttributes,\n    ...rest\n  }: DropdownButtonProps,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown-button\",\n    css: dropdownButtonCss,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n  const Icon = IconComponent === undefined ? ExpandIcon : IconComponent;\n  const { inFormField } = useFormFieldLegacyProps();\n  // FIXME: use polymorphic button\n  // We don't want the 'button' tag to be shown in the DOM to trigger some accessibility testing\n  // tool's false alarm on role of 'listbox'\n  return (\n    <Button\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"fullwidth\")]: fullWidth,\n          [withBaseName(\"formField\")]: inFormField,\n        },\n        className,\n      )}\n      data-testid=\"dropdown-button\"\n      disabled={disabled}\n      variant=\"secondary\"\n      {...rest}\n      ref={ref}\n    >\n      <div className={withBaseName(\"content\")}>\n        <span\n          // 'hidden' so that screen reader won't be confused the additional 'option' which is just a label\n          aria-hidden={ariaHideOptionRole ? \"true\" : undefined}\n          {...labelAriaAttributes}\n          className={withBaseName(\"buttonLabel\")}\n          id={labelId}\n          // biome-ignore lint/a11y/useAriaPropsForRole: 'option' role here is to suppress accessibility testing tool warning about 'listbox' missing children role\n          role=\"option\"\n        >\n          {label}\n        </span>\n        <Icon\n          className={withBaseName(\"icon\")}\n          size={iconSize}\n          aria-label={null}\n          aria-hidden=\"true\"\n        />\n      </div>\n    </Button>\n  );\n});\n"],"names":["DropdownButton","dropdownButtonCss"],"mappings":";;;;;;;;;;;AA8DA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAEzC,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,iBAAA;AAAA,EACX,MAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,mBAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAM,MAAA,EAAE,UAAW,EAAA,GAAI,OAAQ,EAAA;AAC/B,EAAM,MAAA,IAAA,GAAO,aAAkB,KAAA,MAAA,GAAY,UAAa,GAAA,aAAA;AACxD,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,uBAAwB,EAAA;AAIhD,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,SAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG;AAAA,SAC/B;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAY,EAAA,iBAAA;AAAA,MACZ,QAAA;AAAA,MACA,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEA,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,SAAS,CACpC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,aAAA,EAAa,qBAAqB,MAAS,GAAA,MAAA;AAAA,YAC1C,GAAG,mBAAA;AAAA,YACJ,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YACrC,EAAI,EAAA,OAAA;AAAA,YAEJ,IAAK,EAAA,QAAA;AAAA,YAEJ,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBACA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,YAC9B,IAAM,EAAA,QAAA;AAAA,YACN,YAAY,EAAA,IAAA;AAAA,YACZ,aAAY,EAAA;AAAA;AAAA;AACd,OACF,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}