@elliemae/ds-tabs 3.53.1-rc.0 → 3.54.0-next.2

package/dist/esm/parts/tabsPanel/TabsPanels.js

@@ -5,7 +5,6 @@ import React2, { useMemo, useContext, useCallback } from "react";
 import SwipeableViews from "react-swipeable-views";
 import { StyledPanelContainer } from "./styles.js";
 import { DSTabsContext } from "../../DSTabsCTX.js";
-import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
 const TabsPanels = () => {
   const {
     actualActiveTab,
@@ -18,9 +17,9 @@ const TabsPanels = () => {
       isDSMobile,
       tabPanelsProps,
       swipeableViewsContainerProps
-    }
+    },
+    globalClickHandler
   } = useContext(DSTabsContext);
-  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();
   const handleOnChangeIndex = useCallback(
     (index, indexLatest) => {
       if (!focusableTabsRef.current) return;
@@ -30,32 +29,40 @@ const TabsPanels = () => {
         const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
         if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex])
           return;
-        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId);
+        globalClickHandler({
+          event: { type: "click" },
+          target: "swipeableViews",
+          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId
+        });
         focusableTabsRef.current[newFocusableIndex].click();
       }
     },
-    [actualActiveTab, focusableTabsRef, handleOnTabChange]
+    [actualActiveTab, focusableTabsRef, globalClickHandler]
   );
   const panels = useMemo(() => {
     const emptyPanelRender = animated ? /* @__PURE__ */ jsx("div", {}) : null;
     return React2.Children.map(tabs, (tab) => {
-      const { tabId: panelId = "", style, children: content, disabled } = tab.props;
+      const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
       const isActive = actualActiveTab === panelId;
       const shouldRender = !onlyRenderActiveTab || isActive;
+      const getOwnerProps = () => tab.props;
+      const getOwnerPropsArguments = () => ({ panelId });
       if (disabled) return emptyPanelRender;
       if (!shouldRender) return emptyPanelRender;
       return /* @__PURE__ */ createElement(
         StyledPanelContainer,
         {
           ...tabPanelsProps,
+          getOwnerProps,
+          getOwnerPropsArguments,
           key: panelId,
           id: panelId,
           "aria-labelledby": `${panelId}-label`,
-          "aria-hidden": !isActive,
+          "aria-hidden": !isActive || !!applyAriaDisabled,
           "data-panel-id": panelId,
           "data-testid": "ds-tabs-tab-panel",
           hide: !isActive,
-          onMouseDown: handleOnMouseDown,
+          onClick: (event) => globalClickHandler({ event, target: "panel" }),
           role: "tabpanel",
           style: {
             ...tabPanelsProps?.style || {},
@@ -66,7 +73,7 @@ const TabsPanels = () => {
         content
       );
     });
-  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
+  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);
   const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {
     const childrenArray = React2.Children.toArray(tabs);
     const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);

package/dist/esm/parts/tabsPanel/TabsPanels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/TabsPanels.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: {\n      animated,\n      enableMouseEvents,\n      onlyRenderActiveTab,\n      children: tabs,\n      isDSMobile,\n      tabPanelsProps,\n      swipeableViewsContainerProps,\n    },\n  } = useContext(DSTabsContext);\n\n  const { handleOnTabChange, handleOnMouseDown } = useTabsCallbacks();\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId as string);\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, handleOnTabChange],\n  );\n\n  const panels = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    const emptyPanelRender = animated ? <div /> : null;\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n      const { tabId: panelId = '', style, children: content, disabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n\n      if (disabled) return emptyPanelRender;\n      if (!shouldRender) return emptyPanelRender;\n      return (\n        <StyledPanelContainer\n          {...tabPanelsProps}\n          key={panelId}\n          id={panelId}\n          aria-labelledby={`${panelId}-label`}\n          aria-hidden={!isActive}\n          data-panel-id={panelId}\n          data-testid=\"ds-tabs-tab-panel\"\n          hide={!isActive}\n          onMouseDown={handleOnMouseDown}\n          role=\"tabpanel\"\n          style={{\n            ...(tabPanelsProps?.style || {}),\n            ...(style || {}),\n          }}\n          isDSMobile={isDSMobile}\n        >\n          {content}\n        </StyledPanelContainer>\n      );\n    });\n  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);\n\n  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n    const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n    if (index === -1) return 0;\n    return index;\n  }, [actualActiveTab, tabs]);\n\n  if (animated) {\n    // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n    const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n    return (\n      <Comp\n        {...swipeableViewsContainerProps}\n        style={{\n          overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n          ...(swipeableViewsContainerProps?.style || {}),\n        }}\n        enableMouseEvents={enableMouseEvents}\n        index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </Comp>\n    );\n  }\n\n  return panels;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+EiB;AAShC;AAtFR,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAG1B,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAI,WAAW,aAAa;AAE5B,QAAM,EAAE,mBAAmB,kBAAkB,IAAI,iBAAiB;AASlE,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,0BAAkB,iBAAiB,QAAQ,iBAAiB,EAAE,SAAS,KAAe;AAKtF,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,iBAAiB;AAAA,EACvD;AAEA,QAAM,SAAS,QAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,oBAAC,SAAI,IAAK;AAC9C,WAAOA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,SAAS,IAAI,IAAI;AACxE,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAE7C,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC;AAAA,UACd,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,aAAa;AAAA,UACb,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,mBAAmB,UAAU,CAAC;AAExG,QAAM,qFAAqF,QAAQ,MAAM;AACvG,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,gBAAwB,WAAW;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable arrow-body-style */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useMemo, useContext, useCallback } from 'react';\nimport SwipeableViews from 'react-swipeable-views';\nimport { StyledPanelContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport type { DSTabT } from '../../react-desc-prop-types.js';\n\nexport const TabsPanels = (): JSX.Element | JSX.Element[] => {\n  const {\n    actualActiveTab,\n    focusableTabsRef,\n    props: {\n      animated,\n      enableMouseEvents,\n      onlyRenderActiveTab,\n      children: tabs,\n      isDSMobile,\n      tabPanelsProps,\n      swipeableViewsContainerProps,\n    },\n    globalClickHandler,\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Handler for swipe gestures and tab index changes. It:\n   * 1. Calculates the offset between current and new tab index\n   * 2. Finds the new focusable tab based on the offset\n   * 3. Updates the active tab and forces a click event\n   * 4. May cause unnecessary rerenders due to forced click events\n   */\n  const handleOnChangeIndex = useCallback(\n    (index: number, indexLatest: number) => {\n      if (!focusableTabsRef.current) return;\n\n      const offset = index - indexLatest;\n\n      if (focusableTabsRef.current) {\n        const currentIndexFocusable = focusableTabsRef.current?.findIndex((el) => el.dataset.tabId === actualActiveTab);\n\n        const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;\n\n        if (\n          newFocusableIndex < 0 ||\n          newFocusableIndex > focusableTabsRef.current?.length ||\n          !focusableTabsRef.current?.[newFocusableIndex]\n        )\n          return;\n        globalClickHandler({\n          event: { type: 'click' } as React.MouseEvent<HTMLDivElement>,\n          target: 'swipeableViews',\n          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId,\n        });\n\n        // swiping does not trigger centerTab function inside handleOnTabChange because there is no event\n        // by clicking we are manually forcing to center the tab\n\n        focusableTabsRef.current[newFocusableIndex].click();\n      }\n    },\n    [actualActiveTab, focusableTabsRef, globalClickHandler],\n  );\n\n  const panels = useMemo(() => {\n    // this component is based on React.children, swipeable views want an index in the array, not a tabId\n    // two bad patterns relying on each others results in:\n    //   - because of react.children,\n    //       to guarantee predictability in finding the index based on tabId we should never return \"null\" which is not part of React.Children.toArray\n    //\n    //  when not using swipeable views, we don't need to find the index based on tabId\n    //    so even if we return null the variable\n    //    indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull\n    //      (which will be calculating the wrong index)\n    //    will have no impact on the rendering\n    // https://react.dev/reference/react/Children#children-toarray-caveats\n    // Caveats\n    // Empty nodes (null, undefined, and Booleans) will be omitted in the returned array.\n    //\n    // So, long story short,\n    //  1 - do not remove next line, keep the <div /> instead of null when \"animated\"\n    //  2 - NEVER EVER BUILD API BASED ON REACT.CHILDREN (if you are writing code post 2022 and you are not working on a legacy codebase)\n    const emptyPanelRender = animated ? <div /> : null;\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>) => {\n      const { tabId: panelId = '', style, children: content, disabled, applyAriaDisabled } = tab.props;\n      const isActive = actualActiveTab === panelId;\n      const shouldRender = !onlyRenderActiveTab || isActive;\n      const getOwnerProps = () => tab.props;\n      const getOwnerPropsArguments = () => ({ panelId });\n\n      if (disabled) return emptyPanelRender;\n      if (!shouldRender) return emptyPanelRender;\n      return (\n        <StyledPanelContainer\n          {...tabPanelsProps}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n          key={panelId}\n          id={panelId}\n          aria-labelledby={`${panelId}-label`}\n          aria-hidden={!isActive || !!applyAriaDisabled}\n          data-panel-id={panelId}\n          data-testid=\"ds-tabs-tab-panel\"\n          hide={!isActive}\n          onClick={(event) => globalClickHandler({ event, target: 'panel' })}\n          role=\"tabpanel\"\n          style={{\n            ...(tabPanelsProps?.style || {}),\n            ...(style || {}),\n          }}\n          isDSMobile={isDSMobile}\n        >\n          {content}\n        </StyledPanelContainer>\n      );\n    });\n  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);\n\n  const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = useMemo(() => {\n    const childrenArray = React.Children.toArray(tabs) as React.ReactElement<DSTabT.Props>[];\n    const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);\n\n    if (index === -1) return 0;\n    return index;\n  }, [actualActiveTab, tabs]);\n\n  if (animated) {\n    // Ignore ts errors on the next line because the 'react-swipeable-views' package does not export a type for the SwipeableViews component\n    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n    const Comp = (SwipeableViews as any)?.default ?? SwipeableViews;\n    return (\n      <Comp\n        {...swipeableViewsContainerProps}\n        style={{\n          overflow: 'hidden', // https://jira.elliemae.io/browse/PUI-9906\n          ...(swipeableViewsContainerProps?.style || {}),\n        }}\n        enableMouseEvents={enableMouseEvents}\n        index={indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull}\n        onChangeIndex={handleOnChangeIndex}\n      >\n        {panels}\n      </Comp>\n    );\n  }\n\n  return panels;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiFiB;AAWhC;AA1FR,OAAOA,UAAS,SAAS,YAAY,mBAAmB;AACxD,OAAO,oBAAoB;AAC3B,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAGvB,MAAM,aAAa,MAAmC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,aAAa;AAS5B,QAAM,sBAAsB;AAAA,IAC1B,CAAC,OAAe,gBAAwB;AACtC,UAAI,CAAC,iBAAiB,QAAS;AAE/B,YAAM,SAAS,QAAQ;AAEvB,UAAI,iBAAiB,SAAS;AAC5B,cAAM,wBAAwB,iBAAiB,SAAS,UAAU,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe;AAE9G,cAAM,oBAAoB,yBAAyB,IAAI,wBAAwB,SAAS;AAExF,YACE,oBAAoB,KACpB,oBAAoB,iBAAiB,SAAS,UAC9C,CAAC,iBAAiB,UAAU,iBAAiB;AAE7C;AACF,2BAAmB;AAAA,UACjB,OAAO,EAAE,MAAM,QAAQ;AAAA,UACvB,QAAQ;AAAA,UACR,OAAO,iBAAiB,QAAQ,iBAAiB,EAAE,QAAQ;AAAA,QAC7D,CAAC;AAKD,yBAAiB,QAAQ,iBAAiB,EAAE,MAAM;AAAA,MACpD;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,kBAAkB,kBAAkB;AAAA,EACxD;AAEA,QAAM,SAAS,QAAQ,MAAM;AAkB3B,UAAM,mBAAmB,WAAW,oBAAC,SAAI,IAAK;AAC9C,WAAOA,OAAM,SAAS,IAAI,MAAM,CAAC,QAA0C;AACzE,YAAM,EAAE,OAAO,UAAU,IAAI,OAAO,UAAU,SAAS,UAAU,kBAAkB,IAAI,IAAI;AAC3F,YAAM,WAAW,oBAAoB;AACrC,YAAM,eAAe,CAAC,uBAAuB;AAC7C,YAAM,gBAAgB,MAAM,IAAI;AAChC,YAAM,yBAAyB,OAAO,EAAE,QAAQ;AAEhD,UAAI,SAAU,QAAO;AACrB,UAAI,CAAC,aAAc,QAAO;AAC1B,aACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,mBAAiB,GAAG,OAAO;AAAA,UAC3B,eAAa,CAAC,YAAY,CAAC,CAAC;AAAA,UAC5B,iBAAe;AAAA,UACf,eAAY;AAAA,UACZ,MAAM,CAAC;AAAA,UACP,SAAS,CAAC,UAAU,mBAAmB,EAAE,OAAO,QAAQ,QAAQ,CAAC;AAAA,UACjE,MAAK;AAAA,UACL,OAAO;AAAA,YACL,GAAI,gBAAgB,SAAS,CAAC;AAAA,YAC9B,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UACA;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH,GAAG,CAAC,UAAU,MAAM,iBAAiB,qBAAqB,gBAAgB,oBAAoB,UAAU,CAAC;AAEzG,QAAM,qFAAqF,QAAQ,MAAM;AACvG,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,IAAI;AACjD,UAAM,QAAQ,cAAc,UAAU,CAAC,QAAQ,IAAI,MAAM,UAAU,eAAe;AAElF,QAAI,UAAU,GAAI,QAAO;AACzB,WAAO;AAAA,EACT,GAAG,CAAC,iBAAiB,IAAI,CAAC;AAE1B,MAAI,UAAU;AAGZ,UAAM,OAAQ,gBAAwB,WAAW;AACjD,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,OAAO;AAAA,UACL,UAAU;AAAA;AAAA,UACV,GAAI,8BAA8B,SAAS,CAAC;AAAA,QAC9C;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,eAAe;AAAA,QAEd;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,SAAO;AACT;",
   "names": ["React"]
 }

package/dist/esm/parts/tabsPanel/styles.js

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
-const StyledPanelContainer = styled.div`
+import { TABS_SLOTS, DSTabsName } from "../../constants/index.js";
+const StyledPanelContainer = styled("div", {
+  name: DSTabsName,
+  slot: TABS_SLOTS.TAB_PANEL
+})`
   padding-top: 8px;
   &:focus {
     outline: none;

package/dist/esm/parts/tabsPanel/styles.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabsPanel/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled.div<StyledPanelContainerPropsT>`\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AAOhB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMvC,CAAC,EAAE,KAAK,MAAO,OAAO,4CAA4C,EAAG;AAAA;AAAA,IAErE,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { TABS_SLOTS, DSTabsName } from '../../constants/index.js';\n\ninterface StyledPanelContainerPropsT {\n  hide: boolean;\n  isDSMobile: boolean;\n}\n\nexport const StyledPanelContainer = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_PANEL,\n})<StyledPanelContainerPropsT>`\n  padding-top: 8px;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ hide }) => (hide ? 'visibility: hidden; position: absolute;' : '')}\n\n  ${({ isDSMobile }) => (isDSMobile ? `padding-top: 0;` : ``)}\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY,kBAAkB;AAOhC,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,WAAW;AACnB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMG,CAAC,EAAE,KAAK,MAAO,OAAO,4CAA4C,EAAG;AAAA;AAAA,IAErE,CAAC,EAAE,WAAW,MAAO,aAAa,oBAAoB,EAAG;AAAA;",
   "names": []
 }

