@elliemae/ds-tabs 3.16.0-next.2 → 3.16.0-next.21

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/utils/hooks/useKeyboardNavigation.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\n\ninterface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n        if (nextTab) nextTab.focus();\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n        if (prevTab) prevTab.focus();\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwC;AACxC,uBAAqD;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,QAAI,yBAAW,8BAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,QAAI,yBAAW,sCAAqB;AAEvF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI;AACjG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,iCAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,6BAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport type React from 'react';\nimport { useCallback, useContext } from 'react';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\n\ninterface UseKeyboardNavigationReturnTypeT {\n  handleOnKeyDown: (e: React.KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = (): UseKeyboardNavigationReturnTypeT => {\n  const { focusableTabsRef } = useContext(DSTabsContext);\n  const { firstSubtabInternalRef, lastTabInternalRef } = useContext(DSTabsCrossRefContext);\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowRight' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const nextTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) + 1];\n        if (nextTab) nextTab.focus();\n        if (!nextTab) return;\n      }\n\n      if (e.key === 'ArrowLeft' && focusableTabsRef.current) {\n        e.preventDefault();\n        e.stopPropagation();\n        const prevTab =\n          focusableTabsRef.current[focusableTabsRef?.current?.indexOf?.(e.target as HTMLButtonElement) - 1];\n        if (prevTab) prevTab.focus();\n        if (!prevTab) return;\n      }\n\n      if (e.key === 'ArrowDown') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) firstSubtabInternalRef.current?.focus();\n      }\n\n      if (e.key === 'ArrowUp') {\n        e.preventDefault();\n        e.stopPropagation();\n        const canFocusCrossTabs = firstSubtabInternalRef?.current && lastTabInternalRef?.current;\n        if (canFocusCrossTabs) lastTabInternalRef.current?.focus();\n      }\n    },\n    [firstSubtabInternalRef, lastTabInternalRef, focusableTabsRef],\n  );\n\n  return {\n    handleOnKeyDown,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,mBAAwC;AACxC,uBAAqD;AAM9C,MAAM,wBAAwB,MAAwC;AAC3E,QAAM,EAAE,iBAAiB,QAAI,yBAAW,8BAAa;AACrD,QAAM,EAAE,wBAAwB,mBAAmB,QAAI,yBAAW,sCAAqB;AAEvF,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,gBAAgB,iBAAiB,SAAS;AACtD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,eAAe,iBAAiB,SAAS;AACrD,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,UACJ,iBAAiB,QAAQ,kBAAkB,SAAS,UAAU,EAAE,MAA2B,IAAI,CAAC;AAClG,YAAI;AAAS,kBAAQ,MAAM;AAC3B,YAAI,CAAC;AAAS;AAAA,MAChB;AAEA,UAAI,EAAE,QAAQ,aAAa;AACzB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,iCAAuB,SAAS,MAAM;AAAA,MAC/D;AAEA,UAAI,EAAE,QAAQ,WAAW;AACvB,UAAE,eAAe;AACjB,UAAE,gBAAgB;AAClB,cAAM,oBAAoB,wBAAwB,WAAW,oBAAoB;AACjF,YAAI;AAAmB,6BAAmB,SAAS,MAAM;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,wBAAwB,oBAAoB,gBAAgB;AAAA,EAC/D;AAEA,SAAO;AAAA,IACL;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
   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
 ));
@@ -29,8 +33,8 @@ __export(useTabsCallbacks_exports, {
 module.exports = __toCommonJS(useTabsCallbacks_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_helpers = require("../helpers");
-var import_DSTabsCTX = require("../../DSTabsCTX");
+var import_helpers = require("../helpers.js");
+var import_DSTabsCTX = require("../../DSTabsCTX.js");
 const useTabsCallbacks = () => {
   const {
     setInternalActiveTab,

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

@@ -1,7 +1,7 @@
 {
   "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';\nimport { DSTabsContext } from '../../DSTabsCTX';\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  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;AAE5B,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;AAAoB,UAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "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  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;AAE5B,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;AAAoB,UAAE,gBAAgB;AAAA,IACnE;AAAA,IACA,CAAC,kBAAkB;AAAA,EACrB;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/DSTabs.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { describe } from "@elliemae/ds-utilities";
-import { tabsPropTypes } from "./propTypes";
-import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX";
-import { TabsContent } from "./parts/tabsContent/TabsContent";
-import { useTabs } from "./config/useTabs";
-import { useCrossRef } from "./config/useCrossRef";
-import { TabTypes } from "./utils/constants";
+import { describe } from "@elliemae/ds-props-helpers";
+import { tabsPropTypes } from "./propTypes.js";
+import { DSTabsContext, DSTabsCrossRefContext } from "./DSTabsCTX.js";
+import { TabsContent } from "./parts/tabsContent/TabsContent.js";
+import { useTabs } from "./config/useTabs.js";
+import { useCrossRef } from "./config/useCrossRef.js";
+import { TabTypes } from "./utils/constants.js";
 const DSTabs = (props) => {
   const ctx = useTabs(props);
   const crossRefsCtx = useCrossRef();

package/dist/esm/DSTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabsPropTypes } from './propTypes';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX';\nimport { TabsContent } from './parts/tabsContent/TabsContent';\nimport { useTabs } from './config/useTabs';\nimport { useCrossRef } from './config/useCrossRef';\nimport { TabTypes } from './utils/constants';\nimport type { DSTabsT } from './propTypes';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n  const ctx = useTabs(props);\n  const crossRefsCtx = useCrossRef();\n\n  const { type } = props;\n\n  if (type === TabTypes.SUBTABS) {\n    return (\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    );\n  }\n\n  return (\n    <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    </DSTabsCrossRefContext.Provider>\n  );\n};\n\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabsPropTypes } from './propTypes.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from './DSTabsCTX.js';\nimport { TabsContent } from './parts/tabsContent/TabsContent.js';\nimport { useTabs } from './config/useTabs.js';\nimport { useCrossRef } from './config/useCrossRef.js';\nimport { TabTypes } from './utils/constants.js';\nimport type { DSTabsT } from './propTypes.js';\n\nconst DSTabs = (props: DSTabsT.Props): JSX.Element => {\n  const ctx = useTabs(props);\n  const crossRefsCtx = useCrossRef();\n\n  const { type } = props;\n\n  if (type === TabTypes.SUBTABS) {\n    return (\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    );\n  }\n\n  return (\n    <DSTabsCrossRefContext.Provider value={crossRefsCtx}>\n      <DSTabsContext.Provider value={ctx}>\n        <TabsContent />\n      </DSTabsContext.Provider>\n    </DSTabsCrossRefContext.Provider>\n  );\n};\n\nDSTabs.propTypes = tabsPropTypes as WeakValidationMap<unknown>;\nconst DSTabsWithSchema = describe<DSTabsT.Props>(DSTabs);\nDSTabsWithSchema.propTypes = tabsPropTypes;\n\nexport { DSTabs, DSTabsWithSchema };\nexport default DSTabs;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACoBf;AAlBR,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAC9B,SAAS,eAAe,6BAA6B;AACrD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAGzB,MAAM,SAAS,CAAC,UAAsC;AACpD,QAAM,MAAM,QAAQ,KAAK;AACzB,QAAM,eAAe,YAAY;AAEjC,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,SAAS,SAAS,SAAS;AAC7B,WACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf;AAAA,EAEJ;AAEA,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,cACrC,8BAAC,cAAc,UAAd,EAAuB,OAAO,KAC7B,8BAAC,eAAY,GACf,GACF;AAEJ;AAEA,OAAO,YAAY;AACnB,MAAM,mBAAmB,SAAwB,MAAM;AACvD,iBAAiB,YAAY;AAG7B,IAAO,iBAAQ;",
   "names": []
 }

package/dist/esm/DSTabsCTX.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createContext, createRef } from "react";
-import { tabsDefaultProps as defaultProps } from "./propTypes";
+import { tabsDefaultProps as defaultProps } from "./propTypes.js";
 const noop = () => {
 };
 const defaultContext = {

package/dist/esm/DSTabsCTX.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSTabsCTX.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './propTypes';\nimport type { DSTabsInternalsT } from './sharedTypes';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n  tabsListRef: createRef<HTMLDivElement | null>(),\n  carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n  focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n  tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n  actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n  setInternalActiveTab: noop,\n  actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { tabsDefaultProps as defaultProps } from './propTypes.js';\nimport type { DSTabsInternalsT } from './sharedTypes.js';\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst defaultContext = {\n  props: defaultProps,\n  tabsRef: createRef<Record<number, HTMLButtonElement> | null>(),\n  tabsListRef: createRef<HTMLDivElement | null>(),\n  carouselOnlyListRef: createRef<HTMLDivElement | null>(),\n  focusableTabsRef: createRef<HTMLButtonElement[] | null>(),\n  tabsRefAsArray: createRef<HTMLButtonElement[] | null>(),\n  actualActiveTabRef: createRef<HTMLButtonElement | null>(),\n  setInternalActiveTab: noop,\n  actualActiveTab: '',\n};\n\nconst defaultCrossRefsContext = {\n  lastTabInternalRef: createRef<HTMLButtonElement | null>(),\n  firstSubtabInternalRef: createRef<HTMLButtonElement | null>(),\n};\n\nexport const DSTabsContext = createContext<DSTabsInternalsT.DSTabsUseTabsContextT>(defaultContext);\nexport const DSTabsCrossRefContext = createContext<DSTabsInternalsT.DSTabsUseCrossRefContextT>(defaultCrossRefsContext);\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,eAAe,iBAAiB;AACzC,SAAS,oBAAoB,oBAAoB;AAIjD,MAAM,OAAO,MAAM;AAAC;AAEpB,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,SAAS,UAAoD;AAAA,EAC7D,aAAa,UAAiC;AAAA,EAC9C,qBAAqB,UAAiC;AAAA,EACtD,kBAAkB,UAAsC;AAAA,EACxD,gBAAgB,UAAsC;AAAA,EACtD,oBAAoB,UAAoC;AAAA,EACxD,sBAAsB;AAAA,EACtB,iBAAiB;AACnB;AAEA,MAAM,0BAA0B;AAAA,EAC9B,oBAAoB,UAAoC;AAAA,EACxD,wBAAwB,UAAoC;AAC9D;AAEO,MAAM,gBAAgB,cAAsD,cAAc;AAC1F,MAAM,wBAAwB,cAA0D,uBAAuB;",
   "names": []
 }

package/dist/esm/config/useCrossRef.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useCrossRef.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useMemo } from 'react';\nimport type { DSTabsInternalsT } from '../sharedTypes';\n\nexport const useCrossRef = (): DSTabsInternalsT.DSTabsUseCrossRefContextT => {\n  const firstSubtabInternalRef = useRef<HTMLButtonElement>();\n  const lastTabInternalRef = useRef<HTMLButtonElement>();\n\n  const ctx = useMemo(\n    () => ({\n      firstSubtabInternalRef,\n      lastTabInternalRef,\n    }),\n    [],\n  );\n\n  return ctx;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useMemo } from 'react';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useCrossRef = (): DSTabsInternalsT.DSTabsUseCrossRefContextT => {\n  const firstSubtabInternalRef = useRef<HTMLButtonElement>();\n  const lastTabInternalRef = useRef<HTMLButtonElement>();\n\n  const ctx = useMemo(\n    () => ({\n      firstSubtabInternalRef,\n      lastTabInternalRef,\n    }),\n    [],\n  );\n\n  return ctx;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,eAAe;AAGzB,MAAM,cAAc,MAAkD;AAC3E,QAAM,yBAAyB,OAA0B;AACzD,QAAM,qBAAqB,OAA0B;AAErD,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/config/useTabs.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useRef, useState, useMemo, useEffect } from "react";
-import { useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
-import { tabsDefaultProps } from "../propTypes";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { tabsDefaultProps } from "../propTypes.js";
 const useTabs = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, tabsDefaultProps);
   const { activeTab } = propsWithDefaults;

package/dist/esm/config/useTabs.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useTabs.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\nimport { tabsDefaultProps } from '../propTypes';\nimport type { DSTabsT } from '../propTypes';\nimport type { DSTabsInternalsT } from '../sharedTypes';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n  const { activeTab } = propsWithDefaults;\n\n  const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n  const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n  const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n  const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n  const tabsListRef = useRef<HTMLDivElement | null>(null);\n  const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>('');\n\n  const actualActiveTab = useMemo(() => {\n    if (activeTab !== undefined) return activeTab;\n    return internalActiveTab;\n  }, [activeTab, internalActiveTab]);\n\n  useEffect(() => {\n    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n  }, [actualActiveTab]);\n\n  useEffect(() => {\n    if (activeTab === undefined) {\n      const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n      setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n    }\n  }, [activeTab]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n    }),\n    [actualActiveTab, propsWithDefaults],\n  );\n\n  return ctx;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { tabsDefaultProps } from '../propTypes.js';\nimport type { DSTabsT } from '../propTypes.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, tabsDefaultProps);\n\n  const { activeTab } = propsWithDefaults;\n\n  const tabsRef = useRef<Record<number, HTMLButtonElement>>({});\n  const tabsRefAsArray = useRef<HTMLButtonElement[]>([]);\n  const focusableTabsRef = useRef<HTMLButtonElement[]>([]);\n  const carouselOnlyListRef = useRef<HTMLDivElement | null>(null);\n  const tabsListRef = useRef<HTMLDivElement | null>(null);\n  const actualActiveTabRef = useRef<HTMLButtonElement | null>(null);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>('');\n\n  const actualActiveTab = useMemo(() => {\n    if (activeTab !== undefined) return activeTab;\n    return internalActiveTab;\n  }, [activeTab, internalActiveTab]);\n\n  useEffect(() => {\n    actualActiveTabRef.current = focusableTabsRef.current.find((el) => el.dataset.tabId === actualActiveTab) ?? null;\n  }, [actualActiveTab]);\n\n  useEffect(() => {\n    if (activeTab === undefined) {\n      const firstAvailableTab = focusableTabsRef.current.find((el) => el.ariaDisabled !== 'true');\n      setInternalActiveTab(firstAvailableTab?.dataset.tabId || '');\n    }\n  }, [activeTab]);\n\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefaults,\n      tabsRef,\n      focusableTabsRef,\n      tabsListRef,\n      tabsRefAsArray,\n      setInternalActiveTab,\n      actualActiveTab,\n      actualActiveTabRef,\n      carouselOnlyListRef,\n    }),\n    [actualActiveTab, propsWithDefaults],\n  );\n\n  return ctx;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,UAAU,SAAS,iBAAiB;AACrD,SAAS,oCAAoC;AAC7C,SAAS,wBAAwB;AAI1B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,gBAAgB;AAErG,QAAM,EAAE,UAAU,IAAI;AAEtB,QAAM,UAAU,OAA0C,CAAC,CAAC;AAC5D,QAAM,iBAAiB,OAA4B,CAAC,CAAC;AACrD,QAAM,mBAAmB,OAA4B,CAAC,CAAC;AACvD,QAAM,sBAAsB,OAA8B,IAAI;AAC9D,QAAM,cAAc,OAA8B,IAAI;AACtD,QAAM,qBAAqB,OAAiC,IAAI;AAEhE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB,EAAE;AAErE,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc;AAAW,aAAO;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,WAAW,iBAAiB,CAAC;AAEjC,YAAU,MAAM;AACd,uBAAmB,UAAU,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,QAAQ,UAAU,eAAe,KAAK;AAAA,EAC9G,GAAG,CAAC,eAAe,CAAC;AAEpB,YAAU,MAAM;AACd,QAAI,cAAc,QAAW;AAC3B,YAAM,oBAAoB,iBAAiB,QAAQ,KAAK,CAAC,OAAO,GAAG,iBAAiB,MAAM;AAC1F,2BAAqB,mBAAmB,QAAQ,SAAS,EAAE;AAAA,IAC7D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,iBAAiB,iBAAiB;AAAA,EACrC;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/exported-related/DSTab.js

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import React2 from "react";
-import { describe } from "@elliemae/ds-utilities";
-import { tabPropTypes } from "../propTypes";
+import { describe } from "@elliemae/ds-props-helpers";
+import { tabPropTypes } from "../propTypes.js";
 const DSTab = (props) => /* @__PURE__ */ jsx(React2.Fragment, { ...props });
 DSTab.propTypes = tabPropTypes;
 const DSTabWithSchema = describe(DSTab);

package/dist/esm/exported-related/DSTab.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/DSTab.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-utilities';\nimport { tabPropTypes } from '../propTypes';\nimport type { DSTabT } from '../propTypes';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { tabPropTypes } from '../propTypes.js';\nimport type { DSTabT } from '../propTypes.js';\n\nconst DSTab = (props: DSTabT.Props): JSX.Element => <React.Fragment {...props} />;\n\nDSTab.propTypes = tabPropTypes as WeakValidationMap<unknown>;\nconst DSTabWithSchema = describe(DSTab);\nDSTabWithSchema.propTypes = tabPropTypes;\n\nexport { DSTab, DSTabWithSchema };\nexport default DSTab;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACM6B;AANpD,OAAOA,YAAW;AAElB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAG7B,MAAM,QAAQ,CAAC,UAAqC,oBAACA,OAAM,UAAN,EAAgB,GAAG,OAAO;AAE/E,MAAM,YAAY;AAClB,MAAM,kBAAkB,SAAS,KAAK;AACtC,gBAAgB,YAAY;AAG5B,IAAO,gBAAQ;",
   "names": ["React"]
 }

package/dist/esm/index.js

@@ -1,8 +1,8 @@
 import * as React from "react";
-export * from "./exported-related/DSTab";
-export * from "./DSTabs";
-import { TabTypes } from "./utils/constants";
-export * from "./DSTabsDatatestid";
+export * from "./exported-related/DSTab.js";
+export * from "./DSTabs.js";
+import { TabTypes } from "./utils/constants.js";
+export * from "./DSTabsDatatestid.js";
 export {
   TabTypes
 };

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related/DSTab';\nexport * from './DSTabs';\nexport { TabTypes } from './utils/constants';\nexport * from './DSTabsDatatestid';\nexport type { DSTabT, DSTabsT } from './propTypes';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './exported-related/DSTab.js';\nexport * from './DSTabs.js';\nexport { TabTypes } from './utils/constants.js';\nexport * from './DSTabsDatatestid.js';\nexport type { DSTabT, DSTabsT } from './propTypes.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,SAAS,gBAAgB;AACzB,cAAc;",
   "names": []
 }

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/carousel/Carousel.js

