@laerdal/life-react-components 5.0.8 → 5.1.0

package/dist/Button/Button.js

@@ -2,7 +2,7 @@ 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", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon"],
+const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon"],
   _excluded2 = ["loading"];
 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; }
@@ -14,10 +14,8 @@ import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextS
 import { COLORS, focusStyles, invertedFocusStyles } from '../styles';
 import { Size } from '../types';
 import { defaultOnMouseDownHandler } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-var getBorderRadius = function getBorderRadius(flatEdge, radius) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const getBorderRadius = (flatEdge, radius) => {
   switch (flatEdge) {
     case 'left':
       return "0px ".concat(radius, "px ").concat(radius, "px 0px");
@@ -28,157 +26,46 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
       return "".concat(radius, "px");
   }
 };
-export var ButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 64px;\n"])));
-var ButtonBaseStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
-export var ButtonPrimaryStyled = styled(ButtonBaseStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
-  return props.$size === Size.Large ? '56px' : '48px';
-}, ButtonContentContainer, function (props) {
-  return props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme));
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme);
-}, function (props) {
-  return getBorderRadius(props.$flatEdge, 8);
-}, function (props) {
-  return props.$width;
-}, function (props) {
-  return props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px';
-}, function (props) {
-  return props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px';
-}, function (props) {
-  return props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme);
-}, function (props) {
-  return props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? invertedFocusStyles : focusStyles;
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme);
-});
-export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme);
-}, function (props) {
-  return props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px';
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme);
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme);
-});
-export var ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme);
-}, function (props) {
-  return props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px';
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, function (props) {
-  return props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('primary_700', props.theme);
-});
-export var ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, function (props) {
-  return COLORS.getColor('correct_500', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('correct_700', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('correct_800', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-export var ButtonCriticalStyled = styled(ButtonPrimaryStyled)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, function (props) {
-  return COLORS.getColor('critical_500', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('critical_700', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('critical_800', props.theme);
-}, ButtonContentContainer, ButtonContentContainer, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-});
-/**
- * Button component
+export const ButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 64px;\n"])));
+const ButtonBaseStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+export const ButtonPrimaryStyled = styled(ButtonBaseStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), props => props.$size === Size.Large ? '56px' : '48px', ButtonContentContainer, props => props.$size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme)), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => getBorderRadius(props.$flatEdge, 8), props => props.$width, props => props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px', props => props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px', props => props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px', props => props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme), props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? invertedFocusStyles : focusStyles, ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme), props => props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme));
+export const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme), props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme));
+export const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme), props => props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('primary_700', props.theme));
+export const ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, props => COLORS.getColor('correct_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('correct_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('correct_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+export const ButtonCriticalStyled = styled(ButtonPrimaryStyled)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, props => COLORS.getColor('critical_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('critical_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('critical_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+/**
+ * Button component
  */
-var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$children = _ref.children,
-    children = _ref$children === void 0 ? '' : _ref$children,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'button' : _ref$type,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? Size.Medium : _ref$size,
-    colorTheme = _ref.colorTheme,
-    invertFocus = _ref.invertFocus,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? 'auto' : _ref$width,
-    testId = _ref.testId,
-    disabled = _ref.disabled,
-    flatEdge = _ref.flatEdge,
-    icon = _ref.icon,
+const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      children = '',
+      variant = 'primary',
+      type = 'button',
+      size = Size.Medium,
+      colorTheme,
+      invertFocus,
+      width = 'auto',
+      testId,
+      disabled,
+      flatEdge,
+      icon
+    } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   // Let's filter out properties that we don't need to render.
-  var loading = props.loading,
+  const {
+      loading
+    } = props,
     renderProps = _objectWithoutProperties(props, _excluded2);
-  var renderContent = function renderContent() {
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [icon && /*#__PURE__*/_jsx("span", {
-        className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
-        children: icon
-      }), children && /*#__PURE__*/_jsx("span", {
-        className: loading ? 'label loading' : 'label',
-        children: children
-      }), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
-    });
-  };
-  var ButtonStyled = ButtonPrimaryStyled;
+  const renderContent = () => /*#__PURE__*/_jsxs(_Fragment, {
+    children: [icon && /*#__PURE__*/_jsx("span", {
+      className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
+      children: icon
+    }), children && /*#__PURE__*/_jsx("span", {
+      className: loading ? 'label loading' : 'label',
+      children: children
+    }), loading && /*#__PURE__*/_jsx(LoadingIndicator, {})]
+  });
+  let ButtonStyled = ButtonPrimaryStyled;
   switch (variant) {
     case 'secondary':
       ButtonStyled = ButtonSecondaryStyled;

package/dist/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","concat","ButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","ButtonBaseStyled","button","_templateObject2","ButtonPrimaryStyled","_templateObject3","props","$size","Large","Bold","$colorTheme","getColor","theme","Small","$flatEdge","$width","Medium","$iconOnly","$invertFocus","undefined","ButtonSecondaryStyled","_templateObject4","ButtonTertiaryStyled","_templateObject5","ButtonPositiveStyled","_templateObject6","ButtonCriticalStyled","_templateObject7","Button","forwardRef","_ref","ref","_ref$children","children","_ref$variant","variant","_ref$type","type","_ref$size","size","colorTheme","invertFocus","_ref$width","width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { Size, Testable } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\n  switch (flatEdge) {\n    case 'left':\n      return `0px ${radius}px ${radius}px 0px`;\n\n    case 'right':\n      return `${radius}px 0px 0px ${radius}px`;\n\n    case 'none':\n    default:\n      return `${radius}px`;\n  }\n};\n\nexport const ButtonContentContainer = styled.div`\n  min-width: 64px;\n`;\n\nconst ButtonBaseStyled = styled.button<{$iconOnly: boolean; $size: Size; $colorTheme: 'teal' | 'dark' | undefined; $flatEdge: string | undefined; $width: string; $invertFocus: boolean | undefined; }>``;\n\nexport const ButtonPrimaryStyled = styled(ButtonBaseStyled)`\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ${(props) => (props.$size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  ${ButtonContentContainer} {\n    ${(props) =>\n      props.$size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\n        : props.$size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\n\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\n    border-radius: ${(props) => getBorderRadius(props.$flatEdge, 8)};\n\n    width: ${(props) => props.$width};\n    position: relative;\n\n    min-height: ${(props) => (props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px')};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${(props) => (props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px')};\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ${(props) => (props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : (props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '' ))};\n      width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme))};\n        }\n      }\n    }\n  }\n  &:hover > ${ButtonContentContainer},\n  &.hover-state > ${ButtonContentContainer} {\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme))};\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme))};\n  }\n  &:active > ${ButtonContentContainer},\n  &.active-state > ${ButtonContentContainer} {\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme))};\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${(props) => (props.$invertFocus || (props.$invertFocus === undefined && props.$colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ${ButtonContentContainer},\n  &.disabled-state > ${ButtonContentContainer} {\n    pointer-events: none;\n    background-color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\n    color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme))};\n  }\n`;\n\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`\n  ${ButtonContentContainer} {\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme))};\n    }\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\n    \n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n\n  &:hover > ${ButtonContentContainer},\n  &.hover-state > ${ButtonContentContainer} {\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme))};\n        }\n      }\n    }\n  }\n  &:active > ${ButtonContentContainer},\n  &.active-state > ${ButtonContentContainer} {\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\n        }\n      }\n    }\n  }\n\n  &:disabled > ${ButtonContentContainer},\n  &.disabled-state > ${ButtonContentContainer} {\n    background-color: transparent;\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme))};\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\n  }\n`;\n\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`\n${ButtonContentContainer} {\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\n    background-color: transparent;\n\n    div svg path {\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\n    }\n\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n\n  &:hover > ${ButtonContentContainer},\n  &.hover-state > ${ButtonContentContainer} {\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme))};\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\n\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\n        }\n      }\n    }\n  }\n  &:active > ${ButtonContentContainer},\n  &.active-state > ${ButtonContentContainer} {\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme))};\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\n\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\n        }\n      }\n    }\n  }\n\n  &:disabled > ${ButtonContentContainer},\n  &.disabled-state > ${ButtonContentContainer} {\n    background-color: transparent !important;\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\n    border-color: transparent !important;\n  }\n`;\n\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`\n  ${ButtonContentContainer} {\n    color: white;\n    background-color: ${props => COLORS.getColor('correct_500', props.theme)};\n  }\n  &:hover > ${ButtonContentContainer},\n  &.hover-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('correct_700', props.theme)};\n  }\n  &:active > ${ButtonContentContainer},\n  &.active-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('correct_800', props.theme)};\n  }\n\n  &:disabled > ${ButtonContentContainer},\n  &.disabled-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\n  }\n`;\n\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`\n  ${ButtonContentContainer} {\n    color: white;\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\n  }\n  &:hover > ${ButtonContentContainer},\n  &.hover-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('critical_700', props.theme)};\n  }\n  &:active > ${ButtonContentContainer},\n  &.active-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('critical_800', props.theme)};\n  }\n\n  &:disabled > ${ButtonContentContainer},\n  &.disabled-state > ${ButtonContentContainer} {\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};    \n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Look and feel variant of the component. Defaults to 'primary'. */\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\n  size?: Size.Small | Size.Medium | Size.Large;\n  /** Color theme altering of the component. By default there is no altering applied. */\n  colorTheme?: 'teal' | 'dark';\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\n  invertFocus?: boolean;\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\n  width?: 'auto' | string;\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\n  loading?: boolean;\n  /** TestId. Will be set to the top level button component. */\n  testId?: string;\n  /** Icon that will be shown on the left of the children. */\n  icon?: React.ReactNode;\n}\n\n/**\n * Button component\n */\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, colorTheme, invertFocus,  width: width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\n    // Let's filter out properties that we don't need to render.\n    const { loading, ...renderProps } = props;\n\n    const renderContent = () => (\n      <>\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n        {loading && <LoadingIndicator />}\n      </>\n    );\n\n    let ButtonStyled = ButtonPrimaryStyled;\n    switch (variant) {\n      case 'secondary':\n        ButtonStyled = ButtonSecondaryStyled;\n        break;\n      case 'tertiary':\n        ButtonStyled = ButtonTertiaryStyled;\n        break;\n      case 'positive':\n        ButtonStyled = ButtonPositiveStyled;\n        break;\n      case 'critical':\n        ButtonStyled = ButtonCriticalStyled;\n        break;\n    }\n\n    return (\n      <ButtonStyled\n        {...renderProps}\n        $size={size}\n        $colorTheme={colorTheme} \n        $invertFocus={invertFocus}        \n        ref={ref}\n        disabled={disabled}\n        $iconOnly={!children}\n        type={type}\n        $flatEdge={flatEdge}\n        $width={width}\n        data-testid={testId}\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n        onMouseDown={defaultOnMouseDownHandler}>\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\n      </ButtonStyled>\n    );\n  },\n);\n\nexport default Button;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","getBorderRadius","flatEdge","radius","concat","ButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","ButtonBaseStyled","button","_templateObject2","ButtonPrimaryStyled","_templateObject3","props","$size","Large","Bold","$colorTheme","getColor","theme","Small","$flatEdge","$width","Medium","$iconOnly","$invertFocus","undefined","ButtonSecondaryStyled","_templateObject4","ButtonTertiaryStyled","_templateObject5","ButtonPositiveStyled","_templateObject6","ButtonCriticalStyled","_templateObject7","Button","forwardRef","_ref","ref","children","variant","type","size","colorTheme","invertFocus","width","testId","disabled","icon","_objectWithoutProperties","_excluded","loading","renderProps","_excluded2","renderContent","className","ButtonStyled","_objectSpread","onMouseDown","propTypes","_pt","oneOf","bool","oneOfType","string","node"],"sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles';\r\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\n\r\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\r\n  switch (flatEdge) {\r\n    case 'left':\r\n      return `0px ${radius}px ${radius}px 0px`;\r\n\r\n    case 'right':\r\n      return `${radius}px 0px 0px ${radius}px`;\r\n\r\n    case 'none':\r\n    default:\r\n      return `${radius}px`;\r\n  }\r\n};\r\n\r\nexport const ButtonContentContainer = styled.div`\r\n  min-width: 64px;\r\n`;\r\n\r\nconst ButtonBaseStyled = styled.button<{$iconOnly: boolean; $size: Size; $colorTheme: 'teal' | 'dark' | undefined; $flatEdge: string | undefined; $width: string; $invertFocus: boolean | undefined; }>``;\r\n\r\nexport const ButtonPrimaryStyled = styled(ButtonBaseStyled)`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.$size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  ${ButtonContentContainer} {\r\n    ${(props) =>\r\n      props.$size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : props.$size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    border-radius: ${(props) => getBorderRadius(props.$flatEdge, 8)};\r\n\r\n    width: ${(props) => props.$width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.$size === Size.Large ? '56px' : props.$size === Size.Small ? '32px' : '40px')};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: ${(props) => (props.$size === Size.Large ? '14px 16px' : props.$size === Size.Small ? '6px 8px' : '8px 12px')};\r\n\r\n    span.icon:not(.loading) {\r\n      pointer-events: none;\r\n    }\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n\r\n    .icon {\r\n      margin: ${(props) => (props.$size === Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : (props.$size === Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '' ))};\r\n      width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .label {\r\n      margin: 0 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.$size === Size.Large ? '28px' : props.$size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary', props.theme) : COLORS.getColor('white', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_100', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('white', props.theme))};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => (props.$invertFocus || (props.$invertFocus === undefined && props.$colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'dark' ? COLORS.getColor('primary_800', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonSecondaryStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    }\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary', props.theme))};\r\n    \r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_200', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('primary_300', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n    \r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_300', props.theme))};\r\n    box-shadow: inset 0 0 0 2px ${(props) => (props?.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('neutral_100', props.theme))};\r\n  }\r\n`;\r\n\r\nexport const ButtonTertiaryStyled = styled(ButtonPrimaryStyled)`\r\n${ButtonContentContainer} {\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    background-color: transparent;\r\n\r\n    div svg path {\r\n      fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_500', props.theme))};\r\n    }\r\n\r\n    padding: ${(props) => (props.$size === Size.Large ? '12px 16px' : props.$size === Size.Small ? '4px 8px' : '6px 12px')};\r\n  }\r\n\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_700', props.theme) : COLORS.getColor('primary_20', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_700', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('primary_600', props.theme) : COLORS.getColor('primary_100', props.theme))};\r\n    color: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.$colorTheme === 'teal' ? COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? COLORS.getColor('white', props.theme) : COLORS.getColor('primary_800', props.theme))};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: transparent !important;\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    border-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport const ButtonPositiveStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('correct_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('correct_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const ButtonCriticalStyled = styled(ButtonPrimaryStyled)`\r\n  ${ButtonContentContainer} {\r\n    color: white;\r\n    background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n  }\r\n  &:hover > ${ButtonContentContainer},\r\n  &.hover-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_700', props.theme)};\r\n  }\r\n  &:active > ${ButtonContentContainer},\r\n  &.active-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('critical_800', props.theme)};\r\n  }\r\n\r\n  &:disabled > ${ButtonContentContainer},\r\n  &.disabled-state > ${ButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};    \r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  /** Look and feel variant of the component. Defaults to 'primary'. */\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\r\n  /** Can be used in order to remove rounded corners on right or left edge of the button. Used by 'DualFunctionButton'. Defaults to 'undefined' */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** Size of the component. Small, Medium or Large. Defaults to 'medium' */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Color theme altering of the component. By default there is no altering applied. */\r\n  colorTheme?: 'teal' | 'dark';\r\n  /** Allows using inverted colors for outlining focus rect. Shown when component focused by keyboard. */\r\n  invertFocus?: boolean;\r\n  /** Can be used to set custom value for width style. Value is set for 'ButtonContent' container. */\r\n  width?: 'auto' | string;\r\n  /** If set, then 'opacity' of children container will be set to 0, and loading indicator will be shown.  */\r\n  loading?: boolean;\r\n  /** TestId. Will be set to the top level button component. */\r\n  testId?: string;\r\n  /** Icon that will be shown on the left of the children. */\r\n  icon?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * Button component\r\n */\r\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, colorTheme, invertFocus,  width: width = 'auto', testId, disabled, flatEdge, icon, ...props }, ref) => {\r\n    // Let's filter out properties that we don't need to render.\r\n    const { loading, ...renderProps } = props;\r\n\r\n    const renderContent = () => (\r\n      <>\r\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n        {loading && <LoadingIndicator />}\r\n      </>\r\n    );\r\n\r\n    let ButtonStyled = ButtonPrimaryStyled;\r\n    switch (variant) {\r\n      case 'secondary':\r\n        ButtonStyled = ButtonSecondaryStyled;\r\n        break;\r\n      case 'tertiary':\r\n        ButtonStyled = ButtonTertiaryStyled;\r\n        break;\r\n      case 'positive':\r\n        ButtonStyled = ButtonPositiveStyled;\r\n        break;\r\n      case 'critical':\r\n        ButtonStyled = ButtonCriticalStyled;\r\n        break;\r\n    }\r\n\r\n    return (\r\n      <ButtonStyled\r\n        {...renderProps}\r\n        $size={size}\r\n        $colorTheme={colorTheme} \r\n        $invertFocus={invertFocus}        \r\n        ref={ref}\r\n        disabled={disabled}\r\n        $iconOnly={!children}\r\n        type={type}\r\n        $flatEdge={flatEdge}\r\n        $width={width}\r\n        data-testid={testId}\r\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n        onMouseDown={defaultOnMouseDownHandler}>\r\n        <ButtonContentContainer>{renderContent()}</ButtonContentContainer>\r\n      </ButtonStyled>\r\n    );\r\n  },\r\n);\r\n\r\nexport default Button;\r\n"],"mappings":"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","ignoreList":[]}