@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Card/VerticalCard/CardMiddleSection.cjs

@@ -1,22 +1,60 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardMiddleSectionContainer = exports.CardMiddleSectionContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])));
-const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), props => props.$color);
-const CardMiddleSectionTagsStyles = exports.CardMiddleSectionTagsStyles = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n"])));
-const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles = _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"])), props => _index.COLORS.getColor('neutral_500', props.theme));
+const CardMiddleSectionContainer = exports.CardMiddleSectionContainer = _styledComponents.default.div`
+  display: flex;
+  flex-grow: 1;
+  width: calc(100% - 32px);
+  position: relative;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+
+  .descriptionBlock {
+    padding: 2px 0;
+  }
+
+  .titleBlock {
+    padding: 2px 0;
+  }
+`;
+const CardMiddleSectionColorBandStyles = exports.CardMiddleSectionColorBandStyles = _styledComponents.default.div`
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  height: 8px;
+  background-color: ${props => props.$color};
+`;
+const CardMiddleSectionTagsStyles = exports.CardMiddleSectionTagsStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  padding: 4px 0;
+  gap: 4px;
+  flex-wrap: wrap;
+`;
+const CardMiddleSectionCategoryStyles = exports.CardMiddleSectionCategoryStyles = _styledComponents.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: none;
+  gap: 6px;
+
+  svg {
+    color: ${props => _index.COLORS.getColor('neutral_500', props.theme)};
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
 const CardMiddleSection = _ref => {
   let {
     colorBandColor,
@@ -51,23 +89,17 @@ const CardMiddleSection = _ref => {
       color: _index.COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
-      children: tags.map((x, index) => {
-        var _x$variant;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
-          label: x.label,
-          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      children: tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
+        label: x.label,
+        variant: x.variant ?? 'neutral',
+        icon: x.icon
+      }, `${x.label}_${index}`))
     }), row2Tags && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardMiddleSectionTagsStyles, {
-      children: row2Tags.map((x, index) => {
-        var _x$variant2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
-          label: x.label,
-          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      children: row2Tags.map((x, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Tag, {
+        label: x.label,
+        variant: x.variant ?? 'neutral',
+        icon: x.icon
+      }, `${x.label}_${index}`))
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","_taggedTemplateLiteral2","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","_x$variant","Tag","label","variant","icon","concat","_x$variant2","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = 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 CardMiddleSectionCategoryStyles = 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: ${props => COLORS.getColor('neutral_500', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","exports","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","ComponentTextStyle","Bold","color","ComponentXL","className","map","x","index","Tag","label","variant","icon","_default"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = 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 CardMiddleSectionCategoryStyles = 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: ${props => COLORS.getColor('neutral_500', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,37 +1,37 @@
-import * as React from 'react';
-import { TagVariants } from '../../index';
-import { ReactNode } from 'react';
-export interface CardMiddleSectionProps {
-    /** Color of the band to be shown on the top of middle section. */
-    colorBandColor?: string;
-    /** Icon to be shown on the left side of the categoryLabel. */
-    categoryIcon?: React.ReactNode;
-    /** Label to be shown at the top part of the middle section. */
-    categoryLabel?: string;
-    /** Main title of the Card component. */
-    title: string;
-    /** Description of the Card. */
-    description?: string;
-    /** Tags to be shown under the description. */
-    tags?: CardTag[];
-    /** Second row of tags if needed. */
-    row2Tags?: CardTag[];
-    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
-    disabled?: boolean;
-}
-export interface CardTag {
-    label: string;
-    variant?: TagVariants;
-    icon?: ReactNode;
-}
-export declare const CardMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardMiddleSectionColorBandStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $color: string;
-}>> & string;
-export declare const CardMiddleSectionTagsStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardMiddleSectionCategoryStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $extraTopMargin: boolean;
-    $bottomMargin: boolean;
-}>> & string;
-declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
-export default CardMiddleSection;
+import * as React from 'react';
+import { TagVariants } from '../../index';
+import { ReactNode } from 'react';
+export interface CardMiddleSectionProps {
+    /** Color of the band to be shown on the top of middle section. */
+    colorBandColor?: string;
+    /** Icon to be shown on the left side of the categoryLabel. */
+    categoryIcon?: React.ReactNode;
+    /** Label to be shown at the top part of the middle section. */
+    categoryLabel?: string;
+    /** Main title of the Card component. */
+    title: string;
+    /** Description of the Card. */
+    description?: string;
+    /** Tags to be shown under the description. */
+    tags?: CardTag[];
+    /** Second row of tags if needed. */
+    row2Tags?: CardTag[];
+    /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
+    disabled?: boolean;
+}
+export interface CardTag {
+    label: string;
+    variant?: TagVariants;
+    icon?: ReactNode;
+}
+export declare const CardMiddleSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardMiddleSectionColorBandStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color: string;
+}>> & string;
+export declare const CardMiddleSectionTagsStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardMiddleSectionCategoryStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $extraTopMargin: boolean;
+    $bottomMargin: boolean;
+}>> & string;
+declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
+export default CardMiddleSection;

package/dist/Card/VerticalCard/CardMiddleSection.js

@@ -1,13 +1,52 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const 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 const CardMiddleSectionColorBandStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ", ";\n"])), props => props.$color);
-export const CardMiddleSectionTagsStyles = 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 const CardMiddleSectionCategoryStyles = 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"])), props => COLORS.getColor('neutral_500', props.theme));
+export const CardMiddleSectionContainer = styled.div`
+  display: flex;
+  flex-grow: 1;
+  width: calc(100% - 32px);
+  position: relative;
+  flex-direction: column;
+  padding: 16px;
+  gap: 8px;
+
+  .descriptionBlock {
+    padding: 2px 0;
+  }
+
+  .titleBlock {
+    padding: 2px 0;
+  }
+`;
+export const CardMiddleSectionColorBandStyles = styled.div`
+  position: absolute;
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  height: 8px;
+  background-color: ${props => props.$color};
+`;
+export const CardMiddleSectionTagsStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 4px 0;
+  gap: 4px;
+  flex-wrap: wrap;
+`;
+export const CardMiddleSectionCategoryStyles = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: none;
+  gap: 6px;
+
+  svg {
+    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
 const CardMiddleSection = _ref => {
   let {
     colorBandColor,
@@ -42,23 +81,17 @@ const CardMiddleSection = _ref => {
       color: COLORS.getColor('neutral_600', theme),
       children: description
     }), tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
-      children: tags.map((x, index) => {
-        var _x$variant;
-        return /*#__PURE__*/_jsx(Tag, {
-          label: x.label,
-          variant: (_x$variant = x.variant) !== null && _x$variant !== void 0 ? _x$variant : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      children: tags.map((x, index) => /*#__PURE__*/_jsx(Tag, {
+        label: x.label,
+        variant: x.variant ?? 'neutral',
+        icon: x.icon
+      }, `${x.label}_${index}`))
     }), row2Tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
-      children: row2Tags.map((x, index) => {
-        var _x$variant2;
-        return /*#__PURE__*/_jsx(Tag, {
-          label: x.label,
-          variant: (_x$variant2 = x.variant) !== null && _x$variant2 !== void 0 ? _x$variant2 : 'neutral',
-          icon: x.icon
-        }, "".concat(x.label, "_").concat(index));
-      })
+      children: row2Tags.map((x, index) => /*#__PURE__*/_jsx(Tag, {
+        label: x.label,
+        variant: x.variant ?? 'neutral',
+        icon: x.icon
+      }, `${x.label}_${index}`))
     })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","_templateObject","_taggedTemplateLiteral","CardMiddleSectionColorBandStyles","_templateObject2","props","$color","CardMiddleSectionTagsStyles","_templateObject3","CardMiddleSectionCategoryStyles","_templateObject4","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","Bold","color","className","map","x","index","_x$variant","label","variant","icon","concat","_x$variant2"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = 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 CardMiddleSectionCategoryStyles = 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: ${props => COLORS.getColor('neutral_500', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","jsx","_jsx","jsxs","_jsxs","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","getColor","theme","CardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","Bold","color","className","map","x","index","label","variant","icon"],"sources":["../../../src/Card/VerticalCard/CardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface CardMiddleSectionProps {\r\n  /** Color of the band to be shown on the top of middle section. */\r\n  colorBandColor?: string;\r\n  /** Icon to be shown on the left side of the categoryLabel. */\r\n  categoryIcon?: React.ReactNode;\r\n  /** Label to be shown at the top part of the middle section. */\r\n  categoryLabel?: string;\r\n  /** Main title of the Card component. */\r\n  title: string;\r\n  /** Description of the Card. */\r\n  description?: string;\r\n  /** Tags to be shown under the description. */\r\n  tags?: CardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: CardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport interface CardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\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 CardMiddleSectionColorBandStyles = 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 CardMiddleSectionTagsStyles = 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 CardMiddleSectionCategoryStyles = 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: ${props => COLORS.getColor('neutral_500', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <CardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <CardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.getColor('neutral_500', theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </CardMiddleSectionCategoryStyles>\r\n      }\r\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.getColor('neutral_500', theme) : COLORS.getColor('black', theme)}>\r\n        {title}\r\n      </ComponentXL>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.getColor('neutral_600', theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <CardMiddleSectionTagsStyles>\r\n          {row2Tags.map((x, index) => (\r\n            <Tag key={`${x.label}_${index}`} label={x.label} variant={x.variant ?? 'neutral'} icon={x.icon} />\r\n          ))}\r\n        </CardMiddleSectionTagsStyles>\r\n      )}\r\n    </CardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default CardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/CardTopSection.cjs

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -15,16 +14,70 @@ var _Tag = require("../../Tag");
 var _index = require("../../index");
 var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardTopSectionImageContainer = exports.CardTopSectionImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
-const CardTopSectionTagContainer = exports.CardTopSectionTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
-const CardTopSectionContainer = exports.CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), props => props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '');
-const CardTopSectionRibbonContainer = exports.CardTopSectionRibbonContainer = _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"])), props => props.$backgroundColor, props => props.$color);
-const CardTopSectionCheckboxContainer = exports.CardTopSectionCheckboxContainer = _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"])), props => _index.COLORS.getColor('white', props.theme));
+const CardTopSectionImageContainer = exports.CardTopSectionImageContainer = _styledComponents.default.div`
+  border-top-right-radius: 8px;
+  border-top-left-radius: 8px;
+  height: 100%;
+  width: 100%;
+  img{
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    border-top-right-radius: 8px;
+    border-top-left-radius: 8px;
+  }
+`;
+const CardTopSectionTagContainer = exports.CardTopSectionTagContainer = _styledComponents.default.div`
+  position: absolute;
+
+  top: 16px;
+  left: 16px;
+  width: calc(100% - 32px);
+`;
+const CardTopSectionContainer = exports.CardTopSectionContainer = _styledComponents.default.div`
+  position: relative;
+  width: 100%;
+  overflow: visible;
+
+  ${props => props.disabled ? `
+  img, svg {
+    filter: grayscale(100%);
+  }` : ''}
+`;
+const CardTopSectionRibbonContainer = exports.CardTopSectionRibbonContainer = _styledComponents.default.div`
+  min-height: calc(40px - 16px);
+  background-color: ${props => props.$backgroundColor};
+  width: calc(100% - 32px);
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  padding: 8px 16px 8px 16px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  svg {
+    color: ${props => props.$color};
+    width: 24px;
+    height: 24px;
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+`;
+const CardTopSectionCheckboxContainer = exports.CardTopSectionCheckboxContainer = _styledComponents.default.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+
+  .checkbox-icon {
+    background-color: ${props => _index.COLORS.getColor('white', props.theme)};
+  }
+`;
 const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var _image$height, _image$fallbackSrc, _image$loader;
   let {
     selected,
     setSelected,
@@ -43,14 +96,14 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled: disabled,
     "data-testid": 'card-topSection',
     style: {
-      height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
+      height: image?.height ?? 200
     },
     children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionImageContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
-        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
+        fallbacks: image.fallbackSrc ?? '',
         src: image.src,
         alt: image.alt,
-        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
+        loader: image.loader ?? false,
         width: image.width,
         height: image.height
       })
@@ -70,10 +123,10 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
-      $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
-      $backgroundColor: disabled ? _index.COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
+      $color: highlightRibbonContentColor ?? '',
+      $backgroundColor: disabled ? _index.COLORS.getColor('neutral_300', theme) : highlightRibbonBgColor ?? '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
-        color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
+        color: highlightRibbonContentColor ?? '',
         textStyle: _typography.ComponentTextStyle.Regular,
         children: highlightRibbonText
       })]

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

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","exports","styled","div","_taggedTemplateLiteral2","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","forwardRef","_ref","ref","_image$height","_image$fallbackSrc","_image$loader","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","ComponentS","color","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  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\n\r\nexport const CardTopSectionTagContainer = 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  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 CardTopSectionRibbonContainer = 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 CardTopSectionCheckboxContainer = 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: ${props => COLORS.getColor('white', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer 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        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.getColor('neutral_300', theme) : 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        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","exports","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","ComponentS","color","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  /** Sets initial state of select Checkbox. */\r\n  selected?: boolean;\r\n  /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */\r\n  setSelected?: (arg0: boolean) => void;\r\n  /** Label shown in the tag in the top-left corner of the Card. */\r\n  tagLabel?: string;\r\n  /** Icon shown in the tag in the top-left corner of the Card. */\r\n  tagIcon?: React.ReactNode;\r\n  /** Tag variant shown in the tag in the top-left corner of the Card. */\r\n  tagVariant?: TagVariants;\r\n  /** Text shown in the Ribbon, under the Image.  */\r\n  highlightRibbonText?: string;\r\n  /** Icon shown in the Ribbon, under the Image.  */\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  /** Content color (text and image) of the Ribbon, under the Image.  */\r\n  highlightRibbonContentColor?: string;\r\n  /** Background color of the Ribbon, shown under the Image.  */\r\n  highlightRibbonBgColor?: string;\r\n  /** Details of the Image shown in the section. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardTopSectionImageContainer = styled.div`\r\n  border-top-right-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  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\n\r\nexport const CardTopSectionTagContainer = 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  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 CardTopSectionRibbonContainer = 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 CardTopSectionCheckboxContainer = 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: ${props => COLORS.getColor('white', props.theme)};\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  const theme = useTheme();\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardTopSectionImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardTopSectionCheckboxContainer 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        </CardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.getColor('neutral_300', theme) : 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        </CardTopSectionRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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","ignoreList":[]}