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

package/dist/Banners/styles.js

@@ -1,55 +1,53 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { css } from 'styled-components';
-import { IconButtonStyledSecondary } from '../Button/Iconbutton';
-import { COLORS } from '../styles';
-export var getButtonStyle = function (type) {
-    var style = {
-        svgFill: COLORS.primary_500,
-        hoverBgColor: COLORS.primary_200,
-        hoverSvgFill: COLORS.primary_700,
-        activeBgColor: COLORS.primary_300,
-        activeSvgFill: COLORS.primary_800,
-        focusBgColor: COLORS.primary_200,
-        focusSvgFill: COLORS.primary_700
-    };
-    switch (type) {
-        case 'warning':
-            style = {
-                svgFill: COLORS.warning_500,
-                hoverBgColor: COLORS.warning_200,
-                hoverSvgFill: COLORS.warning_700,
-                activeBgColor: COLORS.warning_300,
-                activeSvgFill: COLORS.warning_800,
-                focusBgColor: COLORS.warning_200,
-                focusSvgFill: COLORS.warning_700
-            };
-            break;
-        case 'critical':
-            style = {
-                svgFill: COLORS.critical_600,
-                hoverBgColor: COLORS.critical_200,
-                hoverSvgFill: COLORS.critical_700,
-                activeBgColor: COLORS.critical_300,
-                activeSvgFill: COLORS.critical_800,
-                focusBgColor: COLORS.critical_200,
-                focusSvgFill: COLORS.critical_700
-            };
-            break;
-        case 'positive':
-            style = {
-                svgFill: COLORS.correct_500,
-                hoverBgColor: COLORS.correct_200,
-                hoverSvgFill: COLORS.correct_700,
-                activeBgColor: COLORS.correct_300,
-                activeSvgFill: COLORS.correct_800,
-                focusBgColor: COLORS.correct_200,
-                focusSvgFill: COLORS.correct_700
-            };
-            break;
-    }
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"], ["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"])), IconButtonStyledSecondary, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
-};
-var templateObject_1;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { css } from 'styled-components';
+import { IconButtonStyledSecondary } from '../Button/Iconbutton';
+import { COLORS } from '../styles';
+export var getButtonStyle = function getButtonStyle(type) {
+  var style = {
+    svgFill: COLORS.primary_500,
+    hoverBgColor: COLORS.primary_200,
+    hoverSvgFill: COLORS.primary_700,
+    activeBgColor: COLORS.primary_300,
+    activeSvgFill: COLORS.primary_800,
+    focusBgColor: COLORS.primary_200,
+    focusSvgFill: COLORS.primary_700
+  };
+  switch (type) {
+    case 'warning':
+      style = {
+        svgFill: COLORS.warning_500,
+        hoverBgColor: COLORS.warning_200,
+        hoverSvgFill: COLORS.warning_700,
+        activeBgColor: COLORS.warning_300,
+        activeSvgFill: COLORS.warning_800,
+        focusBgColor: COLORS.warning_200,
+        focusSvgFill: COLORS.warning_700
+      };
+      break;
+    case 'critical':
+      style = {
+        svgFill: COLORS.critical_600,
+        hoverBgColor: COLORS.critical_200,
+        hoverSvgFill: COLORS.critical_700,
+        activeBgColor: COLORS.critical_300,
+        activeSvgFill: COLORS.critical_800,
+        focusBgColor: COLORS.critical_200,
+        focusSvgFill: COLORS.critical_700
+      };
+      break;
+    case 'positive':
+      style = {
+        svgFill: COLORS.correct_500,
+        hoverBgColor: COLORS.correct_200,
+        hoverSvgFill: COLORS.correct_700,
+        activeBgColor: COLORS.correct_300,
+        activeSvgFill: COLORS.correct_800,
+        focusBgColor: COLORS.correct_200,
+        focusSvgFill: COLORS.correct_700
+      };
+      break;
+  }
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " {\n    div {\n      background-color: transparent;\n    }\n    div svg path,\n    div svg {\n      fill: ", ";\n    }\n    &:hover:not(:disabled) {\n      div {\n        background-color: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n    &:active:not(:disabled) {\n      div {\n        background: ", ";\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }"])), IconButtonStyledSecondary, style.svgFill, style.hoverBgColor, style.hoverSvgFill, style.activeBgColor, style.activeSvgFill);
+};
+//# sourceMappingURL=styles.js.map

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from './BreadcrumbItem';
-export declare type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+export type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
     /** If set to false, then instead of 'Home' icon, link will be shown. Defaults to 'true' */
     homeIcon?: boolean;
     /** Label of the home link. Will be shown only if homeIcon is set to false. Defaults to 'Home' */

