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

package/dist/List/ListRow.js

@@ -21,11 +21,20 @@ const Row = styled.div`
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-bottom: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   box-sizing: border-box;
 
-  color: ${props => COLORS.getColor('neutral_600', props.theme)};
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
 
 
   cursor: default;
@@ -39,14 +48,26 @@ const Row = styled.div`
   }
 
   &.interactive:hover:not(.in-action):not(.disabled) {
-    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)};
     z-index: ${Z_INDEXES.hover};
   }
 
   &.interactive:active:not(.in-action):not(.disabled) {
-    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)};
     z-index: ${Z_INDEXES.active};
   }
 
@@ -56,7 +77,10 @@ const Row = styled.div`
 
   &.disabled {
     .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {
-      color: ${props => COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
@@ -144,7 +168,10 @@ const Row = styled.div`
   }
 
   .list-item-note {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     word-break: initial;
     ${ComponentXSStyling(ComponentTextStyle.Regular, null)}
   }

package/dist/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Row","div","props","getColor","theme","hover","active","Regular","RightIcon","ListRow","_ref","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties","_excluded","inAction","setInAction","useState","handleKeyDown","e","key","rowClassName","concat","_objectSpread","tabIndex","onMouseDown","onKeyDown","onClick","children","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","type","ArrowDropDown","MoreVertical","shape","propTypes","_pt","oneOf","node","string","isRequired","oneOfType","bool","func"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  box-sizing: border-box;\r\n\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> {\r\n  /** Size of the ListRow. Defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Variant of the ListRow. Defaults to 'normal'. */\r\n  variant?: 'normal' | 'overlay';\r\n  /** Optional. Icon to be shown on the left side of the ListRow. */\r\n  icon?: React.ReactNode;\r\n  /** Required. Main text of the ListRow */\r\n  mainText: string;\r\n  /** Optional. Secondary row shown under MainText  */\r\n  secondaryText?: string;\r\n  /** Optional. Details of the DropdownButton shown on the right side of the ListRow.  */\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  /** Optional. Note to be shown on the right side of the component.  */\r\n  note?: string | React.ReactNode;\r\n  /** Optional. Tooltip of the Note shown on the right side of the component.  */\r\n  noteTooltip?: string;\r\n  /** Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. */\r\n  disabled?: boolean;\r\n  /** Optional. Action to be executed when user clicks the row. */\r\n  action?: () => void;\r\n  /** Optional. Icon of the IconButton to show on the right side of the component */\r\n  rightSideIcon?: React.ReactNode;\r\n  /** Optional. Action to be executed when user clicks on the IconButton on the right */\r\n  rightSideAction?: () => void;\r\n  /** Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n  rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action,\r\n                                                   rightSideIcon,\r\n                                                   rightSideAction,\r\n                                                   rightSideIconDisabled,\r\n                                                   className,\r\n                                                   ...rest\r\n                                                 }: ListRowProps) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`)\r\n    .concat(className ? ` ${className}` : '');\r\n\r\n  return (\r\n    <Row tabIndex={!action || disabled ? -1 : 0}\r\n         className={rowClassName}\r\n         onMouseDown={defaultOnMouseDownHandler}\r\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress\r\n         {...rest}>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              tabIndex={disabled ? -1 : 0}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          type={'icon'}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n      {\r\n        !!rightSideIcon &&\r\n        <RightIcon className={'list-item-actions'}\r\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n          {\r\n            rightSideAction &&\r\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n                        disabled={disabled || rightSideIconDisabled}>\r\n              {rightSideIcon}\r\n            </IconButton>\r\n          }\r\n          {\r\n            !rightSideAction && rightSideIcon\r\n          }\r\n        </RightIcon>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,kBAAkB,EAAEC,WAAW,QAAO,WAAW;AAEjE,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,WAAW;AAElB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,yBAAyB,QAAO,WAAW;AACnD,SAAQC,UAAU,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAErC,MAAMC,GAAG,GAAGtB,MAAM,CAACuB,GAAG;AACtB;AACA;AACA;AACA;AACA,6BAA6BC,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjF;AACA;AACA,WAAWF,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC/D,sBAAsBF,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwBF,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3E,aAAaF,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE,eAAeb,SAAS,CAACc,KAAK;AAC9B;AACA;AACA;AACA,wBAAwBH,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E,aAAaF,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE,eAAeb,SAAS,CAACe,MAAM;AAC/B;AACA;AACA;AACA,MAAMzB,WAAW;AACjB;AACA;AACA;AACA;AACA,eAAeqB,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,iBAAiB,CAACJ,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQxB,iBAAiB,CAACH,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQzB,iBAAiB,CAACF,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMrB,mBAAmB,CAACN,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC3D;AACA;AACA;AACA,aAAaL,KAAK,IAAIvB,MAAM,CAACwB,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA,MAAMnB,kBAAkB,CAACL,kBAAkB,CAAC2B,OAAO,EAAE,IAAI,CAAC;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,SAAS,GAAG9B,MAAM,CAACuB,GAAG;AAC5B;AACA;AACA;AACA;AACA;AACA,CAAC;AA8BA;AAED,MAAMQ,OAA8C,GAAGC,IAAA,IAgBc;EAAA,IAhBb;MA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","ignoreList":[]}
+{"version":3,"file":"ListRow.js","names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Row","div","props","generateToken","componentType","defaultVariant","theme","state","hover","active","Regular","RightIcon","ListRow","_ref","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","_objectWithoutProperties","_excluded","inAction","setInAction","useState","handleKeyDown","e","key","rowClassName","concat","_objectSpread","tabIndex","onMouseDown","onKeyDown","onClick","children","label","Large","Small","XSmall","position","withArrow","onMouseEnter","onMouseLeave","type","ArrowDropDown","MoreVertical","shape","propTypes","_pt","oneOf","node","string","isRequired","oneOfType","bool","func"],"sources":["../../src/List/ListRow.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\n\r\nimport {\r\n  ComponentLStyling,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentXSStyling,\r\n  ComponentXXSStyling\r\n} from '../styles';\r\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\r\nimport {TooltipWrapper} from '../Tooltips';\r\nimport {DropdownButton} from '../Dropdown';\r\nimport {SystemIcons} from '../icons';\r\nimport {Size} from '../types';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport {IconButton} from '../Button';\r\n\r\nconst Row = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-bottom: 1px solid ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'subtle' }, props.theme)};\r\n  box-sizing: border-box;\r\n\r\n  color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n\r\n  cursor: default;\r\n\r\n  &.interactive {\r\n    cursor: pointer;\r\n  }\r\n\r\n  &.interactive.disabled {\r\n    cursor: not-allowed;\r\n  }\r\n\r\n  &.interactive:hover:not(.in-action):not(.disabled) {\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    z-index: ${Z_INDEXES.hover};\r\n  }\r\n\r\n  &.interactive:active:not(.in-action):not(.disabled) {\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    z-index: ${Z_INDEXES.active};\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.disabled {\r\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    min-height: 48px;\r\n    padding: 0 8px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 8px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -8px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    min-height: 56px;\r\n    padding: 0 12px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 12px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    min-height: 64px;\r\n    padding: 0 16px;\r\n\r\n    .list-item-icon {\r\n      margin-right: 16px;\r\n    }\r\n\r\n    .list-item-main-text {\r\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    }\r\n\r\n    .list-item-actions {\r\n      margin-right: -16px;\r\n    }\r\n  }\r\n\r\n  &.overlay {\r\n    padding: 0 4px;\r\n\r\n    .list-item-actions {\r\n      margin-right: -4px;\r\n    }\r\n  }\r\n\r\n  .list-item-icon {\r\n    width: 24px;\r\n    height: 24px;\r\n\r\n    svg {\r\n      width: 24px;\r\n      height: 24px;\r\n    }\r\n  }\r\n\r\n  .list-item-content {\r\n    flex-grow: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n  }\r\n\r\n  .list-item-main-text {\r\n  }\r\n\r\n  .list-item-secondary-text {\r\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note {\r\n    color: ${props => COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)};\r\n    word-break: initial;\r\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\r\n  }\r\n\r\n  .list-item-note.with-tooltip {\r\n    cursor: pointer;\r\n\r\n    > div {\r\n      text-decoration-line: underline;\r\n      text-decoration-style: dashed;\r\n      text-underline-offset: 1px;\r\n      text-decoration-thickness: 1px;\r\n    }\r\n  }\r\n\r\n  .list-item-actions {\r\n    display: flex;\r\n    align-items: center;\r\n\r\n    button div {\r\n      background-color: transparent;\r\n    }\r\n  }\r\n`;\r\n\r\nconst RightIcon = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n`;\r\n\r\n\r\nexport interface ListRowProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> {\r\n  /** Size of the ListRow. Defaults to 'medium'. */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n  /** Variant of the ListRow. Defaults to 'normal'. */\r\n  variant?: 'normal' | 'overlay';\r\n  /** Optional. Icon to be shown on the left side of the ListRow. */\r\n  icon?: React.ReactNode;\r\n  /** Required. Main text of the ListRow */\r\n  mainText: string;\r\n  /** Optional. Secondary row shown under MainText  */\r\n  secondaryText?: string;\r\n  /** Optional. Details of the DropdownButton shown on the right side of the ListRow.  */\r\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\r\n  /** Optional. Note to be shown on the right side of the component.  */\r\n  note?: string | React.ReactNode;\r\n  /** Optional. Tooltip of the Note shown on the right side of the component.  */\r\n  noteTooltip?: string;\r\n  /** Optional. If disabled then styles are greyed out and user can not interact with dropdown or click on the ListRow. */\r\n  disabled?: boolean;\r\n  /** Optional. Action to be executed when user clicks the row. */\r\n  action?: () => void;\r\n  /** Optional. Icon of the IconButton to show on the right side of the component */\r\n  rightSideIcon?: React.ReactNode;\r\n  /** Optional. Action to be executed when user clicks on the IconButton on the right */\r\n  rightSideAction?: () => void;\r\n  /** Optional. If disabled user will not be able to interact with IconButton shown on the right side */\r\n  rightSideIconDisabled?: boolean;\r\n};\r\n\r\nconst ListRow: React.FunctionComponent<ListRowProps> = ({\r\n                                                   size = Size.Medium,\r\n                                                   variant = 'normal',\r\n                                                   icon,\r\n                                                   mainText,\r\n                                                   secondaryText,\r\n                                                   dropdown,\r\n                                                   note,\r\n                                                   noteTooltip,\r\n                                                   disabled = false,\r\n                                                   action,\r\n                                                   rightSideIcon,\r\n                                                   rightSideAction,\r\n                                                   rightSideIconDisabled,\r\n                                                   className,\r\n                                                   ...rest\r\n                                                 }: ListRowProps) => {\r\n\r\n  const [inAction, setInAction] = React.useState<Boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.key === 'Enter') {\r\n      action && action()\r\n    }\r\n  }\r\n\r\n  const rowClassName = (inAction ? 'in-action ' : '')\r\n    .concat(disabled ? 'disabled ' : '')\r\n    .concat(!!action ? 'interactive ' : '')\r\n    .concat('list-item-row ')\r\n    .concat(`${variant} `)\r\n    .concat(`${size}`)\r\n    .concat(className ? ` ${className}` : '');\r\n\r\n  return (\r\n    <Row tabIndex={!action || disabled ? -1 : 0}\r\n         className={rowClassName}\r\n         onMouseDown={defaultOnMouseDownHandler}\r\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\r\n         onClick={e => {\r\n           !disabled && action && action();\r\n         }}\r\n         data-hj-suppress\r\n         {...rest}>\r\n      {\r\n        !!icon &&\r\n        <div className={'list-item-icon'}>{icon}</div>\r\n      }\r\n      <div className={'list-item-content'}>\r\n        <div className={'list-item-main-text'}>{mainText}</div>\r\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\r\n      </div>\r\n      {\r\n        !!note &&\r\n        <>\r\n          {\r\n            !!noteTooltip &&\r\n            <div className={'list-item-note with-tooltip'}>\r\n              <TooltipWrapper label={noteTooltip}\r\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\r\n                              position={'top'}\r\n                              tabIndex={disabled ? -1 : 0}\r\n                              withArrow={true}>\r\n                {note}\r\n              </TooltipWrapper>\r\n            </div>\r\n          }\r\n          {\r\n            !noteTooltip &&\r\n            <div className={'list-item-note'}>\r\n              {note}\r\n            </div>\r\n          }\r\n        </>\r\n      }\r\n      {\r\n        !!dropdown &&\r\n        <div className={'list-item-actions'}\r\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\r\n             onMouseLeave={() => setInAction(false)}>\r\n          <DropdownButton {...dropdown}\r\n                          type={'icon'}\r\n                          disabled={disabled || dropdown.disabled}\r\n                          icon={variant === 'overlay'\r\n                            ? <SystemIcons.ArrowDropDown/>\r\n                            : <SystemIcons.MoreVertical/>}\r\n          />\r\n        </div>\r\n      }\r\n      {\r\n        !!rightSideIcon &&\r\n        <RightIcon className={'list-item-actions'}\r\n                   onMouseEnter={() => rightSideAction && setInAction(!dropdown?.disabled)}\r\n                   onMouseLeave={() => rightSideAction && setInAction(false)}>\r\n          {\r\n            rightSideAction &&\r\n            <IconButton action={rightSideAction} variant='secondary' shape='circular'\r\n                        disabled={disabled || rightSideIconDisabled}>\r\n              {rightSideIcon}\r\n            </IconButton>\r\n          }\r\n          {\r\n            !rightSideAction && rightSideIcon\r\n          }\r\n        </RightIcon>\r\n      }\r\n    </Row>\r\n  );\r\n};\r\n\r\nexport default ListRow;\r\n\r\n"],"mappings":"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","ignoreList":[]}

