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

package/dist/Card/{CardMiddleSection.cjs → VerticalCard/CardMiddleSection.cjs}

@@ -17,7 +17,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _ = require("..");
+var _index = require("../../index");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -41,7 +41,7 @@ var CardTagsContainer = _styledComponents.default.div(_templateObject3 || (_temp
 
 exports.CardTagsContainer = CardTagsContainer;
 
-var CardCategoryContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), _.COLORS.neutral_500);
+var CardCategoryContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n\n  svg {\n    color: ", ";\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), _index.COLORS.neutral_500);
 
 exports.CardCategoryContainer = CardCategoryContainer;
 
@@ -55,30 +55,31 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       row2Tags = _ref.row2Tags,
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardMiddleSectionContainer, {
+    "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardColorBand, {
       $color: colorBandColor
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardCategoryContainer, {
       extraTopMargin: Boolean(colorBandColor),
       bottomMargin: Boolean(categoryIcon || categoryLabel),
-      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
-        textStyle: _.ComponentTextStyle.Bold,
-        color: _.COLORS.neutral_500,
+      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
+        textStyle: _index.ComponentTextStyle.Bold,
+        color: _index.COLORS.neutral_500,
         children: categoryLabel
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXL, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentXL, {
       className: "titleBlock",
-      textStyle: _.ComponentTextStyle.Bold,
-      color: disabled ? _.COLORS.neutral_500 : _.COLORS.black,
+      textStyle: _index.ComponentTextStyle.Bold,
+      color: disabled ? _index.COLORS.neutral_500 : _index.COLORS.black,
       children: title
-    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ComponentS, {
       className: "descriptionBlock",
-      color: _.COLORS.neutral_600,
+      color: _index.COLORS.neutral_600,
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTagsContainer, {
       children: tags.map(function (x, index) {
         var _x$variant;
 
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
           label: x.label,
           variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
         }, "".concat(x.label, "_").concat(index));
@@ -87,7 +88,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       children: row2Tags.map(function (x, index) {
         var _x$variant2;
 
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Tag, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
           label: x.label,
           variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
         }, "".concat(x.label, "_").concat(index));
@@ -108,7 +109,7 @@ CardMiddleSection.propTypes = {
   row2Tags: _propTypes.default.arrayOf(_propTypes.default.shape({
     label: _propTypes.default.string.isRequired
   })),
-  disabled: _propTypes.default.bool.isRequired
+  disabled: _propTypes.default.bool
 };
 var _default = CardMiddleSection;
 exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/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,cAAOC,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;AAA4B,mBAAa,oBAAzC;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,iBAAD;AAAY,QAAA,SAAS,EAAEQ,0BAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,cAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,kBAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,0BAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,cAAOC,WAAV,GAAwBD,cAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,iBAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,cAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,UAAD;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,UAAD;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 '../../index';\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 data-testid={'card-middleSection'} >\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.d.ts → VerticalCard/CardMiddleSection.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagVariants } from '..';
+import { TagVariants } from '../../index';
 export interface CardMiddleSectionProps {
     colorBandColor?: string;
     categoryIcon?: React.ReactNode;
@@ -8,7 +8,7 @@ export interface CardMiddleSectionProps {
     description?: string;
     tags?: CardTag[];
     row2Tags?: CardTag[];
-    disabled: boolean;
+    disabled?: boolean;
 }
 export interface CardTag {
     label: string;

package/dist/Card/{CardMiddleSection.js → VerticalCard/CardMiddleSection.js}

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])));
@@ -25,6 +25,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       row2Tags = _ref.row2Tags,
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
+    "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
       $color: colorBandColor
     }), /*#__PURE__*/_jsxs(CardCategoryContainer, {
@@ -78,7 +79,7 @@ CardMiddleSection.propTypes = {
   row2Tags: _pt.arrayOf(_pt.shape({
     label: _pt.string.isRequired
   })),
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardMiddleSection;
 //# sourceMappingURL=CardMiddleSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/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 '../../index';\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 data-testid={'card-middleSection'} >\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 → VerticalCard/CardTopSection.cjs}

@@ -17,13 +17,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _typography = require("../styles/typography");
+var _typography = require("../../styles/typography");
 
-var _Checkbox = _interopRequireDefault(require("../InputFields/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../InputFields/Checkbox"));
 
-var _Tag = require("../Tag");
+var _Tag = require("../../Tag");
 
-var _ = require("..");
+var _index = require("../../index");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -55,11 +55,10 @@ var CardRibbonContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 exports.CardRibbonContainer = CardRibbonContainer;
 
-var CardCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
+var CardCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _index.COLORS.white);
 
 exports.CardCheckboxContainer = CardCheckboxContainer;
-
-var CardTopSection = function CardTopSection(_ref) {
+var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
@@ -74,10 +73,13 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
     disabled: disabled,
+    "data-testid": 'card-topSection',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CardImg, {
       src: image
     }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        ref: ref,
         disabled: disabled,
         select: function select(selected) {
           return setSelected && setSelected(selected);
@@ -91,8 +93,9 @@ var CardTopSection = function CardTopSection(_ref) {
         icon: tagIcon
       })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
-      $backgroundColor: disabled ? _.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
+      $backgroundColor: disabled ? _index.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
         color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
         textStyle: _typography.ComponentTextStyle.Regular,
@@ -100,19 +103,18 @@ var CardTopSection = function CardTopSection(_ref) {
       })]
     })]
   });
