@laerdal/life-react-components 1.5.1-dev.28 → 1.5.1-dev.31

package/dist/Button/Iconbutton.cjs

@@ -96,9 +96,10 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       type = _ref.type,
       hidden = _ref.hidden;
 
-  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
       e.preventDefault();
+      e.stopPropagation();
       return true;
     }
 
@@ -118,7 +119,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnterOrSpace(e) && action();
+          return isPressingEnter(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
@@ -150,7 +151,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnterOrSpace(e) && action();
+          return isPressingEnter(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnterOrSpace","e","key","preventDefault","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;AAcA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA4BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA2B;AACtD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAOA,KAAK,CAACI,QAAb;AAEI,SAAK,MAAL;AACI,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEJ,SAAK,OAAL;AACI,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEJ,SAAK,MAAL;AACA;AACI,uBAAUA,MAAV;AAVR;AAYD,CAdD;;AAgBA,IAAME,gBAAgB,GAAGC,0BAAOC,MAAV,+vBAOT,UAACP,KAAD;AAAA,SAAYA,KAAK,CAACQ,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CAPS,EAQlBC,oBAAYC,MARM,EAYH,UAACV,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAZG,EAgBDC,oBAhBC,EAqBN,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CArBM,EAsBP,UAACX,KAAD;AAAA,SAAYA,KAAK,CAACW,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBO,CAAtB;;AA6CO,IAAMC,uBAAuB,GAAG,+BAAOP,gBAAP,CAAH,42BAEZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOC,WAApE;AAAA,CAFY,EAKtB,UAACf,KAAD;AAAA,SAAWA,KAAK,CAACgB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CALsB,EAOpB,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACgB,SAAN,IAAmBF,eAAOG,KAArC;AAAA,CAPoB,EAaVH,eAAOI,WAbG,EAiBtBJ,eAAOG,KAjBe,EAsBhBH,eAAOK,WAtBS,EA0BtBL,eAAOG,KA1Be,EA+BVH,eAAOM,WA/BG,EAmCpBN,eAAOG,KAnCa,EAqCtBH,eAAOG,KArCe,EA0CV,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACqB,oBAAN,IAA8BP,eAAOI,WAAhD;AAAA,CA1CU,EA+CtBJ,eAAOG,KA/Ce,CAA7B;;AAoDA,IAAMK,yBAAyB,GAAG,+BAAOjB,gBAAP,CAAH,k2BAEd,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CAFc,EAKxB,UAACjB,KAAD;AAAA,SAAWA,KAAK,CAACgB,SAAN,IAAmBF,eAAOS,WAArC;AAAA,CALwB,EAOtB,UAACvB,KAAD;AAAA,SAAWA,KAAK,CAACgB,SAAN,IAAmBF,eAAOS,WAArC;AAAA,CAPsB,EAaZT,eAAOU,UAbK,EAiBxBV,eAAOI,WAjBiB,EAsBlBJ,eAAOW,WAtBW,EA0BxBX,eAAOK,WA1BiB,EAgCZ,UAACnB,KAAD;AAAA,SAAYA,KAAK,CAACa,wBAAN,GAAiC,aAAjC,GAAiDC,eAAOG,KAApE;AAAA,CAhCY,EAoCtBH,eAAOY,WApCe,EAsCxBZ,eAAOY,WAtCiB,EA4CZ,UAAC1B,KAAD;AAAA,SAAWA,KAAK,CAACqB,oBAAN,IAA8B,aAAzC;AAAA,CA5CY,EA6CNP,eAAOC,WA7CD,EAiDxBD,eAAOS,WAjDiB,CAA/B;;;AA2EP,IAAMI,UAAU,gBAAGC,eAAMC,UAAN,CAAqD,gBAmBpDC,GAnBoD,EAmB5C;AAAA,MAlB1BC,EAkB0B,QAlB1BA,EAkB0B;AAAA,MAjB1BC,OAiB0B,QAjB1BA,OAiB0B;AAAA,MAhB1BC,KAgB0B,QAhB1BA,KAgB0B;AAAA,MAf1BC,MAe0B,QAf1BA,MAe0B;AAAA,MAd1B1B,cAc0B,QAd1BA,cAc0B;AAAA,MAb1B2B,cAa0B,QAb1BA,cAa0B;AAAA,MAZ1BC,QAY0B,QAZ1BA,QAY0B;AAAA,MAX1BvB,wBAW0B,QAX1BA,wBAW0B;AAAA,MAV1BwB,QAU0B,QAV1BA,QAU0B;AAAA,MAT1BrB,SAS0B,QAT1BA,SAS0B;AAAA,MAR1BL,aAQ0B,QAR1BA,aAQ0B;AAAA,MAP1B2B,QAO0B,QAP1BA,QAO0B;AAAA,MAN1BlC,QAM0B,QAN1BA,QAM0B;AAAA,MAL1BH,YAK0B,QAL1BA,YAK0B;AAAA,MAJ1BsC,UAI0B,QAJ1BA,UAI0B;AAAA,MAH1BlB,oBAG0B,QAH1BA,oBAG0B;AAAA,MAF1BmB,IAE0B,QAF1BA,IAE0B;AAAA,MAD1BC,MAC0B,QAD1BA,MAC0B;;AAE1B,MAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,CAAD,EAA4B;AACzD,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCD,MAAAA,CAAC,CAACE,cAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAND,CAF0B,CAU1B;;;AACA,UAAQb,OAAR;AACE,SAAK,WAAL;AACE,0BACE,qBAAC,yBAAD;AACE,QAAA,EAAE,EAAED,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,GAAG,EAAED,GAJP;AAKE,QAAA,OAAO,EAAE,iBAACgB,KAAD,EAAgD;AAACA,UAAAA,KAAK,CAACC,eAAN;AAAyBb,UAAAA,MAAM,CAACY,KAAD,CAAN;AAAe,SALpG;AAME,QAAA,SAAS,EAAE,mBAACH,CAAD;AAAA,iBAAYD,sBAAsB,CAACC,CAAD,CAAtB,IAA6BT,MAAM,EAA/C;AAAA,SANb;AAOE,QAAA,QAAQ,EAAEG,QAPZ;AAQE,QAAA,cAAc,EAAE7B,cAAc,IAAI,KARpC;AASE,QAAA,YAAY,EAAE2B,cAThB;AAUE,QAAA,wBAAwB,EAAEtB,wBAV5B;AAWE,QAAA,SAAS,EAAEG,SAXb;AAYE,QAAA,aAAa,EAAEL,aAZjB;AAaE,QAAA,QAAQ,EAAE2B,QAAQ,IAAI,CAbxB;AAcE,QAAA,YAAY,EAAErC,YAAY,IAAIgC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAd5D;AAeE,QAAA,WAAW,EAAEe,iCAff;AAgBE,QAAA,UAAU,EAAET,UAhBd;AAiBE,QAAA,MAAM,EAAEE,MAjBV;AAkBE,QAAA,oBAAoB,EAAEpB,oBAlBxB;AAAA,+BAmBE;AAAA,oBAAMe;AAAN;AAnBF,QADF;;AAuBF,SAAK,SAAL;AACA;AACE,0BACE,qBAAC,uBAAD;AACE,QAAA,EAAE,EAAEL,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,QAAQ,EAAE3B,QAJZ;AAKE,QAAA,GAAG,EAAE0B,GALP;AAME,QAAA,OAAO,EAAE,iBAACgB,KAAD,EAAiD;AAACA,UAAAA,KAAK,CAACC,eAAN;AAAyBb,UAAAA,MAAM,CAACY,KAAD,CAAN;AAAe,SANrG;AAOE,QAAA,SAAS,EAAE,mBAACH,CAAD;AAAA,iBAAYD,sBAAsB,CAACC,CAAD,CAAtB,IAA6BT,MAAM,EAA/C;AAAA,SAPb;AAQE,QAAA,QAAQ,EAAEG,QARZ;AASE,QAAA,cAAc,EAAE7B,cAAc,IAAI,KATpC;AAUE,QAAA,YAAY,EAAE2B,cAVhB;AAWE,QAAA,wBAAwB,EAAEtB,wBAX5B;AAYE,QAAA,SAAS,EAAEG,SAZb;AAaE,QAAA,aAAa,EAAEL,aAbjB;AAcE,QAAA,QAAQ,EAAE2B,QAAQ,IAAI,CAdxB;AAeE,QAAA,YAAY,EAAErC,YAAY,IAAIgC,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAf5D;AAgBE,QAAA,WAAW,EAAEe,iCAhBf;AAiBE,QAAA,UAAU,EAAET,UAjBd;AAkBE,QAAA,MAAM,EAAEE,MAlBV;AAmBE,QAAA,oBAAoB,EAAEpB,oBAnBxB;AAAA,+BAoBE;AAAA,oBAAMe;AAAN;AApBF,QADF;AA3BJ;AAoDD,CAlFkB,CAAnB;;;AApBEL,EAAAA,E;AACAC,EAAAA,O,4BAAU,S,EAAY,W;AACtBC,EAAAA,K,4BAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACA1B,EAAAA,c;AAEA2B,EAAAA,c;AACAE,EAAAA,Q;AACAxB,EAAAA,wB;AACAG,EAAAA,S;AACAL,EAAAA,a;AACA2B,EAAAA,Q;AACArC,EAAAA,Y;AACAsC,EAAAA,U;AACAlB,EAAAA,oB;AAEAe,EAAAA,Q;AACAK,EAAAA,M;;eAuFad,U","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n\n  const isPressingEnterOrSpace = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) && action()}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) && action()}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnter","e","key","preventDefault","stopPropagation","event","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}

