@laerdal/life-react-components 3.5.0 → 3.5.1-dev.10

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","BackButtonContainerStyles","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst BackButtonContainerStyles = styled.button<BackButtonProps>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > .button-content {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > .button-content > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > .button-content > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > .button-content,\r\n  &.hover-state > .button-content {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n  &:focus > .button-content,\r\n  &.focus-state > .button-content {\r\n    ${focusStyles}\r\n  }\r\n  &:active > .button-content,\r\n  &.active-state > .button-content {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > .button-content {\r\n    color: ${COLORS.neutral_300} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  size: Size.Small | Size.XSmall;\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <div className={'button-content'}>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </div>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,yBAAyB,GAAGT,MAAM,CAACU,MAAM,syCAa3C,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAGN,kBAAkB,CAACF,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC,GAAGT,iBAAiB,CAACD,kBAAkB,CAACS,IAAI,EAAEb,MAAM,CAACc,WAAW,CAAC;AAAA,CAAC,EA6BtJd,MAAM,CAACe,UAAU,EAC5Bf,MAAM,CAACgB,WAAW,EAIzBf,WAAW,EAIOD,MAAM,CAACiB,WAAW,EAC7BjB,MAAM,CAACkB,WAAW,EAMlBlB,MAAM,CAACmB,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEV,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACoB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKb,KAAK;EAC/G,oBACE,KAAC,yBAAyB,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEJ,yBAA0B;IAAC,UAAU,EAAEgB,UAAW;IAAA,uBAC/G;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAM,eAAY,MAAM;QAAA,uBACtB,KAAC,WAAW,CAAC,aAAa;UAAC,IAAI,EAAEZ,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EAClE,eACP;QAAA,UAAQS;MAAQ,EAAS;IAAA;EACrB,GACoB;AAEhC,CAAC;AAAC;EAbAG,QAAQ;AAAA;AAeV,eAAeJ,UAAU"}
+{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","BackButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","BackButtonContainerStyles","button","_templateObject2","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","_ref","children","_ref$size","Small","dataTestId","_objectWithoutProperties","_excluded","_objectSpread","onMouseDown","ArrowLineLeft","propTypes","disabled","_pt","bool"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<BackButtonProps>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${COLORS.neutral_300} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,IAAMC,0BAA0B,GAAGb,MAAM,CAACc,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,QAAE;AAEtD,IAAMC,yBAAyB,GAAGjB,MAAM,CAACkB,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,2nCAa3C,UAACI,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKlB,IAAI,CAACmB,MAAM,GAAGf,kBAAkB,CAACF,kBAAkB,CAACkB,IAAI,EAAEtB,MAAM,CAACuB,WAAW,CAAC,GAAGlB,iBAAiB,CAACD,kBAAkB,CAACkB,IAAI,EAAEtB,MAAM,CAACuB,WAAW,CAAC;AAAA,CAAC,EAGtKX,0BAA0B,EAa1BA,0BAA0B,EAI1BA,0BAA0B,EAOpBA,0BAA0B,EACpBA,0BAA0B,EACtBZ,MAAM,CAACwB,UAAU,EAC5BxB,MAAM,CAACyB,WAAW,EAEjBb,0BAA0B,EACpBA,0BAA0B,EACxCX,WAAW,EAEFW,0BAA0B,EACpBA,0BAA0B,EACvBZ,MAAM,CAAC0B,WAAW,EAC7B1B,MAAM,CAAC2B,WAAW,EAKdf,0BAA0B,EAC9BZ,MAAM,CAAC4B,WAAW,CAG9B;AAYD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoDA,CAAAC,IAAA,EAA8D;EAAA,IAAxDC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,SAAA,GAAAF,IAAA,CAAEV,IAAI;IAAJA,IAAI,GAAAY,SAAA,cAAG9B,IAAI,CAAC+B,KAAK,GAAAD,SAAA;IAAEE,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IAAKf,KAAK,GAAAgB,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EAC/G,oBACE3B,IAAA,CAACO,yBAAyB,EAAAqB,aAAA,CAAAA,aAAA,KAAKlB,KAAK;IAAEC,IAAI,EAAEA,IAAK;IAACkB,WAAW,EAAE/B,yBAA0B;IAAC2B,UAAU,EAAEA,UAAW;IAAAH,QAAA,eAC/GpB,KAAA,CAACC,0BAA0B;MAAAmB,QAAA,gBACzBtB,IAAA;QAAM,eAAY,MAAM;QAAAsB,QAAA,eACtBtB,IAAA,CAACN,WAAW,CAACoC,aAAa;UAACnB,IAAI,EAAEA,IAAI,KAAKlB,IAAI,CAACmB,MAAM,GAAG,IAAI,GAAG;QAAK,CAAE;MAAC,CACnE,CAAC,eACPZ,IAAA;QAAAsB,QAAA,EAAQA;MAAQ,CAAQ,CAAC;IAAA,CACC;EAAC,EACJ,CAAC;AAEhC,CAAC;AAACF,UAAA,CAAAW,SAAA;EAbAC,QAAQ,EAAAC,GAAA,CAAAC;AAAA;AAeV,eAAed,UAAU","ignoreList":[]}

package/dist/Button/Button.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ButtonTertiaryStyled = exports.ButtonSecondaryStyled = exports.ButtonPrimaryStyled = exports.ButtonPositiveStyled = exports.ButtonCriticalStyled = void 0;
+exports["default"] = exports.ButtonTertiaryStyled = exports.ButtonSecondaryStyled = exports.ButtonPrimaryStyled = exports.ButtonPositiveStyled = exports.ButtonCriticalStyled = exports.ButtonContentContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -17,13 +17,13 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
+var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "flatEdge", "icon"],
   _excluded2 = ["loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getBorderRadius = function getBorderRadius(flatEdge, radius) {
   switch (flatEdge) {
     case 'left':
@@ -35,9 +35,11 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
       return "".concat(radius, "px");
   }
 };
-var ButtonPrimaryStyled = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\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    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+var ButtonContentContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  min-width: 64px;\n"])));
+exports.ButtonContentContainer = ButtonContentContainer;
+var ButtonPrimaryStyled = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
   return props.size === _types.Size.Large ? '56px' : '48px';
-}, function (props) {
+}, ButtonContentContainer, function (props) {
   return props.size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_styles.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, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _styles.ComponentMStyling)(_styles.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;
@@ -47,8 +49,6 @@ var ButtonPrimaryStyled = _styledComponents.default.button(_templateObject || (_
   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 16px' : props.size === _types.Size.Small ? '6px 8px' : '8px 12px';
 }, function (props) {
@@ -67,23 +67,23 @@ var ButtonPrimaryStyled = _styledComponents.default.button(_templateObject || (_
   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) {
+}, ButtonContentContainer, ButtonContentContainer, 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) {
+}, ButtonContentContainer, ButtonContentContainer, 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.invertFocus || props.invertFocus === undefined && props.colorTheme === 'dark' ? _styles.invertedFocusStyles : _styles.focusStyles;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, 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;
 });
 exports.ButtonPrimaryStyled = ButtonPrimaryStyled;
-var ButtonSecondaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (props) {
+var ButtonSecondaryStyled = (0, _styledComponents["default"])(ButtonPrimaryStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? _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;
@@ -91,48 +91,51 @@ var ButtonSecondaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(
   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.size === _types.Size.Large ? '12px 16px' : props.size === _types.Size.Small ? '4px 8px' : '6px 12px';
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, 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) {
+}, ButtonContentContainer, ButtonContentContainer, 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) {
+}, ButtonContentContainer, ButtonContentContainer, 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;
 });
 exports.ButtonSecondaryStyled = ButtonSecondaryStyled;
-var ButtonTertiaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n\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\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 !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), function (props) {
+var ButtonTertiaryStyled = (0, _styledComponents["default"])(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_500;
 }, function (props) {
   return props.size === _types.Size.Large ? '12px 16px' : props.size === _types.Size.Small ? '4px 8px' : '6px 12px';
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_20 : props.colorTheme === 'dark' ? _styles.COLORS.primary_700 : _styles.COLORS.primary_20;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_700;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_700 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_700;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_100 : props.colorTheme === 'dark' ? _styles.COLORS.primary_600 : _styles.COLORS.primary_100;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800;
 }, function (props) {
   return props.colorTheme === 'teal' ? _styles.COLORS.accent1_800 : props.colorTheme === 'dark' ? _styles.COLORS.white : _styles.COLORS.primary_800;
-}, _styles.COLORS.primary_700);
+}, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.primary_700);
 exports.ButtonTertiaryStyled = ButtonTertiaryStyled;
