@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.60

package/dist-es/tabs/useTabstrip.js

@@ -0,0 +1,214 @@
+import { useRef, useCallback, createElement, useEffect } from 'react';
+import { Tab } from './Tab.js';
+import { useDragDrop } from './drag-drop/useDragDrop.js';
+import { useEditableItem } from './useEditableItem.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useSelection } from './useSelection.js';
+
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop = false,
+  collectionHook,
+  defaultActiveTabIndex,
+  editing: editingProp,
+  idRoot,
+  innerContainerRef,
+  keyBoardActivation,
+  onActiveChange,
+  onCloseTab,
+  onEnterEditMode,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  promptForNewTabName
+}) => {
+  const lastSelection = useRef(
+    activeTabIndexProp === null ? null : activeTabIndexProp || defaultActiveTabIndex || 0
+  );
+  const pendingNewTab = useRef(null);
+  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
+  const keyboardHook = useKeyboardNavigation({
+    indexPositions: collectionHook.data,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const selectionHook = useSelection({
+    defaultSelected: defaultActiveTabIndex,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHook.selected;
+  const handleDrop = useCallback(
+    (fromIndex, toIndex) => {
+      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
+      if (toIndex === -1) ; else {
+        if (selectionHook.selected === null) ; else if (selectionHook.selected === fromIndex) {
+          selectionHook.activateTab(toIndex);
+        } else if (fromIndex > selectionHook.selected && toIndex <= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected + 1);
+        } else if (fromIndex < selectionHook.selected && toIndex >= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected - 1);
+        }
+      }
+    },
+    [onMoveTab, selectionHook]
+  );
+  const dragDropHook = useDragDrop({
+    allowDragDrop,
+    containerRef: innerContainerRef,
+    extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".saltTab"
+  });
+  const editableHook = useEditableItem({
+    editing: editingProp,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    indexPositions: collectionHook.data,
+    onEnterEditMode,
+    onExitEditMode
+  });
+  const handleExitEditMode = useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      editableHook.onExitEditMode(
+        originalValue,
+        editedValue,
+        allowDeactivation,
+        tabIndex
+      );
+      if (!allowDeactivation) {
+        keyboardHook.focusTab(tabIndex, false, true);
+      }
+    },
+    [editableHook, keyboardHook]
+  );
+  const handleClick = useCallback(
+    (evt, tabIndex) => {
+      if (!dragDropHook.isDragging) {
+        keyboardHook.onClick(evt, tabIndex);
+        selectionHook.onClick(evt, tabIndex);
+      }
+    },
+    [dragDropHook.isDragging, keyboardHook, selectionHook]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      keyboardHook.onKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHook.onKeyDown(evt);
+      }
+      if (!evt.defaultPrevented) {
+        editableHook.onKeyDown(evt);
+      }
+    },
+    [keyboardHook, selectionHook, editableHook]
+  );
+  const navigationProps = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const tabProps = {
+    onClick: handleClick,
+    onEnterEditMode: editableHook.onEnterEditMode,
+    onExitEditMode: handleExitEditMode
+  };
+  const addTab = useCallback(
+    // The -1 is to account for the AddTab button - we shouldn't assume this
+    (indexPosition = collectionHook.data.length - 1) => {
+      const tabId = `${idRoot}-${collectionHook.data.length}`;
+      pendingNewTab.current = tabId;
+      const overflowIndicator = collectionHook.data.find(
+        (i) => i.isOverflowIndicator
+      );
+      const newTabs = collectionHook.data.filter(
+        (item) => {
+          var _a;
+          return (_a = item.label) == null ? void 0 : _a.startsWith("New Tab");
+        }
+      );
+      const count = newTabs.length + 1;
+      collectionHook.dispatch({
+        type: "add-child-item",
+        idRoot,
+        element: createElement(Tab, {
+          editable: true,
+          label: `New Tab ${count}`,
+          id: tabId
+        }),
+        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition
+      });
+    },
+    [collectionHook, idRoot]
+  );
+  const selectNewTab = useCallback(
+    (tabId) => {
+      const tab = collectionHook.data.find((item) => item.id === tabId);
+      if (tab) {
+        selectionHook.activateTab(tab.index);
+        if (promptForNewTabName) {
+          editableHook.setEditing(true);
+        } else {
+          keyboardHook.focusTab(tab.index);
+        }
+      }
+    },
+    [
+      collectionHook.data,
+      editableHook,
+      keyboardHook,
+      promptForNewTabName,
+      selectionHook
+    ]
+  );
+  const closeTab = useCallback(
+    (indexPosition) => {
+      if (!collectionHook.isControlled) {
+        collectionHook.dispatch({
+          type: "remove-item",
+          indexPosition
+        });
+        if (collectionHook.data.length > 1) {
+          if (indexPosition === selectionHook.selected && //TODO need to exclude overflow indicator, addButton
+          indexPosition === collectionHook.data.length - 1) {
+            selectionHook.activateTab(indexPosition - 1);
+          }
+          onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+          if (selectionHook.selected !== null && indexPosition < selectionHook.selected) {
+            selectionHook.activateTab(selectionHook.selected - 1);
+          }
+        }
+      } else {
+        onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+      }
+    },
+    [collectionHook, onCloseTab, selectionHook]
+  );
+  useEffect(() => {
+    if (pendingNewTab.current) {
+      const { current: tabId } = pendingNewTab;
+      pendingNewTab.current = null;
+      selectNewTab(tabId);
+    }
+  }, [collectionHook.data, promptForNewTabName, selectNewTab]);
+  return {
+    activateTab: selectionHook.activateTab,
+    addTab,
+    closeTab,
+    containerProps: keyboardHook.containerProps,
+    controlledSelection: selectionHook.isControlled,
+    editing: editableHook.editing,
+    focusTab: keyboardHook.focusTab,
+    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,
+    focusVisible: keyboardHook.focusVisible,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    activeTabIndex: selectionHook.selected,
+    navigationProps,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+export { useTabstrip };
+//# sourceMappingURL=useTabstrip.js.map

package/dist-es/tabs/useTabstrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type MouseEvent,\n  type RefObject,\n  createElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport { Tab } from \"./Tab\";\nimport {\n  type DragHookResult,\n  type dragStrategy,\n  useDragDrop,\n} from \"./drag-drop\";\nimport {\n  type EditableItemHookResult,\n  type ExitEditModeHandler,\n  useEditableItem,\n} from \"./useEditableItem\";\nimport {\n  type ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nimport type {\n  TabDescriptor,\n  TabElement,\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n} from \"./TabsTypes\";\n\ninterface tabstripHookProps {\n  activeTabIndex?: number | null;\n  allowDragDrop?: boolean | dragStrategy;\n  collectionHook: OverflowCollectionHookResult;\n  defaultActiveTabIndex?: number;\n  defaultTabs?: TabDescriptor[];\n  editing?: boolean;\n  enableAddTab: boolean;\n  idRoot: string;\n  innerContainerRef: RefObject<HTMLDivElement>;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  onActiveChange?: (tabIndex: number) => void;\n  onCloseTab?: (indexPosition: number) => void;\n  onEnterEditMode?: () => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: \"horizontal\" | \"vertical\";\n  promptForNewTabName?: boolean;\n  tabs?: TabDescriptor[] | TabElement[];\n}\n\ninterface tabstripHookResult\n  extends DragHookResult,\n    Pick<EditableItemHookResult, \"editing\"> {\n  activateTab: (tabIndex: number) => void;\n  activeTabIndex: number | null;\n  addTab: (indexPosition?: number) => void;\n  closeTab: (indexPosition: number) => void;\n  containerProps: ContainerNavigationProps;\n  controlledSelection: boolean;\n  highlightedIdx: number;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  focusTab: (tabIndex: number, immediateFocus?: boolean) => void;\n  navigationProps: navigationProps;\n  tabProps: composableTabProps;\n}\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop = false,\n  collectionHook,\n  defaultActiveTabIndex,\n  editing: editingProp,\n  idRoot,\n  innerContainerRef,\n  keyBoardActivation,\n  onActiveChange,\n  onCloseTab,\n  onEnterEditMode,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  promptForNewTabName,\n}: tabstripHookProps): tabstripHookResult & DragHookResult => {\n  const lastSelection = useRef(\n    activeTabIndexProp === null\n      ? null\n      : activeTabIndexProp || defaultActiveTabIndex || 0,\n  );\n  const pendingNewTab = useRef<string | null>(null);\n\n  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n  const keyboardHook = useKeyboardNavigation({\n    indexPositions: collectionHook.data,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected: defaultActiveTabIndex,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const handleDrop = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      onMoveTab?.(fromIndex, toIndex);\n      if (toIndex === -1) {\n        // nothing to do\n      } else {\n        if (selectionHook.selected === null) {\n          // do thing\n        } else if (selectionHook.selected === fromIndex) {\n          selectionHook.activateTab(toIndex);\n        } else if (\n          fromIndex > selectionHook.selected &&\n          toIndex <= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected + 1);\n        } else if (\n          fromIndex < selectionHook.selected &&\n          toIndex >= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected - 1);\n        }\n      }\n    },\n    [onMoveTab, selectionHook],\n  );\n\n  const dragDropHook = useDragDrop({\n    allowDragDrop,\n    containerRef: innerContainerRef,\n    extendedDropZone: overflowedItems.length > 0,\n    onDrop: handleDrop,\n    orientation: \"horizontal\",\n    itemQuery: \".saltTab\",\n  });\n\n  const editableHook = useEditableItem({\n    editing: editingProp,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    indexPositions: collectionHook.data,\n    onEnterEditMode,\n    onExitEditMode,\n  });\n\n  const handleExitEditMode = useCallback<exitEditHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      editableHook.onExitEditMode(\n        originalValue,\n        editedValue,\n        allowDeactivation,\n        tabIndex,\n      );\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHook.focusTab(tabIndex, false, true);\n      }\n    },\n    [editableHook, keyboardHook],\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      if (!dragDropHook.isDragging) {\n        keyboardHook.onClick(evt, tabIndex);\n        selectionHook.onClick(evt, tabIndex);\n      }\n    },\n    [dragDropHook.isDragging, keyboardHook, selectionHook],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.onKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.onKeyDown(evt);\n      }\n      if (!evt.defaultPrevented) {\n        editableHook.onKeyDown(evt);\n      }\n    },\n    [keyboardHook, selectionHook, editableHook],\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const tabProps: composableTabProps = {\n    onClick: handleClick,\n    onEnterEditMode: editableHook.onEnterEditMode,\n    onExitEditMode: handleExitEditMode,\n  };\n\n  const addTab = useCallback(\n    // The -1 is to account for the AddTab button - we shouldn't assume this\n    (indexPosition: number = collectionHook.data.length - 1) => {\n      const tabId = `${idRoot}-${collectionHook.data.length}`;\n      pendingNewTab.current = tabId;\n\n      const overflowIndicator = collectionHook.data.find(\n        (i) => i.isOverflowIndicator,\n      );\n      const newTabs = collectionHook.data.filter((item) =>\n        item.label?.startsWith(\"New Tab\"),\n      );\n      const count = newTabs.length + 1;\n      collectionHook.dispatch({\n        type: \"add-child-item\",\n        idRoot,\n        element: createElement(Tab, {\n          editable: true,\n          label: `New Tab ${count}`,\n          id: tabId,\n        }),\n        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition,\n      });\n    },\n    [collectionHook, idRoot],\n  );\n\n  const selectNewTab = useCallback(\n    (tabId: string) => {\n      const tab = collectionHook.data.find((item) => item.id === tabId);\n      if (tab) {\n        selectionHook.activateTab(tab.index);\n        if (promptForNewTabName) {\n          // this will take care of focus, which will be set to the editable input\n          editableHook.setEditing(true);\n        } else {\n          keyboardHook.focusTab(tab.index);\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      editableHook,\n      keyboardHook,\n      promptForNewTabName,\n      selectionHook,\n    ],\n  );\n\n  const closeTab = useCallback(\n    (indexPosition: number) => {\n      if (!collectionHook.isControlled) {\n        collectionHook.dispatch({\n          type: \"remove-item\",\n          indexPosition,\n        });\n        if (collectionHook.data.length > 1) {\n          if (\n            indexPosition === selectionHook.selected &&\n            //TODO need to exclude overflow indicator, addButton\n            indexPosition === collectionHook.data.length - 1\n          ) {\n            selectionHook.activateTab(indexPosition - 1);\n          }\n          // does this have to be here ?\n          onCloseTab?.(indexPosition);\n          if (\n            selectionHook.selected !== null &&\n            indexPosition < selectionHook.selected\n          ) {\n            selectionHook.activateTab(selectionHook.selected - 1);\n          }\n        }\n      } else {\n        onCloseTab?.(indexPosition);\n      }\n    },\n    [collectionHook, onCloseTab, selectionHook],\n  );\n\n  useEffect(() => {\n    if (pendingNewTab.current) {\n      const { current: tabId } = pendingNewTab;\n      pendingNewTab.current = null;\n      selectNewTab(tabId);\n    }\n  }, [collectionHook.data, promptForNewTabName, selectNewTab]);\n\n  return {\n    activateTab: selectionHook.activateTab,\n    addTab,\n    closeTab,\n    containerProps: keyboardHook.containerProps,\n    controlledSelection: selectionHook.isControlled,\n    editing: editableHook.editing,\n    focusTab: keyboardHook.focusTab,\n    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    activeTabIndex: selectionHook.selected,\n    navigationProps,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tabs-next/TabBar.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  box-sizing: border-box;\n}\n\n.saltTabBar-divider::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabBar.css.js.map

package/dist-es/tabs-next/TabBar.css.js.map

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

package/dist-es/tabs-next/TabBar.js

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import css_248z from './TabBar.css.js';
+
+const withBaseName = makePrefixer("saltTabBar");
+const TabBar = forwardRef(
+  function TabBar2(props, ref) {
+    const { className, children, divider, inset, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-bar",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("divider")]: divider,
+            [withBaseName("inset")]: inset
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        children
+      }
+    );
+  }
+);
+
+export { TabBar };
+//# sourceMappingURL=TabBar.js.map

