@laerdal/life-react-components 5.0.5-dev.1 → 5.0.5-dev.3

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

@@ -28,15 +28,15 @@ export interface CardBottomSectionProps {
     /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */
     disabled?: boolean;
 }
-export declare const CardBottomSectionProgressStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNotesStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionAuthorStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const CardBottomSectionProgressStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNotesStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionAuthorStyles: import("styled-components").StyledComponent<"div", any, {
     $disabled?: boolean | undefined;
-}>> & string;
-export declare const CardBottomSectionDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNoteLeftStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionNoteRightStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionButtonRowContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardBottomSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never>;
+export declare const CardBottomSectionDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNoteLeftStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionNoteRightStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardBottomSectionButtonRowContainerStyles: 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/VerticalCard/CardBottomSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","jsx","_jsx","jsxs","_jsxs","CardBottomSectionProgressStyles","div","_templateObject","_taggedTemplateLiteral","CardBottomSectionNotesStyles","_templateObject2","props","getColor","theme","CardBottomSectionAuthorStyles","_templateObject3","$disabled","concat","CardBottomSectionDivider","_templateObject4","CardBottomSectionNoteLeftStyles","_templateObject5","CardBottomSectionNoteRightStyles","_templateObject6","CardBottomSectionButtonRowContainerStyles","_templateObject7","CardBottomSectionContainer","_templateObject8","CardBottomSection","forwardRef","_ref","ref","progressLevel","progressMax","_ref$progressType","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","_React$useState","useState","_React$useState2","_slicedToArray","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","children","size","Small","type","variant","Normal","value","max","color","textStyle","Bold","x","index","shape","action","e","onClick","icon","propTypes","_pt","number","string","node","arrayOf","isRequired","func","bool"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\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 const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = 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.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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: ${props => COLORS.getColor('neutral_100', props.theme)};\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: ${props => COLORS.getColor('neutral_600', props.theme)};\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  const theme = useTheme();\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 && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\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      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CardBottomSection.js","names":["React","styled","useTheme","COLORS","ComponentTextStyle","ComponentXXS","LinearProgress","LinearProgressType","LinearProgressVariant","Size","IconButton","CardBottomSectionProgressStyles","div","CardBottomSectionNotesStyles","props","getColor","theme","CardBottomSectionAuthorStyles","$disabled","CardBottomSectionDivider","CardBottomSectionNoteLeftStyles","CardBottomSectionNoteRightStyles","CardBottomSectionButtonRowContainerStyles","CardBottomSectionContainer","CardBottomSection","forwardRef","ref","progressLevel","progressMax","progressType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","logo","actions","disabled","useState","elRefs","setElRefs","length","useEffect","Array","fill","map","createRef","useImperativeHandle","haveAtLeastSomething","undefined","Small","Normal","Bold","x","index","e","onClick","icon"],"sources":["../../../src/Card/VerticalCard/CardBottomSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } 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  /** Optional. Current progress level shown in the progress bar. */\r\n  progressLevel?: number;\r\n  /** Optional. Maximum level of progress in the progress bar. */\r\n  progressMax?: number;\r\n  /** Optional. Type of the progress bar. */\r\n  progressType?: LinearProgressType;\r\n\r\n  /** Optional. Note text shown on the left side of the section. */\r\n  noteLeft?: string;\r\n  /** Optional. Note icon shown on the left side of the section. */\r\n  noteLeftIcon?: React.ReactNode;\r\n  /** Optional. Note text shown on the right side of the section. */\r\n  noteRight?: string;\r\n  /** Optional. Note icon shown on the right side of the section. */\r\n  noteRightIcon?: React.ReactNode;\r\n\r\n  /** Author name shown at the bottom-left part of the section.  */\r\n  authorName?: string;\r\n  /** Array of actions shown on the bottom-right corner of the section. */\r\n  actions?: ActionItem[];\r\n  /** Logo shown on the right side of the section, in front of AuthorName. */\r\n  logo?: React.ReactNode;\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 const CardBottomSectionProgressStyles = styled.div`\r\n  padding: 8px 0;\r\n`;\r\n\r\nexport const CardBottomSectionNotesStyles = styled.div`\r\n  height: 48px;\r\n  position: relative;\r\n  color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nexport const CardBottomSectionAuthorStyles = 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.getColor('neutral_300', props.theme)};\r\n    svg, img {\r\n      filter: grayscale(100%);\r\n    }\r\n    \r\n  ` : ''}\r\n`;\r\n\r\nexport const CardBottomSectionDivider = styled.div`\r\n  border-top: 1px;\r\n  border-top-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  border-top-style: solid;\r\n  width: 100%;\r\n`;\r\n\r\nexport const CardBottomSectionNoteLeftStyles = 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 CardBottomSectionNoteRightStyles = 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 CardBottomSectionButtonRowContainerStyles = 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: ${props => COLORS.getColor('neutral_100', props.theme)};\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: ${props => COLORS.getColor('neutral_600', props.theme)};\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  const theme = useTheme();\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 && <CardBottomSectionDivider/>}\r\n      {progressLevel != undefined && <CardBottomSectionProgressStyles>\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      </CardBottomSectionProgressStyles>}\r\n\r\n      {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <CardBottomSectionNotesStyles>\r\n        {(noteLeft || noteLeftIcon) && (\r\n          <CardBottomSectionNoteLeftStyles>\r\n            {noteLeftIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteLeft}</ComponentXXS>\r\n          </CardBottomSectionNoteLeftStyles>\r\n        )}\r\n        {(noteRight || noteRightIcon) && (\r\n          <CardBottomSectionNoteRightStyles>\r\n            {noteRightIcon}\r\n            <ComponentXXS color={COLORS.getColor('neutral_500', theme)} textStyle={ComponentTextStyle.Bold}>{noteRight}</ComponentXXS>\r\n          </CardBottomSectionNoteRightStyles>\r\n        )}\r\n      </CardBottomSectionNotesStyles>}\r\n\r\n      {(authorName || logo) && <CardBottomSectionAuthorStyles $disabled={disabled} data-testid={'card-bottomSection-author'}>\r\n        <ComponentXXS>{authorName}</ComponentXXS>\r\n        {logo}\r\n      </CardBottomSectionAuthorStyles>}\r\n\r\n      {actions && <CardBottomSectionButtonRowContainerStyles>\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      </CardBottomSectionButtonRowContainerStyles>}\r\n    </CardBottomSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardBottomSection;\r\n"],"mappings":"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"}

