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

package/dist/Card/HorizontalCard/HorizontalCardThumbnail.js

@@ -1,14 +1,44 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 import React from 'react';
 import styled from 'styled-components';
 import { COLORS } from '../../styles';
 import { ImageWithFallbacks } from "../../Image";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const HorizontalCardIconContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  width: 64px;\n  height: 80px;\n\n  color: ", ";\n\n  .disabled & {\n    color: ", ";\n  }\n"])), props => COLORS.getColor('black', props.theme), props => COLORS.getColor('neutral_500', props.theme));
-export const HorizontalCardImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 100%;\n  overflow: hidden;\n  border-bottom-left-radius: 8px;\n  border-top-left-radius: 8px;\n  width: 120px;\n\n  img {\n    mix-blend-mode: multiply;\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n\n  }\n\n  .disabled & {\n    img {\n      filter: grayscale(100%);\n    }\n  }\n\n"])));
+export const HorizontalCardIconContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 64px;
+  height: 80px;
+
+  color: ${props => COLORS.getColor('black', props.theme)};
+
+  .disabled & {
+    color: ${props => COLORS.getColor('neutral_500', props.theme)};
+  }
+`;
+export const HorizontalCardImageContainer = styled.div`
+  height: 100%;
+  overflow: hidden;
+  border-bottom-left-radius: 8px;
+  border-top-left-radius: 8px;
+  width: 120px;
+
+  img {
+    mix-blend-mode: multiply;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+
+  }
+
+  .disabled & {
+    img {
+      filter: grayscale(100%);
+    }
+  }
+
+`;
 export const HorizontalCardThumbnail = _ref => {
-  var _image$fallbackSrc, _image$loader;
   let {
     image,
     icon
@@ -21,10 +51,10 @@ export const HorizontalCardThumbnail = _ref => {
       })
     }), image && /*#__PURE__*/_jsx(HorizontalCardImageContainer, {
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
-        fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
+        fallbacks: image.fallbackSrc ?? '',
         src: image.src,
         alt: image.alt,
-        loader: (_image$loader = image.loader) !== null && _image$loader !== void 0 ? _image$loader : false,
+        loader: image.loader ?? false,
         width: image.width,
         height: image.height
       })

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","HorizontalCardImageContainer","_templateObject2","HorizontalCardThumbnail","_ref","_image$fallbackSrc","_image$loader","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,gLAO1CC,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC,EAG5CF,KAAK,IAAIZ,MAAM,CAACa,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC,CAEhE;AAGD,OAAO,MAAMC,4BAA4B,GAAGhB,MAAM,CAACU,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,8TAqBrD;AAID,OAAO,MAAMM,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAAAC,kBAAA,EAAAC,aAAA;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAJ,IAAA;EAEvE,oBACEX,KAAA,CAAAF,SAAA;IAAAkB,QAAA,GAEID,IAAI,iBACFnB,IAAA,CAACK,2BAA2B;MAAAe,QAAA,eACzBzB,KAAK,CAAC0B,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHlB,IAAA,CAACY,4BAA4B;MAAAQ,QAAA,eACzBpB,IAAA,CAACF,kBAAkB;QAAC0B,SAAS,GAAAR,kBAAA,GAAEE,KAAK,CAACO,WAAW,cAAAT,kBAAA,cAAAA,kBAAA,GAAI,EAAG;QAACU,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,GAAAX,aAAA,GAAEC,KAAK,CAACU,MAAM,cAAAX,aAAA,cAAAA,aAAA,GAAI,KAAM;QAACK,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}
+{"version":3,"file":"HorizontalCardThumbnail.js","names":["React","styled","COLORS","ImageWithFallbacks","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HorizontalCardIconContainer","div","props","getColor","theme","HorizontalCardImageContainer","HorizontalCardThumbnail","_ref","image","icon","children","cloneElement","width","height","fallbacks","fallbackSrc","src","alt","loader"],"sources":["../../../src/Card/HorizontalCard/HorizontalCardThumbnail.tsx"],"sourcesContent":["import React from 'react';\r\nimport {HorizontalCardProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS} from '../../styles';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport const HorizontalCardIconContainer = styled.div`\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  width: 64px;\r\n  height: 80px;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .disabled & {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const HorizontalCardImageContainer = styled.div`\r\n  height: 100%;\r\n  overflow: hidden;\r\n  border-bottom-left-radius: 8px;\r\n  border-top-left-radius: 8px;\r\n  width: 120px;\r\n\r\n  img {\r\n    mix-blend-mode: multiply;\r\n    object-fit: cover;\r\n    width: 100%;\r\n    height: 100%;\r\n\r\n  }\r\n\r\n  .disabled & {\r\n    img {\r\n      filter: grayscale(100%);\r\n    }\r\n  }\r\n\r\n`;\r\n\r\ntype Props = Pick<HorizontalCardProps, 'image' | 'icon'>;\r\n\r\nexport const HorizontalCardThumbnail: React.FunctionComponent<Props> = ({\r\n                                                                          image,\r\n                                                                          icon\r\n                                                                        }) => {\r\n\r\n  return (\r\n    <>\r\n      {\r\n        icon &&\r\n          <HorizontalCardIconContainer>\r\n            {React.cloneElement(icon, {width: 48, height: 48})}\r\n          </HorizontalCardIconContainer>\r\n      }\r\n      {\r\n        image &&\r\n          <HorizontalCardImageContainer>\r\n              <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt}\r\n                                  loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n          </HorizontalCardImageContainer>\r\n      }\r\n    </>\r\n  )\r\n};\r\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,QAAO,cAAc;AACnC,SAAQC,kBAAkB,QAAO,aAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,2BAA2B,GAAGT,MAAM,CAACU,GAAG;AACrD;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AACzD;AACA;AACA,aAAaF,KAAK,IAAIV,MAAM,CAACW,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA,CAAC;AAGD,OAAO,MAAMC,4BAA4B,GAAGd,MAAM,CAACU,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMK,uBAAuD,GAAGC,IAAA,IAGO;EAAA,IAHN;IACEC,KAAK;IACLC;EACF,CAAC,GAAAF,IAAA;EAEvE,oBACER,KAAA,CAAAF,SAAA;IAAAa,QAAA,GAEID,IAAI,iBACFd,IAAA,CAACK,2BAA2B;MAAAU,QAAA,eACzBpB,KAAK,CAACqB,YAAY,CAACF,IAAI,EAAE;QAACG,KAAK,EAAE,EAAE;QAAEC,MAAM,EAAE;MAAE,CAAC;IAAC,CACvB,CAAC,EAGhCL,KAAK,iBACHb,IAAA,CAACU,4BAA4B;MAAAK,QAAA,eACzBf,IAAA,CAACF,kBAAkB;QAACqB,SAAS,EAAEN,KAAK,CAACO,WAAW,IAAI,EAAG;QAACC,GAAG,EAAER,KAAK,CAACQ,GAAI;QAACC,GAAG,EAAET,KAAK,CAACS,GAAI;QACnEC,MAAM,EAAEV,KAAK,CAACU,MAAM,IAAI,KAAM;QAACN,KAAK,EAAEJ,KAAK,CAACI,KAAM;QAACC,MAAM,EAAEL,KAAK,CAACK;MAAO,CAAC;IAAC,CACpE,CAAC;EAAA,CAEnC,CAAC;AAEP,CAAC","ignoreList":[]}

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

