@laerdal/life-react-components 6.0.0-dev.2.full → 6.0.0-dev.20.full

package/dist/Button/__tests__/DualButton.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { fireEvent, render } from '../../test-utils';
+import { DualFunctionButton } from '../index';
+import '@testing-library/jest-dom';
+import { Size, SystemIcons } from '../..';
+import 'jest-styled-components';
+
+
+
+
+describe('<DualButton />', () => {
+  it('Renders checkbox button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined },
+      { value: 'Item 2', icon: undefined, disabled: true },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'checkbox',
+          multiSelect: true,
+          pinTopItem: true,
+          actionLabel: 'Custom Action',
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button checkbox test
+      </DualFunctionButton>,
+    );
+    //expect button name defined
+    expect(getByText('Dual button checkbox test')).toBeTruthy();
+    //expect all items displayed
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+
+    //check that checkbox controls are displayed
+    expect(getByText('Item 1').closest('label')).toHaveClass('checkbox-label');
+    expect(getByText('Item 2').closest('label')).toHaveClass('checkbox-label');
+
+    //expect item 2 to be disabled
+    expect(getByText('Item 2').closest('div')).toHaveAttribute('disabled');
+
+    //expect the toggle button to be defined
+    expect(getByTestId('options_toggleBtn')).toBeTruthy();
+
+    //expect select all displayed as pin top item is set as "true"
+    expect(document.body.querySelector('[id*="checkbox_selectall"]')).toBeTruthy();
+  });
+
+  it('Renders normal dual button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined },
+      { value: 'Item 2', icon: undefined },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'normal',
+          multiSelect: true,
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button test
+      </DualFunctionButton>,
+    );
+    //check that the dual button text defined
+    expect(getByText('Dual button test')).toBeTruthy();
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+    //check that none of the items disabled
+    expect(getByText('Item 1').closest('div')).not.toHaveAttribute('disabled');
+    expect(getByText('Item 2').closest('div')).not.toHaveAttribute('disabled');
+    expect(getByTestId('options_toggleBtn')).toBeTruthy();
+
+    //two options available
+    expect(document.body.querySelectorAll('button[tabindex="-1"]')).toHaveLength(2);
+  });
+
+  it('Renders radio-button type dual button', async () => {
+    const dropdownItems = [
+      { value: 'Item 1', icon: undefined, disabled: true },
+      { value: 'Item 2', icon: undefined, disabled: true },
+    ];
+    const { getByText, container, getByTestId } = render(
+      <DualFunctionButton
+        dropdownCustomizationProps={{
+          items: dropdownItems,
+          itemsType: 'radio',
+          multiSelect: true,
+          action: () => {},
+          onValueUpdate: (vals) => {},
+          scrollable: true,
+        }}
+        id="test"
+        size={Size.Small}
+        variant="primary">
+        Dual button test radio
+      </DualFunctionButton>,
+    );
+    //check that the dual button text defined
+    expect(getByText('Dual button test radio')).toBeTruthy();
+    expect(getByText('Item 1')).toBeTruthy();
+    expect(getByText('Item 2')).toBeTruthy();
+
+    //check that radio buttons displayed
+    expect(getByText('Item 1').closest('div')).toHaveClass('radio-button-label');
+    expect(getByText('Item 2').closest('div')).toHaveClass('radio-button-label');
+  });
+});

package/dist/Card/HorizontalCard/HorizontalCard.cjs

@@ -24,7 +24,10 @@ const HorizontalCardContentContainer = exports.HorizontalCardContentContainer =
   flex: 1;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
 `;
 const HorizontalCardContainer = exports.HorizontalCardContainer = _styledComponents.default.div`
@@ -33,7 +36,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
 
   &.outline {
     ${HorizontalCardContentContainer} {
-      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
   }
 
@@ -49,7 +55,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
     &:hover:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
       }
 
@@ -63,7 +72,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
     &:active:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
 
@@ -90,7 +102,10 @@ const HorizontalCardContainer = exports.HorizontalCardContainer = _styledCompone
 
     &.outline {
       ${HorizontalCardContentContainer} {
-        box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_100', props.theme)};
+        box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
       }
     }
   }

