@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","_templateObject","_templateObject2","HorizontalCardIconContainer","styled","div","_taggedTemplateLiteral2","COLORS","black","neutral_500","exports","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","_image$fallbackSrc","_image$loader","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA,EAAAC,gBAAA;AAExC,IAAMC,2BAA2B,GAAGC,4BAAM,CAACC,GAAG,CAAAJ,eAAA,KAAAA,eAAA,OAAAK,uBAAA,4LAO1CC,cAAM,CAACC,KAAK,EAGVD,cAAM,CAACE,WAAW,CAE9B;AAACC,OAAA,CAAAP,2BAAA,GAAAA,2BAAA;AAGK,IAAMQ,4BAA4B,GAAGP,4BAAM,CAACC,GAAG,CAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,0UAqBrD;AAACI,OAAA,CAAAC,4BAAA,GAAAA,4BAAA;AAIK,IAAMC,uBAAuD,GAAG,SAA1DA,uBAAuDA,CAAAC,IAAA,EAGU;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,IAFJC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAG5E,oBACE,IAAAjB,WAAA,CAAAkB,IAAA,EAAAlB,WAAA,CAAAmB,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAjB,WAAA,CAAAqB,GAAA,EAAClB,2BAA2B;MAAAiB,QAAA,eACzBE,iBAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAhB,WAAA,CAAAqB,GAAA,EAACV,4BAA4B;MAAAS,QAAA,eACzB,IAAApB,WAAA,CAAAqB,GAAA,EAACtB,MAAA,CAAA2B,kBAAkB;QAACC,SAAS,GAAAb,kBAAA,GAAEE,KAAK,CAACY,WAAW,cAAAd,kBAAA,cAAAA,kBAAA,GAAI,EAAG;QAACe,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,GAAAhB,aAAA,GAAEC,KAAK,CAACe,MAAM,cAAAhB,aAAA,cAAAA,aAAA,GAAI,KAAM;QAACS,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACf,OAAA,CAAAE,uBAAA,GAAAA,uBAAA","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Image","_jsxRuntime","_templateObject","_templateObject2","HorizontalCardIconContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","exports","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","_image$fallbackSrc","_image$loader","image","icon","jsxs","Fragment","children","jsx","React","cloneElement","width","height","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAA+C,IAAAI,WAAA,GAAAJ,OAAA;AAAA,IAAAK,eAAA,EAAAC,gBAAA;AAExC,IAAMC,2BAA2B,GAAGC,4BAAM,CAACC,GAAG,CAAAJ,eAAA,KAAAA,eAAA,OAAAK,uBAAA,4LAO1C,UAAAC,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAG5C,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAEhE;AAACC,OAAA,CAAAR,2BAAA,GAAAA,2BAAA;AAGK,IAAMS,4BAA4B,GAAGR,4BAAM,CAACC,GAAG,CAAAH,gBAAA,KAAAA,gBAAA,OAAAI,uBAAA,0UAqBrD;AAACK,OAAA,CAAAC,4BAAA,GAAAA,4BAAA;AAIK,IAAMC,uBAAuD,GAAG,SAA1DA,uBAAuDA,CAAAC,IAAA,EAGU;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,IAFJC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAG5E,oBACE,IAAAlB,WAAA,CAAAmB,IAAA,EAAAnB,WAAA,CAAAoB,QAAA;IAAAC,QAAA,GAEIH,IAAI,iBACF,IAAAlB,WAAA,CAAAsB,GAAA,EAACnB,2BAA2B;MAAAkB,QAAA,eACzBE,iBAAK,CAACC,YAAY,CAACN,IAAI,EAAE;QAACO,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCT,KAAK,iBACH,IAAAjB,WAAA,CAAAsB,GAAA,EAACV,4BAA4B;MAAAS,QAAA,eACzB,IAAArB,WAAA,CAAAsB,GAAA,EAACvB,MAAA,CAAA4B,kBAAkB;QAACC,SAAS,GAAAb,kBAAA,GAAEE,KAAK,CAACY,WAAW,cAAAd,kBAAA,cAAAA,kBAAA,GAAI,EAAG;QAACe,GAAG,EAAEb,KAAK,CAACa,GAAI;QAACC,GAAG,EAAEd,KAAK,CAACc,GAAI;QACnEC,MAAM,GAAAhB,aAAA,GAAEC,KAAK,CAACe,MAAM,cAAAhB,aAAA,cAAAA,aAAA,GAAI,KAAM;QAACS,KAAK,EAAER,KAAK,CAACQ,KAAM;QAACC,MAAM,EAAET,KAAK,CAACS;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC;AAACf,OAAA,CAAAE,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -7,7 +7,11 @@ import { ImageWithFallbacks } from "../../Image";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), COLORS.black, COLORS.neutral_500);
+export var HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('black', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
 export var HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
 export var HorizontalCardThumbnail = function HorizontalCardThumbnail(_ref) {
   var _image$fallbackSrc, _image$loader;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","_templateObject","_taggedTemplateLiteral","black","neutral_500","HorizontalCardImageContainer","_templateObject2","HorizontalCardThumbnail","_ref","_image$fallbackSrc","_image$loader","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${COLORS.black};\r\n\r\n  .disabled & {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,IAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gLAO1CX,MAAM,CAACY,KAAK,EAGVZ,MAAM,CAACa,WAAW,CAE9B;AAGD,OAAO,IAAMC,4BAA4B,GAAGf,MAAM,CAACU,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,sBAAA,8TAqBrD;AAID,OAAO,IAAMK,uBAAuD,GAAG,SAA1DA,uBAAuDA,CAAAC,IAAA,EAGU;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,IAFJC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAG5E,oBACEd,KAAA,CAAAF,SAAA;IAAAiB,QAAA,GAEID,IAAI,iBACFlB,IAAA,CAACK,2BAA2B;MAAAc,QAAA,eACzBxB,KAAK,CAACyB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHjB,IAAA,CAACW,4BAA4B;MAAAQ,QAAA,eACzBnB,IAAA,CAACF,kBAAkB;QAACyB,SAAS,GAAAR,kBAAA,GAAEE,KAAK,CAACO,WAAW,cAAAT,kBAAA,cAAAA,kBAAA,GAAI,EAAG;QAACU,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,GAAAX,aAAA,GAAEC,KAAK,CAACU,MAAM,cAAAX,aAAA,cAAAA,aAAA,GAAI,KAAM;QAACK,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","HorizontalCardImageContainer","_templateObject2","HorizontalCardThumbnail","_ref","_image$fallbackSrc","_image$loader","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,IAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gLAO1C,UAAAC,KAAK;EAAA,OAAIZ,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,GAG5C,UAAAF,KAAK;EAAA,OAAIZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAEhE;AAGD,OAAO,IAAMC,4BAA4B,GAAGhB,MAAM,CAACU,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,8TAqBrD;AAID,OAAO,IAAMM,uBAAuD,GAAG,SAA1DA,uBAAuDA,CAAAC,IAAA,EAGU;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,IAFJC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;EAG5E,oBACEf,KAAA,CAAAF,SAAA;IAAAkB,QAAA,GAEID,IAAI,iBACFnB,IAAA,CAACK,2BAA2B;MAAAe,QAAA,eACzBzB,KAAK,CAAC0B,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHlB,IAAA,CAACY,4BAA4B;MAAAQ,QAAA,eACzBpB,IAAA,CAACF,kBAAkB;QAAC0B,SAAS,GAAAR,kBAAA,GAAEE,KAAK,CAACO,WAAW,cAAAT,kBAAA,cAAAA,kBAAA,GAAI,EAAG;QAACU,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,GAAAX,aAAA,GAAEC,KAAK,CAACU,MAAM,cAAAX,aAAA,cAAAA,aAAA,GAAI,KAAM;QAACK,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}

package/dist/Card/VerticalCard/Card.cjs

@@ -25,9 +25,19 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var CardTopLevelContainerStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), _index.COLORS.white, _index.BOXSHADOWS.BOXSHADOW_L1, _index.COLORS.neutral_200);
+var CardTopLevelContainerStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('white', props.theme);
+}, _index.BOXSHADOWS.BOXSHADOW_L1, function (props) {
+  return _index.COLORS.getColor('neutral_200', props.theme);
+});
 exports.CardTopLevelContainerStyles = CardTopLevelContainerStyles;
