@elliemae/ds-tabs 3.0.0-next.5 → 3.0.0-next.53

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

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useCarousel_exports = {};
 __export(useCarousel_exports, {
   useCarousel: () => useCarousel
 });
+module.exports = __toCommonJS(useCarousel_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
@@ -76,5 +70,4 @@ const useCarousel = ({ updateIndicatorStyle }) => {
     handleOnScroll
   };
 };
-module.exports = __toCommonJS(useCarousel_exports);
 //# sourceMappingURL=useCarousel.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/carousel/useCarousel.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAe9B,MAAM,cAAc,CAAC,EAAE,2BAAsE;AAClG,QAAM,EAAE,wBAAwB,6BAAW;AAE3C,QAAM,CAAC,cAAc,mBAAmB,2BAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA;AAGR,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,iBAAiB,8BACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI,OAElF,CAAC;AAGH,QAAM,kBAAkB,8BACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE,OACN,CAAC;AAGH,QAAM,iBAAiB,8BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,mBAAmB,MAAM;AAAA,KACjD,CAAC,gBAAgB;AAEpB,QAAM,wBAAwB,8BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,6CAAyB,GAAG,oBAAoB,UAAU;AAC5D,gBAAM,SAAS,OAAO,iBAAiB;AACvC,gBAAM,QAAQ,EAAE;AAChB,gBAAM,SAAS,WAAW,OAAO,cAAc,WAAW,OAAO;AAEjE,iBAAO,MAAO,SAAQ;AAAA;AAExB,eAAO;AAAA,SACN;AAEH,aAAO,SAAS;AAAA;AAElB,WAAO;AAAA,KACN,CAAC,gBAAgB;AAEpB,sCAAkB,qBAAqB;AAEvC,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,mBAAmB,sDAAqB;AAAA,IACpG;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkD;AAClD,6BAA8B;AAC9B,uBAA8B;AAC9B,qBAAyC;AACzC,kCAAqC;AAe9B,MAAM,cAAc,CAAC,EAAE,2BAAsE;AAClG,QAAM,EAAE,wBAAwB,6BAAW,8BAAa;AAExD,QAAM,CAAC,cAAc,mBAAmB,2BAAyC;AAAA,IAC/E,OAAO;AAAA,IACP,MAAM;AAAA,EACR,CAAC;AAED,QAAM,EAAE,mBAAmB,6BAAW,8BAAa;AAEnD,QAAM,iBAAiB,8BACrB,MAAO,oBAAoB,UAAU,oBAAoB,QAAQ,aAAa,IAAI,OAElF,CAAC,mBAAmB,CACtB;AAEA,QAAM,kBAAkB,8BACtB,MACE,oBAAoB,UAChB,oBAAoB,QAAQ,aAC5B,oBAAoB,QAAQ,cAAc,oBAAoB,QAAQ,cACtE,OACN,CAAC,mBAAmB,CACtB;AAEA,QAAM,iBAAiB,8BAAY,MAAM;AACvC,oBAAgB,EAAE,OAAO,gBAAgB,GAAG,MAAM,eAAe,EAAE,CAAC;AAAA,EACtE,GAAG,CAAC,gBAAgB,eAAe,CAAC;AAEpC,QAAM,wBAAwB,8BAAY,MAAM;AAC9C,QAAI,eAAe,SAAS;AAC1B,YAAM,SAAS,eAAe,QAAQ,OAAO,CAAC,KAAK,MAAM;AACvD,YAAI,6CAAyB,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,MAAO,SAAQ;AAAA,QACxB;AACA,eAAO;AAAA,MACT,GAAG,CAAC;AAEJ,aAAO,SAAS;AAAA,IAClB;AACA,WAAO;AAAA,EACT,GAAG,CAAC,gBAAgB,mBAAmB,CAAC;AAExC,sCAAkB,qBAAqB,cAAc;AAErD,QAAM,EAAE,mBAAmB,oBAAoB,eAAe,mBAAmB,sDAAqB;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/cjs/parts/carousel/useCarouselCallbacks.js

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useCarouselCallbacks_exports = {};
 __export(useCarouselCallbacks_exports, {
   useCarouselCallbacks: () => useCarouselCallbacks
 });
