@laerdal/life-react-components 2.1.0 → 2.1.1-dev.15.full

package/dist/AuthPage/AuthPage.d.ts

@@ -1,4 +1,4 @@
-declare type AuthPageProps = {
+type AuthPageProps = {
     /** set this to 'false' to hide the left side illustration/information section */
     showInformationSection: boolean;
     /** true if 'sign-up' screen-set is showing, otherwise false.

package/dist/Banners/Banner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from '../types';
-declare type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: Size.Small | Size.Medium | Size.Large;
     type?: 'warning' | 'critical' | 'positive' | 'neutral';
     link?: string;

package/dist/Banners/OverviewBanner.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare type Props = {
+type Props = {
     children: any;
     testId?: string;
 } & React.HTMLAttributes<HTMLDivElement>;

package/dist/Breadcrumb/Breadcrumb.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Size } from '..';
 import { BreadcrumbItem } from './BreadcrumbItem';
-declare type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
+type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & {
     homeIcon?: boolean;
     homeLabel?: string;
     homeUrl?: string;

package/dist/Button/BackButton.cjs

@@ -18,7 +18,7 @@ var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _typography = require("../styles/typography");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "size"];
+var _excluded = ["children", "size", "dataTestId"];
 var _templateObject;
 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; }
@@ -31,10 +31,12 @@ var BackButton = function BackButton(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
+    dataTestId = _ref.dataTestId,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({}, props), {}, {
     size: size,
     onMouseDown: _common.defaultOnMouseDownHandler,
+    dataTestId: dataTestId,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'button-content',
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/dist/Button/BackButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.cjs","names":["Button","styled","button","props","size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","ComponentSStyling","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","defaultOnMouseDownHandler","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,MAAM,GAAGC,yBAAM,CAACC,MAAM,ozCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAAC,8BAAkB,EAACC,8BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC;AAAA,CAAC,EA6BtJD,cAAM,CAACG,UAAU,EAC5BH,cAAM,CAACI,WAAW,EAIzBC,mBAAW,EAIOL,cAAM,CAACM,WAAW,EAC7BN,cAAM,CAACO,WAAW,EAMlBP,cAAM,CAACQ,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAAkD;EAAA,IAA5CC,QAAQ,QAARA,QAAQ;IAAA,iBAAEhB,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACgB,KAAK;IAAKlB,KAAK;EACnG,oBACE,qBAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEkB,iCAA0B;IAAA,uBACpE;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,qBAAC,0BAAa;UAAC,IAAI,EAAElB,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EACtD,eACP;QAAA,UAAQc;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAG,QAAQ;AAAA;AAAA,eAeKJ,UAAU;AAAA"}
+{"version":3,"file":"BackButton.cjs","names":["Button","styled","button","props","size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","neutral_600","ComponentSStyling","primary_20","primary_700","focusStyles","primary_100","primary_800","neutral_300","BackButton","children","Small","dataTestId","defaultOnMouseDownHandler","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,MAAM,GAAGC,yBAAM,CAACC,MAAM,ozCAaxB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAAC,8BAAkB,EAACC,8BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC,GAAG,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,WAAW,CAAC;AAAA,CAAC,EA6BtJD,cAAM,CAACG,UAAU,EAC5BH,cAAM,CAACI,WAAW,EAIzBC,mBAAW,EAIOL,cAAM,CAACM,WAAW,EAC7BN,cAAM,CAACO,WAAW,EAMlBP,cAAM,CAACQ,WAAW,CAG9B;AAMD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAA8D;EAAA,IAAxDC,QAAQ,QAARA,QAAQ;IAAA,iBAAEhB,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACgB,KAAK;IAAEC,UAAU,QAAVA,UAAU;IAAKnB,KAAK;EAC/G,oBACE,qBAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEmB,iCAA0B;IAAC,UAAU,EAAED,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,qBAAC,0BAAa;UAAC,IAAI,EAAElB,IAAI,KAAKC,WAAI,CAACC,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EACtD,eACP;QAAA,UAAQc;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAI,QAAQ;AAAA;AAAA,eAeKL,UAAU;AAAA"}

package/dist/Button/BackButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Size } from '../types';
-interface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+import { Size, Testable } from '../types';
+interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {
     size: Size.Small | Size.XSmall;
     disabled?: boolean;
 }

package/dist/Button/BackButton.js

@@ -2,7 +2,7 @@ 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", "size"];
+var _excluded = ["children", "size", "dataTestId"];
 var _templateObject;
 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; }
@@ -22,10 +22,12 @@ var BackButton = function BackButton(_ref) {
   var children = _ref.children,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? Size.Small : _ref$size,
+    dataTestId = _ref.dataTestId,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, props), {}, {
     size: size,
     onMouseDown: defaultOnMouseDownHandler,
+    dataTestId: dataTestId,
     children: /*#__PURE__*/_jsxs("div", {
       className: 'button-content',
       children: [/*#__PURE__*/_jsx("span", {

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","Button","button","props","size","XSmall","Bold","neutral_600","primary_20","primary_700","primary_100","primary_800","neutral_300","BackButton","children","Small","disabled"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,aAAa,QAAQ,kCAAkC;AAChE,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAChG,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,MAAM,GAAGT,MAAM,CAACU,MAAM,syCAaxB,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,OAAkD;EAAA,IAA5CC,QAAQ,QAARA,QAAQ;IAAA,iBAAEV,IAAI;IAAJA,IAAI,0BAAGT,IAAI,CAACoB,KAAK;IAAKZ,KAAK;EACnG,oBACE,KAAC,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEJ,yBAA0B;IAAA,uBACpE;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,KAAC,aAAa;UAAC,IAAI,EAAEI,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EACtD,eACP;QAAA,UAAQS;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAE,QAAQ;AAAA;AAeV,eAAeH,UAAU"}
+{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","ArrowLineLeft","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","Button","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';\nimport styled from 'styled-components';\nimport {COLORS, focusStyles} from '../styles';\nimport { Size, Testable } from '../types';\nimport { ArrowLineLeft } from '../icons/systemicons/SystemIcons';\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst Button = styled.button<BackButtonProps>`\n  box-sizing: border-box;\n  min-height: 48px;\n  padding: 0;\n  margin: 0;\n  outline:none;\n  max-width: max-content;\n  display: flex;\n  align-items: center;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  ${(props) => (props.size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600))};\n  font-feature-settings: 'liga' off;\n\n  & > .button-content {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    max-width: max-content;\n    padding: 4px 4px 4px 0;\n    border-radius: 4px;\n    cursor: inherit;\n    min-width: 64px;\n\n  }\n\n  & > .button-content > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > .button-content > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > .button-content,\n  &.hover-state > .button-content {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n  &:focus > .button-content,\n  &.focus-state > .button-content {\n    ${focusStyles}\n  }\n  &:active > .button-content,\n  &.active-state > .button-content {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > .button-content {\n    color: ${COLORS.neutral_300} !important;\n    background-color: transparent !important;\n  }\n`;\n\ninterface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\n  size: Size.Small | Size.XSmall;\n  disabled?: boolean;\n}\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size = Size.Small, dataTestId, ...props }) => {\n  return (\n    <Button {...props} size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\n      <div className={'button-content'}>\n        <span>\n          <ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\n        </span>\n        <label>{children}</label>\n      </div>\n    </Button>\n  );\n};\n\nexport default BackButton;\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,aAAa,QAAQ,kCAAkC;AAChE,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAChG,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,MAAM,GAAGT,MAAM,CAACU,MAAM,syCAaxB,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,MAAM,kCAAKA,KAAK;IAAE,IAAI,EAAEC,IAAK;IAAC,WAAW,EAAEJ,yBAA0B;IAAC,UAAU,EAAEgB,UAAW;IAAA,uBAC5F;MAAK,SAAS,EAAE,gBAAiB;MAAA,wBAC/B;QAAA,uBACE,KAAC,aAAa;UAAC,IAAI,EAAEZ,IAAI,KAAKT,IAAI,CAACU,MAAM,GAAG,IAAI,GAAG;QAAK;MAAG,EACtD,eACP;QAAA,UAAQS;MAAQ,EAAS;IAAA;EACrB,GACC;AAEb,CAAC;AAAC;EAbAG,QAAQ;AAAA;AAeV,eAAeJ,UAAU"}

package/dist/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["getBorderRadius","flatEdge","radius","Primary","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","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","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';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\n  switch (flatEdge) {\n    case 'left':\n      return `0px ${radius}px ${radius}px 0px`;\n\n    case 'right':\n      return `${radius}px 0px 0px ${radius}px`;\n\n    case 'none':\n    default:\n      return `${radius}px`;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\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: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${(props) => getBorderRadius(props.flatEdge, 8)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${(props) => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\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: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    outline: 2px solid ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};    \n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', minWidth = '64px', testId, disabled, flatEdge, icon, ...props }, ref) => {\n    // Let's filter out properties that we don't need to render.\n    const { loading, ...renderProps } = props;\n\n    const renderContent = () => (\n      <>\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n        {loading && <LoadingIndicator />}\n      </>\n    );\n\n    let ButtonStyled = Primary;\n    switch (variant) {\n      case 'secondary':\n        ButtonStyled = Secondary;\n        break;\n      case 'tertiary':\n        ButtonStyled = Tertiary;\n        break;\n      case 'positive':\n        ButtonStyled = Positive;\n        break;\n      case 'critical':\n        ButtonStyled = Critical;\n        break;\n    }\n\n    return (\n      <ButtonStyled\n        {...renderProps}\n        ref={ref}\n        disabled={disabled}\n        iconOnly={!children}\n        type={type}\n        size={size}\n        flatEdge={flatEdge}\n        width={width}\n        minWidth={minWidth}\n        data-testid={testId}\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n        onMouseDown={defaultOnMouseDownHandler}>\n        <div className=\"button-content\">{renderContent()}</div>\n      </ButtonStyled>\n    );\n  },\n);\n\nexport default Button;\n"],"mappings":"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"}
+{"version":3,"file":"Button.cjs","names":["getBorderRadius","flatEdge","radius","Primary","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","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","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';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport { COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { Size, Testable } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\nconst getBorderRadius = (flatEdge: string | undefined, radius: number) => {\n  switch (flatEdge) {\n    case 'left':\n      return `0px ${radius}px ${radius}px 0px`;\n\n    case 'right':\n      return `${radius}px 0px 0px ${radius}px`;\n\n    case 'none':\n    default:\n      return `${radius}px`;\n  }\n};\n\nconst Primary = styled.button<ButtonProps>`\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: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n  &.loading-state {\n    cursor: wait;\n  }\n  div.button-content {\n    ${(props) =>\n      props.size === Size.Large\n        ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : props.size === Size.Small\n        ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n        : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    border-radius: ${(props) => getBorderRadius(props.flatEdge, 8)};\n\n    width: ${(props) => props.width};\n    position: relative;\n\n    min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n    min-width: ${(props) => props.minWidth};\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '' ))};\n      width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n      svg {\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n        path {\n          fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n        }\n      }\n    }\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n  }\n\n  &:focus,\n  &.focus-state {\n    ${(props) => (props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles)}\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: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n    color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n  }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    outline: 2px solid ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: transparent;\n    color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n    outline: 2px solid ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n  }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n    background-color: transparent;\n    div svg path {\n      fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n    }\n    padding: ${(props) => (props.size === Size.Large ? '12px 16px' : props.size === Size.Small ? '4px 8px' : '6px 12px')};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n        }\n      }\n    }\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n    color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n    div {\n      svg {\n        path {\n          fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n        }\n      }\n    }\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: white !important;\n    color: ${COLORS.neutral_300};\n    border-color: transparent !important;\n  }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.correct_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.correct_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${COLORS.correct_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n  div.button-content {\n    color: white;\n    background-color: ${COLORS.critical_500};\n  }\n  &:hover > div.button-content,\n  &.hover-state > div.button-content {\n    background-color: ${COLORS.critical_700};\n  }\n  &:active > div.button-content,\n  &.active-state > div.button-content {\n    background-color: ${COLORS.critical_800};\n  }\n\n  &:disabled > div.button-content,\n  &.disabled-state > div.button-content {\n    background-color: ${COLORS.neutral_100};\n    color: ${COLORS.neutral_300};    \n  }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  role?: 'button' | string;\n  title?: string;\n  size?: Size;\n  colorTheme?: 'teal' | 'dark';\n  invertFocus?: boolean;\n  width?: 'auto' | string;\n  loading?: boolean;\n  testId?: string;\n  icon?: React.ReactNode;\n  minWidth?: string;\n  iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ children = '', variant = 'primary', type = 'button', size = Size.Medium, width = 'auto', minWidth = '64px', testId, disabled, flatEdge, icon, ...props }, ref) => {\n    // Let's filter out properties that we don't need to render.\n    const { loading, ...renderProps } = props;\n\n    const renderContent = () => (\n      <>\n        {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n        {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n        {loading && <LoadingIndicator />}\n      </>\n    );\n\n    let ButtonStyled = Primary;\n    switch (variant) {\n      case 'secondary':\n        ButtonStyled = Secondary;\n        break;\n      case 'tertiary':\n        ButtonStyled = Tertiary;\n        break;\n      case 'positive':\n        ButtonStyled = Positive;\n        break;\n      case 'critical':\n        ButtonStyled = Critical;\n        break;\n    }\n\n    return (\n      <ButtonStyled\n        {...renderProps}\n        ref={ref}\n        disabled={disabled}\n        iconOnly={!children}\n        type={type}\n        size={size}\n        flatEdge={flatEdge}\n        width={width}\n        minWidth={minWidth}\n        data-testid={testId}\n        className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n        onMouseDown={defaultOnMouseDownHandler}>\n        <div className=\"button-content\">{renderContent()}</div>\n      </ButtonStyled>\n    );\n  },\n);\n\nexport default Button;\n"],"mappings":"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"}

package/dist/Button/Button.js.map

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

package/dist/Button/DualFunctionButton.cjs

@@ -94,6 +94,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       disabled: false,
       margin: "",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, _objectSpread(_objectSpread({}, renderProps), {}, {
+        testId: testId,
         onClick: onClick,
         disabled: disabled,
         type: type,

package/dist/Button/DualFunctionButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.cjs","names":["ButtonsContainer","styled","div","props","size","Size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","React","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","useClickOutsideRef","useFocusOutsideRef","dropdownContentId","nanoid","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/DualFunctionButton.js

@@ -85,6 +85,7 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
       disabled: false,
       margin: "",
       children: [/*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({}, renderProps), {}, {
+        testId: testId,
         onClick: onClick,
         disabled: disabled,
         type: type,

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.cjs

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
+var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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; }
@@ -87,6 +87,8 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
+    dataTestId = _ref.dataTestId,
+    focusOnClick = _ref.focusOnClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's render button
   switch (variant) {
@@ -94,7 +96,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSecondaryIconButton, _objectSpread(_objectSpread({
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
-        "data-testid": id,
+        "data-testid": dataTestId,
         ref: ref,
         onClick: function onClick(event) {
           event.stopPropagation();
@@ -109,7 +111,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -123,7 +125,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPrimaryIconButton, _objectSpread(_objectSpread({
         id: id,
         type: type !== null && type !== void 0 ? type : 'button',
-        "data-testid": id,
+        "data-testid": dataTestId,
         flatEdge: flatEdge,
         ref: ref,
         onClick: function onClick(event) {
@@ -138,7 +140,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -162,7 +164,8 @@ IconButton.propTypes = {
   borderRadius: _propTypes.default.number,
   focusBackgroundColor: _propTypes.default.string,
   children: _propTypes.default.node,
-  invertFocus: _propTypes.default.bool
+  invertFocus: _propTypes.default.bool,
+  focusOnClick: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;