@elliemae/ds-tabs 2.2.0 → 2.3.0-alpha.3

package/cjs/parts/tabBar/styles.js

@@ -1,200 +1,294 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
-var styled = require('styled-components');
-var dsSystem = require('@elliemae/ds-system');
-var constants = require('../../utils/constants.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-var _templateObject;
-const StyledSelectionIndicator = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-0"
-})(["position:absolute;height:3px;top:", ";margin-top:", ";pointer-events:none;transition:200ms cubic-bezier(0.36,0,1,1);z-index:10;", ""], _ref => {
-  let {
-    tabType,
-    isDSMobile
-  } = _ref;
-  if (isDSMobile) return "35px";
-  if (tabType === constants.TabTypes.NORMAL_SMALL) return "15px";
-  return "25px";
-}, _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.space.xxxs;
-}, _ref3 => {
-  let {
-    isDSMobile
-  } = _ref3;
-  return isDSMobile ? " \n  margin-left: 0;\n  margin-top: 3px;\n  " : "";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __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 });
+  }
+  return target;
+};
+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 styles_exports = {};
+__export(styles_exports, {
+  StyledRequiredMark: () => StyledRequiredMark,
+  StyledSelectionIndicator: () => StyledSelectionIndicator,
+  StyledSubTabsList: () => StyledSubTabsList,
+  StyledTabButton: () => StyledTabButton,
+  StyledTabList: () => StyledTabList,
+  StyledTabWrapper: () => StyledTabWrapper
 });
