@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/umd/Button/Button.js

@@ -1,663 +0,0 @@
-(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