@laerdal/life-react-components 1.9.8-dev.2 → 1.9.8-dev.22

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["CardProgressContainer","styled","div","CardNotesContainer","COLORS","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","React","forwardRef","ref","progressLevel","progressMax","progressType","LinearProgressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Size","Small","LinearProgressVariant","Normal","ComponentTextStyle","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\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 haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomDivider/>}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.cjs"}

package/dist/Card/{CardBottomSection.d.ts → VerticalCard/CardBottomSection.d.ts}

@@ -1,31 +1,31 @@
-import * as React from 'react';
-import { LinearProgressType } from '..';
-export interface ActionItem {
-    icon: React.ReactNode;
-    onClick: () => void;
-}
-export interface CardBottomSectionProps {
-    progressLevel?: number;
-    progressMax?: number;
-    progressType?: LinearProgressType;
-    noteLeft?: string;
-    noteLeftIcon?: React.ReactNode;
-    noteRight?: string;
-    noteRightIcon?: React.ReactNode;
-    authorName?: string;
-    actions?: ActionItem[];
-    logo?: React.ReactNode;
-    disabled: boolean;
-}
-export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled: boolean;
-}, never>;
-export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
-export default CardBottomSection;
+import * as React from 'react';
+import { LinearProgressType } from '../../index';
+export interface ActionItem {
+    icon: React.ReactNode;
+    onClick: () => void;
+}
+export interface CardBottomSectionProps {
+    progressLevel?: number;
+    progressMax?: number;
+    progressType?: LinearProgressType;
+    noteLeft?: string;
+    noteLeftIcon?: React.ReactNode;
+    noteRight?: string;
+    noteRightIcon?: React.ReactNode;
+    authorName?: string;
+    actions?: ActionItem[];
+    logo?: React.ReactNode;
+    disabled?: boolean;
+}
+export declare const CardProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNotesContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardAuthorContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const CardBottomDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNoteLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardNoteRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardButtonRowContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CardBottomSection: React.ForwardRefExoticComponent<CardBottomSectionProps & React.RefAttributes<React.RefObject<HTMLButtonElement>[]>>;
+export default CardBottomSection;

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

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
@@ -5,8 +6,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '..';
-import { IconButton } from '../Button';
+import { COLORS, ComponentTextStyle, ComponentXXS, LinearProgress, LinearProgressType, LinearProgressVariant, Size } from '../../index';
+import { IconButton } from '../../Button';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardProgressContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px 0;\n"])));
@@ -17,10 +18,9 @@ export var CardAuthorContainer = styled.div(_templateObject3 || (_templateObject
 export var CardBottomDivider = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n  width: 100%;\n"])), COLORS.neutral_100);
 export var CardNoteLeft = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
 export var CardNoteRight = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  right: 0px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  svg {\n    margin-right: 4px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])));