-var CardContainerStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainerStyles, _index.COLORS.primary_20, _index.COLORS.primary_100, CardTopLevelContainerStyles, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, _index.COLORS.neutral_100);
+var CardContainerStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainerStyles, function (props) {
+  return _index.COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('primary_100', props.theme);
+}, CardTopLevelContainerStyles, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, function (props) {
+  return _index.COLORS.getColor('neutral_100', props.theme);
+});
 exports.CardContainerStyles = CardContainerStyles;
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,

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","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","styled","div","_taggedTemplateLiteral2","COLORS","white","BOXSHADOWS","BOXSHADOW_L1","neutral_200","exports","CardContainerStyles","focusStyles","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","_ref$variant","variant","className","_ref$maxWidth","maxWidth","rest","_objectWithoutProperties2","_React$useState","useState","_React$useState2","_slicedToArray2","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","concat","_toConsumableArray2","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: ${COLORS.white};\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 ${COLORS.neutral_200};\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: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${COLORS.primary_100};\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 ${COLORS.neutral_100};\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>[]>([]);\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 => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\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,IAAAQ,SAAA;AAAA,IAAAC,eAAA,EAAAC,gBAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAb,wBAAAa,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,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,cAAAR,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,aAAA/B,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,IAAMkC,2BAA2B,GAAGC,4BAAM,CAACC,GAAG,CAAAvC,eAAA,KAAAA,eAAA,OAAAwC,uBAAA,mUAC/BC,aAAM,CAACC,KAAK,EAYhBC,iBAAU,CAACC,YAAY,EAIjBH,aAAM,CAACI,WAAW,CAEzC;AAACC,OAAA,CAAAT,2BAAA,GAAAA,2BAAA;AAGK,IAAMU,mBAAmB,GAAGT,4BAAM,CAACC,GAAG,CAAAtC,gBAAA,KAAAA,gBAAA,OAAAuC,uBAAA,yoBAEvCQ,kBAAW,EAOTX,2BAA2B,EAELI,aAAM,CAACQ,UAAU,EAIjBR,aAAM,CAACS,WAAW,EAMxCb,2BAA2B,EAEXM,iBAAU,CAACQ,YAAY,EAIvBR,iBAAU,CAACS,YAAY,EAQzCf,2BAA2B,EACPI,aAAM,CAACY,WAAW,CAG3C;AAACP,OAAA,CAAAC,mBAAA,GAAAA,mBAAA;AAoBF,IAAMO,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA,EAUqB;EAAA,IATfC,aAAa,GAAAD,IAAA,CAAbC,aAAa;IACbC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IACfC,kBAAkB,GAAAH,IAAA,CAAlBG,kBAAkB;IAClBC,kBAAkB,GAAAJ,IAAA,CAAlBI,kBAAkB;IAClBC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IAAAC,YAAA,GAAAN,IAAA,CACRO,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,UAAU,GAAAA,YAAA;IACpBE,SAAS,GAAAR,IAAA,CAATQ,SAAS;IAAAC,aAAA,GAAAT,IAAA,CACTU,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAG,GAAG,GAAAA,aAAA;IACXE,IAAI,OAAAC,yBAAA,aAAAZ,IAAA,EAAAxD,SAAA;EAIzD,IAAAqE,eAAA,GAAsC/E,KAAK,CAACgF,QAAQ,CAAiC,EAAE,CAAC;IAAAC,gBAAA,OAAAC,eAAA,aAAAH,eAAA;IAAjFI,WAAW,GAAAF,gBAAA;IAAEG,cAAc,GAAAH,gBAAA;EAClC,IAAMI,WAAW,GAAIrF,KAAK,CAACsF,MAAM,CAAiB,IAAI,CAAC;EACvD,IAAMC,YAAY,GAAGvF,KAAK,CAACsF,MAAM,CAAiB,IAAI,CAAC;EAEvD,IAAAE,sBAAe,EAACD,YAAY,KAAAE,MAAA,KAAAC,mBAAA,aAAMP,WAAW,IAAEE,WAAW,EAAC,CAAC;EAE5D,IAAMM,GAAG,MAAAF,MAAA,CAAM,CAAC,CAACtB,aAAa,GAAG,aAAa,GAAG,EAAE,OAAAsB,MAAA,CAAIlB,QAAQ,GAAG,UAAU,GAAG,EAAE,OAAAkB,MAAA,CAAIhB,OAAO,OAAAgB,MAAA,CAAIf,SAAS,IAAI,EAAE,CAAE;EAEjH,oBACE,IAAAjE,WAAA,CAAAmF,GAAA,EAAClC,mBAAmB,EAAAjB,aAAA,CAAAA,aAAA;IAACoD,GAAG,EAAEN,YAAa;IAC9Bb,SAAS,EAAEiB,GAAI;IACfG,QAAQ,EAAE,CAAC,CAAC3B,aAAa,IAAI,CAACI,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAChDwB,WAAW,EAAEC,gCAA0B;IACvCC,SAAS,EAAE,SAAAA,UAAAzE,CAAC;MAAA,OAAIA,CAAC,CAAC0E,GAAG,KAAK,OAAO,IAAI,CAAC3B,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAC;IAAA,CAAC;IACnFgC,OAAO,EAAE,SAAAA,QAAArF,CAAC;MAAA,OAAI,CAACyD,QAAQ,IAAIJ,aAAa,IAAIA,aAAa,CAAC,CAAC;IAAA,CAAC;IAC5D,eAAa;EAAe,GACxBU,IAAI;IAAAuB,QAAA,eACf,IAAA3F,WAAA,CAAA4F,IAAA,EAACrD,2BAA2B;MAACsD,KAAK,EAAE;QAAC1B,QAAQ,EAAEA;MAAQ,CAAE;MAAAwB,QAAA,GAErDhC,eAAe,iBACf,IAAA3D,WAAA,CAAAmF,GAAA,EAACvF,eAAA,WAAc,EAAAoC,aAAA,CAAAA,aAAA;QAACoD,GAAG,EAAER;MAAY,GAC3BjB,eAAe;QAAEG,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAG5CF,kBAAkB,iBAClB,IAAA5D,WAAA,CAAAmF,GAAA,EAACtF,kBAAA,WAAiB,EAAAmC,aAAA,CAAAA,aAAA,KAAK4B,kBAAkB;QAAEE,QAAQ,EAAEA;MAAS,EAAC,CAAC,EAGhED,kBAAkB,iBAClB,IAAA7D,WAAA,CAAAmF,GAAA,EAACrF,kBAAA,WAAiB,EAAAkC,aAAA,CAAAA,aAAA;QAACoD,GAAG,EAAE,SAAAA,IAAAU,QAAQ;UAAA,OAAInB,cAAc,CAACmB,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA;MAAC,GAC5CjC,kBAAkB;QAAEC,QAAQ,EAAEA;MAAS,EAAC,CAAC;IAAA,CAEvC;EAAC,EACX,CAAC;AAG1B,CAAC;AAACN,IAAA,CAAAuC,SAAA;EAhEArC,aAAa,EAAAsC,UAAA,YAAAC,IAAA;EAEbnC,QAAQ,EAAAkC,UAAA,YAAAE,IAAA;EAER/B,QAAQ,EAAA6B,UAAA,YAAAG,SAAA,EAAAH,UAAA,YAAAI,MAAA,EAAAJ,UAAA,YAAAK,MAAA;EAQRrC,OAAO,EAAAgC,UAAA,YAAAM,KAAA,EAAG,SAAS,EAAG,UAAU;AAAA;AAAA,IAAAC,QAAA,GAsDnB/C,IAAI;AAAAR,OAAA,cAAAuD,QAAA","ignoreList":[]}
+{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","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","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_L1","exports","CardContainerStyles","focusStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","_ref$variant","variant","className","_ref$maxWidth","maxWidth","rest","_objectWithoutProperties2","_React$useState","useState","_React$useState2","_slicedToArray2","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","useActionWithin","concat","_toConsumableArray2","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>[]>([]);\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 => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/Card.js

@@ -16,8 +16,18 @@ import CardBottomSection from './CardBottomSection';
 import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardTopLevelContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), COLORS.white, BOXSHADOWS.BOXSHADOW_L1, COLORS.neutral_200);