package/dist/Breadcrumb/Breadcrumb.js

@@ -1,67 +1,126 @@
-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 { COLORS } from '../styles';
-import { Size, SystemIcons } from '..';
-import { useNavigate } from 'react-router';
-import { HyperLink, IconButton } from '..';
-import DropdownButton from '../Dropdown/DropdownButton';
-import { BreadcrumbContainerStyles, BreadcrumbItemLastStyles } from './styles';
-/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
-var Breadcrumb = function (_a) {
-    var items = _a.items, _b = _a.size, size = _b === void 0 ? Size.Small : _b, _c = _a.homeIcon, homeIcon = _c === void 0 ? true : _c, _d = _a.homeLabel, homeLabel = _d === void 0 ? 'Home' : _d, _e = _a.lastItemAsLabel, lastItemAsLabel = _e === void 0 ? false : _e, _f = _a.homeUrl, homeUrl = _f === void 0 ? '/' : _f, rest = __rest(_a, ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"]);
-    var navigateHook = useNavigate();
-    var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) { return ({ value: x.url, displayLabel: x.label }); }) : [];
-    var navigate = function (links) {
-        navigateHook(links[0]);
-    };
-    var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
-    var renderChevron = function () { return (React.createElement("div", { "aria-hidden": "true" },
-        React.createElement(SystemIcons.ForwardSlash, { className: "chevronicon", color: COLORS.neutral_500, size: chevronSize }))); };
-    var renderBreadcrumbLinkItem = function (index, item) {
-        return (React.createElement(React.Fragment, null,
-            renderChevron(),
-            React.createElement(HyperLink, { id: 'link-item-' + index, onClick: function (e) {
-                    e.preventDefault();
-                    navigateHook(item.url);
-                }, target: "_self", variant: "default", href: item.url }, item.label)));
-    };
-    return (React.createElement(BreadcrumbContainerStyles, __assign({ size: size, "data-testid": 'breacrumbContainer' }, rest),
-        homeIcon ? (React.createElement(IconButton, { id: "homeIcon", variant: "secondary", shape: "circular", action: function () { return navigateHook(homeUrl); } },
-            React.createElement(SystemIcons.Home, { size: chevronSize }))) : (React.createElement(HyperLink, { id: 'homelink', variant: "default", href: homeUrl, onClick: function (e) {
-                e.preventDefault();
-                navigateHook(homeUrl);
-            } }, homeLabel)),
-        !!items &&
-            items.length > 2 &&
-            (items.length > 3 ? (React.createElement(React.Fragment, null,
-                renderChevron(),
-                React.createElement(DropdownButton, { type: 'icon', alignLeft: true, items: dropdownItems, size: size == Size.XSmall ? Size.Small : size, icon: React.createElement(SystemIcons.MoreHorizontal, { color: COLORS.neutral_600, size: "20px" }), onClick: navigate }))) : (React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])))),
-        !!items && items.length > 1 && React.createElement(React.Fragment, null, renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])),
-        !!items && items.length > 0 && (React.createElement(React.Fragment, null, lastItemAsLabel ? (React.createElement(React.Fragment, null,
-            renderChevron(),
-            React.createElement(BreadcrumbItemLastStyles, { size: size }, items[items.length - 1].label))) : (React.createElement(React.Fragment, null,
-            renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]),
-            renderChevron()))))));
-};
-export default Breadcrumb;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+var _excluded = ["items", "size", "homeIcon", "homeLabel", "lastItemAsLabel", "homeUrl"];
+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 { COLORS } from '../styles';
+import { Size, SystemIcons } from '..';
+import { useNavigate } from 'react-router';
+import { HyperLink, IconButton } from '..';
+import DropdownButton from '../Dropdown/DropdownButton';
+import { BreadcrumbContainerStyles, BreadcrumbItemLastStyles } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** Breadcrumbs is a list of links that help visualize a page's location within a site's hierarchical structure, it allows navigation up to any of the ancestors. */
+var Breadcrumb = function Breadcrumb(_ref) {
+  var items = _ref.items,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Small : _ref$size,
+    _ref$homeIcon = _ref.homeIcon,
+    homeIcon = _ref$homeIcon === void 0 ? true : _ref$homeIcon,
+    _ref$homeLabel = _ref.homeLabel,
+    homeLabel = _ref$homeLabel === void 0 ? 'Home' : _ref$homeLabel,
+    _ref$lastItemAsLabel = _ref.lastItemAsLabel,
+    lastItemAsLabel = _ref$lastItemAsLabel === void 0 ? false : _ref$lastItemAsLabel,
+    _ref$homeUrl = _ref.homeUrl,
+    homeUrl = _ref$homeUrl === void 0 ? '/' : _ref$homeUrl,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var navigateHook = useNavigate();
+  var dropdownItems = items ? items.slice(0, items.length - 2).map(function (x) {
+    return {
+      value: x.url,
+      displayLabel: x.label
+    };
+  }) : [];
+  var navigate = function navigate(links) {
+    navigateHook(links[0]);
+  };
+  var chevronSize = size == Size.Medium ? '24px' : size == Size.Small ? '20px' : '16px';
+  var renderChevron = function renderChevron() {
+    return /*#__PURE__*/_jsx("div", {
+      "aria-hidden": "true",
+      children: /*#__PURE__*/_jsx(SystemIcons.ForwardSlash, {
+        className: "chevronicon",
+        color: COLORS.neutral_500,
+        size: chevronSize
+      })
+    });
+  };
+  var renderBreadcrumbLinkItem = function renderBreadcrumbLinkItem(index, item) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(HyperLink, {
+        id: 'link-item-' + index,
+        onClick: function onClick(e) {
+          e.preventDefault();
+          navigateHook(item.url);
+        },
+        target: "_self",
+        variant: "default",
+        href: item.url,
+        children: item.label
+      })]
+    });
+  };
+  return /*#__PURE__*/_jsxs(BreadcrumbContainerStyles, _objectSpread(_objectSpread({
+    size: size,
+    "data-testid": 'breacrumbContainer'
+  }, rest), {}, {
+    children: [homeIcon ? /*#__PURE__*/_jsx(IconButton, {
+      id: "homeIcon",
+      variant: "secondary",
+      shape: "circular",
+      action: function action() {
+        return navigateHook(homeUrl);
+      },
+      children: /*#__PURE__*/_jsx(SystemIcons.Home, {
+        size: chevronSize
+      })
+    }) : /*#__PURE__*/_jsx(HyperLink, {
+      id: 'homelink',
+      variant: "default",
+      href: homeUrl,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        navigateHook(homeUrl);
+      },
+      children: homeLabel
+    }), !!items && items.length > 2 && (items.length > 3 ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [renderChevron(), /*#__PURE__*/_jsx(DropdownButton, {
+        type: 'icon',
+        alignLeft: true,
+        items: dropdownItems,
+        size: size == Size.XSmall ? Size.Small : size,
+        icon: /*#__PURE__*/_jsx(SystemIcons.MoreHorizontal, {
+          color: COLORS.neutral_600,
+          size: "20px"
+        }),
+        onClick: navigate
+      })]
+    }) : /*#__PURE__*/_jsx(_Fragment, {
+      children: renderBreadcrumbLinkItem(items.length - 3, items[items.length - 3])
+    })), !!items && items.length > 1 && /*#__PURE__*/_jsx(_Fragment, {
+      children: renderBreadcrumbLinkItem(items.length - 2, items[items.length - 2])
+    }), !!items && items.length > 0 && /*#__PURE__*/_jsx(_Fragment, {
+      children: lastItemAsLabel ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderChevron(), /*#__PURE__*/_jsx(BreadcrumbItemLastStyles, {
+          size: size,
+          children: items[items.length - 1].label
+        })]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [renderBreadcrumbLinkItem(items.length - 1, items[items.length - 1]), renderChevron()]
+      })
+    })]
+  }));
+};
+Breadcrumb.propTypes = {
+  homeIcon: _pt.bool,
+  homeLabel: _pt.string,
+  homeUrl: _pt.string,
+  items: _pt.array,
+  lastItemAsLabel: _pt.bool
+};
+export default Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/Breadcrumb/BreadcrumbItem.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=BreadcrumbItem.js.map

