@laerdal/life-react-components 3.4.3 → 3.5.1-uss.hackathon

package/dist/Card/CardMiddleSection.cjs.map

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

package/dist/Card/CardMiddleSection.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TagVariants } from '..';
+export interface CardMiddleSectionProps {
+    colorBandColor?: string;
+    categoryIcon?: React.ReactNode;
+    categoryLabel?: string;
+    title: string;
+    description?: string;
+    tags?: CardTag[];
+    row2Tags?: CardTag[];
+    disabled: boolean;
+}
+export interface CardTag {
+    label: string;
+    variant?: TagVariants;
+}
+export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardColorBand: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;
+export declare const CardTagsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardCategoryContainer: import("styled-components").StyledComponent<"div", any, {
+    extraTopMargin: boolean;
+    bottomMargin: boolean;
+}, never>;
+declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
+export default CardMiddleSection;

package/dist/Card/CardMiddleSection.js

@@ -0,0 +1,84 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import * as React from 'react';
+import styled from 'styled-components';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
+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"])));
+export var CardColorBand = 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;
+});
+export var CardTagsContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
+export var CardCategoryContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\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 CardMiddleSection = function CardMiddleSection(_ref) {
+  var colorBandColor = _ref.colorBandColor,
+      categoryIcon = _ref.categoryIcon,
+      categoryLabel = _ref.categoryLabel,
+      title = _ref.title,
+      description = _ref.description,
+      tags = _ref.tags,
+      row2Tags = _ref.row2Tags,
+      disabled = _ref.disabled;
+  return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
+    children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
+      $color: colorBandColor
+    }), /*#__PURE__*/_jsxs(CardCategoryContainer, {
+      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(CardTagsContainer, {
+      children: tags.map(function (x) {
+        var _x$variant;
+
+        return /*#__PURE__*/_jsx(Tag, {
+          label: x.label,
+          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral'
+        });
+      })
+    }), row2Tags && /*#__PURE__*/_jsx(CardTagsContainer, {
+      children: row2Tags.map(function (x) {
+        var _x$variant2;
+
+        return /*#__PURE__*/_jsx(Tag, {
+          label: x.label,
+          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral'
+        });
+      })
+    })]
+  });
+};
+
+CardMiddleSection.propTypes = {
+  colorBandColor: _pt.string,
+  categoryIcon: _pt.node,
+  categoryLabel: _pt.string,
+  title: _pt.string.isRequired,
+  description: _pt.string,
+  tags: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired
+  })),
+  row2Tags: _pt.arrayOf(_pt.shape({
+    label: _pt.string.isRequired
+  })),
+  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","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","label","variant"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA+DC,GAA/D,QAAuF,IAAvF;;;AAkBA,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAV,wTAAhC;AAkBP,OAAO,IAAMC,aAAa,GAAGR,MAAM,CAACO,GAAV,uLAMJ,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CAND,CAAnB;AASP,OAAO,IAAMC,iBAAiB,GAAGX,MAAM,CAACO,GAAV,uKAAvB;AAQP,OAAO,IAAMK,qBAAqB,GAAGZ,MAAM,CAACO,GAAV,uPAQrBN,MAAM,CAACY,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,MAAC,0BAAD;AAAA,eACGP,cAAc,iBAAI,KAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,MAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEb,kBAAkB,CAACqB,IAA1C;AAAgD,QAAA,KAAK,EAAEvB,MAAM,CAACY,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEd,kBAAkB,CAACqB,IAAlE;AAAwE,MAAA,KAAK,EAAEF,QAAQ,GAAGrB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACwB,KAAtH;AAAA,gBACGP;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAElB,MAAM,CAACyB,WAAvD;AAAA,gBACGP;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,iBAAD;AAAA,gBACGA,IAAI,CAACO,GAAL,CAAS,UAAAC,CAAC;AAAA;;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,gBAAED,CAAC,CAACE,OAAJ,mDAAe;AAA3C,UADS;AAAA,OAAV;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,KAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACM,GAAT,CAAa,UAAAC,CAAC;AAAA;;AAAA,4BACb,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA,CAAC,CAACC,KAAd;AAAqB,UAAA,OAAO,iBAAED,CAAC,CAACE,OAAJ,qDAAe;AAA3C,UADa;AAAA,OAAd;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAS,IAAAA,K;;AALAR,EAAAA,Q;AAKAQ,IAAAA,K;;AAJAP,EAAAA,Q;;AAsGF,eAAeR,iBAAf","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag, TagVariants } from '..';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  colorBandColor?: string;\r\n  categoryIcon?: React.ReactNode;\r\n  categoryLabel?: string;\r\n  title: string;\r\n  description?: string;\r\n  tags?: CardTag[];\r\n  row2Tags?: CardTag[];\r\n  disabled: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n}\r\n\r\nexport const CardMiddleSectionContainer = styled.div`\r\n  display: flex;\r\n  flex-grow: 1;\r\n  width: calc(100% - 32px);\r\n  position: relative;\r\n  flex-direction: column;\r\n  padding: 16px;\r\n  gap: 8px;\r\n\r\n  .descriptionBlock {\r\n    padding: 2px 0;\r\n  }\r\n\r\n  .titleBlock {\r\n    padding: 2px 0;\r\n  }\r\n`;\r\n\r\nexport const CardColorBand = styled.div<{ $color: string }>`\r\n  position: absolute;\r\n  width: 100%;\r\n  top: 0px;\r\n  left: 0px;\r\n  height: 8px;\r\n  background-color: ${props => props.$color};\r\n`;\r\n\r\nexport const CardTagsContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  padding: 4px 0;\r\n  gap: 4px;\r\n  flex-wrap: wrap;\r\n`;\r\n\r\nexport const CardCategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: none;\r\n  gap: 6px;\r\n  \r\n  svg {\r\n    color: ${COLORS.neutral_500};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\r\n  colorBandColor,\r\n  categoryIcon,\r\n  categoryLabel,\r\n  title,\r\n  description,\r\n  tags,\r\n  row2Tags,\r\n  disabled\r\n}: CardMiddleSectionProps) => {\r\n  return (\r\n    <CardMiddleSectionContainer>\r\n      {colorBandColor && <CardColorBand $color={colorBandColor} />}\r\n      <CardCategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n        {categoryIcon}\r\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\r\n          {categoryLabel}\r\n        </ComponentS>\r\n      </CardCategoryContainer>\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardTagsContainer>\r\n          {tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n      {row2Tags && (\r\n        <CardTagsContainer>\r\n          {row2Tags.map(x => (\r\n            <Tag label={x.label} variant={x.variant ?? 'neutral'} />\r\n          ))}\r\n        </CardTagsContainer>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"file":"CardMiddleSection.js"}

