@laerdal/life-react-components 6.0.0-dev.26.full → 6.0.0-dev.27

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardMiddleSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_index","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalCardMiddleSectionContainer","exports","styled","div","VerticalCardMiddleSectionColorBandStyles","props","$color","VerticalCardMiddleSectionTagsStyles","VerticalCardMiddleSectionCategoryStyles","COLORS","generateToken","componentType","defaultVariant","theme","VerticalCardMiddleSectionTitle","h3","ComponentXLStyling","ComponentTextStyle","Bold","$disabled","VerticalCardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","componentId","useTheme","jsxs","children","jsx","$extraTopMargin","Boolean","$bottomMargin","ComponentS","textStyle","color","id","className","map","x","index","Tag","label","variant","icon","propTypes","_propTypes","string","node","isRequired","arrayOf","shape","bool","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXLStyling, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface VerticalCardMiddleSectionProps {\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?: VerticalCardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: VerticalCardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n  /** Top level Id of Card component */\r\n  componentId?: string;\r\n}\r\n\r\nexport interface VerticalCardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const VerticalCardMiddleSectionContainer = 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 VerticalCardMiddleSectionColorBandStyles = 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 VerticalCardMiddleSectionTagsStyles = 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 VerticalCardMiddleSectionCategoryStyles = 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.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardMiddleSectionTitle = styled.h3<{ $disabled?: boolean }>`\r\n  ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled \r\n    ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)\r\n    : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme)\r\n  )}\r\n`;\r\n\r\nconst VerticalCardMiddleSection: React.FunctionComponent<VerticalCardMiddleSectionProps> = ({\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  componentId\r\n}: VerticalCardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  \r\n  return (\r\n    <VerticalCardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <VerticalCardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <VerticalCardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </VerticalCardMiddleSectionCategoryStyles>\r\n      }\r\n      <VerticalCardMiddleSectionTitle \r\n        id={`${componentId}-title`} \r\n        className=\"titleBlock\"\r\n        $disabled={disabled}>\r\n        {title}\r\n      </VerticalCardMiddleSectionTitle>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <VerticalCardMiddleSectionTagsStyles>\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        </VerticalCardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <VerticalCardMiddleSectionTagsStyles>\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        </VerticalCardMiddleSectionTagsStyles>\r\n      )}\r\n    </VerticalCardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default VerticalCardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

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

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

package/dist/Card/VerticalCard/{CardMiddleSection.js → VerticalCardMiddleSection.js}

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled, { useTheme } from 'styled-components';
 import { COLORS, ComponentS, ComponentTextStyle, ComponentXLStyling, Tag } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardMiddleSectionContainer = styled.div`
+export const VerticalCardMiddleSectionContainer = styled.div`
   display: flex;
   flex-grow: 1;
   width: calc(100% - 32px);
@@ -20,7 +20,7 @@ export const CardMiddleSectionContainer = styled.div`
     padding: 2px 0;
   }
 `;
-export const CardMiddleSectionColorBandStyles = styled.div`
+export const VerticalCardMiddleSectionColorBandStyles = styled.div`
   position: absolute;
   width: 100%;
   top: 0px;
@@ -28,14 +28,14 @@ export const CardMiddleSectionColorBandStyles = styled.div`
   height: 8px;
   background-color: ${props => props.$color};
 `;
-export const CardMiddleSectionTagsStyles = styled.div`
+export const VerticalCardMiddleSectionTagsStyles = styled.div`
   display: flex;
   flex-direction: row;
   padding: 4px 0;
   gap: 4px;
   flex-wrap: wrap;
 `;
-export const CardMiddleSectionCategoryStyles = styled.div`
+export const VerticalCardMiddleSectionCategoryStyles = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -51,7 +51,7 @@ export const CardMiddleSectionCategoryStyles = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardMiddleSectionTitle = styled.h3`
+export const VerticalCardMiddleSectionTitle = styled.h3`
   ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled ? COLORS.generateToken({
   componentType: 'text',
   defaultVariant: 'subtle'
@@ -60,7 +60,7 @@ export const CardMiddleSectionTitle = styled.h3`
   defaultVariant: 'default'
 }, props.theme))}
 `;
-const CardMiddleSection = _ref => {
+const VerticalCardMiddleSection = _ref => {
   let {
     colorBandColor,
     categoryIcon,
@@ -73,11 +73,11 @@ const CardMiddleSection = _ref => {
     componentId
   } = _ref;
   const theme = useTheme();
-  return /*#__PURE__*/_jsxs(CardMiddleSectionContainer, {
+  return /*#__PURE__*/_jsxs(VerticalCardMiddleSectionContainer, {
     "data-testid": 'card-middleSection',
-    children: [colorBandColor && /*#__PURE__*/_jsx(CardMiddleSectionColorBandStyles, {
+    children: [colorBandColor && /*#__PURE__*/_jsx(VerticalCardMiddleSectionColorBandStyles, {
       $color: colorBandColor
-    }), (categoryIcon || categoryLabel) && /*#__PURE__*/_jsxs(CardMiddleSectionCategoryStyles, {
+    }), (categoryIcon || categoryLabel) && /*#__PURE__*/_jsxs(VerticalCardMiddleSectionCategoryStyles, {
       $extraTopMargin: Boolean(colorBandColor),
       $bottomMargin: Boolean(categoryIcon || categoryLabel),
       children: [categoryIcon, /*#__PURE__*/_jsx(ComponentS, {
@@ -88,7 +88,7 @@ const CardMiddleSection = _ref => {
         }, theme),
         children: categoryLabel
       })]
-    }), /*#__PURE__*/_jsx(CardMiddleSectionTitle, {
+    }), /*#__PURE__*/_jsx(VerticalCardMiddleSectionTitle, {
       id: `${componentId}-title`,
       className: "titleBlock",
       $disabled: disabled,
@@ -100,13 +100,13 @@ const CardMiddleSection = _ref => {
         defaultVariant: 'subtle'
       }, theme),
       children: description
-    }), tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
+    }), tags && /*#__PURE__*/_jsx(VerticalCardMiddleSectionTagsStyles, {
       children: tags.map((x, index) => /*#__PURE__*/_jsx(Tag, {
         label: x.label,
         variant: x.variant ?? 'neutral',
         icon: x.icon
       }, `${x.label}_${index}`))
-    }), row2Tags && /*#__PURE__*/_jsx(CardMiddleSectionTagsStyles, {
+    }), row2Tags && /*#__PURE__*/_jsx(VerticalCardMiddleSectionTagsStyles, {
       children: row2Tags.map((x, index) => /*#__PURE__*/_jsx(Tag, {
         label: x.label,
         variant: x.variant ?? 'neutral',
@@ -115,7 +115,7 @@ const CardMiddleSection = _ref => {
     })]
   });
 };
-CardMiddleSection.propTypes = {
+VerticalCardMiddleSection.propTypes = {
   colorBandColor: _pt.string,
   categoryIcon: _pt.node,
   categoryLabel: _pt.string,
@@ -132,5 +132,5 @@ CardMiddleSection.propTypes = {
   disabled: _pt.bool,
   componentId: _pt.string
 };
-export default CardMiddleSection;
-//# sourceMappingURL=CardMiddleSection.js.map
+export default VerticalCardMiddleSection;
+//# sourceMappingURL=VerticalCardMiddleSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardMiddleSection.js","names":["React","styled","useTheme","COLORS","ComponentS","ComponentTextStyle","ComponentXLStyling","Tag","jsx","_jsx","jsxs","_jsxs","VerticalCardMiddleSectionContainer","div","VerticalCardMiddleSectionColorBandStyles","props","$color","VerticalCardMiddleSectionTagsStyles","VerticalCardMiddleSectionCategoryStyles","generateToken","componentType","defaultVariant","theme","VerticalCardMiddleSectionTitle","h3","Bold","$disabled","VerticalCardMiddleSection","_ref","colorBandColor","categoryIcon","categoryLabel","title","description","tags","row2Tags","disabled","componentId","children","$extraTopMargin","Boolean","$bottomMargin","textStyle","color","id","className","map","x","index","label","variant","icon","propTypes","_pt","string","node","isRequired","arrayOf","shape","bool"],"sources":["../../../src/Card/VerticalCard/VerticalCardMiddleSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXLStyling, Tag, TagVariants } from '../../index';\r\nimport { ReactNode } from 'react';\r\n\r\nexport interface VerticalCardMiddleSectionProps {\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?: VerticalCardTag[];\r\n  /** Second row of tags if needed. */\r\n  row2Tags?: VerticalCardTag[];\r\n  /** This property is set by Card component itself and is based on 'disabled' flag of CardProps. */\r\n  disabled?: boolean;\r\n  /** Top level Id of Card component */\r\n  componentId?: string;\r\n}\r\n\r\nexport interface VerticalCardTag {\r\n  label: string;\r\n  variant?: TagVariants;\r\n  icon?: ReactNode\r\n}\r\n\r\nexport const VerticalCardMiddleSectionContainer = 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 VerticalCardMiddleSectionColorBandStyles = 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 VerticalCardMiddleSectionTagsStyles = 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 VerticalCardMiddleSectionCategoryStyles = 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.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n    flex-grow: 0;\r\n    flex-shrink: 0;\r\n  }\r\n`;\r\n\r\nexport const VerticalCardMiddleSectionTitle = styled.h3<{ $disabled?: boolean }>`\r\n  ${props => ComponentXLStyling(ComponentTextStyle.Bold, props.$disabled \r\n    ? COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme)\r\n    : COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme)\r\n  )}\r\n`;\r\n\r\nconst VerticalCardMiddleSection: React.FunctionComponent<VerticalCardMiddleSectionProps> = ({\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  componentId\r\n}: VerticalCardMiddleSectionProps) => {\r\n  const theme = useTheme();\r\n  \r\n  return (\r\n    <VerticalCardMiddleSectionContainer data-testid={'card-middleSection'} >\r\n      {colorBandColor && <VerticalCardMiddleSectionColorBandStyles $color={colorBandColor} />}\r\n      {\r\n        (categoryIcon || categoryLabel) &&\r\n        <VerticalCardMiddleSectionCategoryStyles $extraTopMargin={Boolean(colorBandColor)} $bottomMargin={Boolean(categoryIcon || categoryLabel)}>\r\n          {categoryIcon}\r\n          <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n            {categoryLabel}\r\n          </ComponentS>\r\n        </VerticalCardMiddleSectionCategoryStyles>\r\n      }\r\n      <VerticalCardMiddleSectionTitle \r\n        id={`${componentId}-title`} \r\n        className=\"titleBlock\"\r\n        $disabled={disabled}>\r\n        {title}\r\n      </VerticalCardMiddleSectionTitle>\r\n      {description && (\r\n        <ComponentS className=\"descriptionBlock\" color={COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, theme)}>\r\n          {description}\r\n        </ComponentS>\r\n      )}\r\n      {tags && (\r\n        <VerticalCardMiddleSectionTagsStyles>\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        </VerticalCardMiddleSectionTagsStyles>\r\n      )}\r\n      {row2Tags && (\r\n        <VerticalCardMiddleSectionTagsStyles>\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        </VerticalCardMiddleSectionTagsStyles>\r\n      )}\r\n    </VerticalCardMiddleSectionContainer>\r\n  );\r\n};\r\n\r\nexport default VerticalCardMiddleSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/{CardTopSection.cjs → VerticalCardTopSection.cjs}

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
+exports.default = exports.VerticalCardTopSectionTagContainer = exports.VerticalCardTopSectionRibbonContainer = exports.VerticalCardTopSectionImageContainer = exports.VerticalCardTopSectionContainer = exports.VerticalCardTopSectionCheckboxContainer = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -16,7 +16,7 @@ var _Image = require("../../Image");
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const CardTopSectionImageContainer = exports.CardTopSectionImageContainer = _styledComponents.default.div`
+const VerticalCardTopSectionImageContainer = exports.VerticalCardTopSectionImageContainer = _styledComponents.default.div`
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   height: 100%;
@@ -29,14 +29,14 @@ const CardTopSectionImageContainer = exports.CardTopSectionImageContainer = _sty
     border-top-left-radius: 8px;
   }
 `;
-const CardTopSectionTagContainer = exports.CardTopSectionTagContainer = _styledComponents.default.div`
+const VerticalCardTopSectionTagContainer = exports.VerticalCardTopSectionTagContainer = _styledComponents.default.div`
   position: absolute;
 
   top: 16px;
   left: 16px;
   width: calc(100% - 32px);
 `;
-const CardTopSectionContainer = exports.CardTopSectionContainer = _styledComponents.default.div`
+const VerticalCardTopSectionContainer = exports.VerticalCardTopSectionContainer = _styledComponents.default.div`
   position: relative;
   width: 100%;
   overflow: visible;
@@ -46,7 +46,7 @@ const CardTopSectionContainer = exports.CardTopSectionContainer = _styledCompone
     filter: grayscale(100%);
   }` : ''}
 `;
-const CardTopSectionRibbonContainer = exports.CardTopSectionRibbonContainer = _styledComponents.default.div`
+const VerticalCardTopSectionRibbonContainer = exports.VerticalCardTopSectionRibbonContainer = _styledComponents.default.div`
   min-height: calc(40px - 16px);
   background-color: ${props => props.$backgroundColor};
   width: calc(100% - 32px);
@@ -67,7 +67,7 @@ const CardTopSectionRibbonContainer = exports.CardTopSectionRibbonContainer = _s
     flex-shrink: 0;
   }
 `;
-const CardTopSectionCheckboxContainer = exports.CardTopSectionCheckboxContainer = _styledComponents.default.div`
+const VerticalCardTopSectionCheckboxContainer = exports.VerticalCardTopSectionCheckboxContainer = _styledComponents.default.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -77,7 +77,7 @@ const CardTopSectionCheckboxContainer = exports.CardTopSectionCheckboxContainer
     background-color: ${props => _index.COLORS.getColor('white', props.theme)};
   }
 `;
-const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     selected,
     setSelected,
@@ -92,13 +92,13 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled
   } = _ref;
   const theme = (0, _styledComponents.useTheme)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardTopSectionContainer, {
     disabled: disabled,
     "data-testid": 'card-topSection',
     style: {
       height: image?.height ?? 200
     },
-    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionImageContainer, {
+    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardTopSectionImageContainer, {
       role: "none",
       "aria-hidden": "true",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
@@ -109,7 +109,7 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         width: image.width,
         height: image.height
       })
-    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionCheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
         ref: ref,
@@ -117,13 +117,13 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         select: selected => setSelected && setSelected(selected),
         selected: selected || false
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionTagContainer, {
+    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardTopSectionTagContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
         label: tagLabel,
         variant: tagVariant,
         icon: tagIcon
       })
-    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionRibbonContainer, {
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor ?? '',
       $backgroundColor: disabled ? _index.COLORS.generateToken({
@@ -142,7 +142,7 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardTopSection.propTypes = {
+VerticalCardTopSection.propTypes = {
   selected: _propTypes.default.bool,
   setSelected: _propTypes.default.func,
   tagLabel: _propTypes.default.string,
@@ -161,5 +161,5 @@ CardTopSection.propTypes = {
   }),
   disabled: _propTypes.default.bool
 };
-var _default = exports.default = CardTopSection;
-//# sourceMappingURL=CardTopSection.cjs.map
+var _default = exports.default = VerticalCardTopSection;
+//# sourceMappingURL=VerticalCardTopSection.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardTopSection.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_typography","_Checkbox","_interopRequireDefault","_Tag","_index","_Image","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","VerticalCardTopSectionImageContainer","exports","styled","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","COLORS","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","useTheme","jsxs","style","height","children","jsx","role","ImageWithFallbacks","fallbacks","fallbackSrc","src","alt","loader","width","select","Tag","label","variant","icon","generateToken","componentType","state","ComponentS","color","isOnFill","textStyle","ComponentTextStyle","Regular","propTypes","_propTypes","bool","func","string","node","shape","isRequired","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.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 VerticalCardTopSectionProps {\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 VerticalCardTopSectionImageContainer = 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 VerticalCardTopSectionTagContainer = 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 VerticalCardTopSectionContainer = 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 VerticalCardTopSectionRibbonContainer = 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 VerticalCardTopSectionCheckboxContainer = 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 VerticalCardTopSection = 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                                         }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </VerticalCardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <VerticalCardTopSectionCheckboxContainer 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        </VerticalCardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <VerticalCardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </VerticalCardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </VerticalCardTopSectionRibbonContainer>\r\n      )}\r\n    </VerticalCardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/{CardTopSection.d.ts → VerticalCardTopSection.d.ts}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TagVariants } from '../../Tag';
-export interface CardTopSectionProps {
+export interface VerticalCardTopSectionProps {
     /** Sets initial state of select Checkbox. */
     selected?: boolean;
     /** If this action is provided, then Checkbox will be shown on the top-right corner of the Card. */
@@ -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 VerticalCardTopSectionImageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardTopSectionTagContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VerticalCardTopSectionContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     disabled?: boolean;
 }>> & string;
-export declare const CardTopSectionRibbonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const VerticalCardTopSectionRibbonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $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;
-declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
-export default CardTopSection;
+export declare const VerticalCardTopSectionCheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const VerticalCardTopSection: React.ForwardRefExoticComponent<VerticalCardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
+export default VerticalCardTopSection;

package/dist/Card/VerticalCard/{CardTopSection.js → VerticalCardTopSection.js}

@@ -7,7 +7,7 @@ import { Tag } from '../../Tag';
 import { COLORS } from '../../index';
 import { ImageWithFallbacks } from "../../Image";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardTopSectionImageContainer = styled.div`
+export const VerticalCardTopSectionImageContainer = styled.div`
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
   height: 100%;
@@ -20,14 +20,14 @@ export const CardTopSectionImageContainer = styled.div`
     border-top-left-radius: 8px;
   }
 `;
-export const CardTopSectionTagContainer = styled.div`
+export const VerticalCardTopSectionTagContainer = styled.div`
   position: absolute;
 
   top: 16px;
   left: 16px;
   width: calc(100% - 32px);
 `;
-export const CardTopSectionContainer = styled.div`
+export const VerticalCardTopSectionContainer = styled.div`
   position: relative;
   width: 100%;
   overflow: visible;
@@ -37,7 +37,7 @@ export const CardTopSectionContainer = styled.div`
     filter: grayscale(100%);
   }` : ''}
 `;
-export const CardTopSectionRibbonContainer = styled.div`
+export const VerticalCardTopSectionRibbonContainer = styled.div`
   min-height: calc(40px - 16px);
   background-color: ${props => props.$backgroundColor};
   width: calc(100% - 32px);
@@ -58,7 +58,7 @@ export const CardTopSectionRibbonContainer = styled.div`
     flex-shrink: 0;
   }
 `;
-export const CardTopSectionCheckboxContainer = styled.div`
+export const VerticalCardTopSectionCheckboxContainer = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -68,7 +68,7 @@ export const CardTopSectionCheckboxContainer = styled.div`
     background-color: ${props => COLORS.getColor('white', props.theme)};
   }
 `;
-const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const VerticalCardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     selected,
     setSelected,
@@ -83,13 +83,13 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     disabled
   } = _ref;
   const theme = useTheme();
-  return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
+  return /*#__PURE__*/_jsxs(VerticalCardTopSectionContainer, {
     disabled: disabled,
     "data-testid": 'card-topSection',
     style: {
       height: image?.height ?? 200
     },
-    children: [image && /*#__PURE__*/_jsx(CardTopSectionImageContainer, {
+    children: [image && /*#__PURE__*/_jsx(VerticalCardTopSectionImageContainer, {
       role: "none",
       "aria-hidden": "true",
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
@@ -100,7 +100,7 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         width: image.width,
         height: image.height
       })
-    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardTopSectionCheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(VerticalCardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/_jsx(Checkbox, {
         ref: ref,
@@ -108,13 +108,13 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         select: selected => setSelected && setSelected(selected),
         selected: selected || false
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopSectionTagContainer, {
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(VerticalCardTopSectionTagContainer, {
       children: /*#__PURE__*/_jsx(Tag, {
         label: tagLabel,
         variant: tagVariant,
         icon: tagIcon
       })
-    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardTopSectionRibbonContainer, {
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(VerticalCardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor ?? '',
       $backgroundColor: disabled ? COLORS.generateToken({
@@ -133,7 +133,7 @@ const CardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     })]
   });
 });
-CardTopSection.propTypes = {
+VerticalCardTopSection.propTypes = {
   selected: _pt.bool,
   setSelected: _pt.func,
   tagLabel: _pt.string,
@@ -152,5 +152,5 @@ CardTopSection.propTypes = {
   }),
   disabled: _pt.bool
 };
-export default CardTopSection;
-//# sourceMappingURL=CardTopSection.js.map
+export default VerticalCardTopSection;
+//# sourceMappingURL=VerticalCardTopSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalCardTopSection.js","names":["React","styled","useTheme","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","jsx","_jsx","jsxs","_jsxs","VerticalCardTopSectionImageContainer","div","VerticalCardTopSectionTagContainer","VerticalCardTopSectionContainer","props","disabled","VerticalCardTopSectionRibbonContainer","$backgroundColor","$color","VerticalCardTopSectionCheckboxContainer","getColor","theme","VerticalCardTopSection","forwardRef","_ref","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","style","height","children","role","fallbacks","fallbackSrc","src","alt","loader","width","select","label","variant","icon","generateToken","componentType","state","color","isOnFill","textStyle","Regular","propTypes","_pt","bool","func","string","node","shape","isRequired"],"sources":["../../../src/Card/VerticalCard/VerticalCardTopSection.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 VerticalCardTopSectionProps {\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 VerticalCardTopSectionImageContainer = 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 VerticalCardTopSectionTagContainer = 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 VerticalCardTopSectionContainer = 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 VerticalCardTopSectionRibbonContainer = 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 VerticalCardTopSectionCheckboxContainer = 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 VerticalCardTopSection = 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                                         }: VerticalCardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  const theme = useTheme();\r\n  return (\r\n    <VerticalCardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <VerticalCardTopSectionImageContainer role=\"none\" aria-hidden=\"true\">\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt=\"\" loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </VerticalCardTopSectionImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <VerticalCardTopSectionCheckboxContainer 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        </VerticalCardTopSectionCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <VerticalCardTopSectionTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </VerticalCardTopSectionTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <VerticalCardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.generateToken({componentType:'bg-fill', state:'disabled'}, theme) : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={disabled ? COLORS.generateToken({componentType:'text', isOnFill: true, state:'disabled'}, theme) : highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </VerticalCardTopSectionRibbonContainer>\r\n      )}\r\n    </VerticalCardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default VerticalCardTopSection;\r\n"],"mappings":"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","ignoreList":[]}