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

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, safariAndFirefoxBold, onlySafariAndFirefox, th } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { TAB_TYPES } from '../../constants/index.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 === TAB_TYPES.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\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\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 === TAB_TYPES.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 === TAB_TYPES.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  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\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 === TAB_TYPES.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 !== TAB_TYPES.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    ${String(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 !== TAB_TYPES.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          &::-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}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 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\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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, safariAndFirefoxBold, onlySafariAndFirefox, th, css } from '@elliemae/ds-system';\n\nimport type { DSTabsInternalsT } from '../../sharedTypes.js';\nimport { DSTabsName, TABS_SLOTS, TAB_TYPES } from '../../constants/index.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 === TAB_TYPES.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\nexport const StyledMobileGradient = styled.div.attrs(({ left = 0, width = 0 }: StyledMobileGradientPropsT) => ({\n  style: { left: left - 10, maxWidth: width - left },\n}))<StyledMobileGradientPropsT>`\n  position: fixed;\n  z-index: 15;\n  top: 0;\n  width: calc(100% + 20px);\n  height: 40px;\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\nconst baseButtonStyles = css<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 === TAB_TYPES.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 === TAB_TYPES.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  ${({ theme }) => `\n    &[aria-disabled='true'] {\n      color: ${theme.colors.neutral[500]};\n      cursor: not-allowed;\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 === TAB_TYPES.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 !== TAB_TYPES.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    ${String(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 StyledTabButton = styled('button', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.TAB_BUTTON,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\nexport const StyledSubTabButton = styled('button', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.SUBTAB_BUTTON,\n})<StyledTabButtonPropsT>`\n  ${baseButtonStyles}\n`;\n\nexport const StyledSubTabsList = styled('div', {\n  name: DSTabsName,\n  slot: TABS_SLOTS.SUB_TAB_LIST,\n})<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', { name: DSTabsName, slot: TABS_SLOTS.TAB_LIST })<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 !== TAB_TYPES.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          &::-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}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 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\nexport const ScreenReaderOnly = styled.div`\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -39,7 +39,6 @@ var import_TabsPanels = require("../tabsPanel/TabsPanels.js");
 var import_TabBar = require("../tabBar/TabBar.js");
 var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_constants = require("../../constants/index.js");
 const TabsContent = () => {
   const {
     props,
@@ -47,14 +46,16 @@ const TabsContent = () => {
   } = (0, import_react.useContext)(import_DSTabsCTX.DSTabsContext);
   const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(props);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(props);
+  const { getOwnerProps, getOwnerPropsArguments } = (0, import_ds_props_helpers.useOwnerProps)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+    import_styles.StyledTabsContainer,
     {
       ...globalProps,
       ...xstyledProps,
       ...containerProps,
-      ref: innerRef,
-      "data-testid": import_constants.TABS_DATA_TESTID.TABS_CONTAINER,
+      innerRef,
+      getOwnerProps,
+      getOwnerPropsArguments,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styles.StyledTabBarContainer, { "aria-label": tabsListAriaLabel, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TabBar.TabBar, {}),

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsContent/TabsContent.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\nimport { TABS_DATA_TESTID } from '../../constants/index.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n\n  return (\n    <div\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      ref={innerRef}\n      data-testid={TABS_DATA_TESTID.TABS_CONTAINER}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </div>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyBjB;AAzBN,mBAAkC;AAClC,8BAA2D;AAC3D,wBAA2B;AAC3B,oBAAuB;AACvB,oBAAsC;AACtC,uBAA8B;AAC9B,uBAAiC;AAE1B,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAa,kCAAiB;AAAA,MAE9B;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
+  "sourcesContent": ["import React, { useContext } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport { TabsPanels } from '../tabsPanel/TabsPanels.js';\nimport { TabBar } from '../tabBar/TabBar.js';\nimport { StyledTabBarContainer, StyledTabsContainer } from './styles.js';\nimport { DSTabsContext } from '../../DSTabsCTX.js';\n\nexport const TabsContent = (): JSX.Element => {\n  const {\n    props,\n    props: { containerProps, innerRef, tabsListAriaLabel, tabBarExtraContent, TabBarExtraContent },\n  } = useContext(DSTabsContext);\n\n  const globalProps = useGetGlobalAttributes(props);\n  const xstyledProps = useGetXstyledProps(props);\n  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(props);\n\n  return (\n    <StyledTabsContainer\n      {...globalProps}\n      {...xstyledProps}\n      {...containerProps}\n      innerRef={innerRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledTabBarContainer aria-label={tabsListAriaLabel}>\n        <TabBar />\n        {TabBarExtraContent ? <TabBarExtraContent /> : null}\n        {tabBarExtraContent || null}\n      </StyledTabBarContainer>\n      <TabsPanels />\n    </StyledTabsContainer>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BjB;AA1BN,mBAAkC;AAClC,8BAA0E;AAC1E,wBAA2B;AAC3B,oBAAuB;AACvB,oBAA2D;AAC3D,uBAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO,EAAE,gBAAgB,UAAU,mBAAmB,oBAAoB,mBAAmB;AAAA,EAC/F,QAAI,yBAAW,8BAAa;AAE5B,QAAM,kBAAc,gDAAuB,KAAK;AAChD,QAAM,mBAAe,4CAAmB,KAAK;AAC7C,QAAM,EAAE,eAAe,uBAAuB,QAAI,uCAAc,KAAK;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,qDAAC,uCAAsB,cAAY,mBACjC;AAAA,sDAAC,wBAAO;AAAA,UACP,qBAAqB,4CAAC,sBAAmB,IAAK;AAAA,UAC9C,sBAAsB;AAAA,WACzB;AAAA,QACA,4CAAC,gCAAW;AAAA;AAAA;AAAA,EACd;AAEJ;",
   "names": []
 }

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

@@ -28,11 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var styles_exports = {};
 __export(styles_exports, {
-  StyledTabBarContainer: () => StyledTabBarContainer
+  StyledTabBarContainer: () => StyledTabBarContainer,
+  StyledTabsContainer: () => StyledTabsContainer
 });
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
+var import_constants = require("../../constants/index.js");
+const StyledTabsContainer = (0, import_ds_system.styled)("div", { name: import_constants.DSTabsName, slot: import_constants.TABS_SLOTS.TABS_CONTAINER })``;
 const StyledTabBarContainer = import_ds_system.styled.div`
   display: flex;
   overflow-x: hidden;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/tabsContent/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\n\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AAEhB,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { DSTabsName, TABS_SLOTS } from '../../constants/index.js';\n\nexport const StyledTabsContainer = styled('div', { name: DSTabsName, slot: TABS_SLOTS.TABS_CONTAINER })``;\nexport const StyledTabBarContainer = styled.div`\n  display: flex;\n  overflow-x: hidden;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,uBAAuC;AAEhC,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,6BAAY,MAAM,4BAAW,eAAe,CAAC;AAC/F,MAAM,wBAAwB,wBAAO;AAAA;AAAA;AAAA;",
   "names": []
 }

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

@@ -38,7 +38,6 @@ var import_react2 = __toESM(require("react"));
 var import_react_swipeable_views = __toESM(require("react-swipeable-views"));
 var import_styles = require("./styles.js");
 var import_DSTabsCTX = require("../../DSTabsCTX.js");
-var import_useTabsCallbacks = require("../../utils/hooks/useTabsCallbacks.js");
 const TabsPanels = () => {
   const {
     actualActiveTab,
@@ -51,9 +50,9 @@ const TabsPanels = () => {
       isDSMobile,
       tabPanelsProps,
       swipeableViewsContainerProps
-    }
+    },
+    globalClickHandler
   } = (0, import_react2.useContext)(import_DSTabsCTX.DSTabsContext);
-  const { handleOnTabChange, handleOnMouseDown } = (0, import_useTabsCallbacks.useTabsCallbacks)();
   const handleOnChangeIndex = (0, import_react2.useCallback)(
     (index, indexLatest) => {
       if (!focusableTabsRef.current) return;
@@ -63,32 +62,40 @@ const TabsPanels = () => {
         const newFocusableIndex = currentIndexFocusable >= 0 ? currentIndexFocusable + offset : -1;
         if (newFocusableIndex < 0 || newFocusableIndex > focusableTabsRef.current?.length || !focusableTabsRef.current?.[newFocusableIndex])
           return;
-        handleOnTabChange(focusableTabsRef.current[newFocusableIndex].dataset?.tabId);
+        globalClickHandler({
+          event: { type: "click" },
+          target: "swipeableViews",
+          tabId: focusableTabsRef.current[newFocusableIndex].dataset.tabId
+        });
         focusableTabsRef.current[newFocusableIndex].click();
       }
     },
-    [actualActiveTab, focusableTabsRef, handleOnTabChange]
+    [actualActiveTab, focusableTabsRef, globalClickHandler]
   );
   const panels = (0, import_react2.useMemo)(() => {
     const emptyPanelRender = animated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {}) : null;
     return import_react2.default.Children.map(tabs, (tab) => {
-      const { tabId: panelId = "", style, children: content, disabled } = tab.props;
+      const { tabId: panelId = "", style, children: content, disabled, applyAriaDisabled } = tab.props;
       const isActive = actualActiveTab === panelId;
       const shouldRender = !onlyRenderActiveTab || isActive;
+      const getOwnerProps = () => tab.props;
+      const getOwnerPropsArguments = () => ({ panelId });
       if (disabled) return emptyPanelRender;
       if (!shouldRender) return emptyPanelRender;
       return /* @__PURE__ */ (0, import_react.createElement)(
         import_styles.StyledPanelContainer,
         {
           ...tabPanelsProps,
+          getOwnerProps,
+          getOwnerPropsArguments,
           key: panelId,
           id: panelId,
           "aria-labelledby": `${panelId}-label`,
-          "aria-hidden": !isActive,
+          "aria-hidden": !isActive || !!applyAriaDisabled,
           "data-panel-id": panelId,
           "data-testid": "ds-tabs-tab-panel",
           hide: !isActive,
-          onMouseDown: handleOnMouseDown,
+          onClick: (event) => globalClickHandler({ event, target: "panel" }),
           role: "tabpanel",
           style: {
             ...tabPanelsProps?.style || {},
@@ -99,7 +106,7 @@ const TabsPanels = () => {
         content
       );
     });
-  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, handleOnMouseDown, isDSMobile]);
+  }, [animated, tabs, actualActiveTab, onlyRenderActiveTab, tabPanelsProps, globalClickHandler, isDSMobile]);
   const indexExclusiveToSwipeableIndexThatReliesOnReactChildrenToArrayWhichAutoFiltersNull = (0, import_react2.useMemo)(() => {
     const childrenArray = import_react2.default.Children.toArray(tabs);
     const index = childrenArray.findIndex((tab) => tab.props.tabId === actualActiveTab);

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

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

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

@@ -33,7 +33,11 @@ __export(styles_exports, {
 module.exports = __toCommonJS(styles_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-const StyledPanelContainer = import_ds_system.styled.div`
+var import_constants = require("../../constants/index.js");
+const StyledPanelContainer = (0, import_ds_system.styled)("div", {
+  name: import_constants.DSTabsName,
+  slot: import_constants.TABS_SLOTS.TAB_PANEL
+})`
   padding-top: 8px;
   &:focus {
     outline: none;

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

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

package/dist/cjs/sharedTypes.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/sharedTypes.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n  export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n  export interface MobileGradientsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface IndicatorStyleT {\n    left: number;\n    width: number;\n  }\n\n  export interface ShowChevronsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface DSTabsUseTabsContextT {\n    props: DSTabsT.InternalProps;\n    tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n    focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n    tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n    tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n    actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n    carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n    setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n    actualActiveTab: string;\n  }\n\n  export interface DSTabsUseCrossRefContextT {\n    lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n    firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type { TAB_TYPES } from './constants/index.js';\n\nimport type { DSTabsT } from './react-desc-prop-types.js';\n\nexport namespace DSTabsInternalsT {\n  export type TabTypesT = (typeof TAB_TYPES)[keyof typeof TAB_TYPES];\n\n  export interface MobileGradientsT {\n    right: boolean;\n    left: boolean;\n  }\n\n  export interface IndicatorStyleT {\n    left: number;\n    width: number;\n  }\n\n  export interface ShowChevronsT {\n    right: boolean;\n    left: boolean;\n  }\n  export interface GlobalClickHandlerT {\n    event: React.MouseEvent;\n    target: 'panel' | 'tabItem' | 'tabsList' | 'swipeableViews';\n    tabId?: string;\n  }\n\n  export interface DSTabsUseTabsContextT {\n    props: DSTabsT.InternalProps;\n    tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;\n    focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;\n    tabsListRef: React.MutableRefObject<HTMLDivElement | null>;\n    tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;\n    actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;\n    carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;\n    setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;\n    actualActiveTab: string;\n    globalClickHandler: (data: GlobalClickHandlerT) => void;\n    updateIndicatorStyle: () => void;\n    updateMobileGradients: () => void;\n    setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;\n    indicatorStyle: DSTabsInternalsT.IndicatorStyleT;\n    mobileGradients: DSTabsInternalsT.MobileGradientsT;\n  }\n\n  export interface DSTabsUseCrossRefContextT {\n    lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n    firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;\n  }\n}\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DSTabsCTX.js

@@ -12,7 +12,13 @@ const defaultContext = {
   tabsRefAsArray: createRef(),
   actualActiveTabRef: createRef(),
   setInternalActiveTab: noop,
-  actualActiveTab: ""
+  actualActiveTab: "",
+  globalClickHandler: noop,
+  updateIndicatorStyle: noop,
+  updateMobileGradients: noop,
+  setIndicatorStyle: noop,
+  indicatorStyle: { left: 0, width: 0 },
+  mobileGradients: { right: false, left: false }
 };
 const defaultCrossRefsContext = {
   lastTabInternalRef: createRef(),

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 { DSTabsDefaultProps as defaultProps } from './react-desc-prop-types.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,sBAAsB,oBAAoB;AAInD,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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext, createRef } from 'react';\nimport { DSTabsDefaultProps as defaultProps } from './react-desc-prop-types.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  globalClickHandler: noop,\n  updateIndicatorStyle: noop,\n  updateMobileGradients: noop,\n  setIndicatorStyle: noop,\n  indicatorStyle: { left: 0, width: 0 },\n  mobileGradients: { right: false, left: false },\n} as DSTabsInternalsT.DSTabsUseTabsContextT;\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,sBAAsB,oBAAoB;AAInD,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;AAAA,EACjB,oBAAoB;AAAA,EACpB,sBAAsB;AAAA,EACtB,uBAAuB;AAAA,EACvB,mBAAmB;AAAA,EACnB,gBAAgB,EAAE,MAAM,GAAG,OAAO,EAAE;AAAA,EACpC,iBAAiB,EAAE,OAAO,OAAO,MAAM,MAAM;AAC/C;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/{parts/tabBar → config}/useResizeObserver.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/tabBar/useResizeObserver.ts"],
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useResizeObserver.ts"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useEffect, useMemo, useState } from 'react';\nimport raf from 'raf';\nimport ResizeObserver from 'resize-observer-polyfill';\n\ntype HandlerT = (measures: { width: number; height: number }, element: Element) => void;\n\nexport const useResizeObserver = (handler: HandlerT, el: HTMLElement | null) => {\n  const [node, setRef] = useState(el);\n\n  const resizeObserver = useMemo(\n    () =>\n      new ResizeObserver((entries) => {\n        if (!Array.isArray(entries)) return;\n        if (!entries.length) return;\n        const entry = entries[0];\n\n        // execute on the next animation frame\n        raf(() =>\n          handler(\n            {\n              width: (entry.target as HTMLElement).offsetWidth,\n              height: (entry.target as HTMLElement).offsetHeight,\n            },\n            entry.target,\n          ),\n        );\n      }),\n    [handler],\n  );\n\n  const htmlEl = el || node;\n\n  useEffect(() => {\n    if (htmlEl) resizeObserver.observe(htmlEl);\n    return () => {\n      if (htmlEl) resizeObserver.unobserve(htmlEl);\n    };\n  }, [htmlEl, resizeObserver]);\n\n  return [setRef];\n};\n\nexport default useResizeObserver;\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,WAAW,SAAS,gBAAgB;AAC7C,OAAO,SAAS;AAChB,OAAO,oBAAoB;AAIpB,MAAM,oBAAoB,CAAC,SAAmB,OAA2B;AAC9E,QAAM,CAAC,MAAM,MAAM,IAAI,SAAS,EAAE;AAElC,QAAM,iBAAiB;AAAA,IACrB,MACE,IAAI,eAAe,CAAC,YAAY;AAC9B,UAAI,CAAC,MAAM,QAAQ,OAAO,EAAG;AAC7B,UAAI,CAAC,QAAQ,OAAQ;AACrB,YAAM,QAAQ,QAAQ,CAAC;AAGvB;AAAA,QAAI,MACF;AAAA,UACE;AAAA,YACE,OAAQ,MAAM,OAAuB;AAAA,YACrC,QAAS,MAAM,OAAuB;AAAA,UACxC;AAAA,UACA,MAAM;AAAA,QACR;AAAA,MACF;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,SAAS,MAAM;AAErB,YAAU,MAAM;AACd,QAAI,OAAQ,gBAAe,QAAQ,MAAM;AACzC,WAAO,MAAM;AACX,UAAI,OAAQ,gBAAe,UAAU,MAAM;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,QAAQ,cAAc,CAAC;AAE3B,SAAO,CAAC,MAAM;AAChB;AAEA,IAAO,4BAAQ;",
   "names": []

package/dist/esm/config/useTabs.js

@@ -2,9 +2,12 @@ import * as React from "react";
 import React2, { useRef, useState, useMemo, useEffect } from "react";
 import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { DSTabsDefaultProps } from "../react-desc-prop-types.js";
+import { centerTab, isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from "../utils/helpers.js";
+import { useResizeObserver } from "./useResizeObserver.js";
+import { DEFAULT_INDICATOR_STYLES } from "../constants/index.js";
 const useTabs = (props) => {
   const propsWithDefaults = useMemoMergePropsWithDefault(props, DSTabsDefaultProps);
-  const { activeTab, children } = propsWithDefaults;
+  const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders, showSelectionIndicator } = propsWithDefaults;
   const tabsRef = useRef({});
   const tabsRefAsArray = useRef([]);
   const focusableTabsRef = useRef([]);
@@ -31,6 +34,89 @@ const useTabs = (props) => {
       setInternalActiveTab(firstAvailableTab?.dataset.tabId || "");
     }
   }, [activeTab]);
+  const [mobileGradients, setMobileGradients] = useState({
+    left: false,
+    right: false
+  });
+  const [indicatorStyle, setIndicatorStyle] = useState(DEFAULT_INDICATOR_STYLES);
+  const getIndicatorStyles = React2.useCallback(() => {
+    if (tabsListRef.current) {
+      const tabList = tabsListRef.current;
+      const activeTabButton = actualActiveTabRef.current;
+      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;
+      const missingMargins = isDSMobile ? 0 : 16;
+      const tabClientWidth = isDSMobile && !fixedTabsHeaders ? activeTabButton.clientWidth : activeTabButton.clientWidth + missingMargins * 2;
+      const position = isDSMobile && !fixedTabsHeaders ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;
+      return {
+        left: Math.round(position),
+        width: Math.round(tabClientWidth)
+      };
+    }
+    return DEFAULT_INDICATOR_STYLES;
+  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);
+  const updateIndicatorStyle = React2.useCallback(
+    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),
+    [getIndicatorStyles, setIndicatorStyle]
+  );
+  useResizeObserver(updateIndicatorStyle, tabsListRef.current);
+  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);
+  const updateMobileGradients = React2.useCallback(() => {
+    if (tabsListRef.current && isDSMobile && !fixedTabsHeaders) {
+      const { scrollLeft, scrollWidth, clientWidth } = tabsListRef.current;
+      setMobileGradients({
+        left: shouldHaveLeftGradient(scrollLeft),
+        right: shouldHaveRightGradient(scrollLeft, clientWidth, scrollWidth)
+      });
+    }
+  }, [fixedTabsHeaders, isDSMobile, tabsListRef]);
+  React2.useLayoutEffect(() => {
+    if (showSelectionIndicator) {
+      updateIndicatorStyle();
+    }
+    if (isDSMobile && !fixedTabsHeaders) {
+      updateMobileGradients();
+    }
+  }, [
+    updateMobileGradients,
+    updateIndicatorStyle,
+    isDSMobile,
+    fixedTabsHeaders,
+    actualActiveTab,
+    showSelectionIndicator
+  ]);
+  const handleOnTabChange = React2.useCallback(
+    (tabId, e) => {
+      setInternalActiveTab(tabId);
+      onTabChange(tabId, e);
+      if (isDSMobile && !fixedTabsHeaders && e) {
+        centerTab({ e, listRef: tabsListRef });
+      }
+    },
+    [fixedTabsHeaders, isDSMobile, onTabChange, setInternalActiveTab, tabsListRef]
+  );
+  const globalClickHandler = React2.useCallback(
+    (data) => {
+      if (data.target === "panel") {
+        if (propsWithDefaults.allowTextSelection) {
+          data.event.stopPropagation();
+        }
+      }
+      if (data.target === "tabsList") {
+        const target = data.event.target;
+        const { dataset, ariaDisabled } = target;
+        if (dataset.tabId && ariaDisabled !== "true") {
+          handleOnTabChange(dataset.tabId, data.event);
+        }
+      }
+      if (data.target === "swipeableViews") {
+        handleOnTabChange(data.tabId);
+      }
+      if (data.target === "tabItem" && data.tabId && !data.event.currentTarget.disabled) {
+        handleOnTabChange(data.tabId, data.event);
+      }
+    },
+    [propsWithDefaults.allowTextSelection, handleOnTabChange]
+  );
   const ctx = useMemo(
     () => ({
       props: propsWithDefaults,
@@ -41,9 +127,25 @@ const useTabs = (props) => {
       setInternalActiveTab,
       actualActiveTab,
       actualActiveTabRef,
-      carouselOnlyListRef
+      carouselOnlyListRef,
+      globalClickHandler,
+      updateIndicatorStyle,
+      setIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange
     }),
-    [actualActiveTab, propsWithDefaults]
+    [
+      propsWithDefaults,
+      actualActiveTab,
+      globalClickHandler,
+      updateIndicatorStyle,
+      indicatorStyle,
+      mobileGradients,
+      updateMobileGradients,
+      handleOnTabChange
+    ]
   );
   return ctx;
 };

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 React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n  const { activeTab, children } = 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  // we can't activate disabled tabs, we search for the first activable tab\n  const firstActivableTabId = useMemo(() => {\n    const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n    const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n    if (firstActivableTab === null) return '';\n    return firstActivableTab.props.tabId ?? '';\n  }, [children]);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\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,OAAOA,UAAS,QAAQ,UAAU,SAAS,iBAAiB;AAC5D,SAAS,oCAAoC;AAC7C,SAAS,0BAA0B;AAI5B,MAAM,UAAU,CAAC,UAAiE;AACvF,QAAM,oBAAoB,6BAAoD,OAAO,kBAAkB;AAEvG,QAAM,EAAE,WAAW,SAAS,IAAI;AAEhC,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;AAGhE,QAAM,sBAAsB,QAAQ,MAAM;AACxC,UAAM,gBAAgBA,OAAM,SAAS,QAAQ,QAAQ;AACrD,UAAM,oBAAoB,cAAc,OAAO,CAAC,QAAQ,IAAI,MAAM,aAAa,IAAI,EAAE,CAAC;AAEtF,QAAI,sBAAsB,KAAM,QAAO;AACvC,WAAO,kBAAkB,MAAM,SAAS;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAiB,mBAAmB;AAEtF,QAAM,kBAAkB,QAAQ,MAAM;AACpC,QAAI,cAAc,OAAW,QAAO;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;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-statements */\nimport React, { useRef, useState, useMemo, useEffect } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTabsDefaultProps } from '../react-desc-prop-types.js';\nimport type { DSTabsT, DSTabT } from '../react-desc-prop-types.js';\nimport type { DSTabsInternalsT } from '../sharedTypes.js';\nimport { centerTab, isElementVisible, shouldHaveLeftGradient, shouldHaveRightGradient } from '../utils/helpers.js';\nimport { useResizeObserver } from './useResizeObserver.js';\nimport { DEFAULT_INDICATOR_STYLES } from '../constants/index.js';\n\nexport const useTabs = (props: DSTabsT.Props): DSTabsInternalsT.DSTabsUseTabsContextT => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSTabsT.InternalProps>(props, DSTabsDefaultProps);\n\n  const { activeTab, children, onTabChange, isDSMobile, fixedTabsHeaders, showSelectionIndicator } = 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  // we can't activate disabled tabs, we search for the first activable tab\n  const firstActivableTabId = useMemo(() => {\n    const childrenArray = React.Children.toArray(children) as React.ReactElement<DSTabT.Props>[];\n    const firstActivableTab = childrenArray.filter((tab) => tab.props.disabled !== true)[0];\n\n    if (firstActivableTab === null) return '';\n    return firstActivableTab.props.tabId ?? '';\n  }, [children]);\n\n  const [internalActiveTab, setInternalActiveTab] = useState<string>(firstActivableTabId);\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 [mobileGradients, setMobileGradients] = useState<DSTabsInternalsT.MobileGradientsT>({\n    left: false,\n    right: false,\n  });\n  const [indicatorStyle, setIndicatorStyle] = useState<DSTabsInternalsT.IndicatorStyleT>(DEFAULT_INDICATOR_STYLES);\n\n  const getIndicatorStyles = React.useCallback(() => {\n    if (tabsListRef.current) {\n      const tabList = tabsListRef.current;\n      const activeTabButton = actualActiveTabRef.current;\n\n      if (!activeTabButton || !isElementVisible(activeTabButton, tabList)) return DEFAULT_INDICATOR_STYLES;\n\n      // The missingMargins are to make the selection indicator white marks work properly in desktop, we need\n      // the full width of the tab button with margins.\n      const missingMargins = isDSMobile ? 0 : 16;\n\n      const tabClientWidth =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.clientWidth\n          : activeTabButton.clientWidth + missingMargins * 2;\n\n      // The reason why we use the tabList.scrollLeft is due to the centerOnTabChange (only in Mobile and FlexibleTabs)\n      // behavior that adds scroll to the tabList\n      const position =\n        isDSMobile && !fixedTabsHeaders\n          ? activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left + tabList.scrollLeft\n          : activeTabButton.getBoundingClientRect().left - tabList.getBoundingClientRect().left - missingMargins;\n\n      return {\n        left: Math.round(position),\n        width: Math.round(tabClientWidth),\n      };\n    }\n    return DEFAULT_INDICATOR_STYLES;\n  }, [actualActiveTabRef, fixedTabsHeaders, isDSMobile, tabsListRef]);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates indicator style with a delay. It:\n   * 1. Uses setTimeout to delay style updates\n   * 2. Called on resize and tab changes\n   */\n  const updateIndicatorStyle = React.useCallback(\n    () => setTimeout(() => setIndicatorStyle(getIndicatorStyles()), 100),\n    [getIndicatorStyles, setIndicatorStyle],\n  );\n\n  useResizeObserver(updateIndicatorStyle, tabsListRef.current);\n  useResizeObserver(updateIndicatorStyle, actualActiveTabRef.current);\n\n  /** [PUI-15772] - Tabs Pre Refactor\n   * Updates mobile gradient visibility. It:\n   * 1. Calculates scroll position\n   * 2. Updates gradient visibility based on scroll\n   */\n  const updateMobileGradients = React.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  React.useLayoutEffect(() => {\n    if (showSelectionIndicator) {\n      updateIndicatorStyle();\n    }\n    if (isDSMobile && !fixedTabsHeaders) {\n      updateMobileGradients();\n    }\n  }, [\n    updateMobileGradients,\n    updateIndicatorStyle,\n    isDSMobile,\n    fixedTabsHeaders,\n    actualActiveTab,\n    showSelectionIndicator,\n  ]);\n\n  const handleOnTabChange = React.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 globalClickHandler = React.useCallback(\n    (data: DSTabsInternalsT.GlobalClickHandlerT): void => {\n      if (data.target === 'panel') {\n        // we need to allow the text selection in the panel\n        // this enters on conflict with the SwipeableViews component\n        if (propsWithDefaults.allowTextSelection) {\n          data.event.stopPropagation();\n        }\n      }\n\n      if (data.target === 'tabsList') {\n        const target = data.event.target as HTMLButtonElement;\n        const { dataset, ariaDisabled } = target;\n        if (dataset.tabId && ariaDisabled !== 'true') {\n          handleOnTabChange(dataset.tabId, data.event);\n        }\n      }\n      if (data.target === 'swipeableViews') {\n        handleOnTabChange(data.tabId!);\n      }\n      if (data.target === 'tabItem' && data.tabId && !(data.event.currentTarget as HTMLButtonElement).disabled) {\n        handleOnTabChange(data.tabId, data.event);\n      }\n    },\n    [propsWithDefaults.allowTextSelection, handleOnTabChange],\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      globalClickHandler,\n      updateIndicatorStyle,\n      setIndicatorStyle,\n      indicatorStyle,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n    }),\n    [\n      propsWithDefaults,\n      actualActiveTab,\n      globalClickHandler,\n      updateIndicatorStyle,\n      indicatorStyle,\n      mobileGradients,\n      updateMobileGradients,\n      handleOnTabChange,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/index.js

@@ -5,7 +5,8 @@ import {
   TABS_DATA_TESTID,
   TABS_DATA_TESTID as TABS_DATA_TESTID2,
   TAB_TYPES,
-  TAB_TYPES as TAB_TYPES2
+  TAB_TYPES as TAB_TYPES2,
+  DSTabsName
 } from "./constants/index.js";
 import { DSTab, DSTabWithSchema } from "./exported-related/DSTab.js";
 export {
@@ -13,6 +14,7 @@ export {
   DSTabWithSchema,
   DSTabs,
   TABS_DATA_TESTID2 as DSTabsDatatestid,
+  DSTabsName,
   DSTabsWithSchema,
   TABS_DATA_TESTID,
   TABS_SLOTS,

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 { DSTabs, DSTabsWithSchema } from './DSTabs.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\nexport {\n  TABS_SLOTS,\n  TABS_DATA_TESTID,\n  TABS_DATA_TESTID as DSTabsDatatestid,\n  TAB_TYPES,\n  TAB_TYPES as TabTypes,\n} from './constants/index.js';\nexport { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,wBAAwB;AAEzC;AAAA,EACE;AAAA,EACA;AAAA,EACoB,oBAApBA;AAAA,EACA;AAAA,EACa,aAAbC;AAAA,OACK;AACP,SAAS,OAAO,uBAAuB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSTabs, DSTabsWithSchema } from './DSTabs.js';\nexport type { DSTabT, DSTabsT } from './react-desc-prop-types.js';\nexport {\n  TABS_SLOTS,\n  TABS_DATA_TESTID,\n  TABS_DATA_TESTID as DSTabsDatatestid,\n  TAB_TYPES,\n  TAB_TYPES as TabTypes,\n  DSTabsName,\n} from './constants/index.js';\nexport { DSTab, DSTabWithSchema } from './exported-related/DSTab.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,wBAAwB;AAEzC;AAAA,EACE;AAAA,EACA;AAAA,EACoB,oBAApBA;AAAA,EACA;AAAA,EACa,aAAbC;AAAA,EACA;AAAA,OACK;AACP,SAAS,OAAO,uBAAuB;",
   "names": ["TABS_DATA_TESTID", "TAB_TYPES"]
 }