-var ButtonPositiveStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), _styles.COLORS.correct_500, _styles.COLORS.correct_700, _styles.COLORS.correct_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ButtonPositiveStyled = (0, _styledComponents["default"])(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, _styles.COLORS.correct_500, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.correct_700, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.correct_800, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 exports.ButtonPositiveStyled = ButtonPositiveStyled;
-var ButtonCriticalStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  div.button-content {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), _styles.COLORS.critical_500, _styles.COLORS.critical_700, _styles.COLORS.critical_800, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ButtonCriticalStyled = (0, _styledComponents["default"])(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, _styles.COLORS.critical_500, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.critical_700, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.critical_800, ButtonContentContainer, ButtonContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 exports.ButtonCriticalStyled = ButtonCriticalStyled;
+/**
+ * Button component
+ */
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? '' : _ref$children,
@@ -144,16 +147,14 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   // Let's filter out properties that we don't need to render.
   var loading = props.loading,
-    renderProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
+    renderProps = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var renderContent = function renderContent() {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -188,29 +189,23 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: size,
     flatEdge: flatEdge,
     width: width,
-    minWidth: minWidth,
     "data-testid": testId,
     className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
     onMouseDown: _common.defaultOnMouseDownHandler,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: "button-content",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonContentContainer, {
       children: renderContent()
     })
   }));
 });
 Button.propTypes = {
-  variant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'critical']),
-  role: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button']), _propTypes.default.string]),
-  title: _propTypes.default.string,
-  colorTheme: _propTypes.default.oneOf(['teal', 'dark']),
-  invertFocus: _propTypes.default.bool,
-  width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.string]),
-  loading: _propTypes.default.bool,
-  testId: _propTypes.default.string,
-  icon: _propTypes.default.node,
-  minWidth: _propTypes.default.string,
-  iconOnly: _propTypes.default.bool
+  variant: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary', 'positive', 'critical']),
+  colorTheme: _propTypes["default"].oneOf(['teal', 'dark']),
+  invertFocus: _propTypes["default"].bool,
+  width: _propTypes["default"].oneOfType([_propTypes["default"].oneOf(['auto']), _propTypes["default"].string]),
+  loading: _propTypes["default"].bool,
+  testId: _propTypes["default"].string,
+  icon: _propTypes["default"].node
 };
 var _default = Button;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=Button.cjs.map