package/dist/List/__tests__/ListRow.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/LoadingIndicator/LoadingIndicator.cjs

@@ -44,7 +44,10 @@ const LoadingIndicator = _ref => {
     size = _types.Size.Medium
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
-  if (!color) color = _styles.COLORS.getColor('primary', theme);
+  if (!color) color = _styles.COLORS.generateToken({
+    componentType: 'bg-fill',
+    defaultVariant: 'primary'
+  }, theme);
   switch (size) {
     case _types.Size.Medium:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(LoadingWrapper, {

package/dist/LoadingIndicator/LoadingIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_types","_icons","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LoadingWrapper","styled","div","LoadingIndicator","_ref","color","id","size","Size","Medium","theme","useTheme","COLORS","getColor","jsx","children","SystemIcons","LoadingMedium","Small","LoadingSmall","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\r\n    transform-origin: 50% 50%;\r\n    \r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(45deg);\r\n      }\r\n      to {\r\n        transform: rotate(405deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type LoadingIndicatorProps = {\r\n  /** Optional. Id of the loading indicator. */\r\n  id?: string;\r\n  /** Optional. Size of the loading indicator. Defaults to 'Medium'. */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Color of the loading indicator, defaults to 'COLORS.primary'. */\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator: React.FunctionComponent<LoadingIndicatorProps> = ({  color, id, size = Size.Medium }: LoadingIndicatorProps) => {\r\n  const theme = useTheme();\r\n  if(!color)\r\n    color = COLORS.getColor('primary', theme);\r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,uBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAuC,IAAAK,WAAA,GAAAL,OAAA;AAAA,SAAAM,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAEvC,MAAMW,cAAc,GAAGC,yBAAM,CAACC,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAWD,MAAMC,gBAAgE,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAGC,KAAK;IAAEC,EAAE;IAAEC,IAAI,GAAGC,WAAI,CAACC;EAA8B,CAAC,GAAAL,IAAA;EACjI,MAAMM,KAAK,GAAG,IAAAC,0BAAQ,EAAC,CAAC;EACxB,IAAG,CAACN,KAAK,EACPA,KAAK,GAAGO,cAAM,CAACC,QAAQ,CAAC,SAAS,EAAEH,KAAK,CAAC;EAC3C,QAAQH,IAAI;IACV,KAAKC,WAAI,CAACC,MAAM;MACd,oBACE,IAAA9B,WAAA,CAAAmC,GAAA,EAACd,cAAc;QAACM,EAAE,EAAEA,EAAG;QAAAS,QAAA,eACrB,IAAApC,WAAA,CAAAmC,GAAA,EAACpC,MAAA,CAAAsC,WAAW,CAACC,aAAa;UAACZ,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;IAErB,KAAKG,WAAI,CAACU,KAAK;MACb,oBACE,IAAAvC,WAAA,CAAAmC,GAAA,EAACd,cAAc;QAACM,EAAE,EAAEA,EAAG;QAAAS,QAAA,eACrB,IAAApC,WAAA,CAAAmC,GAAA,EAACpC,MAAA,CAAAsC,WAAW,CAACG,YAAY;UAACd,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC5B,CAAC;IAErB;MACE,oBACE,IAAA1B,WAAA,CAAAmC,GAAA,EAACd,cAAc;QAACM,EAAE,EAAEA,EAAG;QAAAS,QAAA,eACrB,IAAApC,WAAA,CAAAmC,GAAA,EAACpC,MAAA,CAAAsC,WAAW,CAACC,aAAa;UAACZ,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;EAEvB;AACF,CAAC;AAACF,gBAAA,CAAAiB,SAAA;EA/BAd,EAAE,EAAAe,UAAA,CAAAnC,OAAA,CAAAoC,MAAA;EAIFjB,KAAK,EAAAgB,UAAA,CAAAnC,OAAA,CAAAoC;AAAA;AAAA,IAAAC,QAAA,GAAAC,OAAA,CAAAtC,OAAA,GA6BQiB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"LoadingIndicator.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_styles","_types","_icons","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LoadingWrapper","styled","div","LoadingIndicator","_ref","color","id","size","Size","Medium","theme","useTheme","COLORS","generateToken","componentType","defaultVariant","jsx","children","SystemIcons","LoadingMedium","Small","LoadingSmall","propTypes","_propTypes","string","_default","exports"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\r\n    transform-origin: 50% 50%;\r\n    \r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(45deg);\r\n      }\r\n      to {\r\n        transform: rotate(405deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type LoadingIndicatorProps = {\r\n  /** Optional. Id of the loading indicator. */\r\n  id?: string;\r\n  /** Optional. Size of the loading indicator. Defaults to 'Medium'. */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Color of the loading indicator, defaults to 'COLORS.primary'. */\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator: React.FunctionComponent<LoadingIndicatorProps> = ({  color, id, size = Size.Medium }: LoadingIndicatorProps) => {\r\n  const theme = useTheme();\r\n  if(!color)\r\n    color = COLORS.generateToken({componentType: 'bg-fill', defaultVariant: 'primary'}, theme);\r\n  \r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LoadingIndicator/LoadingIndicator.js

@@ -35,7 +35,10 @@ const LoadingIndicator = _ref => {
     size = Size.Medium
   } = _ref;
   const theme = useTheme();
-  if (!color) color = COLORS.getColor('primary', theme);
+  if (!color) color = COLORS.generateToken({
+    componentType: 'bg-fill',
+    defaultVariant: 'primary'
+  }, theme);
   switch (size) {
     case Size.Medium:
       return /*#__PURE__*/_jsx(LoadingWrapper, {

package/dist/LoadingIndicator/LoadingIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingIndicator.js","names":["React","styled","useTheme","COLORS","Size","SystemIcons","jsx","_jsx","LoadingWrapper","div","LoadingIndicator","_ref","color","id","size","Medium","theme","getColor","children","LoadingMedium","Small","LoadingSmall","propTypes","_pt","string"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\r\n    transform-origin: 50% 50%;\r\n    \r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(45deg);\r\n      }\r\n      to {\r\n        transform: rotate(405deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type LoadingIndicatorProps = {\r\n  /** Optional. Id of the loading indicator. */\r\n  id?: string;\r\n  /** Optional. Size of the loading indicator. Defaults to 'Medium'. */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Color of the loading indicator, defaults to 'COLORS.primary'. */\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator: React.FunctionComponent<LoadingIndicatorProps> = ({  color, id, size = Size.Medium }: LoadingIndicatorProps) => {\r\n  const theme = useTheme();\r\n  if(!color)\r\n    color = COLORS.getColor('primary', theme);\r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,WAAW,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEvC,MAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAWD,MAAMC,gBAAgE,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAGC,KAAK;IAAEC,EAAE;IAAEC,IAAI,GAAGV,IAAI,CAACW;EAA8B,CAAC,GAAAJ,IAAA;EACjI,MAAMK,KAAK,GAAGd,QAAQ,CAAC,CAAC;EACxB,IAAG,CAACU,KAAK,EACPA,KAAK,GAAGT,MAAM,CAACc,QAAQ,CAAC,SAAS,EAAED,KAAK,CAAC;EAC3C,QAAQF,IAAI;IACV,KAAKV,IAAI,CAACW,MAAM;MACd,oBACER,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAK,QAAA,eACrBX,IAAA,CAACF,WAAW,CAACc,aAAa;UAACP,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;IAErB,KAAKR,IAAI,CAACgB,KAAK;MACb,oBACEb,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAK,QAAA,eACrBX,IAAA,CAACF,WAAW,CAACgB,YAAY;UAACT,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC5B,CAAC;IAErB;MACE,oBACEL,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAK,QAAA,eACrBX,IAAA,CAACF,WAAW,CAACc,aAAa;UAACP,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;EAEvB;AACF,CAAC;AAACF,gBAAA,CAAAY,SAAA;EA/BAT,EAAE,EAAAU,GAAA,CAAAC,MAAA;EAIFZ,KAAK,EAAAW,GAAA,CAAAC;AAAA;AA6BP,eAAed,gBAAgB","ignoreList":[]}
+{"version":3,"file":"LoadingIndicator.js","names":["React","styled","useTheme","COLORS","Size","SystemIcons","jsx","_jsx","LoadingWrapper","div","LoadingIndicator","_ref","color","id","size","Medium","theme","generateToken","componentType","defaultVariant","children","LoadingMedium","Small","LoadingSmall","propTypes","_pt","string"],"sources":["../../src/LoadingIndicator/LoadingIndicator.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS } from '../styles';\r\nimport { Size } from '../types';\r\nimport { SystemIcons } from '../icons';\r\n\r\nconst LoadingWrapper = styled.div`\r\n  height: 100%;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  svg {\r\n    animation-name: spin;\r\n    animation-duration: 1s;\r\n    animation-iteration-count: infinite;\r\n    animation-timing-function: cubic-bezier(.43,.08,.57,.9);\r\n    transform-origin: 50% 50%;\r\n    \r\n    @keyframes spin {\r\n      from {\r\n        transform: rotate(45deg);\r\n      }\r\n      to {\r\n        transform: rotate(405deg);\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport type LoadingIndicatorProps = {\r\n  /** Optional. Id of the loading indicator. */\r\n  id?: string;\r\n  /** Optional. Size of the loading indicator. Defaults to 'Medium'. */\r\n  size?: Size.Small | Size.Medium;\r\n  /** Optional. Color of the loading indicator, defaults to 'COLORS.primary'. */\r\n  color?: string;\r\n};\r\n\r\nconst LoadingIndicator: React.FunctionComponent<LoadingIndicatorProps> = ({  color, id, size = Size.Medium }: LoadingIndicatorProps) => {\r\n  const theme = useTheme();\r\n  if(!color)\r\n    color = COLORS.generateToken({componentType: 'bg-fill', defaultVariant: 'primary'}, theme);\r\n  \r\n  switch (size) {\r\n    case Size.Medium:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    case Size.Small:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingSmall color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n    default:\r\n      return (\r\n        <LoadingWrapper id={id}>\r\n          <SystemIcons.LoadingMedium color={color} />\r\n        </LoadingWrapper>\r\n      );\r\n  }\r\n};\r\n\r\nexport default LoadingIndicator;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SAASC,MAAM,QAAQ,WAAW;AAClC,SAASC,IAAI,QAAQ,UAAU;AAC/B,SAASC,WAAW,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEvC,MAAMC,cAAc,GAAGP,MAAM,CAACQ,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAWD,MAAMC,gBAAgE,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAGC,KAAK;IAAEC,EAAE;IAAEC,IAAI,GAAGV,IAAI,CAACW;EAA8B,CAAC,GAAAJ,IAAA;EACjI,MAAMK,KAAK,GAAGd,QAAQ,CAAC,CAAC;EACxB,IAAG,CAACU,KAAK,EACPA,KAAK,GAAGT,MAAM,CAACc,aAAa,CAAC;IAACC,aAAa,EAAE,SAAS;IAAEC,cAAc,EAAE;EAAS,CAAC,EAAEH,KAAK,CAAC;EAE5F,QAAQF,IAAI;IACV,KAAKV,IAAI,CAACW,MAAM;MACd,oBACER,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAO,QAAA,eACrBb,IAAA,CAACF,WAAW,CAACgB,aAAa;UAACT,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;IAErB,KAAKR,IAAI,CAACkB,KAAK;MACb,oBACEf,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAO,QAAA,eACrBb,IAAA,CAACF,WAAW,CAACkB,YAAY;UAACX,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC5B,CAAC;IAErB;MACE,oBACEL,IAAA,CAACC,cAAc;QAACK,EAAE,EAAEA,EAAG;QAAAO,QAAA,eACrBb,IAAA,CAACF,WAAW,CAACgB,aAAa;UAACT,KAAK,EAAEA;QAAM,CAAE;MAAC,CAC7B,CAAC;EAEvB;AACF,CAAC;AAACF,gBAAA,CAAAc,SAAA;EAhCAX,EAAE,EAAAY,GAAA,CAAAC,MAAA;EAIFd,KAAK,EAAAa,GAAA,CAAAC;AAAA;AA8BP,eAAehB,gBAAgB","ignoreList":[]}

package/dist/LoadingPage/GlobalLoadingPage.cjs

@@ -42,7 +42,10 @@ const LogoAndMessage = _styledComponents.default.div`
     width: 320px;
     text-align: center;
     
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const LoadingIndicatorContainer = _styledComponents.default.div`

package/dist/LoadingPage/GlobalLoadingPage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoadingPage.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_assets","_LoadingIndicator","_styles","_typography","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LoadingMain","styled","main","props","COLORS","getColor","theme","Header","div","LogoAndMessage","ComponentMStyling","ComponentTextStyle","Regular","LoadingIndicatorContainer","LoadingPage","_ref","optionalMessage","includeHeader","jsxs","children","jsx","LaerdalLoadingLogo","propTypes","_propTypes","string","bool","_default","exports"],"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div`\r\n  height: 64px;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport interface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"GlobalLoadingPage.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_assets","_LoadingIndicator","_styles","_typography","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LoadingMain","styled","main","props","COLORS","getColor","theme","Header","div","LogoAndMessage","ComponentMStyling","ComponentTextStyle","Regular","generateToken","componentType","defaultVariant","LoadingIndicatorContainer","LoadingPage","_ref","optionalMessage","includeHeader","jsxs","children","jsx","LaerdalLoadingLogo","propTypes","_propTypes","string","bool","_default","exports"],"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div`\r\n  height: 64px;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport interface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/LoadingPage/GlobalLoadingPage.js

@@ -33,7 +33,10 @@ const LogoAndMessage = styled.div`
     width: 320px;
     text-align: center;
     
-    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
   }
 `;
 const LoadingIndicatorContainer = styled.div`

package/dist/LoadingPage/GlobalLoadingPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalLoadingPage.js","names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","jsx","_jsx","jsxs","_jsxs","LoadingMain","main","props","getColor","theme","Header","div","LogoAndMessage","Regular","LoadingIndicatorContainer","LoadingPage","_ref","optionalMessage","includeHeader","children","propTypes","_pt","string","bool"],"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div`\r\n  height: 64px;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport interface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,kBAAkB,QAAO,WAAW;AAE5C,OAAOC,gBAAgB,MAAM,sCAAsC;AACnE,SAAQC,MAAM,EAAEC,kBAAkB,QAAO,WAAW;AACpD,SAAQC,iBAAiB,QAAO,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,MAAMC,WAAW,GAAGV,MAAM,CAACW,IAAI;AAC/B;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACzE;AACA,CAAC;AAED,MAAMC,MAAM,GAAGf,MAAM,CAACgB,GAAG;AACzB;AACA,sBAAsBJ,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACpE,6BAA6BF,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjF,CAAC;AAED,MAAMG,cAAc,GAAGjB,MAAM,CAACgB,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,KAAK,IAAIP,iBAAiB,CAACD,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAAC;AACzG;AACA,CAAC;AAED,MAAMK,yBAAyB,GAAGnB,MAAM,CAACgB,GAAG;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMI,WAAiD,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,eAAe;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxG,oBACEZ,KAAA,CAACC,WAAW;IAAC,eAAY,iBAAiB;IAAAc,QAAA,GACvCD,aAAa,iBAAIhB,IAAA,CAACQ,MAAM,IAAE,CAAC,eAC5BR,IAAA,CAACY,yBAAyB;MAAAK,QAAA,eACxBjB,IAAA,CAACL,gBAAgB,IAAE;IAAC,CACK,CAAC,eAC5BO,KAAA,CAACQ,cAAc;MAAC,eAAY,2BAA2B;MAAAO,QAAA,GACpDF,eAAe,iBAAIf,IAAA;QAAAiB,QAAA,EAAOF;MAAe,CAAO,CAAC,eAClDf,IAAA,CAACN,kBAAkB,IAAE,CAAC;IAAA,CACR,CAAC;EAAA,CACN,CAAC;AAElB,CAAC;AAACmB,WAAA,CAAAK,SAAA;EAjBAH,eAAe,EAAAI,GAAA,CAAAC,MAAA;EACfJ,aAAa,EAAAG,GAAA,CAAAE;AAAA;AAkBf,eAAeR,WAAW","ignoreList":[]}
+{"version":3,"file":"GlobalLoadingPage.js","names":["React","styled","LaerdalLoadingLogo","LoadingIndicator","COLORS","ComponentTextStyle","ComponentMStyling","jsx","_jsx","jsxs","_jsxs","LoadingMain","main","props","getColor","theme","Header","div","LogoAndMessage","Regular","generateToken","componentType","defaultVariant","LoadingIndicatorContainer","LoadingPage","_ref","optionalMessage","includeHeader","children","propTypes","_pt","string","bool"],"sources":["../../src/LoadingPage/GlobalLoadingPage.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {LaerdalLoadingLogo} from '../assets';\r\n\r\nimport LoadingIndicator from '../LoadingIndicator/LoadingIndicator';\r\nimport {COLORS, ComponentTextStyle} from '../styles';\r\nimport {ComponentMStyling} from '../styles/typography';\r\n\r\nconst LoadingMain = styled.main`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n  height: 100%;\r\n`;\r\n\r\nconst Header = styled.div`\r\n  height: 64px;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n`;\r\n\r\nconst LogoAndMessage = styled.div`\r\n  position: absolute;\r\n  display: flex;\r\n  flex-direction: column;\r\n  bottom: 36px;\r\n  left: 50%;\r\n  transform: translate(-50%);\r\n  align-items: center;\r\n\r\n  span {\r\n    margin-bottom: 40px;\r\n    font-weight: normal;\r\n    width: 320px;\r\n    text-align: center;\r\n    \r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nconst LoadingIndicatorContainer = styled.div`\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  transform: translate(-50%, -50%);\r\n`;\r\n\r\nexport interface LoaderProps {\r\n  optionalMessage?: string;\r\n  includeHeader?: boolean;\r\n}\r\n\r\nconst LoadingPage: React.FunctionComponent<LoaderProps> = ({ optionalMessage, includeHeader }: LoaderProps) => {\r\n  return (\r\n    <LoadingMain data-testid=\"TestLoadingMain\">\r\n      {includeHeader && <Header />}\r\n      <LoadingIndicatorContainer>\r\n        <LoadingIndicator />\r\n      </LoadingIndicatorContainer>\r\n      <LogoAndMessage data-testid=\"TestLoadingLogoAndMessage\">\r\n        {optionalMessage && <span>{optionalMessage}</span>}\r\n        <LaerdalLoadingLogo />\r\n      </LogoAndMessage>\r\n    </LoadingMain>\r\n  );\r\n};\r\n\r\nexport default LoadingPage;\r\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,kBAAkB,QAAO,WAAW;AAE5C,OAAOC,gBAAgB,MAAM,sCAAsC;AACnE,SAAQC,MAAM,EAAEC,kBAAkB,QAAO,WAAW;AACpD,SAAQC,iBAAiB,QAAO,sBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEvD,MAAMC,WAAW,GAAGV,MAAM,CAACW,IAAI;AAC/B;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACzE;AACA,CAAC;AAED,MAAMC,MAAM,GAAGf,MAAM,CAACgB,GAAG;AACzB;AACA,sBAAsBJ,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACpE,6BAA6BF,KAAK,IAAIT,MAAM,CAACU,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjF,CAAC;AAED,MAAMG,cAAc,GAAGjB,MAAM,CAACgB,GAAG;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMJ,KAAK,IAAIP,iBAAiB,CAACD,kBAAkB,CAACc,OAAO,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAET,KAAK,CAACE,KAAK,CAAC,CAAC;AAC/I;AACA,CAAC;AAED,MAAMQ,yBAAyB,GAAGtB,MAAM,CAACgB,GAAG;AAC5C;AACA;AACA;AACA;AACA,CAAC;AAOD,MAAMO,WAAiD,GAAGC,IAAA,IAAqD;EAAA,IAApD;IAAEC,eAAe;IAAEC;EAA2B,CAAC,GAAAF,IAAA;EACxG,oBACEf,KAAA,CAACC,WAAW;IAAC,eAAY,iBAAiB;IAAAiB,QAAA,GACvCD,aAAa,iBAAInB,IAAA,CAACQ,MAAM,IAAE,CAAC,eAC5BR,IAAA,CAACe,yBAAyB;MAAAK,QAAA,eACxBpB,IAAA,CAACL,gBAAgB,IAAE;IAAC,CACK,CAAC,eAC5BO,KAAA,CAACQ,cAAc;MAAC,eAAY,2BAA2B;MAAAU,QAAA,GACpDF,eAAe,iBAAIlB,IAAA;QAAAoB,QAAA,EAAOF;MAAe,CAAO,CAAC,eAClDlB,IAAA,CAACN,kBAAkB,IAAE,CAAC;IAAA,CACR,CAAC;EAAA,CACN,CAAC;AAElB,CAAC;AAACsB,WAAA,CAAAK,SAAA;EAjBAH,eAAe,EAAAI,GAAA,CAAAC,MAAA;EACfJ,aAAa,EAAAG,GAAA,CAAAE;AAAA;AAkBf,eAAeR,WAAW","ignoreList":[]}

package/dist/MenuItem/MenuItem.cjs

@@ -64,9 +64,18 @@ const ItemContent = exports.ItemContent = _styledComponents.default.div`
 `;
 const DropdownButtonCSS = size => {
   return (0, _styledComponents.css)`
-    ${props => size == _types.Size.Small && (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
-    ${props => size == _types.Size.Medium && (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
-    ${props => size == _types.Size.Large && (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => size == _types.Size.Small && (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'subtle'
+  }, props.theme))}
+    ${props => size == _types.Size.Medium && (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'subtle'
+  }, props.theme))}
+    ${props => size == _types.Size.Large && (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'subtle'
+  }, props.theme))}
 
     position: relative;
     text-decoration: none;
@@ -74,7 +83,10 @@ const DropdownButtonCSS = size => {
     flex-direction: row;
     align-items: center;
     min-height: ${size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px'};
-    background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'default'
+  }, props.theme)};
     border: none;
     cursor: pointer;
     background: none;
@@ -86,15 +98,30 @@ const DropdownButtonCSS = size => {
       line-height: 48px;
     }
 
-    ${ItemLabel}, ${ItemIcon} {
-      color: ${props => _styles.COLORS.getColor('neutral_600', props.theme)};
+    ${ItemLabel} {
+      color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'subtle'
+  }, props.theme)};
+    }
+    ${ItemIcon} {
+      color: ${props => _styles.COLORS.generateToken({
+    componentType: 'icon',
+    defaultVariant: 'subtle'
+  }, props.theme)};
     }
 
     &:hover:not(.active):not(:disabled):not(.disabled-state),
     &.hover-state:not(.active):not(:disabled):not(.disabled-state) {
-      background: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    state: 'hover'
+  }, props.theme)};
       ${ItemLabel}, ${ItemIcon} {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'hover'
+  }, props.theme)};
       }
     }
 
@@ -103,17 +130,29 @@ const DropdownButtonCSS = size => {
     }
 
     &:active:not(.active):not(:disabled):not(.disabled-state), &.active-state {
-      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    state: 'active'
+  }, props.theme)};
       ${ItemLabel}, ${ItemIcon} {
-        color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'active'
+  }, props.theme)};
       }
     }
 
     &.active {
-      background: ${props => _styles.COLORS.getColor('neutral_20', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    defaultVariant: 'selected'
+  }, props.theme)};
 
       ${ItemLabel}, ${ItemIcon} {
-        color: ${props => _styles.COLORS.getColor('neutral_800', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'default'
+  }, props.theme)};
       }
 
       &::after {
@@ -123,7 +162,10 @@ const DropdownButtonCSS = size => {
         top: ${size == _types.Size.Large ? '8px' : size == _types.Size.Medium ? '6px' : '4px'};
         bottom: ${size == _types.Size.Large ? '8px' : size == _types.Size.Medium ? '6px' : '4px'};
         left: 4px;
-        background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
+        background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'border',
+    defaultVariant: 'selected'
+  }, props.theme)};
 
         border-radius: 4px;
       }
@@ -135,43 +177,64 @@ const DropdownButtonCSS = size => {
       cursor: not-allowed;
       
       ${ItemIcon}, ${ItemLabel} {
-        color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    defaultVariant: 'subtle'
+  }, props.theme)};
       }
     }
 
     &.active:hover:not(:disabled):not(.locked), &.active-hover-state {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    state: 'hover'
+  }, props.theme)};
 
       ${ItemIcon}, ${ItemLabel} {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'hover'
+  }, props.theme)};
       }      
 
       &::after {
-        background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'border',
+    state: 'hover'
+  }, props.theme)};
       }
     }
 
     &.active:active:not(:disabled):not(.locked), &.active-active-state {
-      background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    state: 'active'
+  }, props.theme)};
 
       ${ItemIcon}, ${ItemLabel} {
-        color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'active'
+  }, props.theme)};
       }
 
       &::after {
-        background-color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+        background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'border',
+    state: 'active'
+  }, props.theme)};
       }
     }
 
     &.active.locked {
       &::after {
-        background-color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+        background: none;
       } 
     }
 
     &.active:disabled:not(.locked) {
       &::after {
-        background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+        background: none;
       }     
     }
 
@@ -180,13 +243,22 @@ const DropdownButtonCSS = size => {
       cursor: not-allowed;
       
       ${ItemIcon}, ${ItemLabel} {
-        color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+        color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'disabled'
+  }, props.theme)} !important;
       }
     }
 
     &.dropdown-hover:not(:disabled) {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-      color: ${props => _styles.COLORS.getColor('primary_600', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+    componentType: 'bg-surface',
+    state: 'hover'
+  }, props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+    componentType: 'text',
+    state: 'hover'
+  }, props.theme)};
     }
   `;
 };
@@ -234,7 +306,10 @@ const MenuItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           })]
         }), item.locked && /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemIconRight, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.LockedOn, {
-            color: _styles.COLORS.getColor('neutral_400', theme),
+            color: _styles.COLORS.generateToken({
+              componentType: 'icon',
+              defaultVariant: 'subtle'
+            }, theme),
             className: "extraMargin",
             size: "24px"
           })