@@ -4,10 +4,10 @@ import { useContext } from "react";
 import { DSIconSizes } from "@elliemae/ds-icon";
 import { BUTTON_TYPES } from "@elliemae/ds-button";
 import { ChevronRight, ChevronLeft } from "@elliemae/ds-icons";
-import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles";
-import { useCarousel } from "./useCarousel";
-import { DSTabsContext } from "../../DSTabsCTX";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid";
+import { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from "./styles.js";
+import { useCarousel } from "./useCarousel.js";
+import { DSTabsContext } from "../../DSTabsCTX.js";
+import { DSTabsDatatestid } from "../../DSTabsDatatestid.js";
 const Carousel = ({ children, updateIndicatorStyle }) => {
   const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({
     updateIndicatorStyle

package/dist/esm/parts/carousel/Carousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/Carousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles';\nimport { useCarousel } from './useCarousel';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\ninterface CarouselPropsT {\n  children: React.ReactNode[];\n  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext } from 'react';\nimport { DSIconSizes } from '@elliemae/ds-icon';\nimport { BUTTON_TYPES } from '@elliemae/ds-button';\nimport { ChevronRight, ChevronLeft } from '@elliemae/ds-icons';\nimport { StyledCarouselBtn, StyledCarouselButtonWrapper, StyledCarouselWrapper, StyledChildrenWrap } from './styles.js';\nimport { useCarousel } from './useCarousel.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\n\ninterface CarouselPropsT {\n  children: React.ReactNode[];\n  updateIndicatorStyle?: () => void;\n}\n\nexport const Carousel = ({ children, updateIndicatorStyle }: CarouselPropsT): JSX.Element => {\n  const { showChevrons, leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarousel({\n    updateIndicatorStyle,\n  });\n\n  const {\n    carouselOnlyListRef,\n    props: { type },\n  } = useContext(DSTabsContext);\n\n  return (\n    <StyledCarouselWrapper>\n      {showChevrons.left && (\n        <StyledCarouselButtonWrapper tabType={type}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={leftButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_LEFT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronLeft size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      {showChevrons.right && (\n        <StyledCarouselButtonWrapper tabType={type} right={showChevrons.right}>\n          <StyledCarouselBtn\n            size=\"s\"\n            onClick={rightButtonOnClick}\n            tabIndex={-1}\n            data-testid={DSTabsDatatestid.CAROUSEL.BUTTON_RIGHT}\n            buttonType={BUTTON_TYPES.ICON}\n          >\n            <ChevronRight size={DSIconSizes.S} />\n          </StyledCarouselBtn>\n        </StyledCarouselButtonWrapper>\n      )}\n      <StyledChildrenWrap ref={carouselOnlyListRef} onClick={handleOnClick} onScroll={handleOnScroll}>\n        {children}\n      </StyledChildrenWrap>\n    </StyledCarouselWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACyBnB,SAUQ,KAVR;AAzBJ,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,mBAAmB,6BAA6B,uBAAuB,0BAA0B;AAC1G,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAO1B,MAAM,WAAW,CAAC,EAAE,UAAU,qBAAqB,MAAmC;AAC3F,QAAM,EAAE,cAAc,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,YAAY;AAAA,IACzG;AAAA,EACF,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,KAAK;AAAA,EAChB,IAAI,WAAW,aAAa;AAE5B,SACE,qBAAC,yBACE;AAAA,iBAAa,QACZ,oBAAC,+BAA4B,SAAS,MACpC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,8BAAC,eAAY,MAAM,YAAY,GAAG;AAAA;AAAA,IACpC,GACF;AAAA,IAED,aAAa,SACZ,oBAAC,+BAA4B,SAAS,MAAM,OAAO,aAAa,OAC9D;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,UAAU;AAAA,QACV,eAAa,iBAAiB,SAAS;AAAA,QACvC,YAAY,aAAa;AAAA,QAEzB,8BAAC,gBAAa,MAAM,YAAY,GAAG;AAAA;AAAA,IACrC,GACF;AAAA,IAEF,oBAAC,sBAAmB,KAAK,qBAAqB,SAAS,eAAe,UAAU,gBAC7E,UACH;AAAA,KACF;AAEJ;",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { DSButtonV2 } from "@elliemae/ds-button";
-import { TabTypes } from "../../utils/constants";
+import { TabTypes } from "../../utils/constants.js";
 const StyledCarouselBtn = styled(DSButtonV2)`
   margin: 0;
   min-width: ${({ theme }) => theme.space.xs};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TabTypes.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAQlB,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAIvC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,cAAc,MAAM,OAAO,QAAQ;AAAA,KAEtH;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledCarouselButtonWrapperPropsT {\n  right?: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\nexport const StyledCarouselBtn = styled(DSButtonV2)`\n  margin: 0;\n  min-width: ${({ theme }) => theme.space.xs};\n  width: ${({ theme }) => theme.space.xs};\n\n  &:hover:not(:disabled) {\n    background-color: transparent;\n  }\n  background-color: transparent;\n  border-radius: 0px;\n\n  & .em-ds-icon svg {\n    fill: ${({ theme }) => theme.colors.brand[600]};\n  }\n`;\n\nexport const StyledCarouselWrapper = styled.span`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nexport const StyledChildrenWrap = styled.div`\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  overflow-x: hidden;\n`;\n\nexport const StyledCarouselButtonWrapper = styled.div<StyledCarouselButtonWrapperPropsT>`\n  max-width: 16px;\n  position: absolute;\n  z-index: 200;\n  ${({ right }) => (right ? 'right: 0;' : `left: 0;`)}\n  width: 16px;\n  height: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '32px' : '22px')};\n  padding-top: ${({ tabType }) => (tabType === TabTypes.NORMAL ? '5px' : '0px')};\n  background: white;\n  ${({ theme, tabType }) =>\n    tabType === TabTypes.NORMAL\n      ? `\n      background: linear-gradient(to bottom, white 0px, white 30px, ${theme.colors.neutral[400]} 30px, ${theme.colors.neutral[400]} 31px, white 31px , white 32px );\n `\n      : ``};\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AAQlB,MAAM,oBAAoB,OAAO,UAAU;AAAA;AAAA,eAEnC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA,WAC/B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAS1B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAI1C,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMrC,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOlC,MAAM,8BAA8B,OAAO;AAAA;AAAA;AAAA;AAAA,IAI9C,CAAC,EAAE,MAAM,MAAO,QAAQ,cAAc;AAAA;AAAA,YAE9B,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,SAAS;AAAA,iBACpD,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,QAAQ;AAAA;AAAA,IAErE,CAAC,EAAE,OAAO,QAAQ,MAClB,YAAY,SAAS,SACjB;AAAA,sEAC8D,MAAM,OAAO,QAAQ,GAAG,WAAW,MAAM,OAAO,QAAQ,GAAG;AAAA,KAEzH;AAAA;",
   "names": []
 }

package/dist/esm/parts/carousel/useCarousel.js

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useCallback, useState, useContext } from "react";
 import useResizeObserver from "@react-hook/resize-observer";
-import { DSTabsContext } from "../../DSTabsCTX";
-import { isElementVisibleCarousel } from "../../utils/helpers";
-import { useCarouselCallbacks } from "./useCarouselCallbacks";
+import { DSTabsContext } from "../../DSTabsCTX.js";
+import { isElementVisibleCarousel } from "../../utils/helpers.js";
+import { useCarouselCallbacks } from "./useCarouselCallbacks.js";
 const useCarousel = ({ updateIndicatorStyle }) => {
   const { carouselOnlyListRef } = useContext(DSTabsContext);
   const [showChevrons, setShowChevrons] = useState({

package/dist/esm/parts/carousel/useCarousel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarousel.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { useCarouselCallbacks } from './useCarouselCallbacks';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface UseCarouselPropsT {\n  updateIndicatorStyle?: () => void;\n}\n\ninterface UseCarouselReturnTypeT {\n  showChevrons: DSTabsInternalsT.ShowChevronsT;\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n    right: false,\n    left: false,\n  });\n\n  const { tabsRefAsArray } = useContext(DSTabsContext);\n\n  const shouldShowLeft = useCallback(\n    () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n    [carouselOnlyListRef],\n  );\n\n  const shouldShowRight = useCallback(\n    () =>\n      carouselOnlyListRef.current\n        ? carouselOnlyListRef.current.scrollLeft <\n          carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n        : false,\n    [carouselOnlyListRef],\n  );\n\n  const recalcChevrons = useCallback(() => {\n    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n  }, [shouldShowLeft, shouldShowRight]);\n\n  const getVisibleItemsOffset = useCallback(() => {\n    if (tabsRefAsArray.current) {\n      const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n          const styles = window.getComputedStyle(c);\n          const width = c.clientWidth;\n          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n          return acc + (width + margin);\n        }\n        return acc;\n      }, 0);\n\n      return scroll - 16;\n    }\n    return 0;\n  }, [tabsRefAsArray, carouselOnlyListRef]);\n\n  useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n    getVisibleItemsOffset,\n    recalcChevrons,\n    updateIndicatorStyle,\n  });\n\n  return {\n    showChevrons,\n    leftButtonOnClick,\n    rightButtonOnClick,\n    handleOnClick,\n    handleOnScroll,\n  };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { useCarouselCallbacks } from './useCarouselCallbacks.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface UseCarouselPropsT {\n  updateIndicatorStyle?: () => void;\n}\n\ninterface UseCarouselReturnTypeT {\n  showChevrons: DSTabsInternalsT.ShowChevronsT;\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarousel = ({ updateIndicatorStyle }: UseCarouselPropsT): UseCarouselReturnTypeT => {\n  const { carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const [showChevrons, setShowChevrons] = useState<DSTabsInternalsT.ShowChevronsT>({\n    right: false,\n    left: false,\n  });\n\n  const { tabsRefAsArray } = useContext(DSTabsContext);\n\n  const shouldShowLeft = useCallback(\n    () => (carouselOnlyListRef.current ? carouselOnlyListRef.current.scrollLeft > 0 : false),\n\n    [carouselOnlyListRef],\n  );\n\n  const shouldShowRight = useCallback(\n    () =>\n      carouselOnlyListRef.current\n        ? carouselOnlyListRef.current.scrollLeft <\n          carouselOnlyListRef.current.scrollWidth - carouselOnlyListRef.current.clientWidth\n        : false,\n    [carouselOnlyListRef],\n  );\n\n  const recalcChevrons = useCallback(() => {\n    setShowChevrons({ right: shouldShowRight(), left: shouldShowLeft() });\n  }, [shouldShowLeft, shouldShowRight]);\n\n  const getVisibleItemsOffset = useCallback(() => {\n    if (tabsRefAsArray.current) {\n      const scroll = tabsRefAsArray.current.reduce((acc, c) => {\n        if (isElementVisibleCarousel(c, carouselOnlyListRef.current)) {\n          const styles = window.getComputedStyle(c);\n          const width = c.clientWidth;\n          const margin = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);\n\n          return acc + (width + margin);\n        }\n        return acc;\n      }, 0);\n\n      return scroll - 16;\n    }\n    return 0;\n  }, [tabsRefAsArray, carouselOnlyListRef]);\n\n  useResizeObserver(carouselOnlyListRef, recalcChevrons);\n\n  const { leftButtonOnClick, rightButtonOnClick, handleOnClick, handleOnScroll } = useCarouselCallbacks({\n    getVisibleItemsOffset,\n    recalcChevrons,\n    updateIndicatorStyle,\n  });\n\n  return {\n    showChevrons,\n    leftButtonOnClick,\n    rightButtonOnClick,\n    handleOnClick,\n    handleOnScroll,\n  };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,UAAU,kBAAkB;AAClD,OAAO,uBAAuB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAe9B,MAAM,cAAc,CAAC,EAAE,qBAAqB,MAAiD;AAClG,QAAM,EAAE,oBAAoB,IAAI,WAAW,aAAa;AAExD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,eAAe,IAAI,WAAW,aAAa;AAEnD,QAAM,iBAAiB;AAAA,IACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI;AAAA,IAElF,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,kBAAkB;AAAA,IACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE;AAAA,IACN,CAAC,mBAAmB;AAAA,EACtB;AAEA,QAAM,iBAAiB,YAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,wBAAwB,YAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,yBAAyB,GAAG,oBAAoB,OAAO,GAAG;AAC5D,gBAAM,SAAS,OAAO,iBAAiB,CAAC;AACxC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,UAAU,IAAI,WAAW,OAAO,WAAW;AAE5E,iBAAO,OAAO,QAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,oBAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,eAAe,IAAI,qBAAqB;AAAA,IACpG;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/esm/parts/carousel/useCarouselCallbacks.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useCallback, useContext } from "react";
-import { isElementVisibleCarousel } from "../../utils/helpers";
-import { DSTabsContext } from "../../DSTabsCTX";
+import { isElementVisibleCarousel } from "../../utils/helpers.js";
+import { DSTabsContext } from "../../DSTabsCTX.js";
 const useCarouselCallbacks = ({
   getVisibleItemsOffset,
   updateIndicatorStyle,

package/dist/esm/parts/carousel/useCarouselCallbacks.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/carousel/useCarouselCallbacks.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n  updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  updateIndicatorStyle,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const handleOnScroll = useCallback(() => {\n    recalcChevrons();\n    if (updateIndicatorStyle) updateIndicatorStyle();\n  }, [recalcChevrons, updateIndicatorStyle]);\n\n  const handleOnClick = useCallback(\n    ({ target }: MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\nimport { useCallback, useContext } from 'react';\nimport type { MouseEvent } from 'react';\nimport { isElementVisibleCarousel } from '../../utils/helpers.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\ninterface UseCarouselCallbacksPropsT {\n  getVisibleItemsOffset: () => number;\n  recalcChevrons: () => void;\n  updateIndicatorStyle?: () => void;\n}\ninterface UseCarouselCallbacksReturnTypeT {\n  leftButtonOnClick: () => void;\n  rightButtonOnClick: () => void;\n  handleOnClick: (e: React.MouseEvent) => void;\n  handleOnScroll: (e: React.UIEvent) => void;\n}\n\nexport const useCarouselCallbacks = ({\n  getVisibleItemsOffset,\n  updateIndicatorStyle,\n  recalcChevrons,\n}: UseCarouselCallbacksPropsT): UseCarouselCallbacksReturnTypeT => {\n  const { focusableTabsRef, carouselOnlyListRef } = useContext(DSTabsContext);\n\n  const rightButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft += getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const leftButtonOnClick = useCallback(() => {\n    if (carouselOnlyListRef.current) {\n      carouselOnlyListRef.current.scrollLeft -= getVisibleItemsOffset();\n    }\n  }, [getVisibleItemsOffset, carouselOnlyListRef]);\n\n  const handleOnScroll = useCallback(() => {\n    recalcChevrons();\n    if (updateIndicatorStyle) updateIndicatorStyle();\n  }, [recalcChevrons, updateIndicatorStyle]);\n\n  const handleOnClick = useCallback(\n    ({ target }: MouseEvent) => {\n      if (focusableTabsRef.current && (target as HTMLButtonElement).getAttribute('role') === 'tab') {\n        const tabList = carouselOnlyListRef.current;\n        const tabButton = target as HTMLButtonElement;\n        const tabButtonDimensions = tabButton.getBoundingClientRect();\n        const tabListDimensions = tabList?.getBoundingClientRect();\n        const tabButtonIndex = tabButton.dataset.index as string;\n        const lastItemIndex = focusableTabsRef.current.length.toString();\n        const magicNumber = 34;\n\n        const firstOrLastItem = tabButtonIndex === '0' || tabButtonIndex === lastItemIndex;\n\n        if (\n          !isElementVisibleCarousel(tabButton, tabList, firstOrLastItem) &&\n          tabListDimensions &&\n          carouselOnlyListRef.current\n        ) {\n          const containerWidth = tabListDimensions.width;\n          const halfContainer = containerWidth / 2;\n          const elementScrollPosition = tabButtonDimensions.left - tabListDimensions.left;\n          const positionInContainer = elementScrollPosition % containerWidth;\n          const width = tabButton.offsetWidth + magicNumber;\n\n          if (positionInContainer > halfContainer) {\n            carouselOnlyListRef.current.scrollLeft += width + positionInContainer - containerWidth;\n          } else {\n            carouselOnlyListRef.current.scrollLeft += positionInContainer - magicNumber;\n          }\n        }\n      }\n    },\n    [focusableTabsRef, carouselOnlyListRef],\n  );\n\n  return {\n    handleOnClick,\n    rightButtonOnClick,\n    leftButtonOnClick,\n    handleOnScroll,\n  };\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,aAAa,kBAAkB;AAExC,SAAS,gCAAgC;AACzC,SAAS,qBAAqB;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,MAAmE;AACjE,QAAM,EAAE,kBAAkB,oBAAoB,IAAI,WAAW,aAAa;AAE1E,QAAM,qBAAqB,YAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,YAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,iBAAiB,YAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,OAAO,MAAkB;AAC1B,UAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,cAAM,UAAU,oBAAoB;AACpC,cAAM,YAAY;AAClB,cAAM,sBAAsB,UAAU,sBAAsB;AAC5D,cAAM,oBAAoB,SAAS,sBAAsB;AACzD,cAAM,iBAAiB,UAAU,QAAQ;AACzC,cAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,cAAM,cAAc;AAEpB,cAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,YACE,CAAC,yBAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,gBAAM,iBAAiB,kBAAkB;AACzC,gBAAM,gBAAgB,iBAAiB;AACvC,gBAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,gBAAM,sBAAsB,wBAAwB;AACpD,gBAAM,QAAQ,UAAU,cAAc;AAEtC,cAAI,sBAAsB,eAAe;AACvC,gCAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,UAC1E,OAAO;AACL,gCAAoB,QAAQ,cAAc,sBAAsB;AAAA,UAClE;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,mBAAmB;AAAA,EACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useMemo, useContext } from "react";
-import { Carousel } from "../carousel/Carousel";
-import { useTabBar } from "./useTabBar";
+import { Carousel } from "../carousel/Carousel.js";
+import { useTabBar } from "./useTabBar.js";
 import {
   StyledTabButton,
   StyledMobileGradient,
@@ -11,13 +11,13 @@ import {
   StyledSelectionIndicator,
   StyledSubTabsList,
   StyledRequiredMark
-} from "./styles";
-import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX";
-import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation";
-import { centerTab } from "../../utils/helpers";
-import { TabTypes } from "../../utils/constants";
-import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks";
-import { DSTabsDatatestid } from "../../DSTabsDatatestid";
+} from "./styles.js";
+import { DSTabsContext, DSTabsCrossRefContext } from "../../DSTabsCTX.js";
+import { useKeyboardNavigation } from "../../utils/hooks/useKeyboardNavigation.js";
+import { centerTab } from "../../utils/helpers.js";
+import { TabTypes } from "../../utils/constants.js";
+import { useTabsCallbacks } from "../../utils/hooks/useTabsCallbacks.js";
+import { DSTabsDatatestid } from "../../DSTabsDatatestid.js";
 const TabBar = () => {
   const {
     tabsRef,
@@ -149,7 +149,7 @@ const TabBar = () => {
       indicatorStyle,
       tabType: type,
       children: [
-        /* @__PURE__ */ jsx(StyledTabWrapper, { isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
+        /* @__PURE__ */ jsx(StyledTabWrapper, { "data-testid": "tab-wrapper", isDSMobile, fixedTabsHeaders, children: !isDSMobile && withCarousel ? /* @__PURE__ */ jsx(Carousel, { updateIndicatorStyle, children: renderTabs }) : renderTabs }),
         /* @__PURE__ */ jsx(StyledSelectionIndicator, { isDSMobile, tabType: type }),
         isDSMobile && !fixedTabsHeaders && /* @__PURE__ */ jsx(
           StyledMobileGradient,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/TabBar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n  StyledTabButton,\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n  StyledRequiredMark,\n} from './styles';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation';\nimport { centerTab } from '../../utils/helpers';\nimport { TabTypes } from '../../utils/constants';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\nimport type { DSTabT } from '../../propTypes';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsListRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  const renderTabs = useMemo(() => {\n    const availableTabIndexes: number[] = [];\n\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n      const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n      if (!disabled) availableTabIndexes.push(index);\n      return (\n        <StyledTabButton\n          key={tabId}\n          role=\"tab\"\n          ref={(tabButtonRef: HTMLButtonElement) => {\n            if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n              tabsRefAsArray.current[index] = tabButtonRef;\n              if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n                focusableTabsRef.current.push(tabButtonRef);\n              tabsRef.current[index] = tabButtonRef;\n              if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n                firstSubtabInternalRef.current = tabButtonRef;\n              }\n              if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n                lastTabInternalRef.current = tabButtonRef;\n              }\n              if (ref) ref.current = tabButtonRef;\n            }\n          }}\n          type=\"button\"\n          aria-controls={tabId}\n          aria-selected={actualActiveTab === tabId}\n          aria-disabled={disabled}\n          aria-labelledby={`${tabId}-label`}\n          isDSMobile={isDSMobile}\n          fixedTabsHeaders={fixedTabsHeaders}\n          tabType={type}\n          title={title}\n          data-required={required}\n          data-tab-id={tabId}\n          data-index={index}\n          withCarousel={withCarousel}\n          isActive={actualActiveTab === tabId}\n          disabled={disabled}\n          showSeparator={showSeparator && type !== TabTypes.NORMAL}\n          data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n          id={`${tabId}-label`}\n          onClick={(e) => {\n            if (!disabled) {\n              handleOnTabChange(tabId, e);\n              updateIndicatorStyle();\n            }\n            if (onClick && !disabled) onClick(tabId, e);\n          }}\n          onFocus={(e) => {\n            if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') e.stopPropagation();\n            if (!disabled) handleOnKeyDown(e);\n            if (onKeyDown && !disabled) onKeyDown(e);\n          }}\n          style={style}\n        >\n          {title}\n          {required && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n        </StyledTabButton>\n      );\n    });\n  }, [\n    tabs,\n    actualActiveTab,\n    isDSMobile,\n    fixedTabsHeaders,\n    type,\n    withCarousel,\n    showSeparator,\n    tabsRefAsArray,\n    focusableTabsRef,\n    tabsRef,\n    firstSubtabInternalRef,\n    lastTabInternalRef,\n    handleOnTabChange,\n    updateIndicatorStyle,\n    carouselOnlyListRef,\n    handleOnKeyDown,\n  ]);\n\n  if (type === TabTypes.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        withCarousel={withCarousel}\n        data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n        ref={tabsListRef}\n        role=\"tablist\"\n      >\n        {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      withCarousel={withCarousel}\n      ref={tabsListRef}\n      role=\"tablist\"\n      data-testid={DSTabsDatatestid.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n    >\n      <StyledTabWrapper isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n        ) : (\n          renderTabs\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel.js';\nimport { useTabBar } from './useTabBar.js';\nimport {\n  StyledTabButton,\n  StyledMobileGradient,\n  StyledTabList,\n  StyledTabWrapper,\n  StyledSelectionIndicator,\n  StyledSubTabsList,\n  StyledRequiredMark,\n} from './styles.js';\nimport { DSTabsContext, DSTabsCrossRefContext } from '../../DSTabsCTX.js';\nimport { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';\nimport { centerTab } from '../../utils/helpers.js';\nimport { TabTypes } from '../../utils/constants.js';\nimport { useTabsCallbacks } from '../../utils/hooks/useTabsCallbacks.js';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid.js';\nimport type { DSTabT } from '../../propTypes.js';\n\nexport const TabBar = (): JSX.Element => {\n  const {\n    tabsRef,\n    focusableTabsRef,\n    tabsListRef,\n    tabsRefAsArray,\n    carouselOnlyListRef,\n    actualActiveTab,\n    props: { type, fixedTabsHeaders, withCarousel, isDSMobile, showSeparator, children: tabs },\n  } = useContext(DSTabsContext);\n\n  const { lastTabInternalRef, firstSubtabInternalRef } = useContext(DSTabsCrossRefContext);\n  const { handleOnTabChange } = useTabsCallbacks();\n  const { handleOnKeyDown } = useKeyboardNavigation();\n\n  const { indicatorStyle, mobileGradients, updateMobileGradients, updateIndicatorStyle } = useTabBar();\n\n  const renderTabs = useMemo(() => {\n    const availableTabIndexes: number[] = [];\n\n    return React.Children.map(tabs, (tab: React.ReactElement<DSTabT.Props>, index) => {\n      const { tabId = '', title = '', style, required = false, disabled = false, ref, onClick, onKeyDown } = tab.props;\n      if (!disabled) availableTabIndexes.push(index);\n      return (\n        <StyledTabButton\n          key={tabId}\n          role=\"tab\"\n          ref={(tabButtonRef: HTMLButtonElement) => {\n            if (tabButtonRef && tabsRefAsArray.current && focusableTabsRef.current && tabsRef.current) {\n              tabsRefAsArray.current[index] = tabButtonRef;\n              if (!disabled && !focusableTabsRef.current.includes(tabButtonRef))\n                focusableTabsRef.current.push(tabButtonRef);\n              tabsRef.current[index] = tabButtonRef;\n              if (type === TabTypes.SUBTABS && firstSubtabInternalRef && index === availableTabIndexes[0]) {\n                firstSubtabInternalRef.current = tabButtonRef;\n              }\n              if (type !== TabTypes.SUBTABS && index === availableTabIndexes[availableTabIndexes.length - 1]) {\n                lastTabInternalRef.current = tabButtonRef;\n              }\n              if (ref) ref.current = tabButtonRef;\n            }\n          }}\n          type=\"button\"\n          aria-controls={tabId}\n          aria-selected={actualActiveTab === tabId}\n          aria-disabled={disabled}\n          aria-labelledby={`${tabId}-label`}\n          isDSMobile={isDSMobile}\n          fixedTabsHeaders={fixedTabsHeaders}\n          tabType={type}\n          title={title}\n          data-required={required}\n          data-tab-id={tabId}\n          data-index={index}\n          withCarousel={withCarousel}\n          isActive={actualActiveTab === tabId}\n          disabled={disabled}\n          showSeparator={showSeparator && type !== TabTypes.NORMAL}\n          data-testid={type === TabTypes.NORMAL ? DSTabsDatatestid.TAB_BUTTON : DSTabsDatatestid.SUBTAB_BUTTON}\n          id={`${tabId}-label`}\n          onClick={(e) => {\n            if (!disabled) {\n              handleOnTabChange(tabId, e);\n              updateIndicatorStyle();\n            }\n            if (onClick && !disabled) onClick(tabId, e);\n          }}\n          onFocus={(e) => {\n            if (withCarousel) centerTab({ e, listRef: carouselOnlyListRef });\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter') e.stopPropagation();\n            if (!disabled) handleOnKeyDown(e);\n            if (onKeyDown && !disabled) onKeyDown(e);\n          }}\n          style={style}\n        >\n          {title}\n          {required && <StyledRequiredMark>&#9679;</StyledRequiredMark>}\n        </StyledTabButton>\n      );\n    });\n  }, [\n    tabs,\n    actualActiveTab,\n    isDSMobile,\n    fixedTabsHeaders,\n    type,\n    withCarousel,\n    showSeparator,\n    tabsRefAsArray,\n    focusableTabsRef,\n    tabsRef,\n    firstSubtabInternalRef,\n    lastTabInternalRef,\n    handleOnTabChange,\n    updateIndicatorStyle,\n    carouselOnlyListRef,\n    handleOnKeyDown,\n  ]);\n\n  if (type === TabTypes.SUBTABS && !isDSMobile) {\n    return (\n      <StyledSubTabsList\n        withCarousel={withCarousel}\n        data-testid={DSTabsDatatestid.SUB_TAB_LIST}\n        ref={tabsListRef}\n        role=\"tablist\"\n      >\n        {withCarousel ? <Carousel>{renderTabs}</Carousel> : renderTabs}\n      </StyledSubTabsList>\n    );\n  }\n\n  return (\n    <StyledTabList\n      withCarousel={withCarousel}\n      ref={tabsListRef}\n      role=\"tablist\"\n      data-testid={DSTabsDatatestid.TAB_LIST}\n      isDSMobile={isDSMobile}\n      fixedTabsHeaders={fixedTabsHeaders}\n      mobileGradients={mobileGradients}\n      onScroll={updateMobileGradients}\n      indicatorStyle={indicatorStyle}\n      tabType={type}\n    >\n      <StyledTabWrapper data-testid=\"tab-wrapper\" isDSMobile={isDSMobile} fixedTabsHeaders={fixedTabsHeaders}>\n        {!isDSMobile && withCarousel ? (\n          <Carousel updateIndicatorStyle={updateIndicatorStyle}>{renderTabs}</Carousel>\n        ) : (\n          renderTabs\n        )}\n      </StyledTabWrapper>\n      <StyledSelectionIndicator isDSMobile={isDSMobile} tabType={type} />\n      {isDSMobile && !fixedTabsHeaders && (\n        <StyledMobileGradient\n          mobileGradients={mobileGradients}\n          left={tabsListRef.current?.scrollLeft}\n          width={tabsListRef.current?.scrollWidth}\n        />\n      )}\n    </StyledTabList>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from "@elliemae/ds-system";
-import { TabTypes } from "../../utils/constants";
+import { TabTypes } from "../../utils/constants.js";
 const StyledSelectionIndicator = styled.div`
   position: absolute;
   height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/styles.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\n/** CSS Setters */\n\nconst selectionIndicatorSettingsFromParent = css<StyledTabListPropsT>`\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: absolute;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: calc(100% - 1px);\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TabTypes.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TabTypes.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n    ${selectionIndicatorSettingsFromParent}\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport { styled, safariAndFirefoxBold, onlySafariAndFirefox, css, th } from '@elliemae/ds-system';\nimport { TabTypes } from '../../utils/constants.js';\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\n\ninterface StyledSelectionIndicatoPropsT {\n  isDSMobile: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledSubTabsListPropsT {\n  withCarousel: boolean;\n}\n\ninterface StyledTabButtonPropsT {\n  isActive: boolean;\n  disabled: boolean;\n  showSeparator: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  withCarousel: boolean;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledTabListPropsT {\n  withCarousel: boolean;\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  tabType: DSTabsInternalsT.TabTypesT;\n}\n\ninterface StyledMobileGradientPropsT {\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  left: number | undefined;\n  width: number | undefined;\n}\n\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: ${({ isDSMobile }) => (isDSMobile ? '2px' : '3px')};\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  z-index: 1;\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\n/** CSS Setters */\n\nconst selectionIndicatorSettingsFromParent = css<StyledTabListPropsT>`\n  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n      width: ${indicatorStyle.width}px;\n      left: ${indicatorStyle.left}px;\n      `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${(props) => {\n      const { theme, indicatorStyle, isDSMobile } = props;\n      return !isDSMobile\n        ? `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color('brand-600')(\n            props,\n          )} 16px, ${th.color('brand-600')(props)} ${indicatorStyle.width - 16}px, transparent ${\n            indicatorStyle.width - 16\n          }px, transparent ${indicatorStyle.width}px )`\n        : theme.colors.brand[600];\n    }};\n  }\n`;\n\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: absolute;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: calc(100% - 1px);\n  pointer-events: none;\n\n  ${({ mobileGradients: { left, right } }) => {\n    if (right && left)\n      return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (right)\n      return `background: linear-gradient(90deg, #FFFFFF00 0%, #FFFFFF00 calc(100% - 44px), #FFFFFF calc(100% - 20px));`;\n    if (left) return `background: linear-gradient(90deg, #FFFFFF 10px, #FFFFFF00 34px, #FFFFFF00 100%);`;\n    return '';\n  }};\n`;\n\n/**  CSS Setters */\n\nexport const StyledTabWrapper = styled.div<StyledTabWrapperPropsT>`\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  ${({ fixedTabsHeaders, isDSMobile }) => (!fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;')}\n  ${({ theme, isDSMobile }) => (isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``)}\n`;\n\nexport const StyledTabButton = styled.button<StyledTabButtonPropsT>`\n  position: relative;\n  background-color: transparent;\n  border: none;\n  cursor: pointer;\n  transition: 100ms cubic-bezier(0, 0, 0.42, 1);\n  text-transform: ${({ tabType, isDSMobile }) => {\n    if (tabType === TabTypes.SUBTABS) return 'capitalize';\n    return isDSMobile ? 'none' : 'uppercase';\n  }};\n  letter-spacing: 0px;\n  white-space: nowrap;\n  padding: 2px 0;\n  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {\n    if (fixedTabsHeaders) return '0px';\n    if (!fixedTabsHeaders && isDSMobile) return '14px';\n    return '16px';\n  }};\n\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')}\n\n  ${({ tabType }) => (tabType === TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`)}\n\n  ${({ theme, isActive, disabled }) =>\n    isActive && !disabled\n      ? `\n          font-weight:  ${theme.fontWeights.semibold};\n          ${safariAndFirefoxBold(`#353C46`)}\n\n          &:hover {\n            ${safariAndFirefoxBold(`#1E79C2`)}\n          }\n          \n        `\n      : `\n      \n      `}\n\n  ${({ theme, disabled }) =>\n    disabled\n      ? `\n          color: ${theme.colors.neutral[500]};\n          cursor: not-allowed;\n        `\n      : `\n      &:hover {\n        color: ${theme.colors.brand[600]};\n      }\n          `}\n\n\n  ${({ theme, showSeparator, tabType }) =>\n    showSeparator\n      ? `\n          &:not(:last-of-type):before\n            {\n              content: \"\";\n              position: absolute;\n              width: 1px;\n              right: -16px;\n              top: 50%;\n              transform: translateY(-50%);\n              height: ${tabType === TabTypes.SUBTABS ? `10px` : `16px`};\n              background: ${theme.colors.neutral[400]};\n            }`\n      : ``}\n\n  ${({ theme, isDSMobile, tabType, isActive }) =>\n    !isDSMobile\n      ? `\n  &:focus {\n    outline: none;\n    &:after {\n      position: absolute;\n      content: '';\n      top: 0;\n      left: -16px;\n      width: calc(100% + 32px);\n      height: 100%;\n      z-index: 5;\n      border-radius: 2px;\n      border: 2px solid ${theme.colors.brand[700]};\n    }\n\n    ${\n      tabType !== TabTypes.SUBTABS && isActive\n        ? `\n      &:before {\n        position: absolute;\n        content: '';\n        left: -16px;\n        right: 0;\n        top: calc(100% - 2px);\n        transform: none;\n        width: calc(100% + 32px);\n        height: 2px;\n        z-index: 10;\n        background: linear-gradient(to right, transparent 0px, transparent 12px, white 12px, white 16px, transparent 16px,transparent calc(100% - 16px),  white calc(100% - 16px), white calc(100% - 12px),  transparent calc(100% - 12px), transparent 100%);\n      }\n    `\n        : ``\n    }\n  }\n  \n  `\n      : ``}\n\n  \n      \n${({ theme, isActive, disabled, isDSMobile }) =>\n    isDSMobile\n      ? `\n    height:  40px;\n    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 16px;\n    line-height: 1.3;\n    ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        color:  ${theme.colors.brand[700]};\n        line-height: 1.3;\n        font-weight: ${theme.fontWeights.regular};\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};`\n        : ``\n    }\n\n    ${\n      !disabled\n        ? `\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ${theme.colors.brand[700]};\n          ${safariAndFirefoxBold('#006AA9')}\n        }`\n        : ``\n    }\n\n    `\n      : ``}\n`;\n\nexport const StyledSubTabsList = styled.div<StyledSubTabsListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  ${({ withCarousel }) => (withCarousel ? 'max-width: 100%;' : '')}\n`;\n\nexport const StyledTabList = styled.div<StyledTabListPropsT>`\n  position: relative;\n  display: flex;\n  flex-wrap: nowrap;\n  flex: 1;\n  width: 100%;\n  z-index: 0;\n  ${({ withCarousel, isDSMobile }) => (withCarousel && !isDSMobile ? `max-width: 100%;` : '')}\n\n  ${({ theme, isDSMobile, tabType }) =>\n    tabType !== TabTypes.NORMAL_SMALL && !isDSMobile\n      ? `\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};\n    pointer-events: none;\n    bottom: 0px;\n  }\n  `\n      : ``}\n\n  ${StyledTabButton} {\n    padding-bottom: 0;\n    padding-top: 0;\n  }\n\n  ${({ theme, isDSMobile }) =>\n    isDSMobile\n      ? `\n        \n         background: ${theme.colors.neutral['000']};`\n      : ``}\n\n  ${({ isDSMobile, fixedTabsHeaders }) =>\n    isDSMobile\n      ? `\n      ${\n        !fixedTabsHeaders\n          ? `\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }`\n          : `\n         display: flex;\n        ${StyledTabButton} {\n          flex: 1;\n          overflow-x: hidden;\n        }`\n      }`\n      : ``}\n\n    ${selectionIndicatorSettingsFromParent}\n`;\n\nexport const StyledRequiredMark = styled.span`\n  color: ${({ theme }) => theme.colors.danger[900]};\n  font-size: 6px;\n  margin-left: 2px;\n  position: absolute;\n  top: 5px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,QAAQ,sBAAsB,sBAAsB,KAAK,UAAU;AAC5E,SAAS,gBAAgB;AA0ClB,MAAM,2BAA2B,OAAO;AAAA;AAAA,YAEnC,CAAC,EAAE,WAAW,MAAO,aAAa,QAAQ;AAAA,SAC7C,CAAC,EAAE,SAAS,WAAW,MAAM;AAClC,MAAI;AAAY,WAAO;AACvB,MAAI,YAAY,SAAS;AAAc,WAAO;AAC9C,SAAO;AACT;AAAA;AAAA,gBAEc,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA,IAIvC,CAAC,EAAE,WAAW,MACd,aACI;AAAA;AAAA;AAAA,MAIA;AAAA;AAKR,MAAM,uCAAuC;AAAA,IACzC;AAAA,MACE,CAAC,EAAE,eAAe,MAAM;AAAA,eACf,eAAe;AAAA,cAChB,eAAe;AAAA;AAAA;AAAA;AAAA,IAIzB;AAAA,kBACc,CAAC,UAAU;AACvB,QAAM,EAAE,OAAO,gBAAgB,WAAW,IAAI;AAC9C,SAAO,CAAC,aACJ,gEAAgE,GAAG,MAAM,WAAW;AAAA,IAClF;AAAA,EACF,WAAW,GAAG,MAAM,WAAW,EAAE,KAAK,KAAK,eAAe,QAAQ,qBAChE,eAAe,QAAQ,qBACN,eAAe,cAClC,MAAM,OAAO,MAAM,GAAG;AAC5B;AAAA;AAAA;AAIG,MAAM,uBAAuB,OAAO,IAAI,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,EAAE,OAAmC;AAAA,EAC7G,OAAO,EAAE,MAAM,OAAO,IAAI,UAAU,QAAQ,KAAK;AACnD,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQE,CAAC,EAAE,iBAAiB,EAAE,MAAM,MAAM,EAAE,MAAM;AAC1C,MAAI,SAAS;AACX,WAAO;AACT,MAAI;AACF,WAAO;AACT,MAAI;AAAM,WAAO;AACjB,SAAO;AACT;AAAA;AAKK,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA,IAInC,CAAC,EAAE,kBAAkB,WAAW,MAAO,CAAC,oBAAoB,aAAa,KAAK;AAAA,IAC9E,CAAC,EAAE,OAAO,WAAW,MAAO,aAAa,4BAA4B,MAAM,OAAO,QAAQ,GAAG,OAAO;AAAA;AAGjG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAMlB,CAAC,EAAE,SAAS,WAAW,MAAM;AAC7C,MAAI,YAAY,SAAS;AAAS,WAAO;AACzC,SAAO,aAAa,SAAS;AAC/B;AAAA;AAAA;AAAA;AAAA,kBAIgB,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACpD,MAAI;AAAkB,WAAO;AAC7B,MAAI,CAAC,oBAAoB;AAAY,WAAO;AAC5C,SAAO;AACT;AAAA;AAAA,iBAEe,CAAC,EAAE,kBAAkB,WAAW,MAAM;AACnD,MAAI;AAAkB,WAAO;AAC7B,MAAI,CAAC,oBAAoB;AAAY,WAAO;AAC5C,SAAO;AACT;AAAA;AAAA,WAES,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,IAC9C,qBAAqB,yCAAyC;AAAA;AAAA,IAE9D,CAAC,EAAE,QAAQ,MAAO,YAAY,SAAS,SAAS,kBAAkB;AAAA;AAAA,IAElE,CAAC,EAAE,OAAO,UAAU,SAAS,MAC7B,YAAY,CAAC,WACT;AAAA,0BACkB,MAAM,YAAY;AAAA,YAChC,qBAAqB,SAAS;AAAA;AAAA;AAAA,cAG5B,qBAAqB,SAAS;AAAA;AAAA;AAAA,YAIpC;AAAA;AAAA;AAAA;AAAA,IAIJ,CAAC,EAAE,OAAO,SAAS,MACnB,WACI;AAAA,mBACW,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAGnC;AAAA;AAAA,iBAES,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAKnC,CAAC,EAAE,OAAO,eAAe,QAAQ,MACjC,gBACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASgB,YAAY,SAAS,UAAU,SAAS;AAAA,4BACpC,MAAM,OAAO,QAAQ,GAAG;AAAA,iBAE5C;AAAA;AAAA,IAEJ,CAAC,EAAE,OAAO,YAAY,SAAS,SAAS,MACxC,CAAC,aACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAYkB,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA,MAI1C,YAAY,SAAS,WAAW,WAC5B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAcA;AAAA;AAAA;AAAA,MAKF;AAAA;AAAA;AAAA;AAAA,EAIN,CAAC,EAAE,OAAO,UAAU,UAAU,WAAW,MACvC,aACI;AAAA;AAAA,aAEK,WAAW,MAAM,OAAO,QAAQ,GAAG,IAAI,MAAM,OAAO,QAAQ,GAAG;AAAA,mBACzD,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAI/B,qBAAqB,yCAAyC;AAAA;AAAA;AAAA,qBAG/C,MAAM,YAAY;AAAA,QAC/B,qBAAqB,SAAS;AAAA;AAAA;AAAA,MAIhC,WACI;AAAA,uBACa,MAAM,YAAY;AAAA,UAC/B,qBAAqB,SAAS;AAAA,YAE9B;AAAA;AAAA,MAIJ,YAAY,CAAC,WACT;AAAA,kBACQ,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA,uBAEjB,MAAM,YAAY;AAAA;AAAA,qCAEJ,MAAM,OAAO,MAAM,GAAG,OACjD;AAAA;AAAA,MAIJ,CAAC,WACG;AAAA;AAAA;AAAA;AAAA,mBAIS,MAAM,OAAO,MAAM,GAAG;AAAA,YAC7B,qBAAqB,SAAS;AAAA,aAEhC;AAAA;AAAA,QAIF;AAAA;AAGD,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpC,CAAC,EAAE,aAAa,MAAO,eAAe,qBAAqB;AAAA;AAGxD,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhC,CAAC,EAAE,cAAc,WAAW,MAAO,gBAAgB,CAAC,aAAa,qBAAqB;AAAA;AAAA,IAEtF,CAAC,EAAE,OAAO,YAAY,QAAQ,MAC9B,YAAY,SAAS,gBAAgB,CAAC,aAClC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAM0B,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,MAKlD;AAAA;AAAA,IAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,CAAC,EAAE,OAAO,WAAW,MACrB,aACI;AAAA;AAAA,uBAEe,MAAM,OAAO,QAAQ,KAAK,OACzC;AAAA;AAAA,IAEJ,CAAC,EAAE,YAAY,iBAAiB,MAChC,aACI;AAAA,QAEA,CAAC,mBACG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQA;AAAA;AAAA,UAEF;AAAA;AAAA;AAAA,eAKF;AAAA;AAAA,MAEF;AAAA;AAGC,MAAM,qBAAqB,OAAO;AAAA,WAC9B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { useCallback, useLayoutEffect, useState, useContext } from "react";
 import { useResizeObserver } from "@elliemae/ds-utilities";
-import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../../utils/helpers";
-import { DSTabsContext } from "../../DSTabsCTX";
-import { defaultIndicatorStyles } from "../../utils/constants";
+import { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../../utils/helpers.js";
+import { DSTabsContext } from "../../DSTabsCTX.js";
+import { defaultIndicatorStyles } from "../../utils/constants.js";
 const useTabBar = () => {
   const {
     actualActiveTab,