-export var CardContainerStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainerStyles, COLORS.primary_20, COLORS.primary_100, CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, COLORS.neutral_100);
+export var CardTopLevelContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('white', props.theme);
+}, BOXSHADOWS.BOXSHADOW_L1, function (props) {
+  return COLORS.getColor('neutral_200', props.theme);
+});
+export var CardContainerStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainerStyles, function (props) {
+  return COLORS.getColor('primary_20', props.theme);
+}, function (props) {
+  return COLORS.getColor('primary_100', props.theme);
+}, CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+});
 var Card = function Card(_ref) {
   var onCardClicked = _ref.onCardClicked,
     topSectionProps = _ref.topSectionProps,

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","_templateObject","_taggedTemplateLiteral","white","BOXSHADOW_L1","neutral_200","CardContainerStyles","_templateObject2","primary_20","primary_100","BOXSHADOW_L3","BOXSHADOW_L2","neutral_100","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","_ref$variant","variant","className","_ref$maxWidth","maxWidth","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","concat","_toConsumableArray","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: ${COLORS.white};\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 ${COLORS.neutral_200};\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: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${COLORS.primary_100};\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 ${COLORS.neutral_100};\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>[]>([]);\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 => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.js","names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","CardTopLevelContainerStyles","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","BOXSHADOW_L1","CardContainerStyles","_templateObject2","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","_ref$variant","variant","className","_ref$maxWidth","maxWidth","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","actionsRefs","setActionsRefs","checkBoxRef","useRef","containerRef","concat","_toConsumableArray","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>[]>([]);\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 => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardBottomSection.cjs

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _Button = require("../../Button");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -19,19 +19,27 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var CardBottomSectionProgressStyles = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 8px 0;\n"])));
 exports.CardBottomSectionProgressStyles = CardBottomSectionProgressStyles;
-var CardBottomSectionNotesStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), _index.COLORS.neutral_500);
+var CardBottomSectionNotesStyles = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_500', props.theme);
+});
 exports.CardBottomSectionNotesStyles = CardBottomSectionNotesStyles;
 var CardBottomSectionAuthorStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(_index.COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.disabled ? "\n    color: ".concat(_index.COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 exports.CardBottomSectionAuthorStyles = CardBottomSectionAuthorStyles;
-var CardBottomSectionDivider = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), _index.COLORS.neutral_100);
+var CardBottomSectionDivider = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_100', props.theme);
+});
 exports.CardBottomSectionDivider = CardBottomSectionDivider;
 var CardBottomSectionNoteLeftStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 exports.CardBottomSectionNoteLeftStyles = CardBottomSectionNoteLeftStyles;
 var CardBottomSectionNoteRightStyles = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 exports.CardBottomSectionNoteRightStyles = CardBottomSectionNoteRightStyles;
