@laerdal/life-react-components 1.5.1-dev.2 → 1.5.1-dev.21

package/dist/Card/CardMiddleSection.cjs

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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; }
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  ", "\n"])), function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
+
+var ColorBand = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
+  return props.$color;
+});
+
+var TagsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n"])));
+
+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';
+}, function (props) {
+  return props.bottomMargin ? '10px' : '0px';
+}, _.COLORS.neutral_500);
+
+var CardMiddleSection = function CardMiddleSection(_ref) {
+  var interactionType = _ref.interactionType,
+      colorBandColor = _ref.colorBandColor,
+      categoryIcon = _ref.categoryIcon,
+      categoryLabel = _ref.categoryLabel,
+      title = _ref.title,
+      description = _ref.description,
+      tags = _ref.tags,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [colorBandColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorBand, {
+      $color: colorBandColor
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(CategoryContainer, {
+      extraTopMargin: Boolean(colorBandColor),
+      bottomMargin: Boolean(categoryIcon || categoryLabel),
+      children: [categoryIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
+        textStyle: _.ComponentTextStyle.Bold,
+        color: _.COLORS.neutral_500,
+        children: categoryLabel
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXL, {
+      className: "titleBlock",
+      textStyle: _.ComponentTextStyle.Bold,
+      color: disabled ? _.COLORS.neutral_500 : _.COLORS.black,
+      children: title
+    }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentS, {
+      className: "descriptionBlock",
+      color: _.COLORS.neutral_600,
+      children: description
+    }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagsContainer, {
+      children: tags.map(function (x) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Tag, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.ComponentXS, {
+            textStyle: _.ComponentTextStyle.Bold,
+            color: _.COLORS.neutral_600,
+            children: x
+          })
+        });
+      })
+    })]
+  });
+};
+
+CardMiddleSection.propTypes = {
+  colorBandColor: _propTypes.default.string,
+  categoryIcon: _propTypes.default.node,
+  categoryLabel: _propTypes.default.string,
+  title: _propTypes.default.string.isRequired,
+  description: _propTypes.default.string,
+  tags: _propTypes.default.arrayOf(_propTypes.default.string),
+  disabled: _propTypes.default.bool.isRequired
+};
+var _default = CardMiddleSection;
+exports.default = _default;
+//# sourceMappingURL=CardMiddleSection.cjs.map

package/dist/Card/CardMiddleSection.cjs.map

@@ -0,0 +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"}

package/dist/Card/CardMiddleSection.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { InteractionType } from '..';
+export interface CardMiddleSectionProps {
+    colorBandColor?: string;
+    interactionType: InteractionType;
+    categoryIcon?: React.ReactNode;
+    categoryLabel?: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    disabled: boolean;
+}
+declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
+export default CardMiddleSection;

package/dist/Card/CardMiddleSection.js

@@ -0,0 +1,80 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  ", "\n"])), function (props) {
+  return props.interactionType == InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
+var ColorBand = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), function (props) {
+  return props.$color;
+});
+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';
+}, function (props) {
+  return props.bottomMargin ? '10px' : '0px';
+}, COLORS.neutral_500);
+
+var CardMiddleSection = function CardMiddleSection(_ref) {
+  var interactionType = _ref.interactionType,
+      colorBandColor = _ref.colorBandColor,
+      categoryIcon = _ref.categoryIcon,
+      categoryLabel = _ref.categoryLabel,
+      title = _ref.title,
+      description = _ref.description,
+      tags = _ref.tags,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [colorBandColor && /*#__PURE__*/_jsx(ColorBand, {
+      $color: colorBandColor
+    }), /*#__PURE__*/_jsxs(CategoryContainer, {
+      extraTopMargin: Boolean(colorBandColor),
+      bottomMargin: Boolean(categoryIcon || categoryLabel),
+      children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
+        textStyle: ComponentTextStyle.Bold,
+        color: COLORS.neutral_500,
+        children: categoryLabel
+      })]
+    }), /*#__PURE__*/_jsx(ComponentXL, {
+      className: "titleBlock",
+      textStyle: ComponentTextStyle.Bold,
+      color: disabled ? COLORS.neutral_500 : COLORS.black,
+      children: title
+    }), description && /*#__PURE__*/_jsx(ComponentS, {
+      className: "descriptionBlock",
+      color: COLORS.neutral_600,
+      children: description
+    }), tags && /*#__PURE__*/_jsx(TagsContainer, {
+      children: tags.map(function (x) {
+        return /*#__PURE__*/_jsx(Tag, {
+          children: /*#__PURE__*/_jsx(ComponentXS, {
+            textStyle: ComponentTextStyle.Bold,
+            color: COLORS.neutral_600,
+            children: x
+          })
+        });
+      })
+    })]
+  });
+};
+
+CardMiddleSection.propTypes = {
+  colorBandColor: _pt.string,
+  categoryIcon: _pt.node,
+  categoryLabel: _pt.string,
+  title: _pt.string.isRequired,
+  description: _pt.string,
+  tags: _pt.arrayOf(_pt.string),
+  disabled: _pt.bool.isRequired
+};
+export default CardMiddleSection;
+//# sourceMappingURL=CardMiddleSection.js.map