@@ -1,4 +1,4 @@
-export * from './types';
-export * from './HorizontalCard';
-export * from './HorizontalCardBody';
-export * from './HorizontalCardThumbnail';
+export * from './types';
+export * from './HorizontalCard';
+export * from './HorizontalCardBody';
+export * from './HorizontalCardThumbnail';

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

@@ -1 +1 @@
-{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  /** 'Outline' or 'Elevated' style of container. */\r\n  variant?: 'outline' | 'elevated';\r\n  /** Action that will be triggered when user clicks on card. */\r\n  action?: () => void;\r\n  /** If disabled user will not be able to click on the card, also card will be greyed out. */\r\n  disabled?: boolean;\r\n  /** Title of the card */\r\n  title: string | React.ReactNode;\r\n  /** Description of the card */\r\n  description?: string | React.ReactNode;\r\n  /** Icon to be shown on the left side of the card. */\r\n  icon?: React.ReactElement;\r\n  /** Properties of the image shown on the left side of the card. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** Array of tags to be shown under the description. */\r\n  tags?: HorizontalCardTag[];\r\n  /** Progress bar to be shown under the tags. */\r\n  progress?: HorizontalCardLinearProgression;\r\n  /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.cjs","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  /** 'Outline' or 'Elevated' style of container. */\r\n  variant?: 'outline' | 'elevated';\r\n  /** Action that will be triggered when user clicks on card. */\r\n  action?: () => void;\r\n  /** If disabled user will not be able to click on the card, also card will be greyed out. */\r\n  disabled?: boolean;\r\n  /** Title of the card */\r\n  title: string | React.ReactNode;\r\n  /** Description of the card */\r\n  description?: string | React.ReactNode;\r\n  /** Icon to be shown on the left side of the card. */\r\n  icon?: React.ReactElement<any>;\r\n  /** Properties of the image shown on the left side of the card. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** Array of tags to be shown under the description. */\r\n  tags?: HorizontalCardTag[];\r\n  /** Progress bar to be shown under the tags. */\r\n  progress?: HorizontalCardLinearProgression;\r\n  /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":"","ignoreList":[]}

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

@@ -1,59 +1,59 @@
-import { IconButtonProps } from '../../Button/Iconbutton';
-import React, { ReactNode } from 'react';
-import { ToggleButtonProps } from '../../Toggles/ToggleButton';
-import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
-import { TagVariants } from '../../Tag';
-import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
-import { Testable } from '../../types';
-export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
-    componentType: 'icon';
-    icon: React.ReactNode;
-};
-export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
-    componentType: 'toggle';
-};
-export interface CustomContentProps extends Testable {
-    content: ReactNode;
-}
-export type HorizontalCardCustomContent = CustomContentProps & {
-    componentType: 'custom';
-};
-export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
-    componentType: 'dropdown';
-    icon: React.ReactNode;
-};
-export interface HorizontalCardTag {
-    label: string;
-    icon?: React.ReactNode;
-    variant?: TagVariants;
-}
-export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
-export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
-    /** 'Outline' or 'Elevated' style of container. */
-    variant?: 'outline' | 'elevated';
-    /** Action that will be triggered when user clicks on card. */
-    action?: () => void;
-    /** If disabled user will not be able to click on the card, also card will be greyed out. */
-    disabled?: boolean;
-    /** Title of the card */
-    title: string | React.ReactNode;
-    /** Description of the card */
-    description?: string | React.ReactNode;
-    /** Icon to be shown on the left side of the card. */
-    icon?: React.ReactElement;
-    /** Properties of the image shown on the left side of the card. */
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    /** Array of tags to be shown under the description. */
-    tags?: HorizontalCardTag[];
-    /** Progress bar to be shown under the tags. */
-    progress?: HorizontalCardLinearProgression;
-    /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */
-    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
-}
+import { IconButtonProps } from '../../Button/Iconbutton';
+import React, { ReactNode } from 'react';
+import { ToggleButtonProps } from '../../Toggles/ToggleButton';
+import { DropdownButtonProps } from '../../Dropdown/DropdownButtonTypes';
+import { TagVariants } from '../../Tag';
+import { LinearProgressProps } from '../../LinearProgress/LinearProgress';
+import { Testable } from '../../types';
+export type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+    componentType: 'icon';
+    icon: React.ReactNode;
+};
+export type HorizontalCardToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'> & {
+    componentType: 'toggle';
+};
+export interface CustomContentProps extends Testable {
+    content: ReactNode;
+}
+export type HorizontalCardCustomContent = CustomContentProps & {
+    componentType: 'custom';
+};
+export type HorizontalCardDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
+    componentType: 'dropdown';
+    icon: React.ReactNode;
+};
+export interface HorizontalCardTag {
+    label: string;
+    icon?: React.ReactNode;
+    variant?: TagVariants;
+}
+export type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>;
+export interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {
+    /** 'Outline' or 'Elevated' style of container. */
+    variant?: 'outline' | 'elevated';
+    /** Action that will be triggered when user clicks on card. */
+    action?: () => void;
+    /** If disabled user will not be able to click on the card, also card will be greyed out. */
+    disabled?: boolean;
+    /** Title of the card */
+    title: string | React.ReactNode;
+    /** Description of the card */
+    description?: string | React.ReactNode;
+    /** Icon to be shown on the left side of the card. */
+    icon?: React.ReactElement<any>;
+    /** Properties of the image shown on the left side of the card. */
+    image?: {
+        src: string;
+        fallbackSrc?: string;
+        alt: string;
+        height?: string;
+        width?: string;
+        loader?: boolean;
+    };
+    /** Array of tags to be shown under the description. */
+    tags?: HorizontalCardTag[];
+    /** Progress bar to be shown under the tags. */
+    progress?: HorizontalCardLinearProgression;
+    /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */
+    actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];
+}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  /** 'Outline' or 'Elevated' style of container. */\r\n  variant?: 'outline' | 'elevated';\r\n  /** Action that will be triggered when user clicks on card. */\r\n  action?: () => void;\r\n  /** If disabled user will not be able to click on the card, also card will be greyed out. */\r\n  disabled?: boolean;\r\n  /** Title of the card */\r\n  title: string | React.ReactNode;\r\n  /** Description of the card */\r\n  description?: string | React.ReactNode;\r\n  /** Icon to be shown on the left side of the card. */\r\n  icon?: React.ReactElement;\r\n  /** Properties of the image shown on the left side of the card. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** Array of tags to be shown under the description. */\r\n  tags?: HorizontalCardTag[];\r\n  /** Progress bar to be shown under the tags. */\r\n  progress?: HorizontalCardLinearProgression;\r\n  /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/Card/HorizontalCard/types.ts"],"sourcesContent":["import {IconButtonProps} from '../../Button/Iconbutton';\r\nimport React, { ReactNode } from 'react';\r\nimport {ToggleButtonProps} from '../../Toggles/ToggleButton';\r\nimport {DropdownButtonProps} from '../../Dropdown/DropdownButtonTypes';\r\nimport {TagVariants} from '../../Tag';\r\nimport {LinearProgressProps} from '../../LinearProgress/LinearProgress';\r\nimport { Testable } from '../../types';\r\n\r\nexport type HorizontalCardIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\r\n  componentType: 'icon';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport type HorizontalCardToggleButton =\r\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\r\n  & { componentType: 'toggle'; }\r\n\r\n  \r\nexport interface CustomContentProps extends  Testable{\r\n  content:ReactNode;\r\n}\r\n\r\n\r\nexport type HorizontalCardCustomContent =\r\n  CustomContentProps\r\n  & { componentType: 'custom'; }\r\n\r\nexport type HorizontalCardDropdownButton =\r\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\r\n  & {\r\n  componentType: 'dropdown';\r\n  icon: React.ReactNode;\r\n}\r\n\r\nexport interface HorizontalCardTag {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  variant?: TagVariants;\r\n}\r\n\r\n\r\n\r\nexport type HorizontalCardLinearProgression = Pick<LinearProgressProps, 'max' | 'value'>\r\n\r\nexport interface HorizontalCardProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'description' | 'tabIndex' | 'onClick' | 'onKeyDown' | 'onMouseDown'> {\r\n  /** 'Outline' or 'Elevated' style of container. */\r\n  variant?: 'outline' | 'elevated';\r\n  /** Action that will be triggered when user clicks on card. */\r\n  action?: () => void;\r\n  /** If disabled user will not be able to click on the card, also card will be greyed out. */\r\n  disabled?: boolean;\r\n  /** Title of the card */\r\n  title: string | React.ReactNode;\r\n  /** Description of the card */\r\n  description?: string | React.ReactNode;\r\n  /** Icon to be shown on the left side of the card. */\r\n  icon?: React.ReactElement<any>;\r\n  /** Properties of the image shown on the left side of the card. */\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  /** Array of tags to be shown under the description. */\r\n  tags?: HorizontalCardTag[];\r\n  /** Progress bar to be shown under the tags. */\r\n  progress?: HorizontalCardLinearProgression;\r\n  /** Array of actions to be shown on the right side of the card. Can use IconButtons, DropdownButtons, CustomContent and Toggles */\r\n  actions?: (HorizontalCardIconButton | HorizontalCardToggleButton | HorizontalCardDropdownButton | HorizontalCardCustomContent)[];\r\n}\r\n"],"mappings":"","ignoreList":[]}

