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

package/dist/Card/VerticalCard/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,kBAAA,GAAAF,sBAAA,CAAAF,OAAA;AACA,IAAAK,kBAAA,GAAAH,sBAAA,CAAAF,OAAA;AACA,IAAAM,MAAA,GAAAN,OAAA;AAAwG,IAAAO,WAAA,GAAAP,OAAA;AAAA,MAAAQ,SAAA;AAAA,SAAAC,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,SAAAX,wBAAAW,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;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,CAAA1B,OAAA,EAAAL,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAEjG,MAAMkC,2BAA2B,GAAAC,OAAA,CAAAD,2BAAA,GAAGE,yBAAM,CAACC,GAAG;AACrD,sBAAsBC,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBC,iBAAU,CAACC,YAAY;AACzC;AACA;AACA;AACA,wBAAwBL,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC5E;AACA,CAAC;AAGM,MAAMG,mBAAmB,GAAAT,OAAA,CAAAS,mBAAA,GAAGR,yBAAM,CAACC,GAAG;AAC7C;AACA,MAAMQ,kBAAW;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQX,2BAA2B;AACnC;AACA,8BAA8BI,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjF;AACA;AACA;AACA,8BAA8BH,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA,QAAQP,2BAA2B;AACnC;AACA,wBAAwBQ,iBAAU,CAACI,YAAY;AAC/C;AACA;AACA;AACA,wBAAwBJ,iBAAU,CAACK,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMb,2BAA2B;AACjC,0BAA0BI,KAAK,IAAIC,aAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E;AACA;AACA,CAAC;AAoBD,MAAMO,IAAwC,GAAGC,IAAA,IAUkB;EAAA,IAVjB;MACEC,aAAa;MACbC,eAAe;MACfC,kBAAkB;MAClBC,kBAAkB;MAClBC,QAAQ;MACRC,OAAO,GAAG,UAAU;MACpBC,SAAS;MACTC,QAAQ,GAAG;IAEF,CAAC,GAAAR,IAAA;IADPS,IAAI,OAAAC,yBAAA,CAAAtD,OAAA,EAAA4C,IAAA,EAAAnD,SAAA;EAIzD,MAAM,CAAC8D,WAAW,EAAEC,cAAc,CAAC,GAAGzE,KAAK,CAAC0E,QAAQ,CAAwC,EAAE,CAAC;EAC/F,MAAMC,WAAW,GAAI3E,KAAK,CAAC4E,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAMC,YAAY,GAAG7E,KAAK,CAAC4E,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAE,sBAAe,EAACD,YAAY,EAAE,CAAC,GAAGL,WAAW,EAAEG,WAAW,CAAC,CAAC;EAE5D,MAAMI,GAAG,GAAG,GAAG,CAAC,CAACjB,aAAa,GAAG,aAAa,GAAG,EAAE,IAAII,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,OAAO,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEjH,oBACE,IAAA3D,WAAA,CAAAuE,GAAA,EAACxB,mBAAmB,EAAAjB,aAAA,CAAAA,aAAA;IAAC0C,GAAG,EAAEJ,YAAa;IAC9BT,SAAS,EAAEW,GAAI;IACfG,QAAQ,EAAE,CAAC,CAACpB,aAAa,IAAI,CAACI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAChDiB,WAAW,EAAEC,gCAA0B;IACvCC,SAAS,EAAE/D,CAAC,IAAIA,CAAC,CAACgE,GAAG,KAAK,OAAO,IAAI,CAACpB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IACnFyB,OAAO,EAAE3E,CAAC,IAAI,CAACsD,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IAC5D,eAAa;EAAe,GACxBQ,IAAI;IAAAkB,QAAA,eACf,IAAA/E,WAAA,CAAAgF,IAAA,EAAC3C,2BAA2B;MAAC4C,KAAK,EAAE;QAACrB,QAAQ,EAAEA;MAAQ,CAAE;MAAAmB,QAAA,GAErDzB,eAAe,iBACf,IAAAtD,WAAA,CAAAuE,GAAA,EAAC3E,eAAA,CAAAY,OAAc,EAAAsB,aAAA,CAAAA,aAAA;QAAC0C,GAAG,EAAEN;MAAY,GAC3BZ,eAAe;QAAEG,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG5CF,kBAAkB,iBAClB,IAAAvD,WAAA,CAAAuE,GAAA,EAAC1E,kBAAA,CAAAW,OAAiB,EAAAsB,aAAA,CAAAA,aAAA,KAAKyB,kBAAkB;QAAEE,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAGhED,kBAAkB,iBAClB,IAAAxD,WAAA,CAAAuE,GAAA,EAACzE,kBAAA,CAAAU,OAAiB,EAAAsB,aAAA,CAAAA,aAAA;QAAC0C,GAAG,EAAEU,QAAQ,IAAI;UAClClB,cAAc,CAACkB,QAAQ,IAAI,EAAE,CAAC;QAChC;MAAE,GACqB1B,kBAAkB;QAAEC,QAAQ,EAAEA;MAAS,EAAC,CAAC;IAAA,CAEvC;EAAC,EACX,CAAC;AAE1B,CAAC;AAACN,IAAA,CAAAgC,SAAA;EAjEA9B,aAAa,EAAA+B,UAAA,CAAA5E,OAAA,CAAA6E,IAAA;EAEb5B,QAAQ,EAAA2B,UAAA,CAAA5E,OAAA,CAAA8E,IAAA;EAER1B,QAAQ,EAAAwB,UAAA,CAAA5E,OAAA,CAAA+E,SAAA,EAAAH,UAAA,CAAA5E,OAAA,CAAAgF,MAAA,EAAAJ,UAAA,CAAA5E,OAAA,CAAAiF,MAAA;EAQR/B,OAAO,EAAA0B,UAAA,CAAA5E,OAAA,CAAAkF,KAAA,EAAG,SAAS,EAAG,UAAU;AAAA;AAAA,IAAAC,QAAA,GAAArD,OAAA,CAAA9B,OAAA,GAuDnB2C,IAAI","ignoreList":[]}
+{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/Card.js

@@ -12,7 +12,10 @@ import CardBottomSection from './CardBottomSection';
 import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const CardTopLevelContainerStyles = styled.div`
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   min-width: 240px;
   overflow: hidden;
 
@@ -28,7 +31,10 @@ export const CardTopLevelContainerStyles = styled.div`
   }
 
   .outline & {
-    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+    border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const CardContainerStyles = styled.div`
@@ -42,11 +48,17 @@ export const CardContainerStyles = styled.div`
     &.outline:not(.action-within) {
       ${CardTopLevelContainerStyles} {
         &:hover {
-          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
         }
 
         &:active, &.active-state {
-          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+          background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
         }
       }
     }
@@ -67,7 +79,10 @@ export const CardContainerStyles = styled.div`
   &.disabled {
     cursor: not-allowed;
     ${CardTopLevelContainerStyles}{
-      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+      border: 1px solid ${props => COLORS.generateToken({
+  componentType: 'border',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 `;

package/dist/Card/VerticalCard/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","props","getColor","theme","BOXSHADOW_L1","CardContainerStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,cAAc,MAA6B,kBAAkB;AACpE,OAAOC,iBAAiB,MAAgC,qBAAqB;AAC7E,OAAOC,iBAAiB,MAAgC,qBAAqB;AAC7E,SAAQC,UAAU,EAAEC,MAAM,EAAEC,yBAAyB,EAAEC,WAAW,EAAEC,eAAe,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExG,OAAO,MAAMC,2BAA2B,GAAGb,MAAM,CAACc,GAAG;AACrD,sBAAsBC,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBb,UAAU,CAACc,YAAY;AACzC;AACA;AACA;AACA,wBAAwBH,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC5E;AACA,CAAC;AAGD,OAAO,MAAME,mBAAmB,GAAGnB,MAAM,CAACc,GAAG;AAC7C;AACA,MAAMP,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQM,2BAA2B;AACnC;AACA,8BAA8BE,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,YAAY,EAAED,KAAK,CAACE,KAAK,CAAC;AACjF;AACA;AACA;AACA,8BAA8BF,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA,QAAQJ,2BAA2B;AACnC;AACA,wBAAwBT,UAAU,CAACgB,YAAY;AAC/C;AACA;AACA;AACA,wBAAwBhB,UAAU,CAACiB,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMR,2BAA2B;AACjC,0BAA0BE,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAC9E;AACA;AACA,CAAC;AAoBD,MAAMK,IAAwC,GAAGC,IAAA,IAUkB;EAAA,IAVjB;MACEC,aAAa;MACbC,eAAe;MACfC,kBAAkB;MAClBC,kBAAkB;MAClBC,QAAQ;MACRC,OAAO,GAAG,UAAU;MACpBC,SAAS;MACTC,QAAQ,GAAG;IAEF,CAAC,GAAAR,IAAA;IADPS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIzD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGrC,KAAK,CAACsC,QAAQ,CAAwC,EAAE,CAAC;EAC/F,MAAMC,WAAW,GAAIvC,KAAK,CAACwC,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAMC,YAAY,GAAGzC,KAAK,CAACwC,MAAM,CAAiB,IAAI,CAAC;EAEvD/B,eAAe,CAACgC,YAAY,EAAE,CAAC,GAAGL,WAAW,EAAEG,WAAW,CAAC,CAAC;EAE5D,MAAMG,GAAG,GAAG,GAAG,CAAC,CAACjB,aAAa,GAAG,aAAa,GAAG,EAAE,IAAII,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,OAAO,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEjH,oBACEpB,IAAA,CAACS,mBAAmB,EAAAuB,aAAA,CAAAA,aAAA;IAACC,GAAG,EAAEH,YAAa;IAC9BV,SAAS,EAAEW,GAAI;IACfG,QAAQ,EAAE,CAAC,CAACpB,aAAa,IAAI,CAACI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAChDiB,WAAW,EAAEvC,yBAA0B;IACvCwC,SAAS,EAAEC,CAAC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAI,CAACpB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IACnFyB,OAAO,EAAEC,CAAC,IAAI,CAACtB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IAC5D,eAAa;EAAe,GACxBQ,IAAI;IAAAmB,QAAA,eACfvC,KAAA,CAACC,2BAA2B;MAACuC,KAAK,EAAE;QAACrB,QAAQ,EAAEA;MAAQ,CAAE;MAAAoB,QAAA,GAErD1B,eAAe,iBACff,IAAA,CAACT,cAAc,EAAAyC,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEL;MAAY,GAC3Bb,eAAe;QAAEG,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG5CF,kBAAkB,iBAClBhB,IAAA,CAACR,iBAAiB,EAAAwC,aAAA,CAAAA,aAAA,KAAKhB,kBAAkB;QAAEE,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAGhED,kBAAkB,iBAClBjB,IAAA,CAACP,iBAAiB,EAAAuC,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEU,QAAQ,IAAI;UAClCjB,cAAc,CAACiB,QAAQ,IAAI,EAAE,CAAC;QAChC;MAAE,GACqB1B,kBAAkB;QAAEC,QAAQ,EAAEA;MAAS,EAAC,CAAC;IAAA,CAEvC;EAAC,EACX,CAAC;AAE1B,CAAC;AAACN,IAAA,CAAAgC,SAAA;EAjEA9B,aAAa,EAAA+B,GAAA,CAAAC,IAAA;EAEb5B,QAAQ,EAAA2B,GAAA,CAAAE,IAAA;EAER1B,QAAQ,EAAAwB,GAAA,CAAAG,SAAA,EAAAH,GAAA,CAAAI,MAAA,EAAAJ,GAAA,CAAAK,MAAA;EAQR/B,OAAO,EAAA0B,GAAA,CAAAM,KAAA,EAAG,SAAS,EAAG,UAAU;AAAA;AAuDlC,eAAevC,IAAI","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","CardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","cls","_objectSpread","ref","tabIndex","onMouseDown","onKeyDown","a","key","onClick","e","children","style","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,cAAc,MAA6B,kBAAkB;AACpE,OAAOC,iBAAiB,MAAgC,qBAAqB;AAC7E,OAAOC,iBAAiB,MAAgC,qBAAqB;AAC7E,SAAQC,UAAU,EAAEC,MAAM,EAAEC,yBAAyB,EAAEC,WAAW,EAAEC,eAAe,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAExG,OAAO,MAAMC,2BAA2B,GAAGb,MAAM,CAACc,GAAG;AACrD,sBAAsBC,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEC,cAAc,EAAC;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACxH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBf,UAAU,CAACgB,YAAY;AACzC;AACA;AACA;AACA,wBAAwBL,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEC,cAAc,EAAE;AAAQ,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AACtH;AACA,CAAC;AAGD,OAAO,MAAME,mBAAmB,GAAGrB,MAAM,CAACc,GAAG;AAC7C;AACA,MAAMP,WAAW;AACjB;AACA;AACA;AACA;AACA;AACA;AACA,QAAQM,2BAA2B;AACnC;AACA,8BAA8BE,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEK,KAAK,EAAC;AAAO,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AACrH;AACA;AACA;AACA,8BAA8BJ,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,YAAY;EAAEK,KAAK,EAAC;AAAQ,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AACtH;AACA;AACA;AACA;AACA;AACA,QAAQN,2BAA2B;AACnC;AACA,wBAAwBT,UAAU,CAACmB,YAAY;AAC/C;AACA;AACA;AACA,wBAAwBnB,UAAU,CAACoB,YAAY;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMX,2BAA2B;AACjC,0BAA0BE,KAAK,IAAIV,MAAM,CAACW,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEK,KAAK,EAAC;AAAU,CAAC,EAAEP,KAAK,CAACI,KAAK,CAAC;AAChH;AACA;AACA,CAAC;AAoBD,MAAMM,IAAwC,GAAGC,IAAA,IAUkB;EAAA,IAVjB;MACEC,aAAa;MACbC,eAAe;MACfC,kBAAkB;MAClBC,kBAAkB;MAClBC,QAAQ;MACRC,OAAO,GAAG,UAAU;MACpBC,SAAS;MACTC,QAAQ,GAAG;IAEF,CAAC,GAAAR,IAAA;IADPS,IAAI,GAAAC,wBAAA,CAAAV,IAAA,EAAAW,SAAA;EAIzD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGxC,KAAK,CAACyC,QAAQ,CAAwC,EAAE,CAAC;EAC/F,MAAMC,WAAW,GAAI1C,KAAK,CAAC2C,MAAM,CAAiB,IAAI,CAAC;EACvD,MAAMC,YAAY,GAAG5C,KAAK,CAAC2C,MAAM,CAAiB,IAAI,CAAC;EAEvDlC,eAAe,CAACmC,YAAY,EAAE,CAAC,GAAGL,WAAW,EAAEG,WAAW,CAAC,CAAC;EAE5D,MAAMG,GAAG,GAAG,GAAG,CAAC,CAACjB,aAAa,GAAG,aAAa,GAAG,EAAE,IAAII,QAAQ,GAAG,UAAU,GAAG,EAAE,IAAIC,OAAO,IAAIC,SAAS,IAAI,EAAE,EAAE;EAEjH,oBACEvB,IAAA,CAACW,mBAAmB,EAAAwB,aAAA,CAAAA,aAAA;IAACC,GAAG,EAAEH,YAAa;IAC9BV,SAAS,EAAEW,GAAI;IACfG,QAAQ,EAAE,CAAC,CAACpB,aAAa,IAAI,CAACI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAChDiB,WAAW,EAAE1C,yBAA0B;IACvC2C,SAAS,EAAEC,CAAC,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAI,CAACpB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IACnFyB,OAAO,EAAEC,CAAC,IAAI,CAACtB,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAE;IAC5D,eAAa;EAAe,GACxBQ,IAAI;IAAAmB,QAAA,eACf1C,KAAA,CAACC,2BAA2B;MAAC0C,KAAK,EAAE;QAACrB,QAAQ,EAAEA;MAAQ,CAAE;MAAAoB,QAAA,GAErD1B,eAAe,iBACflB,IAAA,CAACT,cAAc,EAAA4C,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEL;MAAY,GAC3Bb,eAAe;QAAEG,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG5CF,kBAAkB,iBAClBnB,IAAA,CAACR,iBAAiB,EAAA2C,aAAA,CAAAA,aAAA,KAAKhB,kBAAkB;QAAEE,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAGhED,kBAAkB,iBAClBpB,IAAA,CAACP,iBAAiB,EAAA0C,aAAA,CAAAA,aAAA;QAACC,GAAG,EAAEU,QAAQ,IAAI;UAClCjB,cAAc,CAACiB,QAAQ,IAAI,EAAE,CAAC;QAChC;MAAE,GACqB1B,kBAAkB;QAAEC,QAAQ,EAAEA;MAAS,EAAC,CAAC;IAAA,CAEvC;EAAC,EACX,CAAC;AAE1B,CAAC;AAACN,IAAA,CAAAgC,SAAA;EAjEA9B,aAAa,EAAA+B,GAAA,CAAAC,IAAA;EAEb5B,QAAQ,EAAA2B,GAAA,CAAAE,IAAA;EAER1B,QAAQ,EAAAwB,GAAA,CAAAG,SAAA,EAAAH,GAAA,CAAAI,MAAA,EAAAJ,GAAA,CAAAK,MAAA;EAQR/B,OAAO,EAAA0B,GAAA,CAAAM,KAAA,EAAG,SAAS,EAAG,UAAU;AAAA;AAuDlC,eAAevC,IAAI","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -24,7 +24,10 @@ const CardBottomSectionProgressStyles = exports.CardBottomSectionProgressStyles
 const CardBottomSectionNotesStyles = exports.CardBottomSectionNotesStyles = _styledComponents.default.div`
   height: 48px;
   position: relative;
-  color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -46,7 +49,10 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
   }
 
   ${props => props.$disabled ? `
-    color: ${_index.COLORS.getColor('neutral_300', props.theme)};
+    color: ${_index.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     svg, img {
       filter: grayscale(100%);
     }
@@ -55,7 +61,10 @@ const CardBottomSectionAuthorStyles = exports.CardBottomSectionAuthorStyles = _s
 `;
 const CardBottomSectionDivider = exports.CardBottomSectionDivider = _styledComponents.default.div`
   border-top: 1px;
-  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
   width: 100%;
 `;
@@ -91,7 +100,10 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
   justify-content: flex-end;
   align-items: center;
   border-top: 1px;
-  border-top-color: ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => _index.COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
 
   button:last-child {
@@ -103,7 +115,10 @@ const CardBottomSectionButtonRowContainerStyles = exports.CardBottomSectionButto
   }
 
   svg {
-    color: ${props => _index.COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => _index.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 const CardBottomSectionContainer = exports.CardBottomSectionContainer = _styledComponents.default.div`
@@ -168,13 +183,19 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.getColor('neutral_500', theme),
+          color: _index.COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXXS, {
-          color: _index.COLORS.getColor('neutral_500', theme),
+          color: _index.COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: _index.ComponentTextStyle.Bold,
           children: noteRight
         })]

