@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0

package/dist/Tabs/HorizontalTabs.cjs

@@ -1,107 +1,78 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 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 _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _types = require("../types");
-
 var _styles = require("../styles");
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _typography = require("../styles/typography");
-
 var _zIndexes = require("../styles/z-indexes");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
-    _excluded2 = ["value", "selected", "to", "disabled", "className"];
-
+  _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-
 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; }
-
 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; }
-
 // Add custom styles
 var HorizontalTabContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ", ";\n  }\n  \n"])), _styles.focusStyles);
-
 var TabSideFill = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.white);
+var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 
-var TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), _styles.COLORS.neutral_800, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.white, _styles.COLORS.primary_500, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _types.Size.XSmall, (0, _typography.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)); // Add component-specific types
-
+// Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,
-      tabs = _ref.tabs,
-      sideFill = _ref.sideFill,
-      fullWidth = _ref.fullWidth,
-      onTabChange = _ref.onTabChange,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component
-    onTabChange(to); // Let's clear focus
+    onTabChange(to);
 
+    // Let's clear focus
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
   };
-
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      currentTab = _React$useState4[0],
-      setCurrentTab = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    currentTab = _React$useState4[0],
+    setCurrentTab = _React$useState4[1];
   React.useEffect(function () {
     var selectedTab = tabs.find(function (x) {
       return x.selected && !x.disabled;
     });
     if (selectedTab) setCurrentTab(selectedTab.to);
   }, [tabs]);
-
   var tabListBlur = function tabListBlur() {
     return setFocused(false);
   };
-
   var tabListFocus = function tabListFocus(e) {
     return setFocused(true);
   };
-
   var changeTabInternal = function changeTabInternal(tab) {
     tab.selected = true;
     tabs.forEach(function (x) {
@@ -110,15 +81,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     setCurrentTab(tab.to);
     onTabChange(tab.to);
   };
-
   var tabListKeyDown = function tabListKeyDown(e) {
     if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
       e.preventDefault();
-
       if (e.key === 'ArrowRight') {
         tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-
           for (var j = 1; j < tabs.length - 1; j++) {
             var nextIndex = j + i;
             if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
@@ -128,11 +96,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
           }
         });
       }
-
       if (e.key === 'ArrowLeft') {
         tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-
           for (var j = 1; j < tabs.length - 1; j++) {
             var nextIndex = i - j;
             if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
@@ -144,7 +110,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
       }
     }
   };
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(HorizontalTabContainer, _objectSpread(_objectSpread({
     tabIndex: 0,
     onBlur: tabListBlur,
@@ -158,11 +123,11 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       var value = tab.value,
-          selected = tab.selected,
-          to = tab.to,
-          disabled = tab.disabled,
-          className = tab.className,
-          rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
+        selected = tab.selected,
+        to = tab.to,
+        disabled = tab.disabled,
+        className = tab.className,
+        rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
         role: "tab",
         "data-testid": "tab_".concat(value),
@@ -175,7 +140,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
         } : {},
         className: "".concat(className || '', " size-").concat(size),
         onClick: function onClick() {
-          return !disabled && doTabChange(to);
+          return !disabled && changeTabInternal(tab);
         }
       }, rest), {}, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -186,7 +151,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     })]
   }));
 };
-
 HorizontalTabs.propTypes = {
   tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
     value: _propTypes.default.string.isRequired,

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.cjs","names":["HorizontalTabContainer","styled","div","focusStyles","TabSideFill","COLORS","neutral_100","white","TabButton","button","neutral_800","Z_INDEXES","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","React","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","defaultOnMouseDownHandler","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}

package/dist/Tabs/HorizontalTabs.js

@@ -4,85 +4,78 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange"],
-    _excluded2 = ["value", "selected", "to", "disabled", "className"];
-
+  _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
-
 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 React libraries.
  */
 import * as React from 'react';
 import { Size } from '../types';
+
 /**
  * Import custom styles.
  */
-
 import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
+
 /**
  * Import third-party libraries.
  */
-
 import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
-import { defaultOnMouseDownHandler } from '../common'; // Add custom styles
+import { defaultOnMouseDownHandler } from '../common';
 
