@laerdal/life-react-components 2.3.1-dev.1 → 2.3.1-dev.10

package/dist/Tabs/TabLink.cjs

@@ -6,7 +6,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
@@ -17,20 +19,24 @@ var _styles = require("../styles");
 var _zIndexes = require("../styles/z-indexes");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var StyledTabLink = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
+var TopWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
+var TextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
+var StyledNotification = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
+var EndLineIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
+var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
+//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
+var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n  \n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n  \n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover {\n      background-color: ", ";\n    }\n  \n    &:hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.active:active {\n      background-color: ", ";\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), _styles.COLORS.neutral_600, function (props) {
   return props.disabled ? _styles.COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, _styles.focusStyles, _zIndexes.Z_INDEXES.active, _styles.COLORS.neutral_20, _styles.COLORS.primary_20, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_600, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.primary_500, _styles.COLORS.primary_600, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
-var OptionalLineWrapperWithIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n  }\n"])), StyledTabLink);
 var TabLink = function TabLink(_ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
@@ -39,25 +45,41 @@ var TabLink = function TabLink(_ref) {
     optionalLine = _ref.optionalLine,
     OptionalLineIcon = _ref.OptionalLineIcon,
     onLinkClick = _ref.onLinkClick,
+    forceDeactivate = _ref.forceDeactivate,
     testId = _ref.testId,
     _ref$showNotification = _ref.showNotificationDot,
     showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
+    endLineIcon = _ref.endLineIcon,
+    onActiveStateChanged = _ref.onActiveStateChanged,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
+    variant = _ref$variant === void 0 ? 'critical' : _ref$variant,
+    children = _ref.children,
+    containerOnMouseEnter = _ref.containerOnMouseEnter,
+    containerOnMouseLeave = _ref.containerOnMouseLeave,
+    className = _ref.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var ref = React.useRef(null);
   var _useState = (0, React.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    disabled: disabled,
     className: disabled ? 'disabled' : '',
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledTabLink, {
-      to: to.toString(),
-      disabled: disabled,
+    onMouseEnter: containerOnMouseEnter,
+    onMouseLeave: containerOnMouseLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, _objectSpread(_objectSpread({
+      to: forceDeactivate ? 'invalid' : to.toString()
+      //disabled={disabled}
+      ,
       className: function className(_ref2) {
         var isActive = _ref2.isActive;
+        onActiveStateChanged && onActiveStateChanged(activeState);
+        if (forceDeactivate) {
+          if (disabled) return 'disabled';else return '';
+        }
         if (isActive != activeState) setActiveState(isActive);
         return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
       },
@@ -69,7 +91,8 @@ var TabLink = function TabLink(_ref) {
         return !disabled && onLinkClick && onLinkClick(e);
       },
       ref: ref,
-      "data-testid": testId,
+      "data-testid": testId
+    }, rest), {}, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TextContainer, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TopWrapper, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -90,8 +113,10 @@ var TabLink = function TabLink(_ref) {
           size: size,
           variant: variant
         })
+      }), endLineIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(EndLineIcon, {
+        children: endLineIcon
       })]
-    })
+    })), children]
   });
 };
 var _default = TabLink;