package/dist/Card/VerticalCard/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties2","jsx","Button","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: CardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, ...rest} = leftButton;\r\n      return (<Button \r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}>\r\n        {buttonText}\r\n      </Button>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index]}\r\n              key={index}\r\n              disabled={disabled}\r\n              variant=\"secondary\"\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_Button","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardBottomSectionProgressStyles","exports","styled","div","CardBottomSectionNotesStyles","props","COLORS","generateToken","componentType","defaultVariant","theme","CardBottomSectionAuthorStyles","$disabled","state","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","useTheme","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties2","jsx","Button","size","Size","XSmall","XXSmall","includes","Small","Large","Medium","children","jsxs","LinearProgress","type","variant","LinearProgressVariant","Normal","value","max","ComponentXXS","color","textStyle","ComponentTextStyle","Bold","x","index","IconButton","shape","action","onClick","icon","propTypes","_propTypes","number","string","node","arrayOf","isRequired","func","bool","_default"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: CardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({componentType:'icon', defaultVariant:'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, ...rest} = leftButton;\r\n      return (<Button \r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}>\r\n        {buttonText}\r\n      </Button>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index]}\r\n              key={index}\r\n              disabled={disabled}\r\n              variant=\"secondary\"\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.js

@@ -15,7 +15,10 @@ export const CardBottomSectionProgressStyles = styled.div`
 export const CardBottomSectionNotesStyles = styled.div`
   height: 48px;
   position: relative;
-  color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -37,7 +40,10 @@ export const CardBottomSectionAuthorStyles = styled.div`
   }
 
   ${props => props.$disabled ? `
-    color: ${COLORS.getColor('neutral_300', props.theme)};
+    color: ${COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
     svg, img {
       filter: grayscale(100%);
     }
@@ -46,7 +52,10 @@ export const CardBottomSectionAuthorStyles = styled.div`
 `;
 export const CardBottomSectionDivider = styled.div`
   border-top: 1px;
-  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
   width: 100%;
 `;
@@ -82,7 +91,10 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
   justify-content: flex-end;
   align-items: center;
   border-top: 1px;
-  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+  border-top-color: ${props => COLORS.generateToken({
+  componentType: 'border',
+  defaultVariant: 'subtle'
+}, props.theme)};
   border-top-style: solid;
 
   button:last-child {
@@ -94,7 +106,10 @@ export const CardBottomSectionButtonRowContainerStyles = styled.div`
   }
 
   svg {
-    color: ${props => COLORS.getColor('neutral_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
   }
 `;
 export const CardBottomSectionContainer = styled.div`
@@ -159,13 +174,19 @@ const CardBottomSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.getColor('neutral_500', theme),
+          color: COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.getColor('neutral_500', theme),
+          color: COLORS.generateToken({
+            componentType: 'icon',
+            defaultVariant: 'subtle'
+          }, theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteRight
         })]

package/dist/Card/VerticalCard/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties","_excluded","_objectSpread","size","XSmall","XXSmall","includes","Small","Large","Medium","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: CardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, ...rest} = leftButton;\r\n      return (<Button \r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}>\r\n        {buttonText}\r\n      </Button>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index]}\r\n              key={index}\r\n              disabled={disabled}\r\n              variant=\"secondary\"\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","Button","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","generateToken","componentType","defaultVariant","theme","CardBottomSectionAuthorStyles","$disabled","state","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","LeftItemContainer","RightItemContainer","getColor","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","leftButton","authorName","logo","actions","disabled","elRefs","setElRefs","useState","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","renderLeftButton","buttonText","rest","_objectWithoutProperties","_excluded","_objectSpread","size","XSmall","XXSmall","includes","Small","Large","Medium","children","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size,\r\n} from '../../index';\r\nimport { Button, ButtonProps, IconButton } from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport type CardStandardButton = Pick<ButtonProps, 'width' | 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\r\n  buttonText: string;\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Optional. Note icon/Hyperlink/button shown on the left side of the section. */\r\n  leftButton?: CardStandardButton;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.generateToken({ componentType:'text', defaultVariant:'subtle' }, props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = styled.div<{ $disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.$disabled ? `\r\n    color: ${COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionNoteRightStyles = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionButtonRowContainerStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.generateToken({componentType:'border', defaultVariant:'subtle'}, props.theme)};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({componentType:'icon', defaultVariant:'subtle' }, props.theme)};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst LeftItemContainer = styled.div`\r\n  flex: 1\r\n`;\r\n\r\nconst RightItemContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n  progressLevel,\r\n  progressMax,\r\n  progressType = LinearProgressType.Line,\r\n  noteLeft,\r\n  noteLeftIcon,\r\n  noteRight,\r\n  noteRightIcon,\r\n  leftButton,\r\n  authorName,\r\n  logo,\r\n  actions,\r\n  disabled\r\n}: CardBottomSectionProps,\r\n  ref: React.Ref<React.RefObject<HTMLButtonElement | null>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement | null>[]>([]);\r\n  const theme = useTheme();\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName || leftButton;\r\n\r\n  const renderLeftButton = () => {\r\n    if (leftButton){\r\n      const {buttonText, ...rest} = leftButton;\r\n      return (<Button \r\n        size={ leftButton.size && [Size.XSmall, Size.XSmall, Size.XXSmall].includes(leftButton.size) ? Size.Small: \r\n          leftButton.size == Size.Large ? Size.Large : Size.Medium}\r\n        {...rest}>\r\n        {buttonText}\r\n      </Button>)\r\n    }\r\n}\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\r\n        <LinearProgress size={Size.Small}\r\n          type={progressType}\r\n          variant={LinearProgressVariant.Normal}\r\n          value={progressLevel}\r\n          max={progressMax ?? progressLevel}/>\r\n      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {(actions || leftButton) && <CardBottomSectionButtonRowContainerStyles>\r\n        <LeftItemContainer>\r\n          {leftButton && renderLeftButton()}\r\n      </LeftItemContainer>\r\n\r\n        { actions && <RightItemContainer>{actions.map((x, index) => (\r\n            <IconButton ref={elRefs[index]}\r\n              key={index}\r\n              disabled={disabled}\r\n              variant=\"secondary\"\r\n              shape=\"circular\"\r\n              action={(e) => {\r\n                x.onClick();\r\n              }}>\r\n              {x.icon}\r\n            </IconButton>\r\n          ))}\r\n          </RightItemContainer>\r\n        }\r\n      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardMiddleSection.cjs

@@ -50,7 +50,10 @@ const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles
   gap: 6px;
 
   svg {
-    color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+    color: ${props => _index.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)};
     flex-grow: 0;
     flex-shrink: 0;
   }
@@ -76,17 +79,29 @@ const CardMiddleSection = _ref => {
       $bottomMargin: Boolean(categoryIcon || categoryLabel),
       children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
         textStyle: _index.ComponentTextStyle.Bold,
-        color: _index.COLORS.getColor('neutral_500', theme),
+        color: _index.COLORS.generateToken({
+          componentType: 'text',
+          defaultVariant: 'subtle'
+        }, theme),
         children: categoryLabel
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXL, {
       className: "titleBlock",
       textStyle: _index.ComponentTextStyle.Bold,
-      color: disabled ? _index.COLORS.getColor('neutral_500', theme) : _index.COLORS.getColor('black', theme),
+      color: disabled ? _index.COLORS.generateToken({
+        componentType: 'text',
+        defaultVariant: 'subtle'
+      }, theme) : _index.COLORS.generateToken({
+        componentType: 'text',
+        defaultVariant: 'default'
+      }, theme),
       children: title
     }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
       className: "descriptionBlock",
-      color: _index.COLORS.getColor('neutral_600', theme),
+      color: _index.COLORS.generateToken({
+        componentType: 'text',
+        defaultVariant: 'subtle'
+      }, theme),
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
       children: tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {

package/dist/Card/VerticalCard/CardMiddleSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","Tag","label","variant","icon","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","generateToken","componentType","defaultVariant","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","Tag","label","variant","icon","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardMiddleSectionColorBandStyles = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${(props) => props.$color};\r\n`;\r\n\r\nexport const CardMiddleSectionTagsStyles = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardMiddleSectionCategoryStyles = styled.div<{ $extraTopMargin: boolean; $bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n\r\n  svg {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled,\r\n}: CardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme) \r\n        : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}