+module.exports = __toCommonJS(useCarouselCallbacks_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_helpers = require("../../utils/helpers");
@@ -85,5 +79,4 @@ const useCarouselCallbacks = ({
     handleOnScroll
   };
 };
-module.exports = __toCommonJS(useCarouselCallbacks_exports);
 //# sourceMappingURL=useCarouselCallbacks.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/carousel/useCarouselCallbacks.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,kBAAkB,wBAAwB,6BAAW;AAE7D,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,oBAAoB,8BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc;AAAA;AAAA,KAE3C,CAAC,uBAAuB;AAE3B,QAAM,iBAAiB,8BAAY,MAAM;AACvC;AACA,QAAI;AAAsB;AAAA,KACzB,CAAC,gBAAgB;AAEpB,QAAM,gBAAgB,8BACpB,CAAC,EAAE,aAAyB;AAC1B,QAAI,iBAAiB,WAAY,OAA6B,aAAa,YAAY,OAAO;AAC5F,YAAM,UAAU,oBAAoB;AACpC,YAAM,YAAY;AAClB,YAAM,sBAAsB,UAAU;AACtC,YAAM,oBAAoB,SAAS;AACnC,YAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAM,gBAAgB,iBAAiB,QAAQ,OAAO;AACtD,YAAM,cAAc;AAEpB,YAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,UACE,CAAC,6CAAyB,WAAW,SAAS,oBAC9C,qBACA,oBAAoB,SACpB;AACA,cAAM,iBAAiB,kBAAkB;AACzC,cAAM,gBAAgB,iBAAiB;AACvC,cAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,cAAM,sBAAsB,wBAAwB;AACpD,cAAM,QAAQ,UAAU,cAAc;AAEtC,YAAI,sBAAsB,eAAe;AACvC,8BAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,eACnE;AACL,8BAAoB,QAAQ,cAAc,sBAAsB;AAAA;AAAA;AAAA;AAAA,KAKxE,CAAC,kBAAkB;AAGrB,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAwC;AAExC,qBAAyC;AACzC,uBAA8B;AAcvB,MAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,MACiE;AACjE,QAAM,EAAE,kBAAkB,wBAAwB,6BAAW,8BAAa;AAE1E,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,oBAAoB,8BAAY,MAAM;AAC1C,QAAI,oBAAoB,SAAS;AAC/B,0BAAoB,QAAQ,cAAc,sBAAsB;AAAA,IAClE;AAAA,EACF,GAAG,CAAC,uBAAuB,mBAAmB,CAAC;AAE/C,QAAM,iBAAiB,8BAAY,MAAM;AACvC,mBAAe;AACf,QAAI;AAAsB,2BAAqB;AAAA,EACjD,GAAG,CAAC,gBAAgB,oBAAoB,CAAC;AAEzC,QAAM,gBAAgB,8BACpB,CAAC,EAAE,aAAyB;AAC1B,QAAI,iBAAiB,WAAY,OAA6B,aAAa,MAAM,MAAM,OAAO;AAC5F,YAAM,UAAU,oBAAoB;AACpC,YAAM,YAAY;AAClB,YAAM,sBAAsB,UAAU,sBAAsB;AAC5D,YAAM,oBAAoB,SAAS,sBAAsB;AACzD,YAAM,iBAAiB,UAAU,QAAQ;AACzC,YAAM,gBAAgB,iBAAiB,QAAQ,OAAO,SAAS;AAC/D,YAAM,cAAc;AAEpB,YAAM,kBAAkB,mBAAmB,OAAO,mBAAmB;AAErE,UACE,CAAC,6CAAyB,WAAW,SAAS,eAAe,KAC7D,qBACA,oBAAoB,SACpB;AACA,cAAM,iBAAiB,kBAAkB;AACzC,cAAM,gBAAgB,iBAAiB;AACvC,cAAM,wBAAwB,oBAAoB,OAAO,kBAAkB;AAC3E,cAAM,sBAAsB,wBAAwB;AACpD,cAAM,QAAQ,UAAU,cAAc;AAEtC,YAAI,sBAAsB,eAAe;AACvC,8BAAoB,QAAQ,cAAc,QAAQ,sBAAsB;AAAA,QAC1E,OAAO;AACL,8BAAoB,QAAQ,cAAc,sBAAsB;AAAA,QAClE;AAAA,MACF;AAAA,IACF;AAAA,EACF,GACA,CAAC,kBAAkB,mBAAmB,CACxC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

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

@@ -4,31 +4,25 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TabBar_exports = {};
 __export(TabBar_exports, {
   TabBar: () => TabBar
 });
+module.exports = __toCommonJS(TabBar_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_Carousel = require("../carousel/Carousel");
@@ -167,5 +161,4 @@ const TabBar = () => {
     tabType: type
   }));
 };