-var CardBottomSectionButtonRowContainerStyles = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), _index.COLORS.neutral_100, _index.COLORS.neutral_600);
+var CardBottomSectionButtonRowContainerStyles = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return _index.COLORS.getColor('neutral_600', props.theme);
+});
 exports.CardBottomSectionButtonRowContainerStyles = CardBottomSectionButtonRowContainerStyles;
 var CardBottomSectionContainer = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
 exports.CardBottomSectionContainer = CardBottomSectionContainer;
@@ -52,6 +60,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     elRefs = _React$useState2[0],
     setElRefs = _React$useState2[1];
+  var theme = (0, _styledComponents.useTheme)();
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {
@@ -75,13 +84,13 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_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.neutral_500,
+          color: _index.COLORS.getColor('neutral_500', 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.neutral_500,
+          color: _index.COLORS.getColor('neutral_500', 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","_interopRequireDefault","_index","_Button","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","styled","div","_taggedTemplateLiteral2","exports","CardBottomSectionNotesStyles","COLORS","neutral_500","CardBottomSectionAuthorStyles","props","disabled","concat","neutral_300","CardBottomSectionDivider","neutral_100","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","_React$useState","useState","_React$useState2","_slicedToArray2","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","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 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 {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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: ${COLORS.neutral_500};\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.neutral_300};\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: ${COLORS.neutral_100};\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: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\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 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                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\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;\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.neutral_500} 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.neutral_500} 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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </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","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardBottomSectionProgressStyles","styled","div","_taggedTemplateLiteral2","exports","CardBottomSectionNotesStyles","props","COLORS","getColor","theme","CardBottomSectionAuthorStyles","disabled","concat","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","_React$useState","useState","_React$useState2","_slicedToArray2","elRefs","setElRefs","useTheme","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","jsxs","children","jsx","LinearProgress","size","Size","Small","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 {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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 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                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\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;\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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </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

@@ -3,20 +3,28 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import * as React from 'react';
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
 import { IconButton } from '../../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardBottomSectionProgressStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
-export var CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), COLORS.neutral_500);
+export var CardBottomSectionNotesStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 48px;\n  position: relative;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])), function (props) {
+  return COLORS.getColor('neutral_500', props.theme);
+});
 export var CardBottomSectionAuthorStyles = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 48px;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  svg, img {\n    width: 80px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  ", "\n"])), function (props) {
-  return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+  return props.disabled ? "\n    color: ".concat(COLORS.getColor('neutral_300', props.theme), ";\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
+});
+export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
 });