package/dist/Card/VerticalCard/CardMiddleSection.cjs

@@ -5,24 +5,24 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CardMiddleSectionTagsStyles = exports.CardMiddleSectionContainer = exports.CardMiddleSectionColorBandStyles = exports.CardMiddleSectionCategoryStyles = void 0;
+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 _getRequireWildcardCache(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; }
-var 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"])));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var 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"])));
 exports.CardMiddleSectionContainer = CardMiddleSectionContainer;
-var 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"])), function (props) {
+var 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"])), function (props) {
   return props.$color;
 });
 exports.CardMiddleSectionColorBandStyles = CardMiddleSectionColorBandStyles;
-var 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"])));
+var 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"])));
 exports.CardMiddleSectionTagsStyles = CardMiddleSectionTagsStyles;
-var 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"])), function (props) {
+var 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"])), function (props) {
   return _index.COLORS.getColor('neutral_500', props.theme);
 });
 exports.CardMiddleSectionCategoryStyles = CardMiddleSectionCategoryStyles;
@@ -79,5 +79,5 @@ var CardMiddleSection = function CardMiddleSection(_ref) {
   });
 };
 var _default = CardMiddleSection;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=CardMiddleSection.cjs.map

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","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardMiddleSectionContainer","styled","div","_taggedTemplateLiteral2","exports","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":["CardMiddleSectionContainer","styled","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","COLORS","getColor","theme","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","useTheme","Boolean","ComponentTextStyle","Bold","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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"}

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