package/dist/Tabs/TabLink.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.cjs","names":["StyledTabLink","styled","NavLink","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Size","Small","variant","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.cjs","names":["OptionalLineWrapperWithIcon","styled","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","COLORS","neutral_600","props","disabled","neutral_100","focusStyles","Z_INDEXES","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","ref","React","useRef","useState","activeState","setActiveState","toString","isActive","defaultOnMouseDownHandler","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ${COLORS.neutral_600};\n  \n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n  \n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n  \n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n    }\n  \n    &:hover {\n      z-index: ${Z_INDEXES.hover};\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  \n    &:active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover {\n      &::after {\n        background-color: ${COLORS.primary_600};\n      }\n    }\n  \n    &.active:active {\n      background-color: ${COLORS.primary_100};\n  \n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n  \n    &.disabled {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/TabLink.d.ts

@@ -3,14 +3,19 @@ import { NavLinkProps } from 'react-router-dom';
 import { Size } from '../types';
 type TabLinkProps = {
     disabled?: boolean;
+    forceDeactivate?: boolean;
     requiredLine: string;
     optionalLine?: string;
     OptionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
     onLinkClick?: (e: React.MouseEvent) => void;
     testId?: string;
+    onActiveStateChanged?: (state: boolean) => void;
     showNotificationDot?: boolean;
     size?: Size.Small | Size.Medium | Size.Large;
     variant?: 'positive' | 'critical';
+    containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
 } & NavLinkProps;
-declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, testId, showNotificationDot, size, variant, }: TabLinkProps) => JSX.Element;
+declare const TabLink: ({ to, disabled, requiredLine, optionalLine, OptionalLineIcon, onLinkClick, forceDeactivate, testId, showNotificationDot, size, endLineIcon, onActiveStateChanged, variant, children, containerOnMouseEnter, containerOnMouseLeave, className, ...rest }: TabLinkProps) => JSX.Element;
 export default TabLink;

package/dist/Tabs/TabLink.js

@@ -1,6 +1,11 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import * as React from 'react';
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
@@ -13,17 +18,18 @@ import { useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var StyledTabLink = styled(NavLink)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ", ";\n\n  background-color: ", ";\n  cursor: ", ";\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &.active {\n    z-index: ", ";\n    background-color: ", ";\n  }\n\n  &.active:hover {\n    background-color: ", ";\n  }\n\n  &:hover {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active {\n    z-index: ", ";\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ", ";\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.active:active {\n    background-color: ", ";\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n\n  &.disabled {\n    background-color: ", ";\n    color: ", ";\n\n    span {\n      color: ", ";\n    }\n\n    &::after {\n      background-color: ", ";\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
+var OptionalLineWrapperWithIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
+var TopWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
+var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
+var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
+var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
+//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
+var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n  \n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n  \n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n  \n    &:focus {\n      ", "\n    }\n  \n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n  \n    &.active:hover {\n      background-color: ", ";\n    }\n  \n    &:hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.active:active {\n      background-color: ", ";\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  \n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n  \n      span {\n        color: ", ";\n      }\n  \n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
   return props.disabled ? COLORS.neutral_100 : 'transparent';
 }, function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var OptionalLineWrapperWithIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n  }\n"])), StyledTabLink);
 var TabLink = function TabLink(_ref) {
   var to = _ref.to,
     _ref$disabled = _ref.disabled,
@@ -32,25 +38,41 @@ var TabLink = function TabLink(_ref) {
     optionalLine = _ref.optionalLine,
     OptionalLineIcon = _ref.OptionalLineIcon,
     onLinkClick = _ref.onLinkClick,
+    forceDeactivate = _ref.forceDeactivate,
     testId = _ref.testId,
     _ref$showNotification = _ref.showNotificationDot,
     showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? Size.Small : _ref$size,
+    endLineIcon = _ref.endLineIcon,
+    onActiveStateChanged = _ref.onActiveStateChanged,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'critical' : _ref$variant;
+    variant = _ref$variant === void 0 ? 'critical' : _ref$variant,
+    children = _ref.children,
+    containerOnMouseEnter = _ref.containerOnMouseEnter,
+    containerOnMouseLeave = _ref.containerOnMouseLeave,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var ref = React.useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     activeState = _useState2[0],
     setActiveState = _useState2[1];
-  return /*#__PURE__*/_jsx(Wrapper, {
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    disabled: disabled,
     className: disabled ? 'disabled' : '',
-    children: /*#__PURE__*/_jsxs(StyledTabLink, {
-      to: to.toString(),
-      disabled: disabled,
+    onMouseEnter: containerOnMouseEnter,
+    onMouseLeave: containerOnMouseLeave,
+    children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
+      to: forceDeactivate ? 'invalid' : to.toString()
+      //disabled={disabled}
+      ,
       className: function className(_ref2) {
         var isActive = _ref2.isActive;
+        onActiveStateChanged && onActiveStateChanged(activeState);
+        if (forceDeactivate) {
+          if (disabled) return 'disabled';else return '';
+        }
         if (isActive != activeState) setActiveState(isActive);
         return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
       },
@@ -62,7 +84,8 @@ var TabLink = function TabLink(_ref) {
         return !disabled && onLinkClick && onLinkClick(e);
       },
       ref: ref,
-      "data-testid": testId,
+      "data-testid": testId
+    }, rest), {}, {
       children: [/*#__PURE__*/_jsxs(TextContainer, {
         children: [/*#__PURE__*/_jsx(TopWrapper, {
           children: /*#__PURE__*/_jsx("span", {
@@ -83,8 +106,10 @@ var TabLink = function TabLink(_ref) {
           size: size,
           variant: variant
         })
+      }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
+        children: endLineIcon
       })]
-    })
+    })), children]
   });
 };
 export default TabLink;

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ${COLORS.neutral_600};\n  \n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n  \n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n  \n    &.active:hover {\n      background-color: ${COLORS.primary_20};\n    }\n  \n    &:hover {\n      z-index: ${Z_INDEXES.hover};\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  \n    &:active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover {\n      &::after {\n        background-color: ${COLORS.primary_600};\n      }\n    }\n  \n    &.active:active {\n      background-color: ${COLORS.primary_100};\n  \n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n  \n    &.disabled {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/VerticalTabs.cjs

@@ -24,6 +24,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -43,6 +44,7 @@ VerticalTabs.propTypes = {
     requiredLine: _propTypes.default.string.isRequired,
     optionalLine: _propTypes.default.string,
     optionalLineIcon: _propTypes.default.node,
+    endLineIcon: _propTypes.default.node,
     to: _propTypes.default.string.isRequired,
     disabled: _propTypes.default.bool,
     onClick: _propTypes.default.func,

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAiBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEK,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAL,OAAO;IAXPM,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eA+BpBb,YAAY;AAAA"}
+{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAkBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEZ,IAAK;QACX,OAAO,EAAEK,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAL,OAAO;IAZPM,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eAgCpBd,YAAY;AAAA"}

package/dist/Tabs/VerticalTabs.d.ts

@@ -4,6 +4,7 @@ export interface VerticalTabEntry {
     requiredLine: string;
     optionalLine?: string;
     optionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
     to: string;
     disabled?: boolean;
     onClick?: (e: React.MouseEvent) => void;

package/dist/Tabs/VerticalTabs.js

@@ -14,6 +14,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -33,6 +34,7 @@ VerticalTabs.propTypes = {
     requiredLine: _pt.string.isRequired,
     optionalLine: _pt.string,
     optionalLineIcon: _pt.node,
+    endLineIcon: _pt.node,
     to: _pt.string.isRequired,
     disabled: _pt.bool,
     onClick: _pt.func,

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAiBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEV,IAAK;QACX,OAAO,EAAEI,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAJ,OAAO;IAXPK,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AA+BnC,eAAeZ,YAAY"}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAkBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEI,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAJ,OAAO;IAZPK,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAgCnC,eAAeb,YAAY"}

package/dist/Tile/TileHeader.cjs

@@ -17,11 +17,11 @@ var _TileCommonItems = require("./TileCommonItems");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 var SubtitleIconContainer = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), _styles.COLORS.neutral_600);
+var SubtitleContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), _styles.COLORS.neutral_600);
 var TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), _styles.COLORS.black);
-var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
+var TextContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n"])));
 var ActionContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
+var Wrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), SubtitleContainer, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), TitleContainer, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,

package/dist/Tile/TileHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AASA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,qBAAqB,GAAGC,yBAAM,CAACC,IAAI,gMAQxC;AAED,IAAMC,iBAAiB,GAAGF,yBAAM,CAACG,GAAG,+JACzBC,cAAM,CAACC,WAAW,CAI5B;AAED,IAAMC,cAAc,GAAGN,yBAAM,CAACG,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGR,yBAAM,CAACG,GAAG,yLAM/B;AAED,IAAMM,eAAe,GAAGT,yBAAM,CAACG,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGV,yBAAM,CAACG,GAAG,0kBAWpBD,iBAAiB,EACf,IAAAS,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDb,iBAAiB,EACf,IAAAc,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDb,iBAAiB,EACf,IAAAY,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAOU;EAAA,IANJC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,kBAAW,CAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAEzB,cAAM,CAACC;QAAY;MAAE;IAC/C,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEoB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,wBACZ,qBAAC,cAAc;QAAA,UAAEL;MAAK,EAAkB,EAEtCC,QAAQ,iBACR,sBAAC,iBAAiB;QAAA,WAEdC,YAAY,iBACZ,qBAAC,qBAAqB;UAAA,uBAAEQ,cAAK,CAACC,YAAY,CAACT,YAAY,EAAwB;YAACG,IAAI,EAAEA,IAAI,KAAKE,WAAI,CAACK,KAAK,GAAG,MAAM,GAAG;UAAM,CAAC;QAAC,EAAyB,eAExJ;UAAA,UAAOX;QAAQ,EAAQ;MAAA,EACL;IAAA,EAER,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACS,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAET,IAAI,EAAEU,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEchB,UAAU;AAAA"}
+{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}

package/dist/Tile/TileHeader.js

@@ -11,11 +11,11 @@ import { RenderTileItem } from './TileCommonItems';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), COLORS.neutral_600);
+var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n"])), COLORS.neutral_600);
 var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
-var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
+var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n"])));
 var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
+var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
     subtitle = _ref.subtitle,

package/dist/Tile/TileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","SystemIcons","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n\n  padding: 14px 0;\n\n  .medium & {\n    padding: 12px 0;\n  }\n\n  .large & {\n    padding: 12px 0;\n  }\n\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: flex-start;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <SystemIcons.Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}