@laerdal/life-react-components 6.1.3-dev.1.full → 6.1.4-dev.2.full

package/dist/Card/VerticalCard/VerticalCard.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.VerticalCardTopLevelContainerStyles = exports.VerticalCardLink = exports.VerticalCardContainerStyles = void 0;
+exports.default = exports.VerticalCardTopLevelContainerStyles = exports.VerticalCardContainerStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -47,30 +47,11 @@ const VerticalCardTopLevelContainerStyles = exports.VerticalCardTopLevelContaine
 }, props.theme)};
   }
 `;
-
-// Full-card link that covers the entire card area
-const VerticalCardLink = exports.VerticalCardLink = _styledComponents.default.a`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100;
-  text-decoration: none;
-  color: inherit;
-  pointer-events: auto;
-  cursor: pointer;
-  
-  &:focus {
-    outline: none;
-  }
-  
-  &:focus-visible {
-    ${_index.focusStyles}
-  }
-`;
 const VerticalCardContainerStyles = exports.VerticalCardContainerStyles = _styledComponents.default.div`
+  width: max-content;
+  
   &.interactive:not(.disabled) {
+    cursor: pointer;
     &:focus {
       ${_index.focusStyles}
     }
@@ -136,32 +117,35 @@ const VerticalCard = _ref => {
   (0, _index.useActionWithin)(containerRef, [...actionsRefs, checkBoxRef]);
   const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
   const handleCardClick = e => {
+    if (e.defaultPrevented) return;
     e.preventDefault();
     if (!disabled && onCardClicked) {
       onCardClicked(e);
     }
   };
+  const onKeyDown = e => {
+    if (e.defaultPrevented) return;
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onCardClicked) {
+      e.preventDefault();
+      onCardClicked(e);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardContainerStyles, _objectSpread(_objectSpread({
     ref: containerRef,
-    role: "group",
+    role: onCardClicked ? "button" : "group",
+    onClick: handleCardClick,
+    onMouseDown: _index.defaultOnMouseDownHandler,
     className: cls,
     "aria-labelledby": `${autoId}-title`,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e),
+    onKeyDown: onKeyDown,
     "data-testid": 'card-wrapper'
   }, rest), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(VerticalCardTopLevelContainerStyles, {
       style: {
         maxWidth: maxWidth
       },
-      children: [onCardClicked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardLink, {
-        href: '#',
-        "data-testid": 'card-link',
-        onClick: handleCardClick,
-        onAuxClick: handleCardClick,
-        "aria-labelledby": `${autoId}-title`,
-        tabIndex: -1
-      }), topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardTopSection.default, _objectSpread(_objectSpread({
+      children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_VerticalCardTopSection.default, _objectSpread(_objectSpread({
         ref: checkBoxRef
       }, topSectionProps), {}, {
         disabled: disabled

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_VerticalCardTopSection","_VerticalCardMiddleSection","_VerticalCardBottomSection","_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","VerticalCardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","VerticalCardLink","focusStyles","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","useActionWithin","cls","handleCardClick","preventDefault","jsx","ref","role","tabIndex","onKeyDown","key","children","jsxs","style","href","onClick","onAuxClick","componentId","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, 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  position: relative;\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.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 100;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n  \r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  \r\n  &:focus-visible {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n  &.interactive:not(.disabled) {\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\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    ${VerticalCardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n  onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => 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?: VerticalCardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: VerticalCardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: VerticalCardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    id,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: VerticalCardProps) => {\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  const autoId = React.useId();\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  const handleCardClick = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    if (!disabled && onCardClicked) {\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <VerticalCardContainerStyles ref={containerRef}\r\n            role=\"group\"\r\n            className={cls}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n            onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e)}\r\n            data-testid={'card-wrapper'}\r\n            {...rest}>\r\n      <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {/* Full-card link for accessibility */}\r\n        {onCardClicked && !disabled && (\r\n          <VerticalCardLink\r\n            href={'#'}\r\n            data-testid={'card-link'}\r\n            onClick={handleCardClick}\r\n            onAuxClick={handleCardClick}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={-1}\r\n          />\r\n        )}\r\n        \r\n        {\r\n          topSectionProps &&\r\n          <VerticalCardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <VerticalCardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </VerticalCardTopLevelContainerStyles>\r\n    </VerticalCardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VerticalCard.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_VerticalCardTopSection","_VerticalCardMiddleSection","_VerticalCardBottomSection","_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","VerticalCardTopLevelContainerStyles","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","BOXSHADOWS","BOXSHADOW_L1","VerticalCardContainerStyles","focusStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties2","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","useActionWithin","cls","handleCardClick","defaultPrevented","preventDefault","onKeyDown","key","jsx","ref","role","onClick","onMouseDown","defaultOnMouseDownHandler","tabIndex","children","jsxs","style","componentId","instance","propTypes","_propTypes","func","bool","oneOfType","number","string","oneOf","_default"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, 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  position: relative;\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.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n  width: max-content;\r\n  \r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\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    ${VerticalCardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n  onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => 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?: VerticalCardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: VerticalCardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: VerticalCardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    id,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: VerticalCardProps) => {\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  const autoId = React.useId();\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  const handleCardClick = (e: React.MouseEvent) => {\r\n    if (e.defaultPrevented) return;\r\n    e.preventDefault();\r\n    if (!disabled && onCardClicked) {\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent) => {\r\n    if (e.defaultPrevented) return;\r\n    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onCardClicked) {\r\n      e.preventDefault();\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <VerticalCardContainerStyles ref={containerRef}\r\n            role={onCardClicked ? \"button\" : \"group\"}\r\n            onClick={handleCardClick}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            className={cls}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n            onKeyDown={onKeyDown}\r\n            data-testid={'card-wrapper'}\r\n            {...rest}>\r\n      <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <VerticalCardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <VerticalCardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </VerticalCardTopLevelContainerStyles>\r\n    </VerticalCardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}

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

@@ -3,7 +3,6 @@ import { VerticalCardTopSectionProps } from './VerticalCardTopSection';
 import { VerticalCardMiddleSectionProps } from './VerticalCardMiddleSection';
 import { VerticalCardBottomSectionProps } from './VerticalCardBottomSection';
 export declare const VerticalCardTopLevelContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const VerticalCardLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const VerticalCardContainerStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {
     /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */

package/dist/Card/VerticalCard/VerticalCard.js

@@ -9,7 +9,7 @@ import styled from 'styled-components';
 import VerticalCardTopSection from './VerticalCardTopSection';
 import VerticalCardMiddleSection from './VerticalCardMiddleSection';
 import VerticalCardBottomSection from './VerticalCardBottomSection';
-import { BOXSHADOWS, COLORS, focusStyles, useActionWithin } from '../../index';
+import { BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin } from '../../index';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const VerticalCardTopLevelContainerStyles = styled.div`
   background-color: ${props => COLORS.generateToken({
@@ -38,30 +38,11 @@ export const VerticalCardTopLevelContainerStyles = styled.div`
 }, props.theme)};
   }
 `;
-
-// Full-card link that covers the entire card area
-export const VerticalCardLink = styled.a`
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 100;
-  text-decoration: none;
-  color: inherit;
-  pointer-events: auto;
-  cursor: pointer;
-  
-  &:focus {
-    outline: none;
-  }
-  
-  &:focus-visible {
-    ${focusStyles}
-  }
-`;
 export const VerticalCardContainerStyles = styled.div`
+  width: max-content;
+  
   &.interactive:not(.disabled) {
+    cursor: pointer;
     &:focus {
       ${focusStyles}
     }
@@ -127,32 +108,35 @@ const VerticalCard = _ref => {
   useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);
   const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;
   const handleCardClick = e => {
+    if (e.defaultPrevented) return;
     e.preventDefault();
     if (!disabled && onCardClicked) {
       onCardClicked(e);
     }
   };
+  const onKeyDown = e => {
+    if (e.defaultPrevented) return;
+    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onCardClicked) {
+      e.preventDefault();
+      onCardClicked(e);
+    }
+  };
   return /*#__PURE__*/_jsx(VerticalCardContainerStyles, _objectSpread(_objectSpread({
     ref: containerRef,
-    role: "group",
+    role: onCardClicked ? "button" : "group",
+    onClick: handleCardClick,
+    onMouseDown: defaultOnMouseDownHandler,
     className: cls,
     "aria-labelledby": `${autoId}-title`,
     tabIndex: !!onCardClicked && !disabled ? 0 : -1,
-    onKeyDown: e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e),
+    onKeyDown: onKeyDown,
     "data-testid": 'card-wrapper'
   }, rest), {}, {
     children: /*#__PURE__*/_jsxs(VerticalCardTopLevelContainerStyles, {
       style: {
         maxWidth: maxWidth
       },
-      children: [onCardClicked && !disabled && /*#__PURE__*/_jsx(VerticalCardLink, {
-        href: '#',
-        "data-testid": 'card-link',
-        onClick: handleCardClick,
-        onAuxClick: handleCardClick,
-        "aria-labelledby": `${autoId}-title`,
-        tabIndex: -1
-      }), topSectionProps && /*#__PURE__*/_jsx(VerticalCardTopSection, _objectSpread(_objectSpread({
+      children: [topSectionProps && /*#__PURE__*/_jsx(VerticalCardTopSection, _objectSpread(_objectSpread({
         ref: checkBoxRef
       }, topSectionProps), {}, {
         disabled: disabled

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

@@ -1 +1 @@
-{"version":3,"file":"VerticalCard.js","names":["React","styled","VerticalCardTopSection","VerticalCardMiddleSection","VerticalCardBottomSection","BOXSHADOWS","COLORS","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","VerticalCardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","VerticalCardLink","a","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","cls","handleCardClick","e","preventDefault","_objectSpread","ref","role","tabIndex","onKeyDown","key","children","style","href","onClick","onAuxClick","componentId","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, 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  position: relative;\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.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n// Full-card link that covers the entire card area\r\nexport const VerticalCardLink = styled.a`\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  z-index: 100;\r\n  text-decoration: none;\r\n  color: inherit;\r\n  pointer-events: auto;\r\n  cursor: pointer;\r\n  \r\n  &:focus {\r\n    outline: none;\r\n  }\r\n  \r\n  &:focus-visible {\r\n    ${focusStyles}\r\n  }\r\n`;\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n  &.interactive:not(.disabled) {\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\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    ${VerticalCardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n  onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => 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?: VerticalCardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: VerticalCardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: VerticalCardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    id,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: VerticalCardProps) => {\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  const autoId = React.useId();\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  const handleCardClick = (e: React.MouseEvent) => {\r\n    e.preventDefault();\r\n    if (!disabled && onCardClicked) {\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <VerticalCardContainerStyles ref={containerRef}\r\n            role=\"group\"\r\n            className={cls}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n            onKeyDown={e => e.key === 'Enter' && !disabled && onCardClicked && onCardClicked(e)}\r\n            data-testid={'card-wrapper'}\r\n            {...rest}>\r\n      <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {/* Full-card link for accessibility */}\r\n        {onCardClicked && !disabled && (\r\n          <VerticalCardLink\r\n            href={'#'}\r\n            data-testid={'card-link'}\r\n            onClick={handleCardClick}\r\n            onAuxClick={handleCardClick}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={-1}\r\n          />\r\n        )}\r\n        \r\n        {\r\n          topSectionProps &&\r\n          <VerticalCardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <VerticalCardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </VerticalCardTopLevelContainerStyles>\r\n    </VerticalCardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"VerticalCard.js","names":["React","styled","VerticalCardTopSection","VerticalCardMiddleSection","VerticalCardBottomSection","BOXSHADOWS","COLORS","defaultOnMouseDownHandler","focusStyles","useActionWithin","jsx","_jsx","jsxs","_jsxs","VerticalCardTopLevelContainerStyles","div","props","generateToken","componentType","defaultVariant","theme","BOXSHADOW_L1","VerticalCardContainerStyles","state","BOXSHADOW_L3","BOXSHADOW_L2","VerticalCard","_ref","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","disabled","variant","className","id","maxWidth","rest","_objectWithoutProperties","_excluded","actionsRefs","setActionsRefs","useState","checkBoxRef","useRef","containerRef","autoId","useId","cls","handleCardClick","e","defaultPrevented","preventDefault","onKeyDown","key","_objectSpread","ref","role","onClick","onMouseDown","tabIndex","children","style","componentId","instance","propTypes","_pt","func","bool","oneOfType","number","string","oneOf"],"sources":["../../../src/Card/VerticalCard/VerticalCard.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport VerticalCardTopSection, {VerticalCardTopSectionProps} from './VerticalCardTopSection';\r\nimport VerticalCardMiddleSection, {VerticalCardMiddleSectionProps} from './VerticalCardMiddleSection';\r\nimport VerticalCardBottomSection, {VerticalCardBottomSectionProps} from './VerticalCardBottomSection';\r\nimport {BOXSHADOWS, COLORS, defaultOnMouseDownHandler, focusStyles, useActionWithin} from '../../index';\r\n\r\nexport const VerticalCardTopLevelContainerStyles = styled.div`\r\n  background-color: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, 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  position: relative;\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.generateToken({componentType:'border', defaultVariant: 'subtle'}, props.theme)};\r\n  }\r\n`;\r\n\r\n\r\nexport const VerticalCardContainerStyles = styled.div`\r\n  width: max-content;\r\n  \r\n  &.interactive:not(.disabled) {\r\n    cursor: pointer;\r\n    &:focus {\r\n      ${focusStyles}\r\n    }\r\n\r\n    &:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\r\n        &:hover {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'hover'}, props.theme)};\r\n        }\r\n\r\n        &:active, &.active-state {\r\n          background-color: ${props => COLORS.generateToken({componentType:'bg-surface', state:'active'}, props.theme)};\r\n        }\r\n      }\r\n    }\r\n\r\n    &.elevated:not(.action-within) {\r\n      ${VerticalCardTopLevelContainerStyles} {\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    ${VerticalCardTopLevelContainerStyles}{\r\n      border: 1px solid ${props => COLORS.generateToken({componentType:'border', state:'disabled'}, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface VerticalCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /** Action to be executed when Card is clicked. The event is passed to provide click details (e.g., which mouse button was used). */\r\n  onCardClicked?: (e: React.MouseEvent | React.KeyboardEvent) => 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?: VerticalCardTopSectionProps;\r\n  /** Properties of Card middle section. */\r\n  middleSectionProps?: VerticalCardMiddleSectionProps;\r\n  /** Properties of Card bottom section. */\r\n  bottomSectionProps?: VerticalCardBottomSectionProps;\r\n  /** Card container style variant. */\r\n  variant?: 'outline' | 'elevated';\r\n}\r\n\r\nconst VerticalCard: React.FunctionComponent<VerticalCardProps> = ({\r\n                                                    onCardClicked,\r\n                                                    topSectionProps,\r\n                                                    middleSectionProps,\r\n                                                    bottomSectionProps,\r\n                                                    disabled,\r\n                                                    variant = 'elevated',\r\n                                                    className,\r\n                                                    id,\r\n                                                    maxWidth = 560,\r\n                                                    ...rest\r\n                                                  }: VerticalCardProps) => {\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  const autoId = React.useId();\r\n\r\n  useActionWithin(containerRef, [...actionsRefs, checkBoxRef]);\r\n\r\n  const cls = `${!!onCardClicked ? 'interactive' : ''} ${disabled ? 'disabled' : ''} ${variant} ${className || ''}`;\r\n\r\n  const handleCardClick = (e: React.MouseEvent) => {\r\n    if (e.defaultPrevented) return;\r\n    e.preventDefault();\r\n    if (!disabled && onCardClicked) {\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  const onKeyDown = (e: React.KeyboardEvent) => {\r\n    if (e.defaultPrevented) return;\r\n    if ((e.key === 'Enter' || e.key === ' ') && !disabled && onCardClicked) {\r\n      e.preventDefault();\r\n      onCardClicked(e);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <VerticalCardContainerStyles ref={containerRef}\r\n            role={onCardClicked ? \"button\" : \"group\"}\r\n            onClick={handleCardClick}\r\n            onMouseDown={defaultOnMouseDownHandler}\r\n            className={cls}\r\n            aria-labelledby={`${autoId}-title`}\r\n            tabIndex={!!onCardClicked && !disabled ? 0 : -1}\r\n            onKeyDown={onKeyDown}\r\n            data-testid={'card-wrapper'}\r\n            {...rest}>\r\n      <VerticalCardTopLevelContainerStyles style={{maxWidth: maxWidth}}>\r\n        {\r\n          topSectionProps &&\r\n          <VerticalCardTopSection ref={checkBoxRef}\r\n            {...topSectionProps} disabled={disabled}/>\r\n        }\r\n        {\r\n          middleSectionProps &&\r\n          <VerticalCardMiddleSection {...middleSectionProps} componentId={autoId} disabled={disabled}/>\r\n        }\r\n        {\r\n          bottomSectionProps &&\r\n          <VerticalCardBottomSection ref={instance => {\r\n            setActionsRefs(instance ?? []);\r\n          }}\r\n                             {...bottomSectionProps} disabled={disabled}/>\r\n        }\r\n      </VerticalCardTopLevelContainerStyles>\r\n    </VerticalCardContainerStyles>\r\n  );\r\n};\r\n\r\nexport default VerticalCard;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Card/VerticalCard/VerticalCardTopSection.cjs

@@ -111,6 +111,7 @@ const VerticalCardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(VerticalCardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
+      onClick: e => e.stopPropagation(),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
         ref: ref,
         disabled: disabled,

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

@@ -1 +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: 120;\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":[]}
+{"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","onClick","stopPropagation","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: 120;\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'} onClick={(e) => e.stopPropagation()}>\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/VerticalCardTopSection.js

@@ -102,6 +102,7 @@ const VerticalCardTopSection = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       })
     }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(VerticalCardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
+      onClick: e => e.stopPropagation(),
       children: /*#__PURE__*/_jsx(Checkbox, {
         ref: ref,
         disabled: disabled,

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

@@ -1 +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: 120;\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":[]}
+{"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","onClick","e","stopPropagation","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: 120;\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'} onClick={(e) => e.stopPropagation()}>\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/__tests__/VerticalCard.test.tsx

@@ -37,24 +37,11 @@ describe('<VerticalCard />',()=>{
             <VerticalCard bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
         );
 
-        fireEvent.click(getByTestId('card-link'));
+        fireEvent.click(getByTestId('card-wrapper'));
         expect(cardClicked).toHaveBeenCalled();
         expect(cardClicked.mock.calls[0][0]).toBeDefined();
     });
 
-    it('fires card clicked event on middle mouse click and prevents default', async () => {
-        const cardClicked = jest.fn();
-        const{getByTestId} = render(
-            <VerticalCard bottomSectionProps={{disabled:false}} disabled={false} onCardClicked={cardClicked}/>
-        );
-
-        const link = getByTestId('card-link');
-        const auxClickEvent = new MouseEvent('auxclick', { bubbles: true, button: 1 });
-        const preventDefaultSpy = jest.spyOn(auxClickEvent, 'preventDefault');
-        link.dispatchEvent(auxClickEvent);
-        expect(cardClicked).toHaveBeenCalled();
-        expect(preventDefaultSpy).toHaveBeenCalled();
-    });
 
     it('fires card clicked event on keyDown', async () => {
         const cardClicked = jest.fn();

package/dist/assets/index.cjs

@@ -16,7 +16,7 @@ const LaerdalLogo = _ref => {
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     style: {
-      content: "var(--laerdal-logo)",
+      content: "var(--life-logo)",
       width,
       height
     },
@@ -40,7 +40,7 @@ const LaerdalLoadingLogo = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
     style: {
-      content: "var(--laerdal-loading-logo)",
+      content: "var(--life-loading-logo)",
       width,
       height
     },

package/dist/assets/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["_react","_interopRequireDefault","require","_jsxRuntime","LaerdalLogo","_ref","className","width","height","jsx","style","content","exports","propTypes","_propTypes","default","string","color","size","viewBox","LaerdalLoadingLogo","_ref2","LaerdalWhiteLogo","_ref3"],"sources":["../../src/assets/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport type IconProps = {\r\n  className?: string;\r\n  color?: string;\r\n  size?: string;\r\n  viewBox?: string;\r\n  width?: string;\r\n  height?: string;\r\n};\r\n\r\nexport const LaerdalLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--laerdal-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalLoadingLogo: React.FunctionComponent<IconProps> = ({ className, width = '160px', height = '79px' }) => (\r\n  <img style={{content: \"var(--laerdal-loading-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalWhiteLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-white-logo)\", width, height}} className={className} />\r\n);\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,WAAA,GAAAD,OAAA;AAWnB,MAAME,WAA+C,GAAGC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAH,IAAA;EAAA,oBAC5G,IAAAF,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,qBAAqB;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACtF;AAACM,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAAAA,WAAA,CAAAS,SAAA;EAVAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA;AAOD,MAAMI,kBAAsD,GAAGC,KAAA;EAAA,IAAC;IAAEf,SAAS;IAAEC,KAAK,GAAG,OAAO;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAa,KAAA;EAAA,oBACpH,IAAAlB,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,6BAA6B;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CAC9F;AAACM,OAAA,CAAAQ,kBAAA,GAAAA,kBAAA;AAAAA,kBAAA,CAAAP,SAAA;EAdAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA;AAWD,MAAMM,gBAAoD,GAAGC,KAAA;EAAA,IAAC;IAAEjB,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAe,KAAA;EAAA,oBACjH,IAAApB,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,wBAAwB;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACzF;AAACM,OAAA,CAAAU,gBAAA,GAAAA,gBAAA;AAAAA,gBAAA,CAAAT,SAAA;EAlBAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA","ignoreList":[]}
+{"version":3,"file":"index.cjs","names":["_react","_interopRequireDefault","require","_jsxRuntime","LaerdalLogo","_ref","className","width","height","jsx","style","content","exports","propTypes","_propTypes","default","string","color","size","viewBox","LaerdalLoadingLogo","_ref2","LaerdalWhiteLogo","_ref3"],"sources":["../../src/assets/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport type IconProps = {\r\n  className?: string;\r\n  color?: string;\r\n  size?: string;\r\n  viewBox?: string;\r\n  width?: string;\r\n  height?: string;\r\n};\r\n\r\nexport const LaerdalLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalLoadingLogo: React.FunctionComponent<IconProps> = ({ className, width = '160px', height = '79px' }) => (\r\n  <img style={{content: \"var(--life-loading-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalWhiteLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-white-logo)\", width, height}} className={className} />\r\n);\r\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,WAAA,GAAAD,OAAA;AAWnB,MAAME,WAA+C,GAAGC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAH,IAAA;EAAA,oBAC5G,IAAAF,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,kBAAkB;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACnF;AAACM,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAAAA,WAAA,CAAAS,SAAA;EAVAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA;AAOD,MAAMI,kBAAsD,GAAGC,KAAA;EAAA,IAAC;IAAEf,SAAS;IAAEC,KAAK,GAAG,OAAO;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAa,KAAA;EAAA,oBACpH,IAAAlB,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,0BAA0B;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CAC3F;AAACM,OAAA,CAAAQ,kBAAA,GAAAA,kBAAA;AAAAA,kBAAA,CAAAP,SAAA;EAdAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA;AAWD,MAAMM,gBAAoD,GAAGC,KAAA;EAAA,IAAC;IAAEjB,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAe,KAAA;EAAA,oBACjH,IAAApB,WAAA,CAAAM,GAAA;IAAKC,KAAK,EAAE;MAACC,OAAO,EAAE,wBAAwB;MAAEJ,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACzF;AAACM,OAAA,CAAAU,gBAAA,GAAAA,gBAAA;AAAAA,gBAAA,CAAAT,SAAA;EAlBAP,SAAS,EAAAQ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACTC,KAAK,EAAAH,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLE,IAAI,EAAAJ,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACJG,OAAO,EAAAL,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACPT,KAAK,EAAAO,UAAA,CAAAC,OAAA,CAAAC,MAAA;EACLR,MAAM,EAAAM,UAAA,CAAAC,OAAA,CAAAC;AAAA","ignoreList":[]}

package/dist/assets/index.js

@@ -9,7 +9,7 @@ export const LaerdalLogo = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx("img", {
     style: {
-      content: "var(--laerdal-logo)",
+      content: "var(--life-logo)",
       width,
       height
     },
@@ -32,7 +32,7 @@ export const LaerdalLoadingLogo = _ref2 => {
   } = _ref2;
   return /*#__PURE__*/_jsx("img", {
     style: {
-      content: "var(--laerdal-loading-logo)",
+      content: "var(--life-loading-logo)",
       width,
       height
     },

package/dist/assets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","jsx","_jsx","LaerdalLogo","_ref","className","width","height","style","content","propTypes","_pt","string","color","size","viewBox","LaerdalLoadingLogo","_ref2","LaerdalWhiteLogo","_ref3"],"sources":["../../src/assets/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport type IconProps = {\r\n  className?: string;\r\n  color?: string;\r\n  size?: string;\r\n  viewBox?: string;\r\n  width?: string;\r\n  height?: string;\r\n};\r\n\r\nexport const LaerdalLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--laerdal-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalLoadingLogo: React.FunctionComponent<IconProps> = ({ className, width = '160px', height = '79px' }) => (\r\n  <img style={{content: \"var(--laerdal-loading-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalWhiteLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-white-logo)\", width, height}} className={className} />\r\n);\r\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW1B,OAAO,MAAMC,WAA+C,GAAGC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAH,IAAA;EAAA,oBAC5GF,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,qBAAqB;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACtF;AAACF,WAAA,CAAAO,SAAA;EAVAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA;AAOR,OAAO,MAAMI,kBAAsD,GAAGC,KAAA;EAAA,IAAC;IAAEZ,SAAS;IAAEC,KAAK,GAAG,OAAO;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAU,KAAA;EAAA,oBACpHf,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,6BAA6B;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CAC9F;AAACW,kBAAA,CAAAN,SAAA;EAdAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA;AAWR,OAAO,MAAMM,gBAAoD,GAAGC,KAAA;EAAA,IAAC;IAAEd,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAY,KAAA;EAAA,oBACjHjB,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,wBAAwB;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACzF;AAACa,gBAAA,CAAAR,SAAA;EAlBAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","jsx","_jsx","LaerdalLogo","_ref","className","width","height","style","content","propTypes","_pt","string","color","size","viewBox","LaerdalLoadingLogo","_ref2","LaerdalWhiteLogo","_ref3"],"sources":["../../src/assets/index.tsx"],"sourcesContent":["import React from 'react';\r\n\r\nexport type IconProps = {\r\n  className?: string;\r\n  color?: string;\r\n  size?: string;\r\n  viewBox?: string;\r\n  width?: string;\r\n  height?: string;\r\n};\r\n\r\nexport const LaerdalLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalLoadingLogo: React.FunctionComponent<IconProps> = ({ className, width = '160px', height = '79px' }) => (\r\n  <img style={{content: \"var(--life-loading-logo)\", width, height}} className={className} />\r\n);\r\n\r\nexport const LaerdalWhiteLogo: React.FunctionComponent<IconProps> = ({ className, width = '88px', height = '48px' }) => (\r\n  <img style={{content: \"var(--life-white-logo)\", width, height}} className={className} />\r\n);\r\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAW1B,OAAO,MAAMC,WAA+C,GAAGC,IAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAH,IAAA;EAAA,oBAC5GF,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,kBAAkB;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACnF;AAACF,WAAA,CAAAO,SAAA;EAVAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA;AAOR,OAAO,MAAMI,kBAAsD,GAAGC,KAAA;EAAA,IAAC;IAAEZ,SAAS;IAAEC,KAAK,GAAG,OAAO;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAU,KAAA;EAAA,oBACpHf,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,0BAA0B;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CAC3F;AAACW,kBAAA,CAAAN,SAAA;EAdAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA;AAWR,OAAO,MAAMM,gBAAoD,GAAGC,KAAA;EAAA,IAAC;IAAEd,SAAS;IAAEC,KAAK,GAAG,MAAM;IAAEC,MAAM,GAAG;EAAO,CAAC,GAAAY,KAAA;EAAA,oBACjHjB,IAAA;IAAKM,KAAK,EAAE;MAACC,OAAO,EAAE,wBAAwB;MAAEH,KAAK;MAAEC;IAAM,CAAE;IAACF,SAAS,EAAEA;EAAU,CAAE,CAAC;AAAA,CACzF;AAACa,gBAAA,CAAAR,SAAA;EAlBAL,SAAS,EAAAM,GAAA,CAAAC,MAAA;EACTC,KAAK,EAAAF,GAAA,CAAAC,MAAA;EACLE,IAAI,EAAAH,GAAA,CAAAC,MAAA;EACJG,OAAO,EAAAJ,GAAA,CAAAC,MAAA;EACPN,KAAK,EAAAK,GAAA,CAAAC,MAAA;EACLL,MAAM,EAAAI,GAAA,CAAAC;AAAA","ignoreList":[]}