package/dist-es/tabs-next/TabBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabBar","tabBarCss"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-es/tabs-next/TabListNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-overflowWarning {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabListNext.css.js.map

package/dist-es/tabs-next/TabListNext.css.js.map

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

package/dist-es/tabs-next/TabListNext.js

@@ -0,0 +1,129 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useIsomorphicLayoutEffect, useId, capitalize } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import css_248z from './TabListNext.css.js';
+import { TabOverflowList } from './TabOverflowList.js';
+import { useTabsNext } from './TabsNextContext.js';
+import { useOverflow } from './hooks/useOverflow.js';
+
+const withBaseName = makePrefixer("saltTabListNext");
+const TabListNext = forwardRef(
+  function TabstripNext(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      "aria-describedby": ariaDescribedBy,
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tablist-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      selected,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      items,
+      activeTab,
+      menuOpen,
+      setMenuOpen,
+      returnFocus
+    } = useTabsNext();
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const overflowButtonRef = useRef(null);
+    const [visible, hidden, isMeasuring] = useOverflow({
+      container: tabstripRef,
+      tabs: items,
+      children,
+      selected,
+      overflowButton: overflowButtonRef
+    });
+    const handleKeyDown = (event) => {
+      var _a, _b, _c;
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      const actionMap = {
+        ArrowRight: getNext,
+        ArrowLeft: getPrevious,
+        Home: getFirst,
+        End: getLast,
+        ArrowUp: menuOpen ? getPrevious : void 0,
+        ArrowDown: menuOpen ? getNext : void 0
+      };
+      const action = actionMap[event.key];
+      if (action) {
+        event.preventDefault();
+        const activeTabId = (_a = activeTab.current) == null ? void 0 : _a.id;
+        if (!activeTabId) return;
+        const nextItem = action(activeTabId);
+        if (nextItem) {
+          (_b = nextItem.element) == null ? void 0 : _b.scrollIntoView({
+            block: "nearest",
+            inline: "nearest"
+          });
+          (_c = nextItem.element) == null ? void 0 : _c.focus({ preventScroll: true });
+        }
+      }
+    };
+    useIsomorphicLayoutEffect(() => {
+      var _a;
+      if (!returnFocus.current || visible.length < 1 || selected === void 0)
+        return;
+      const itemToFocus = items.find((i) => i.value === returnFocus.current);
+      (_a = itemToFocus == null ? void 0 : itemToFocus.element) == null ? void 0 : _a.focus({ preventScroll: true });
+      requestAnimationFrame(() => {
+        var _a2;
+        if (((_a2 = targetWindow == null ? void 0 : targetWindow.document) == null ? void 0 : _a2.activeElement) === (itemToFocus == null ? void 0 : itemToFocus.element)) {
+          returnFocus.current = void 0;
+        }
+      });
+    }, [visible, returnFocus, targetWindow, items, selected]);
+    const warningId = useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "tablist",
+        className: clsx(
+          withBaseName(),
+          withBaseName(appearance),
+          withBaseName("horizontal"),
+          withBaseName(`activeColor${capitalize(activeColor)}`),
+          className
+        ),
+        "data-ismeasuring": isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        "aria-describedby": clsx(ariaDescribedBy, warningId),
+        ...rest,
+        children: [
+          hidden.length > 0 && /* @__PURE__ */ jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
+          visible,
+          /* @__PURE__ */ jsx(
+            TabOverflowList,
+            {
+              isMeasuring,
+              buttonRef: overflowButtonRef,
+              tabstripRef,
+              open: menuOpen,
+              setOpen: setMenuOpen,
+              children: hidden
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { TabListNext };
+//# sourceMappingURL=TabListNext.js.map

package/dist-es/tabs-next/TabListNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId)}\n        {...rest}\n      >\n        {hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss","_a"],"mappings":"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"}

package/dist-es/tabs-next/TabNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Class applied to root Tab element */\n.saltTabNext {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  gap: var(--salt-spacing-100);\n  border: none;\n  border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n  white-space: pre;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  min-width: 4em;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: relative;\n  flex-shrink: 0;\n  box-sizing: border-box;\n  --tabNext-radius: var(--salt-palette-corner-weak, 0);\n  border-radius: var(--tab-radius) var(--tab-radius) 0 0;\n  overflow: hidden;\n\n  cursor: var(--salt-navigable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-textAlign);\n  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltTabNext::after {\n  content: \"\";\n  position: absolute;\n  left: calc(var(--salt-size-border) * -1);\n  right: calc(var(--salt-size-border) * -1);\n  height: var(--salt-size-indicator);\n}\n\n.saltTabListNext-bordered .saltTabNext::after {\n  top: 0;\n}\n\n.saltTabListNext-transparent .saltTabNext::after {\n  bottom: 0;\n}\n\n.saltTabNext:hover::after,\n.saltTabNext-focusVisible::after {\n  background: var(--salt-navigable-indicator-hover);\n}\n\n.saltTabNext-disabled:hover::after,\n.saltTabNext-disabled.saltTabNext-focusVisible::after {\n  background: none;\n}\n\n.saltTabNext-focusVisible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltTabListNext-bordered .saltTabNext.saltTabNext-selected {\n  background: var(--saltTabListNext-activeColor);\n  border-left: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabNext.saltTabNext-selected::after {\n  background: var(--salt-navigable-indicator-active);\n}\n\n.saltTabNext.saltTabNext-disabled {\n  cursor: var(--salt-navigable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabNext.css.js.map

package/dist-es/tabs-next/TabNext.css.js.map

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

package/dist-es/tabs-next/TabNext.js

@@ -0,0 +1,108 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import css_248z from './TabNext.css.js';
+import { TabNextContext } from './TabNextContext.js';
+import { useTabsNext } from './TabsNextContext.js';
+
+const withBaseName = makePrefixer("saltTabNext");
+const TabNext = forwardRef(
+  function Tab(props, ref) {
+    const {
+      "aria-labelledby": ariaLabelledBy,
+      children,
+      className,
+      disabled: disabledProp,
+      onBlur,
+      onMouseDown,
+      onFocus,
+      onFocusCapture,
+      value,
+      id: idProp,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { selected, activeTab } = useTabsNext();
+    const disabled = !!disabledProp;
+    const id = useId(idProp);
+    const wasMouseDown = useRef(false);
+    const [focusVisible, setFocusVisible] = useState(false);
+    const [focused, setFocused] = useState(false);
+    const handleFocusCapture = (event) => {
+      onFocusCapture == null ? void 0 : onFocusCapture(event);
+      if (value && id) {
+        activeTab.current = { value, id };
+      }
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setFocused(true);
+      if (!wasMouseDown.current && event.target.getAttribute("role") === "tab") {
+        setFocusVisible(true);
+      }
+      wasMouseDown.current = false;
+    };
+    const handleBlur = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      setFocused(false);
+      setFocusVisible(false);
+    };
+    const handleMouseDown = (event) => {
+      onMouseDown == null ? void 0 : onMouseDown(event);
+      wasMouseDown.current = true;
+    };
+    const [actions, setActions] = useState([]);
+    const registerAction = useCallback((id2) => {
+      setActions((old) => old.concat(id2));
+      return () => {
+        setActions((old) => old.filter((action) => action !== id2));
+      };
+    }, []);
+    const context = useMemo(
+      () => ({
+        tabId: id,
+        selected: selected === value,
+        focused,
+        value,
+        disabled,
+        actions,
+        registerAction
+      }),
+      [id, selected, value, focused, disabled, actions, registerAction]
+    );
+    return /* @__PURE__ */ jsx(TabNextContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("selected")]: selected === value,
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("focusVisible")]: focusVisible
+          },
+          className
+        ),
+        "data-overflowitem": "true",
+        ref,
+        onMouseDown: handleMouseDown,
+        onFocusCapture: handleFocusCapture,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        role: "presentation",
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+export { TabNext };
+//# sourceMappingURL=TabNext.js.map

package/dist-es/tabs-next/TabNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNext.js","sources":["../src/tabs-next/TabNext.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport tabCss from \"./TabNext.css\";\nimport { TabNextContext } from \"./TabNextContext\";\nimport { useTabsNext } from \"./TabsNextContext\";\n\nconst withBaseName = makePrefixer(\"saltTabNext\");\n\nexport interface TabNextProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the tab will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the tab.\n   */\n  value: string;\n}\n\nexport const TabNext = forwardRef<HTMLDivElement, TabNextProps>(\n  function Tab(props, ref): ReactElement<TabNextProps> {\n    const {\n      \"aria-labelledby\": ariaLabelledBy,\n      children,\n      className,\n      disabled: disabledProp,\n      onBlur,\n      onMouseDown,\n      onFocus,\n      onFocusCapture,\n      value,\n      id: idProp,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-next\",\n      css: tabCss,\n      window: targetWindow,\n    });\n\n    const { selected, activeTab } = useTabsNext();\n\n    const disabled = !!disabledProp;\n\n    const id = useId(idProp);\n\n    const wasMouseDown = useRef(false);\n    const [focusVisible, setFocusVisible] = useState(false);\n    const [focused, setFocused] = useState(false);\n\n    const handleFocusCapture = (event: FocusEvent<HTMLDivElement>) => {\n      onFocusCapture?.(event);\n      if (value && id) {\n        activeTab.current = { value, id };\n      }\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLDivElement>) => {\n      onFocus?.(event);\n\n      setFocused(true);\n\n      if (\n        !wasMouseDown.current &&\n        event.target.getAttribute(\"role\") === \"tab\"\n      ) {\n        setFocusVisible(true);\n      }\n\n      wasMouseDown.current = false;\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n      setFocusVisible(false);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => {\n      onMouseDown?.(event);\n      wasMouseDown.current = true;\n    };\n\n    const [actions, setActions] = useState<string[]>([]);\n\n    const registerAction = useCallback((id: string) => {\n      setActions((old) => old.concat(id));\n\n      return () => {\n        setActions((old) => old.filter((action) => action !== id));\n      };\n    }, []);\n\n    const context = useMemo(\n      () => ({\n        tabId: id,\n        selected: selected === value,\n        focused,\n        value,\n        disabled,\n        actions,\n        registerAction,\n      }),\n      [id, selected, value, focused, disabled, actions, registerAction],\n    );\n\n    return (\n      <TabNextContext.Provider value={context}>\n        <div\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"selected\")]: selected === value,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"focusVisible\")]: focusVisible,\n            },\n            className,\n          )}\n          data-overflowitem=\"true\"\n          ref={ref}\n          onMouseDown={handleMouseDown}\n          onFocusCapture={handleFocusCapture}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          role=\"presentation\"\n          {...rest}\n        >\n          {children}\n        </div>\n      </TabNextContext.Provider>\n    );\n  },\n);\n"],"names":["tabCss","id"],"mappings":"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"}

package/dist-es/tabs-next/TabNextAction.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { useId, useIsomorphicLayoutEffect, Button } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useTabNext } from './TabNextContext.js';
+
+const TabNextAction = forwardRef(
+  function TabNextAction2(props, ref) {
+    const { "aria-labelledby": ariaLabelledBy, id: idProp, ...rest } = props;
+    const id = useId(idProp);
+    const { focused, selected, tabId, registerAction } = useTabNext();
+    useIsomorphicLayoutEffect(() => {
+      if (id) {
+        return registerAction(id);
+      }
+    }, [registerAction, id]);
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        id,
+        "aria-labelledby": clsx(ariaLabelledBy, tabId, id),
+        tabIndex: focused || selected ? void 0 : -1,
+        appearance: "transparent",
+        sentiment: "neutral",
+        ref,
+        ...rest
+      }
+    );
+  }
+);
+
+export { TabNextAction };
+//# sourceMappingURL=TabNextAction.js.map