package/dist/Card/VerticalCard/Card.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.CardTopLevelContainerStyles = exports.CardContainerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,13 +16,70 @@ var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
 var _index = require("../../index");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
-var _templateObject, _templateObject2;
 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; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), props => _index.COLORS.getColor('white', props.theme), _index.BOXSHADOWS.BOXSHADOW_L1, props => _index.COLORS.getColor('neutral_200', props.theme));
-const CardContainerStyles = exports.CardContainerStyles = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), _index.focusStyles, CardTopLevelContainerStyles, props => _index.COLORS.getColor('primary_20', props.theme), props => _index.COLORS.getColor('primary_100', props.theme), CardTopLevelContainerStyles, _index.BOXSHADOWS.BOXSHADOW_L3, _index.BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, props => _index.COLORS.getColor('neutral_100', props.theme));
+const CardTopLevelContainerStyles = exports.CardTopLevelContainerStyles = _styledComponents.default.div`
+  background-color: ${props => _index.COLORS.getColor('white', props.theme)};
+  min-width: 240px;
+  overflow: hidden;
+
+  border-radius: 8px;
+
+  background-clip: padding-box;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .elevated & {
+    box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L1};
+  }
+
+  .outline & {
+    border: 1px solid ${props => _index.COLORS.getColor('neutral_200', props.theme)};
+  }
+`;
+const CardContainerStyles = exports.CardContainerStyles = _styledComponents.default.div`
+  &.interactive:focus {
+    ${_index.focusStyles}
+  }
+
+  &.interactive:not(.disabled) {
+    cursor: pointer;
+
+    &.outline:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          background-color: ${props => _index.COLORS.getColor('primary_20', props.theme)};
+        }
+
+        &:active, &.active-state {
+          background-color: ${props => _index.COLORS.getColor('primary_100', props.theme)};
+        }
+      }
+    }
+
+    &.elevated:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L3};
+        }
+
+        &:active, &.active-state {
+          box-shadow: ${_index.BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    ${CardTopLevelContainerStyles}{
+      border: 1px solid ${props => _index.COLORS.getColor('neutral_100', props.theme)};
+    }
+  }
+`;
 const Card = _ref => {
   let {
       onCardClicked,
@@ -40,7 +96,7 @@ const Card = _ref => {
   const checkBoxRef = React.useRef(null);
   const containerRef = React.useRef(null);
   (0, _index.useActionWithin)(containerRef, [...actionsRefs, checkBoxRef]);
-  const cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant, " ").concat(className || '');
+  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContainerStyles, _objectSpread(_objectSpread({
     ref: containerRef,
     className: cls,
@@ -61,7 +117,9 @@ const Card = _ref => {
       })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
         disabled: disabled
       })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({
-        ref: instance => setActionsRefs(instance !== null && instance !== void 0 ? instance : [])
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        }
       }, bottomSectionProps), {}, {
         disabled: disabled
       }))]

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_templateObject","_templateObject2","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","concat","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => setActionsRefs(instance ?? [])}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Card.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_CardTopSection","_CardMiddleSection","_CardBottomSection","_index","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","CardTopLevelContainerStyles","exports","styled","div","props","COLORS","getColor","theme","BOXSHADOWS","BOXSHADOW_L1","CardContainerStyles","focusStyles","BOXSHADOW_L3","BOXSHADOW_L2","Card","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","useActionWithin","cls","jsx","ref","tabIndex","onMouseDown","defaultOnMouseDownHandler","onKeyDown","key","onClick","children","jsxs","style","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport CardTopSection, {CardTopSectionProps} from './CardTopSection';\r\nimport CardMiddleSection, {CardMiddleSectionProps} from './CardMiddleSection';\r\nimport CardBottomSection, {CardBottomSectionProps} from './CardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const CardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  min-width: 240px;\r\n  overflow: hidden;\r\n\r\n  border-radius: 8px;\r\n\r\n  background-clip: padding-box;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  .elevated & {\r\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};\r\n  }\r\n\r\n  .outline & {\r\n    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const CardContainerStyles = styled.div`\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n\r\n    &.outline:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${CardTopLevelContainerStyles} {\r\n        &:hover {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    ${CardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. */\r\n  onCardClicked?: () => void;\r\n  /** If disabled then users can not click on the card, also styles are greyed out.*/\r\n  disabled?: boolean;\r\n  /** Maximum width of the card. */\r\n  maxWidth?: number | string;\r\n  /** Properties of Card top section. */\r\n  topSectionProps?: CardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: CardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: CardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst Card: React.FunctionComponent<CardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: CardProps) => {\r\n\r\n\r\n  const [actionsRefs, setActionsRefs] = React.useState<React.RefObject<HTMLElement | null>[]>([]);\r\n  const checkBoxRef =  React.useRef<HTMLDivElement>(null);\r\n  const containerRef = React.useRef<HTMLDivElement>(null);\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  return (\r\n    <CardContainerStyles ref={containerRef}\r\n             className={cls}\r\n             tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n             onMouseDown={defaultOnMouseDownHandler}\r\n             onKeyDown={a => a.key === 'Enter' && !disabled && onCardClicked && onCardClicked()}\r\n             onClick={e => !disabled && onCardClicked && onCardClicked()}\r\n             data-testid={'card-wrapper'}\r\n             {...rest}>\r\n      <CardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <CardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <CardMiddleSection {...middleSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <CardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </CardTopLevelContainerStyles>\r\n    </CardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,24 +1,24 @@
-import * as React from 'react';
-import { CardTopSectionProps } from './CardTopSection';
-import { CardMiddleSectionProps } from './CardMiddleSection';
-import { CardBottomSectionProps } from './CardBottomSection';
-export declare const CardTopLevelContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
-    /** Action to be executed when Card is clicked. */
-    onCardClicked?: () => void;
-    /** If disabled then users can not click on the card, also styles are greyed out.*/
-    disabled?: boolean;
-    /** Maximum width of the card. */
-    maxWidth?: number | string;
-    /** Properties of Card top section. */
-    topSectionProps?: CardTopSectionProps;
-    /** Properties of Card middle section. */
-    middleSectionProps?: CardMiddleSectionProps;
-    /** Properties of Card bottom section. */
-    bottomSectionProps?: CardBottomSectionProps;
-    /** Card container style variant. */
-    variant?: 'outline' | 'elevated';
-}
-declare const Card: React.FunctionComponent<CardProps>;
-export default Card;
+import * as React from 'react';
+import { CardTopSectionProps } from './CardTopSection';
+import { CardMiddleSectionProps } from './CardMiddleSection';
+import { CardBottomSectionProps } from './CardBottomSection';
+export declare const CardTopLevelContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
+    /** Action to be executed when Card is clicked. */
+    onCardClicked?: () => void;
+    /** If disabled then users can not click on the card, also styles are greyed out.*/
+    disabled?: boolean;
+    /** Maximum width of the card. */
+    maxWidth?: number | string;
+    /** Properties of Card top section. */
+    topSectionProps?: CardTopSectionProps;
+    /** Properties of Card middle section. */
+    middleSectionProps?: CardMiddleSectionProps;
+    /** Properties of Card bottom section. */
+    bottomSectionProps?: CardBottomSectionProps;
+    /** Card container style variant. */
+    variant?: 'outline' | 'elevated';
+}
+declare const Card: React.FunctionComponent<CardProps>;
+export default Card;