package/dist/Card/HorizontalCard/HorizontalCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","props","COLORS","getColor","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_HorizontalCardThumbnail","_HorizontalCardBody","_HorizontalCardActions","_common","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","HorizontalCardContentContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","HorizontalCardContainer","BOXSHADOWS","BOXSHADOW_L1","state","BOXSHADOW_L3","BOXSHADOW_L2","focusStyles","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","React","useState","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","key","jsx","ref","tabIndex","onKeyDown","onClick","onMouseDown","defaultOnMouseDownHandler","children","jsxs","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","instance","_default"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCard.js

@@ -17,7 +17,10 @@ export const HorizontalCardContentContainer = styled.div`
   flex: 1;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   border-radius: 8px;
 `;
 export const HorizontalCardContainer = styled.div`
@@ -26,7 +29,10 @@ export const HorizontalCardContainer = styled.div`
 
   &.outline {
     ${HorizontalCardContentContainer} {
-      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};
+      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
   }
 
@@ -42,7 +48,10 @@ export const HorizontalCardContainer = styled.div`
     &:hover:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
       }
 
@@ -56,7 +65,10 @@ export const HorizontalCardContainer = styled.div`
     &:active:not(.action-within):not(.disabled) {
       &.outline {
         ${HorizontalCardContentContainer} {
-          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
 
@@ -83,7 +95,10 @@ export const HorizontalCardContainer = styled.div`
 
     &.outline {
       ${HorizontalCardContentContainer} {
-        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
       }
     }
   }

package/dist/Card/HorizontalCard/HorizontalCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","jsx","_jsx","jsxs","_jsxs","HorizontalCardContentContainer","div","props","getColor","theme","HorizontalCardContainer","BOXSHADOW_L1","BOXSHADOW_L3","BOXSHADOW_L2","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","ref","tabIndex","onKeyDown","onClick","onMouseDown","children","_objectSpread","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","jsx","_jsx","jsxs","_jsxs","HorizontalCardContentContainer","div","props","generateToken","componentType","defaultVariant","theme","HorizontalCardContainer","BOXSHADOW_L1","state","BOXSHADOW_L3","BOXSHADOW_L2","HorizontalCard","_ref","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","ref","tabIndex","onKeyDown","onClick","onMouseDown","children","_objectSpread","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant:'default' }, props.theme)};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => {\r\n          setActionsRefs(instance ?? []);\r\n        }}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  );\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs

@@ -19,13 +19,22 @@ const HorizontalCardBodyContainer = exports.HorizontalCardBodyContainer = _style
   padding: 16px;
 `;
 const HorizontalCardBodyTitle = exports.HorizontalCardBodyTitle = _styledComponents.default.div`
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   .disabled & {
-    color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const HorizontalCardBodyDescription = exports.HorizontalCardBodyDescription = _styledComponents.default.div`
-  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+  ${props => (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 const HorizontalCardBodyTagsContainer = exports.HorizontalCardBodyTagsContainer = _styledComponents.default.div`
   display: flex;

package/dist/Card/HorizontalCard/HorizontalCardBody.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","HorizontalCardBodyContainer","exports","styled","div","HorizontalCardBodyTitle","props","ComponentMStyling","ComponentTextStyle","Bold","COLORS","getColor","theme","HorizontalCardBodyDescription","ComponentXSStyling","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","jsxs","children","jsx","map","tag","index","Tag","label","variant","icon","LinearProgress","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AAA8B,IAAAK,WAAA,GAAAL,OAAA;AAEvB,MAAMM,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAG;AACjD,IAAIE,KAAK,IAAI,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC9F;AACA,aAAaN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAX,OAAA,CAAAW,6BAAA,GAAGV,yBAAM,CAACC,GAAG;AACvD,IAAIE,KAAK,IAAI,IAAAQ,0BAAkB,EAACN,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACxG,CAAC;AAEM,MAAMI,+BAA+B,GAAAd,OAAA,CAAAc,+BAAA,GAAGb,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMa,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACE,IAAAlB,WAAA,CAAAuB,IAAA,EAACtB,2BAA2B;IAAAuB,QAAA,gBAC1B,IAAAxB,WAAA,CAAAyB,GAAA,EAACpB,uBAAuB;MAAAmB,QAAA,EAAEL;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAI,IAAApB,WAAA,CAAAyB,GAAA,EAACZ,6BAA6B;MAAAW,QAAA,EAAEJ;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJ,IAAAtB,WAAA,CAAAyB,GAAA,EAACT,+BAA+B;MAAAQ,QAAA,EAAEF,IAAI,CAACI,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpD,IAAA5B,WAAA,CAAAyB,GAAA,EAAC1B,IAAA,CAAA8B,GAAG;QAAaC,KAAK,EAAEH,GAAG,CAACG,KAAM;QAACC,OAAO,EAAEJ,GAAG,CAACI,OAAQ;QAACC,IAAI,EAAEL,GAAG,CAACK;MAAK,GAA9DJ,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCP,QAAQ,iBAAI,IAAArB,WAAA,CAAAyB,GAAA,EAAC3B,eAAA,CAAAmC,cAAc;MAACC,KAAK,EAAEb,QAAQ,CAACa,KAAM;MAACC,GAAG,EAAEd,QAAQ,CAACc;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC;AAACjC,OAAA,CAAAe,kBAAA,GAAAA,kBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardBody.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_LinearProgress","_Tag","_jsxRuntime","HorizontalCardBodyContainer","exports","styled","div","HorizontalCardBodyTitle","props","ComponentMStyling","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","state","HorizontalCardBodyDescription","ComponentXSStyling","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","jsxs","children","jsx","map","tag","index","Tag","label","variant","icon","LinearProgress","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,IAAA,GAAAJ,OAAA;AAA8B,IAAAK,WAAA,GAAAL,OAAA;AAEvB,MAAMM,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,uBAAuB,GAAAH,OAAA,CAAAG,uBAAA,GAAGF,yBAAM,CAACC,GAAG;AACjD,IAAIE,KAAK,IAAI,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC;AAChJ;AACA,aAAaR,KAAK,IAAII,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAET,KAAK,CAACQ,KAAK,CAAC;AACrG;AACA,CAAC;AAEM,MAAME,6BAA6B,GAAAd,OAAA,CAAAc,6BAAA,GAAGb,yBAAM,CAACC,GAAG;AACvD,IAAIE,KAAK,IAAI,IAAAW,0BAAkB,EAACT,0BAAkB,CAACU,OAAO,EAAER,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC;AACnJ,CAAC;AAEM,MAAMK,+BAA+B,GAAAjB,OAAA,CAAAiB,+BAAA,GAAGhB,yBAAM,CAACC,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMgB,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACE,IAAArB,WAAA,CAAA0B,IAAA,EAACzB,2BAA2B;IAAA0B,QAAA,gBAC1B,IAAA3B,WAAA,CAAA4B,GAAA,EAACvB,uBAAuB;MAAAsB,QAAA,EAAEL;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAI,IAAAvB,WAAA,CAAA4B,GAAA,EAACZ,6BAA6B;MAAAW,QAAA,EAAEJ;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJ,IAAAzB,WAAA,CAAA4B,GAAA,EAACT,+BAA+B;MAAAQ,QAAA,EAAEF,IAAI,CAACI,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpD,IAAA/B,WAAA,CAAA4B,GAAA,EAAC7B,IAAA,CAAAiC,GAAG;QAAaC,KAAK,EAAEH,GAAG,CAACG,KAAM;QAACC,OAAO,EAAEJ,GAAG,CAACI,OAAQ;QAACC,IAAI,EAAEL,GAAG,CAACK;MAAK,GAA9DJ,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCP,QAAQ,iBAAI,IAAAxB,WAAA,CAAA4B,GAAA,EAAC9B,eAAA,CAAAsC,cAAc;MAACC,KAAK,EAAEb,QAAQ,CAACa,KAAM;MAACC,GAAG,EAAEd,QAAQ,CAACc;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC;AAACpC,OAAA,CAAAkB,kBAAA,GAAAA,kBAAA","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardBody.js

@@ -12,13 +12,22 @@ export const HorizontalCardBodyContainer = styled.div`
   padding: 16px;
 `;
 export const HorizontalCardBodyTitle = styled.div`
-  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   .disabled & {
-    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 export const HorizontalCardBodyDescription = styled.div`
-  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))}
 `;
 export const HorizontalCardBodyTagsContainer = styled.div`
   display: flex;

package/dist/Card/HorizontalCard/HorizontalCardBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","jsx","_jsx","jsxs","_jsxs","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","props","Bold","getColor","theme","HorizontalCardBodyDescription","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","children","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('black', props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,MAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGb,MAAM,CAACY,GAAG;AACjD,IAAIE,KAAK,IAAIZ,iBAAiB,CAACC,kBAAkB,CAACY,IAAI,EAAEd,MAAM,CAACe,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AAC9F;AACA,aAAaH,KAAK,IAAIb,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGlB,MAAM,CAACY,GAAG;AACvD,IAAIE,KAAK,IAAIV,kBAAkB,CAACD,kBAAkB,CAACgB,OAAO,EAAElB,MAAM,CAACe,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACxG,CAAC;AAED,OAAO,MAAMG,+BAA+B,GAAGpB,MAAM,CAACY,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMS,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACEZ,KAAA,CAACC,2BAA2B;IAAAgB,QAAA,gBAC1BnB,IAAA,CAACK,uBAAuB;MAAAc,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAIhB,IAAA,CAACU,6BAA6B;MAAAS,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJlB,IAAA,CAACY,+BAA+B;MAAAO,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpDtB,IAAA,CAACF,GAAG;QAAayB,KAAK,EAAEF,GAAG,CAACE,KAAM;QAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;QAACC,IAAI,EAAEJ,GAAG,CAACI;MAAK,GAA9DH,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAIjB,IAAA,CAACH,cAAc;MAAC6B,KAAK,EAAET,QAAQ,CAACS,KAAM;MAACC,GAAG,EAAEV,QAAQ,CAACU;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardBody.js","names":["React","styled","COLORS","ComponentMStyling","ComponentTextStyle","ComponentXSStyling","LinearProgress","Tag","jsx","_jsx","jsxs","_jsxs","HorizontalCardBodyContainer","div","HorizontalCardBodyTitle","props","Bold","generateToken","componentType","defaultVariant","theme","state","HorizontalCardBodyDescription","Regular","HorizontalCardBodyTagsContainer","HorizontalCardBody","_ref","title","description","progress","tags","children","map","tag","index","label","variant","icon","value","max"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardBody.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\r\nimport {LinearProgress} from '../../LinearProgress';\r\nimport {Tag} from '../../Tag';\r\n\r\nexport const HorizontalCardBodyContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: column;\r\n  gap: 8px;\r\n  padding: 16px;\r\n`;\r\n\r\nexport const HorizontalCardBodyTitle = styled.div`\r\n  ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'default' }, props.theme))}\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const HorizontalCardBodyDescription = styled.div`\r\n  ${props => ComponentXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme))}\r\n`;\r\n\r\nexport const HorizontalCardBodyTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'title' | 'description' | 'progress' | 'tags'>;\r\n\r\nexport const HorizontalCardBody: React.FunctionComponent<Props> = ({\r\n                                                                     title,\r\n                                                                     description,\r\n                                                                     progress,\r\n                                                                     tags,\r\n                                                                   }) => {\r\n\r\n  return (\r\n    <HorizontalCardBodyContainer>\r\n      <HorizontalCardBodyTitle>{title}</HorizontalCardBodyTitle>\r\n      {description && <HorizontalCardBodyDescription>{description}</HorizontalCardBodyDescription>}\r\n      {\r\n        tags &&\r\n        <HorizontalCardBodyTagsContainer>{tags.map((tag, index) => (\r\n          <Tag key={index} label={tag.label} variant={tag.variant} icon={tag.icon}/>))}\r\n        </HorizontalCardBodyTagsContainer>\r\n      }\r\n      {progress && <LinearProgress value={progress.value} max={progress.max}/>}\r\n    </HorizontalCardBodyContainer>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,QAAO,cAAc;AAC9F,SAAQC,cAAc,QAAO,sBAAsB;AACnD,SAAQC,GAAG,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAE9B,OAAO,MAAMC,2BAA2B,GAAGX,MAAM,CAACY,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGb,MAAM,CAACY,GAAG;AACjD,IAAIE,KAAK,IAAIZ,iBAAiB,CAACC,kBAAkB,CAACY,IAAI,EAAEd,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAChJ;AACA,aAAaL,KAAK,IAAIb,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrG;AACA,CAAC;AAED,OAAO,MAAME,6BAA6B,GAAGrB,MAAM,CAACY,GAAG;AACvD,IAAIE,KAAK,IAAIV,kBAAkB,CAACD,kBAAkB,CAACmB,OAAO,EAAErB,MAAM,CAACe,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AACnJ,CAAC;AAED,OAAO,MAAMI,+BAA+B,GAAGvB,MAAM,CAACY,GAAG;AACzD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMY,kBAAkD,GAAGC,IAAA,IAKO;EAAA,IALN;IACEC,KAAK;IACLC,WAAW;IACXC,QAAQ;IACRC;EACF,CAAC,GAAAJ,IAAA;EAElE,oBACEf,KAAA,CAACC,2BAA2B;IAAAmB,QAAA,gBAC1BtB,IAAA,CAACK,uBAAuB;MAAAiB,QAAA,EAAEJ;IAAK,CAA0B,CAAC,EACzDC,WAAW,iBAAInB,IAAA,CAACa,6BAA6B;MAAAS,QAAA,EAAEH;IAAW,CAAgC,CAAC,EAE1FE,IAAI,iBACJrB,IAAA,CAACe,+BAA+B;MAAAO,QAAA,EAAED,IAAI,CAACE,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBACpDzB,IAAA,CAACF,GAAG;QAAa4B,KAAK,EAAEF,GAAG,CAACE,KAAM;QAACC,OAAO,EAAEH,GAAG,CAACG,OAAQ;QAACC,IAAI,EAAEJ,GAAG,CAACI;MAAK,GAA9DH,KAA+D,CAAE;IAAC,CAC7C,CAAC,EAEnCL,QAAQ,iBAAIpB,IAAA,CAACH,cAAc;MAACgC,KAAK,EAAET,QAAQ,CAACS,KAAM;MAACC,GAAG,EAAEV,QAAQ,CAACU;IAAI,CAAC,CAAC;EAAA,CAC7C,CAAC;AAElC,CAAC","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs

@@ -17,10 +17,16 @@ const HorizontalCardIconContainer = exports.HorizontalCardIconContainer = _style
   width: 64px;
   height: 80px;
 
-  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   .disabled & {
-    color: ${props => _styles.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 const HorizontalCardImageContainer = exports.HorizontalCardImageContainer = _styledComponents.default.div`

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","HorizontalCardIconContainer","exports","styled","div","props","COLORS","getColor","theme","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAExC,MAAMK,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzD;AACA;AACA,aAAaH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA,CAAC;AAGM,MAAMC,4BAA4B,GAAAP,OAAA,CAAAO,4BAAA,GAAGN,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMM,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACE,IAAAX,WAAA,CAAAc,IAAA,EAAAd,WAAA,CAAAe,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAb,WAAA,CAAAiB,GAAA,EAAChB,2BAA2B;MAAAe,QAAA,eACzBE,cAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAZ,WAAA,CAAAiB,GAAA,EAACR,4BAA4B;MAAAO,QAAA,eACzB,IAAAhB,WAAA,CAAAiB,GAAA,EAAClB,MAAA,CAAAuB,kBAAkB;QAACC,SAAS,EAAEX,KAAK,CAACY,WAAW,IAAI,EAAG;QAACC,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,EAAEf,KAAK,CAACe,MAAM,IAAI,KAAM;QAACP,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACnB,OAAA,CAAAQ,uBAAA,GAAAA,uBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","HorizontalCardIconContainer","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","state","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAExC,MAAMK,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAC1G;AACA;AACA,aAAaL,KAAK,IAAIC,cAAM,CAACC,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEN,KAAK,CAACK,KAAK,CAAC;AACrG;AACA,CAAC;AAGM,MAAME,4BAA4B,GAAAV,OAAA,CAAAU,4BAAA,GAAGT,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMS,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACE,IAAAd,WAAA,CAAAiB,IAAA,EAAAjB,WAAA,CAAAkB,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAhB,WAAA,CAAAoB,GAAA,EAACnB,2BAA2B;MAAAkB,QAAA,eACzBE,cAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAf,WAAA,CAAAoB,GAAA,EAACR,4BAA4B;MAAAO,QAAA,eACzB,IAAAnB,WAAA,CAAAoB,GAAA,EAACrB,MAAA,CAAA0B,kBAAkB;QAACC,SAAS,EAAEX,KAAK,CAACY,WAAW,IAAI,EAAG;QAACC,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,EAAEf,KAAK,CAACe,MAAM,IAAI,KAAM;QAACP,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACtB,OAAA,CAAAW,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -10,10 +10,16 @@ export const HorizontalCardIconContainer = styled.div`
   width: 64px;
   height: 80px;
 
-  color: ${props => COLORS.getColor('black', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
 
   .disabled & {
-    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
   }
 `;
 export const HorizontalCardImageContainer = styled.div`

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","props","getColor","theme","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACzD;AACA;AACA,aAAaF,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA,CAAC;AAGD,OAAO,MAAMC,4BAA4B,GAAGd,MAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACER,KAAA,CAAAF,SAAA;IAAAa,QAAA,GAEID,IAAI,iBACFd,IAAA,CAACK,2BAA2B;MAAAU,QAAA,eACzBpB,KAAK,CAACqB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHb,IAAA,CAACU,4BAA4B;MAAAK,QAAA,eACzBf,IAAA,CAACF,kBAAkB;QAACqB,SAAS,EAAEN,KAAK,CAACO,WAAW,IAAI,EAAG;QAACC,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,EAAEV,KAAK,CAACU,MAAM,IAAI,KAAM;QAACN,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","props","generateToken","componentType","defaultVariant","theme","state","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'subtle' }, props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC1G;AACA;AACA,aAAaJ,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,KAAK,EAAE;AAAW,CAAC,EAAEL,KAAK,CAACI,KAAK,CAAC;AACrG;AACA,CAAC;AAGD,OAAO,MAAME,4BAA4B,GAAGjB,MAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMQ,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACEX,KAAA,CAAAF,SAAA;IAAAgB,QAAA,GAEID,IAAI,iBACFjB,IAAA,CAACK,2BAA2B;MAAAa,QAAA,eACzBvB,KAAK,CAACwB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHhB,IAAA,CAACa,4BAA4B;MAAAK,QAAA,eACzBlB,IAAA,CAACF,kBAAkB;QAACwB,SAAS,EAAEN,KAAK,CAACO,WAAW,IAAI,EAAG;QAACC,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,EAAEV,KAAK,CAACU,MAAM,IAAI,KAAM;QAACN,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/Card/HorizontalCard/__tests__/HorizontalCard.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import {act, render} from '../../../test-utils';
+import {
+  HorizontalCard,
+  HorizontalCardDropdownButton,
+  HorizontalCardIconButton, HorizontalCardLinearProgression, HorizontalCardTag,
+  HorizontalCardToggleButton
+} from '../index';
+import {SystemIcons} from '../../../icons';
+
+
+
+describe('HorizontalCard', () => {
+  const action = jest.fn();
+
+  const actions: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton)[] = [
+    {componentType: 'icon', action: action, icon: <SystemIcons.Share/>},
+    {componentType: 'icon', action: action, icon: <SystemIcons.OpenNewWindow/>}
+  ]
+
+  const tags: HorizontalCardTag[] = [{label: 'label 1'}, {label: 'label 2'}, {label: 'label 3'}];
+
+  const progress: HorizontalCardLinearProgression = {max: 100, value: 30};
+
+  beforeEach(() => {
+    action.mockReset();
+  });
+
+  it('should render title', async () => {
+    const {queryByText} = render(<HorizontalCard title={'title'}/>)
+
+    expect(queryByText('title')).toBeDefined()
+  });
+
+  it('should render tags', async () => {
+
+    const {queryByText} = render(<HorizontalCard title={'title'} tags={tags}/>)
+
+    expect(queryByText('label 1')).toBeDefined()
+    expect(queryByText('label 2')).toBeDefined()
+    expect(queryByText('label 3')).toBeDefined()
+  });
+
+  it('should render actions', async () => {
+    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
+
+    expect(container.querySelectorAll('button')).toHaveLength(2)
+  });
+
+  it('should call action on component click', async () => {
+    const {container} = render(<HorizontalCard title={'title'} action={action}/>)
+
+    act(() => {
+      // @ts-ignore
+      container.querySelector('.clickable').click();
+    });
+
+    expect(action).toHaveBeenCalled()
+  });
+
+  it('should call action on button press', async () => {
+    const {container} = render(<HorizontalCard title={'title'} actions={actions}/>)
+
+    act(() => {
+      container.querySelectorAll('button').forEach(a => a.click());
+    });
+
+    expect(action).toHaveBeenCalledTimes(2)
+  });
+
+});