+// Add custom styles
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var HorizontalTabContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ", ";\n  }\n  \n"])), focusStyles);
 var TabSideFill = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.white);
-var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null)); // Add component-specific types
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ", ";\n    div {\n      background: ", ";\n      color: ", ";\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ", ";\n      color: ", ";\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.selected {\n      background-color: ", ";\n      border-top: 2px solid ", ";\n      border-bottom: 0px;\n      border-left: 1px solid ", ";\n      border-right: 1px solid ", ";\n    }\n\n    &:active {\n      background: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ", ";\n        border-bottom: 0px;\n        border-left: 1px solid ", ";\n        border-right: 1px solid ", ";\n      }\n    }\n\n    &.disabled {\n      color: ", ";\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ", ";\n      }\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-", " {\n      ", "\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-", " {\n      ", "\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n"])), COLORS.neutral_800, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, Z_INDEXES.active, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_100, COLORS.white, COLORS.primary_500, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_100, COLORS.primary_800, COLORS.focus_25, COLORS.focus, COLORS.primary_800, COLORS.neutral_100, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
+
+// Add component-specific types
 
 var HorizontalTabs = function HorizontalTabs(_ref) {
   var size = _ref.size,
-      tabs = _ref.tabs,
-      sideFill = _ref.sideFill,
-      fullWidth = _ref.fullWidth,
-      onTabChange = _ref.onTabChange,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
    */
   var doTabChange = function doTabChange(to) {
     // Let's inform parent component
-    onTabChange(to); // Let's clear focus
+    onTabChange(to);
 
+    // Let's clear focus
     if (document.activeElement instanceof HTMLElement) {
       document.activeElement.blur();
     }
   };
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focused = _React$useState2[0],
+    setFocused = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      currentTab = _React$useState4[0],
-      setCurrentTab = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    currentTab = _React$useState4[0],
+    setCurrentTab = _React$useState4[1];
   React.useEffect(function () {
     var selectedTab = tabs.find(function (x) {
       return x.selected && !x.disabled;
     });
     if (selectedTab) setCurrentTab(selectedTab.to);
   }, [tabs]);
-
   var tabListBlur = function tabListBlur() {
     return setFocused(false);
   };
-
   var tabListFocus = function tabListFocus(e) {
     return setFocused(true);
   };
-
   var changeTabInternal = function changeTabInternal(tab) {
     tab.selected = true;
     tabs.forEach(function (x) {
@@ -91,15 +84,12 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     setCurrentTab(tab.to);
     onTabChange(tab.to);
   };
-
   var tabListKeyDown = function tabListKeyDown(e) {
     if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
       e.preventDefault();
-
       if (e.key === 'ArrowRight') {
         tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-
           for (var j = 1; j < tabs.length - 1; j++) {
             var nextIndex = j + i;
             if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
@@ -109,11 +99,9 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
           }
         });
       }
-
       if (e.key === 'ArrowLeft') {
         tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-
           for (var j = 1; j < tabs.length - 1; j++) {
             var nextIndex = i - j;
             if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
@@ -125,7 +113,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
       }
     }
   };
-
   return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
     tabIndex: 0,
     onBlur: tabListBlur,
@@ -139,12 +126,11 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
       className: "".concat(sideFill ? 'fill' : '')
     }), tabs.map(function (tab, index) {
       var value = tab.value,
-          selected = tab.selected,
-          to = tab.to,
-          disabled = tab.disabled,
-          className = tab.className,
-          rest = _objectWithoutProperties(tab, _excluded2);
-
+        selected = tab.selected,
+        to = tab.to,
+        disabled = tab.disabled,
+        className = tab.className,
+        rest = _objectWithoutProperties(tab, _excluded2);
       return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
         role: "tab",
         "data-testid": "tab_".concat(value),
@@ -157,7 +143,7 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
         } : {},
         className: "".concat(className || '', " size-").concat(size),
         onClick: function onClick() {
-          return !disabled && doTabChange(to);
+          return !disabled && changeTabInternal(tab);
         }
       }, rest), {}, {
         children: /*#__PURE__*/_jsx("div", {
@@ -168,7 +154,6 @@ var HorizontalTabs = function HorizontalTabs(_ref) {
     })]
   }));
 };