-module.exports = __toCommonJS(TabBar_exports);
 //# sourceMappingURL=TabBar.js.map

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/TabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useContext } from 'react';\nimport { Carousel } from '../carousel/Carousel';\nimport { useTabBar } from './useTabBar';\nimport {\n  StyledTabButton,\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    </StyledTabList>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "mappings": "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",
   "names": []
 }

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

@@ -4,27 +4,20 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
   StyledRequiredMark: () => StyledRequiredMark,
@@ -34,13 +27,14 @@ __export(styles_exports, {
   StyledTabList: () => StyledTabList,
   StyledTabWrapper: () => StyledTabWrapper
 });
+module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_styled_components = __toESM(require("styled-components"));
 var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../../utils/constants");
 const StyledSelectionIndicator = import_styled_components.default.div`
   position: absolute;
-  height: 3px;
+  height: ${({ isDSMobile }) => isDSMobile ? "2px" : "3px"};
   top: ${({ tabType, isDSMobile }) => {
   if (isDSMobile)
     return `35px`;
@@ -61,11 +55,11 @@ const mobileGradientsSettings = import_ds_system.css`
   ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {
   if (isDSMobile && !fixedTabsHeaders) {
     if (mobileGradients.right && mobileGradients.left)
-      return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
+      return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;
     if (mobileGradients.right)
-      return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;
+      return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;
     if (mobileGradients.left)
-      return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;
+      return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  transparent 10%, transparent 100%);`;
   }
   return ``;
 }}
@@ -75,7 +69,7 @@ const StyledTabWrapper = import_styled_components.default.div`
   flex: 1;
   flex-wrap: nowrap;
   ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
-  ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``}
+  ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.neutral[200]};` : ``}
 `;
 const StyledTabButton = import_styled_components.default.button`
   position: relative;
@@ -83,7 +77,11 @@ const StyledTabButton = import_styled_components.default.button`
   border: none;
   cursor: pointer;
   transition: 100ms cubic-bezier(0, 0, 0.42, 1);
