@laerdal/life-react-components 1.4.0 → 1.4.1-dev.11

package/dist/esm/Button/Button.js

@@ -1,379 +1,196 @@
+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";
-const _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
-      _excluded2 = ["loading"];
+var _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
+    _excluded2 = ["loading"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
 import { COLORS } 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";
 
-const getBorderRadius = (flatEdge, radius) => {
+var getBorderRadius = function getBorderRadius(flatEdge, radius) {
   switch (flatEdge) {
     case 'left':
-      return `0px ${radius}px ${radius}px 0px`;
+      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
 
     case 'right':
-      return `${radius}px 0px 0px ${radius}px`;
+      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
 
     case 'none':
     default:
-      return `${radius}px`;
+      return "".concat(radius, "px");
   }
 };
 
-const tabbedHereStyle = (variant, colorTheme) => {
-  switch (variant) {
-    case 'primary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};
-        }
-      `;
-
-    case 'secondary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};
-          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};
-        }
-      `;
-
-    case 'tertiary':
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${COLORS.white};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};
-        }
-      `;
-
-    default:
-      return css`
-        outline: none;
-        div {
-          outline: none;
-          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;
-          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};
-        }
-      `;
-  }
-};
-
-const Primary = styled.button`
-  border: none;
-  background-color: transparent;
-  cursor: pointer;
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  min-height: ${props => props.size === Size.Large ? '56px' : '48px'};
-  &.loading-state {
-    cursor: wait;
-  }
-  &:focus:not(:focus-visible),
-  &:focus:not(:focus-visible) > div.button-content {
-    outline: none !important;
-  }
-  div.button-content {
-    ${props => props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};
-
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};
-    border-width: 2px;
-    border-style: solid;
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-
-    width: ${props => props.width};
-    position: relative;
-
-    min-height: ${props => props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px'};
-    min-width: ${props => props.minWidth};
-
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 4px;
-    // paddings have -2px for border
-    padding: ${props => props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px'};
-
-    span.loading {
-      opacity: 0;
-    }
-    .icon {
-      margin: ${props => props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px'};
-      width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-      height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-      svg {
-        width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'} !important;
-        height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'} !important;
-      }
-    }
-
-    .extramargin {
-      margin-right: 4px;
-    }
-
-    div {
-      position: absolute;
-      width: 100%;
-      svg {
-        height: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-        width: ${props => props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px'};
-        path {
-          fill: ${props => props.colorTheme === 'dark' ? COLORS.primary : COLORS.white};
-        }
-      }
-    }
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800};
-    box-shadow: none !important;
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white};
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : ''}
-  &.focus-state {
-    ${props => tabbedHereStyle('primary', props?.colorTheme)};
-  }
-  &:disabled,
-  &.disabled-state {
-    cursor: not-allowed;
-  }
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    pointer-events: none;
-    background-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-    color: ${props => props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300};
-    border-color: ${props => props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-  }
-`;
-const Secondary = styled(Primary)`
-  div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary};
-    background-color: transparent;
-    div svg path {
-      fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-    }
-  }
-
-  &:focus:not(:focus-visible),
-  &:focus:not(:focus-visible) > div.button-content {
-    outline: none !important;
-  }
-
-
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700};
-    background-color: transparent;
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-        }
-      }
-    }
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800};
-    background-color: transparent;
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800};
-        }
-      }
-    }
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: transparent;
-    color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300};
-    border-color: ${props => props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100};
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
-
-  &:focus,
-  &.focus-state {
-    ${props => tabbedHereStyle('secondary', props?.colorTheme)};
-  }
-`;
-const Tertiary = styled(Primary)`
-  div.button-content {
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500};
-    border-color: transparent;
-    background-color: transparent;
-    border-width: 1px;
-    div svg path {
-      fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};
-    }
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20};
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20};
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700};
-        }
-      }
-    }
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    background-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100};
-    color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800};
-    border-color: ${props => props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100};
-    div {
-      svg {
-        path {
-          fill: ${props => props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800};
-        }
-      }
-    }
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: white !important;
-    color: ${COLORS.neutral_300};
-    border-color: transparent !important;
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
-  &.focus-state {
-    ${props => tabbedHereStyle('tertiary', props?.colorTheme)};
-  }
-`;
-const Correct = styled(Primary)`
-  div.button-content {
-    color: white;
-    border-color: ${COLORS.correct_500};
-    background-color: ${COLORS.correct_500};
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    border-color: ${COLORS.correct_700};
-    background-color: ${COLORS.correct_700};
-  }
-  &:focus > div.button-content,
-  &.focus-state > div.button-content {
-    border-color: ${COLORS.correct_700};
-    background-color: ${COLORS.correct_700};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    border-color: ${COLORS.correct_800};
-    background-color: ${COLORS.correct_800};
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-`;
-const Critical = styled(Primary)`
-  div.button-content {
-    color: white;
-    border-color: ${COLORS.critical_500};
-    background-color: ${COLORS.critical_500};
-  }
-  &:hover > div.button-content,
-  &.hover-state > div.button-content {
-    border-color: ${COLORS.critical_700};
-    background-color: ${COLORS.critical_700};
-  }
-  &:focus > div.button-content,
-  &.focus-state > div.button-content {
-    border-color: ${COLORS.critical_700};
-    background-color: ${COLORS.critical_700};
-  }
-  &:active > div.button-content,
-  &.active-state > div.button-content {
-    border-color: ${COLORS.critical_800};
-    background-color: ${COLORS.critical_800};
-  }
-
-  &:disabled > div.button-content,
-  &.disabled-state > div.button-content {
-    background-color: ${COLORS.neutral_100};
-    color: ${COLORS.neutral_300};
-    border-color: ${COLORS.neutral_100};
-  }
-`;
-
-const Button = _ref => {
-  let {
-    children = '',
-    variant = 'primary',
-    type = 'button',
-    size = Size.Medium,
-    width = 'auto',
-    minWidth = '64px',
-    testId,
-    disabled,
-    flatEdge,
-    icon
-  } = _ref,
+var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n    border-width: 2px;\n    border-style: solid;\n    border-color: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n    min-width: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n    // paddings have -2px for border\n    padding: ", ";\n\n    span.loading {\n      opacity: 0;\n    }\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .extramargin {\n      margin-right: 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 > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    border-color: ", ";\n    box-shadow: none !important;\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    outline: none;\n\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) {
+  return props.size === Size.Large ? '56px' : '48px';
+}, function (props) {
+  return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return getBorderRadius(props.flatEdge, 8);
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return props.width;
+}, function (props) {
+  return props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px';
+}, function (props) {
+  return props.minWidth;
+}, function (props) {
+  return props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px';
+}, function (props) {
+  return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
+}, 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.primary : COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_600 : COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white;
+}, COLORS.focus_25, COLORS.focus, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
+});
+var Secondary = styled(Primary)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n  }\n\n  &:focus:not(:focus-visible),\n  &:focus:not(:focus-visible) > div.button-content {\n    outline: none !important;\n  }\n\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    border-color: ", ";\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    border-color: ", ";\n  }\n  \n  &:focus,\n  &.focus-state {\n    outline: none;\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary_800;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_300;
+}, function (props) {
+  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
+}, COLORS.focus_25, COLORS.focus, function (props) {
+  return props.colorTheme === 'dark' ? 'transparent' : COLORS.white;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
+});
+var Tertiary = styled(Primary)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    border-color: transparent;\n    background-color: transparent;\n    border-width: 1px;\n    div svg path {\n      fill: ", ";\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n\n  &:focus,\n  &.focus-state {\n    outline: none;\n\n    div {\n      outline: none;\n      box-shadow: 0px 4px 12px ", ", 0px 0px 8px ", " !important;\n      background-color: ", ";\n      border-color: ", ";\n      color: ", ";\n    }\n  }\n"])), function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800;
+}, COLORS.neutral_300, COLORS.focus_25, COLORS.focus, COLORS.white, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
+}, function (props) {
+  return props.colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500;
+});
+var Correct = styled(Primary)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.correct_500, COLORS.correct_500, COLORS.correct_700, COLORS.correct_700, COLORS.correct_700, COLORS.correct_700, COLORS.correct_800, COLORS.correct_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
+var Critical = styled(Primary)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:focus > div.button-content,\n  &.focus-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    border-color: ", ";\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n  }\n"])), COLORS.critical_500, COLORS.critical_500, COLORS.critical_700, COLORS.critical_700, COLORS.critical_700, COLORS.critical_700, COLORS.critical_800, COLORS.critical_800, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100);
+
+var Button = function Button(_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,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? 'auto' : _ref$width,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? '64px' : _ref$minWidth,
+      testId = _ref.testId,
+      disabled = _ref.disabled,
+      flatEdge = _ref.flatEdge,
+      icon = _ref.icon,
       props = _objectWithoutProperties(_ref, _excluded);
 
   // Let's filter out properties that we don't need to render.
-  const {
-    loading
-  } = props,
-        renderProps = _objectWithoutProperties(props, _excluded2);
-
-  const supressFocusRef = React.useRef(null);
-  const [tabbedHere, setTabbedHere] = React.useState(false);
-
-  const renderContent = () => /*#__PURE__*/React.createElement(React.Fragment, null, icon && /*#__PURE__*/React.createElement("span", {
-    className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')
-  }, icon), children && /*#__PURE__*/React.createElement("span", {
-    className: loading ? 'label loading' : 'label'
-  }, children), loading && /*#__PURE__*/React.createElement(LoadingIndicator, null)); // Let's render button
+  var loading = props.loading,
+      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, {})]
+    });
+  }; // Let's render button
 
 
   switch (variant) {
     case 'primary':
-      return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Primary, _objectSpread(_objectSpread({}, renderProps), {}, {
         disabled: disabled,
         iconOnly: !children,
         type: type,
@@ -383,22 +200,15 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
 
     case 'secondary':
-      return /*#__PURE__*/React.createElement(Secondary, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Secondary, _objectSpread(_objectSpread({}, renderProps), {}, {
         disabled: disabled,
         type: type,
         size: size,
@@ -408,22 +218,15 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
 
     case 'tertiary':
-      return /*#__PURE__*/React.createElement(Tertiary, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Tertiary, _objectSpread(_objectSpread({}, renderProps), {}, {
         disabled: disabled,
         type: type,
         flatEdge: flatEdge,
@@ -433,22 +236,15 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
 
     case 'correct':
-      return /*#__PURE__*/React.createElement(Correct, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Correct, _objectSpread(_objectSpread({}, renderProps), {}, {
         disabled: disabled,
         type: type,
         size: size,
@@ -458,22 +254,15 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
 
     case 'critical':
-      return /*#__PURE__*/React.createElement(Critical, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Critical, _objectSpread(_objectSpread({}, renderProps), {}, {
         disabled: disabled,
         flatEdge: flatEdge,
         iconOnly: !children,
@@ -483,22 +272,15 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
 
     default:
-      return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
+      return /*#__PURE__*/_jsx(Primary, _objectSpread(_objectSpread({}, renderProps), {}, {
         flatEdge: flatEdge,
         disabled: disabled,
         iconOnly: !children,
@@ -508,19 +290,12 @@ const Button = _ref => {
         minWidth: minWidth,
         "data-testid": testId,
         className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
-        onMouseDown: e => {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: e => {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: () => setTabbedHere(false),
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
+        onMouseDown: defaultOnMouseDownHandler,
+        children: /*#__PURE__*/_jsx("div", {
+          className: "button-content",
+          children: renderContent()
+        })
+      }));
   }
 };
 
@@ -532,7 +307,6 @@ Button.propTypes = {
   width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
   loading: _pt.bool,
   testId: _pt.string,
-  tabbedHere: _pt.bool,
   icon: _pt.node,
   minWidth: _pt.string,
   iconOnly: _pt.bool