-export var CardBottomSectionDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
 export var CardBottomSectionNoteLeftStyles = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 export var CardBottomSectionNoteRightStyles = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
+export var CardBottomSectionButtonRowContainerStyles = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), function (props) {
+  return COLORS.getColor('neutral_100', props.theme);
+}, function (props) {
+  return COLORS.getColor('neutral_600', props.theme);
+});
 export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
 var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
@@ -35,6 +43,7 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     elRefs = _React$useState2[0],
     setElRefs = _React$useState2[1];
+  var theme = useTheme();
   var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
   React.useEffect(function () {
     setElRefs(Array(length || 0).fill(null).map(function () {
@@ -58,13 +67,13 @@ var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNotesStyles, {
       children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteLeftStyles, {
         children: [noteLeftIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.neutral_500,
+          color: COLORS.getColor('neutral_500', theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteLeft
         })]
       }), (noteRight || noteRightIcon) && /*#__PURE__*/_jsxs(CardBottomSectionNoteRightStyles, {
         children: [noteRightIcon, /*#__PURE__*/_jsx(ComponentXXS, {
-          color: COLORS.neutral_500,
+          color: COLORS.getColor('neutral_500', theme),
           textStyle: ComponentTextStyle.Bold,
           children: noteRight
         })]

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

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","neutral_500","CardBottomSectionAuthorStyles","_templateObject3","props","disabled","concat","neutral_300","CardBottomSectionDivider","_templateObject4","neutral_100","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","neutral_600","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","_React$useState","useState","_React$useState2","_slicedToArray","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","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 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 {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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: ${COLORS.neutral_500};\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.neutral_300};\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: ${COLORS.neutral_100};\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: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\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 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                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\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;\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.neutral_500} 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.neutral_500} 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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,kBAAkB,EAClBC,YAAY,EACZC,cAAc,EACdC,kBAAkB,EAClBC,qBAAqB,EACrBC,IAAI,QACC,aAAa;AACpB,SAAQC,UAAU,QAAO,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCxC,OAAO,IAAMC,+BAA+B,GAAGb,MAAM,CAACc,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,6BAExD;AAED,OAAO,IAAMC,4BAA4B,GAAGjB,MAAM,CAACc,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,sBAAA,qIAG3Cf,MAAM,CAACkB,WAAW,CAI5B;AAED,OAAO,IAAMC,6BAA6B,GAAGpB,MAAM,CAACc,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,sOAgBnD,UAAAM,KAAK;EAAA,OAAIA,KAAK,CAACC,QAAQ,mBAAAC,MAAA,CACdvB,MAAM,CAACwB,WAAW,0EAKzB,EAAE;AAAA,EACP;AAED,OAAO,IAAMC,wBAAwB,GAAG1B,MAAM,CAACc,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAX,sBAAA,sGAE5Bf,MAAM,CAAC2B,WAAW,CAGvC;AAED,OAAO,IAAMC,+BAA+B,GAAG7B,MAAM,CAACc,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAd,sBAAA,iMAYxD;AAED,OAAO,IAAMe,gCAAgC,GAAG/B,MAAM,CAACc,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAhB,sBAAA,kMAYzD;AAED,OAAO,IAAMiB,yCAAyC,GAAGjC,MAAM,CAACc,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAlB,sBAAA,sVAM7Cf,MAAM,CAAC2B,WAAW,EAY3B3B,MAAM,CAACkC,WAAW,CAE9B;AAED,OAAO,IAAMC,0BAA0B,GAAGpC,MAAM,CAACc,GAAG,CAAAuB,gBAAA,KAAAA,gBAAA,GAAArB,sBAAA,sEAGnD;AAED,IAAMsB,iBAAiB,gBAAGvC,KAAK,CAACwC,UAAU,CAAC,UAAAC,IAAA,EAaCC,GAAoD,EAAK;EAAA,IAZvDC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,WAAW,GAAAH,IAAA,CAAXG,WAAW;IAAAC,iBAAA,GAAAJ,IAAA,CACXK,YAAY;IAAZA,YAAY,GAAAD,iBAAA,cAAGvC,kBAAkB,CAACyC,IAAI,GAAAF,iBAAA;IACtCG,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRC,YAAY,GAAAR,IAAA,CAAZQ,YAAY;IACZC,SAAS,GAAAT,IAAA,CAATS,SAAS;IACTC,aAAa,GAAAV,IAAA,CAAbU,aAAa;IACbC,UAAU,GAAAX,IAAA,CAAVW,UAAU;IACVC,IAAI,GAAAZ,IAAA,CAAJY,IAAI;IACJC,OAAO,GAAAb,IAAA,CAAPa,OAAO;IACP9B,QAAQ,GAAAiB,IAAA,CAARjB,QAAQ;EAIpD,IAAA+B,eAAA,GAA4BvD,KAAK,CAACwD,QAAQ,CAAuC,EAAE,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA7EI,MAAM,GAAAF,gBAAA;IAAEG,SAAS,GAAAH,gBAAA;EAExB,IAAMI,MAAM,GAAG,CAAAP,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEO,MAAM,KAAI,CAAC;EAEnC7D,KAAK,CAAC8D,SAAS,CAAC,YAAM;IACpBF,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC;MAAA,oBAAMjE,KAAK,CAACkE,SAAS,CAAoB,CAAC;IAAA,EAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ7D,KAAK,CAACmE,mBAAmB,CAACzB,GAAG,EAAE;IAAA,OAAMiB,MAAM;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,IAAMS,oBAAoB,GAAGzB,aAAa,IAAI0B,SAAS,IAAIrB,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,IAAIC,UAAU;EAE/H,oBACEvC,KAAA,CAACwB,0BAA0B;IAAC,eAAa,oBAAqB;IAAAiC,QAAA,GAC3DF,oBAAoB,iBAAIzD,IAAA,CAACgB,wBAAwB,IAAC,CAAC,EACnDgB,aAAa,IAAI0B,SAAS,iBAAI1D,IAAA,CAACG,+BAA+B;MAAAwD,QAAA,eAC7D3D,IAAA,CAACN,cAAc;QAACkE,IAAI,EAAE/D,IAAI,CAACgE,KAAM;QACjBC,IAAI,EAAE3B,YAAa;QACnB4B,OAAO,EAAEnE,qBAAqB,CAACoE,MAAO;QACtCC,KAAK,EAAEjC,aAAc;QACrBkC,GAAG,EAAEjC,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAID;MAAc,CAAC;IAAC,CACrB,CAAC,EAEjC,CAACK,QAAQ,IAAIC,YAAY,IAAIC,SAAS,IAAIC,aAAa,kBAAKtC,KAAA,CAACK,4BAA4B;MAAAoD,QAAA,GACvF,CAACtB,QAAQ,IAAIC,YAAY,kBACxBpC,KAAA,CAACiB,+BAA+B;QAAAwC,QAAA,GAC7BrB,YAAY,eACbtC,IAAA,CAACP,YAAY;UAAC0E,KAAK,EAAE5E,MAAM,CAACkB,WAAY;UAAC2D,SAAS,EAAE5E,kBAAkB,CAAC6E,IAAK;UAAAV,QAAA,EAAEtB;QAAQ,CAAe,CAAC;MAAA,CACvE,CAClC,EACA,CAACE,SAAS,IAAIC,aAAa,kBAC1BtC,KAAA,CAACmB,gCAAgC;QAAAsC,QAAA,GAC9BnB,aAAa,eACdxC,IAAA,CAACP,YAAY;UAAC0E,KAAK,EAAE5E,MAAM,CAACkB,WAAY;UAAC2D,SAAS,EAAE5E,kBAAkB,CAAC6E,IAAK;UAAAV,QAAA,EAAEpB;QAAS,CAAe,CAAC;MAAA,CACvE,CACnC;IAAA,CAC2B,CAAC,EAE9B,CAACE,UAAU,IAAIC,IAAI,kBAAKxC,KAAA,CAACQ,6BAA6B;MAACG,QAAQ,EAAEA,QAAS;MAAC,eAAa,2BAA4B;MAAA8C,QAAA,gBACnH3D,IAAA,CAACP,YAAY;QAAAkE,QAAA,EAAElB;MAAU,CAAe,CAAC,EACxCC,IAAI;IAAA,CACwB,CAAC,EAE/BC,OAAO,iBAAI3C,IAAA,CAACuB,yCAAyC;MAAAoC,QAAA,EACnDhB,OAAO,CAACW,GAAG,CAAC,UAACgB,CAAC,EAAEC,KAAK;QAAA,oBACpBvE,IAAA,CAACF,UAAU;UAACiC,GAAG,EAAEiB,MAAM,CAACuB,KAAK,CAAE;UAEnB1D,QAAQ,EAAEA,QAAS;UACnBkD,OAAO,EAAC,WAAW;UACnBS,KAAK,EAAC,UAAU;UAChBC,MAAM,EAAE,SAAAA,OAACC,CAAC,EAAK;YACbJ,CAAC,CAACK,OAAO,CAAC,CAAC;UACb,CAAE;UAAAhB,QAAA,EACXW,CAAC,CAACM;QAAI,GAPQL,KAQL,CAAC;MAAA,CACd;IAAC,CACuC,CAAC;EAAA,CAClB,CAAC;AAEjC,CAAC,CAAC;AAAC3C,iBAAA,CAAAiD,SAAA;EAvMD7C,aAAa,EAAA8C,GAAA,CAAAC,MAAA;EAEb9C,WAAW,EAAA6C,GAAA,CAAAC,MAAA;EAKX1C,QAAQ,EAAAyC,GAAA,CAAAE,MAAA;EAER1C,YAAY,EAAAwC,GAAA,CAAAG,IAAA;EAEZ1C,SAAS,EAAAuC,GAAA,CAAAE,MAAA;EAETxC,aAAa,EAAAsC,GAAA,CAAAG,IAAA;EAGbxC,UAAU,EAAAqC,GAAA,CAAAE,MAAA;EAEVrC,OAAO,EAAAmC,GAAA,CAAAI,OAAA,CAAAJ,GAAA,CAAAN,KAAA;IAxBPI,IAAI,EAAAE,GAAA,CAAAG,IAAA,CAAAE,UAAA;IACJR,OAAO,EAAAG,GAAA,CAAAM,IAAA,CAAAD;EAAA;EAyBPzC,IAAI,EAAAoC,GAAA,CAAAG,IAAA;EAEJpE,QAAQ,EAAAiE,GAAA,CAAAO;AAAA;AAmLV,eAAezD,iBAAiB","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","_React$useState","useState","_React$useState2","_slicedToArray","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","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 {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\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  /** 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 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                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\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;\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 && <CardBottomSectionButtonRowContainerStyles>\r\n        {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      </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

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -22,7 +22,9 @@ var CardMiddleSectionColorBandStyles = _styledComponents["default"].div(_templat
 exports.CardMiddleSectionColorBandStyles = CardMiddleSectionColorBandStyles;
 var CardMiddleSectionTagsStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
 exports.CardMiddleSectionTagsStyles = CardMiddleSectionTagsStyles;
-var CardMiddleSectionCategoryStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), _index.COLORS.neutral_500);
+var CardMiddleSectionCategoryStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+  return _index.COLORS.getColor('neutral_500', props.theme);
+});
 exports.CardMiddleSectionCategoryStyles = CardMiddleSectionCategoryStyles;
 var CardMiddleSection = function CardMiddleSection(_ref) {
   var colorBandColor = _ref.colorBandColor,
@@ -33,6 +35,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
     tags = _ref.tags,
     row2Tags = _ref.row2Tags,
     disabled = _ref.disabled;
+  var theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionColorBandStyles, {
@@ -42,17 +45,17 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       bottomMargin: Boolean(categoryIcon || categoryLabel),
       children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
         textStyle: _index.ComponentTextStyle.Bold,
-        color: _index.COLORS.neutral_500,
+        color: _index.COLORS.getColor('neutral_500', theme),
         children: categoryLabel
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXL, {
       className: "titleBlock",
       textStyle: _index.ComponentTextStyle.Bold,
-      color: disabled ? _index.COLORS.neutral_500 : _index.COLORS.black,
+      color: disabled ? _index.COLORS.getColor('neutral_500', theme) : _index.COLORS.getColor('black', theme),
       children: title
     }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
       className: "descriptionBlock",
-      color: _index.COLORS.neutral_600,
+      color: _index.COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
       children: tags.map(function (x, index) {