@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/Tabs/HorizontalTabs.js

@@ -1,167 +1,122 @@
-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";
-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; }
-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) { _defineProperty(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; }
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /**
  * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-
+ */
+import * as React from 'react';
+import { Size } from '../types';
 /**
  * Import custom styles.
- */
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-
+ */
+import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
 /**
  * Import third-party libraries.
- */
-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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-// Add custom styles
-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  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"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, 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,
-    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.
-   */
-  var doTabChange = function doTabChange(to) {
-    // Let's inform parent component
-    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];
-  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]);
-  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) {
-      if (x.to != tab.to) x.selected = false;
-    });
-    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;
-            if (tabs[nextIndex].disabled) continue;
-            changeTabInternal(tabs[nextIndex]);
-            break;
-          }
-        });
-      }
-      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;
-            if (tabs[nextIndex].disabled) continue;
-            changeTabInternal(tabs[nextIndex]);
-            break;
-          }
-        });
-      }
-    }
-  };
-  return /*#__PURE__*/_jsxs(HorizontalTabContainer, _objectSpread(_objectSpread({
-    tabIndex: 0,
-    onBlur: tabListBlur,
-    onFocus: tabListFocus,
-    onKeyDown: tabListKeyDown,
-    role: "tablist",
-    "data-testid": 'horizontal-tabs-container'
-  }, rest), {}, {
-    children: [variant !== 'floating' && /*#__PURE__*/_jsx(TabSideFill, {
-      tabIndex: -1,
-      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);
-      return /*#__PURE__*/_jsx(TabButton, _objectSpread(_objectSpread({
-        role: "tab",
-        "data-testid": "tab_".concat(value),
-        "aria-selected": selected,
-        "aria-expanded": selected,
-        tabIndex: -1,
-        onMouseDown: defaultOnMouseDownHandler,
-        style: fullWidth ? {
-          width: "".concat(100 / tabs.length, "%")
-        } : {},
-        disabled: disabled,
-        className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''),
-        onClick: function onClick() {
-          return !disabled && changeTabInternal(tab);
-        }
-      }, rest), {}, {
-        children: tab.value
-      }), "".concat(tab, "_").concat(index));
-    })]
-  }));
-};
-HorizontalTabs.propTypes = {
-  tabs: _pt.arrayOf(_pt.shape({
-    value: _pt.string.isRequired,
-    selected: _pt.bool.isRequired,
-    to: _pt.string.isRequired
-  })).isRequired,
-  sideFill: _pt.bool,
-  fullWidth: _pt.bool,
-  onTabChange: _pt.func.isRequired,
-  variant: _pt.oneOf(['default', 'floating'])
-};
-export default HorizontalTabs;
-//# sourceMappingURL=HorizontalTabs.js.map
+ */
+import styled from 'styled-components';
+import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXSStyling } from '../styles';
+import { Z_INDEXES } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+// Add custom styles
+var HorizontalTabContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  position: relative;\n  flex-direction: row;\n\n  &:focus {\n    ", ";\n  }\n\n"], ["\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(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  border-bottom: 1px solid ", ";\n  bottom: 0;\n  width: 100%;\n\n  &.fill {\n    background: ", ";\n  }\n"], ["\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(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\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"], ["\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"])), COLORS.neutral_600, Z_INDEXES.active, COLORS.white, COLORS.neutral_800, COLORS.neutral_20, COLORS.neutral_100, COLORS.neutral_100, COLORS.primary_500, COLORS.primary_500, COLORS.primary_20, COLORS.primary_700, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, 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));
+var HorizontalTabs = function (_a) {
+    var size = _a.size, tabs = _a.tabs, sideFill = _a.sideFill, fullWidth = _a.fullWidth, onTabChange = _a.onTabChange, variant = _a.variant, rest = __rest(_a, ["size", "tabs", "sideFill", "fullWidth", "onTabChange", "variant"]);
+    /**
+     * Informs parent component of tab change and clears focus.
+     * @param to - A link to which user should be navigated.
+     */
+    var doTabChange = function (to) {
+        // Let's inform parent component
+        onTabChange(to);
+        // Let's clear focus
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    };
+    var _b = React.useState(false), focused = _b[0], setFocused = _b[1];
+    var _c = React.useState(), currentTab = _c[0], setCurrentTab = _c[1];
+    React.useEffect(function () {
+        var selectedTab = tabs.find(function (x) { return x.selected && !x.disabled; });
+        if (selectedTab)
+            setCurrentTab(selectedTab.to);
+    }, [tabs]);
+    var tabListBlur = function () { return setFocused(false); };
+    var tabListFocus = function (e) { return setFocused(true); };
+    var changeTabInternal = function (tab) {
+        tab.selected = true;
+        tabs.forEach(function (x) {
+            if (x.to != tab.to)
+                x.selected = false;
+        });
+        setCurrentTab(tab.to);
+        onTabChange(tab.to);
+    };
+    var tabListKeyDown = function (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;
+                        if (tabs[nextIndex].disabled)
+                            continue;
+                        changeTabInternal(tabs[nextIndex]);
+                        break;
+                    }
+                });
+            }
+            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;
+                        if (tabs[nextIndex].disabled)
+                            continue;
+                        changeTabInternal(tabs[nextIndex]);
+                        break;
+                    }
+                });
+            }
+        }
+    };
+    return (React.createElement(HorizontalTabContainer, __assign({ tabIndex: 0, onBlur: tabListBlur, onFocus: tabListFocus, onKeyDown: tabListKeyDown, role: "tablist", "data-testid": 'horizontal-tabs-container' }, rest),
+        variant !== 'floating' && React.createElement(TabSideFill, { tabIndex: -1, 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 = __rest(tab, ["value", "selected", "to", "disabled", "className"]);
+            return (React.createElement(TabButton, __assign({ role: "tab", "data-testid": "tab_".concat(value), key: "".concat(tab, "_").concat(index), "aria-selected": selected, "aria-expanded": selected, tabIndex: -1, onMouseDown: defaultOnMouseDownHandler, style: fullWidth ? { width: "".concat(100 / tabs.length, "%") } : {}, disabled: disabled, className: "".concat(className || '', " ").concat(size, " ").concat(variant || 'default', " ").concat(tab.selected ? 'selected' : ''), onClick: function () { return !disabled && changeTabInternal(tab); } }, rest), tab.value));
+        })));
+};
+export default HorizontalTabs;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/Tabs/TabLink.d.ts

