@laerdal/life-react-components 5.0.8-dev.2.full → 5.0.9

package/dist/Tabs/HorizontalTabs.cjs

@@ -1,11 +1,13 @@
 "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;
+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"));
@@ -15,7 +17,7 @@ var _styles = require("../styles");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
+var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
 /**
@@ -27,32 +29,64 @@ var _templateObject, _templateObject2, _templateObject3;
 /**
  * Import third-party libraries.
  */
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // Add custom styles
-const 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);
-const 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"])), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('white', props.theme));
-const TabButton = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), props => _styles.COLORS.getColor('neutral_600', props.theme), _styles.Z_INDEXES.active, props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_800', props.theme), props => _styles.COLORS.getColor('neutral_20', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('primary_500', props.theme), props => _styles.COLORS.getColor('primary_20', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_700', props.theme), props => _styles.COLORS.getColor('primary_100', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('primary_800', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
+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"])), function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+});
+var TabButton = _styledComponents["default"].button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), function (props) {
+  return _styles.COLORS.getColor('neutral_600', props.theme);
+}, _styles.Z_INDEXES.active, function (props) {
+  return _styles.COLORS.getColor('white', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return _styles.COLORS.getColor('neutral_300', props.theme);
+}, _types.Size.XSmall, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Small, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Medium, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _types.Size.Large, (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null));
 
 // Add component-specific types
 
-const HorizontalTabs = _ref => {
-  let {
-      size,
-      tabs,
-      sideFill,
-      fullWidth,
-      onTabChange,
-      variant
-    } = _ref,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+var HorizontalTabs = function HorizontalTabs(_ref) {
+  var size = _ref.size,
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    variant = _ref.variant,
+    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.
    */
-  const doTabChange = to => {
+  var doTabChange = function doTabChange(to) {
     // Let's inform parent component
     onTabChange(to);
 
@@ -61,30 +95,42 @@ const HorizontalTabs = _ref => {
       document.activeElement.blur();
     }
   };
-  const [focused, setFocused] = React.useState(false);
-  const [currentTab, setCurrentTab] = React.useState();
-  React.useEffect(() => {
-    const selectedTab = tabs.find(x => x.selected && !x.disabled);
+  var _React$useState = React.useState(false),
+    _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.useEffect(function () {
+    var selectedTab = tabs.find(function (x) {
+      return x.selected && !x.disabled;
+    });
     if (selectedTab) setCurrentTab(selectedTab.to);
   }, [tabs]);
-  const tabListBlur = () => setFocused(false);
-  const tabListFocus = e => setFocused(true);
-  const changeTabInternal = tab => {
+  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(x => {
+    tabs.forEach(function (x) {
       if (x.to != tab.to) x.selected = false;
     });
     setCurrentTab(tab.to);
     onTabChange(tab.to);
   };
-  const tabListKeyDown = e => {
+  var tabListKeyDown = function tabListKeyDown(e) {
     if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
       e.preventDefault();
       if (e.key === 'ArrowRight') {
-        tabs.forEach((x, i) => {
+        tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-          for (let j = 1; j < tabs.length - 1; j++) {
-            let nextIndex = j + i;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = j + i;
             if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
             if (tabs[nextIndex].disabled) continue;
             changeTabInternal(tabs[nextIndex]);
@@ -93,10 +139,10 @@ const HorizontalTabs = _ref => {
         });
       }
       if (e.key === 'ArrowLeft') {
-        tabs.forEach((x, i) => {
+        tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-          for (let j = 1; j < tabs.length - 1; j++) {
-            let nextIndex = i - j;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = i - j;
             if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
             if (tabs[nextIndex].disabled) continue;
             changeTabInternal(tabs[nextIndex]);
@@ -117,15 +163,13 @@ const HorizontalTabs = _ref => {
     children: [variant !== 'floating' && /*#__PURE__*/(0, _jsxRuntime.jsx)(TabSideFill, {
       tabIndex: -1,
       className: "".concat(sideFill ? 'fill' : '')
-    }), tabs.map((tab, index) => {
-      const {
-          value,
-          selected,
-          to,
-          disabled,
-          className
-        } = tab,
-        rest = (0, _objectWithoutProperties2.default)(tab, _excluded2);
+    }), 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);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(TabButton, _objectSpread(_objectSpread({
         role: "tab",
         "data-testid": "tab_".concat(value),
@@ -138,7 +182,9 @@ const HorizontalTabs = _ref => {
         } : {},
         disabled: disabled,
         className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
-        onClick: () => !disabled && changeTabInternal(tab)
+        onClick: function onClick() {
+          return !disabled && changeTabInternal(tab);
+        }
       }, rest), {}, {
         children: tab.value
       }), "".concat(tab, "_").concat(index));
@@ -146,15 +192,16 @@ const HorizontalTabs = _ref => {
   }));
 };
 HorizontalTabs.propTypes = {
-  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
-    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
-    selected: _propTypes.default.bool.isRequired,
-    to: _propTypes.default.string.isRequired
+  tabs: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+    selected: _propTypes["default"].bool.isRequired,
+    to: _propTypes["default"].string.isRequired
   })).isRequired,
-  sideFill: _propTypes.default.bool,
-  fullWidth: _propTypes.default.bool,
-  onTabChange: _propTypes.default.func.isRequired,
-  variant: _propTypes.default.oneOf(['default', 'floating'])
+  sideFill: _propTypes["default"].bool,
+  fullWidth: _propTypes["default"].bool,
+  onTabChange: _propTypes["default"].func.isRequired,
+  variant: _propTypes["default"].oneOf(['default', 'floating'])
 };
-var _default = exports.default = HorizontalTabs;
+var _default = HorizontalTabs;
+exports["default"] = _default;
 //# sourceMappingURL=HorizontalTabs.cjs.map

package/dist/Tabs/HorizontalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalTabs.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_styledComponents","_interopRequireDefault","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","HorizontalTabContainer","styled","div","_taggedTemplateLiteral2","focusStyles","TabSideFill","props","COLORS","getColor","theme","TabButton","button","Z_INDEXES","active","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","_ref","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","_objectWithoutProperties2","doTabChange","to","document","activeElement","HTMLElement","blur","focused","setFocused","useState","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","changeTabInternal","tab","tabListKeyDown","key","preventDefault","j","nextIndex","jsxs","tabIndex","onBlur","onFocus","onKeyDown","role","children","jsx","className","concat","map","index","value","onMouseDown","defaultOnMouseDownHandler","style","width","onClick","propTypes","_propTypes","arrayOf","shape","oneOfType","string","node","isRequired","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\nexport interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Required. Size of the Tabs */\r\n  size: Size.XSmall | Size.Small | Size.Medium | Size.Large;\r\n  /** Required: Array of Tabs to show */\r\n  tabs: HorizontalTab[];\r\n  /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */\r\n  sideFill?: boolean;\r\n  /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width \r\n   * required for its content.\r\n   */\r\n  fullWidth?: boolean;\r\n  /** Required. Handler to be called when user tries to change the tab */\r\n  onTabChange: (to: string) => void;\r\n  /** Optional. Display variant of the tabs. If not set, then 'default' is used */\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  /** Required. Value of the tab */\r\n  value: string | React.ReactNode;\r\n  /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */\r\n  selected: boolean;\r\n  /** Required. URL related with the Tab */\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalTabs.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_styledComponents","_interopRequireDefault","_common","_jsxRuntime","_excluded","_excluded2","_templateObject","_templateObject2","_templateObject3","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","HorizontalTabContainer","styled","div","_taggedTemplateLiteral2","focusStyles","TabSideFill","props","COLORS","getColor","theme","TabButton","button","Z_INDEXES","active","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Regular","Small","ComponentSStyling","Medium","ComponentMStyling","Large","ComponentLStyling","HorizontalTabs","_ref","size","tabs","sideFill","fullWidth","onTabChange","variant","rest","_objectWithoutProperties2","doTabChange","to","document","activeElement","HTMLElement","blur","_React$useState","useState","_React$useState2","_slicedToArray2","focused","setFocused","_React$useState3","_React$useState4","currentTab","setCurrentTab","useEffect","selectedTab","find","x","selected","disabled","tabListBlur","tabListFocus","changeTabInternal","tab","tabListKeyDown","key","preventDefault","j","nextIndex","jsxs","tabIndex","onBlur","onFocus","onKeyDown","role","children","jsx","className","concat","map","index","value","onMouseDown","defaultOnMouseDownHandler","style","width","onClick","propTypes","_propTypes","arrayOf","shape","oneOfType","string","node","isRequired","bool","func","oneOf","_default","exports"],"sources":["../../src/Tabs/HorizontalTabs.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport {Size} from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport Colors from \"../styles/colors\";\r\n\r\n// Add custom styles\r\nconst HorizontalTabContainer = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  position: relative;\r\n  flex-direction: row;\r\n\r\n  &:focus {\r\n    ${focusStyles};\r\n  }\r\n\r\n`;\r\n\r\nconst TabSideFill = styled.div`\r\n  position: absolute;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  bottom: 0;\r\n  width: 100%;\r\n\r\n  &.fill {\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n`;\r\n\r\nconst TabButton = styled.button`\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  border: none;\r\n  background-color: transparent;\r\n  position: relative;\r\n  cursor: pointer;\r\n  display: flex;\r\n  box-sizing: border-box;\r\n  justify-content: center;\r\n  align-items: center;\r\n  padding: 0;\r\n\r\n  &[aria-selected=\"true\"] {\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.floating {\r\n    border-radius: 2px;\r\n  }\r\n  \r\n  &.selected {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &.selected.floating {\r\n    background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  }\r\n\r\n  &.default {\r\n    border-left: 1px solid transparent;\r\n    border-right: 1px solid transparent;\r\n  }\r\n  \r\n  &.default.selected {\r\n    border-left: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    border-right: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &.selected:after {\r\n    content: \"\";\r\n    position: absolute;\r\n    top: 0;\r\n    left: -1px;\r\n    right: -1px;\r\n    height: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n  &.selected.floating:after {\r\n    top: unset;\r\n    bottom: 1px;\r\n    left: 1px;\r\n    right: 1px;\r\n    height: 2px;\r\n    border-radius: 2px;\r\n    background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n  }\r\n\r\n\r\n  &:hover, &:hover.selected {\r\n    background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:hover:after {\r\n    background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active, &:active.selected {\r\n    background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    outline: none;\r\n  }\r\n\r\n  &:active:after {\r\n    background-color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background: transparent;\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  // Sizes\r\n  &.${Size.XSmall} {\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 32px;\r\n    margin-top: 16px;\r\n  }\r\n\r\n  &.${Size.Small} {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    padding: 0px 16px;\r\n    height: 40px;\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.${Size.Medium} {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    height: 48px;\r\n    min-width: 96px;\r\n    padding: 0 16px;\r\n  }\r\n\r\n  &.${Size.Large} {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    height: 56px;\r\n    min-width: 144px;\r\n    padding: 0 16px;\r\n  }\r\n`;\r\n\r\n// Add component-specific types\r\nexport interface HorizontalTabProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  /** Required. Size of the Tabs */\r\n  size: Size.XSmall | Size.Small | Size.Medium | Size.Large;\r\n  /** Required: Array of Tabs to show */\r\n  tabs: HorizontalTab[];\r\n  /** Optional. For 'default' variant of tabs if this flag is set, then white background will be added to the tabs  */\r\n  sideFill?: boolean;\r\n  /** Optional. If set, then whole width of the parent container will be equally split between Tabs, otherwise each tab will take width \r\n   * required for its content.\r\n   */\r\n  fullWidth?: boolean;\r\n  /** Required. Handler to be called when user tries to change the tab */\r\n  onTabChange: (to: string) => void;\r\n  /** Optional. Display variant of the tabs. If not set, then 'default' is used */\r\n  variant?: 'default' | 'floating';\r\n}\r\n\r\nexport interface HorizontalTab extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'style'> {\r\n  /** Required. Value of the tab */\r\n  value: string | React.ReactNode;\r\n  /** Required. State of the tab, selected or not. Use it to set initial state of the tabs. */\r\n  selected: boolean;\r\n  /** Required. URL related with the Tab */\r\n  to: string;\r\n}\r\n\r\nconst HorizontalTabs = ({size, tabs, sideFill, fullWidth, onTabChange, variant, ...rest}: HorizontalTabProps) => {\r\n  /**\r\n   * Informs parent component of tab change and clears focus.\r\n   * @param to - A link to which user should be navigated.\r\n   */\r\n  const doTabChange = (to: string): void => {\r\n    // Let's inform parent component\r\n    onTabChange(to);\r\n\r\n    // Let's clear focus\r\n    if (document.activeElement instanceof HTMLElement) {\r\n      document.activeElement!.blur();\r\n    }\r\n  };\r\n\r\n  const [focused, setFocused] = React.useState<boolean>(false);\r\n  const [currentTab, setCurrentTab] = React.useState<string>();\r\n\r\n  React.useEffect(() => {\r\n    const selectedTab = tabs.find(x => x.selected && !x.disabled);\r\n    if (selectedTab)\r\n      setCurrentTab(selectedTab.to);\r\n  }, [tabs]);\r\n\r\n  const tabListBlur = () => setFocused(false);\r\n\r\n  const tabListFocus = (e: React.FocusEvent<HTMLDivElement, Element>) => setFocused(true);\r\n\r\n  const changeTabInternal = (tab: HorizontalTab) => {\r\n    tab.selected = true;\r\n    tabs.forEach(x => {\r\n      if (x.to != tab.to)\r\n        x.selected = false;\r\n    });\r\n    setCurrentTab(tab.to);\r\n    onTabChange(tab.to);\r\n  }\r\n\r\n  const tabListKeyDown = (e: React.KeyboardEvent) => {\r\n    if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {\r\n      e.preventDefault();\r\n      if (e.key === 'ArrowRight') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = j + i;\r\n            if (nextIndex > tabs.length - 1)\r\n              nextIndex = nextIndex - tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n\r\n      if (e.key === 'ArrowLeft') {\r\n        tabs.forEach((x, i) => {\r\n          if (x.to != currentTab)\r\n            return;\r\n\r\n          for (let j = 1; j < tabs.length - 1; j++) {\r\n            let nextIndex = i - j;\r\n            if (nextIndex < 0)\r\n              nextIndex = nextIndex + tabs.length;\r\n            if (tabs[nextIndex].disabled)\r\n              continue;\r\n            changeTabInternal(tabs[nextIndex]);\r\n            break;\r\n          }\r\n        });\r\n      }\r\n    }\r\n  };\r\n\r\n  return (\r\n    <HorizontalTabContainer tabIndex={0} onBlur={tabListBlur} onFocus={tabListFocus} onKeyDown={tabListKeyDown}\r\n                            role=\"tablist\" data-testid={'horizontal-tabs-container'} {...rest}>\r\n      {\r\n        variant !== 'floating' && <TabSideFill tabIndex={-1} className={`${sideFill ? 'fill' : ''}`}/>\r\n      }\r\n      {tabs.map((tab: HorizontalTab, index: number) => {\r\n        const {value, selected, to, disabled, className, ...rest} = tab;\r\n        return (\r\n          <TabButton\r\n            role=\"tab\"\r\n            data-testid={`tab_${value}`}\r\n            key={`${tab}_${index}`}\r\n            aria-selected={selected}\r\n            aria-expanded={selected}\r\n            tabIndex={-1}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            style={fullWidth ? {width: `${100 / tabs.length}%`} : {}}\r\n            disabled={disabled}\r\n            className={`${className || ''} ${size} ${variant || 'default'} ${tab.selected ? 'selected' : ''}`}\r\n            onClick={() => !disabled && changeTabInternal(tab)}\r\n            {...rest}>\r\n            {tab.value}\r\n          </TabButton>\r\n        );\r\n      })}\r\n    </HorizontalTabContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalTabs;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/HorizontalTabs.js

@@ -1,8 +1,9 @@
 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";
 import _pt from "prop-types";
-const _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
+var _excluded = ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"],
   _excluded2 = ["value", "selected", "to", "disabled", "className"];
 var _templateObject, _templateObject2, _templateObject3;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -25,29 +26,62 @@ import styled from 'styled-components';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
 import { Z_INDEXES } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 // Add custom styles
-const 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);
-const 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"])), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('white', props.theme));
-const TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), props => COLORS.getColor('neutral_600', props.theme), Z_INDEXES.active, props => COLORS.getColor('white', props.theme), props => COLORS.getColor('neutral_800', props.theme), props => COLORS.getColor('neutral_20', props.theme), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('primary_500', props.theme), props => COLORS.getColor('primary_500', props.theme), props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('neutral_300', props.theme), Size.XSmall, ComponentXSStyling(ComponentTextStyle.Regular, null), Size.Small, ComponentSStyling(ComponentTextStyle.Regular, null), Size.Medium, ComponentMStyling(ComponentTextStyle.Regular, null), Size.Large, ComponentLStyling(ComponentTextStyle.Regular, null));
+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"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('white', props.theme);
+});
+var TabButton = styled.button(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  border: none;\n  background-color: transparent;\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  box-sizing: border-box;\n  justify-content: center;\n  align-items: center;\n  padding: 0;\n\n  &[aria-selected=\"true\"] {\n    z-index: ", ";\n  }\n\n  &.floating {\n    border-radius: 2px;\n  }\n  \n  &.selected {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &.selected.floating {\n    background-color: ", ";\n  }\n\n  &.default {\n    border-left: 1px solid transparent;\n    border-right: 1px solid transparent;\n  }\n  \n  &.default.selected {\n    border-left: 1px solid ", ";\n    border-right: 1px solid ", ";\n  }\n\n  &.selected:after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: -1px;\n    right: -1px;\n    height: 2px;\n    background-color: ", ";\n  }\n\n  &.selected.floating:after {\n    top: unset;\n    bottom: 1px;\n    left: 1px;\n    right: 1px;\n    height: 2px;\n    border-radius: 2px;\n    background-color: ", ";\n  }\n\n\n  &:hover, &:hover.selected {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover:after {\n    background-color: ", ";\n  }\n\n  &:active, &:active.selected {\n    background: ", ";\n    color: ", ";\n    outline: none;\n  }\n\n  &:active:after {\n    background-color: ", ";\n  }\n\n  &:disabled {\n    color: ", ";\n    background: transparent;\n    cursor: not-allowed;\n  }\n\n  // Sizes\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 32px;\n    margin-top: 16px;\n  }\n\n  &.", " {\n    ", "\n    padding: 0px 16px;\n    height: 40px;\n    margin-top: 8px;\n  }\n\n  &.", " {\n    ", "\n    height: 48px;\n    min-width: 96px;\n    padding: 0 16px;\n  }\n\n  &.", " {\n    ", "\n    height: 56px;\n    min-width: 144px;\n    padding: 0 16px;\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+}, Z_INDEXES.active, function (props) {
+  return COLORS.getColor('white', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_500', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_700', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_800', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_300', props.theme);
+}, 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
 
-const HorizontalTabs = _ref => {
-  let {
-      size,
-      tabs,
-      sideFill,
-      fullWidth,
-      onTabChange,
-      variant
-    } = _ref,
+var HorizontalTabs = function HorizontalTabs(_ref) {
+  var size = _ref.size,
+    tabs = _ref.tabs,
+    sideFill = _ref.sideFill,
+    fullWidth = _ref.fullWidth,
+    onTabChange = _ref.onTabChange,
+    variant = _ref.variant,
     rest = _objectWithoutProperties(_ref, _excluded);
   /**
    * Informs parent component of tab change and clears focus.
    * @param to - A link to which user should be navigated.
    */
-  const doTabChange = to => {
+  var doTabChange = function doTabChange(to) {
     // Let's inform parent component
     onTabChange(to);
 
@@ -56,30 +90,42 @@ const HorizontalTabs = _ref => {
       document.activeElement.blur();
     }
   };
-  const [focused, setFocused] = React.useState(false);
-  const [currentTab, setCurrentTab] = React.useState();
-  React.useEffect(() => {
-    const selectedTab = tabs.find(x => x.selected && !x.disabled);
+  var _React$useState = React.useState(false),
+    _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.useEffect(function () {
+    var selectedTab = tabs.find(function (x) {
+      return x.selected && !x.disabled;
+    });
     if (selectedTab) setCurrentTab(selectedTab.to);
   }, [tabs]);
-  const tabListBlur = () => setFocused(false);
-  const tabListFocus = e => setFocused(true);
-  const changeTabInternal = tab => {
+  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(x => {
+    tabs.forEach(function (x) {
       if (x.to != tab.to) x.selected = false;
     });
     setCurrentTab(tab.to);
     onTabChange(tab.to);
   };
-  const tabListKeyDown = e => {
+  var tabListKeyDown = function tabListKeyDown(e) {
     if (focused && (e.key === 'ArrowLeft' || e.key === 'ArrowRight')) {
       e.preventDefault();
       if (e.key === 'ArrowRight') {
-        tabs.forEach((x, i) => {
+        tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-          for (let j = 1; j < tabs.length - 1; j++) {
-            let nextIndex = j + i;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = j + i;
             if (nextIndex > tabs.length - 1) nextIndex = nextIndex - tabs.length;
             if (tabs[nextIndex].disabled) continue;
             changeTabInternal(tabs[nextIndex]);
@@ -88,10 +134,10 @@ const HorizontalTabs = _ref => {
         });
       }
       if (e.key === 'ArrowLeft') {
-        tabs.forEach((x, i) => {
+        tabs.forEach(function (x, i) {
           if (x.to != currentTab) return;
-          for (let j = 1; j < tabs.length - 1; j++) {
-            let nextIndex = i - j;
+          for (var j = 1; j < tabs.length - 1; j++) {
+            var nextIndex = i - j;
             if (nextIndex < 0) nextIndex = nextIndex + tabs.length;
             if (tabs[nextIndex].disabled) continue;
             changeTabInternal(tabs[nextIndex]);
@@ -112,14 +158,12 @@ const HorizontalTabs = _ref => {
     children: [variant !== 'floating' && /*#__PURE__*/_jsx(TabSideFill, {
       tabIndex: -1,
       className: "".concat(sideFill ? 'fill' : '')
-    }), tabs.map((tab, index) => {
-      const {
-          value,
-          selected,
-          to,
-          disabled,
-          className
-        } = tab,
+    }), 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);
       return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
         role: "tab",
@@ -133,7 +177,9 @@ const HorizontalTabs = _ref => {
         } : {},
         disabled: disabled,
         className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
-        onClick: () => !disabled && changeTabInternal(tab)
+        onClick: function onClick() {
+          return !disabled && changeTabInternal(tab);
+        }
       }, rest), {}, {
         children: tab.value
       }), "".concat(tab, "_").concat(index));