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

package/dist/Tabs/TabLink.js

@@ -1,76 +1,117 @@
-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;
+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

package/dist/Tabs/Tabs.d.ts

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

package/dist/Tabs/Tabs.js

@@ -1,62 +1,80 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { Size } from '../types';
-var getHeight = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '48px';
-        case Size.Medium:
-            return '56px';
-        case Size.Large:
-            return '64px';
-        default:
-            return '48px';
-    }
-};
-var getFontSize = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '16px';
-        case Size.Medium:
-            return '18px';
-        case Size.Large:
-            return '20px';
-        default:
-            return '20px';
-    }
-};
-var getTopMargin = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '6px';
-        case Size.Medium:
-            return '10px';
-        case Size.Large:
-            return '12px';
-        default:
-            return '12px';
-    }
-};
-var getBottomMargin = function (size) {
-    switch (size) {
-        case Size.Small:
-            return '2px';
-        case Size.Medium:
-            return '3px';
-        case Size.Large:
-            return '4px';
-        default:
-            return '4px';
-    }
-};
-var Nav = styled.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) { return getHeight(props.size); }, function (props) { return getFontSize(props.size); }, function (props) { return getTopMargin(props.size); }, function (props) { return getBottomMargin(props.size); }, function (props) { return getFontSize(props.size); });
-var Tabs = function (_a) {
-    var children = _a.children, size = _a.size;
-    return (React.createElement(Nav, { role: "tablist", size: size }, children));
-};
-export default Tabs;
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _templateObject;
+import * as React from 'react';
+import styled from 'styled-components';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+var getHeight = function getHeight(size) {
+  switch (size) {
+    case Size.Small:
+      return '48px';
+    case Size.Medium:
+      return '56px';
+    case Size.Large:
+      return '64px';
+    default:
+      return '48px';
+  }
+};
+var getFontSize = function getFontSize(size) {
+  switch (size) {
+    case Size.Small:
+      return '16px';
+    case Size.Medium:
+      return '18px';
+    case Size.Large:
+      return '20px';
+    default:
+      return '20px';
+  }
+};
+var getTopMargin = function getTopMargin(size) {
+  switch (size) {
+    case Size.Small:
+      return '6px';
+    case Size.Medium:
+      return '10px';
+    case Size.Large:
+      return '12px';
+    default:
+      return '12px';
+  }
+};
+var getBottomMargin = function getBottomMargin(size) {
+  switch (size) {
+    case Size.Small:
+      return '2px';
+    case Size.Medium:
+      return '3px';
+    case Size.Large:
+      return '4px';
+    default:
+      return '4px';
+  }
+};
+var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
+  return getHeight(props.size);
+}, function (props) {
+  return getFontSize(props.size);
+}, function (props) {
+  return getTopMargin(props.size);
+}, function (props) {
+  return getBottomMargin(props.size);
+}, function (props) {
+  return getFontSize(props.size);
+});
+var Tabs = function Tabs(_ref) {
+  var children = _ref.children,
+    size = _ref.size;
+  return /*#__PURE__*/_jsx(Nav, {
+    role: "tablist",
+    size: size,
+    children: children
+  });
+};
+Tabs.propTypes = {
+  children: _pt.any
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/Tabs/VerticalTabs.js

@@ -1,13 +1,46 @@
-import * as React from 'react';
-import Tabs from './Tabs';
-import TabLink from './TabLink';
-import { Size } from '../types';
-var VerticalTabs = function (_a) {
-    var size = _a.size, entries = _a.entries;
-    return (React.createElement(Tabs, { size: size !== null && size !== void 0 ? size : Size.Large }, entries === null || entries === void 0 ? void 0 : entries.map(function (entry) { return (React.createElement(TabLink, { key: entry.to, to: entry.to, requiredLine: entry.requiredLine, optionalLine: entry.optionalLine, endLineIcon: entry.endLineIcon, OptionalLineIcon: entry.optionalLineIcon, disabled: entry.disabled, showNotificationDot: entry.showNotificationDot, size: size, variant: entry.variant, onLinkClick: function (e) {
-            if (entry.onClick) {
-                entry.onClick(e);
-            }
-        } })); })));
-};
-export default VerticalTabs;
+import _pt from "prop-types";
+import * as React from 'react';
+import Tabs from './Tabs';
+import TabLink from './TabLink';
+import { Size } from '../types';
+import { jsx as _jsx } from "react/jsx-runtime";
+var VerticalTabs = function VerticalTabs(_ref) {
+  var size = _ref.size,
+    entries = _ref.entries;
+  return /*#__PURE__*/_jsx(Tabs, {
+    size: size !== null && size !== void 0 ? size : Size.Large,
+    children: entries === null || entries === void 0 ? void 0 : entries.map(function (entry) {
+      return /*#__PURE__*/_jsx(TabLink, {
+        to: entry.to,
+        requiredLine: entry.requiredLine,
+        optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
+        OptionalLineIcon: entry.optionalLineIcon,
+        disabled: entry.disabled,
+        showNotificationDot: entry.showNotificationDot,
+        size: size,
+        variant: entry.variant,
+        onLinkClick: function onLinkClick(e) {
+          if (entry.onClick) {
+            entry.onClick(e);
+          }
+        }
+      }, entry.to);
+    })
+  });
+};
+VerticalTabs.propTypes = {
+  entries: _pt.arrayOf(_pt.shape({
+    requiredLine: _pt.string.isRequired,
+    optionalLine: _pt.string,
+    optionalLineIcon: _pt.node,
+    endLineIcon: _pt.node,
+    to: _pt.string.isRequired,
+    disabled: _pt.bool,
+    onClick: _pt.func,
+    showNotificationDot: _pt.bool,
+    variant: _pt.oneOf(['critical', 'positive'])
+  })).isRequired
+};
+export default VerticalTabs;
+//# sourceMappingURL=VerticalTabs.js.map

package/dist/Tabs/index.js

@@ -1,3 +1,4 @@
-import VerticalTabs from './VerticalTabs';
-import HorizontalTabs from './HorizontalTabs';
-export { VerticalTabs, HorizontalTabs };
+import VerticalTabs from './VerticalTabs';
+import HorizontalTabs from './HorizontalTabs';
+export { VerticalTabs, HorizontalTabs };
+//# sourceMappingURL=index.js.map

package/dist/Tag/Tag.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export declare type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
-export declare type TagProps = React.HTMLAttributes<HTMLDivElement> & {
+export type TagVariants = 'neutral' | 'positive' | 'warning' | 'critical' | 'accent1' | 'accent2';
+export type TagProps = React.HTMLAttributes<HTMLDivElement> & {
     /** Optional. Label to be shown in the Tag. */
     label?: string;
     /** Optional. Icon to be shown in the tag. */

package/dist/Tag/Tag.js

@@ -1,41 +1,49 @@
-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 styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"], ["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) { return props.isLabelPresent ? '64px' : ''; }, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
-var IconContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"], ["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
-var TextContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"], ["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-var Tag = function (_a) {
-    var label = _a.label, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'neutral' : _b, className = _a.className, rest = __rest(_a, ["label", "icon", "variant", "className"]);
-    var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
-    return (React.createElement(Container, __assign({ variant: variant, isLabelPresent: !!label, className: cls }, rest),
-        icon && React.createElement(IconContainer, { variant: variant, "data-testid": 'iconContainer' }, icon),
-        label && React.createElement(TextContainer, { variant: variant, icon: icon }, label)));
-};
-export default Tag;
-var templateObject_1, templateObject_2, templateObject_3;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["label", "icon", "variant", "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; }
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentTextStyle, ComponentXSStyling } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 4px;\n  height: 24px;\n  width: calc(100%);\n  max-width: fit-content;\n  align-items: center;\n  justify-content: center;\n  min-width: ", ";\n  border-radius: 2px;\n  box-sizing: border-box;\n\n  &.neutral {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.positive {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.warning {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.critical {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent1 {\n    background-color: ", ";\n    color: ", ";\n  }\n  &.accent2 {\n    background-color: ", ";\n    color: ", ";\n  }\n\n"])), function (props) {
+  return props.isLabelPresent ? '64px' : '';
+}, COLORS.neutral_100, COLORS.neutral_600, COLORS.correct_100, COLORS.correct_600, COLORS.warning_100, COLORS.warning_600, COLORS.critical_100, COLORS.critical_600, COLORS.accent1_100, COLORS.accent1_600, COLORS.accent2_100, COLORS.accent2_600);
+var IconContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n"])));
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: 16px;\n  padding: 0 4px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;  \n  ", "\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
+var Tag = function Tag(_ref) {
+  var label = _ref.label,
+    icon = _ref.icon,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'neutral' : _ref$variant,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var cls = "".concat(className !== null && className !== void 0 ? className : '', " ").concat(variant);
+  return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
+    variant: variant,
+    isLabelPresent: !!label,
+    className: cls
+  }, rest), {}, {
+    children: [icon && /*#__PURE__*/_jsx(IconContainer, {
+      variant: variant,
+      "data-testid": 'iconContainer',
+      children: icon
+    }), label && /*#__PURE__*/_jsx(TextContainer, {
+      variant: variant,
+      icon: icon,
+      children: label
+    })]
+  }));
+};
+Tag.propTypes = {
+  label: _pt.string,
+  icon: _pt.node,
+  variant: _pt.oneOf(['neutral', 'positive', 'warning', 'critical', 'accent1', 'accent2'])
+};
+export default Tag;
+//# sourceMappingURL=Tag.js.map

package/dist/Tag/index.js

@@ -1 +1,2 @@
-export { default as Tag } from './Tag';
+export { default as Tag } from './Tag';
+//# sourceMappingURL=index.js.map