-
 HorizontalTabs.propTypes = {
   tabs: _pt.arrayOf(_pt.shape({
     value: _pt.string.isRequired,

package/dist/Tabs/HorizontalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && doTabChange(to)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalTabs.js","names":["React","Size","COLORS","ComponentTextStyle","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","Z_INDEXES","defaultOnMouseDownHandler","HorizontalTabContainer","div","TabSideFill","neutral_100","white","TabButton","button","neutral_800","hover","primary_20","primary_700","active","primary_500","primary_100","primary_800","focus_25","focus","neutral_300","XSmall","Regular","Small","Medium","Large","HorizontalTabs","size","tabs","sideFill","fullWidth","onTabChange","rest","doTabChange","to","document","activeElement","HTMLElement","blur","useState","focused","setFocused","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","e","changeTabInternal","tab","forEach","tabListKeyDown","key","preventDefault","i","j","length","nextIndex","map","index","value","className","width"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { COLORS, ComponentTextStyle, focusStyles } from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\n\n// Add custom styles\nconst HorizontalTabContainer = styled.div`\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus{\n    ${focusStyles};\n  }\n  \n`;\n\nconst TabSideFill = styled.div`\n  position: absolute;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ${COLORS.white};\n  }\n`;\n\nconst TabButton = styled.button`\n  color: ${COLORS.neutral_800};\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0px;\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    div {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &[aria-selected=\"true\"] {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n  }\n  &[aria-selected=\"true\"] {\n    z-index: ${Z_INDEXES.active};\n  }\n\n  div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n\n    &:hover {\n      background: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_700};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.selected {\n      background-color: ${COLORS.white};\n      border-top: 2px solid ${COLORS.primary_500};\n      border-bottom: 0px;\n      border-left: 1px solid ${COLORS.neutral_100};\n      border-right: 1px solid ${COLORS.neutral_100};\n    }\n\n    &:active {\n      background: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n      box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n      outline: none;\n\n      &.selected {\n        border-top: 2px solid ${COLORS.primary_800};\n        border-bottom: 0px;\n        border-left: 1px solid ${COLORS.neutral_100};\n        border-right: 1px solid ${COLORS.neutral_100};\n      }\n    }\n\n    &.disabled {\n      color: ${COLORS.neutral_300};\n      cursor: not-allowed;\n      box-shadow: none !important;\n\n      &:hover {\n        background-color: transparent;\n        color: ${COLORS.neutral_300};\n      }\n    }\n\n    &.size-${Size.XSmall} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 32px;\n      margin-top: 16px;\n    }\n\n    &.size-${Size.Small} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n      padding: 0px 16px;\n      height: 40px;\n      margin-top: 8px;\n    }\n\n    &.size-${Size.Medium} {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n      height: 48px;\n      min-width: 96px;\n      padding: 0px 16px;\n    }\n\n    &.size-${Size.Large} {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n      height: 56px;\n      min-width: 144px;\n      padding: 0px 16px;\n    }\n  }\n`;\n\n// Add component-specific types\ninterface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement>{\n  size: Size;\n  tabs: HorizontalTab[];\n  sideFill?: boolean;\n  fullWidth?: boolean;\n  onTabChange: (to: string) => void;\n}\n\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\n  value: string;\n  selected: boolean;\n  to: string;\n}\n\nconst HorizontalTabs = ({ size, tabs, sideFill, fullWidth, onTabChange, ...rest }: HorizontalTabProps) => {\n  /**\n   * Informs parent component of tab change and clears focus.\n   * @param to - A link to which user should be navigated.\n   */\n  const doTabChange = (to: string): void => {\n    // Let's inform parent component\n    onTabChange(to);\n\n    // Let's clear focus\n    if (document.activeElement instanceof HTMLElement) {\n      document.activeElement!.blur();\n    }\n  };\n\n  const [focused, setFocused ] = React.useState<boolean>(false);\n  const [currentTab, setCurrentTab] = React.useState<string>();\n\n  React.useEffect(() => {\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\n    if(selectedTab)\n      setCurrentTab(selectedTab.to);\n  }, [tabs]);\n\n  const tabListBlur = () => setFocused(false);\n\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\n\n  const changeTabInternal = (tab: HorizontalTab) => {\n    tab.selected = true;\n    tabs.forEach(x => {\n      if(x.to != tab.to)\n        x.selected = false;\n    });\n    setCurrentTab(tab.to);\n    onTabChange(tab.to);\n  }\n\n  const tabListKeyDown = (e:React.KeyboardEvent) => {\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\n      e.preventDefault();\n      if(e.key === 'ArrowRight')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = j + i;\n            if(nextIndex > tabs.length - 1)\n              nextIndex = nextIndex - tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n\n      if(e.key === 'ArrowLeft')\n      {\n        tabs.forEach((x, i) => {\n          if(x.to != currentTab)\n            return;\n\n          for(let j = 1; j < tabs.length - 1; j++)\n          {\n            let nextIndex = i - j;\n            if(nextIndex < 0)\n              nextIndex = nextIndex + tabs.length;\n            if(tabs[nextIndex].disabled)\n              continue;\n            changeTabInternal(tabs[nextIndex]);\n              break;\n          }\n        });\n      }\n    }\n  };\n\n  return (\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown} role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\n      <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`} />\n      {tabs.map((tab: HorizontalTab, index: number) => {\n        const { value, selected, to, disabled, className, ...rest } = tab;\n        return (\n          <TabButton\n            role=\"tab\"\n            data-testid={`tab_${value}`}\n            key={`${tab}_${index}`}\n            aria-selected={selected}\n            aria-expanded={selected}\n            tabIndex={-1}\n            onMouseDown={defaultOnMouseDownHandler}\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\n            className={`${className || ''} size-${size}`}\n            onClick={() => !disabled && changeTabInternal(tab)}\n            {...rest}>\n            <div\n              className={`size-${size} ${tab.selected ? 'selected' : ''} ${tab.disabled ? 'disabled' : ''}`}>{tab.value}</div>\n          </TabButton>\n        );\n      })}\n    </HorizontalTabContainer>\n  );\n};\n\nexport default HorizontalTabs;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;;AAEnE;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAClH,SAASC,SAAS,QAAQ,qBAAqB;AAC/C,SAASC,yBAAyB,QAAQ,WAAW;;AAErD;AAAA;AAAA;AACA,IAAMC,sBAAsB,GAAGP,MAAM,CAACQ,GAAG,2LAOnCT,WAAW,CAGhB;AAED,IAAMU,WAAW,GAAGT,MAAM,CAACQ,GAAG,2MAEDX,MAAM,CAACa,WAAW,EAK7Bb,MAAM,CAACc,KAAK,CAE7B;AAED,IAAMC,SAAS,GAAGZ,MAAM,CAACa,MAAM,q/DACpBhB,MAAM,CAACiB,WAAW,EAOdT,SAAS,CAACU,KAAK,EAEVlB,MAAM,CAACmB,UAAU,EACtBnB,MAAM,CAACoB,WAAW,EAGDpB,MAAM,CAACoB,WAAW,EAEjBpB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAKrCL,SAAS,CAACa,MAAM,EASXrB,MAAM,CAACmB,UAAU,EACtBnB,MAAM,CAACoB,WAAW,EAGDpB,MAAM,CAACoB,WAAW,EAEjBpB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAK1Bb,MAAM,CAACc,KAAK,EACRd,MAAM,CAACsB,WAAW,EAEjBtB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAI9Bb,MAAM,CAACuB,WAAW,EACvBvB,MAAM,CAACwB,WAAW,EACAxB,MAAM,CAACyB,QAAQ,EAAiBzB,MAAM,CAAC0B,KAAK,EAI7C1B,MAAM,CAACwB,WAAW,EAEjBxB,MAAM,CAACa,WAAW,EACjBb,MAAM,CAACa,WAAW,EAKrCb,MAAM,CAAC2B,WAAW,EAMhB3B,MAAM,CAAC2B,WAAW,EAItB5B,IAAI,CAAC6B,MAAM,EAChBrB,kBAAkB,CAACN,kBAAkB,CAAC4B,OAAO,EAAE,IAAI,CAAC,EAM/C9B,IAAI,CAAC+B,KAAK,EACfxB,iBAAiB,CAACL,kBAAkB,CAAC4B,OAAO,EAAE,IAAI,CAAC,EAM9C9B,IAAI,CAACgC,MAAM,EAChB1B,iBAAiB,CAACJ,kBAAkB,CAAC4B,OAAO,EAAE,IAAI,CAAC,EAM9C9B,IAAI,CAACiC,KAAK,EACf5B,iBAAiB,CAACH,kBAAkB,CAAC4B,OAAO,EAAE,IAAI,CAAC,CAM1D;;AAED;;AAeA,IAAMI,cAAc,GAAG,SAAjBA,cAAc,OAAsF;EAAA,IAAhFC,IAAI,QAAJA,IAAI;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,SAAS,QAATA,SAAS;IAAEC,WAAW,QAAXA,WAAW;IAAKC,IAAI;EAC7E;AACF;AACA;AACA;EACE,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,EAAU,EAAW;IACxC;IACAH,WAAW,CAACG,EAAE,CAAC;;IAEf;IACA,IAAIC,QAAQ,CAACC,aAAa,YAAYC,WAAW,EAAE;MACjDF,QAAQ,CAACC,aAAa,CAAEE,IAAI,EAAE;IAChC;EACF,CAAC;EAED,sBAA+B/C,KAAK,CAACgD,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAtDC,OAAO;IAAEC,UAAU;EAC1B,uBAAoClD,KAAK,CAACgD,QAAQ,EAAU;IAAA;IAArDG,UAAU;IAAEC,aAAa;EAEhCpD,KAAK,CAACqD,SAAS,CAAC,YAAM;IACpB,IAAMC,WAAW,GAAGjB,IAAI,CAACkB,IAAI,CAAC,UAAAC,CAAC;MAAA,OAAIA,CAAC,CAACC,QAAQ,IAAI,CAACD,CAAC,CAACE,QAAQ;IAAA,EAAC;IAC7D,IAAGJ,WAAW,EACZF,aAAa,CAACE,WAAW,CAACX,EAAE,CAAC;EACjC,CAAC,EAAE,CAACN,IAAI,CAAC,CAAC;EAEV,IAAMsB,WAAW,GAAG,SAAdA,WAAW;IAAA,OAAST,UAAU,CAAC,KAAK,CAAC;EAAA;EAE3C,IAAMU,YAAY,GAAG,SAAfA,YAAY,CAAIC,CAA4C;IAAA,OAAKX,UAAU,CAAC,IAAI,CAAC;EAAA;EAEvF,IAAMY,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,GAAkB,EAAK;IAChDA,GAAG,CAACN,QAAQ,GAAG,IAAI;IACnBpB,IAAI,CAAC2B,OAAO,CAAC,UAAAR,CAAC,EAAI;MAChB,IAAGA,CAAC,CAACb,EAAE,IAAIoB,GAAG,CAACpB,EAAE,EACfa,CAAC,CAACC,QAAQ,GAAG,KAAK;IACtB,CAAC,CAAC;IACFL,aAAa,CAACW,GAAG,CAACpB,EAAE,CAAC;IACrBH,WAAW,CAACuB,GAAG,CAACpB,EAAE,CAAC;EACrB,CAAC;EAED,IAAMsB,cAAc,GAAG,SAAjBA,cAAc,CAAIJ,CAAqB,EAAK;IAChD,IAAIZ,OAAO,KAAKY,CAAC,CAACK,GAAG,KAAK,WAAW,IAAIL,CAAC,CAACK,GAAG,KAAK,YAAY,CAAC,EAAE;MAChEL,CAAC,CAACM,cAAc,EAAE;MAClB,IAAGN,CAAC,CAACK,GAAG,KAAK,YAAY,EACzB;QACE7B,IAAI,CAAC2B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAGZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACnB;UAEF,KAAI,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhC,IAAI,CAACiC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EACvC;YACE,IAAIE,SAAS,GAAGF,CAAC,GAAGD,CAAC;YACrB,IAAGG,SAAS,GAAGlC,IAAI,CAACiC,MAAM,GAAG,CAAC,EAC5BC,SAAS,GAAGA,SAAS,GAAGlC,IAAI,CAACiC,MAAM;YACrC,IAAGjC,IAAI,CAACkC,SAAS,CAAC,CAACb,QAAQ,EACzB;YACFI,iBAAiB,CAACzB,IAAI,CAACkC,SAAS,CAAC,CAAC;YAChC;UACJ;QACF,CAAC,CAAC;MACJ;MAEA,IAAGV,CAAC,CAACK,GAAG,KAAK,WAAW,EACxB;QACE7B,IAAI,CAAC2B,OAAO,CAAC,UAACR,CAAC,EAAEY,CAAC,EAAK;UACrB,IAAGZ,CAAC,CAACb,EAAE,IAAIQ,UAAU,EACnB;UAEF,KAAI,IAAIkB,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGhC,IAAI,CAACiC,MAAM,GAAG,CAAC,EAAED,CAAC,EAAE,EACvC;YACE,IAAIE,SAAS,GAAGH,CAAC,GAAGC,CAAC;YACrB,IAAGE,SAAS,GAAG,CAAC,EACdA,SAAS,GAAGA,SAAS,GAAGlC,IAAI,CAACiC,MAAM;YACrC,IAAGjC,IAAI,CAACkC,SAAS,CAAC,CAACb,QAAQ,EACzB;YACFI,iBAAiB,CAACzB,IAAI,CAACkC,SAAS,CAAC,CAAC;YAChC;UACJ;QACF,CAAC,CAAC;MACJ;IACF;EACF,CAAC;EAED,oBACE,MAAC,sBAAsB;IAAC,QAAQ,EAAE,CAAE;IAAC,MAAM,EAAEZ,WAAY;IAAC,OAAO,EAAEC,YAAa;IAAC,SAAS,EAAEK,cAAe;IAAC,IAAI,EAAC,SAAS;IAAC,eAAa;EAA4B,GAAKxB,IAAI;IAAA,wBAC3K,KAAC,WAAW;MAAC,QAAQ,EAAE,CAAC,CAAE;MAAC,SAAS,YAAKH,QAAQ,GAAG,MAAM,GAAG,EAAE;IAAG,EAAG,EACpED,IAAI,CAACmC,GAAG,CAAC,UAACT,GAAkB,EAAEU,KAAa,EAAK;MAC/C,IAAQC,KAAK,GAAiDX,GAAG,CAAzDW,KAAK;QAAEjB,QAAQ,GAAuCM,GAAG,CAAlDN,QAAQ;QAAEd,EAAE,GAAmCoB,GAAG,CAAxCpB,EAAE;QAAEe,QAAQ,GAAyBK,GAAG,CAApCL,QAAQ;QAAEiB,SAAS,GAAcZ,GAAG,CAA1BY,SAAS;QAAKlC,IAAI,4BAAKsB,GAAG;MACjE,oBACE,KAAC,SAAS;QACR,IAAI,EAAC,KAAK;QACV,6BAAoBW,KAAK,CAAG;QAE5B,iBAAejB,QAAS;QACxB,iBAAeA,QAAS;QACxB,QAAQ,EAAE,CAAC,CAAE;QACb,WAAW,EAAE9C,yBAA0B;QACvC,KAAK,EAAE4B,SAAS,GAAG;UAACqC,KAAK,YAAK,GAAG,GAAGvC,IAAI,CAACiC,MAAM;QAAG,CAAC,GAAG,CAAC,CAAE;QACzD,SAAS,YAAKK,SAAS,IAAI,EAAE,mBAASvC,IAAI,CAAG;QAC7C,OAAO,EAAE;UAAA,OAAM,CAACsB,QAAQ,IAAII,iBAAiB,CAACC,GAAG,CAAC;QAAA;MAAC,GAC/CtB,IAAI;QAAA,uBACR;UACE,SAAS,iBAAUL,IAAI,cAAI2B,GAAG,CAACN,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIM,GAAG,CAACL,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAG;UAAA,UAAEK,GAAG,CAACW;QAAK;MAAO,cAV1GX,GAAG,cAAIU,KAAK,EAWV;IAEhB,CAAC,CAAC;EAAA,GACqB;AAE7B,CAAC;AAAC;EAtHApC,IAAI;IAOJqC,KAAK;IACLjB,QAAQ;IACRd,EAAE;EAAA;EARFL,QAAQ;EACRC,SAAS;EACTC,WAAW;AAAA;AAqHb,eAAeL,cAAc"}