@laerdal/life-react-components 1.9.8-dev.8 → 1.9.8-dev.9.full

package/dist/Card/CardMiddleSection.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,SAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,YAAD;AAAY,QAAA,SAAS,EAAEQ,qBAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,SAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,aAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,qBAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,SAAOC,WAAV,GAAwBD,SAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,YAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,SAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,KAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: CardTag[];\n  row2Tags?: CardTag[];\n  disabled: boolean;\n}\n\nexport interface CardTag {\n  label: string;\n  variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  row2Tags,\n  disabled,\n}: CardMiddleSectionProps) => {\n  return (\n    <CardMiddleSectionContainer>\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CardCategoryContainer>\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        <CardTagsContainer>\n          {tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n      {row2Tags && (\n        <CardTagsContainer>\n          {row2Tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n    </CardMiddleSectionContainer>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.cjs"}

package/dist/Card/CardMiddleSection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: CardTag[];\n  row2Tags?: CardTag[];\n  disabled: boolean;\n}\n\nexport interface CardTag {\n  label: string;\n  variant?: TagVariants;\n}\n\nexport const CardMiddleSectionContainer = styled.div`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n`;\n\nexport const CardColorBand = 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\nexport const CardTagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  row2Tags,\n  disabled,\n}: CardMiddleSectionProps) => {\n  return (\n    <CardMiddleSectionContainer>\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CardCategoryContainer>\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        <CardTagsContainer>\n          {tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n      {row2Tags && (\n        <CardTagsContainer>\n          {row2Tags.map((x, index) => (\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} />\n          ))}\n        </CardTagsContainer>\n      )}\n    </CardMiddleSectionContainer>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}

package/dist/Card/CardTopSection.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["CardImg","styled","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAgBO,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,6MAAb;;;;AAQA,IAAMC,mBAAmB,GAAGF,0BAAOG,GAAV,0KAAzB;;;;AAQA,IAAMC,uBAAuB,GAAGJ,0BAAOG,GAAV,iLAMhC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CAN2B,CAA7B;;;;AAYA,IAAMC,mBAAmB,GAAGP,0BAAOG,GAAV,ocAEV,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFK,EAcnB,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdc,CAAzB;;;;AAsBA,IAAMC,qBAAqB,GAAGV,0BAAOG,GAAV,8MAOVQ,SAAOC,KAPG,CAA3B;;;;AAWP,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAY4B;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,OAOyB,QAPzBA,OAOyB;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,UAMY;AAAA,MALzBC,mBAKyB,QALzBA,mBAKyB;AAAA,MAJzBC,mBAIyB,QAJzBA,mBAIyB;AAAA,MAHzBC,2BAGyB,QAHzBA,2BAGyB;AAAA,MAFzBC,sBAEyB,QAFzBA,sBAEyB;AAAA,MADzBjB,QACyB,QADzBA,QACyB;AAC/F,sBACE,sBAAC,uBAAD;AAAyB,IAAA,QAAQ,EAAEA,QAAnC;AAAA,4BACE,qBAAC,OAAD;AAAS,MAAA,GAAG,EAAEU;AAAd,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,qBAAD;AAAA,6BACE,qBAAC,iBAAD;AAAU,QAAA,QAAQ,EAAET,QAApB;AAA8B,QAAA,MAAM,EAAE,gBAACQ,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAAtC;AAAmG,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAAzH;AADF,MAHJ,EAOG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,mBAAD;AAAA,6BACE,qBAAC,QAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MARJ,EAYG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,mBAAD;AAAqB,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAA5D;AACiB,MAAA,gBAAgB,EAAEhB,QAAQ,GAAGK,SAAOa,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EAD7F;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,qBAAC,sBAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAEG,+BAAmBC,OAApF;AAAA,kBACGL;AADH,QAJJ;AAAA,MAbJ;AAAA,IADF;AA0BD,CAvCD;;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAV,EAAAA,Q;;eAyGaO,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../styles/typography';\nimport Checkbox from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nexport const CardImg = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nexport const CardTopTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n                                                                        selected,\n                                                                        setSelected,\n                                                                        image,\n                                                                        tagLabel,\n                                                                        tagIcon,\n                                                                        tagVariant = 'positive',\n                                                                        highlightRibbonIcon,\n                                                                        highlightRibbonText,\n                                                                        highlightRibbonContentColor,\n                                                                        highlightRibbonBgColor,\n                                                                        disabled\n                                                                      }: CardTopSectionProps) => {\n  return (\n    <CardTopSectionContainer disabled={disabled}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer $color={highlightRibbonContentColor ?? ''}\n                         $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

package/dist/Card/CardTopSection.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","CardImg","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../styles/typography';\nimport Checkbox from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nexport const CardImg = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nexport const CardTopTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n                                                                        selected,\n                                                                        setSelected,\n                                                                        image,\n                                                                        tagLabel,\n                                                                        tagIcon,\n                                                                        tagVariant = 'positive',\n                                                                        highlightRibbonIcon,\n                                                                        highlightRibbonText,\n                                                                        highlightRibbonContentColor,\n                                                                        highlightRibbonBgColor,\n                                                                        disabled\n                                                                      }: CardTopSectionProps) => {\n  return (\n    <CardTopSectionContainer disabled={disabled}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer $color={highlightRibbonContentColor ?? ''}\n                         $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}