package/dist/Button/Iconbutton.js

@@ -78,9 +78,10 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       type = _ref.type,
       hidden = _ref.hidden;
 
-  var isPressingEnterOrSpace = function isPressingEnterOrSpace(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
+  var isPressingEnter = function isPressingEnter(e) {
+    if (e.key === 'Enter') {
       e.preventDefault();
+      e.stopPropagation();
       return true;
     }
 
@@ -100,7 +101,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnterOrSpace(e) && action();
+          return isPressingEnter(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,
@@ -132,7 +133,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           action(event);
         },
         onKeyDown: function onKeyDown(e) {
-          return isPressingEnterOrSpace(e) && action();
+          return isPressingEnter(e) ? action() : null;
         },
         disabled: disabled,
         hideOnLowWidth: hideOnLowWidth || false,

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnterOrSpace","e","key","preventDefault","event","stopPropagation"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,MAAP,MAA4B,mBAA5B;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAAQC,yBAAR,QAAwC,WAAxC;;;AAcA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD;AAAA,SAA4BA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7E;AAAA,CAAxB;;AAEA,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB,CAACF,KAAD,EAA2B;AACtD,MAAMG,MAAM,GAAGJ,eAAe,CAACC,KAAD,CAA9B;;AACA,UAAOA,KAAK,CAACI,QAAb;AAEI,SAAK,MAAL;AACI,2BAAcD,MAAd,cAAwBA,MAAxB;;AAEJ,SAAK,OAAL;AACI,uBAAUA,MAAV,sBAA4BA,MAA5B;;AAEJ,SAAK,MAAL;AACA;AACI,uBAAUA,MAAV;AAVR;AAYD,CAdD;;AAgBA,IAAME,gBAAgB,GAAGV,MAAM,CAACW,MAAV,ivBAOT,UAACN,KAAD;AAAA,SAAYA,KAAK,CAACO,cAAN,GAAuB,MAAvB,GAAgC,OAA5C;AAAA,CAPS,EAQlBX,WAAW,CAACY,MARM,EAYH,UAACR,KAAD;AAAA,SAAYA,KAAK,CAACC,YAAN,aAAwBD,KAAK,CAACC,YAA9B,UAAiD,KAA7D;AAAA,CAZG,EAgBDC,oBAhBC,EAqBN,UAACF,KAAD;AAAA,SAAYA,KAAK,CAACS,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CArBM,EAsBP,UAACT,KAAD;AAAA,SAAYA,KAAK,CAACS,aAAN,GAAsB,OAAtB,GAAgC,MAA5C;AAAA,CAtBO,CAAtB;AA6CA,OAAO,IAAMC,uBAAuB,GAAGf,MAAM,CAACU,gBAAD,CAAT,81BAEZ,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACW,wBAAN,GAAiC,aAAjC,GAAiDd,MAAM,CAACe,WAApE;AAAA,CAFY,EAKtB,UAACZ,KAAD;AAAA,SAAWA,KAAK,CAACa,SAAN,IAAmBhB,MAAM,CAACiB,KAArC;AAAA,CALsB,EAOpB,UAACd,KAAD;AAAA,SAAWA,KAAK,CAACa,SAAN,IAAmBhB,MAAM,CAACiB,KAArC;AAAA,CAPoB,EAaVjB,MAAM,CAACkB,WAbG,EAiBtBlB,MAAM,CAACiB,KAjBe,EAsBhBjB,MAAM,CAACmB,WAtBS,EA0BtBnB,MAAM,CAACiB,KA1Be,EA+BVjB,MAAM,CAACoB,WA/BG,EAmCpBpB,MAAM,CAACiB,KAnCa,EAqCtBjB,MAAM,CAACiB,KArCe,EA0CV,UAACd,KAAD;AAAA,SAAWA,KAAK,CAACkB,oBAAN,IAA8BrB,MAAM,CAACkB,WAAhD;AAAA,CA1CU,EA+CtBlB,MAAM,CAACiB,KA/Ce,CAA7B;AAoDP,OAAO,IAAMK,yBAAyB,GAAGxB,MAAM,CAACU,gBAAD,CAAT,o1BAEd,UAACL,KAAD;AAAA,SAAYA,KAAK,CAACW,wBAAN,GAAiC,aAAjC,GAAiDd,MAAM,CAACiB,KAApE;AAAA,CAFc,EAKxB,UAACd,KAAD;AAAA,SAAWA,KAAK,CAACa,SAAN,IAAmBhB,MAAM,CAACuB,WAArC;AAAA,CALwB,EAOtB,UAACpB,KAAD;AAAA,SAAWA,KAAK,CAACa,SAAN,IAAmBhB,MAAM,CAACuB,WAArC;AAAA,CAPsB,EAaZvB,MAAM,CAACwB,UAbK,EAiBxBxB,MAAM,CAACkB,WAjBiB,EAsBlBlB,MAAM,CAACyB,WAtBW,EA0BxBzB,MAAM,CAACmB,WA1BiB,EAgCZ,UAAChB,KAAD;AAAA,SAAYA,KAAK,CAACW,wBAAN,GAAiC,aAAjC,GAAiDd,MAAM,CAACiB,KAApE;AAAA,CAhCY,EAoCtBjB,MAAM,CAAC0B,WApCe,EAsCxB1B,MAAM,CAAC0B,WAtCiB,EA4CZ,UAACvB,KAAD;AAAA,SAAWA,KAAK,CAACkB,oBAAN,IAA8B,aAAzC;AAAA,CA5CY,EA6CNrB,MAAM,CAACe,WA7CD,EAiDxBf,MAAM,CAACuB,WAjDiB,CAA/B;AA2EP,IAAMI,UAAU,gBAAG9B,KAAK,CAAC+B,UAAN,CAAqD,gBAmBpDC,GAnBoD,EAmB5C;AAAA,MAlB1BC,EAkB0B,QAlB1BA,EAkB0B;AAAA,MAjB1BC,OAiB0B,QAjB1BA,OAiB0B;AAAA,MAhB1BC,KAgB0B,QAhB1BA,KAgB0B;AAAA,MAf1BC,MAe0B,QAf1BA,MAe0B;AAAA,MAd1BvB,cAc0B,QAd1BA,cAc0B;AAAA,MAb1BwB,cAa0B,QAb1BA,cAa0B;AAAA,MAZ1BC,QAY0B,QAZ1BA,QAY0B;AAAA,MAX1BrB,wBAW0B,QAX1BA,wBAW0B;AAAA,MAV1BsB,QAU0B,QAV1BA,QAU0B;AAAA,MAT1BpB,SAS0B,QAT1BA,SAS0B;AAAA,MAR1BJ,aAQ0B,QAR1BA,aAQ0B;AAAA,MAP1ByB,QAO0B,QAP1BA,QAO0B;AAAA,MAN1B9B,QAM0B,QAN1BA,QAM0B;AAAA,MAL1BH,YAK0B,QAL1BA,YAK0B;AAAA,MAJ1BkC,UAI0B,QAJ1BA,UAI0B;AAAA,MAH1BjB,oBAG0B,QAH1BA,oBAG0B;AAAA,MAF1BkB,IAE0B,QAF1BA,IAE0B;AAAA,MAD1BC,MAC0B,QAD1BA,MAC0B;;AAE1B,MAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACC,CAAD,EAA4B;AACzD,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;AACtCD,MAAAA,CAAC,CAACE,cAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAND,CAF0B,CAU1B;;;AACA,UAAQb,OAAR;AACE,SAAK,WAAL;AACE,0BACE,KAAC,yBAAD;AACE,QAAA,EAAE,EAAED,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,GAAG,EAAED,GAJP;AAKE,QAAA,OAAO,EAAE,iBAACgB,KAAD,EAAgD;AAACA,UAAAA,KAAK,CAACC,eAAN;AAAyBb,UAAAA,MAAM,CAACY,KAAD,CAAN;AAAe,SALpG;AAME,QAAA,SAAS,EAAE,mBAACH,CAAD;AAAA,iBAAYD,sBAAsB,CAACC,CAAD,CAAtB,IAA6BT,MAAM,EAA/C;AAAA,SANb;AAOE,QAAA,QAAQ,EAAEG,QAPZ;AAQE,QAAA,cAAc,EAAE1B,cAAc,IAAI,KARpC;AASE,QAAA,YAAY,EAAEwB,cAThB;AAUE,QAAA,wBAAwB,EAAEpB,wBAV5B;AAWE,QAAA,SAAS,EAAEE,SAXb;AAYE,QAAA,aAAa,EAAEJ,aAZjB;AAaE,QAAA,QAAQ,EAAEyB,QAAQ,IAAI,CAbxB;AAcE,QAAA,YAAY,EAAEjC,YAAY,IAAI4B,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAd5D;AAeE,QAAA,WAAW,EAAE/B,yBAff;AAgBE,QAAA,UAAU,EAAEqC,UAhBd;AAiBE,QAAA,MAAM,EAAEE,MAjBV;AAkBE,QAAA,oBAAoB,EAAEnB,oBAlBxB;AAAA,+BAmBE;AAAA,oBAAMc;AAAN;AAnBF,QADF;;AAuBF,SAAK,SAAL;AACA;AACE,0BACE,KAAC,uBAAD;AACE,QAAA,EAAE,EAAEL,EADN;AAEE,QAAA,IAAI,EAAES,IAAF,aAAEA,IAAF,cAAEA,IAAF,GAAU,QAFhB;AAGE,uBAAaT,EAHf;AAIE,QAAA,QAAQ,EAAEvB,QAJZ;AAKE,QAAA,GAAG,EAAEsB,GALP;AAME,QAAA,OAAO,EAAE,iBAACgB,KAAD,EAAiD;AAACA,UAAAA,KAAK,CAACC,eAAN;AAAyBb,UAAAA,MAAM,CAACY,KAAD,CAAN;AAAe,SANrG;AAOE,QAAA,SAAS,EAAE,mBAACH,CAAD;AAAA,iBAAYD,sBAAsB,CAACC,CAAD,CAAtB,IAA6BT,MAAM,EAA/C;AAAA,SAPb;AAQE,QAAA,QAAQ,EAAEG,QARZ;AASE,QAAA,cAAc,EAAE1B,cAAc,IAAI,KATpC;AAUE,QAAA,YAAY,EAAEwB,cAVhB;AAWE,QAAA,wBAAwB,EAAEpB,wBAX5B;AAYE,QAAA,SAAS,EAAEE,SAZb;AAaE,QAAA,aAAa,EAAEJ,aAbjB;AAcE,QAAA,QAAQ,EAAEyB,QAAQ,IAAI,CAdxB;AAeE,QAAA,YAAY,EAAEjC,YAAY,IAAI4B,KAAK,KAAK,UAA1B,GAAuC,EAAvC,GAA4C,CAf5D;AAgBE,QAAA,WAAW,EAAE/B,yBAhBf;AAiBE,QAAA,UAAU,EAAEqC,UAjBd;AAkBE,QAAA,MAAM,EAAEE,MAlBV;AAmBE,QAAA,oBAAoB,EAAEnB,oBAnBxB;AAAA,+BAoBE;AAAA,oBAAMc;AAAN;AApBF,QADF;AA3BJ;AAoDD,CAlFkB,CAAnB;;AApBEL,EAAAA,E;AACAC,EAAAA,O,aAAU,S,EAAY,W;AACtBC,EAAAA,K,aAAQ,Q,EAAW,U;AACnBC,EAAAA,M;AACAvB,EAAAA,c;AAEAwB,EAAAA,c;AACAE,EAAAA,Q;AACAtB,EAAAA,wB;AACAE,EAAAA,S;AACAJ,EAAAA,a;AACAyB,EAAAA,Q;AACAjC,EAAAA,Y;AACAkC,EAAAA,U;AACAjB,EAAAA,oB;AAEAc,EAAAA,Q;AACAK,EAAAA,M;;AAuFF,eAAeb,UAAf","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n\n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n\n  const isPressingEnterOrSpace = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) && action()}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => isPressingEnterOrSpace(e) && action()}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","focusBackgroundColor","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","type","hidden","isPressingEnter","e","key","preventDefault","stopPropagation","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none !important;\n    }\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || COLORS.primary_700} !important;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  &:focus:not(:disabled) {\n    div {\n      background-color: ${(props) => props.focusBackgroundColor || 'transparent'};\n      box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.neutral_600};\n    }\n  }\n`;\n\nexport interface IconButtonProps {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  focusBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  focusBackgroundColor,\n  type,\n  hidden\n}: IconButtonProps, ref) => {\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) =>  {event.stopPropagation(); action(event);}}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={defaultOnMouseDownHandler}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          focusBackgroundColor={focusBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/Card/Card.cjs

@@ -39,8 +39,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), _.COLORS.white, function (props) {
-  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }" : "";
+var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), _.COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(_.COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(_.COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }") : "";
 });
 
 exports.CardTopLevelContainer = CardTopLevelContainer;

