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

package/dist/js/Button/Button.js

@@ -1,417 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var React = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _LoadingIndicator = require("../LoadingIndicator");
-
-var _typography = require("../styles/typography");
-
-var _styles = require("../styles");
-
-var _types = require("../types");
-
-var _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
-    _excluded2 = ["loading"];
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 }; }
-
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-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; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var getBorderRadius = function getBorderRadius(flatEdge, radius) {
-  switch (flatEdge) {
-    case 'left':
-      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
-
-    case 'right':
-      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
-
-    case 'none':
-    default:
-      return "".concat(radius, "px");
-  }
-};
-
-var tabbedHereStyle = function tabbedHereStyle(variant, colorTheme) {
-  switch (variant) {
-    case 'primary':
-      return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white);
-
-    case 'secondary':
-      return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'dark' ? 'transparent' : _styles.COLORS.white, colorTheme === 'teal' ? _styles.COLORS.accent1 : colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.primary, colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500);
-
-    case 'tertiary':
-      return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, _styles.COLORS.white, colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary, colorTheme === 'teal' ? _styles.COLORS.accent1_500 : _styles.COLORS.primary_500);
-
-    default:
-      return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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      "])), _styles.COLORS.focus_25, _styles.COLORS.focus, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'teal' ? _styles.COLORS.accent1_700 : colorTheme === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700, colorTheme === 'dark' ? _styles.COLORS.primary_500 : _styles.COLORS.white);
-  }
-};
-
-var Primary = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _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-state {\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 === _types.Size.Large ? '56px' : '48px';
-}, function (props) {
-  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
-}, function (props) {
-  return getBorderRadius(props.flatEdge, 8);
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
-}, function (props) {
-  return props.width;
-}, function (props) {
-  return props.size === _types.Size.Large ? '56px' : props.size === _types.Size.Small ? '32px' : '40px';
-}, function (props) {
-  return props.minWidth;
-}, function (props) {
-  return props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px';
-}, function (props) {
-  return props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary : _styles.COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_100 : _styles.COLORS.primary_700;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.white;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_800;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white;
-}, function (props) {
-  return props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '';
-}, function (props) {
-  return tabbedHereStyle('primary', props === null || props === void 0 ? void 0 : props.colorTheme);
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.neutral_300;
-}, function (props) {
-  return props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
-});
-
-var Secondary = (0, _styledComponents.default)(Primary)(_templateObject6 || (_templateObject6 = _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\n  &:focus,\n  &.focus-state {\n    ", ";\n  }\n"])), function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_200 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_300 : _styles.COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_300;
-}, function (props) {
-  return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.neutral_100;
-}, function (props) {
-  return props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '';
-}, function (props) {
-  return tabbedHereStyle('secondary', props === null || props === void 0 ? void 0 : props.colorTheme);
-});
-var Tertiary = (0, _styledComponents.default)(Primary)(_templateObject7 || (_templateObject7 = _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-state {\n    ", ";\n  }\n"])), function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary_500;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : _styles.COLORS.primary;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : _styles.COLORS.primary_20;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : _styles.COLORS.primary_700;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : _styles.COLORS.primary_100;
-}, function (props) {
-  return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : _styles.COLORS.primary_800;
-}, _styles.COLORS.neutral_300, function (props) {
-  return props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '';
-}, function (props) {
-  return tabbedHereStyle('tertiary', props === null || props === void 0 ? void 0 : props.colorTheme);
-});
-var Correct = (0, _styledComponents.default)(Primary)(_templateObject8 || (_templateObject8 = _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"])), _styles.COLORS.correct_500, _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100);
-var Critical = (0, _styledComponents.default)(Primary)(_templateObject9 || (_templateObject9 = _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"])), _styles.COLORS.critical_500, _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.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 ? _types.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.
-  var loading = props.loading,
-      renderProps = _objectWithoutProperties(props, _excluded2);
-
-  var supressFocusRef = React.useRef(null);
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      tabbedHere = _React$useState2[0],
-      setTabbedHere = _React$useState2[1];
-
-  var renderContent = function renderContent() {
-    return /*#__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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return 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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return 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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return 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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return 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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return 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: function onMouseDown(e) {
-          if (!disabled && !tabbedHere) supressFocusRef.current = true;
-        },
-        onFocus: function onFocus(e) {
-          if (!disabled) {
-            if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-          }
-        },
-        onBlur: function onBlur() {
-          return setTabbedHere(false);
-        },
-        tabbedHere: tabbedHere
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "button-content"
-      }, renderContent()));
-  }
-};
-
-Button.propTypes = {
-  variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'correct', 'critical']),
-  role: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button']), _propTypes.default.string]),
-  title: _propTypes.default.string,
-  colorTheme: _propTypes.default.oneOf(['teal', 'dark']),
-  width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.string]),
-  loading: _propTypes.default.bool,
-  testId: _propTypes.default.string,
-  tabbedHere: _propTypes.default.bool,
-  icon: _propTypes.default.node,
-  minWidth: _propTypes.default.string,
-  iconOnly: _propTypes.default.bool
-};
-var _default = Button;
-exports.default = _default;
-//# sourceMappingURL=Button.js.map

package/dist/js/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","tabbedHereStyle","variant","colorTheme","css","COLORS","focus_25","focus","accent1_700","primary_100","primary_700","primary_600","white","accent1","primary_800","primary","primary_500","accent1_500","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","Small","width","minWidth","Medium","iconOnly","accent1_800","primary_200","tabbedHere","neutral_100","neutral_300","Secondary","primary_300","Tertiary","accent1_20","primary_20","accent1_100","Correct","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","children","type","testId","disabled","icon","loading","renderProps","supressFocusRef","React","useRef","useState","setTabbedHere","renderContent","className","e","current","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled, { css } from 'styled-components';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\nimport { COLORS, TYPOGRAPHY } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\r\n  switch(flatEdge)\r\n  {\r\n      case 'left':\r\n          return `0px ${radius}px ${radius}px 0px`;\r\n      \r\n      case 'right':\r\n          return `${radius}px 0px 0px ${radius}px`;\r\n\r\n      case 'none':\r\n      default:\r\n          return `${radius}px`;\r\n  }\r\n}\r\n\r\n\r\nconst tabbedHereStyle = (variant: string, colorTheme?: string) => {\r\n  switch (variant) {\r\n    case 'primary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          color: ${colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white};\r\n        }\r\n      `;\r\n    case 'secondary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'dark' ? 'transparent' : COLORS.white};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : colorTheme === 'dark' ? COLORS.primary_800 : COLORS.primary};\r\n          color: ${colorTheme === 'dark' ? COLORS.white : COLORS.primary_500};\r\n        }\r\n      `;\r\n    case 'tertiary':\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${COLORS.white};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary};\r\n          color: ${colorTheme === 'teal' ? COLORS.accent1_500 : COLORS.primary_500};\r\n        }\r\n      `;\r\n\r\n    default:\r\n      return css`\r\n        outline: none;\r\n        div {\r\n          outline: none;\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          background-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          border-color: ${colorTheme === 'teal' ? COLORS.accent1_700 : colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700};\r\n          color: ${colorTheme === 'dark' ? COLORS.primary_500 : COLORS.white};\r\n        }\r\n      `;\r\n  }\r\n};\r\n\r\nconst Primary = styled.button<ButtonProps>`\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  margin: 0;\r\n  box-sizing: border-box;\r\n  min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\r\n  &.loading-state {\r\n    cursor: wait;\r\n  }\r\n  &:focus:not(:focus-visible),\r\n  &:focus:not(:focus-visible) > div.button-content {\r\n    outline: none !important;\r\n  }\r\n  div.button-content {\r\n    ${(props) =>\r\n      props.size === Size.Large\r\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : props.size === Size.Small\r\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\r\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\r\n    border-width: 2px;\r\n    border-style: solid;\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n\r\n    width: ${(props) => props.width};\r\n    position: relative;\r\n\r\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\r\n    min-width: ${props => props.minWidth};\r\n\r\n    box-sizing: border-box;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 4px;\r\n    // paddings have -2px for border\r\n    padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\r\n\r\n    span.loading {\r\n      opacity: 0;\r\n    }\r\n    .icon {\r\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\r\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n      svg {\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\r\n      }\r\n    }\r\n\r\n    .extramargin {\r\n      margin-right: 4px;\r\n    }\r\n\r\n    div {\r\n      position: absolute;\r\n      width: 100%;\r\n      svg {\r\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\r\n    box-shadow: none !important;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.colorTheme) : '')}\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('primary', props?.colorTheme)};\r\n  }\r\n  &:disabled,\r\n  &.disabled-state {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    pointer-events: none;\r\n    background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n`;\r\n\r\nconst Secondary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\r\n    background-color: transparent;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(:focus-visible),\r\n  &:focus:not(:focus-visible) > div.button-content {\r\n    outline: none !important;\r\n  }\r\n\r\n\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\r\n    background-color: transparent;\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: transparent;\r\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\r\n    border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.colorTheme) : '')}\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('secondary', props?.colorTheme)};\r\n  }\r\n`;\r\n\r\nconst Tertiary = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\r\n    border-color: transparent;\r\n    background-color: transparent;\r\n    border-width: 1px;\r\n    div svg path {\r\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\r\n    }\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n    border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\r\n    div {\r\n      svg {\r\n        path {\r\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: white !important;\r\n    color: ${COLORS.neutral_300};\r\n    border-color: transparent !important;\r\n  }\r\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('tertiary', props.colorTheme) : '')}\r\n  &.focus-state {\r\n    ${(props) => tabbedHereStyle('tertiary', props?.colorTheme)};\r\n  }\r\n`;\r\n\r\nconst Correct = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.correct_500};\r\n    background-color: ${COLORS.correct_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.correct_700};\r\n    background-color: ${COLORS.correct_700};\r\n  }\r\n  &:focus > div.button-content,\r\n  &.focus-state > div.button-content {\r\n    border-color: ${COLORS.correct_700};\r\n    background-color: ${COLORS.correct_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.correct_800};\r\n    background-color: ${COLORS.correct_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nconst Critical = styled(Primary)<ButtonProps>`\r\n  div.button-content {\r\n    color: white;\r\n    border-color: ${COLORS.critical_500};\r\n    background-color: ${COLORS.critical_500};\r\n  }\r\n  &:hover > div.button-content,\r\n  &.hover-state > div.button-content {\r\n    border-color: ${COLORS.critical_700};\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:focus > div.button-content,\r\n  &.focus-state > div.button-content {\r\n    border-color: ${COLORS.critical_700};\r\n    background-color: ${COLORS.critical_700};\r\n  }\r\n  &:active > div.button-content,\r\n  &.active-state > div.button-content {\r\n    border-color: ${COLORS.critical_800};\r\n    background-color: ${COLORS.critical_800};\r\n  }\r\n\r\n  &:disabled > div.button-content,\r\n  &.disabled-state > div.button-content {\r\n    background-color: ${COLORS.neutral_100};\r\n    color: ${COLORS.neutral_300};\r\n    border-color: ${COLORS.neutral_100};\r\n  }\r\n`;\r\n\r\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'correct' | 'critical';\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  role?: 'button' | string;\r\n  title?: string;\r\n  size?: Size;\r\n  colorTheme?: 'teal' | 'dark';\r\n  width?: 'auto' | string;\r\n  loading?: boolean;\r\n  testId?: string;\r\n  tabbedHere?: boolean;\r\n  icon?: React.ReactNode;\r\n  minWidth?: string;\r\n  iconOnly?: boolean;\r\n}\r\n\r\nconst Button: React.FunctionComponent<ButtonProps> = ({\r\n  children = '',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width = 'auto',\r\n  minWidth = '64px',\r\n  testId,\r\n  disabled,\r\n  flatEdge,\r\n  icon,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, ...renderProps } = props;\r\n  const supressFocusRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const renderContent = () => (\r\n    <>\r\n      {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\r\n      {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\r\n      {loading && <LoadingIndicator></LoadingIndicator>}\r\n    </>\r\n  );\r\n\r\n  // Let's render button\r\n  switch (variant) {\r\n    case 'primary':\r\n      return (\r\n        <Primary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Primary>\r\n      );\r\n    case 'secondary':\r\n      return (\r\n        <Secondary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          iconOnly={!children}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Secondary>\r\n      );\r\n    case 'tertiary':\r\n      return (\r\n        <Tertiary\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          flatEdge={flatEdge}\r\n          size={size}\r\n          width={width}\r\n          iconOnly={!children}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Tertiary>\r\n      );\r\n    case 'correct':\r\n      return (\r\n        <Correct\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          iconOnly={!children}\r\n          flatEdge={flatEdge}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Correct>\r\n      );\r\n    case 'critical':\r\n      return (\r\n        <Critical\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          flatEdge={flatEdge}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Critical>\r\n      );\r\n    default:\r\n      return (\r\n        <Primary\r\n          {...renderProps}\r\n          flatEdge={flatEdge}\r\n          disabled={disabled}\r\n          iconOnly={!children}\r\n          type={type}\r\n          size={size}\r\n          width={width}\r\n          minWidth={minWidth}\r\n          data-testid={testId}\r\n          className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\r\n          onMouseDown={(e: any) => {\r\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\r\n          }}\r\n          onFocus={(e: any) => {\r\n            if (!disabled) {\r\n              if (!supressFocusRef.current) setTabbedHere(true);\r\n              else supressFocusRef.current = false;\r\n            }\r\n          }}\r\n          onBlur={() => setTabbedHere(false)}\r\n          tabbedHere={tabbedHere}>\r\n          <div className=\"button-content\">{renderContent()}</div>\r\n        </Primary>\r\n      );\r\n  }\r\n};\r\n\r\nexport default Button;\r\n"],"file":"Button.js"}

package/dist/js/Button/CommonStyling.d.ts

@@ -1,7 +0,0 @@
-import { ButtonProps } from './Button';
-export declare const Primary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const Secondary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const Tertiary: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const Correct: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const Critical: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
-export declare const Text: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;