-  text-transform: ${({ tabType }) => tabType === import_constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`};
+  text-transform: ${({ tabType, isDSMobile }) => {
+  if (tabType === import_constants.TabTypes.SUBTABS)
+    return "capitalize";
+  return isDSMobile ? "none" : "uppercase";
+}};
   letter-spacing: 0px;
   white-space: nowrap;
   padding: 2px 0;
@@ -180,27 +178,24 @@ const StyledTabButton = import_styled_components.default.button`
       
 ${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
     height:  40px;
-    color: ${theme.colors.brand[600]};
+    color: ${disabled ? theme.colors.neutral[500] : theme.colors.neutral[700]};
     font-weight: ${theme.fontWeights.regular};
     padding: 0;
-    font-size: 13px;
+    font-size: 16px;
     line-height: 1.3;
     ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")} 
 
     &:focus {
       font-weight: ${theme.fontWeights.regular};
-      font-size: 13px;
       ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
     }
 
     ${isActive ? `
         font-weight: ${theme.fontWeights.regular};
-        font-size: 13px;
         ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
         ` : ``}
 
     ${isActive && !disabled ? `
-        font-size: 13px;
         color:  ${theme.colors.brand[700]};
         line-height: 1.3;
         font-weight: ${theme.fontWeights.regular};
@@ -252,7 +247,7 @@ const StyledTabList = import_styled_components.default.div`
 
   ${({ theme, isDSMobile }) => isDSMobile ? `
         
-         background: ${theme.colors.brand[200]};` : ``}
+         background: ${theme.colors.neutral["000"]};` : ``}
 
   ${mobileGradientsSettings}
 
@@ -272,7 +267,7 @@ const StyledTabList = import_styled_components.default.div`
           overflow-x: hidden;
         }`}` : ``}
 
-    ${StyledSelectionIndicator} {
+  ${StyledSelectionIndicator} {
     ${({ indicatorStyle }) => `
         width: ${indicatorStyle.width};
         left: ${indicatorStyle.left};
@@ -290,5 +285,4 @@ const StyledRequiredMark = import_styled_components.default.span`
   position: absolute;
   top: 5px;
 `;
-module.exports = __toCommonJS(styles_exports);
 //# sourceMappingURL=styles.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/styles.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } 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}\ninterface StyledTabWrapperPropsT {\n  isDSMobile: boolean;\n  fixedTabsHeaders: boolean;\n}\n\nexport const StyledSelectionIndicator = styled.div<StyledSelectionIndicatoPropsT>`\n  position: absolute;\n  height: 3px;\n  top: ${({ tabType, isDSMobile }) => {\n    if (isDSMobile) return `35px`;\n    if (tabType === TabTypes.NORMAL_SMALL) return `15px`;\n    return `25px`;\n  }};\n  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n  z-index: 10;\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n  ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n    if (isDSMobile && !fixedTabsHeaders) {\n      if (mobileGradients.right && mobileGradients.left)\n        return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;\n      if (mobileGradients.right)\n        return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, rgba(238,238,238,0) 100%);`;\n      if (mobileGradients.left)\n        return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  ${theme.colors.brand[200]} 20%, ${theme.colors.brand[200]} 100%);`;\n    }\n    return ``;\n  }}\n`;\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.brand[300]};` : ``)}\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 }) => (tabType === TabTypes.SUBTABS ? `capitalize` : `uppercase`)};\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: ${theme.colors.brand[600]};\n    font-weight: ${theme.fontWeights.regular};\n    padding: 0;\n    font-size: 13px;\n    line-height: 1.3;\n    ${onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;')} \n\n    &:focus {\n      font-weight: ${theme.fontWeights.regular};\n      font-size: 13px;\n      ${safariAndFirefoxBold('#006AA9')}\n    }\n\n    ${\n      isActive\n        ? `\n        font-weight: ${theme.fontWeights.regular};\n        font-size: 13px;\n        ${safariAndFirefoxBold('#006AA9')}\n        `\n        : ``\n    }\n\n    ${\n      isActive && !disabled\n        ? `\n        font-size: 13px;\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  ${({ 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.brand[200]};`\n      : ``}\n\n  ${mobileGradientsSettings}\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    ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n        width: ${indicatorStyle.width};\n        left: ${indicatorStyle.left};\n        `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${({ theme, indicatorStyle, isDSMobile }) =>\n      !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n  }\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable indent */\n/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { safariAndFirefoxBold, onlySafariAndFirefox, css } 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}\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  margin-top: ${({ theme }) => theme.space.xxxs};\n  pointer-events: none;\n  transition: 200ms cubic-bezier(0.36, 0, 1, 1);\n  z-index: 10;\n  ${({ isDSMobile }) =>\n    isDSMobile\n      ? ` \n  margin-left: 0;\n  margin-top: 3px;\n  `\n      : ``}\n`;\n\nconst mobileGradientsSettings = css<StyledTabListPropsT>`\n  ${({ theme, mobileGradients, isDSMobile, fixedTabsHeaders }) => {\n    if (isDSMobile && !fixedTabsHeaders) {\n      if (mobileGradients.right && mobileGradients.left)\n        return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%, transparent 10%, transparent 90%, rgba(238,238,238,0) 100%);`;\n      if (mobileGradients.right)\n        return `background: linear-gradient(90deg, transparent 0%, transparent 90%, rgba(238,238,238,0) 100%);`;\n      if (mobileGradients.left)\n        return `background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  transparent 10%, transparent 100%);`;\n    }\n    return ``;\n  }}\n`;\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  ${({ 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  ${mobileGradientsSettings}\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  ${StyledSelectionIndicator} {\n    ${({ indicatorStyle }) => `\n        width: ${indicatorStyle.width};\n        left: ${indicatorStyle.left};\n        `}\n  }\n\n  ${StyledSelectionIndicator} {\n    background: ${({ theme, indicatorStyle, isDSMobile }) =>\n      !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};\n  }\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,33 +4,28 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useTabBar_exports = {};
 __export(useTabBar_exports, {
   useTabBar: () => useTabBar
 });
+module.exports = __toCommonJS(useTabBar_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
+var import_ds_system = require("@elliemae/ds-system");
 var import_resize_observer = __toESM(require("@react-hook/resize-observer"));
 var import_helpers = require("../../utils/helpers");
 var import_DSTabsCTX = require("../../DSTabsCTX");
@@ -56,7 +51,7 @@ const useTabBar = () => {
       const missingMargins = isDSMobile ? 0 : 16;
       const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
       const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
-      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;
+      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, ${import_ds_system.th.color("brand-600")} 16px, ${import_ds_system.th.color("brand-600")}  ${tabClientWidth - 16}px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;
       return {
         left: `${position}px`,
         width: `${tabClientWidth}px`,
@@ -99,5 +94,4 @@ const useTabBar = () => {
     updateMobileGradients
   };
 };
-module.exports = __toCommonJS(useTabBar_exports);
 //# sourceMappingURL=useTabBar.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabBar/useTabBar.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { defaultIndicatorStyles } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, #1E79C2 16px, #1E79C2  ${\n        tabClientWidth - 16\n      }px,transparent ${tabClientWidth - 16}px,transparent ${tabClientWidth}px )`;\n\n      return {\n        left: `${position}px`,\n        width: `${tabClientWidth}px`,\n        backgroundWithTransparent,\n      };\n    }\n    return defaultIndicatorStyles;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(tabsListRef, updateIndicatorStyle);\n\n  const updateMobileGradients = useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,6BAA8B;AAC9B,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY;AAAA,MAC3C,6BAAW;AAEf,QAAM,CAAC,iBAAiB,sBAAsB,2BAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA;AAET,QAAM,CAAC,gBAAgB,qBAAqB,2BAA2C;AAEvF,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,qCAAiB,iBAAiB;AAAU,eAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,wBAAwB,OAAO,QAAQ,wBAAwB,OAAO,QAAQ,aAC9F,gBAAgB,wBAAwB,OAAO,QAAQ,wBAAwB,OAAO;AAE5F,YAAM,4BAA4B,uFAChC,iBAAiB,oBACD,iBAAiB,oBAAoB;AAEvD,aAAO;AAAA,QACL,MAAM,GAAG;AAAA,QACT,OAAO,GAAG;AAAA,QACV;AAAA;AAAA;AAGJ,WAAO;AAAA,KACN,CAAC,oBAAoB,kBAAkB,YAAY;AAEtD,QAAM,uBAAuB,8BAC3B,MAAM,WAAW,MAAM,kBAAkB,uBAAuB,MAChE,CAAC,oBAAoB;AAGvB,sCAAkB,aAAa;AAE/B,QAAM,wBAAwB,8BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,2CAAuB;AAAA,QAC7B,OAAO,4CAAwB,YAAY,aAAa;AAAA;AAAA;AAAA,KAG3D,CAAC,kBAAkB,YAAY;AAElC,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B;AAAA;AAEF,QAAI,cAAc,CAAC,kBAAkB;AACnC;AAAA;AAAA,KAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "sourcesContent": ["/* eslint-disable max-statements */\nimport { useCallback, useLayoutEffect, useState, useContext } from 'react';\nimport { th } from '@elliemae/ds-system';\nimport useResizeObserver from '@react-hook/resize-observer';\nimport { isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../../utils/helpers';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { defaultIndicatorStyles } from '../../utils/constants';\nimport type { DSTabsInternalsT } from '../../sharedTypes';\n\ninterface UseTabBarReturnTypeT {\n  updateIndicatorStyle: () => void;\n  updateMobileGradients: () => void;\n  setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n  indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n  mobileGradients: DSTabsInternalsT.MobileGradientsT;\n}\n\nexport const useTabBar = (): UseTabBarReturnTypeT => {\n  const {\n    actualActiveTab,\n    actualActiveTabRef,\n    tabsListRef,\n    props: { showSelectionIndicator, isDSMobile, fixedTabsHeaders },\n  } = useContext(DSTabsContext);\n\n  const [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(defaultIndicatorStyles);\n\n  const getIndicatorStyles = useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return defaultIndicatorStyles;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      const backgroundWithTransparent = `linear-gradient(to right, transparent 0px, transparent 16px, ${th.color(\n        'brand-600',\n      )} 16px, ${th.color('brand-600')}  ${tabClientWidth - 16}px,transparent ${\n        tabClientWidth - 16\n      }px,transparent ${tabClientWidth}px )`;\n\n      return {\n        left: `${position}px`,\n        width: `${tabClientWidth}px`,\n        backgroundWithTransparent,\n      };\n    }\n    return defaultIndicatorStyles;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  const updateIndicatorStyle = useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(tabsListRef, updateIndicatorStyle);\n\n  const updateMobileGradients = useCallback(() => {\n    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {\n      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;\n      setMobileGradients({\n        left: shouldHaveLeftGradient(scrollLeft),\n        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth),\n      });\n    }\n  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    showSelectionIndicator,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n  ]);\n\n  return {\n    updateIndicatorStyle,\n    setIndicatorStyle,\n    indicatorStyle,\n    mobileGradients,\n    updateMobileGradients,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAmE;AACnE,uBAAmB;AACnB,6BAA8B;AAC9B,qBAAkF;AAClF,uBAA8B;AAC9B,uBAAuC;AAWhC,MAAM,YAAY,MAA4B;AACnD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,EAAE,wBAAwB,YAAY;AAAA,MAC3C,6BAAW,8BAAa;AAE5B,QAAM,CAAC,iBAAiB,sBAAsB,2BAA4C;AAAA,IACxF,MAAM;AAAA,IACN,OAAO;AAAA,EACT,CAAC;AACD,QAAM,CAAC,gBAAgB,qBAAqB,2BAA2C,uCAAsB;AAE7G,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,QAAI,YAAY,SAAS;AACvB,YAAM,UAAU,YAAY;AAC5B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAI,CAAC,mBAAmB,CAAC,qCAAiB,iBAAiB,OAAO;AAAG,eAAO;AAI5E,YAAM,iBAAiB,aAAa,IAAI;AAExC,YAAM,iBACJ,cAAc,CAAC,mBACX,gBAAgB,cAChB,gBAAgB,cAAc,iBAAiB;AAIrD,YAAM,WACJ,cAAc,CAAC,mBACX,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO,QAAQ,aAC9F,gBAAgB,sBAAsB,EAAE,OAAO,QAAQ,sBAAsB,EAAE,OAAO;AAE5F,YAAM,4BAA4B,gEAAgE,oBAAG,MACnG,WACF,WAAW,oBAAG,MAAM,WAAW,MAAM,iBAAiB,oBACpD,iBAAiB,oBACD;AAElB,aAAO;AAAA,QACL,MAAM,GAAG;AAAA,QACT,OAAO,GAAG;AAAA,QACV;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,kBAAkB,YAAY,WAAW,CAAC;AAElE,QAAM,uBAAuB,8BAC3B,MAAM,WAAW,MAAM,kBAAkB,mBAAmB,CAAC,GAAG,GAAG,GACnE,CAAC,oBAAoB,iBAAiB,CACxC;AAEA,sCAAkB,aAAa,oBAAoB;AAEnD,QAAM,wBAAwB,8BAAY,MAAM;AAC9C,QAAI,YAAY,WAAW,cAAc,CAAC,kBAAkB;AAC1D,YAAM,EAAE,YAAY,aAAa,gBAAgB,YAAY;AAC7D,yBAAmB;AAAA,QACjB,MAAM,2CAAuB,UAAU;AAAA,QACvC,OAAO,4CAAwB,YAAY,aAAa,WAAW;AAAA,MACrE,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,kBAAkB,YAAY,WAAW,CAAC;AAE9C,oCAAgB,MAAM;AACpB,QAAI,wBAAwB;AAC1B,2BAAqB;AAAA,IACvB;AACA,QAAI,cAAc,CAAC,kBAAkB;AACnC,4BAAsB;AAAA,IACxB;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/tabsContent/TabsContent.js

@@ -21,31 +21,25 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
+  return to;
 };
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TabsContent_exports = {};
 __export(TabsContent_exports, {
   TabsContent: () => TabsContent
 });
+module.exports = __toCommonJS(TabsContent_exports);
 var React = __toESM(require("react"));
 var import_react = __toESM(require("react"));
 var import_TabsPanels = require("../tabsPanel/TabsPanels");
@@ -65,5 +59,4 @@ const TabsContent = () => {
     role: "tablist"
   }, /* @__PURE__ */ import_react.default.createElement(import_TabBar.TabBar, null), tabBarExtraContent), /* @__PURE__ */ import_react.default.createElement(import_TabsPanels.TabsPanels, null));
 };