package/dist/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,oSACZC,SAAOC,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","props","interactionType","InteractionType","Clickable","disabled","neutral_200","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,iVACZC,SAAOC,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBN,SAAOO,WAL7B,yJAYsBP,SAAOO,WAZ7B,sKAkBsBP,SAAOO,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;;;IAuCKH,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAId,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEb,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEc,WAAlL;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;eAgCaE,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}

package/dist/Card/Card.js

@@ -16,8 +16,8 @@ import CardBottomSection from './CardBottomSection';
 import { COLORS } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), COLORS.white, function (props) {
-  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }" : "";
+export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ", "\n"])), COLORS.white, function (props) {
+  return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ".concat(COLORS.neutral_200, ";\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ").concat(COLORS.neutral_200, ";\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }") : "";
 });
 export var InteractionType;
 

package/dist/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,sRACZF,MAAM,CAACG,KADK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,idADK;AAAA,CAXyB,CAA3B;AAmCP,WAAYF,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGpB,KAAK,CAACqB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIZ,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEX,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEY,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;AAgCF,eAAeC,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border-width: 0px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}
+{"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","props","interactionType","InteractionType","Clickable","disabled","neutral_200","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,mUACZF,MAAM,CAACG,KADK,EAY9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,kIAKsBR,MAAM,CAACS,WAL7B,yJAYsBT,MAAM,CAACS,WAZ7B,sKAkBsBT,MAAM,CAACS,WAlB7B,wJADK;AAAA,CAZyB,CAA3B;AAuCP,WAAYH,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMI,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfL,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACK,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfP,QACe,QADfA,QACe;AACf,MAAMQ,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGK,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEQ,OAAhD;AAAyD,IAAA,QAAQ,EAAEX,eAAe,IAAIC,eAAe,CAACC,SAAnC,IAAgD,CAACC,QAAjD,GAA4D,CAA5D,GAAgE,CAAC,CAApI;AAAuI,IAAA,eAAe,EAAEH,eAAxJ;AAAyK,IAAA,OAAO,EAAEa,WAAlL;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEL,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGU,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEP,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAO,EAAAA,a;AACAJ,EAAAA,Q;;AAgCF,eAAeE,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n  background-color: ${COLORS.white};\n\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  border-radius: 8px;\n\n  border: 1px solid transparent;\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable && !props.disabled\n      ? `\n\n    &:active, &.active-state {\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n      border: 1px solid ${COLORS.neutral_200};\n    }\n\n    &:hover:focus, &:hover {\n      outline: none;\n      overflow: visible;\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.15);\n    }\n    \n    &:focus, &.focus-state {\n      border-width: 0px;\n      border: 1px solid ${COLORS.neutral_200};\n      outline: none;\n      overflow: hidden;\n      box-shadow: 0px 4px 12px 2px rgba(46, 127, 161, 0.25), 0px 0px 8px 2px #2E7FA1;\n    }`\n      : ``}\n`;\n\nexport enum InteractionType {\n  None,\n  Clickable,\n  Selectable,\n}\n\nexport interface CardProps {\n  interactionType: InteractionType;\n  onCardClicked: () => {};\n  disabled: boolean;\n  topSectionProps?: CardTopSectionProps;\n  middleSectionProps?: CardMiddleSectionProps;\n  bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n  interactionType = InteractionType.None,\n  onCardClicked,\n  topSectionProps,\n  middleSectionProps,\n  bottomSectionProps,\n  disabled\n}: CardProps) => {\n  const rootRef = React.useRef<HTMLDivElement>(null);\n\n  const onCardClick = () => {\n    if (interactionType == InteractionType.Clickable) {\n      if(onCardClicked) onCardClicked();\n      rootRef.current?.blur();\n    }\n  };\n\n  return (\n    <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable && !disabled ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n      {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n      {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n    </CardTopLevelContainer>\n  );\n};\n\nexport default Card;\n"],"file":"Card.js"}