package/dist/Card/VerticalCard/Card.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["onCardClicked", "topSectionProps", "middleSectionProps", "bottomSectionProps", "disabled", "variant", "className", "maxWidth"];
-var _templateObject, _templateObject2;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -13,8 +11,66 @@ import CardMiddleSection from './CardMiddleSection';
 import CardBottomSection from './CardBottomSection';
 import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const CardTopLevelContainerStyles = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  min-width: 240px;\n  overflow: hidden;\n\n  border-radius: 8px;\n\n  background-clip: padding-box;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  .elevated & {\n    box-shadow: ", ";\n  }\n\n  .outline & {\n    border: 1px solid ", ";\n  }\n"])), props => COLORS.getColor('white', props.theme), BOXSHADOWS.BOXSHADOW_L1, props => COLORS.getColor('neutral_200', props.theme));
-export const CardContainerStyles = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &.interactive:focus {\n    ", "\n  }\n\n  &.interactive:not(.disabled) {\n    cursor: pointer;\n\n    &.outline:not(.action-within) {\n      ", " {\n        &:hover {\n          background-color: ", ";\n        }\n\n        &:active, &.active-state {\n          background-color: ", ";\n        }\n      }\n    }\n\n    &.elevated:not(.action-within) {\n      ", " {\n        &:hover {\n          box-shadow: ", ";\n        }\n\n        &:active, &.active-state {\n          box-shadow: ", ";\n        }\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    ", "{\n      border: 1px solid ", ";\n    }\n  }\n"])), focusStyles, CardTopLevelContainerStyles, props => COLORS.getColor('primary_20', props.theme), props => COLORS.getColor('primary_100', props.theme), CardTopLevelContainerStyles, BOXSHADOWS.BOXSHADOW_L3, BOXSHADOWS.BOXSHADOW_L2, CardTopLevelContainerStyles, props => COLORS.getColor('neutral_100', props.theme));
+export const CardTopLevelContainerStyles = styled.div`
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  min-width: 240px;
+  overflow: hidden;
+
+  border-radius: 8px;
+
+  background-clip: padding-box;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  .elevated & {
+    box-shadow: ${BOXSHADOWS.BOXSHADOW_L1};
+  }
+
+  .outline & {
+    border: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};
+  }
+`;
+export const CardContainerStyles = styled.div`
+  &.interactive:focus {
+    ${focusStyles}
+  }
+
+  &.interactive:not(.disabled) {
+    cursor: pointer;
+
+    &.outline:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          background-color: ${props => COLORS.getColor('primary_20', props.theme)};
+        }
+
+        &:active, &.active-state {
+          background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+        }
+      }
+    }
+
+    &.elevated:not(.action-within) {
+      ${CardTopLevelContainerStyles} {
+        &:hover {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L3};
+        }
+
+        &:active, &.active-state {
+          box-shadow: ${BOXSHADOWS.BOXSHADOW_L2};
+        }
+      }
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    ${CardTopLevelContainerStyles}{
+      border: 1px solid ${props => COLORS.getColor('neutral_100', props.theme)};
+    }
+  }
+`;
 const Card = _ref => {
   let {
       onCardClicked,
@@ -31,7 +87,7 @@ const Card = _ref => {
   const checkBoxRef = React.useRef(null);
   const containerRef = React.useRef(null);
   useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);
-  const cls = "".concat(!!onCardClicked ? 'interactive' : '', " ").concat(disabled ? 'disabled' : '', " ").concat(variant, " ").concat(className || '');
+  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
   return /*#__PURE__*/_jsx(CardContainerStyles, _objectSpread(_objectSpread({
     ref: containerRef,
     className: cls,
@@ -52,7 +108,9 @@ const Card = _ref => {
       })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
         disabled: disabled
       })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({
-        ref: instance => setActionsRefs(instance !== null && instance !== void 0 ? instance : [])
+        ref: instance => {
+          setActionsRefs(instance ?? []);
+        }
       }, bottomSectionProps), {}, {
         disabled: disabled
       }))]