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

package/dist/Button/BackButton.js

@@ -26,7 +26,13 @@ const BackButtonContainerStyles = styled.button`
   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))};
+  ${props => props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))};
   font-feature-settings: 'liga' off;
 
   & > ${BackButtonContentContainer} {
@@ -55,8 +61,14 @@ const BackButtonContainerStyles = styled.button`
 
   &:hover > ${BackButtonContentContainer},
   &.hover-state > ${BackButtonContentContainer} {
-    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
   &:focus > ${BackButtonContentContainer},
   &.focus-state > ${BackButtonContentContainer} {
@@ -64,14 +76,23 @@ const BackButtonContainerStyles = styled.button`
   }
   &:active > ${BackButtonContentContainer},
   &.active-state > ${BackButtonContentContainer} {
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
   &:disabled {
     cursor: not-allowed;
   }
   &:disabled > ${BackButtonContentContainer} {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
     background-color: transparent !important;
   }
 `;

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","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":"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","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","generateToken","componentType","defaultVariant","theme","state","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.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)) \r\n    : ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, 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.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, 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.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, 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":"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","ignoreList":[]}

package/dist/Button/Button.cjs

@@ -9,13 +9,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _LoadingIndicator = require("../LoadingIndicator");
 var _styles = require("../styles");
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon"],
+const _excluded = ["children", "variant", "type", "size", "colorTheme", "invertFocus", "width", "testId", "disabled", "flatEdge", "icon", "iconPosition"],
   _excluded2 = ["loading"];
 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; }
@@ -43,15 +43,29 @@ const ButtonPrimaryStyled = exports.ButtonPrimaryStyled = (0, _styledComponents.
   padding: 0;
   margin: 0;
   position: relative;
-  box-sizing: border-box;
-  min-height: ${props => props.$size === _types.Size.Large ? '56px' : '48px'};
+  box-sizing: border-box;  
   &.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))};
+    ${props => props.$size === _types.Size.Large ? (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, 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.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)) : (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, 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)};
+    background-color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)};
     border-radius: ${props => getBorderRadius(props.$flatEdge, 8)};
 
     width: ${props => props.$width};
@@ -94,20 +108,40 @@ const ButtonPrimaryStyled = exports.ButtonPrimaryStyled = (0, _styledComponents.
         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)};
+          fill: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'icon',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, 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)};
+    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.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_600', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, 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)};
+    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.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'primary'
+}, props.theme)};
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:focus,
@@ -121,46 +155,86 @@ const ButtonPrimaryStyled = exports.ButtonPrimaryStyled = (0, _styledComponents.
   &: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)};
+    background-color: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => props.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_800', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, 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)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: '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)};
+      fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: '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)};
+    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.generateToken({
+  componentType: 'border',
+  defaultVariant: '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)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_200', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, 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.generateToken({
+  componentType: 'border',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, 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)};
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, 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)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_300', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active',
+  defaultVariant: 'primary'
+}, 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.generateToken({
+  componentType: 'border',
+  state: 'active',
+  defaultVariant: 'primary'
+}, 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)};
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover',
+  defaultVariant: 'primary'
+}, props.theme)};
         }
       }
     }
@@ -169,17 +243,29 @@ const ButtonSecondaryStyled = exports.ButtonSecondaryStyled = (0, _styledCompone
   &: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)};
+    color: ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
+    box-shadow: inset 0 0 0 2px ${props => props?.$colorTheme === 'dark' ? _styles.COLORS.getColor('primary_700', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, 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)};
+    color: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, 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)};
+      fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
     }
 
     padding: ${props => props.$size === _types.Size.Large ? '12px 16px' : props.$size === _types.Size.Small ? '4px 8px' : '6px 12px'};
@@ -187,26 +273,44 @@ ${ButtonContentContainer} {
 
   &: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)};
+    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.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, 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.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, 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)};
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_700', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, 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)};
+    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.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, 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.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, 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)};
+          fill: ${props => props.$colorTheme === 'teal' ? _styles.COLORS.getColor('accent1_800', props.theme) : props.$colorTheme === 'dark' ? _styles.COLORS.getColor('white', props.theme) : _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'primary'
+}, props.theme)};
         }
       }
     }
@@ -215,22 +319,26 @@ ${ButtonContentContainer} {
   &:disabled > ${ButtonContentContainer},
   &.disabled-state > ${ButtonContentContainer} {
     background-color: transparent !important;
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, 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)};
+    background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
   }
   &:hover > ${ButtonContentContainer},
   &.hover-state > ${ButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('correct_700', props.theme)};
+    background-color: ${props => _styles.COLORS.getColor('positive_700', props.theme)};
   }
   &:active > ${ButtonContentContainer},
   &.active-state > ${ButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('correct_800', props.theme)};
+    background-color: ${props => _styles.COLORS.getColor('positive_800', props.theme)};
   }
 
   &:disabled > ${ButtonContentContainer},
@@ -242,21 +350,39 @@ const ButtonPositiveStyled = exports.ButtonPositiveStyled = (0, _styledComponent
 const ButtonCriticalStyled = exports.ButtonCriticalStyled = (0, _styledComponents.default)(ButtonPrimaryStyled)`
   ${ButtonContentContainer} {
     color: white;
-    background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &:hover > ${ButtonContentContainer},
   &.hover-state > ${ButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('critical_700', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'hover',
+  defaultVariant: 'critical'
+}, props.theme)};
   }
   &:active > ${ButtonContentContainer},
   &.active-state > ${ButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('critical_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'active',
+  defaultVariant: 'critical'
+}, 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)};    
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-fill',
+  state: 'disabled'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  state: 'disabled'
+}, props.theme)};    
   }
 `;
 /**
@@ -274,7 +400,8 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       testId,
       disabled,
       flatEdge,
-      icon
+      icon,
+      iconPosition = 'left'
     } = _ref,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's filter out properties that we don't need to render.
@@ -282,14 +409,18 @@ const Button = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       loading
     } = props,
     renderProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
-  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+  const theme = (0, _styledComponents.useTheme)();
+  const renderIcon = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: (children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon'),
       children: icon
-    }), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    })
+  });
+  const renderContent = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [icon && iconPosition == 'left' && renderIcon(), children && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
       className: loading ? 'label loading' : 'label',
       children: children
-    }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {})]
+    }), icon && iconPosition == 'right' && renderIcon(), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {})]
   });
   let ButtonStyled = ButtonPrimaryStyled;
   switch (variant) {
@@ -331,7 +462,8 @@ Button.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.string]),
   loading: _propTypes.default.bool,
   testId: _propTypes.default.string,
-  icon: _propTypes.default.node
+  icon: _propTypes.default.node,
+  iconPosition: _propTypes.default.oneOf(['left', 'right'])
 };
 var _default = exports.default = Button;
 //# sourceMappingURL=Button.cjs.map