package/dist/Card/CardBottomSection.cjs

@@ -25,7 +25,7 @@ var _Button = require("../Button");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -35,21 +35,19 @@ var ProgressContainer = _styledComponents.default.div(_templateObject || (_templ
 
 var NotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ", ";\n"])), _.COLORS.neutral_500);
 
-var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ", "\n"])), function (props) {
+var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 8px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n    color: ".concat(_.COLORS.neutral_300, ";\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
 
-var Divider = _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  height: 1px;\n  margin-bottom: 9px;\n"])), _.COLORS.neutral_100);
+var Divider = _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  height: 1px;\n  margin-bottom: 12px;\n"])), _.COLORS.neutral_100);
 
 var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 
 var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 
-var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 2;\n"])));
+var ButtonRowContainer = _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"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
 
-var ButtonRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (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"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
-
-var Container = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, ButtonRowContainer, function (props) {
   return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
@@ -96,7 +94,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
       })]
     }), authorName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
       disabled: disabled,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorName, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXXS, {
         children: authorName
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
         width: "80px",

package/dist/Card/CardBottomSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","COLORS","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAyBA,IAAMA,iBAAiB,GAAGC,0BAAOC,GAAV,mFAAvB;;AAEA,IAAMC,cAAc,GAAGF,0BAAOC,GAAV,qKAITE,SAAOC,WAJE,CAApB;;AAOA,IAAMC,eAAe,GAAGL,0BAAOC,GAAV,8PAWjB,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,0BACAJ,SAAOK,WADP,4EAOP,EAPG;AAAA,CAXY,CAArB;;AAqBA,IAAMC,OAAO,GAAGT,0BAAOC,GAAV,2NAESE,SAAOO,WAFhB,CAAb;;AASA,IAAMC,QAAQ,GAAGX,0BAAOC,GAAV,mPAAd;;AAaA,IAAMW,SAAS,GAAGZ,0BAAOC,GAAV,oPAAf;;AAaA,IAAMY,kBAAkB,GAAGb,0BAAOC,GAAV,kaAMFE,SAAOO,WANL,EAkBXP,SAAOW,WAlBI,CAAxB;;AAsBA,IAAMC,SAAS,GAAGf,0BAAOC,GAAV,gMAGH,UAAAK,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,SAArC;AAAA,CAHF,EAKXM,kBALW,EAMT,UAAAP,KAAK;AAAA,SAAIA,KAAK,CAACU,eAAN,IAAyBC,kBAAgBC,SAAzC,qBACEZ,KAAK,CAACC,QAAN,GAAiB,aAAjB,GAAiC,MADnC,SAC+C,EADnD;AAAA,CANI,CAAf;;AAWA,IAAMY,iBAAkE,GAAG,SAArEA,iBAAqE,OAY7C;AAAA,MAX5BH,eAW4B,QAX5BA,eAW4B;AAAA,MAV5BI,aAU4B,QAV5BA,aAU4B;AAAA,MAT5BC,WAS4B,QAT5BA,WAS4B;AAAA,+BAR5BC,YAQ4B;AAAA,MAR5BA,YAQ4B,kCARbC,qBAAmBC,IAQN;AAAA,MAP5BC,QAO4B,QAP5BA,QAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,SAK4B,QAL5BA,SAK4B;AAAA,MAJ5BC,aAI4B,QAJ5BA,aAI4B;AAAA,MAH5BC,UAG4B,QAH5BA,UAG4B;AAAA,MAF5BC,OAE4B,QAF5BA,OAE4B;AAAA,MAD5BvB,QAC4B,QAD5BA,QAC4B;AAE5B,MAAMwB,oBAAoB,GAAGX,aAAa,IAAIY,SAAjB,IAA8BP,QAA9B,IAA0CC,YAA1C,IAA0DC,SAA1D,IAAuEC,aAAvE,IAAwFC,UAArH;AACA,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEtB,QAArB;AAA+B,IAAA,eAAe,EAAES,eAAhD;AAAA,eACGe,oBAAoB,iBAAI,qBAAC,OAAD,KAD3B,EAEGX,aAAa,IAAIY,SAAjB,iBAA8B,qBAAC,iBAAD;AAAA,6BAC7B,qBAAC,gBAAD;AAAgB,QAAA,IAAI,EAAEC,OAAKC,KAA3B;AACgB,QAAA,IAAI,EAAEZ,YADtB;AAEgB,QAAA,OAAO,EAAEa,wBAAsBC,MAF/C;AAGgB,QAAA,KAAK,EAAEhB,aAHvB;AAIgB,QAAA,GAAG,EAAEC,WAAF,aAAEA,WAAF,cAAEA,WAAF,GAAiBD;AAJpC;AAD6B,MAFjC,EAUG,CAACK,QAAQ,IAAIC,YAAZ,IAA4BC,SAA5B,IAAyCC,aAA1C,kBAA4D,sBAAC,cAAD;AAAA,iBAC1D,CAACH,QAAQ,IAAIC,YAAb,kBACC,sBAAC,QAAD;AAAA,mBACGA,YADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAEvB,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEiC,qBAAmBC,IAAvE;AAAA,oBAA8Eb;AAA9E,UAFF;AAAA,QAFyD,EAO1D,CAACE,SAAS,IAAIC,aAAd,kBACC,sBAAC,SAAD;AAAA,mBACGA,aADH,eAEE,qBAAC,cAAD;AAAc,UAAA,KAAK,EAAEzB,SAAOC,WAA5B;AAAyC,UAAA,SAAS,EAAEiC,qBAAmBC,IAAvE;AAAA,oBAA8EX;AAA9E,UAFF;AAAA,QARyD;AAAA,MAV/D,EAyBGE,UAAU,iBAAI,sBAAC,eAAD;AAAiB,MAAA,QAAQ,EAAEtB,QAA3B;AAAA,8BACb,qBAAC,cAAD;AAAA,kBAAesB;AAAf,QADa,eAEb,qBAAC,mBAAD;AAAa,QAAA,KAAK,EAAC,MAAnB;AAA0B,QAAA,MAAM,EAAC;AAAjC,QAFa;AAAA,MAzBjB,EA8BGC,OAAO,iBAAI,qBAAC,kBAAD;AAAA,gBACTA,OAAO,CAACS,GAAR,CAAY,UAAAC,CAAC;AAAA,4BACZ,qBAAC,kBAAD;AAAY,UAAA,QAAQ,EAAEjC,QAAtB;AAAgC,UAAA,OAAO,EAAC,WAAxC;AAAoD,UAAA,KAAK,EAAC,UAA1D;AAAqE,UAAA,MAAM,EAAE,gBAACkC,CAAD,EAAO;AAACA,YAAAA,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEC,eAAH;AAAsBF,YAAAA,CAAC,CAACG,OAAF;AAAa,WAAxH;AAAA,oBACGH,CAAC,CAACI;AADL,UADY;AAAA,OAAb;AADS,MA9Bd;AAAA,IADF;AAwCD,CAvDD;;;AAlHExB,EAAAA,a;AACAC,EAAAA,W;AAGAI,EAAAA,Q;AACAC,EAAAA,Y;AACAC,EAAAA,S;AACAC,EAAAA,a;AAEAC,EAAAA,U;AACAC,EAAAA,O;AAhBAc,IAAAA,I;AACAD,IAAAA,O;;AAgBAE,EAAAA,O;AACAtC,EAAAA,Q;;eA+JaY,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 8px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 12px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/CardBottomSection.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 import * as React from 'react';
 import styled from 'styled-components';
@@ -12,15 +12,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 var NotesContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ", ";\n"])), COLORS.neutral_500);
-var AuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ", "\n"])), function (props) {
+var AuthorContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: 8px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n    color: ".concat(COLORS.neutral_300, ";\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ") : '';
 });
