@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/umd/Button/Button.js

@@ -0,0 +1,663 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../LoadingIndicator", "../styles/typography", "../styles", "../types"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../LoadingIndicator"), require("../styles/typography"), require("../styles"), require("../types"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.LoadingIndicator, global.typography, global.styles, global.types);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _LoadingIndicator, _typography, _styles, _types) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const _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);
+  }
+
+  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 _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;
+  }
+
+  const getBorderRadius = (flatEdge, radius) => {
+    switch (flatEdge) {
+      case 'left':
+        return `0px ${radius}px ${radius}px 0px`;
+
+      case 'right':
+        return `${radius}px 0px 0px ${radius}px`;
+
+      case 'none':
+      default:
+        return `${radius}px`;
+    }
+  };
+
+  const tabbedHereStyle = (variant, colorTheme) => {
+    switch (variant) {
+      case 'primary':
+        return _styledComponents.css`
+        outline: none;
+        div {
+          outline: none;
+          box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+          background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+          border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+          color: ${colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white};
+        }
+      `;
+
+      case 'secondary':
+        return _styledComponents.css`
+        outline: none;
+        div {
+          outline: none;
+          box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+          background-color: ${colorTheme === 'dark' ? 'transparent' : _styles.COLORS.white};
+          border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1 : colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.primary};
+          color: ${colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500};
+        }
+      `;
+
+      case 'tertiary':
+        return _styledComponents.css`
+        outline: none;
+        div {
+          outline: none;
+          box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+          background-color: ${_styles.COLORS.white};
+          border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+          color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_500 : _styles.COLORS.primary_500};
+        }
+      `;
+
+      default:
+        return _styledComponents.css`
+        outline: none;
+        div {
+          outline: none;
+          box-shadow: 0px 4px 12px ${_styles.COLORS.focus_25}, 0px 0px 8px ${_styles.COLORS.focus} !important;
+          background-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+          border-color: ${colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+          color: ${colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white};
+        }
+      `;
+    }
+  };
+
+  const Primary = _styledComponents2.default.button`
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  min-height: ${props => props.size === _types.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 === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white)};
+
+    background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};
+    border-width: 2px;
+    border-style: solid;
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+
+    width: ${props => props.width};
+    position: relative;
+
+    min-height: ${props => props.size === _types.Size.Large ? '56px' : props.size === _types.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 === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px'};
+
+    span.loading {
+      opacity: 0;
+    }
+    .icon {
+      margin: ${props => props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px'};
+      width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
+      height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
+      svg {
+        width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'} !important;
+        height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'} !important;
+      }
+    }
+
+    .extramargin {
+      margin-right: 4px;
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      svg {
+        height: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
+        width: ${props => props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px'};
+        path {
+          fill: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white};
+        }
+      }
+    }
+  }
+  &:hover > div.button-content,
+  &.hover-state > div.button-content {
+    background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700};
+    color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white};
+  }
+  &:active > div.button-content,
+  &.active-state > div.button-content {
+    background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800};
+    box-shadow: none !important;
+    color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.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' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+    color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300};
+    border-color: ${props => props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  }
+`;
+  const Secondary = (0, _styledComponents2.default)(Primary)`
+  div.button-content {
+    color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.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' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700};
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+        }
+      }
+    }
+  }
+  &:active > div.button-content,
+  &.active-state > div.button-content {
+    color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800};
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props?.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800};
+        }
+      }
+    }
+  }
+
+  &:disabled > div.button-content,
+  &.disabled-state > div.button-content {
+    background-color: transparent;
+    color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_300};
+    border-color: ${props => props?.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100};
+  }
+  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : ''}
+
+  &:focus,
+  &.focus-state {
+    ${props => tabbedHereStyle('secondary', props?.colorTheme)};
+  }
+`;
+  const Tertiary = (0, _styledComponents2.default)(Primary)`
+  div.button-content {
+    color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500};
+    border-color: transparent;
+    background-color: transparent;
+    border-width: 1px;
+    div svg path {
+      fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary};
+    }
+  }
+  &:hover > div.button-content,
+  &.hover-state > div.button-content {
+    background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20};
+    color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20};
+    div {
+      svg {
+        path {
+          fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700};
+        }
+      }
+    }
+  }
+  &:active > div.button-content,
+  &.active-state > div.button-content {
+    background-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100};
+    color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800};
+    border-color: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100};
+    div {
+      svg {
+        path {
+          fill: ${props => props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800};
+        }
+      }
+    }
+  }
+
+  &:disabled > div.button-content,
+  &.disabled-state > div.button-content {
+    background-color: white !important;
+    color: ${_styles.COLORS.neutral_300};
+    border-color: transparent !important;
+  }
+  ${props => props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : ''}
+  &.focus-state {
+    ${props => tabbedHereStyle('tertiary', props?.colorTheme)};
+  }
+`;
+  const Correct = (0, _styledComponents2.default)(Primary)`
+  div.button-content {
+    color: white;
+    border-color: ${_styles.COLORS.correct_500};
+    background-color: ${_styles.COLORS.correct_500};
+  }
+  &:hover > div.button-content,
+  &.hover-state > div.button-content {
+    border-color: ${_styles.COLORS.correct_700};
+    background-color: ${_styles.COLORS.correct_700};
+  }
+  &:focus > div.button-content,
+  &.focus-state > div.button-content {
+    border-color: ${_styles.COLORS.correct_700};
+    background-color: ${_styles.COLORS.correct_700};
+  }
+  &:active > div.button-content,
+  &.active-state > div.button-content {
+    border-color: ${_styles.COLORS.correct_800};
+    background-color: ${_styles.COLORS.correct_800};
+  }
+
+  &:disabled > div.button-content,
+  &.disabled-state > div.button-content {
+    background-color: ${_styles.COLORS.neutral_100};
+    color: ${_styles.COLORS.neutral_300};
+    border-color: ${_styles.COLORS.neutral_100};
+  }
+`;
+  const Critical = (0, _styledComponents2.default)(Primary)`
+  div.button-content {
+    color: white;
+    border-color: ${_styles.COLORS.critical_500};
+    background-color: ${_styles.COLORS.critical_500};
+  }
+  &:hover > div.button-content,
+  &.hover-state > div.button-content {
+    border-color: ${_styles.COLORS.critical_700};
+    background-color: ${_styles.COLORS.critical_700};
+  }
+  &:focus > div.button-content,
+  &.focus-state > div.button-content {
+    border-color: ${_styles.COLORS.critical_700};
+    background-color: ${_styles.COLORS.critical_700};
+  }
+  &:active > div.button-content,
+  &.active-state > div.button-content {
+    border-color: ${_styles.COLORS.critical_800};
+    background-color: ${_styles.COLORS.critical_800};
+  }
+
+  &:disabled > div.button-content,
+  &.disabled-state > div.button-content {
+    background-color: ${_styles.COLORS.neutral_100};
+    color: ${_styles.COLORS.neutral_300};
+    border-color: ${_styles.COLORS.neutral_100};
+  }
+`;
+
+  const Button = _ref => {
+    let {
+      children = '',
+      variant = 'primary',
+      type = 'button',
+      size = _types.Size.Medium,
+      width = 'auto',
+      minWidth = '64px',
+      testId,
+      disabled,
+      flatEdge,
+      icon
+    } = _ref,
+        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.LoadingIndicator, null)); // Let's render button
+
+
+    switch (variant) {
+      case 'primary':
+        return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
+          disabled: disabled,
+          iconOnly: !children,
+          type: type,
+          size: size,
+          flatEdge: flatEdge,
+          width: width,
+          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()));
+
+      case 'secondary':
+        return /*#__PURE__*/React.createElement(Secondary, _extends({}, renderProps, {
+          disabled: disabled,
+          type: type,
+          size: size,
+          iconOnly: !children,
+          flatEdge: flatEdge,
+          width: width,
+          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()));
+
+      case 'tertiary':
+        return /*#__PURE__*/React.createElement(Tertiary, _extends({}, renderProps, {
+          disabled: disabled,
+          type: type,
+          flatEdge: flatEdge,
+          size: size,
+          width: width,
+          iconOnly: !children,
+          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()));
+
+      case 'correct':
+        return /*#__PURE__*/React.createElement(Correct, _extends({}, renderProps, {
+          disabled: disabled,
+          type: type,
+          size: size,
+          iconOnly: !children,
+          flatEdge: flatEdge,
+          width: width,
+          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()));
+
+      case 'critical':
+        return /*#__PURE__*/React.createElement(Critical, _extends({}, renderProps, {
+          disabled: disabled,
+          flatEdge: flatEdge,
+          iconOnly: !children,
+          type: type,
+          size: size,
+          width: width,
+          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()));
+
+      default:
+        return /*#__PURE__*/React.createElement(Primary, _extends({}, renderProps, {
+          flatEdge: flatEdge,
+          disabled: disabled,
+          iconOnly: !children,
+          type: type,
+          size: size,
+          width: width,
+          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()));
+    }
+  };
+
+  Button.propTypes = {
+    variant: _propTypes2.default.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
+    role: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['button']), _propTypes2.default.string]),
+    title: _propTypes2.default.string,
+    colorTheme: _propTypes2.default.oneOf(['teal', 'dark']),
+    width: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['auto']), _propTypes2.default.string]),
+    loading: _propTypes2.default.bool,
+    testId: _propTypes2.default.string,
+    tabbedHere: _propTypes2.default.bool,
+    icon: _propTypes2.default.node,
+    minWidth: _propTypes2.default.string,
+    iconOnly: _propTypes2.default.bool
+  };
+  exports.default = Button;
+});
+//# sourceMappingURL=Button.js.map