-module.exports = __toCommonJS(TabsContent_exports);
 //# sourceMappingURL=TabsContent.js.map

package/dist/cjs/parts/tabsContent/TabsContent.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
   "sourcesContent": ["import React, { useContext } from 'react';\nimport { TabsPanels } from '../tabsPanel/TabsPanels';\nimport { TabBar } from '../tabBar/TabBar';\nimport { StyledTabBarContainer } from './styles';\nimport { DSTabsContext } from '../../DSTabsCTX';\nimport { DSTabsDatatestid } from '../../DSTabsDatatestid';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  return (\n    <div {...containerProps} ref={innerRef} data-testid={DSTabsDatatestid.TABS_CONTAINER}>\n      <StyledTabBarContainer aria-label={tabsListAriaLabel} role=\"tablist\">\n        <TabBar />\n        {tabBarExtraContent}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB;AAAA,MACpD,6BAAW;AAEf,SACE,mDAAC,OAAD,iCAAS,iBAAT;AAAA,IAAyB,KAAK;AAAA,IAAU,eAAa,yCAAiB;AAAA,MACpE,mDAAC,qCAAD;AAAA,IAAuB,cAAY;AAAA,IAAmB,MAAK;AAAA,KACzD,mDAAC,sBAAD,OACC,qBAEH,mDAAC,8BAAD;AAAA;",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkC;AAClC,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,8BAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,UAAU,mBAAmB;AAAA,MACpD,6BAAW,8BAAa;AAE5B,SACE,mDAAC,wCAAQ,iBAAR;AAAA,IAAwB,KAAK;AAAA,IAAU,eAAa,yCAAiB;AAAA,MACpE,mDAAC;AAAA,IAAsB,cAAY;AAAA,IAAmB,MAAK;AAAA,KACzD,mDAAC,0BAAO,GACP,kBACH,GACA,mDAAC,kCAAW,CACd;AAEJ;",
   "names": []
 }