-};
-
+});
 CardTopSection.propTypes = {
   selected: _propTypes.default.bool,
   setSelected: _propTypes.default.func,
   tagLabel: _propTypes.default.string,
   tagIcon: _propTypes.default.node,
   highlightRibbonText: _propTypes.default.string,
-  highlightRibbonIcon: _propTypes.default.string,
+  highlightRibbonIcon: _propTypes.default.node,
   highlightRibbonContentColor: _propTypes.default.string,
   highlightRibbonBgColor: _propTypes.default.string,
   image: _propTypes.default.string,
-  disabled: _propTypes.default.bool.isRequired
+  disabled: _propTypes.default.bool
 };
 var _default = CardTopSection;
 exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"names":["CardImg","styled","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","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 '../../index';\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?: React.ReactNode;\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.forwardRef(({\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, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    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 data-testid={'card-topSection-ribbon'} $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.d.ts → VerticalCard/CardTopSection.d.ts}

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagVariants } from '../Tag';
+import { TagVariants } from '../../Tag';
 export interface CardTopSectionProps {
     selected?: boolean;
     setSelected?: (arg0: boolean) => void;
@@ -7,21 +7,21 @@ export interface CardTopSectionProps {
     tagIcon?: React.ReactNode;
     tagVariant?: TagVariants;
     highlightRibbonText?: string;
-    highlightRibbonIcon?: string;
+    highlightRibbonIcon?: React.ReactNode;
     highlightRibbonContentColor?: string;
     highlightRibbonBgColor?: string;
     image?: string;
-    disabled: boolean;
+    disabled?: boolean;
 }
 export declare const CardImg: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled: boolean;
+    disabled?: boolean | undefined;
 }, never>;
 export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
     $color: string;
     $backgroundColor: string;
 }, never>;
 export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardTopSection: React.FunctionComponent<CardTopSectionProps>;
+declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
 export default CardTopSection;

package/dist/Card/{CardTopSection.js → VerticalCard/CardTopSection.js}

@@ -5,10 +5,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { ComponentS, ComponentTextStyle } from '../styles/typography';
-import Checkbox from '../InputFields/Checkbox';
-import { Tag } from '../Tag';
-import { COLORS } from '..';
+import { ComponentS, ComponentTextStyle } from '../../styles/typography';
+import Checkbox from '../../InputFields/Checkbox';
+import { Tag } from '../../Tag';
+import { COLORS } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardImg = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
@@ -22,8 +22,7 @@ export var CardRibbonContainer = styled.div(_templateObject4 || (_templateObject
   return props.$color;
 });
 export var CardCheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