package/dist/Breadcrumb/index.js

@@ -1,4 +1,5 @@
-export { default as Breadcrumb } from './Breadcrumb';
-export * from './Breadcrumb';
-export * from './BreadcrumbItem';
-export * from './styles';
+export { default as Breadcrumb } from './Breadcrumb';
+export * from './Breadcrumb';
+export * from './BreadcrumbItem';
+export * from './styles';
+//# sourceMappingURL=index.js.map

package/dist/Breadcrumb/styles.js

@@ -1,24 +1,32 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from 'styled-components';
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';
-import { Size } from '../types';
-var marginRight = function (size) {
-    return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
-};
-var FontStyles = function (size, textStyle, color) {
-    switch (size) {
-        case Size.XSmall:
-            return ComponentXXSStyling(textStyle, color);
-        case Size.Medium:
-            return ComponentMStyling(textStyle, color);
-        case Size.Small:
-        default:
-            return ComponentSStyling(textStyle, color);
-    }
-};
-export var BreadcrumbItemLastStyles = styled.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800); }, function (props) { return marginRight(props.size); });
-export var BreadcrumbContainerStyles = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) { return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600); }, function (props) { return marginRight(props.size); }, function (props) { return marginRight(props.size); }, COLORS.primary_700, COLORS.primary_800);
-var templateObject_1, templateObject_2;
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import styled from 'styled-components';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';
+import { Size } from '../types';
+var marginRight = function marginRight(size) {
+  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';
+};
+var FontStyles = function FontStyles(size, textStyle, color) {
+  switch (size) {
+    case Size.XSmall:
+      return ComponentXXSStyling(textStyle, color);
+    case Size.Medium:
+      return ComponentMStyling(textStyle, color);
+    case Size.Small:
+    default:
+      return ComponentSStyling(textStyle, color);
+  }
+};
+export var BreadcrumbItemLastStyles = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), function (props) {
+  return FontStyles(props.size, ComponentTextStyle.Bold, COLORS.neutral_800);
+}, function (props) {
+  return marginRight(props.size);
+});
+export var BreadcrumbContainerStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n\n  a {\n    text-decoration: none;\n    ", "\n    ", "\n  }\n\n  .chevronicon {\n    ", "\n  }\n\n  a:hover {\n    color: ", ";\n  }\n  a:active {\n    color: ", ";\n  }\n"])), function (props) {
+  return FontStyles(props.size, ComponentTextStyle.Regular, COLORS.neutral_600);
+}, function (props) {
+  return marginRight(props.size);
+}, function (props) {
+  return marginRight(props.size);
+}, COLORS.primary_700, COLORS.primary_800);
+//# sourceMappingURL=styles.js.map