package/dist/Card/CardTopSection.cjs

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

package/dist/Card/CardTopSection.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { TagVariants } from '../Tag';
+export interface CardTopSectionProps {
+    selected?: boolean;
+    setSelected?: (arg0: boolean) => void;
+    tagLabel?: string;
+    tagIcon?: React.ReactNode;
+    tagVariant?: TagVariants;
+    highlightRibbonText?: string;
+    highlightRibbonIcon?: string;
+    highlightRibbonContentColor?: string;
+    highlightRibbonBgColor?: string;
+    image?: string;
+    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;
+}, 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>;
+export default CardTopSection;

package/dist/Card/CardTopSection.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.cjs","names":["HorizontalCardContentContainer","styled","div","COLORS","white","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.cjs","names":["HorizontalCardContentContainer","styled","div","COLORS","white","HorizontalCardContainer","neutral_200","BOXSHADOWS","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","focusStyles","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","React","useState","actionsRefs","setActionsRefs","containerRef","useRef","useActionWithin","cls","handleClick","handleButtonPress","e","key","defaultOnMouseDownHandler","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.white};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":"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"}

package/dist/Card/HorizontalCard/HorizontalCard.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
-export default HorizontalCard;
+import React from 'react';
+import { HorizontalCardProps } from './types';
+export declare const HorizontalCardContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const HorizontalCard: React.FunctionComponent<HorizontalCardProps>;
+export default HorizontalCard;

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","HorizontalCardContentContainer","div","white","HorizontalCardContainer","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\nimport {HorizontalCardProps} from './types';\nimport styled from 'styled-components';\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\nimport {HorizontalCardBody} from './HorizontalCardBody';\nimport {HorizontalCardActions} from './HorizontalCardActions';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\n\nexport const HorizontalCardContentContainer = styled.div`\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: row;\n  align-items: center;\n  background-color: ${COLORS.white};\n  border-radius: 8px;\n`;\n\nexport const HorizontalCardContainer = styled.div`\n  display: flex;\n  flex: 1;\n\n  &.outline {\n    ${HorizontalCardContentContainer} {\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\n    }\n  }\n\n  &.elevated {\n    ${HorizontalCardContentContainer} {\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_20};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\n        }\n      }\n    }\n\n    &:active:not(.action-within):not(.disabled) {\n      &.outline {\n        ${HorizontalCardContentContainer} {\n          background-color: ${COLORS.primary_100};\n        }\n      }\n\n      &.elevated {\n        ${HorizontalCardContentContainer} {\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\n        }\n      }\n    }\n\n    &:focus {\n      ${focusStyles}\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    &.elevated {\n      ${HorizontalCardContentContainer} {\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\n      }\n    }\n\n    &.outline {\n      ${HorizontalCardContentContainer} {\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n      }\n    }\n  }\n`;\n\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\n                                                                               title,\n                                                                               description,\n                                                                               tags,\n                                                                               progress,\n                                                                               icon,\n                                                                               variant = 'outline',\n                                                                               image,\n                                                                               action,\n                                                                               actions,\n                                                                               disabled,\n                                                                               className,\n                                                                               dataTestId,\n                                                                               ...rest\n                                                                             }) => {\n\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, actionsRefs);\n\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\n\n  const handleClick = () => {\n    !disabled && action && action();\n  }\n\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    e.key === 'Enter' && handleClick();\n  };\n\n  return (\n    <HorizontalCardContainer ref={containerRef}\n               tabIndex={action && !disabled ? 0 : -1}\n               className={cls}\n               onKeyDown={handleButtonPress}\n               onClick={handleClick}\n               onMouseDown={defaultOnMouseDownHandler}>\n      <HorizontalCardContentContainer\n               onMouseDown={defaultOnMouseDownHandler}\n               data-testid={dataTestId}\n               {...rest}>\n\n        <HorizontalCardThumbnail image={image}\n                                 icon={icon}/>\n\n        <HorizontalCardBody title={title}\n                            description={description}\n                            tags={tags}\n                            progress={progress}/>\n\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\n                               actions={actions}\n                               disabled={disabled}/>\n\n      </HorizontalCardContentContainer>\n    </HorizontalCardContainer>\n  )\n};\n\nexport default HorizontalCard;\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCard.js","names":["React","styled","BOXSHADOWS","COLORS","focusStyles","HorizontalCardThumbnail","HorizontalCardBody","HorizontalCardActions","defaultOnMouseDownHandler","useActionWithin","HorizontalCardContentContainer","div","white","HorizontalCardContainer","neutral_200","BOXSHADOW_L1","primary_20","BOXSHADOW_L3","primary_100","BOXSHADOW_L2","neutral_100","HorizontalCard","title","description","tags","progress","icon","variant","image","action","actions","disabled","className","dataTestId","rest","useState","actionsRefs","setActionsRefs","containerRef","useRef","cls","handleClick","handleButtonPress","e","key","instance"],"sources":["../../../src/Card/HorizontalCard/HorizontalCard.tsx"],"sourcesContent":["import React, {useEffect} from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {BOXSHADOWS, COLORS, focusStyles} from '../../styles';\r\nimport {HorizontalCardThumbnail} from './HorizontalCardThumbnail';\r\nimport {HorizontalCardBody} from './HorizontalCardBody';\r\nimport {HorizontalCardActions} from './HorizontalCardActions';\r\nimport {defaultOnMouseDownHandler, useActionWithin} from '../../common';\r\n\r\nexport const HorizontalCardContentContainer = styled.div`\r\n  position: relative;\r\n  display: flex;\r\n  flex: 1;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${COLORS.white};\r\n  border-radius: 8px;\r\n`;\r\n\r\nexport const HorizontalCardContainer = styled.div`\r\n  display: flex;\r\n  flex: 1;\r\n\r\n  &.outline {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.elevated {\r\n    ${HorizontalCardContentContainer} {\r\n      box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n    }\r\n  }\r\n\r\n  &.clickable {\r\n    cursor: pointer;\r\n\r\n    &:hover:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_20};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:active:not(.action-within):not(.disabled) {\r\n      &.outline {\r\n        ${HorizontalCardContentContainer} {\r\n          background-color: ${COLORS.primary_100};\r\n        }\r\n      }\r\n\r\n      &.elevated {\r\n        ${HorizontalCardContentContainer} {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    &.elevated {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n      }\r\n    }\r\n\r\n    &.outline {\r\n      ${HorizontalCardContentContainer} {\r\n        box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport const HorizontalCard: React.FunctionComponent<HorizontalCardProps> = ({\r\n                                                                               title,\r\n                                                                               description,\r\n                                                                               tags,\r\n                                                                               progress,\r\n                                                                               icon,\r\n                                                                               variant = 'outline',\r\n                                                                               image,\r\n                                                                               action,\r\n                                                                               actions,\r\n                                                                               disabled,\r\n                                                                               className,\r\n                                                                               dataTestId,\r\n                                                                               ...rest\r\n                                                                             }) => {\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, actionsRefs);\r\n\r\n  const cls = `${variant} ${action ? 'clickable' : ''} ${disabled ? 'disabled' : ''} ${className || ''}`;\r\n\r\n  const handleClick = () => {\r\n    !disabled && action && action();\r\n  }\r\n\r\n  const handleButtonPress = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    e.key === 'Enter' && handleClick();\r\n  };\r\n\r\n  return (\r\n    <HorizontalCardContainer ref={containerRef}\r\n               tabIndex={action && !disabled ? 0 : -1}\r\n               className={cls}\r\n               onKeyDown={handleButtonPress}\r\n               onClick={handleClick}\r\n               onMouseDown={defaultOnMouseDownHandler}>\r\n      <HorizontalCardContentContainer\r\n               onMouseDown={defaultOnMouseDownHandler}\r\n               data-testid={dataTestId}\r\n               {...rest}>\r\n\r\n        <HorizontalCardThumbnail image={image}\r\n                                 icon={icon}/>\r\n\r\n        <HorizontalCardBody title={title}\r\n                            description={description}\r\n                            tags={tags}\r\n                            progress={progress}/>\r\n\r\n        <HorizontalCardActions ref={instance => setActionsRefs(instance ?? [])}\r\n                               actions={actions}\r\n                               disabled={disabled}/>\r\n\r\n      </HorizontalCardContentContainer>\r\n    </HorizontalCardContainer>\r\n  )\r\n};\r\n\r\nexport default HorizontalCard;\r\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAmB,OAAO;AAEtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,EAAEC,MAAM,EAAEC,WAAW,QAAO,cAAc;AAC5D,SAAQC,uBAAuB,QAAO,2BAA2B;AACjE,SAAQC,kBAAkB,QAAO,sBAAsB;AACvD,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,yBAAyB,EAAEC,eAAe,QAAO,cAAc;AAAC;AAAA;AAExE,OAAO,IAAMC,8BAA8B,GAAGT,MAAM,CAACU,GAAG,+NAMlCR,MAAM,CAACS,KAAK,CAEjC;AAED,OAAO,IAAMC,uBAAuB,GAAGZ,MAAM,CAACU,GAAG,kgCAK3CD,8BAA8B,EACAP,MAAM,CAACW,WAAW,EAKhDJ,8BAA8B,EAChBR,UAAU,CAACa,YAAY,EASjCL,8BAA8B,EACVP,MAAM,CAACa,UAAU,EAKrCN,8BAA8B,EAChBR,UAAU,CAACe,YAAY,EAOrCP,8BAA8B,EACVP,MAAM,CAACe,WAAW,EAKtCR,8BAA8B,EAChBR,UAAU,CAACiB,YAAY,EAMvCf,WAAW,EAQXM,8BAA8B,EAChBR,UAAU,CAACa,YAAY,EAKrCL,8BAA8B,EACAP,MAAM,CAACiB,WAAW,CAIvD;AAED,OAAO,IAAMC,cAA4D,GAAG,SAA/DA,cAA4D,OAcU;EAAA,IAbJC,KAAK,QAALA,KAAK;IACLC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IAAA,oBACJC,OAAO;IAAPA,OAAO,6BAAG,SAAS;IACnBC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGpF,sBAAsClC,KAAK,CAACmC,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAAvFC,WAAW;IAAEC,cAAc;EAClC,IAAMC,YAAY,GAAGtC,KAAK,CAACuC,MAAM,CAAiB,IAAI,CAAC;EAEvD9B,eAAe,CAAC6B,YAAY,EAAEF,WAAW,CAAC;EAE1C,IAAMI,GAAG,aAAMb,OAAO,cAAIE,MAAM,GAAG,WAAW,GAAG,EAAE,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAE;EAEtG,IAAMS,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,CAACV,QAAQ,IAAIF,MAAM,IAAIA,MAAM,EAAE;EACjC,CAAC;EAED,IAAMa,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,CAAsC,EAAK;IACpEA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIH,WAAW,EAAE;EACpC,CAAC;EAED,oBACE,KAAC,uBAAuB;IAAC,GAAG,EAAEH,YAAa;IAChC,QAAQ,EAAET,MAAM,IAAI,CAACE,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IACvC,SAAS,EAAES,GAAI;IACf,SAAS,EAAEE,iBAAkB;IAC7B,OAAO,EAAED,WAAY;IACrB,WAAW,EAAEjC,yBAA0B;IAAA,uBAChD,MAAC,8BAA8B;MACtB,WAAW,EAAEA,yBAA0B;MACvC,eAAayB;IAAW,GACpBC,IAAI;MAAA,wBAEf,KAAC,uBAAuB;QAAC,KAAK,EAAEN,KAAM;QACb,IAAI,EAAEF;MAAK,EAAE,eAEtC,KAAC,kBAAkB;QAAC,KAAK,EAAEJ,KAAM;QACb,WAAW,EAAEC,WAAY;QACzB,IAAI,EAAEC,IAAK;QACX,QAAQ,EAAEC;MAAS,EAAE,eAEzC,KAAC,qBAAqB;QAAC,GAAG,EAAE,aAAAoB,QAAQ;UAAA,OAAIR,cAAc,CAACQ,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,EAAE,CAAC;QAAA,CAAC;QAChD,OAAO,EAAEf,OAAQ;QACjB,QAAQ,EAAEC;MAAS,EAAE;IAAA;EAEb,EACT;AAE9B,CAAC;AAED,eAAeV,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardActions.cjs","names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardCustomContent,\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'custom': {\n        return item.content\n      }\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           tooltip={item.tooltip}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCardActions.cjs","names":["Container","styled","div","HorizontalCardActions","React","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\r\nimport {\r\n  HorizontalCardCustomContent,\r\n  HorizontalCardDropdownButton,\r\n  HorizontalCardIconButton,\r\n  HorizontalCardProps,\r\n  HorizontalCardToggleButton\r\n} from './types';\r\nimport {IconButton} from '../../Button';\r\nimport {ToggleButton} from '../../Toggles';\r\nimport {DropdownButton} from '../../Dropdown';\r\nimport styled from 'styled-components';\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\r\n\r\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\r\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\r\n                        index: number) => {\r\n    switch (item.componentType) {\r\n      case 'custom': {\r\n        return item.content\r\n      }\r\n      case 'icon': {\r\n        return <IconButton ref={elRefs[index]}\r\n                           key={index}\r\n                           variant={'secondary'}\r\n                           useTransparentBackground={true}\r\n                           shape={'circular'}\r\n                           action={item.action}\r\n                           tooltip={item.tooltip}\r\n                           disabled={item.disabled ?? disabled}>\r\n          {item.icon}\r\n        </IconButton>\r\n      }\r\n      case 'toggle': {\r\n        return <ToggleButton ref={elRefs[index]}\r\n                             key={index}\r\n                             active={item.active}\r\n                             onChange={item.onChange}\r\n                             defaultState={item.defaultState}\r\n                             activeState={item.activeState}\r\n                             disabled={item.disabled ?? disabled}/>\r\n      }\r\n      case 'dropdown': {\r\n        return <DropdownButton ref={elRefs[index]}\r\n                               key={index}\r\n                               type={'icon'}\r\n                               items={item.items}\r\n                               itemsType={item.itemsType}\r\n                               onClick={item.onClick}\r\n                               icon={item.icon}\r\n                               action={item.action}\r\n                               actionIcon={item.actionIcon}\r\n                               actionLabel={item.actionLabel}\r\n                               actionVariant={item.actionVariant}\r\n                               actionLoading={item.actionLoading}\r\n                               multiSelect={item.multiSelect}\r\n                               scrollable={item.scrollable}\r\n                               pinTopItem={item.pinTopItem}\r\n                               maxHeight={item.maxHeight}\r\n                               disabled={item.disabled ?? disabled}/>\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  return (\r\n    <>\r\n      {\r\n        actions?.length &&\r\n        <Container>\r\n          {actions?.map((item, index) => renderAction(item, index))}\r\n        </Container>\r\n      }\r\n    </>\r\n  )\r\n});\r\n"],"mappings":";;;;;;;;;AAAA;AAQA;AACA;AACA;AACA;AAAuC;AAAA;AAEvC,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,uGAE3B;AAIM,IAAMC,qBAAqB,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBACCC,GAAoD,EAAK;EAAA,IADxDC,OAAO,QAAPA,OAAO;IAAEC,QAAQ,QAARA,QAAQ;EAGvE,sBAA4BJ,cAAK,CAACK,QAAQ,CAAuC,EAAE,CAAC;IAAA;IAA7EC,MAAM;IAAEC,SAAS;EACxB,IAAMC,MAAM,GAAG,CAAAL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MAAM,KAAI,CAAC;EAEnCR,cAAK,CAACS,SAAS,CAAC,YAAM;IACpBF,SAAS,CAACG,KAAK,CAACF,MAAM,IAAI,CAAC,CAAC,CAACG,IAAI,CAAC,IAAI,CAAC,CAACC,GAAG,CAAC;MAAA,oBAAMZ,cAAK,CAACa,SAAS,EAAqB;IAAA,EAAC,CAAC;EAC1F,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZR,cAAK,CAACc,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMI,MAAM;EAAA,GAAE,CAACA,MAAM,CAAC,CAAC;EAEtD,IAAMS,YAAY,GAAG,SAAfA,YAAY,CAAIC,IAAwH,EACxHC,KAAa,EAAK;IACtC,QAAQD,IAAI,CAACE,aAAa;MACxB,KAAK,QAAQ;QAAE;UACb,OAAOF,IAAI,CAACG,OAAO;QACrB;MACA,KAAK,MAAM;QAAE;UAAA;UACX,oBAAO,qBAAC,kBAAU;YAAC,GAAG,EAAEb,MAAM,CAACW,KAAK,CAAE;YAEnB,OAAO,EAAE,WAAY;YACrB,wBAAwB,EAAE,IAAK;YAC/B,KAAK,EAAE,UAAW;YAClB,MAAM,EAAED,IAAI,CAACI,MAAO;YACpB,OAAO,EAAEJ,IAAI,CAACK,OAAQ;YACtB,QAAQ,oBAAEL,IAAI,CAACZ,QAAQ,2DAAIA,QAAS;YAAA,UACpDY,IAAI,CAACM;UAAI,GAPYL,KAAK,CAQhB;QACf;MACA,KAAK,QAAQ;QAAE;UAAA;UACb,oBAAO,qBAAC,qBAAY;YAAC,GAAG,EAAEX,MAAM,CAACW,KAAK,CAAE;YAEnB,MAAM,EAAED,IAAI,CAACO,MAAO;YACpB,QAAQ,EAAEP,IAAI,CAACQ,QAAS;YACxB,YAAY,EAAER,IAAI,CAACS,YAAa;YAChC,WAAW,EAAET,IAAI,CAACU,WAAY;YAC9B,QAAQ,qBAAEV,IAAI,CAACZ,QAAQ,6DAAIA;UAAS,GAL/Ba,KAAK,CAK4B;QAC7D;MACA,KAAK,UAAU;QAAE;UAAA;UACf,oBAAO,qBAAC,wBAAc;YAAC,GAAG,EAAEX,MAAM,CAACW,KAAK,CAAE;YAEnB,IAAI,EAAE,MAAO;YACb,KAAK,EAAED,IAAI,CAACW,KAAM;YAClB,SAAS,EAAEX,IAAI,CAACY,SAAU;YAC1B,OAAO,EAAEZ,IAAI,CAACa,OAAQ;YACtB,IAAI,EAAEb,IAAI,CAACM,IAAK;YAChB,MAAM,EAAEN,IAAI,CAACI,MAAO;YACpB,UAAU,EAAEJ,IAAI,CAACc,UAAW;YAC5B,WAAW,EAAEd,IAAI,CAACe,WAAY;YAC9B,aAAa,EAAEf,IAAI,CAACgB,aAAc;YAClC,aAAa,EAAEhB,IAAI,CAACiB,aAAc;YAClC,WAAW,EAAEjB,IAAI,CAACkB,WAAY;YAC9B,UAAU,EAAElB,IAAI,CAACmB,UAAW;YAC5B,UAAU,EAAEnB,IAAI,CAACoB,UAAW;YAC5B,SAAS,EAAEpB,IAAI,CAACqB,SAAU;YAC1B,QAAQ,qBAAErB,IAAI,CAACZ,QAAQ,6DAAIA;UAAS,GAf/Ba,KAAK,CAe4B;QAC/D;IAAC;EAEL,CAAC;EAGD,oBACE;IAAA,UAEI,CAAAd,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEK,MAAM,kBACf,qBAAC,SAAS;MAAA,UACPL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAES,GAAG,CAAC,UAACI,IAAI,EAAEC,KAAK;QAAA,OAAKF,YAAY,CAACC,IAAI,EAAEC,KAAK,CAAC;MAAA;IAAC;EAC/C,EAEb;AAEP,CAAC,CAAC;AAAC"}

package/dist/Card/HorizontalCard/HorizontalCardActions.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { HorizontalCardProps } from './types';
-type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
-export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
-export {};
+import React from 'react';
+import { HorizontalCardProps } from './types';
+type Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;
+export declare const HorizontalCardActions: React.ForwardRefExoticComponent<Props & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  HorizontalCardCustomContent,\n  HorizontalCardDropdownButton,\n  HorizontalCardIconButton,\n  HorizontalCardProps,\n  HorizontalCardToggleButton\n} from './types';\nimport {IconButton} from '../../Button';\nimport {ToggleButton} from '../../Toggles';\nimport {DropdownButton} from '../../Dropdown';\nimport styled from 'styled-components';\n\nconst Container = styled.div`\n  display: flex;\n`;\n\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\n\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\n\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\n  const length = actions?.length || 0;\n\n  React.useEffect(() => {\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\n  }, [length]);\n\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\n\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\n                        index: number) => {\n    switch (item.componentType) {\n      case 'custom': {\n        return item.content\n      }\n      case 'icon': {\n        return <IconButton ref={elRefs[index]}\n                           key={index}\n                           variant={'secondary'}\n                           useTransparentBackground={true}\n                           shape={'circular'}\n                           action={item.action}\n                           tooltip={item.tooltip}\n                           disabled={item.disabled ?? disabled}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'toggle': {\n        return <ToggleButton ref={elRefs[index]}\n                             key={index}\n                             active={item.active}\n                             onChange={item.onChange}\n                             defaultState={item.defaultState}\n                             activeState={item.activeState}\n                             disabled={item.disabled ?? disabled}/>\n      }\n      case 'dropdown': {\n        return <DropdownButton ref={elRefs[index]}\n                               key={index}\n                               type={'icon'}\n                               items={item.items}\n                               itemsType={item.itemsType}\n                               onClick={item.onClick}\n                               icon={item.icon}\n                               action={item.action}\n                               actionIcon={item.actionIcon}\n                               actionLabel={item.actionLabel}\n                               actionVariant={item.actionVariant}\n                               actionLoading={item.actionLoading}\n                               multiSelect={item.multiSelect}\n                               scrollable={item.scrollable}\n                               pinTopItem={item.pinTopItem}\n                               maxHeight={item.maxHeight}\n                               disabled={item.disabled ?? disabled}/>\n      }\n    }\n  }\n\n\n  return (\n    <>\n      {\n        actions?.length &&\n        <Container>\n          {actions?.map((item, index) => renderAction(item, index))}\n        </Container>\n      }\n    </>\n  )\n});\n"],"mappings":"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"}
+{"version":3,"file":"HorizontalCardActions.js","names":["React","IconButton","ToggleButton","DropdownButton","styled","Container","div","HorizontalCardActions","forwardRef","ref","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","renderAction","item","index","componentType","content","action","tooltip","icon","active","onChange","defaultState","activeState","items","itemsType","onClick","actionIcon","actionLabel","actionVariant","actionLoading","multiSelect","scrollable","pinTopItem","maxHeight"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardActions.tsx"],"sourcesContent":["import React from 'react';\r\nimport {\r\n  HorizontalCardCustomContent,\r\n  HorizontalCardDropdownButton,\r\n  HorizontalCardIconButton,\r\n  HorizontalCardProps,\r\n  HorizontalCardToggleButton\r\n} from './types';\r\nimport {IconButton} from '../../Button';\r\nimport {ToggleButton} from '../../Toggles';\r\nimport {DropdownButton} from '../../Dropdown';\r\nimport styled from 'styled-components';\r\n\r\nconst Container = styled.div`\r\n  display: flex;\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'actions' | 'disabled'>;\r\n\r\nexport const HorizontalCardActions = React.forwardRef(({actions, disabled}: Props,\r\n                                                       ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n  const length = actions?.length || 0;\r\n\r\n  React.useEffect(() => {\r\n    setElRefs(Array(length || 0).fill(null).map(() => React.createRef<HTMLButtonElement>()));\r\n  }, [length]);\r\n\r\n  React.useImperativeHandle(ref, () => elRefs, [elRefs]);\r\n\r\n  const renderAction = (item: HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent,\r\n                        index: number) => {\r\n    switch (item.componentType) {\r\n      case 'custom': {\r\n        return item.content\r\n      }\r\n      case 'icon': {\r\n        return <IconButton ref={elRefs[index]}\r\n                           key={index}\r\n                           variant={'secondary'}\r\n                           useTransparentBackground={true}\r\n                           shape={'circular'}\r\n                           action={item.action}\r\n                           tooltip={item.tooltip}\r\n                           disabled={item.disabled ?? disabled}>\r\n          {item.icon}\r\n        </IconButton>\r\n      }\r\n      case 'toggle': {\r\n        return <ToggleButton ref={elRefs[index]}\r\n                             key={index}\r\n                             active={item.active}\r\n                             onChange={item.onChange}\r\n                             defaultState={item.defaultState}\r\n                             activeState={item.activeState}\r\n                             disabled={item.disabled ?? disabled}/>\r\n      }\r\n      case 'dropdown': {\r\n        return <DropdownButton ref={elRefs[index]}\r\n                               key={index}\r\n                               type={'icon'}\r\n                               items={item.items}\r\n                               itemsType={item.itemsType}\r\n                               onClick={item.onClick}\r\n                               icon={item.icon}\r\n                               action={item.action}\r\n                               actionIcon={item.actionIcon}\r\n                               actionLabel={item.actionLabel}\r\n                               actionVariant={item.actionVariant}\r\n                               actionLoading={item.actionLoading}\r\n                               multiSelect={item.multiSelect}\r\n                               scrollable={item.scrollable}\r\n                               pinTopItem={item.pinTopItem}\r\n                               maxHeight={item.maxHeight}\r\n                               disabled={item.disabled ?? disabled}/>\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  return (\r\n    <>\r\n      {\r\n        actions?.length &&\r\n        <Container>\r\n          {actions?.map((item, index) => renderAction(item, index))}\r\n        </Container>\r\n      }\r\n    </>\r\n  )\r\n});\r\n"],"mappings":"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"}