package/dist-es/tabs-next/TabNextAction.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextAction.js","sources":["../src/tabs-next/TabNextAction.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useTabNext } from \"./TabNextContext\";\n\nexport interface TabNextActionProps extends ButtonProps {}\n\nexport const TabNextAction = forwardRef<HTMLButtonElement, TabNextActionProps>(\n  function TabNextAction(props, ref) {\n    const { \"aria-labelledby\": ariaLabelledBy, id: idProp, ...rest } = props;\n\n    const id = useId(idProp);\n    const { focused, selected, tabId, registerAction } = useTabNext();\n\n    useIsomorphicLayoutEffect(() => {\n      if (id) {\n        return registerAction(id);\n      }\n    }, [registerAction, id]);\n\n    return (\n      <Button\n        id={id}\n        aria-labelledby={clsx(ariaLabelledBy, tabId, id)}\n        tabIndex={focused || selected ? undefined : -1}\n        appearance=\"transparent\"\n        sentiment=\"neutral\"\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":["TabNextAction"],"mappings":";;;;;;AAYO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,iBAAmB,EAAA,cAAA,EAAgB,IAAI,MAAQ,EAAA,GAAG,MAAS,GAAA,KAAA;AAEnE,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,IAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,KAAO,EAAA,cAAA,KAAmB,UAAW,EAAA;AAEhE,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,OAAO,eAAe,EAAE,CAAA;AAAA;AAC1B,KACC,EAAA,CAAC,cAAgB,EAAA,EAAE,CAAC,CAAA;AAEvB,IACE,uBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,iBAAiB,EAAA,IAAA,CAAK,cAAgB,EAAA,KAAA,EAAO,EAAE,CAAA;AAAA,QAC/C,QAAA,EAAU,OAAW,IAAA,QAAA,GAAW,KAAY,CAAA,GAAA,CAAA,CAAA;AAAA,QAC5C,UAAW,EAAA,aAAA;AAAA,QACX,SAAU,EAAA,SAAA;AAAA,QACV,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA;AAGN;;;;"}