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

package/dist/InputFields/Checkbox.js

@@ -20,7 +20,10 @@ export const StyledCheckBox = styled.div`
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
 
-  color: ${props => COLORS.getColor('black', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 
   .pointerTransparent {
     pointer-events: none;
@@ -37,8 +40,21 @@ export const StyledCheckBox = styled.div`
     border-radius: 50%;
 
     svg {
-      color: ${props => props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme)};
+      color: ${props => props.$selected ? COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'selected'
+}, props.theme) : props.$invalid ? COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme) : COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
+    ${props => props.$invalid && `background-color: ${COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)}`}
   }
 
   .checkbox-label {
@@ -47,21 +63,21 @@ export const StyledCheckBox = styled.div`
   }
 
   &.small {
-    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${ComponentSStyling(ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 14px;
     }
   }
 
   &.medium {
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${ComponentMStyling(ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 12px;
     }
   }
 
   &.large {
-    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+    ${ComponentLStyling(ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 12px;
     }
@@ -73,20 +89,32 @@ export const StyledCheckBox = styled.div`
 
   &:not(.disabled):not(.readonly):hover {
     .checkbox-icon {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => COLORS.getColor('primary_700', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }
 
   &:not(.disabled):not(.readonly):active {
     .checkbox-icon {
-      background: ${props => COLORS.getColor('primary_100', props.theme)};
+      background: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
 
       svg {
-        color: ${props => COLORS.getColor('primary_800', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
       }
     }
   }
@@ -103,7 +131,10 @@ export const StyledCheckBox = styled.div`
   &.disabled {
     cursor: not-allowed;
 
-    color: ${props => COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
 
     .checkbox-icon,
     .checkbox-label {
@@ -111,20 +142,29 @@ export const StyledCheckBox = styled.div`
     }
 
     .checkbox-icon {
-      background-color: ${props => COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
 
     .checkbox-icon svg {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &.dropdown-hover:not(.disabled) {
     .checkbox-icon {
-      background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => COLORS.getColor('primary_700', props.theme)};
+        color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","props","margin","getColor","theme","$selected","$invalid","Regular","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledCheckBox","div","props","margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","handleClick","stopPropagation","Medium","cls","_objectSpread","tabIndex","onClick","onKeyDown","onMouseDown","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.generateToken({componentType: 'icon', defaultVariant:'selected'}, props.theme) : \r\n        props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : \r\n        COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, props.theme))};\r\n    }\r\n    ${props => props.$invalid && `background-color: ${COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)}`}\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType: 'icon', state: 'hover'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType: 'icon', state: 'active'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: transparent;\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.generateToken({componentType: 'icon', state: 'disabled'}, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.generateToken({componentType:'bg-surface',state:'hover'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType:'icon',state:'hover'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerField.cjs

@@ -21,7 +21,7 @@ var _DatepickerFieldHeader = require("./DatepickerFieldHeader");
 var _styles = require("../styles");
 var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _styling = require("./styling");
-require("react-datepicker/dist/react-datepicker.css");
+require("../styles/react-datepicker.css");
 var _common = require("../common");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -51,6 +51,38 @@ _dayjs.default.extend(_quarterOfYear.default);
  * Add custom types.
  */
 
+const unselectedHoverColoringText = (0, _styledComponents.css)`
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)} !important;
+    background: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)} !important;  
+`;
+const selectedDefaultColoringText = (0, _styledComponents.css)`
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+    background: ${props => _colors.default.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary'
+}, props.theme)} !important;
+`;
+const todayDefaultColoringText = (0, _styledComponents.css)`
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
+    background: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'selected'
+}, props.theme)};
+`;
+
 /**
  * Add custom styles.
  */
@@ -93,7 +125,10 @@ const DatePickerContainer = _styledComponents.default.div`
       color: transparent;
 
       &:hover {
-        background: ${props => _colors.default.getColor('primary_20', props.theme)};
+        background: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
         &.react-datepicker__navigation--previous::before {
           background-image: url("data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E");
@@ -152,12 +187,21 @@ const DatePickerContainer = _styledComponents.default.div`
     }
 
     .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
-      border-bottom-color: ${props => _colors.default.getColor('neutral_20', props.theme)};
+      border-bottom-color: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
     }
 
     .react-datepicker__header {
-      border-bottom: 1px solid ${props => _colors.default.getColor('neutral_200', props.theme)};
-      background: ${props => _colors.default.getColor('neutral_20', props.theme)};
+      border-bottom: 1px solid ${props => _colors.default.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
+      background: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'subtle'
+}, props.theme)};
       height: ${props => !props.$yearPicker ? '96px' : '54px'};
       padding-top: 0px;
     }
@@ -167,7 +211,10 @@ const DatePickerContainer = _styledComponents.default.div`
       line-height: 48px !important;
       align-items: center;
 
-      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     .react-datepicker__current-month {
@@ -176,7 +223,10 @@ const DatePickerContainer = _styledComponents.default.div`
       align-items: center;
       margin-right: 5px;
 
-      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     .react-datepicker__year {
@@ -212,7 +262,10 @@ const DatePickerContainer = _styledComponents.default.div`
       margin: 0px;
       width: 48px;
 
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
     }
 
     
@@ -227,21 +280,26 @@ const DatePickerContainer = _styledComponents.default.div`
       padding-top: 10px;
       padding-bottom: 10px;
 
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
       &.react-datepicker__year-text--disabled {
         display: none;
       }
 
       &.react-datepicker__day--keyboard-selected {
-        color: ${props => _colors.default.getColor('neutral_600', props.theme)};
+        color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
         background: ${props => _colors.default.getColor('white', props.theme)};
         font-weight: 400;
         border: none;
       }
 
       &:hover {
-        color: ${props => _colors.default.getColor('primary_700', props.theme)};
-        background: ${props => _colors.default.getColor('primary_20', props.theme)};
+        ${unselectedHoverColoringText}
       }
 
       &:focus {
@@ -249,8 +307,7 @@ const DatePickerContainer = _styledComponents.default.div`
       }
 
       &.react-datepicker__year-text--selected {
-        color: ${props => _colors.default.getColor('white', props.theme)} !important;
-        background: ${props => _colors.default.getColor('primary_500', props.theme)} !important;
+        ${selectedDefaultColoringText}
       }
     }
 
@@ -265,24 +322,28 @@ const DatePickerContainer = _styledComponents.default.div`
       width: 40px;
       margin: 4px;
 
-      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.getColor('neutral_600', props.theme))}
+      ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
       &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {
-        color: ${props => _colors.default.getColor('neutral_600', props.theme)};
+        color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
         background: ${props => _colors.default.getColor('white', props.theme)};
         flex-grow: 1;
         font-weight: 400;
         border: none;
       }
 
-      &.react-datepicker__quarter--selected {
-        color: ${props => _colors.default.getColor('white', props.theme)} !important;
+      &.react-datepicker__quarter-text--selected {
+        ${selectedDefaultColoringText}
         flex-grow: 1;
-        background: ${props => _colors.default.getColor('primary_500', props.theme)} !important;
       }
 
       &:hover {
-        color: ${props => _colors.default.getColor('primary_700', props.theme)};
-        background: ${props => _colors.default.getColor('primary_20', props.theme)};
+        ${unselectedHoverColoringText}
       }
 
       &:focus {
@@ -290,18 +351,15 @@ const DatePickerContainer = _styledComponents.default.div`
       }
 
       &.react-datepicker__day--selected {
-        color: ${props => _colors.default.getColor('white', props.theme)} !important;
-        background: ${props => _colors.default.getColor('primary_500', props.theme)} !important;
+        ${selectedDefaultColoringText}
       }
 
       &.react-datepicker__day--today {
         border-radius: 0.3rem;
-        color: ${props => _colors.default.getColor('neutral_700', props.theme)};
-        background: ${props => _colors.default.getColor('neutral_100', props.theme)};
-
+        ${todayDefaultColoringText}
+        
         &:hover {
-          color: ${props => _colors.default.getColor('primary_700', props.theme)};
-          background: ${props => _colors.default.getColor('primary_20', props.theme)};
+          ${unselectedHoverColoringText}
         }
 
         &:focus {
@@ -328,7 +386,10 @@ const StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFie
   padding-left: 48px !important;
   
   &::placeholder {
-    color: ${props => _colors.default.getColor('neutral_500', props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &:focus:not(.focus-visible) {
@@ -336,46 +397,88 @@ const StyledInputFieldStyling = (0, _styledComponents.default)(_styling.InputFie
   }
 
   &:hover {
-    box-shadow: inset 0px 0px 0px 2px ${props => _colors.default.getColor('primary_200', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _colors.default.generateToken({
+  componentType: 'border',
+  state: 'hover'
+}, props.theme)};
 
     ::placeholder {
-      color: ${props => _colors.default.getColor('primary_700', props.theme)};
+      color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
     }
 
     cursor: pointer;
-    background-color: ${props => _colors.default.getColor('primary_20', props.theme)};
-    color: ${props => _colors.default.getColor('primary_700', props.theme)};
+    background-color: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active,
   &.open {
-    box-shadow: inset 0px 0px 0px 2px ${props => _colors.default.getColor('primary_300', props.theme)};
-    background-color: ${props => _colors.default.getColor('primary_100', props.theme)};
-    color: ${props => _colors.default.getColor('primary_800', props.theme)};
+    box-shadow: inset 0px 0px 0px 2px ${props => _colors.default.generateToken({
+  componentType: 'border',
+  state: 'active'
+}, props.theme)};
+    background-color: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
 
     ::placeholder {
-      color: ${props => _colors.default.getColor('primary_800', props.theme)};
+      color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
     }
   }
   
   &:disabled {
-    background-color: ${props => _colors.default.getColor('white', props.theme)};
+    background-color: ${props => _colors.default.generateToken({
+  componentType: 'bg-surface',
+  state: 'disabled'
+}, props.theme)};
   }
 
   & ~ ${IconWrapper}{
-    color: ${props => _colors.default.getColor('neutral_600', props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 
   &:hover ~ ${IconWrapper} {
-    color: ${props => _colors.default.getColor('primary_700', props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
 
   &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {
-    color: ${props => _colors.default.getColor('primary_800', props.theme)};
+    color: ${props => _colors.default.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
 
   &[tabindex='-1'] ~ ${IconWrapper} {
-    color: ${props => _colors.default.getColor('neutral_300', props.theme)};
+    color: ${props => !props.$suppressReadOnlyStyles ? _colors.default.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme) : _colors.default.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const quarterComponentsClassPrefix = 'react-datepicker__quarter-';
@@ -614,7 +717,10 @@ const DatepickerField = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       })
     }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
-        color: _colors.default.getColor('critical_400', theme)
+        color: _colors.default.generateToken({
+          componentType: 'icon',
+          defaultVariant: 'warning'
+        }, theme)
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: validationMessage
       })]