package/dist/Card/CardMiddleSection.js.map

@@ -0,0 +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"}

package/dist/Card/CardTopSection.cjs

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _typography = require("../styles/typography");
+
+var _Checkbox = _interopRequireDefault(require("../InputFields/Checkbox"));
+
+var _ = require("..");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+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; }
+
+var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n"])));
+
+var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n"])), _.COLORS.correct_500);
+
+var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
+}, function (props) {
+  return props.interactionType == _.InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
+
+var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: calc(40px - 16px);\n  background-color: ", ";\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\n  svg {\n    color: ", ";\n    margin-right: 9px;\n  }\n"])), function (props) {
+  return props.$backgroundColor;
+}, function (props) {
+  return props.$color;
+});
+
+var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
+
+var CardTopSection = function CardTopSection(_ref) {
+  var interactionType = _ref.interactionType,
+      selected = _ref.selected,
+      setSelected = _ref.setSelected,
+      image = _ref.image,
+      tagLabel = _ref.tagLabel,
+      tagIcon = _ref.tagIcon,
+      highlightRibbonIcon = _ref.highlightRibbonIcon,
+      highlightRibbonText = _ref.highlightRibbonText,
+      highlightRibbonContentColor = _ref.highlightRibbonContentColor,
+      highlightRibbonBgColor = _ref.highlightRibbonBgColor,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
+      src: image
+    }), (selected !== undefined || setSelected !== undefined) && interactionType == _.InteractionType.Selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        select: function select(selected) {
+          return setSelected(selected);
+        },
+        selected: selected
+      })
+    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagContainer, {
+      children: [tagIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        children: tagLabel
+      })]
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(RibbonContainer, {
+      $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+      $backgroundColor: disabled ? _.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,
+        children: highlightRibbonText
+      })]
+    })]
+  });
+};
+
+CardTopSection.propTypes = {
+  selected: _propTypes.default.bool.isRequired,
+  setSelected: _propTypes.default.func.isRequired,
+  tagLabel: _propTypes.default.string,
+  tagIcon: _propTypes.default.node,
+  highlightRibbonText: _propTypes.default.string,
+  highlightRibbonIcon: _propTypes.default.string,
+  highlightRibbonContentColor: _propTypes.default.string,
+  highlightRibbonBgColor: _propTypes.default.string,
+  image: _propTypes.default.string,
+  disabled: _propTypes.default.bool.isRequired
+};
+var _default = CardTopSection;
+exports.default = _default;
+//# sourceMappingURL=CardTopSection.cjs.map

package/dist/Card/CardTopSection.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","COLORS","correct_500","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","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, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  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\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          {tagIcon}\n          <div>{tagLabel}</div>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

package/dist/Card/CardTopSection.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { InteractionType } from '..';
+export interface CardTopSectionProps {
+    interactionType: InteractionType;
+    selected: boolean;
+    setSelected: (arg0: boolean) => void;
+    tagLabel?: string;
+    tagIcon?: React.ReactNode;
+    highlightRibbonText?: string;
+    highlightRibbonIcon?: string;
+    highlightRibbonContentColor?: string;
+    highlightRibbonBgColor?: string;
+    image?: string;
+    disabled: boolean;
+}
+declare const CardTopSection: React.FunctionComponent<CardTopSectionProps>;
+export default CardTopSection;

package/dist/Card/CardTopSection.js

