@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Button/BackButton.d.ts

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { Size, Testable } from '../types';
-export declare const BackButtonContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-   * Required. The size of the back button. Can be 'Small' or 'XSmall'.
-   */
-    size: Size.Small | Size.XSmall;
-    /**
-   * Optional. A boolean indicating whether the back button is disabled.
-   */
-    disabled?: boolean;
-}
-declare const BackButton: React.FunctionComponent<BackButtonProps>;
-export default BackButton;
+import * as React from 'react';
+import { Size, Testable } from '../types';
+export declare const BackButtonContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+   * Required. The size of the back button. Can be 'Small' or 'XSmall'.
+   */
+    size: Size.Small | Size.XSmall;
+    /**
+   * Optional. A boolean indicating whether the back button is disabled.
+   */
+    disabled?: boolean;
+}
+declare const BackButton: React.FunctionComponent<BackButtonProps>;
+export default BackButton;

package/dist/Button/BackButton.js

@@ -1,9 +1,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";
 const _excluded = ["children", "size", "dataTestId"];
-var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -14,8 +12,69 @@ import { SystemIcons } from '../icons';
 import { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';
 import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const BackButtonContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-const BackButtonContainerStyles = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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  ", ";\n  font-feature-settings: 'liga' off;\n\n  & > ", " {\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  & > ", " > span {\n    display: flex;\n    cursor: inherit;\n  }\n  & > ", " > label {\n    display: flex;\n    cursor: inherit;\n    flex-grow: 1;\n    justify-content: center;\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:focus > ", ",\n  &.focus-state > ", " {\n    ", "\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:disabled > ", " {\n    color: ", " !important;\n    background-color: transparent !important;\n  }\n"])), props => props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)), BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, BackButtonContentContainer, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_700', props.theme), BackButtonContentContainer, BackButtonContentContainer, focusStyles, BackButtonContentContainer, BackButtonContentContainer, props => COLORS.getColor('primary_100', props.theme), props => COLORS.getColor('primary_800', props.theme), BackButtonContentContainer, props => COLORS.getColor('neutral_300', props.theme));
+export const BackButtonContentContainer = styled.div``;
+const BackButtonContainerStyles = styled.button`
+  box-sizing: border-box;
+  min-height: 48px;
+  padding: 0;
+  margin: 0;
+  outline:none;
+  max-width: max-content;
+  display: flex;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+
+  ${props => props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))};
+  font-feature-settings: 'liga' off;
+
+  & > ${BackButtonContentContainer} {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    max-width: max-content;
+    padding: 4px 4px 4px 0;
+    border-radius: 4px;
+    cursor: inherit;
+    min-width: 64px;
+
+  }
+
+  & > ${BackButtonContentContainer} > span {
+    display: flex;
+    cursor: inherit;
+  }
+  & > ${BackButtonContentContainer} > label {
+    display: flex;
+    cursor: inherit;
+    flex-grow: 1;
+    justify-content: center;
+  }
+
+  &:hover > ${BackButtonContentContainer},
+  &.hover-state > ${BackButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+    color: ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+  &:focus > ${BackButtonContentContainer},
+  &.focus-state > ${BackButtonContentContainer} {
+    ${focusStyles}
+  }
+  &:active > ${BackButtonContentContainer},
+  &.active-state > ${BackButtonContentContainer} {
+    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+    color: ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+  &:disabled {
+    cursor: not-allowed;
+  }
+  &:disabled > ${BackButtonContentContainer} {
+    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    background-color: transparent !important;
+  }
+`;
 const BackButton = _ref => {
   let {
       children,

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","BackButtonContentContainer","div","_templateObject","_taggedTemplateLiteral","BackButtonContainerStyles","button","_templateObject2","props","$size","XSmall","Bold","getColor","theme","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties","_excluded","_objectSpread","onMouseDown","ArrowLineLeft","propTypes","disabled","_pt","bool"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,MAAMC,0BAA0B,GAAGb,MAAM,CAACc,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,QAAE;AAEtD,MAAMC,yBAAyB,GAAGjB,MAAM,CAACkB,MAAM,CAAAC,gBAAA,KAAAA,gBAAA,GAAAH,sBAAA,2nCAa1CI,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKlB,IAAI,CAACmB,MAAM,GAAGf,kBAAkB,CAACF,kBAAkB,CAACkB,IAAI,EAAEtB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC,GAAGnB,iBAAiB,CAACD,kBAAkB,CAACkB,IAAI,EAAEtB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAE,EAGzNZ,0BAA0B,EAa1BA,0BAA0B,EAI1BA,0BAA0B,EAOpBA,0BAA0B,EACpBA,0BAA0B,EACtBO,KAAK,IAAInB,MAAM,CAACuB,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC,EAC9DL,KAAK,IAAInB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,EAEnDZ,0BAA0B,EACpBA,0BAA0B,EACxCX,WAAW,EAEFW,0BAA0B,EACpBA,0BAA0B,EACvBO,KAAK,IAAInB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,EAC/DL,KAAK,IAAInB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,EAKhDZ,0BAA0B,EAC9BO,KAAK,IAAInB,MAAM,CAACuB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAGhE;AAYD,MAAMC,UAAoD,GAAGC,IAAA,IAAiE;EAAA,IAAhE;MAAEC,QAAQ;MAAQC,IAAI,GAAG1B,IAAI,CAAC2B,KAAK;MAAEC;IAAqB,CAAC,GAAAJ,IAAA;IAAPP,KAAK,GAAAY,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACrH,oBACEvB,IAAA,CAACO,yBAAyB,EAAAiB,aAAA,CAAAA,aAAA,KAAKd,KAAK;IAAEC,KAAK,EAAEQ,IAAK;IAACM,WAAW,EAAE3B,yBAA0B;IAACuB,UAAU,EAAEA,UAAW;IAAAH,QAAA,eAChHhB,KAAA,CAACC,0BAA0B;MAAAe,QAAA,gBACzBlB,IAAA;QAAM,eAAY,MAAM;QAAAkB,QAAA,eACtBlB,IAAA,CAACN,WAAW,CAACgC,aAAa;UAACP,IAAI,EAAEA,IAAI,KAAK1B,IAAI,CAACmB,MAAM,GAAG,IAAI,GAAG;QAAK,CAAE;MAAC,CACnE,CAAC,eACPZ,IAAA;QAAAkB,QAAA,EAAQA;MAAQ,CAAQ,CAAC;IAAA,CACC;EAAC,EACJ,CAAC;AAEhC,CAAC;AAACF,UAAA,CAAAW,SAAA;EAbAC,QAAQ,EAAAC,GAAA,CAAAC;AAAA;AAeV,eAAed,UAAU","ignoreList":[]}
+{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","BackButtonContentContainer","div","BackButtonContainerStyles","button","props","$size","XSmall","Bold","getColor","theme","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties","_excluded","_objectSpread","onMouseDown","ArrowLineLeft","propTypes","disabled","_pt","bool"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,WAAW,QAAO,WAAW;AAC7C,SAASC,IAAI,QAAkB,UAAU;AACzC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,WAAW;AACrF,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEpD,OAAO,MAAMC,0BAA0B,GAAGb,MAAM,CAACc,GAAG,EAAE;AAEtD,MAAMC,yBAAyB,GAAGf,MAAM,CAACgB,MAAqD;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAK,IAAMA,KAAK,CAACC,KAAK,KAAKf,IAAI,CAACgB,MAAM,GAAGZ,kBAAkB,CAACF,kBAAkB,CAACe,IAAI,EAAEnB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC,GAAGhB,iBAAiB,CAACD,kBAAkB,CAACe,IAAI,EAAEnB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAE;AACjO;AACA;AACA,QAAQT,0BAA0B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQA,0BAA0B;AAClC;AACA;AACA;AACA,QAAQA,0BAA0B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,cAAcA,0BAA0B;AACxC,oBAAoBA,0BAA0B;AAC9C,wBAAwBI,KAAK,IAAIhB,MAAM,CAACoB,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC3E,aAAaL,KAAK,IAAIhB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjE;AACA,cAAcT,0BAA0B;AACxC,oBAAoBA,0BAA0B;AAC9C,MAAMX,WAAW;AACjB;AACA,eAAeW,0BAA0B;AACzC,qBAAqBA,0BAA0B;AAC/C,wBAAwBI,KAAK,IAAIhB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC5E,aAAaL,KAAK,IAAIhB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,iBAAiBT,0BAA0B;AAC3C,aAAaI,KAAK,IAAIhB,MAAM,CAACoB,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AACjE;AACA;AACA,CAAC;AAYD,MAAMC,UAAoD,GAAGC,IAAA,IAAiE;EAAA,IAAhE;MAAEC,QAAQ;MAAQC,IAAI,GAAGvB,IAAI,CAACwB,KAAK;MAAEC;IAAqB,CAAC,GAAAJ,IAAA;IAAPP,KAAK,GAAAY,wBAAA,CAAAL,IAAA,EAAAM,SAAA;EACrH,oBACEpB,IAAA,CAACK,yBAAyB,EAAAgB,aAAA,CAAAA,aAAA,KAAKd,KAAK;IAAEC,KAAK,EAAEQ,IAAK;IAACM,WAAW,EAAExB,yBAA0B;IAACoB,UAAU,EAAEA,UAAW;IAAAH,QAAA,eAChHb,KAAA,CAACC,0BAA0B;MAAAY,QAAA,gBACzBf,IAAA;QAAM,eAAY,MAAM;QAAAe,QAAA,eACtBf,IAAA,CAACN,WAAW,CAAC6B,aAAa;UAACP,IAAI,EAAEA,IAAI,KAAKvB,IAAI,CAACgB,MAAM,GAAG,IAAI,GAAG;QAAK,CAAE;MAAC,CACnE,CAAC,eACPT,IAAA;QAAAe,QAAA,EAAQA;MAAQ,CAAQ,CAAC;IAAA,CACC;EAAC,EACJ,CAAC;AAEhC,CAAC;AAACF,UAAA,CAAAW,SAAA;EAbAC,QAAQ,EAAAC,GAAA,CAAAC;AAAA;AAeV,eAAed,UAAU","ignoreList":[]}

package/dist/Button/Button.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.ButtonTertiaryStyled = exports.ButtonSecondaryStyled = exports.ButtonPrimaryStyled = exports.ButtonPositiveStyled = exports.ButtonCriticalStyled = exports.ButtonContentContainer = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -18,7 +17,6 @@ var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon"],
   _excluded2 = ["loading"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -26,21 +24,241 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 const getBorderRadius = (flatEdge, radius) => {
   switch (flatEdge) {
     case 'left':
-      return "0px ".concat(radius, "px ").concat(radius, "px 0px");
+      return `0px ${radius}px ${radius}px 0px`;
     case 'right':
-      return "".concat(radius, "px 0px 0px ").concat(radius, "px");
+      return `${radius}px 0px 0px ${radius}px`;
     case 'none':
     default:
-      return "".concat(radius, "px");
+      return `${radius}px`;
   }
 };
-const ButtonContentContainer = exports.ButtonContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 64px;\n"])));
-const ButtonBaseStyled = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
-const ButtonPrimaryStyled = exports.ButtonPrimaryStyled = (0, _styledComponents.default)(ButtonBaseStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  padding: 0;\n  margin: 0;\n  position: relative;\n  box-sizing: border-box;\n  min-height: ", ";\n  &.loading-state {\n    cursor: wait;\n  }\n  ", " {\n    ", ";\n\n    background-color: ", ";\n    border-radius: ", ";\n\n    width: ", ";\n    position: relative;\n\n    min-height: ", ";\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: ", ";\n\n    span.icon:not(.loading) {\n      pointer-events: none;\n    }\n\n    span.loading {\n      opacity: 0;\n    }\n\n    .icon {\n      margin: ", ";\n      width: ", ";\n      height: ", ";\n      svg {\n        width: ", " !important;\n        height: ", " !important;\n      }\n    }\n\n    .label {\n      margin: 0 4px;\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      svg {\n        height: ", ";\n        width: ", ";\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n  &:disabled,\n  &.disabled-state {\n    cursor: not-allowed;\n  }\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    pointer-events: none;\n    background-color: ", ";\n    color: ", ";\n  }\n"])), props => props.$size === _types.Size.Large ? '56px' : '48px', ButtonContentContainer, props => props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)) : props.$size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)) : (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme), props => getBorderRadius(props.$flatEdge, 8), props => props.$width, props => props.$size === _types.Size.Large ? '56px' : props.$size === _types.Size.Small ? '32px' : '40px', props => props.$size === _types.Size.Large ? '14px 16px' : props.$size === _types.Size.Small ? '6px 8px' : '8px 12px', props => props.$size === _types.Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === _types.Size.Small ? props.$iconOnly ? '-2px -6px' : '' : '', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px', props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary', props.theme) : _styles.COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_100', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_600', props.theme) : _styles.COLORS.getColor('white', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme), props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? _styles.invertedFocusStyles : _styles.focusStyles, ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_100', props.theme), props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('neutral_300', props.theme));
-const ButtonSecondaryStyled = exports.ButtonSecondaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    color: ", ";\n    background-color: transparent;\n    div svg path {\n      fill: ", ";\n    }\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n    \n    background-color: transparent;\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent;\n    color: ", ";\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : _styles.COLORS.getColor('primary', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme), props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_300', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_300', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_300', props.theme), props => (props === null || props === void 0 ? void 0 : props.$colorTheme) === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_100', props.theme));
-const ButtonTertiaryStyled = exports.ButtonTertiaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n", " {\n    color: ", ";\n    background-color: transparent;\n\n    div svg path {\n      fill: ", ";\n    }\n\n    padding: ", ";\n  }\n\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n    color: ", ";\n\n    div {\n      svg {\n        path {\n          fill: ", ";\n        }\n      }\n    }\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: transparent !important;\n    color: ", ";\n    border-color: transparent !important;\n  }\n"])), ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_500', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_500', props.theme), props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px', ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('primary_20', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_600', props.theme) : _styles.COLORS.getColor('primary_100', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('primary_700', props.theme));
-const ButtonPositiveStyled = exports.ButtonPositiveStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), ButtonContentContainer, props => _styles.COLORS.getColor('correct_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('correct_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('correct_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
-const ButtonCriticalStyled = exports.ButtonCriticalStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    color: white;\n    background-color: ", ";\n  }\n  &:hover > ", ",\n  &.hover-state > ", " {\n    background-color: ", ";\n  }\n  &:active > ", ",\n  &.active-state > ", " {\n    background-color: ", ";\n  }\n\n  &:disabled > ", ",\n  &.disabled-state > ", " {\n    background-color: ", ";\n    color: ", ";    \n  }\n"])), ButtonContentContainer, props => _styles.COLORS.getColor('critical_500', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('critical_700', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('critical_800', props.theme), ButtonContentContainer, ButtonContentContainer, props => _styles.COLORS.getColor('neutral_100', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+const ButtonContentContainer = exports.ButtonContentContainer = _styledComponents.default.div`
+  min-width: 64px;
+`;
+const ButtonBaseStyled = _styledComponents.default.button``;
+const ButtonPrimaryStyled = exports.ButtonPrimaryStyled = (0, _styledComponents.default)(ButtonBaseStyled)`
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  box-sizing: border-box;
+  min-height: ${props => props.$size === _types.Size.Large ? '56px' : '48px'};
+  &.loading-state {
+    cursor: wait;
+  }
+  ${ButtonContentContainer} {
+    ${props => props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)) : props.$size === _types.Size.Small ? (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)) : (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme))};
+
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme)};
+    border-radius: ${props => getBorderRadius(props.$flatEdge, 8)};
+
+    width: ${props => props.$width};
+    position: relative;
+
+    min-height: ${props => props.$size === _types.Size.Large ? '56px' : props.$size === _types.Size.Small ? '32px' : '40px'};
+
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: ${props => props.$size === _types.Size.Large ? '14px 16px' : props.$size === _types.Size.Small ? '6px 8px' : '8px 12px'};
+
+    span.icon:not(.loading) {
+      pointer-events: none;
+    }
+
+    span.loading {
+      opacity: 0;
+    }
+
+    .icon {
+      margin: ${props => props.$size === _types.Size.Medium ? props.$iconOnly ? '-2px -8px' : '' : props.$size === _types.Size.Small ? props.$iconOnly ? '-2px -6px' : '' : ''};
+      width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+      height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+      svg {
+        width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'} !important;
+        height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'} !important;
+      }
+    }
+
+    .label {
+      margin: 0 4px;
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      svg {
+        height: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+        width: ${props => props.$size === _types.Size.Large ? '28px' : props.$size === _types.Size.Small ? '20px' : '24px'};
+        path {
+          fill: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary', props.theme) : _styles.COLORS.getColor('white', props.theme)};
+        }
+      }
+    }
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_100', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_600', props.theme) : _styles.COLORS.getColor('white', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('white', props.theme)};
+  }
+
+  &:focus,
+  &.focus-state {
+    ${props => props.$invertFocus || props.$invertFocus === undefined && props.$colorTheme === 'dark' ? _styles.invertedFocusStyles : _styles.focusStyles}
+  }
+  &:disabled,
+  &.disabled-state {
+    cursor: not-allowed;
+  }
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    pointer-events: none;
+    background-color: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+const ButtonSecondaryStyled = exports.ButtonSecondaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme)};
+    background-color: transparent;
+    div svg path {
+      fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : _styles.COLORS.getColor('primary', props.theme)};
+    }
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary', props.theme)};
+    
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_300', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_300', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+    
+    background-color: transparent;
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: transparent;
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_300', props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('neutral_100', props.theme)};
+  }
+`;
+const ButtonTertiaryStyled = exports.ButtonTertiaryStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)`
+${ButtonContentContainer} {
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_500', props.theme)};
+    background-color: transparent;
+
+    div svg path {
+      fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_500', props.theme)};
+    }
+
+    padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
+  }
+
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_20', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.getColor('primary_20', props.theme)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_700', props.theme)};
+        }
+      }
+    }
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_100', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_600', props.theme) : _styles.COLORS.getColor('primary_100', props.theme)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+
+    div {
+      svg {
+        path {
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.getColor('primary_800', props.theme)};
+        }
+      }
+    }
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: transparent !important;
+    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    border-color: transparent !important;
+  }
+`;
+const ButtonPositiveStyled = exports.ButtonPositiveStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: white;
+    background-color: ${props => _styles.COLORS.getColor('correct_500', props.theme)};
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('correct_700', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('correct_800', props.theme)};
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+  }
+`;
+const ButtonCriticalStyled = exports.ButtonCriticalStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)`
+  ${ButtonContentContainer} {
+    color: white;
+    background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+  }
+  &:hover > ${ButtonContentContainer},
+  &.hover-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('critical_700', props.theme)};
+  }
+  &:active > ${ButtonContentContainer},
+  &.active-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('critical_800', props.theme)};
+  }
+
+  &:disabled > ${ButtonContentContainer},
+  &.disabled-state > ${ButtonContentContainer} {
+    background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};    
+  }
+`;
 /**
  * Button component
  */