package/dist/Button/BackButton.js

@@ -1,45 +1,48 @@
-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, focusStyles } from '../styles';
-import { Size } from '../types';
-import { SystemIcons } from '../icons';
-import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-export var BackButtonContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var BackButtonContainerStyles = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"], ["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) { return (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)); }, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_20, COLORS.primary_700, BackButtonContentContainer, BackButtonContentContainer, focusStyles, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_100, COLORS.primary_800, BackButtonContentContainer, COLORS.neutral_300);
-var BackButton = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? Size.Small : _b, dataTestId = _a.dataTestId, props = __rest(_a, ["children", "size", "dataTestId"]);
-    return (React.createElement(BackButtonContainerStyles, __assign({}, props, { size: size, onMouseDown: defaultOnMouseDownHandler, dataTestId: dataTestId }),
-        React.createElement(BackButtonContentContainer, null,
-            React.createElement("span", { "aria-hidden": "true" },
-                React.createElement(SystemIcons.ArrowLineLeft, { size: size === Size.XSmall ? '20' : '24' })),
-            React.createElement("label", null, children))));
-};
-export default BackButton;
-var templateObject_1, templateObject_2;
+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 = ["children", "size", "dataTestId"];
+var _templateObject, _templateObject2;
+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, focusStyles } from '../styles';
+import { Size } from '../types';
+import { SystemIcons } from '../icons';
+import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';
+import { defaultOnMouseDownHandler } from '../common';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var BackButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
+var BackButtonContainerStyles = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), function (props) {
+  return props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600);
+}, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_20, COLORS.primary_700, BackButtonContentContainer, BackButtonContentContainer, focusStyles, BackButtonContentContainer, BackButtonContentContainer, COLORS.primary_100, COLORS.primary_800, BackButtonContentContainer, COLORS.neutral_300);
+var BackButton = function BackButton(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Small : _ref$size,
+    dataTestId = _ref.dataTestId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(BackButtonContainerStyles, _objectSpread(_objectSpread({}, props), {}, {
+    size: size,
+    onMouseDown: defaultOnMouseDownHandler,
+    dataTestId: dataTestId,
+    children: /*#__PURE__*/_jsxs(BackButtonContentContainer, {
+      children: [/*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx(SystemIcons.ArrowLineLeft, {
+          size: size === Size.XSmall ? '20' : '24'
+        })
+      }), /*#__PURE__*/_jsx("label", {
+        children: children
+      })]
+    })
+  }));
+};
+BackButton.propTypes = {
+  disabled: _pt.bool
+};
+export default BackButton;
+//# sourceMappingURL=BackButton.js.map