@@ -13,7 +13,7 @@ declare const TabLink: React.ForwardRefExoticComponent<{
     onActiveStateChanged?: ((state: boolean) => void) | undefined;
     showNotificationDot?: boolean | undefined;
     size?: Size.Small | Size.Medium | Size.Large | undefined;
-    variant?: "positive" | "critical" | undefined;
+    variant?: "critical" | "positive" | undefined;
     containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
     containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
 } & NavLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/Tabs/TabLink.js

@@ -1,117 +1,76 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function ownKeys(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) { _defineProperty(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; }
-import * as React from 'react';
-import { NavLink } from 'react-router-dom';
-import styled from 'styled-components';
-import { NotificationDot } from '../NotificationDot';
-import { Size } from '../types';
-import { COLORS, focusStyles } from '../styles';
-import { Z_INDEXES } from '../styles/z-indexes';
-import { defaultOnMouseDownHandler } from '../common';
-import { useState } from 'react';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var OptionalLineWrapperWithIcon = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
-var TopWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
-var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
-var StyledNotification = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-var EndLineIcon = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 15px 0 0 !important;\n"])));
-var OptionalLineWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-size: 12px;\n"])));
-//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
-var Wrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) {
-  return props.disabled ? COLORS.neutral_100 : 'transparent';
-}, function (props) {
-  return props.disabled ? 'not-allowed' : 'pointer';
-}, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
-var TabLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var to = _ref.to,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    requiredLine = _ref.requiredLine,
-    optionalLine = _ref.optionalLine,
-    OptionalLineIcon = _ref.OptionalLineIcon,
-    onLinkClick = _ref.onLinkClick,
-    forceDeactivate = _ref.forceDeactivate,
-    testId = _ref.testId,
-    _ref$showNotification = _ref.showNotificationDot,
-    showNotificationDot = _ref$showNotification === void 0 ? false : _ref$showNotification,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Small : _ref$size,
-    endLineIcon = _ref.endLineIcon,
-    onActiveStateChanged = _ref.onActiveStateChanged,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'critical' : _ref$variant,
-    children = _ref.children,
-    containerOnMouseEnter = _ref.containerOnMouseEnter,
-    containerOnMouseLeave = _ref.containerOnMouseLeave,
-    className = _ref.className,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    activeState = _useState2[0],
-    setActiveState = _useState2[1];
-  return /*#__PURE__*/_jsx(Wrapper, {
-    disabled: disabled,
-    className: disabled ? 'disabled' : '',
-    onMouseEnter: containerOnMouseEnter,
-    onMouseLeave: containerOnMouseLeave,
-    children: /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs(NavLink, _objectSpread(_objectSpread({
-        to: forceDeactivate ? 'invalid' : to.toString()
-        //disabled={disabled}
-        ,
-        className: function className(_ref2) {
-          var isActive = _ref2.isActive;
-          onActiveStateChanged && onActiveStateChanged(activeState);
-          if (forceDeactivate) {
-            if (disabled) return 'disabled';else return '';
-          }
-          if (isActive != activeState) setActiveState(isActive);
-          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
-        },
-        onMouseDown: defaultOnMouseDownHandler,
-        tabIndex: disabled ? -1 : 0,
-        role: "tab",
-        "aria-selected": activeState,
-        onClick: function onClick(e) {
-          return !disabled && onLinkClick && onLinkClick(e);
-        },
-        ref: ref,
-        "data-testid": testId
-      }, rest), {}, {
-        children: [/*#__PURE__*/_jsxs(TextContainer, {
-          children: [/*#__PURE__*/_jsx(TopWrapper, {
-            children: /*#__PURE__*/_jsx("span", {
-              children: requiredLine
-            })
-          }), optionalLine && OptionalLineIcon ? /*#__PURE__*/_jsxs(OptionalLineWrapperWithIcon, {
-            children: [OptionalLineIcon, !!optionalLine && /*#__PURE__*/_jsx("span", {
-              children: optionalLine
-            })]
-          }) : optionalLine ? /*#__PURE__*/_jsx(OptionalLineWrapper, {
-            children: /*#__PURE__*/_jsx("span", {
-              children: optionalLine
-            })
-          }) : /*#__PURE__*/_jsx(_Fragment, {})]
-        }), /*#__PURE__*/_jsx(StyledNotification, {
-          children: showNotificationDot && /*#__PURE__*/_jsx(NotificationDot, {
-            testId: "NotificationDot",
-            size: size,
-            variant: variant
-          })
-        }), endLineIcon && /*#__PURE__*/_jsx(EndLineIcon, {
-          children: endLineIcon
-        })]
-      })), children]
-    })
-  });
-});
-export default TabLink;
-//# sourceMappingURL=TabLink.js.map
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+import { NotificationDot } from '../NotificationDot';
+import { Size } from '../types';
+import { COLORS, focusStyles } from '../styles';
+import { Z_INDEXES } from '../styles/z-indexes';
+import { defaultOnMouseDownHandler } from '../common';
+import { useState } from 'react';
+var OptionalLineWrapperWithIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n"])));
+var TopWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n"])));
+var TextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"], ["\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n"])));
+var StyledNotification = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 15px 0 0 !important;\n"], ["\n  margin: 0 15px 0 0 !important;\n"])));
+var EndLineIcon = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin: 0 15px 0 0 !important;\n"], ["\n  margin: 0 15px 0 0 !important;\n"])));
+var OptionalLineWrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 12px;\n"], ["\n  font-size: 12px;\n"])));
+//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed
+var Wrapper = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"], ["\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n\n    font-size: 16px;\n    line-height: 120%;\n    color: ", ";\n\n    background-color: ", ";\n    cursor: ", ";\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n\n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n\n    &:focus {\n      ", "\n    }\n\n    &.active {\n      z-index: ", ";\n      background-color: ", ";\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      background-color: ", ";\n    }\n\n    &:hover, &.dropdown-hover {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &:active {\n      z-index: ", ";\n      background-color: ", ";\n      color: ", ";\n    }\n\n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ", ";\n\n        border-radius: 4px;\n      }\n    }\n\n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.active:active {\n      background-color: ", ";\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n\n    &.disabled {\n      background-color: ", ";\n      color: ", ";\n\n      span {\n        color: ", ";\n      }\n\n      &::after {\n        background-color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_600, function (props) { return (props.disabled ? COLORS.neutral_100 : 'transparent'); }, function (props) { return (props.disabled ? 'not-allowed' : 'pointer'); }, focusStyles, Z_INDEXES.active, COLORS.neutral_20, COLORS.primary_20, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_600, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800, COLORS.primary_500, COLORS.primary_600, COLORS.primary_100, COLORS.primary_800, COLORS.white, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_300);
+var TabLink = React.forwardRef(function (_a, ref) {
+    var to = _a.to, _b = _a.disabled, disabled = _b === void 0 ? false : _b, requiredLine = _a.requiredLine, optionalLine = _a.optionalLine, OptionalLineIcon = _a.OptionalLineIcon, onLinkClick = _a.onLinkClick, forceDeactivate = _a.forceDeactivate, testId = _a.testId, _c = _a.showNotificationDot, showNotificationDot = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? Size.Small : _d, endLineIcon = _a.endLineIcon, onActiveStateChanged = _a.onActiveStateChanged, _e = _a.variant, variant = _e === void 0 ? 'critical' : _e, children = _a.children, containerOnMouseEnter = _a.containerOnMouseEnter, containerOnMouseLeave = _a.containerOnMouseLeave, className = _a.className, rest = __rest(_a, ["to", "disabled", "requiredLine", "optionalLine", "OptionalLineIcon", "onLinkClick", "forceDeactivate", "testId", "showNotificationDot", "size", "endLineIcon", "onActiveStateChanged", "variant", "children", "containerOnMouseEnter", "containerOnMouseLeave", "className"]);
+    var _f = useState(false), activeState = _f[0], setActiveState = _f[1];
+    return (React.createElement(Wrapper, { disabled: disabled, className: disabled ? 'disabled' : '', onMouseEnter: containerOnMouseEnter, onMouseLeave: containerOnMouseLeave },
+        React.createElement(React.Fragment, null,
+            React.createElement(NavLink, __assign({ to: forceDeactivate ? 'invalid' : to.toString(), 
+                //disabled={disabled}
+                className: function (_a) {
+                    var isActive = _a.isActive;
+                    onActiveStateChanged && onActiveStateChanged(activeState);
+                    if (forceDeactivate) {
+                        if (disabled)
+                            return 'disabled';
+                        else
+                            return '';
+                    }
+                    if (isActive != activeState)
+                        setActiveState(isActive);
+                    return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');
+                }, onMouseDown: defaultOnMouseDownHandler, tabIndex: disabled ? -1 : 0, role: "tab", "aria-selected": activeState, onClick: function (e) { return !disabled && onLinkClick && onLinkClick(e); }, ref: ref, "data-testid": testId }, rest),
+                React.createElement(TextContainer, null,
+                    React.createElement(TopWrapper, null,
+                        React.createElement("span", null, requiredLine)),
+                    optionalLine && OptionalLineIcon ? (React.createElement(OptionalLineWrapperWithIcon, null,
+                        OptionalLineIcon,
+                        !!optionalLine && React.createElement("span", null, optionalLine))) : optionalLine ? (React.createElement(OptionalLineWrapper, null,
+                        React.createElement("span", null, optionalLine))) : (React.createElement(React.Fragment, null))),
+                React.createElement(StyledNotification, null, showNotificationDot && React.createElement(NotificationDot, { testId: "NotificationDot", size: size, variant: variant })),
+                endLineIcon && React.createElement(EndLineIcon, null, endLineIcon)),
+            children)));
+});
+export default TabLink;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/Tabs/Tabs.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-type TabsProps = {
+declare type TabsProps = {
     children?: any;
     size: Size;
 };