@@ -24,14 +24,14 @@ export interface CardTag {
     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>, {
+export declare const CardMiddleSectionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardMiddleSectionColorBandStyles: import("styled-components").StyledComponent<"div", any, {
     $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>, {
+}, never>;
+export declare const CardMiddleSectionTagsStyles: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardMiddleSectionCategoryStyles: import("styled-components").StyledComponent<"div", any, {
     $extraTopMargin: boolean;
     $bottomMargin: boolean;
-}>> & string;
+}, never>;
 declare const CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps>;
 export default CardMiddleSection;

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","CardMiddleSectionContainer","div","CardMiddleSectionColorBandStyles","props","$color","CardMiddleSectionTagsStyles","CardMiddleSectionCategoryStyles","getColor","theme","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","Boolean","Bold","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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"}

package/dist/Card/VerticalCard/CardTopSection.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
+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"));
@@ -17,23 +17,23 @@ 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 _getRequireWildcardCache(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; }
-var 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"])));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var 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"])));
 exports.CardTopSectionImageContainer = CardTopSectionImageContainer;
-var 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"])));
+var 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"])));
 exports.CardTopSectionTagContainer = CardTopSectionTagContainer;
-var CardTopSectionContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
+var CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 });
 exports.CardTopSectionContainer = CardTopSectionContainer;
-var 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"])), function (props) {
+var 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"])), function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
 exports.CardTopSectionRibbonContainer = CardTopSectionRibbonContainer;
-var 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"])), function (props) {
+var 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"])), function (props) {
   return _index.COLORS.getColor('white', props.theme);
 });
 exports.CardTopSectionCheckboxContainer = CardTopSectionCheckboxContainer;
@@ -69,7 +69,7 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox["default"], {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
         ref: ref,
         disabled: disabled,
         select: function select(selected) {
@@ -96,24 +96,24 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, 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"].node,
-  highlightRibbonContentColor: _propTypes["default"].string,
-  highlightRibbonBgColor: _propTypes["default"].string,
-  image: _propTypes["default"].shape({
-    src: _propTypes["default"].string.isRequired,
-    fallbackSrc: _propTypes["default"].string,
-    alt: _propTypes["default"].string.isRequired,
-    height: _propTypes["default"].string,
-    width: _propTypes["default"].string,
-    loader: _propTypes["default"].bool
+  selected: _propTypes.default.bool,
+  setSelected: _propTypes.default.func,
+  tagLabel: _propTypes.default.string,
+  tagIcon: _propTypes.default.node,
+  highlightRibbonText: _propTypes.default.string,
+  highlightRibbonIcon: _propTypes.default.node,
+  highlightRibbonContentColor: _propTypes.default.string,
+  highlightRibbonBgColor: _propTypes.default.string,
+  image: _propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    fallbackSrc: _propTypes.default.string,
+    alt: _propTypes.default.string.isRequired,
+    height: _propTypes.default.string,
+    width: _propTypes.default.string,
+    loader: _propTypes.default.bool
   }),
-  disabled: _propTypes["default"].bool
+  disabled: _propTypes.default.bool
 };
 var _default = CardTopSection;
-exports["default"] = _default;
+exports.default = _default;
 //# sourceMappingURL=CardTopSection.cjs.map

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","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","CardTopSectionImageContainer","styled","div","_taggedTemplateLiteral2","exports","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","_ref$tagVariant","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":["CardTopSectionImageContainer","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","getColor","theme","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","height","fallbackSrc","src","alt","loader","width","ComponentTextStyle","Regular"],"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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"}

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

@@ -31,15 +31,15 @@ export interface CardTopSectionProps {
     /** This property is automatically set in the Card itself and is based on 'disabled' flag of CardProps. */
     disabled?: boolean;
 }
-export declare const CardTopSectionImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardTopSectionTagContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardTopSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const CardTopSectionImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopSectionTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
-}>> & string;
-export declare const CardTopSectionRibbonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never>;
+export declare const CardTopSectionRibbonContainer: import("styled-components").StyledComponent<"div", any, {
     $color: string;
     $backgroundColor: string;
-}>> & string;
-export declare const CardTopSectionCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never>;
+export declare const CardTopSectionCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
 export default CardTopSection;

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

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","CardTopSectionImageContainer","div","_templateObject","_taggedTemplateLiteral","CardTopSectionTagContainer","_templateObject2","CardTopSectionContainer","_templateObject3","props","disabled","CardTopSectionRibbonContainer","_templateObject4","$backgroundColor","$color","CardTopSectionCheckboxContainer","_templateObject5","getColor","theme","CardTopSection","forwardRef","_ref","ref","_image$height","_image$fallbackSrc","_image$loader","selected","setSelected","image","tagLabel","tagIcon","_ref$tagVariant","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","color","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"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.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardTopSectionImageContainer","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","getColor","theme","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","Regular"],"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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"}