-export var CardButtonRowContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child{\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
+export var CardButtonRowContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-end;\n  align-items: center;\n  border-top: 1px;\n  border-top-color: ", ";\n  border-top-style: solid;\n\n  button:last-child {\n    margin: 8px 0px 0px 0px;\n  }\n\n  button:not(:last-child) {\n    margin: 8px 0px 0px 0px;\n  }\n\n  svg {\n    color: ", ";\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600);
 export var CardBottomSectionContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  padding: 0px 16px 8px 16px;\n  width: calc(100% - 32px);\n"])));
-
-var CardBottomSection = function CardBottomSection(_ref) {
+var CardBottomSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var progressLevel = _ref.progressLevel,
       progressMax = _ref.progressMax,
       _ref$progressType = _ref.progressType,
@@ -33,8 +33,24 @@ var CardBottomSection = function CardBottomSection(_ref) {
       logo = _ref.logo,
       actions = _ref.actions,
       disabled = _ref.disabled;
+
+  var _React$useState = React.useState([]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      elRefs = _React$useState2[0],
+      setElRefs = _React$useState2[1];
+
+  var length = (actions === null || actions === void 0 ? void 0 : actions.length) || 0;
+  React.useEffect(function () {
+    setElRefs(Array(length || 0).fill(null).map(function () {
+      return /*#__PURE__*/React.createRef();
+    }));
+  }, [length]);
+  React.useImperativeHandle(ref, function () {
+    return elRefs;
+  }, [elRefs]);
   var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
   return /*#__PURE__*/_jsxs(CardBottomSectionContainer, {
+    "data-testid": 'card-bottomSection',
     children: [haveAtLeastSomething && /*#__PURE__*/_jsx(CardBottomDivider, {}), progressLevel != undefined && /*#__PURE__*/_jsx(CardProgressContainer, {
       children: /*#__PURE__*/_jsx(LinearProgress, {
         size: Size.Small,
@@ -59,26 +75,26 @@ var CardBottomSection = function CardBottomSection(_ref) {
       })]
     }), (authorName || logo) && /*#__PURE__*/_jsxs(CardAuthorContainer, {
       disabled: disabled,
+      "data-testid": 'card-bottomSection-author',
       children: [/*#__PURE__*/_jsx(ComponentXXS, {
         children: authorName
       }), logo]
     }), actions && /*#__PURE__*/_jsx(CardButtonRowContainer, {
-      children: actions.map(function (x) {
+      children: actions.map(function (x, index) {
         return /*#__PURE__*/_jsx(IconButton, {
+          ref: elRefs[index],
           disabled: disabled,
           variant: "secondary",
           shape: "circular",
           action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.stopPropagation();
             x.onClick();
           },
           children: x.icon
-        });
+        }, index);
       })
     })]
   });
-};
-
+});
 CardBottomSection.propTypes = {
   progressLevel: _pt.number,
   progressMax: _pt.number,
@@ -92,7 +108,7 @@ CardBottomSection.propTypes = {
     onClick: _pt.func.isRequired
   })),
   logo: _pt.node,
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardBottomSection;
 //# sourceMappingURL=CardBottomSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardProgressContainer","div","CardNotesContainer","neutral_500","CardAuthorContainer","props","disabled","neutral_300","CardBottomDivider","neutral_100","CardNoteLeft","CardNoteRight","CardButtonRowContainer","neutral_600","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {\r\n  COLORS,\r\n  ComponentTextStyle,\r\n  ComponentXXS,\r\n  LinearProgress,\r\n  LinearProgressType,\r\n  LinearProgressVariant,\r\n  Size\r\n} from '../../index';\r\nimport {IconButton} from '../../Button';\r\n\r\nexport interface ActionItem {\r\n  icon: React.ReactNode;\r\n  onClick: () => void;\r\n}\r\n\r\nexport interface CardBottomSectionProps {\r\n  progressLevel?: number;\r\n  progressMax?: number;\r\n  progressType?: LinearProgressType;\r\n\r\n  noteLeft?: string;\r\n  noteLeftIcon?: React.ReactNode;\r\n  noteRight?: string;\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  authorName?: string;\r\n  actions?: ActionItem[];\r\n  logo?: React.ReactNode;\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardProgressContainer = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardNotesContainer = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${COLORS.neutral_500};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardAuthorContainer = styled.div<{ disabled?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  height: 48px;\r\n\r\n  div:first-child {\r\n    flex-grow: 2;\r\n  }\r\n\r\n  svg, img {\r\n    width: 80px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n\r\n  ${props => props.disabled ? `\r\n    color: ${COLORS.neutral_300};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardNoteLeft = styled.div`\r\n  position: absolute;\r\n  left: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardNoteRight = styled.div`\r\n  position: absolute;\r\n  right: 0px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  svg {\r\n    margin-right: 4px;\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const CardButtonRowContainer = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  border-top: 1px;\r\n  border-top-color: ${COLORS.neutral_100};\r\n  border-top-style: solid;\r\n\r\n  button:last-child {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  button:not(:last-child) {\r\n    margin: 8px 0px 0px 0px;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n`;\r\n\r\nexport const CardBottomSectionContainer = styled.div`\r\n  padding: 0px 16px 8px 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nconst CardBottomSection = React.forwardRef(({\r\n                                              progressLevel,\r\n                                              progressMax,\r\n                                              progressType = LinearProgressType.Line,\r\n                                              noteLeft,\r\n                                              noteLeftIcon,\r\n                                              noteRight,\r\n                                              noteRightIcon,\r\n                                              authorName,\r\n                                              logo,\r\n                                              actions,\r\n                                              disabled\r\n                                            }: CardBottomSectionProps,\r\n                                            ref: React.Ref<React.RefObject<HTMLButtonElement>[]>) => {\r\n\r\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLButtonElement>[]>([]);\r\n\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 haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\r\n\r\n  return (\r\n    <CardBottomSectionContainer data-testid={'card-bottomSection'}>\r\n      {haveAtLeastSomething && <CardBottomDivider/>}\r\n      {progressLevel != undefined && <CardProgressContainer>\r\n        <LinearProgress size={Size.Small}\r\n                        type={progressType}\r\n                        variant={LinearProgressVariant.Normal}\r\n                        value={progressLevel}\r\n                        max={progressMax ?? progressLevel}/>\r\n      </CardProgressContainer>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardNotesContainer>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardNoteLeft>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardNoteLeft>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardNoteRight>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.neutral_500} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardNoteRight>\r\n        )}\r\n      </CardNotesContainer>}\r\n\r\n      {(authorName || logo) && <CardAuthorContainer disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardAuthorContainer>}\r\n\r\n      {actions && <CardButtonRowContainer>\r\n        {actions.map((x, index) => (\r\n          <IconButton ref={elRefs[index]}\r\n                      key={index}\r\n                      disabled={disabled}\r\n                      variant=\"secondary\"\r\n                      shape=\"circular\"\r\n                      action={(e) => {\r\n                        x.onClick();\r\n                      }}>\r\n            {x.icon}\r\n          </IconButton>\r\n        ))}\r\n      </CardButtonRowContainer>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"file":"CardBottomSection.js"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"names":["CardMiddleSectionContainer","styled","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","COLORS","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","ComponentTextStyle","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;AAkBO,IAAMA,0BAA0B,GAAGC,0BAAOC,GAAV,sUAAhC;;;;AAkBA,IAAMC,aAAa,GAAGF,0BAAOC,GAAV,qMAMJ,UAACE,KAAD;AAAA,SAAWA,KAAK,CAACC,MAAjB;AAAA,CANI,CAAnB;;;;AASA,IAAMC,iBAAiB,GAAGL,0BAAOC,GAAV,qLAAvB;;;;AAQA,IAAMK,qBAAqB,GAAGN,0BAAOC,GAAV,mQAQrBM,cAAOC,WARc,CAA3B;;;;AAcP,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BC,cAQ4B,QAR5BA,cAQ4B;AAAA,MAP5BC,YAO4B,QAP5BA,YAO4B;AAAA,MAN5BC,aAM4B,QAN5BA,aAM4B;AAAA,MAL5BC,KAK4B,QAL5BA,KAK4B;AAAA,MAJ5BC,WAI4B,QAJ5BA,WAI4B;AAAA,MAH5BC,IAG4B,QAH5BA,IAG4B;AAAA,MAF5BC,QAE4B,QAF5BA,QAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,sBAAC,0BAAD;AAA4B,mBAAa,oBAAzC;AAAA,eACGP,cAAc,iBAAI,qBAAC,aAAD;AAAe,MAAA,MAAM,EAAEA;AAAvB,MADrB,eAEE,sBAAC,qBAAD;AAAuB,MAAA,cAAc,EAAEQ,OAAO,CAACR,cAAD,CAA9C;AAAgE,MAAA,YAAY,EAAEQ,OAAO,CAACP,YAAY,IAAIC,aAAjB,CAArF;AAAA,iBACGD,YADH,eAEE,qBAAC,iBAAD;AAAY,QAAA,SAAS,EAAEQ,0BAAmBC,IAA1C;AAAgD,QAAA,KAAK,EAAEb,cAAOC,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,qBAAC,kBAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEO,0BAAmBC,IAAlE;AAAwE,MAAA,KAAK,EAAEH,QAAQ,GAAGV,cAAOC,WAAV,GAAwBD,cAAOc,KAAtH;AAAA,gBACGR;AADH,MARF,EAWGC,WAAW,iBACV,qBAAC,iBAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEP,cAAOe,WAAvD;AAAA,gBACGR;AADH,MAZJ,EAgBGC,IAAI,iBACH,qBAAC,iBAAD;AAAA,gBACGA,IAAI,CAACQ,GAAL,CAAS,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACR,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,gBAAEF,CAAC,CAACG,OAAJ,mDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADQ;AAAA,OAAT;AADH,MAjBJ,EAuBGT,QAAQ,iBACP,qBAAC,iBAAD;AAAA,gBACGA,QAAQ,CAACO,GAAT,CAAa,UAACC,CAAD,EAAIC,KAAJ;AAAA;;AAAA,4BACZ,qBAAC,UAAD;AAAiC,UAAA,KAAK,EAAED,CAAC,CAACE,KAA1C;AAAiD,UAAA,OAAO,iBAAEF,CAAC,CAACG,OAAJ,qDAAe;AAAvE,qBAAaH,CAAC,CAACE,KAAf,cAAwBD,KAAxB,EADY;AAAA,OAAb;AADH,MAxBJ;AAAA,IADF;AAiCD,CA3CD;;;AAhEEf,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AAMAW,IAAAA,K;;AALAV,EAAAA,Q;AAKAU,IAAAA,K;;AAJAT,EAAAA,Q;;eAsGaR,iB","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\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 data-testid={'card-middleSection'} >\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, index) => (\r\n            <Tag key={`${x.label}_${index}`} 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, index) => (\r\n            <Tag key={`${x.label}_${index}`} 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 → VerticalCard/CardMiddleSection.d.ts}