package/dist/types/DSTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DSTabsT } from './react-desc-prop-types.js';
 declare const DSTabs: {
     (props: DSTabsT.Props): JSX.Element;

package/dist/types/DSTabsCTX.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DSTabsInternalsT } from './sharedTypes.js';
 export declare const DSTabsContext: import("react").Context<DSTabsInternalsT.DSTabsUseTabsContextT>;
 export declare const DSTabsCrossRefContext: import("react").Context<DSTabsInternalsT.DSTabsUseCrossRefContextT>;

package/dist/types/{parts/tabBar → config}/useResizeObserver.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type HandlerT = (measures: {
     width: number;
     height: number;

package/dist/types/exported-related/DSTab.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DSTabT } from '../react-desc-prop-types.js';
 declare const DSTab: {
     (props: DSTabT.Props): import("react").ReactNode;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { DSTabs, DSTabsWithSchema } from './DSTabs.js';
 export type { DSTabT, DSTabsT } from './react-desc-prop-types.js';
-export { TABS_SLOTS, TABS_DATA_TESTID, TABS_DATA_TESTID as DSTabsDatatestid, TAB_TYPES, TAB_TYPES as TabTypes, } from './constants/index.js';
+export { TABS_SLOTS, TABS_DATA_TESTID, TABS_DATA_TESTID as DSTabsDatatestid, TAB_TYPES, TAB_TYPES as TabTypes, DSTabsName, } from './constants/index.js';
 export { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';

package/dist/types/parts/carousel/Carousel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface CarouselPropsT {
     children: React.ReactNode;
     updateIndicatorStyle?: () => void;

package/dist/types/parts/carousel/styles.d.ts

@@ -1,10 +1,10 @@
-import { DSButtonV2 } from '@elliemae/ds-button-v2';
 import type { DSTabsInternalsT } from '../../sharedTypes.js';
 interface StyledCarouselButtonWrapperPropsT {
     right?: boolean;
     tabType: DSTabsInternalsT.TabTypesT;
 }
-export declare const StyledCarouselBtn: typeof DSButtonV2;
+export declare const StyledCarouselBtnLeft: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
+export declare const StyledCarouselBtnRight: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/styled-components").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
 export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledCarouselButtonWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/carousel/useCarousel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DSTabsInternalsT } from '../../sharedTypes.js';
 interface UseCarouselPropsT {
     updateIndicatorStyle?: () => void;

package/dist/types/parts/carousel/useCarouselCallbacks.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface UseCarouselCallbacksPropsT {
     getVisibleItemsOffset: () => number;
     recalcChevrons: () => void;

package/dist/types/parts/tabBar/TabBar.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TabBar: () => JSX.Element;

package/dist/types/parts/tabBar/styles.d.ts

@@ -42,6 +42,7 @@ export declare const StyledMobileGradient: import("styled-components").StyledCom
 /**  CSS Setters */
 export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTabWrapperPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledTabButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
+export declare const StyledSubTabButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, StyledTabButtonPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
 export declare const StyledSubTabsList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledSubTabsListPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledTabList: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, StyledTabListPropsT & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledRequiredMark: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;

package/dist/types/parts/tabsContent/TabsContent.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TabsContent: () => JSX.Element;

package/dist/types/parts/tabsContent/styles.d.ts

@@ -1 +1,2 @@
+export declare const StyledTabsContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const StyledTabBarContainer: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/dist/types/parts/tabsPanel/TabsPanels.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TabsPanels: () => JSX.Element | JSX.Element[];

package/dist/types/react-desc-prop-types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DSPropTypesSchema, GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
 import type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import type { SwipeableViewsProps } from 'react-swipeable-views';

package/dist/types/sharedTypes.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TAB_TYPES } from './constants/index.js';
 import type { DSTabsT } from './react-desc-prop-types.js';
 export declare namespace DSTabsInternalsT {
@@ -15,6 +14,11 @@ export declare namespace DSTabsInternalsT {
         right: boolean;
         left: boolean;
     }
+    interface GlobalClickHandlerT {
+        event: React.MouseEvent;
+        target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';
+        tabId?: string;
+    }
     interface DSTabsUseTabsContextT {
         props: DSTabsT.InternalProps;
         tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;
@@ -25,6 +29,12 @@ export declare namespace DSTabsInternalsT {
         carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;
         setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;
         actualActiveTab: string;
+        globalClickHandler: (data: GlobalClickHandlerT) => void;
+        updateIndicatorStyle: () => void;
+        updateMobileGradients: () => void;
+        setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;
+        indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
+        mobileGradients: DSTabsInternalsT.MobileGradientsT;
     }
     interface DSTabsUseCrossRefContextT {
         lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;

package/dist/types/tests/DSTabs.PUI-16477.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.53.1-rc.0",
+  "version": "3.54.0-next.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -38,18 +38,19 @@
   "dependencies": {
     "@react-hook/resize-observer": "~1.2.6",
     "react-swipeable-views": "~0.14.0",
-    "@elliemae/ds-button-v2": "3.53.1-rc.0",
-    "@elliemae/ds-icon": "3.53.1-rc.0",
-    "@elliemae/ds-props-helpers": "3.53.1-rc.0",
-    "@elliemae/ds-system": "3.53.1-rc.0",
-    "@elliemae/ds-icons": "3.53.1-rc.0",
-    "@elliemae/ds-typescript-helpers": "3.53.1-rc.0"
+    "@elliemae/ds-button-v2": "3.54.0-next.2",
+    "@elliemae/ds-icon": "3.54.0-next.2",
+    "@elliemae/ds-icons": "3.54.0-next.2",
+    "@elliemae/ds-props-helpers": "3.54.0-next.2",
+    "@elliemae/ds-typescript-helpers": "3.54.0-next.2",
+    "@elliemae/ds-system": "3.54.0-next.2"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.63",
+    "@elliemae/pui-cli": "9.0.0-next.65",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.53.1-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.54.0-next.2",
+    "@elliemae/ds-test-utils": "3.54.0-next.2"
   },
   "peerDependencies": {
     "lodash-es": "^4.17.21",

package/dist/cjs/parts/tabBar/useTabBar.js

@@ -1,105 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useTabBar_exports = {};
-__export(useTabBar_exports, {
-  useTabBar: () => useTabBar
-});
-module.exports = __toCommonJS(useTabBar_exports);
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_useResizeObserver = require("./useResizeObserver.js");
-var import_helpers = require("../../utils/helpers.js");
-var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_constants = require("../../constants/index.js");
-const useTabBar = () => {
-  const {
-    actualActiveTab,
-    actualActiveTabRef,
-    tabsListRef,
-    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders }
-  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const [mobileGradients, setMobileGradients] = (0, import_react.useState)({
-    left: false,
-    right: false
-  });
-  const [indicatorStyle, setIndicatorStyle] = (0, import_react.useState)(import_constants.DEFAULT_INDICATOR_STYLES);
-  const getIndicatorStyles = (0, import_react.useCallback)(() => {
-    if (tabsListRef.current) {
-      const tabList = tabsListRef.current;
-      const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !(0, import_helpers.isElementVisible)(activeTabButton, tabList)) return import_constants.DEFAULT_INDICATOR_STYLES;
-      const missingMargins = isDSMobile ? 0 : 16;
-      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
-      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      return {
-        left: Math.round(position),
-        width: Math.round(tabClientWidth)
-      };
-    }
-    return import_constants.DEFAULT_INDICATOR_STYLES;
-  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
-  const updateIndicatorStyle = (0, import_react.useCallback)(
-    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
-    [getIndicatorStyles, setIndicatorStyle]
-  );
-  (0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, tabsListRef.current);
-  (0, import_useResizeObserver.useResizeObserver)(updateIndicatorStyle, actualActiveTabRef.current);
-  const updateMobileGradients = (0, import_react.useCallback)(() => {
-    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
-      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
-      setMobileGradients({
-        left: (0, import_helpers.shouldHaveLeftGradient)(scrollLeft),
-        right: (0, import_helpers.shouldHaveRightGradient)(scrollLeft, clientWidth, scrollWidth)
-      });
-    }
-  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  (0, import_react.useLayoutEffect)(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [
-    updateMobileGradients,
-    showSelectionIndicator,
-    updateIndicatorStyle,
-    isDSMobile,
-    fixedTabsHeaders,
-    actualActiveTab
-  ]);
-  return {
-    updateIndicatorStyle,
-    setIndicatorStyle,
-    indicatorStyle,
-    mobileGradients,
-    updateMobileGradients
-  };
-};
-//# sourceMappingURL=useTabBar.js.map

package/dist/cjs/parts/tabBar/useTabBar.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DEFAULT_INDICATOR_STYLES } from '../../constants/index.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(DEFAULT_INDICATOR_STYLES);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return DEFAULT_INDICATOR_STYLES;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates indicator style with a delay. It:\n   * 1. Uses setTimeout to delay style updates\n   * 2. Called on resize and tab changes\n   */\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\n   */\n  const updateMobileGradients = useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,+BAAkC;AAClC,qBAAkF;AAClF,uBAA8B;AAG9B,uBAAyC;AAUlC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,QAAI,yBAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,QAAI,uBAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA2C,yCAAwB;AAE/G,QAAM,yBAAqB,0BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,KAAC,iCAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAOlE,QAAM,2BAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,kDAAkB,sBAAsB,YAAY,OAAO;AAC3D,kDAAkB,sBAAsB,mBAAmB,OAAO;AAOlE,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,UAAM,uCAAuB,UAAU;AAAA,QACvC,WAAO,wCAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/cjs/utils/hooks/useTabsCallbacks.js

@@ -1,66 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useTabsCallbacks_exports = {};
-__export(useTabsCallbacks_exports, {
-  useTabsCallbacks: () => useTabsCallbacks
-});
-module.exports = __toCommonJS(useTabsCallbacks_exports);
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_helpers = require("../helpers.js");
-var import_DSTabsCTX = require("../../DSTabsCTX.js");
-const useTabsCallbacks = () => {
-  const {
-    setInternalActiveTab,
-    tabsListRef,
-    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders }
-  } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
-  const handleOnTabChange = (0, import_react.useCallback)(
-    (tabId, e) => {
-      setInternalActiveTab(tabId);
-      onTabChange(tabId, e);
-      if (isDSMobile && !fixedTabsHeaders && e) {
-        (0, import_helpers.centerTab)({ e, listRef: tabsListRef });
-      }
-    },
-    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]
-  );
-  const handleOnMouseDown = (0, import_react.useCallback)(
-    (e) => {
-      const role = e.target.getAttribute("role");
-      if (role !== "tabpanel" && allowTextSelection) e.stopPropagation();
-    },
-    [allowTextSelection]
-  );
-  return {
-    handleOnTabChange,
-    handleOnMouseDown
-  };
-};
-//# sourceMappingURL=useTabsCallbacks.js.map

package/dist/cjs/utils/hooks/useTabsCallbacks.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/utils/hooks/useTabsCallbacks.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { centerTab } from '../helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseTabsCallbacksReturnTypeT {\n  handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;\n  handleOnMouseDown: (e: React.MouseEvent) => void;\n}\n\nexport const useTabsCallbacks = (): UseTabsCallbacksReturnTypeT => {\n  const {\n    setInternalActiveTab,\n    tabsListRef,\n    props: { onTabChange, isDSMobile, allowTextSelection, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Main handler for active tab changes. It is responsible for:\n   * 1. Updating the internal active tab state\n   * 2. Notifying the user through the onTabChange callback\n   * 3. Centering the tab on mobile if needed\n   */\n  const handleOnTabChange = useCallback(\n    (tabId: string, e?: React.MouseEvent) => {\n      setInternalActiveTab(tabId);\n      onTabChange(tabId, e);\n      if (isDSMobile && !fixedTabsHeaders && e) {\n        centerTab({ e, listRef: tabsListRef });\n      }\n    },\n    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef],\n  );\n\n  const handleOnMouseDown = useCallback(\n    (e: React.MouseEvent) => {\n      const role = (e.target as HTMLElement).getAttribute('role');\n      if (role !== 'tabpanel' && allowTextSelection) e.stopPropagation();\n    },\n    [allowTextSelection],\n  );\n\n  return {\n    handleOnTabChange,\n    handleOnMouseDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AACxC,qBAA0B;AAC1B,uBAA8B;AAOvB,MAAM,mBAAmB,MAAmC;AACjE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO,EAAE,aAAa,YAAY,oBAAoB,iBAAiB;AAAA,EACzE,QAAI,yBAAW,8BAAa;AAQ5B,QAAM,wBAAoB;AAAA,IACxB,CAAC,OAAe,MAAyB;AACvC,2BAAqB,KAAK;AAC1B,kBAAY,OAAO,CAAC;AACpB,UAAI,cAAc,CAAC,oBAAoB,GAAG;AACxC,sCAAU,EAAE,GAAG,SAAS,YAAY,CAAC;AAAA,MACvC;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,YAAY,aAAa,sBAAsB,WAAW;AAAA,EAC/E;AAEA,QAAM,wBAAoB;AAAA,IACxB,CAAC,MAAwB;AACvB,YAAM,OAAQ,EAAE,OAAuB,aAAa,MAAM;AAC1D,UAAI,SAAS,cAAc,mBAAoB,GAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}

package/dist/esm/parts/tabBar/useTabBar.js

@@ -1,75 +0,0 @@
-import * as React from "react";
-import { useCallback, useLayoutEffect, useState, useContext } from "react";
-import { useResizeObserver } from "./useResizeObserver.js";
-import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../../utils/helpers.js";
-import { DSTabsContext } from "../../DSTabsCTX.js";
-import { DEFAULT_INDICATOR_STYLES } from "../../constants/index.js";
-const useTabBar = () => {
-  const {
-    actualActiveTab,
-    actualActiveTabRef,
-    tabsListRef,
-    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders }
-  } = useContext(DSTabsContext);
-  const [mobileGradients, setMobileGradients] = useState({
-    left: false,
-    right: false
-  });
-  const [indicatorStyle, setIndicatorStyle] = useState(DEFAULT_INDICATOR_STYLES);
-  const getIndicatorStyles = useCallback(() => {
-    if (tabsListRef.current) {
-      const tabList = tabsListRef.current;
-      const activeTabButton = actualActiveTabRef.current;
-      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;
-      const missingMargins = isDSMobile ? 0 : 16;
-      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
-      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      return {
-        left: Math.round(position),
-        width: Math.round(tabClientWidth)
-      };
-    }
-    return DEFAULT_INDICATOR_STYLES;
-  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
-  const updateIndicatorStyle = useCallback(
-    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
-    [getIndicatorStyles, setIndicatorStyle]
-  );
-  useResizeObserver(updateIndicatorStyle, tabsListRef.current);
-  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);
-  const updateMobileGradients = useCallback(() => {
-    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
-      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
-      setMobileGradients({
-        left: shouldHaveLeftGradient(scrollLeft),
-        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
-      });
-    }
-  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
-  useLayoutEffect(() => {
-    if (showSelectionIndicator) {
-      updateIndicatorStyle();
-    }
-    if (isDSMobile && !fixedTabsHeaders) {
-      updateMobileGradients();
-    }
-  }, [
-    updateMobileGradients,
-    showSelectionIndicator,
-    updateIndicatorStyle,
-    isDSMobile,
-    fixedTabsHeaders,
-    actualActiveTab
-  ]);
-  return {
-    updateIndicatorStyle,
-    setIndicatorStyle,
-    indicatorStyle,
-    mobileGradients,
-    updateMobileGradients
-  };
-};
-export {
-  useTabBar
-};
-//# sourceMappingURL=useTabBar.js.map

package/dist/esm/parts/tabBar/useTabBar.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useTabBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DEFAULT_INDICATOR_STYLES } from '../../constants/index.js';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(DEFAULT_INDICATOR_STYLES);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return DEFAULT_INDICATOR_STYLES;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates indicator style with a delay. It:\n   * 1. Uses setTimeout to delay style updates\n   * 2. Called on resize and tab changes\n   */\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\n   */\n  const updateMobileGradients = useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,iBAAiB,UAAU,kBAAkB;AACnE,SAAS,yBAAyB;AAClC,SAAS,kBAAkB,wBAAwB,+BAA+B;AAClF,SAAS,qBAAqB;AAG9B,SAAS,gCAAgC;AAUlC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY,iBAAiB;AAAA,EAChE,IAAI,WAAW,aAAa;AAE5B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA2C,wBAAwB;AAE/G,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,iBAAiB,iBAAiB,OAAO,EAAG,QAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,aAAO;AAAA,QACL,MAAM,KAAK,MAAM,QAAQ;AAAA,QACzB,OAAO,KAAK,MAAM,cAAc;AAAA,MAClC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAOlE,QAAM,uBAAuB;AAAA,IAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG;AAAA,IACnE,CAAC,oBAAoB,iBAAiB;AAAA,EACxC;AAEA,oBAAkB,sBAAsB,YAAY,OAAO;AAC3D,oBAAkB,sBAAsB,mBAAmB,OAAO;AAOlE,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,YAAY,IAAI,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,uBAAuB,UAAU;AAAA,QACvC,OAAO,wBAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,kBAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
-  "names": []
-}