-
-var CardTopSection = function CardTopSection(_ref) {
+var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
@@ -38,10 +37,13 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
     disabled: disabled,
+    "data-testid": 'card-topSection',
     children: [/*#__PURE__*/_jsx(CardImg, {
       src: image
     }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/_jsx(Checkbox, {
+        ref: ref,
         disabled: disabled,
         select: function select(selected) {
           return setSelected && setSelected(selected);
@@ -55,6 +57,7 @@ var CardTopSection = function CardTopSection(_ref) {
         icon: tagIcon
       })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
@@ -64,19 +67,18 @@ var CardTopSection = function CardTopSection(_ref) {
       })]
     })]
   });
-};
-
+});
 CardTopSection.propTypes = {
   selected: _pt.bool,
   setSelected: _pt.func,
   tagLabel: _pt.string,
   tagIcon: _pt.node,
   highlightRibbonText: _pt.string,
-  highlightRibbonIcon: _pt.string,
+  highlightRibbonIcon: _pt.node,
   highlightRibbonContentColor: _pt.string,
   highlightRibbonBgColor: _pt.string,
   image: _pt.string,
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardTopSection;
 //# sourceMappingURL=CardTopSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","CardImg","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","Regular"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,UAAR,EAAoBC,kBAApB,QAA6C,yBAA7C;AACA,OAAOC,QAAP,MAAqB,4BAArB;AACA,SAAQC,GAAR,QAA+B,WAA/B;AAEA,SAAQC,MAAR,QAAqB,aAArB;;;AAgBA,OAAO,IAAMC,OAAO,GAAGN,MAAM,CAACO,GAAV,+LAAb;AAQP,OAAO,IAAMC,mBAAmB,GAAGR,MAAM,CAACS,GAAV,4JAAzB;AAQP,OAAO,IAAMC,uBAAuB,GAAGV,MAAM,CAACS,GAAV,mKAMhC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CAN2B,CAA7B;AAYP,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACS,GAAV,sbAEV,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFK,EAcnB,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdc,CAAzB;AAsBP,OAAO,IAAMC,qBAAqB,GAAGhB,MAAM,CAACS,GAAV,gMAOVJ,MAAM,CAACY,KAPG,CAA3B;AAWP,IAAMC,cAAc,gBAAGnB,KAAK,CAACoB,UAAN,CAAiB,gBAYyBC,GAZzB,EAY4D;AAAA,MAXzDC,QAWyD,QAXzDA,QAWyD;AAAA,MAVzDC,WAUyD,QAVzDA,WAUyD;AAAA,MATzDC,KASyD,QATzDA,KASyD;AAAA,MARzDC,QAQyD,QARzDA,QAQyD;AAAA,MAPzDC,OAOyD,QAPzDA,OAOyD;AAAA,6BANzDC,UAMyD;AAAA,MANzDA,UAMyD,gCAN5C,UAM4C;AAAA,MALzDC,mBAKyD,QALzDA,mBAKyD;AAAA,MAJzDC,mBAIyD,QAJzDA,mBAIyD;AAAA,MAHzDC,2BAGyD,QAHzDA,2BAGyD;AAAA,MAFzDC,sBAEyD,QAFzDA,sBAEyD;AAAA,MADzDlB,QACyD,QADzDA,QACyD;AAElG,sBACE,MAAC,uBAAD;AAAyB,IAAA,QAAQ,EAAEA,QAAnC;AAA6C,mBAAa,iBAA1D;AAAA,4BACE,KAAC,OAAD;AAAS,MAAA,GAAG,EAAEW;AAAd,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,KAAC,qBAAD;AAAuB,qBAAa,0BAApC;AAAA,6BACE,KAAC,QAAD;AAAU,QAAA,GAAG,EAAEF,GAAf;AACU,QAAA,QAAQ,EAAER,QADpB;AAEU,QAAA,MAAM,EAAE,gBAACS,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAFlB;AAGU,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAHhC;AADF,MAHJ,EAUG,CAACG,QAAQ,IAAIC,OAAb,kBACC,KAAC,mBAAD;AAAA,6BACE,KAAC,GAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MAXJ,EAeG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,MAAC,mBAAD;AAAqB,qBAAa,wBAAlC;AAA4D,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAnG;AACqB,MAAA,gBAAgB,EAAEjB,QAAQ,GAAGP,MAAM,CAAC0B,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EADjG;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,KAAC,UAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAE3B,kBAAkB,CAAC8B,OAApF;AAAA,kBACGJ;AADH,QAJJ;AAAA,MAhBJ;AAAA,IADF;AA6BD,CA3CsB,CAAvB;;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;AACAX,EAAAA,Q;;AA6GF,eAAeM,cAAf","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 '../../index';\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?: React.ReactNode;\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.forwardRef(({\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, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    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 data-testid={'card-topSection-ribbon'} $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"}

package/dist/Card/VerticalCard/index.cjs

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Card: true,
+  CardBottomSection: true,
+  CardMiddleSection: true,
+  CardTopSection: true
+};
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "CardBottomSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardBottomSection.default;
+  }
+});
+Object.defineProperty(exports, "CardMiddleSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardMiddleSection.default;
+  }
+});
+Object.defineProperty(exports, "CardTopSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardTopSection.default;
+  }
+});
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
+
+Object.keys(_CardBottomSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardBottomSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardBottomSection[key];
+    }
+  });
+});
+
+var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
+
+Object.keys(_CardMiddleSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardMiddleSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardMiddleSection[key];
+    }
+  });
+});
+
+var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
+
+Object.keys(_CardTopSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardTopSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardTopSection[key];
+    }
+  });
+});
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.cjs"}