-var Divider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n"])), COLORS.neutral_100);
+var Divider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 12px;\n"])), COLORS.neutral_100);
 var NoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
 var NoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n"])));
-var AuthorName = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex-grow: 2;\n"])));
-var ButtonRowContainer = styled.div(_templateObject8 || (_templateObject8 = _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);
-var Container = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
+var ButtonRowContainer = 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);
+var Container = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ", ";\n\n  ", " {\n    ", "\n  }\n"])), function (props) {
   return props.disabled ? 'not-allowed' : 'pointer';
 }, ButtonRowContainer, function (props) {
   return props.interactionType == InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
@@ -67,7 +66,7 @@ var CardBottomSection = function CardBottomSection(_ref) {
       })]
     }), authorName && /*#__PURE__*/_jsxs(AuthorContainer, {
       disabled: disabled,
-      children: [/*#__PURE__*/_jsx(AuthorName, {
+      children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), /*#__PURE__*/_jsx(LaerdalLogo, {
         width: "80px",

package/dist/Card/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 22px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst AuthorName = styled.div`\n  flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <AuthorName>{authorName}</AuthorName>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}
+{"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","InteractionType","LinearProgress","LinearProgressType","LinearProgressVariant","Size","LaerdalLogo","IconButton","ProgressContainer","div","NotesContainer","neutral_500","AuthorContainer","props","disabled","neutral_300","Divider","neutral_100","NoteLeft","NoteRight","ButtonRowContainer","neutral_600","Container","interactionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Small","Normal","Bold","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentTextStyle, ComponentXXS, InteractionType, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n  icon: React.ReactNode;\n  onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n  interactionType: InteractionType;\n  progressLevel?: number;\n  progressMax?: number;\n  progressType?: LinearProgressType;\n\n  noteLeft?: string;\n  noteLeftIcon?: React.ReactNode;\n  noteRight?: string;\n  noteRightIcon?: React.ReactNode;\n  \n  authorName?: string;\n  actions?: ActionItem[];\n  logoSrc: string;\n  disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n  height: 24px;\n  margin-top: 24px;\n  position: relative;\n  color: ${COLORS.neutral_500};\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n  margin-top: 8px;\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 4px;\n  align-items: center;\n\n  div:first-child {\n    flex-grow: 2;\n  }\n\n  ${props => props.disabled ? `\n    color: ${COLORS.neutral_300};\n\n    svg, img {\n      filter: grayscale(100%);\n    }\n    \n  ` : ''}\n`;\n\nconst Divider = styled.div`\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\n  border-top-style: solid;\n  width: 100%;\n  height: 1px;\n  margin-bottom: 12px;\n`;\n\nconst NoteLeft = styled.div`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst NoteRight = styled.div`\n  position: absolute;\n  top: 0px;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n  }\n`;\n\nconst ButtonRowContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ${COLORS.neutral_100};\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: ${COLORS.neutral_600};\n  }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n  ${ButtonRowContainer} {\n    ${props => props.interactionType == InteractionType.Clickable ? \n      `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n  }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n  interactionType,\n  progressLevel,\n  progressMax,\n  progressType = LinearProgressType.Line,\n  noteLeft,\n  noteLeftIcon,\n  noteRight,\n  noteRightIcon,\n  authorName,\n  actions,\n  disabled\n}: CardBottomSectionProps) => {\n\n  const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {haveAtLeastSomething && <Divider />}\n      {progressLevel != undefined && <ProgressContainer>\n        <LinearProgress size={Size.Small}\n                        type={progressType}\n                        variant={LinearProgressVariant.Normal}\n                        value={progressLevel}\n                        max={progressMax ?? progressLevel} />\n        </ProgressContainer>}\n\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n        {(noteLeft || noteLeftIcon) && (\n          <NoteLeft>\n            {noteLeftIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\n          </NoteLeft>\n        )}\n        {(noteRight || noteRightIcon) && (\n          <NoteRight>\n            {noteRightIcon}\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\n          </NoteRight>\n        )}\n      </NotesContainer>}\n\n      {authorName && <AuthorContainer disabled={disabled}>\n        <ComponentXXS>{authorName}</ComponentXXS>\n        <LaerdalLogo width='80px' height='43px'  />\n      </AuthorContainer>}\n\n      {actions && <ButtonRowContainer>\n        {actions.map(x => (\n          <IconButton disabled={disabled} variant=\"secondary\" shape=\"circular\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n            {x.icon}\n          </IconButton>\n        ))}\n      </ButtonRowContainer>}\n    </Container>\n  );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.js"}

package/dist/Card/CardMiddleSection.cjs

@@ -40,7 +40,7 @@ var TagsContainer = _styledComponents.default.div(_templateObject3 || (_template
 var Tag = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 4px 8px 4px 8px;\n  background-color: ", ";\n  margin-right: 4px;\n  border-radius: 2px;\n"])), _.COLORS.neutral_100);
 
 var CategoryContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  svg {\n    margin-right: 6px;\n    color: ", ";\n  }\n"])), function (props) {
-  return props.extraTopMargin ? '30px' : '22px';
+  return props.extraTopMargin ? '24px' : '22px';
 }, function (props) {
   return props.bottomMargin ? '10px' : '0px';
 }, _.COLORS.neutral_500);

package/dist/Card/CardMiddleSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["Container","styled","div","props","interactionType","InteractionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","COLORS","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAaA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4WAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,kBAAgBC,SAAzC,2BAEUH,KAAK,CAACI,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;;AAyBA,IAAMC,SAAS,GAAGP,0BAAOC,GAAV,qMAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACM,MAAV;AAAA,CANZ,CAAf;;AASA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,iIAAnB;;AAKA,IAAMS,GAAG,GAAGV,0BAAOC,GAAV,6LAEaU,SAAOC,WAFpB,CAAT;;AAOA,IAAMC,iBAAiB,GAAGb,0BAAOC,GAAV,iQAIP,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACY,cAAN,GAAuB,MAAvB,GAAgC,MAArC;AAAA,CAJE,EAKJ,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACa,YAAN,GAAqB,MAArB,GAA8B,KAAnC;AAAA,CALD,EASVJ,SAAOK,WATG,CAAvB;;AAaA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5Bd,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5Be,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BjB,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEH,eAAhD;AAAA,eACGe,cAAc,iBAAI,qBAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,sBAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEM,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEf,SAAOK,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEK,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEpB,QAAQ,GAAGK,SAAOK,WAAV,GAAwBL,SAAOgB,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEX,SAAOiB,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,qBAAC,GAAD;AAAA,iCACE,qBAAC,aAAD;AAAa,YAAA,SAAS,EAAEL,qBAAmBC,IAA3C;AAAiD,YAAA,KAAK,EAAEf,SAAOiB,WAA/D;AAAA,sBACGE;AADH;AADF,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA8BD,CAxCD;;;AArEEZ,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAjB,EAAAA,Q;;eAwGaW,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 16px);\n  position: relative;\n  flex-direction: column;\n  padding-left: 16px;\n  padding-bottom: 20px;\n\n  .descriptionBlock {\n    margin-bottom: 14px;\n  }\n\n  .titleBlock {\n    margin-bottom: 12px;\n  }\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Tag = styled.div`\n  padding: 4px 8px 4px 8px;\n  background-color: ${COLORS.neutral_100};\n  margin-right: 4px;\n  border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${props => (props.extraTopMargin ? '30px' : '22px')};\n  margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n  svg {\n    margin-right: 6px;\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag>\n              <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n                {x}\n              </ComponentXS>\n            </Tag>\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["Container","styled","div","props","interactionType","InteractionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","COLORS","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAaA,IAAMA,SAAS,GAAGC,0BAAOC,GAAV,4WAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,kBAAgBC,SAAzC,2BAEUH,KAAK,CAACI,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;;AAyBA,IAAMC,SAAS,GAAGP,0BAAOC,GAAV,qMAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACM,MAAV;AAAA,CANZ,CAAf;;AASA,IAAMC,aAAa,GAAGT,0BAAOC,GAAV,iIAAnB;;AAKA,IAAMS,GAAG,GAAGV,0BAAOC,GAAV,6LAEaU,SAAOC,WAFpB,CAAT;;AAOA,IAAMC,iBAAiB,GAAGb,0BAAOC,GAAV,iQAIP,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACY,cAAN,GAAuB,MAAvB,GAAgC,MAArC;AAAA,CAJE,EAKJ,UAAAZ,KAAK;AAAA,SAAKA,KAAK,CAACa,YAAN,GAAqB,MAArB,GAA8B,KAAnC;AAAA,CALD,EASVJ,SAAOK,WATG,CAAvB;;AAaA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5Bd,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5Be,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BjB,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEH,eAAhD;AAAA,eACGe,cAAc,iBAAI,qBAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,sBAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEM,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEf,SAAOK,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEK,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEpB,QAAQ,GAAGK,SAAOK,WAAV,GAAwBL,SAAOgB,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEX,SAAOiB,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,qBAAC,GAAD;AAAA,iCACE,qBAAC,aAAD;AAAa,YAAA,SAAS,EAAEL,qBAAmBC,IAA3C;AAAiD,YAAA,KAAK,EAAEf,SAAOiB,WAA/D;AAAA,sBACGE;AADH;AADF,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA8BD,CAxCD;;;AArEEZ,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAjB,EAAAA,Q;;eAwGaW,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 16px);\n  position: relative;\n  flex-direction: column;\n  padding-left: 16px;\n  padding-bottom: 20px;\n\n  .descriptionBlock {\n    margin-bottom: 14px;\n  }\n\n  .titleBlock {\n    margin-bottom: 12px;\n  }\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Tag = styled.div`\n  padding: 4px 8px 4px 8px;\n  background-color: ${COLORS.neutral_100};\n  margin-right: 4px;\n  border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${props => (props.extraTopMargin ? '24px' : '22px')};\n  margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n  svg {\n    margin-right: 6px;\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag>\n              <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n                {x}\n              </ComponentXS>\n            </Tag>\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}

package/dist/Card/CardMiddleSection.js

@@ -17,7 +17,7 @@ var ColorBand = styled.div(_templateObject2 || (_templateObject2 = _taggedTempla
 var TagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n"])));
 var Tag = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding: 4px 8px 4px 8px;\n  background-color: ", ";\n  margin-right: 4px;\n  border-radius: 2px;\n"])), COLORS.neutral_100);
 var CategoryContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ", ";\n  margin-bottom: ", ";\n\n  svg {\n    margin-right: 6px;\n    color: ", ";\n  }\n"])), function (props) {
-  return props.extraTopMargin ? '30px' : '22px';
+  return props.extraTopMargin ? '24px' : '22px';
 }, function (props) {
   return props.bottomMargin ? '10px' : '0px';
 }, COLORS.neutral_500);

package/dist/Card/CardMiddleSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","InteractionType","Container","div","props","interactionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","Bold","black","neutral_600","map","x"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 16px);\n  position: relative;\n  flex-direction: column;\n  padding-left: 16px;\n  padding-bottom: 20px;\n\n  .descriptionBlock {\n    margin-bottom: 14px;\n  }\n\n  .titleBlock {\n    margin-bottom: 12px;\n  }\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Tag = styled.div`\n  padding: 4px 8px 4px 8px;\n  background-color: ${COLORS.neutral_100};\n  margin-right: 4px;\n  border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${props => (props.extraTopMargin ? '30px' : '22px')};\n  margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n  svg {\n    margin-right: 6px;\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag>\n              <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n                {x}\n              </ComponentXS>\n            </Tag>\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","ComponentXS","InteractionType","Container","div","props","interactionType","Clickable","disabled","ColorBand","$color","TagsContainer","Tag","neutral_100","CategoryContainer","extraTopMargin","bottomMargin","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","Bold","black","neutral_600","map","x"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 16px);\n  position: relative;\n  flex-direction: column;\n  padding-left: 16px;\n  padding-bottom: 20px;\n\n  .descriptionBlock {\n    margin-bottom: 14px;\n  }\n\n  .titleBlock {\n    margin-bottom: 12px;\n  }\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n`;\n\nconst Tag = styled.div`\n  padding: 4px 8px 4px 8px;\n  background-color: ${COLORS.neutral_100};\n  margin-right: 4px;\n  border-radius: 2px;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-top: ${props => (props.extraTopMargin ? '24px' : '22px')};\n  margin-bottom: ${props => (props.bottomMargin ? '10px' : '0px')};\n\n  svg {\n    margin-right: 6px;\n    color: ${COLORS.neutral_500};\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag>\n              <ComponentXS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_600}>\n                {x}\n              </ComponentXS>\n            </Tag>\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}