-const mobileGradientsSettings = dsSystem.css(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  ", "\n"])), _ref4 => {
-  let {
-    theme,
-    mobileGradients,
-    isDSMobile,
-    fixedTabsHeaders
-  } = _ref4;
-
+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;
+  top: ${({ tabType, isDSMobile }) => {
+  if (isDSMobile)
+    return `35px`;
+  if (tabType === import_constants.TabTypes.NORMAL_SMALL)
+    return `15px`;
+  return `25px`;
+}};
+  margin-top: ${({ theme }) => theme.space.xxxs};
+  pointer-events: none;
+  transition: 200ms cubic-bezier(0.36, 0, 1, 1);
+  z-index: 10;
+  ${({ isDSMobile }) => isDSMobile ? ` 
+  margin-left: 0;
+  margin-top: 3px;
+  ` : ``}
+`;
+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%, ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
-    if (mobileGradients.right) return "background: linear-gradient(90deg, ".concat(theme.colors.brand[200], " 0%, ").concat(theme.colors.brand[200], " 80%, rgba(238,238,238,0) 100%);");
-    if (mobileGradients.left) return "background: linear-gradient(90deg, rgba(238,238,238,0) 0%,  ".concat(theme.colors.brand[200], " 20%, ").concat(theme.colors.brand[200], " 100%);");
+    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%);`;
+    if (mobileGradients.right)
+      return `background: linear-gradient(90deg, ${theme.colors.brand[200]} 0%, ${theme.colors.brand[200]} 80%, 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 ``;
+}}
+`;
+const StyledTabWrapper = import_styled_components.default.div`
+  display: flex;
+  flex: 1;
+  flex-wrap: nowrap;
+  ${({ fixedTabsHeaders, isDSMobile }) => !fixedTabsHeaders && isDSMobile ? "" : "overflow-x: hidden;"}
+  ${({ theme, isDSMobile }) => isDSMobile ? `border-bottom: 1px solid ${theme.colors.brand[300]};` : ``}
+`;
+const StyledTabButton = import_styled_components.default.button`
+  position: relative;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: 100ms cubic-bezier(0, 0, 0.42, 1);
+  text-transform: ${({ tabType }) => tabType === import_constants.TabTypes.SUBTABS ? `capitalize` : `uppercase`};
+  letter-spacing: 0px;
+  white-space: nowrap;
+  padding: 2px 0;
+  margin-right: ${({ fixedTabsHeaders, isDSMobile }) => {
+  if (fixedTabsHeaders)
+    return "0px";
+  if (!fixedTabsHeaders && isDSMobile)
+    return "14px";
+  return "16px";
+}};
 
-  return "";
-});
-const StyledTabWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-1"
-})(["display:flex;flex:1;flex-wrap:nowrap;", " ", ""], _ref5 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref5;
-  return !fixedTabsHeaders && isDSMobile ? '' : 'overflow-x: hidden;';
-}, _ref6 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref6;
-  return isDSMobile ? "border-bottom: 1px solid ".concat(theme.colors.brand[300], ";") : "";
-});
-const StyledTabButton = /*#__PURE__*/styled__default["default"].button.withConfig({
-  componentId: "sc-3hla56-2"
-})(["position:relative;background-color:transparent;border:none;cursor:pointer;transition:100ms cubic-bezier(0,0,0.42,1);text-transform:", ";letter-spacing:0px;white-space:nowrap;padding:2px 0;margin-right:", ";margin-left:", ";color:", ";", " ", " ", " ", " ", " ", " ", ""], _ref7 => {
-  let {
-    tabType
-  } = _ref7;
-  return tabType === constants.TabTypes.SUBTABS ? "capitalize" : "uppercase";
-}, _ref8 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref8;
-  if (fixedTabsHeaders) return '0px';
-  if (!fixedTabsHeaders && isDSMobile) return '14px';
-  return '16px';
-}, _ref9 => {
-  let {
-    fixedTabsHeaders,
-    isDSMobile
-  } = _ref9;
-  if (fixedTabsHeaders) return '0px';
-  if (!fixedTabsHeaders && isDSMobile) return '14px';
-  return '16px';
-}, _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.colors.neutral[700];
-}, dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), _ref11 => {
-  let {
-    tabType
-  } = _ref11;
-  return tabType === constants.TabTypes.NORMAL ? "height: 32px;" : "height: 22px;";
-}, _ref12 => {
-  let {
-    theme,
-    isActive,
-    disabled
-  } = _ref12;
-  return isActive && !disabled ? "\n          font-weight:  ".concat(theme.fontWeights.semibold, ";\n          ").concat(dsSystem.safariAndFirefoxBold("#353C46"), "\n\n          &:hover {\n            ").concat(dsSystem.safariAndFirefoxBold("#1E79C2"), "\n          }\n          \n        ") : "\n      \n      ";
-}, _ref13 => {
-  let {
-    theme,
-    disabled
-  } = _ref13;
-  return disabled ? "\n          color: ".concat(theme.colors.neutral[500], ";\n          cursor: not-allowed;\n        ") : "\n      &:hover {\n        color: ".concat(theme.colors.brand[600], ";\n      }\n          ");
-}, _ref14 => {
-  let {
-    theme,
-    showSeparator,
-    tabType
-  } = _ref14;
-  return showSeparator ? "\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: ".concat(tabType === constants.TabTypes.SUBTABS ? "10px" : "16px", ";\n              background: ").concat(theme.colors.neutral[400], ";\n            }") : "";
-}, _ref15 => {
-  let {
-    theme,
-    isDSMobile,
-    tabType,
-    isActive
-  } = _ref15;
-  return !isDSMobile ? "\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 ".concat(theme.colors.brand[700], ";\n    }\n\n    ").concat(tabType !== constants.TabTypes.SUBTABS && isActive ? "\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  ") : "";
-}, _ref16 => {
-  let {
-    theme,
-    isActive,
-    disabled,
-    isDSMobile
-  } = _ref16;
-  return isDSMobile ? "\n    height:  40px;\n    color: ".concat(theme.colors.brand[600], ";\n    font-weight: ").concat(theme.fontWeights.regular, ";\n    padding: 0;\n    font-size: 13px;\n    line-height: 1.3;\n    ").concat(dsSystem.onlySafariAndFirefox('-webkit-text-stroke: 0.4px transparent;'), " \n\n    &:focus {\n      font-weight: ").concat(theme.fontWeights.regular, ";\n      font-size: 13px;\n      ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n    }\n\n    ").concat(isActive ? "\n        font-weight: ".concat(theme.fontWeights.regular, ";\n        font-size: 13px;\n        ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        ") : "", "\n\n    ").concat(isActive && !disabled ? "\n        font-size: 13px;\n        color:  ".concat(theme.colors.brand[700], ";\n        line-height: 1.3;\n        font-weight: ").concat(theme.fontWeights.regular, ";\n        -webkit-font-smoothing: subpixel-antialiased; \n        -webkit-text-stroke: 0.4px ").concat(theme.colors.brand[700], ";") : "", "\n\n    ").concat(!disabled ? "\n        &:hover,\n        &:focus {\n          outline: none;\n          color: ".concat(theme.colors.brand[700], ";\n          ").concat(dsSystem.safariAndFirefoxBold('#006AA9'), "\n        }") : "", "\n\n    ") : "";
-});
-const StyledSubTabsList = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-3"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", ""], _ref17 => {
-  let {
-    withCarousel
-  } = _ref17;
-  return withCarousel ? 'max-width: 100%;' : '';
-});
-const StyledTabList = /*#__PURE__*/styled__default["default"].div.withConfig({
-  componentId: "sc-3hla56-4"
-})(["position:relative;display:flex;flex-wrap:nowrap;flex:1;width:100%;", " ", " ", "{padding-bottom:0;padding-top:0;}", " ", " ", " ", "{", "}", "{background:", ";}"], _ref18 => {
-  let {
-    withCarousel,
-    isDSMobile
-  } = _ref18;
-  return withCarousel && !isDSMobile ? "max-width: 100%;" : '';
-}, _ref19 => {
-  let {
-    theme,
-    isDSMobile,
-    tabType
-  } = _ref19;
-  return tabType !== constants.TabTypes.NORMAL_SMALL && !isDSMobile ? "\n  &:after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    box-shadow: 0px 0px 0px 1px ".concat(theme.colors.neutral[400], ";\n    pointer-events: none;\n    bottom: 0px;\n  }\n  ") : "";
-}, StyledTabButton, _ref20 => {
-  let {
-    theme,
-    isDSMobile
-  } = _ref20;
-  return isDSMobile ? "\n        \n         background: ".concat(theme.colors.brand[200], ";") : "";
-}, mobileGradientsSettings, _ref21 => {
-  let {
-    isDSMobile,
-    fixedTabsHeaders
-  } = _ref21;
-  return isDSMobile ? "\n      ".concat(!fixedTabsHeaders ? "\n          z-index: 0;\n          overflow-x: auto;\n          overflow-y: hidden;\n          scrollbar-width: thin;\n          &::-webkit-scrollbar {\n            display: none;\n          }" : "\n         display: flex;\n        ".concat(StyledTabButton, " {\n          flex: 1;\n          overflow-x: hidden;\n        }")) : "";
-}, StyledSelectionIndicator, _ref22 => {
-  let {
-    indicatorStyle
-  } = _ref22;
-  return "\n        width: ".concat(indicatorStyle.width, ";\n        left: ").concat(indicatorStyle.left, ";\n        ");
-}, StyledSelectionIndicator, _ref23 => {
-  let {
-    theme,
-    indicatorStyle,
-    isDSMobile
-  } = _ref23;
-  return !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600];
-});
-const StyledRequiredMark = /*#__PURE__*/styled__default["default"].span.withConfig({
-  componentId: "sc-3hla56-5"
-})(["color:", ";font-size:6px;margin-left:2px;position:absolute;top:5px;"], _ref24 => {
-  let {
-    theme
-  } = _ref24;
-  return theme.colors.danger[900];
-});
+  margin-left: ${({ fixedTabsHeaders, isDSMobile }) => {
+  if (fixedTabsHeaders)
+    return "0px";
+  if (!fixedTabsHeaders && isDSMobile)
+    return "14px";
+  return "16px";
+}};
+
+  color: ${({ theme }) => theme.colors.neutral[700]};
+  ${(0, import_ds_system.onlySafariAndFirefox)("-webkit-text-stroke: 0.4px transparent;")}
+
+  ${({ tabType }) => tabType === import_constants.TabTypes.NORMAL ? `height: 32px;` : `height: 22px;`}
+
+  ${({ theme, isActive, disabled }) => isActive && !disabled ? `
+          font-weight:  ${theme.fontWeights.semibold};
+          ${(0, import_ds_system.safariAndFirefoxBold)(`#353C46`)}
+
+          &:hover {
+            ${(0, import_ds_system.safariAndFirefoxBold)(`#1E79C2`)}
+          }
+          
+        ` : `
+      
+      `}
+
+  ${({ theme, disabled }) => disabled ? `
+          color: ${theme.colors.neutral[500]};
+          cursor: not-allowed;
+        ` : `
+      &:hover {
+        color: ${theme.colors.brand[600]};
+      }
+          `}
+
+
+  ${({ theme, showSeparator, tabType }) => showSeparator ? `
+          &:not(:last-of-type):before
+            {
+              content: "";
+              position: absolute;
+              width: 1px;
+              right: -16px;
+              top: 50%;
+              transform: translateY(-50%);
+              height: ${tabType === import_constants.TabTypes.SUBTABS ? `10px` : `16px`};
+              background: ${theme.colors.neutral[400]};
+            }` : ``}
+
+  ${({ theme, isDSMobile, tabType, isActive }) => !isDSMobile ? `
+  &:focus {
+    outline: none;
+    &:after {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: -16px;
+      width: calc(100% + 32px);
+      height: 100%;
+      z-index: 5;
+      border-radius: 2px;
+      border: 2px solid ${theme.colors.brand[700]};
+    }
+
+    ${tabType !== import_constants.TabTypes.SUBTABS && isActive ? `
+      &:before {
+        position: absolute;
+        content: '';
+        left: -16px;
+        right: 0;
+        top: calc(100% - 2px);
+        transform: none;
+        width: calc(100% + 32px);
+        height: 2px;
+        z-index: 10;
+        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%);
+      }
+    ` : ``}
+  }
+  
+  ` : ``}
 
-exports.StyledRequiredMark = StyledRequiredMark;
-exports.StyledSelectionIndicator = StyledSelectionIndicator;
-exports.StyledSubTabsList = StyledSubTabsList;
-exports.StyledTabButton = StyledTabButton;
-exports.StyledTabList = StyledTabList;
-exports.StyledTabWrapper = StyledTabWrapper;
+  
+      
+${({ theme, isActive, disabled, isDSMobile }) => isDSMobile ? `
+    height:  40px;
+    color: ${theme.colors.brand[600]};
+    font-weight: ${theme.fontWeights.regular};
+    padding: 0;
+    font-size: 13px;
+    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};
+        -webkit-font-smoothing: subpixel-antialiased; 
+        -webkit-text-stroke: 0.4px ${theme.colors.brand[700]};` : ``}
+
+    ${!disabled ? `
+        &:hover,
+        &:focus {
+          outline: none;
+          color: ${theme.colors.brand[700]};
+          ${(0, import_ds_system.safariAndFirefoxBold)("#006AA9")}
+        }` : ``}
+
+    ` : ``}
+`;
+const StyledSubTabsList = import_styled_components.default.div`
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  flex: 1;
+  width: 100%;
+  ${({ withCarousel }) => withCarousel ? "max-width: 100%;" : ""}
+`;
+const StyledTabList = import_styled_components.default.div`
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  flex: 1;
+  width: 100%;
+  ${({ withCarousel, isDSMobile }) => withCarousel && !isDSMobile ? `max-width: 100%;` : ""}
+
+  ${({ theme, isDSMobile, tabType }) => tabType !== import_constants.TabTypes.NORMAL_SMALL && !isDSMobile ? `
+  &:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    box-shadow: 0px 0px 0px 1px ${theme.colors.neutral[400]};
+    pointer-events: none;
+    bottom: 0px;
+  }
+  ` : ``}
+
+  ${StyledTabButton} {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  ${({ theme, isDSMobile }) => isDSMobile ? `
+        
+         background: ${theme.colors.brand[200]};` : ``}
+
+  ${mobileGradientsSettings}
+
+
+  ${({ isDSMobile, fixedTabsHeaders }) => isDSMobile ? `
+      ${!fixedTabsHeaders ? `
+          z-index: 0;
+          overflow-x: auto;
+          overflow-y: hidden;
+          scrollbar-width: thin;
+          &::-webkit-scrollbar {
+            display: none;
+          }` : `
+         display: flex;
+        ${StyledTabButton} {
+          flex: 1;
+          overflow-x: hidden;
+        }`}` : ``}
+
+    ${StyledSelectionIndicator} {
+    ${({ indicatorStyle }) => `
+        width: ${indicatorStyle.width};
+        left: ${indicatorStyle.left};
+        `}
+  }
+
+  ${StyledSelectionIndicator} {
+    background: ${({ theme, indicatorStyle, isDSMobile }) => !isDSMobile ? indicatorStyle.backgroundWithTransparent : theme.colors.brand[600]};
+  }
+`;
+const StyledRequiredMark = import_styled_components.default.span`
+  color: ${({ theme }) => theme.colors.danger[900]};
+  font-size: 6px;
+  margin-left: 2px;
+  position: absolute;
+  top: 5px;
+`;
+module.exports = __toCommonJS(styles_exports);
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +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 {\n  StyledSelectionIndicatoPropsT,\n  StyledSubTabsListPropsT,\n  StyledTabListPropsT,\n  StyledTabButtonPropsT,\n  StyledTabWrapperPropsT,\n} from '../../DSTabsTypes';\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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",
+  "names": []
+}