package/dist/Card/VerticalCard/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card';
+export { default as CardBottomSection } from './CardBottomSection';
+export * from './CardBottomSection';
+export { default as CardMiddleSection } from './CardMiddleSection';
+export * from './CardMiddleSection';
+export { default as CardTopSection } from './CardTopSection';
+export * from './CardTopSection';

package/dist/Card/VerticalCard/index.js

@@ -0,0 +1,8 @@
+export { default as Card } from './Card';
+export { default as CardBottomSection } from './CardBottomSection';
+export * from './CardBottomSection';
+export { default as CardMiddleSection } from './CardMiddleSection';
+export * from './CardMiddleSection';
+export { default as CardTopSection } from './CardTopSection';
+export * from './CardTopSection';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AAEA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,cAAc,kBAAd","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.js"}

package/dist/Card/index.cjs

@@ -1,88 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  Card: true,
-  CardBottomSection: true,
-  CardMiddleSection: true,
-  CardTopSection: true
-};
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function get() {
-    return _Card.default;
-  }
-});
-Object.defineProperty(exports, "CardBottomSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardBottomSection.default;
-  }
-});
-Object.defineProperty(exports, "CardMiddleSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardMiddleSection.default;
-  }
-});
-Object.defineProperty(exports, "CardTopSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardTopSection.default;
-  }
-});
-
-var _Card = _interopRequireDefault(require("./Card"));
-
-var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
-
-Object.keys(_CardBottomSection).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardBottomSection[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CardBottomSection[key];
-    }
-  });
-});
 
-var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
+var _VerticalCard = require("./VerticalCard");
 
-Object.keys(_CardMiddleSection).forEach(function (key) {
+Object.keys(_VerticalCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardMiddleSection[key]) return;
+  if (key in exports && exports[key] === _VerticalCard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CardMiddleSection[key];
+      return _VerticalCard[key];
     }
   });
 });
 
-var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
+var _HorizontalCard = require("./HorizontalCard");
 
-Object.keys(_CardTopSection).forEach(function (key) {
+Object.keys(_HorizontalCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardTopSection[key]) return;
+  if (key in exports && exports[key] === _HorizontalCard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CardTopSection[key];
+      return _HorizontalCard[key];
     }
   });
 });
-
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.cjs.map

package/dist/Card/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Card/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"file":"index.cjs"}

package/dist/Card/index.d.ts

@@ -1,7 +1,2 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';
+export * from './VerticalCard';
+export * from './HorizontalCard';

package/dist/Card/index.js

@@ -1,8 +1,3 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';
+export * from './VerticalCard';
+export * from './HorizontalCard';
 //# sourceMappingURL=index.js.map

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AAEA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,cAAc,kBAAd","sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"file":"index.js"}