package/dist/Button/Button.cjs.map

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

package/dist/Button/Button.js

@@ -2,11 +2,11 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["children", "variant", "type", "size", "width", "minWidth", "testId", "disabled", "flatEdge", "icon"],
+var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "flatEdge", "icon"],
   _excluded2 = ["loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { LoadingIndicator } from '../LoadingIndicator';
@@ -28,9 +28,10 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
       return "".concat(radius, "px");
   }
 };
-export var ButtonPrimaryStyled = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\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    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
+export var ButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  min-width: 64px;\n"])));
+export var ButtonPrimaryStyled = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (props) {
   return props.size === Size.Large ? '56px' : '48px';
-}, function (props) {
+}, ButtonContentContainer, function (props) {
   return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
@@ -40,8 +41,6 @@ export var ButtonPrimaryStyled = styled.button(_templateObject || (_templateObje
   return props.width;
 }, function (props) {
   return props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px';
-}, function (props) {
-  return props.minWidth;
 }, function (props) {
   return props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px';
 }, function (props) {
@@ -60,22 +59,22 @@ export var ButtonPrimaryStyled = styled.button(_templateObject || (_templateObje
   return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
 }, function (props) {
   return props.colorTheme === 'dark' ? COLORS.primary : COLORS.white;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_100 : COLORS.primary_700;
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_600 : COLORS.white;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_800;
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white;
 }, function (props) {
   return props.invertFocus || props.invertFocus === undefined && props.colorTheme === 'dark' ? invertedFocusStyles : focusStyles;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
 }, function (props) {
   return props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300;
 });
-export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), function (props) {
+export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary;
@@ -83,44 +82,47 @@ export var ButtonSecondaryStyled = styled(ButtonPrimaryStyled)(_templateObject2
   return props.colorTheme === 'teal' ? COLORS.accent1 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary;
 }, function (props) {
   return props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px';
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_200 : COLORS.primary_700;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_300 : COLORS.primary_800;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.white : COLORS.primary_800;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_300;
 }, function (props) {
   return (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_700 : COLORS.neutral_100;
 });
-export var ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n\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\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 !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), function (props) {
+export var ButtonTertiaryStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_500;
 }, function (props) {
   return props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px';
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_20 : props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.primary_20;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_700 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_700;
-}, function (props) {
+}, ButtonContentContainer, ButtonContentContainer, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_100 : props.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.primary_100;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800;
 }, function (props) {
   return props.colorTheme === 'teal' ? COLORS.accent1_800 : props.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800;
-}, COLORS.primary_700);
-export var ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), COLORS.correct_500, COLORS.correct_700, COLORS.correct_800, COLORS.neutral_100, COLORS.neutral_300);
-export var ButtonCriticalStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  div.button-content {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ", ";\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ", ";\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), COLORS.critical_500, COLORS.critical_700, COLORS.critical_800, COLORS.neutral_100, COLORS.neutral_300);
+}, ButtonContentContainer, ButtonContentContainer, COLORS.primary_700);
+export var ButtonPositiveStyled = styled(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, COLORS.correct_500, ButtonContentContainer, ButtonContentContainer, COLORS.correct_700, ButtonContentContainer, ButtonContentContainer, COLORS.correct_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+export var ButtonCriticalStyled = styled(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, COLORS.critical_500, ButtonContentContainer, ButtonContentContainer, COLORS.critical_700, ButtonContentContainer, ButtonContentContainer, COLORS.critical_800, ButtonContentContainer, ButtonContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+/**
+ * Button component
+ */
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? '' : _ref$children,
@@ -132,8 +134,6 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? Size.Medium : _ref$size,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'auto' : _ref$width,
-    _ref$minWidth = _ref.minWidth,
-    minWidth = _ref$minWidth === void 0 ? '64px' : _ref$minWidth,
     testId = _ref.testId,
     disabled = _ref.disabled,
     flatEdge = _ref.flatEdge,
@@ -176,28 +176,22 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: size,
     flatEdge: flatEdge,
     width: width,
-    minWidth: minWidth,
     "data-testid": testId,
     className: props.loading ? 'loading-state ' + props.className : ' ' + props.className,
     onMouseDown: defaultOnMouseDownHandler,
-    children: /*#__PURE__*/_jsx("div", {
-      className: "button-content",
+    children: /*#__PURE__*/_jsx(ButtonContentContainer, {
       children: renderContent()
     })
   }));
 });
 Button.propTypes = {
   variant: _pt.oneOf(['primary', 'secondary', 'tertiary', 'positive', 'critical']),
-  role: _pt.oneOfType([_pt.oneOf(['button']), _pt.string]),
-  title: _pt.string,
   colorTheme: _pt.oneOf(['teal', 'dark']),
   invertFocus: _pt.bool,
   width: _pt.oneOfType([_pt.oneOf(['auto']), _pt.string]),
   loading: _pt.bool,
   testId: _pt.string,
-  icon: _pt.node,
-  minWidth: _pt.string,
-  iconOnly: _pt.bool
+  icon: _pt.node
 };
 export default Button;
 //# sourceMappingURL=Button.js.map