@@ -1,27 +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;
+import * as React from 'react';
+import { TagVariants } from '../../index';
+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 → VerticalCard/CardMiddleSection.js}

@@ -5,7 +5,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '..';
+import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardMiddleSectionContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n"])));
@@ -25,6 +25,7 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
       row2Tags = _ref.row2Tags,
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
+    "data-testid": 'card-middleSection',
     children: [colorBandColor && /*#__PURE__*/_jsx(CardColorBand, {
       $color: colorBandColor
     }), /*#__PURE__*/_jsxs(CardCategoryContainer, {
@@ -78,7 +79,7 @@ CardMiddleSection.propTypes = {
   row2Tags: _pt.arrayOf(_pt.shape({
     label: _pt.string.isRequired
   })),
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardMiddleSection;
 //# sourceMappingURL=CardMiddleSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","CardMiddleSectionContainer","div","CardColorBand","props","$color","CardTagsContainer","CardCategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","black","neutral_600","map","x","index","label","variant"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\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 data-testid={'card-middleSection'} >\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, index) => (\r\n            <Tag key={`${x.label}_${index}`} 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, index) => (\r\n            <Tag key={`${x.label}_${index}`} 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 → VerticalCard/CardTopSection.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"names":["CardImg","styled","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;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,cAAOC,KAPG,CAA3B;;;AAWP,IAAMC,cAAc,gBAAGC,KAAK,CAACC,UAAN,CAAiB,gBAYyBC,GAZzB,EAY4D;AAAA,MAXzDC,QAWyD,QAXzDA,QAWyD;AAAA,MAVzDC,WAUyD,QAVzDA,WAUyD;AAAA,MATzDC,KASyD,QATzDA,KASyD;AAAA,MARzDC,QAQyD,QARzDA,QAQyD;AAAA,MAPzDC,OAOyD,QAPzDA,OAOyD;AAAA,6BANzDC,UAMyD;AAAA,MANzDA,UAMyD,gCAN5C,UAM4C;AAAA,MALzDC,mBAKyD,QALzDA,mBAKyD;AAAA,MAJzDC,mBAIyD,QAJzDA,mBAIyD;AAAA,MAHzDC,2BAGyD,QAHzDA,2BAGyD;AAAA,MAFzDC,sBAEyD,QAFzDA,sBAEyD;AAAA,MADzDpB,QACyD,QADzDA,QACyD;AAElG,sBACE,sBAAC,uBAAD;AAAyB,IAAA,QAAQ,EAAEA,QAAnC;AAA6C,mBAAa,iBAA1D;AAAA,4BACE,qBAAC,OAAD;AAAS,MAAA,GAAG,EAAEa;AAAd,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,qBAAD;AAAuB,qBAAa,0BAApC;AAAA,6BACE,qBAAC,iBAAD;AAAU,QAAA,GAAG,EAAEF,GAAf;AACU,QAAA,QAAQ,EAAEV,QADpB;AAEU,QAAA,MAAM,EAAE,gBAACW,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAFlB;AAGU,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAHhC;AADF,MAHJ,EAUG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,mBAAD;AAAA,6BACE,qBAAC,QAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MAXJ,EAeG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,mBAAD;AAAqB,qBAAa,wBAAlC;AAA4D,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAnG;AACqB,MAAA,gBAAgB,EAAEnB,QAAQ,GAAGK,cAAOgB,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EADjG;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,MAhBJ;AAAA,IADF;AA6BD,CA3CsB,CAAvB;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAb,EAAAA,Q;;eA6GaO,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 '../../index';\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?: React.ReactNode;\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.forwardRef(({\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, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'}>\r\n      <CardImg src={image}/>\r\n      {(!!selected || !!setSelected) && (\r\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\r\n          <Checkbox ref={ref}\r\n                    disabled={disabled}\r\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\r\n                    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 data-testid={'card-topSection-ribbon'} $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 → VerticalCard/CardTopSection.d.ts}

@@ -1,27 +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;
+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?: React.ReactNode;
+    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 | undefined;
+}, never>;
+export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+    $backgroundColor: string;
+}, never>;
+export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
+export default CardTopSection;