@@ -0,0 +1,80 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { ComponentS, ComponentTextStyle } from '../styles/typography';
+import Checkbox from '../InputFields/Checkbox';
+import { COLORS, InteractionType } from '..';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Img = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n"])));
+var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n"])), COLORS.correct_500);
+var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ", "\n\n  ", "\n"])), function (props) {
+  return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
+}, function (props) {
+  return props.interactionType == InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\n  ") : '';
+});
+var RibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  height: calc(40px - 16px);\n  background-color: ", ";\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\n  svg {\n    color: ", ";\n    margin-right: 9px;\n  }\n"])), function (props) {
+  return props.$backgroundColor;
+}, function (props) {
+  return props.$color;
+});
+var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
+
+var CardTopSection = function CardTopSection(_ref) {
+  var interactionType = _ref.interactionType,
+      selected = _ref.selected,
+      setSelected = _ref.setSelected,
+      image = _ref.image,
+      tagLabel = _ref.tagLabel,
+      tagIcon = _ref.tagIcon,
+      highlightRibbonIcon = _ref.highlightRibbonIcon,
+      highlightRibbonText = _ref.highlightRibbonText,
+      highlightRibbonContentColor = _ref.highlightRibbonContentColor,
+      highlightRibbonBgColor = _ref.highlightRibbonBgColor,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_jsxs(Container, {
+    disabled: disabled,
+    interactionType: interactionType,
+    children: [/*#__PURE__*/_jsx(Img, {
+      src: image
+    }), (selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && /*#__PURE__*/_jsx(CheckboxContainer, {
+      children: /*#__PURE__*/_jsx(Checkbox, {
+        select: function select(selected) {
+          return setSelected(selected);
+        },
+        selected: selected
+      })
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsxs(TagContainer, {
+      children: [tagIcon, /*#__PURE__*/_jsx("div", {
+        children: tagLabel
+      })]
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(RibbonContainer, {
+      $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+      $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
+      children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
+        color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+        textStyle: ComponentTextStyle.Regular,
+        children: highlightRibbonText
+      })]
+    })]
+  });
+};
+
+CardTopSection.propTypes = {
+  selected: _pt.bool.isRequired,
+  setSelected: _pt.func.isRequired,
+  tagLabel: _pt.string,
+  tagIcon: _pt.node,
+  highlightRibbonText: _pt.string,
+  highlightRibbonIcon: _pt.string,
+  highlightRibbonContentColor: _pt.string,
+  highlightRibbonBgColor: _pt.string,
+  image: _pt.string,
+  disabled: _pt.bool.isRequired
+};
+export default CardTopSection;
+//# sourceMappingURL=CardTopSection.js.map

package/dist/Card/CardTopSection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","COLORS","InteractionType","Img","img","TagContainer","div","correct_500","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","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, { StyledCheckBox } from '../InputFields/Checkbox';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\n  selected: boolean;\n  setSelected: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n`;\n\nconst TagContainer = styled.div`\n  background-color: ${COLORS.correct_500};\n  color: white;\n  border-radius: 2px;\n  padding: 4px;\n  display: flex;\n  position: absolute;\n  flex-direction: row;\n  align-items: center;\n  top: 16px;\n  left: 16px;\n\n  svg {\n    color: white;\n    margin-right: 4px;\n  }\n`;\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: hidden;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  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\n  svg {\n    color: ${props => props.$color};\n    margin-right: 9px;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 14px;\n  right: 14px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\n  selected,\n  setSelected,\n  image,\n  tagLabel,\n  tagIcon,\n  highlightRibbonIcon,\n  highlightRibbonText,\n  highlightRibbonContentColor,\n  highlightRibbonBgColor,\n  disabled\n}: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          {tagIcon}\n          <div>{tagLabel}</div>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''} $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}

package/dist/Card/index.cjs

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: 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;
+  }
+});
+Object.defineProperty(exports, "InteractionType", {
+  enumerable: true,
+  get: function get() {
+    return _Card.InteractionType;
+  }
+});
+
+var _Card = _interopRequireWildcard(require("./Card"));
+
+var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+
+var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+
+var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+
+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

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

package/dist/Card/index.d.ts

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

package/dist/Card/index.js

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

package/dist/Card/index.js.map

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

package/dist/Dropdown/BasicDropdown.cjs

@@ -107,6 +107,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       setSelectedValues = _React$useState14[1];
 
   var styledFieldRef = React.useRef(null);
+  var inputRef = React.useRef(null);
   /*
   if (!items.includes(input)) {
     setInput('');
@@ -179,9 +180,12 @@ var BasicDropdown = function BasicDropdown(_ref) {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, {
         ref: styledFieldRef,
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
-        onClick: function onClick() {
+        onClick: function onClick(e) {
           if (!locked || !disabled) {
+            var _inputRef$current;
+
             setIsOpen(!isOpen);
+            (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
           }
         },
         tabIndex: disabled || locked ? -1 : 0,
@@ -192,6 +196,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
         isPlaceholder: !input,
         minWidth: minWidth,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
+          ref: inputRef,
           type: "search",
           readOnly: true,
           placeholder: placeholderSearch,
@@ -212,7 +217,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
           onClick: function onClick() {
             return setIsOpen(!isOpen);
           },
-          className: 'icon',
+          className: 'icon dropdown-arrow',
           children: isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.ArrowDropUp, {
             size: "24px",
             className: size ? size : ''