package/dist/Card/VerticalCard/index.cjs

@@ -14,25 +14,25 @@ var _exportNames = {
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function get() {
-    return _Card["default"];
+    return _Card.default;
   }
 });
 Object.defineProperty(exports, "CardBottomSection", {
   enumerable: true,
   get: function get() {
-    return _CardBottomSection["default"];
+    return _CardBottomSection.default;
   }
 });
 Object.defineProperty(exports, "CardMiddleSection", {
   enumerable: true,
   get: function get() {
-    return _CardMiddleSection["default"];
+    return _CardMiddleSection.default;
   }
 });
 Object.defineProperty(exports, "CardTopSection", {
   enumerable: true,
   get: function get() {
-    return _CardTopSection["default"];
+    return _CardTopSection.default;
   }
 });
 var _Card = _interopRequireDefault(require("./Card"));
@@ -72,6 +72,6 @@ Object.keys(_CardTopSection).forEach(function (key) {
     }
   });
 });
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_Card","_interopRequireDefault","require","_CardBottomSection","_interopRequireWildcard","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_CardMiddleSection","_CardTopSection","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","n","__proto__","a","getOwnPropertyDescriptor","u","i","set"],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACAG,MAAA,CAAAC,IAAA,CAAAH,kBAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,kBAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,kBAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,kBAAA,GAAAb,uBAAA,CAAAF,OAAA;AACAG,MAAA,CAAAC,IAAA,CAAAW,kBAAA,EAAAV,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAS,kBAAA,CAAAT,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAC,kBAAA,CAAAT,GAAA;IAAA;EAAA;AAAA;AACA,IAAAU,eAAA,GAAAd,uBAAA,CAAAF,OAAA;AACAG,MAAA,CAAAC,IAAA,CAAAY,eAAA,EAAAX,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAU,eAAA,CAAAV,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAE,eAAA,CAAAV,GAAA;IAAA;EAAA;AAAA;AAAiC,SAAAW,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAhB,wBAAAgB,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAP,GAAA,CAAAI,CAAA,OAAAO,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAxB,MAAA,CAAAS,cAAA,IAAAT,MAAA,CAAAyB,wBAAA,WAAAC,CAAA,IAAAX,CAAA,oBAAAW,CAAA,OAAArB,cAAA,CAAAC,IAAA,CAAAS,CAAA,EAAAW,CAAA,SAAAC,CAAA,GAAAH,CAAA,GAAAxB,MAAA,CAAAyB,wBAAA,CAAAV,CAAA,EAAAW,CAAA,UAAAC,CAAA,KAAAA,CAAA,CAAAhB,GAAA,IAAAgB,CAAA,CAAAC,GAAA,IAAA5B,MAAA,CAAAS,cAAA,CAAAa,CAAA,EAAAI,CAAA,EAAAC,CAAA,IAAAL,CAAA,CAAAI,CAAA,IAAAX,CAAA,CAAAW,CAAA,YAAAJ,CAAA,cAAAP,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAU,GAAA,CAAAb,CAAA,EAAAO,CAAA,GAAAA,CAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAI,QAAO,QAAQ;AAEtC,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQF,OAAO,IAAIG,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQH,OAAO,IAAII,cAAc,QAAO,kBAAkB;AAC1D,cAAc,kBAAkB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAI,QAAO,QAAQ;AAEtC,SAAQD,OAAO,IAAIE,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQF,OAAO,IAAIG,iBAAiB,QAAO,qBAAqB;AAChE,cAAc,qBAAqB;AACnC,SAAQH,OAAO,IAAII,cAAc,QAAO,kBAAkB;AAC1D,cAAc,kBAAkB"}