@laerdal/life-react-components 3.0.1-dev.9.full → 3.1.0-dev.1

package/dist/Card/VerticalCard/CardTopSection.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.CardTopTagContainer = exports.CardTopSectionContainer = exports.CardRibbonContainer = exports.CardImageContainer = exports.CardCheckboxContainer = void 0;
+exports.default = exports.CardTopSectionTagContainer = exports.CardTopSectionRibbonContainer = exports.CardTopSectionImageContainer = exports.CardTopSectionContainer = exports.CardTopSectionCheckboxContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
@@ -19,22 +19,22 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var CardImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
-exports.CardImageContainer = CardImageContainer;
-var CardTopTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
-exports.CardTopTagContainer = CardTopTagContainer;
+var CardTopSectionImageContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
+exports.CardTopSectionImageContainer = CardTopSectionImageContainer;
+var CardTopSectionTagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
+exports.CardTopSectionTagContainer = CardTopSectionTagContainer;
 var CardTopSectionContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 });
 exports.CardTopSectionContainer = CardTopSectionContainer;
-var CardRibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+var CardTopSectionRibbonContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
-exports.CardRibbonContainer = CardRibbonContainer;
-var CardCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _index.COLORS.white);
-exports.CardCheckboxContainer = CardCheckboxContainer;
+exports.CardTopSectionRibbonContainer = CardTopSectionRibbonContainer;
+var CardTopSectionCheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _index.COLORS.white);
+exports.CardTopSectionCheckboxContainer = CardTopSectionCheckboxContainer;
 var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _image$height, _image$fallbackSrc, _image$loader;
   var selected = _ref.selected,
@@ -55,7 +55,7 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: {
       height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
     },
-    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardImageContainer, {
+    children: [image && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionImageContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,
@@ -64,7 +64,7 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         width: image.width,
         height: image.height
       })
-    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardCheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
         ref: ref,
@@ -74,13 +74,13 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         selected: selected || false
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopTagContainer, {
+    }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardTopSectionTagContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
         label: tagLabel,
         variant: tagVariant,
         icon: tagIcon
       })
-    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardRibbonContainer, {
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? _index.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',

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

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.cjs","names":["CardImageContainer","styled","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","ComponentTextStyle","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  selected?: boolean;\r\n  setSelected?: (arg0: boolean) => void;\r\n  tagLabel?: string;\r\n  tagIcon?: React.ReactNode;\r\n  tagVariant?: TagVariants;\r\n  highlightRibbonText?: string;\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  highlightRibbonContentColor?: string;\r\n  highlightRibbonBgColor?: string;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardImageContainer = 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 CardTopTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardRibbonContainer = 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 CardCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardCheckboxContainer 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        </CardCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":"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"}
+{"version":3,"file":"CardTopSection.cjs","names":["CardTopSectionImageContainer","styled","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","ComponentTextStyle","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: React.ReactNode;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  disabled?: boolean;\n}\n\nexport const CardTopSectionImageContainer = styled.div`\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n`;\n\nexport const CardTopSectionTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardTopSectionCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection = React.forwardRef(({\n                                           selected,\n                                           setSelected,\n                                           image,\n                                           tagLabel,\n                                           tagIcon,\n                                           tagVariant = 'positive',\n                                           highlightRibbonIcon,\n                                           highlightRibbonText,\n                                           highlightRibbonContentColor,\n                                           highlightRibbonBgColor,\n                                           disabled\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n      {\n        image &&\n        <CardTopSectionImageContainer>\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n        </CardTopSectionImageContainer>\n      }\n      {(!!selected || !!setSelected) && (\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardTopSectionCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopSectionTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopSectionTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardTopSectionRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"mappings":"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"}

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

@@ -1,34 +1,34 @@
-import * as React from 'react';
-import { TagVariants } from '../../Tag';
-export interface CardTopSectionProps {
-    selected?: boolean;
-    setSelected?: (arg0: boolean) => void;
-    tagLabel?: string;
-    tagIcon?: React.ReactNode;
-    tagVariant?: TagVariants;
-    highlightRibbonText?: string;
-    highlightRibbonIcon?: React.ReactNode;
-    highlightRibbonContentColor?: string;
-    highlightRibbonBgColor?: string;
-    image?: {
-        src: string;
-        fallbackSrc?: string;
-        alt: string;
-        height?: string;
-        width?: string;
-        loader?: boolean;
-    };
-    disabled?: boolean;
-}
-export declare const CardImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const CardRibbonContainer: import("styled-components").StyledComponent<"div", any, {
-    $color: string;
-    $backgroundColor: string;
-}, never>;
-export declare const CardCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
-export default CardTopSection;
+import * as React from 'react';
+import { TagVariants } from '../../Tag';
+export interface CardTopSectionProps {
+    selected?: boolean;
+    setSelected?: (arg0: boolean) => void;
+    tagLabel?: string;
+    tagIcon?: React.ReactNode;
+    tagVariant?: TagVariants;
+    highlightRibbonText?: string;
+    highlightRibbonIcon?: React.ReactNode;
+    highlightRibbonContentColor?: string;
+    highlightRibbonBgColor?: string;
+    image?: {
+        src: string;
+        fallbackSrc?: string;
+        alt: string;
+        height?: string;
+        width?: string;
+        loader?: boolean;
+    };
+    disabled?: boolean;
+}
+export declare const CardTopSectionImageContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopSectionTagContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CardTopSectionContainer: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;
+export declare const CardTopSectionRibbonContainer: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+    $backgroundColor: string;
+}, never>;
+export declare const CardTopSectionCheckboxContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
+export default CardTopSection;

package/dist/Card/VerticalCard/CardTopSection.js

@@ -10,17 +10,17 @@ import { COLORS } from '../../index';
 import { ImageWithFallbacks } from "../../Image";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export var CardImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
-export var CardTopTagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
+export var CardTopSectionImageContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n"])));
+export var CardTopSectionTagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
 export var CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 });
-export var CardRibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
+export var CardTopSectionRibbonContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
-export var CardCheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
+export var CardTopSectionCheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
 var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _image$height, _image$fallbackSrc, _image$loader;
   var selected = _ref.selected,
@@ -41,7 +41,7 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     style: {
       height: (_image$height = image === null || image === void 0 ? void 0 : image.height) !== null && _image$height !== void 0 ? _image$height : 200
     },
-    children: [image && /*#__PURE__*/_jsx(CardImageContainer, {
+    children: [image && /*#__PURE__*/_jsx(CardTopSectionImageContainer, {
       children: /*#__PURE__*/_jsx(ImageWithFallbacks, {
         fallbacks: (_image$fallbackSrc = image.fallbackSrc) !== null && _image$fallbackSrc !== void 0 ? _image$fallbackSrc : '',
         src: image.src,
@@ -50,7 +50,7 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         width: image.width,
         height: image.height
       })
-    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardTopSectionCheckboxContainer, {
       "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/_jsx(Checkbox, {
         ref: ref,
@@ -60,13 +60,13 @@ var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         },
         selected: selected || false
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopTagContainer, {
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopSectionTagContainer, {
       children: /*#__PURE__*/_jsx(Tag, {
         label: tagLabel,
         variant: tagVariant,
         icon: tagIcon
       })
-    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardRibbonContainer, {
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardTopSectionRibbonContainer, {
       "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',

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

@@ -1 +1 @@
-{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardImageContainer","div","CardTopTagContainer","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\r\nimport Checkbox from '../../InputFields/Checkbox';\r\nimport {Tag, TagVariants} from '../../Tag';\r\n\r\nimport {COLORS} from '../../index';\r\nimport {ImageWithFallbacks} from \"../../Image\";\r\n\r\nexport interface CardTopSectionProps {\r\n  selected?: boolean;\r\n  setSelected?: (arg0: boolean) => void;\r\n  tagLabel?: string;\r\n  tagIcon?: React.ReactNode;\r\n  tagVariant?: TagVariants;\r\n  highlightRibbonText?: string;\r\n  highlightRibbonIcon?: React.ReactNode;\r\n  highlightRibbonContentColor?: string;\r\n  highlightRibbonBgColor?: string;\r\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\r\n  disabled?: boolean;\r\n}\r\n\r\nexport const CardImageContainer = 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 CardTopTagContainer = styled.div`\r\n  position: absolute;\r\n\r\n  top: 16px;\r\n  left: 16px;\r\n  width: calc(100% - 32px);\r\n`;\r\n\r\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\r\n  position: relative;\r\n  width: 100%;\r\n  overflow: visible;\r\n\r\n  ${props => props.disabled ? `\r\n  img, svg {\r\n    filter: grayscale(100%);\r\n  }` : ''}\r\n`;\r\n\r\nexport const CardRibbonContainer = 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 CardCheckboxContainer = styled.div`\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  z-index: 1;\r\n\r\n  .checkbox-icon {\r\n    background-color: ${COLORS.white};\r\n  }\r\n`;\r\n\r\nconst CardTopSection = React.forwardRef(({\r\n                                           selected,\r\n                                           setSelected,\r\n                                           image,\r\n                                           tagLabel,\r\n                                           tagIcon,\r\n                                           tagVariant = 'positive',\r\n                                           highlightRibbonIcon,\r\n                                           highlightRibbonText,\r\n                                           highlightRibbonContentColor,\r\n                                           highlightRibbonBgColor,\r\n                                           disabled\r\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\r\n\r\n  return (\r\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\r\n      {\r\n        image &&\r\n        <CardImageContainer>\r\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\r\n        </CardImageContainer>\r\n      }\r\n      {(!!selected || !!setSelected) && (\r\n        <CardCheckboxContainer 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        </CardCheckboxContainer>\r\n      )}\r\n      {(tagLabel || tagIcon) && (\r\n        <CardTopTagContainer>\r\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\r\n        </CardTopTagContainer>\r\n      )}\r\n      {(highlightRibbonIcon || highlightRibbonText) && (\r\n        <CardRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\r\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\r\n          {highlightRibbonIcon}\r\n          {highlightRibbonText && (\r\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\r\n              {highlightRibbonText}\r\n            </ComponentS>\r\n          )}\r\n        </CardRibbonContainer>\r\n      )}\r\n    </CardTopSectionContainer>\r\n  );\r\n});\r\n\r\nexport default CardTopSection;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,EAAEC,kBAAkB,QAAO,yBAAyB;AACtE,OAAOC,QAAQ,MAAM,4BAA4B;AACjD,SAAQC,GAAG,QAAoB,WAAW;AAE1C,SAAQC,MAAM,QAAO,aAAa;AAClC,SAAQC,kBAAkB,QAAO,aAAa;AAAC;AAAA;AAgB/C,OAAO,IAAMC,kBAAkB,GAAGP,MAAM,CAACQ,GAAG,wTAY3C;AAED,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACQ,GAAG,4JAM5C;AAED,OAAO,IAAME,uBAAuB,GAAGV,MAAM,CAACQ,GAAG,iJAK7C,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACC,QAAQ,yDAGpB,EAAE;AAAA,EACR;AAED,OAAO,IAAMC,mBAAmB,GAAGb,MAAM,CAACQ,GAAG,sbAEvB,UAAAG,KAAK;EAAA,OAAIA,KAAK,CAACG,gBAAgB;AAAA,GAYxC,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACI,MAAM;AAAA,EAMjC;AAED,OAAO,IAAMC,qBAAqB,GAAGhB,MAAM,CAACQ,GAAG,gMAOvBH,MAAM,CAACY,KAAK,CAEnC;AAED,IAAMC,cAAc,gBAAGnB,KAAK,CAACoB,UAAU,CAAC,gBAYyBC,GAA8B,EAAK;EAAA;EAAA,IAXzDC,QAAQ,QAARA,QAAQ;IACRC,WAAW,QAAXA,WAAW;IACXC,KAAK,QAALA,KAAK;IACLC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IAAA,uBACPC,UAAU;IAAVA,UAAU,gCAAG,UAAU;IACvBC,mBAAmB,QAAnBA,mBAAmB;IACnBC,mBAAmB,QAAnBA,mBAAmB;IACnBC,2BAA2B,QAA3BA,2BAA2B;IAC3BC,sBAAsB,QAAtBA,sBAAsB;IACtBlB,QAAQ,QAARA,QAAQ;EAGjD,oBACE,MAAC,uBAAuB;IAAC,QAAQ,EAAEA,QAAS;IAAC,eAAa,iBAAkB;IAAC,KAAK,EAAE;MAACmB,MAAM,mBAAER,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEQ,MAAM,yDAAI;IAAG,CAAE;IAAA,WAE/GR,KAAK,iBACL,KAAC,kBAAkB;MAAA,uBACf,KAAC,kBAAkB;QAAC,SAAS,wBAAEA,KAAK,CAACS,WAAW,mEAAI,EAAG;QAAC,GAAG,EAAET,KAAK,CAACU,GAAI;QAAC,GAAG,EAAEV,KAAK,CAACW,GAAI;QAAC,MAAM,mBAAEX,KAAK,CAACY,MAAM,yDAAI,KAAM;QAAC,KAAK,EAAEZ,KAAK,CAACa,KAAM;QAAC,MAAM,EAAEb,KAAK,CAACQ;MAAO;IAAE,EACjJ,EAEtB,CAAC,CAAC,CAACV,QAAQ,IAAI,CAAC,CAACC,WAAW,kBAC3B,KAAC,qBAAqB;MAAC,eAAa,0BAA2B;MAAA,uBAC7D,KAAC,QAAQ;QAAC,GAAG,EAAEF,GAAI;QACT,QAAQ,EAAER,QAAS;QACnB,MAAM,EAAE,gBAACS,QAAiB;UAAA,OAAKC,WAAW,IAAIA,WAAW,CAACD,QAAQ,CAAC;QAAA,CAAC;QACpE,QAAQ,EAAEA,QAAQ,IAAI;MAAM;IAAE,EAE3C,EACA,CAACG,QAAQ,IAAIC,OAAO,kBACnB,KAAC,mBAAmB;MAAA,uBAClB,KAAC,GAAG;QAAC,KAAK,EAAED,QAAS;QAAC,OAAO,EAAEE,UAAW;QAAC,IAAI,EAAED;MAAQ;IAAE,EAE9D,EACA,CAACE,mBAAmB,IAAIC,mBAAmB,kBAC1C,MAAC,mBAAmB;MAAC,eAAa,wBAAyB;MAAC,MAAM,EAAEC,2BAA2B,aAA3BA,2BAA2B,cAA3BA,2BAA2B,GAAI,EAAG;MACjF,gBAAgB,EAAEjB,QAAQ,GAAGP,MAAM,CAACgC,WAAW,GAAGP,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAG;MAAA,WACjGH,mBAAmB,EACnBC,mBAAmB,iBAClB,KAAC,UAAU;QAAC,KAAK,EAAEC,2BAA2B,aAA3BA,2BAA2B,cAA3BA,2BAA2B,GAAI,EAAG;QAAC,SAAS,EAAE3B,kBAAkB,CAACoC,OAAQ;QAAA,UACzFV;MAAmB,EAEvB;IAAA,EAEJ;EAAA,EACuB;AAE9B,CAAC,CAAC;AAAC;EA/HDP,QAAQ;EACRC,WAAW;EACXE,QAAQ;EACRC,OAAO;EAEPG,mBAAmB;EACnBD,mBAAmB;EACnBE,2BAA2B;EAC3BC,sBAAsB;EACtBP,KAAK;IAAKU,GAAG;IAAUD,WAAW;IAAWE,GAAG;IAAUH,MAAM;IAAWK,KAAK;IAAWD,MAAM;EAAA;EACjGvB,QAAQ;AAAA;AAuHV,eAAeM,cAAc"}
+{"version":3,"file":"CardTopSection.js","names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","ImageWithFallbacks","CardTopSectionImageContainer","div","CardTopSectionTagContainer","CardTopSectionContainer","props","disabled","CardTopSectionRibbonContainer","$backgroundColor","$color","CardTopSectionCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","height","fallbackSrc","src","alt","loader","width","neutral_300","Regular"],"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../../styles/typography';\nimport Checkbox from '../../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../../Tag';\n\nimport {COLORS} from '../../index';\nimport {ImageWithFallbacks} from \"../../Image\";\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: React.ReactNode;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: { src: string; fallbackSrc?: string; alt: string, height?: string; width?: string; loader?: boolean };\n  disabled?: boolean;\n}\n\nexport const CardTopSectionImageContainer = styled.div`\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n  height: 100%;\n  width: 100%;\n  img{\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n    border-top-right-radius: 8px;\n    border-top-left-radius: 8px;\n  }\n`;\n\nexport const CardTopSectionTagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nexport const CardTopSectionContainer = styled.div<{ disabled?: boolean }>`\n  position: relative;\n  width: 100%;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardTopSectionRibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nexport const CardTopSectionCheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection = React.forwardRef(({\n                                           selected,\n                                           setSelected,\n                                           image,\n                                           tagLabel,\n                                           tagIcon,\n                                           tagVariant = 'positive',\n                                           highlightRibbonIcon,\n                                           highlightRibbonText,\n                                           highlightRibbonContentColor,\n                                           highlightRibbonBgColor,\n                                           disabled\n                                         }: CardTopSectionProps, ref: React.Ref<HTMLDivElement>) => {\n\n  return (\n    <CardTopSectionContainer disabled={disabled} data-testid={'card-topSection'} style={{height: image?.height ?? 200}}>\n      {\n        image &&\n        <CardTopSectionImageContainer>\n            <ImageWithFallbacks fallbacks={image.fallbackSrc ?? ''} src={image.src} alt={image.alt} loader={image.loader ?? false} width={image.width} height={image.height}/>\n        </CardTopSectionImageContainer>\n      }\n      {(!!selected || !!setSelected) && (\n        <CardTopSectionCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardTopSectionCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopSectionTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopSectionTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardTopSectionRibbonContainer data-testid={'card-topSection-ribbon'} $color={highlightRibbonContentColor ?? ''}\n                             $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </CardTopSectionRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\r\n\r\nexport {default as CardBottomSection} from './CardBottomSection';\r\nexport * from './CardBottomSection';\r\nexport {default as CardMiddleSection} from './CardMiddleSection';\r\nexport * from './CardMiddleSection';\r\nexport {default as CardTopSection} from './CardTopSection';\r\nexport * from './CardTopSection';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../../src/Card/VerticalCard/index.tsx"],"sourcesContent":["export {default as Card} from './Card';\n\nexport {default as CardBottomSection} from './CardBottomSection';\nexport * from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport * from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\nexport * from './CardTopSection';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAEA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAiC;AAAA"}

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

@@ -1,7 +1,7 @@
-export { default as Card } from './Card';
-export { default as CardBottomSection } from './CardBottomSection';
-export * from './CardBottomSection';
-export { default as CardMiddleSection } from './CardMiddleSection';
-export * from './CardMiddleSection';
-export { default as CardTopSection } from './CardTopSection';
-export * from './CardTopSection';
+export { default as Card } from './Card';
+export { default as CardBottomSection } from './CardBottomSection';
+export * from './CardBottomSection';
+export { default as CardMiddleSection } from './CardMiddleSection';
+export * from './CardMiddleSection';
+export { default as CardTopSection } from './CardTopSection';
+export * from './CardTopSection';

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

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

package/dist/Card/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\r\nexport * from './HorizontalCard';\r\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/Card/index.d.ts

@@ -1,2 +1,2 @@
-export * from './VerticalCard';
-export * from './HorizontalCard';
+export * from './VerticalCard';
+export * from './HorizontalCard';

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\r\nexport * from './HorizontalCard';\r\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.ts"],"sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,kBAAkB"}

package/dist/Chips/ActionChip.cjs

@@ -28,8 +28,8 @@ var ActionChip = function ActionChip(_ref) {
     className = _ref.className,
     dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  /**
-   * Return Action Chip component.
+  /**
+   * Return Action Chip component.
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons as icons} from '../icons/index';\r\nimport {Size} from '../types';\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ActionChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\r\n                                                                icon,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: ActionChipProps) => {\r\n\r\n  /**\r\n   * Return Action Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   \r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   data-testid={dataTestId}\r\n                   role=\"button\"\r\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {\r\n            icon &&\r\n            <div className={'chip-icon icon-left'}>\r\n              {icon}\r\n            </div>\r\n          }\r\n          <div>\r\n            {text}\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default ActionChip;\r\n"],"mappings":";;;;;;;;;;AAGA;AAMA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}
+{"version":3,"file":"ActionChip.cjs","names":["ActionChip","icon","text","size","Size","Medium","disabled","onClick","className","dataTestId","rest","defaultOnMouseDownHandler","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;;;;;;AAGA;AAMA;AAIA;AAMA;AAAoD;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpD,IAAMA,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGC,WAAI,CAACC,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,qBAAC,yBAAa;IAAC,SAAS,YAAKP,IAAI,cAAIG,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEI,iCAA0B;IACvC,eAAaF,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAG,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACP,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,qBAAC,gCAAoB;MAAA,uBACnB,sBAAC,uBAAW;QAAA,WAERT,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAAC,eAEaF,UAAU;AAAA"}

package/dist/Chips/ActionChip.d.ts

@@ -1,10 +1,10 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { ActionChipProps } from './ChipTypes';
-declare const ActionChip: React.FunctionComponent<ActionChipProps>;
-export default ActionChip;
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom types.
+ */
+import { ActionChipProps } from './ChipTypes';
+declare const ActionChip: React.FunctionComponent<ActionChipProps>;
+export default ActionChip;

package/dist/Chips/ActionChip.js

@@ -3,23 +3,23 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
 
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 
 import { Size } from '../types';
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
 
-/**
- * Import custom types.
+/**
+ * Import custom types.
  */
 
 import { defaultOnMouseDownHandler } from '../common';
@@ -35,8 +35,8 @@ var ActionChip = function ActionChip(_ref) {
     className = _ref.className,
     dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
-  /**
-   * Return Action Chip component.
+  /**
+   * Return Action Chip component.
    */
   return /*#__PURE__*/_jsx(ChipContainer, _objectSpread(_objectSpread({
     className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : '', " ").concat(className || ''),

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.js","names":["React","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport {SystemIcons as icons} from '../icons/index';\r\nimport {Size} from '../types';\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\r\n\r\n/**\r\n * Import custom types.\r\n */\r\nimport {ActionChipProps} from './ChipTypes';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\r\n                                                                icon,\r\n                                                                text,\r\n                                                                size = Size.Medium,\r\n                                                                disabled,\r\n                                                                onClick,\r\n                                                                className,\r\n                                                                dataTestId,\r\n                                                                ...rest\r\n                                                              }: ActionChipProps) => {\r\n\r\n  /**\r\n   * Return Action Chip component.\r\n   */\r\n  return (\r\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\r\n                   \r\n                   onClick={() => !disabled && onClick && onClick()}\r\n                   onMouseDown={defaultOnMouseDownHandler}\r\n                   data-testid={dataTestId}\r\n                   role=\"button\"\r\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\r\n                   tabIndex={disabled || !onClick ? -1 : 0}\r\n                   {...rest}>\r\n      <ChipContentContainer>\r\n        <ChipContent>\r\n          {\r\n            icon &&\r\n            <div className={'chip-icon icon-left'}>\r\n              {icon}\r\n            </div>\r\n          }\r\n          <div>\r\n            {text}\r\n          </div>\r\n        </ChipContent>\r\n      </ChipContentContainer>\r\n    </ChipContainer>\r\n  );\r\n};\r\n\r\nexport default ActionChip;\r\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAEA,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}
+{"version":3,"file":"ActionChip.js","names":["React","Size","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","Medium","disabled","onClick","className","dataTestId","rest","e","key"],"sources":["../../src/Chips/ActionChip.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size = Size.Medium,\n                                                                disabled,\n                                                                onClick,\n                                                                className,\n                                                                dataTestId,\n                                                                ...rest\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''} ${className || ''}`}\n                   \n                   onClick={() => !disabled && onClick && onClick()}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   data-testid={dataTestId}\n                   role=\"button\"\n                   onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick()}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   {...rest}>\n      <ChipContentContainer>\n        <ChipContent>\n          {\n            icon &&\n            <div className={'chip-icon icon-left'}>\n              {icon}\n            </div>\n          }\n          <div>\n            {text}\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n};\n\nexport default ActionChip;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAEA,SAAQC,IAAI,QAAO,UAAU;AAC7B;AACA;AACA;AACA,SAAQC,aAAa,EAAEC,WAAW,EAAEC,oBAAoB,QAAO,cAAc;;AAE7E;AACA;AACA;;AAEA,SAAQC,yBAAyB,QAAO,WAAW;AAAC;AAAA;AAEpD,IAAMC,UAAoD,GAAG,SAAvDA,UAAoD,OAS2B;EAAA,IARrBC,IAAI,QAAJA,IAAI;IACJC,IAAI,QAAJA,IAAI;IAAA,iBACJC,IAAI;IAAJA,IAAI,0BAAGR,IAAI,CAACS,MAAM;IAClBC,QAAQ,QAARA,QAAQ;IACRC,QAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAGrE;AACF;AACA;EACE,oBACE,KAAC,aAAa;IAAC,SAAS,YAAKN,IAAI,cAAIE,QAAQ,GAAG,UAAU,GAAG,EAAE,sBAAY,CAAC,CAACC,QAAO,GAAG,aAAa,GAAG,EAAE,cAAIC,SAAS,IAAI,EAAE,CAAG;IAEhH,OAAO,EAAE;MAAA,OAAM,CAACF,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IACjD,WAAW,EAAEP,yBAA0B;IACvC,eAAaS,UAAW;IACxB,IAAI,EAAC,QAAQ;IACb,SAAS,EAAE,mBAAAE,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAK,CAACN,QAAQ,IAAIC,QAAO,IAAIA,QAAO,EAAE;IAAA,CAAC;IAC1F,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAO,GAAG,CAAC,CAAC,GAAG;EAAE,GACpCG,IAAI;IAAA,uBACrB,KAAC,oBAAoB;MAAA,uBACnB,MAAC,WAAW;QAAA,WAERR,IAAI,iBACJ;UAAK,SAAS,EAAE,qBAAsB;UAAA,UACnCA;QAAI,EACD,eAER;UAAA,UACGC;QAAI,EACD;MAAA;IACM;EACO,GACT;AAEpB,CAAC;AAED,eAAeF,UAAU"}

package/dist/Chips/ChipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.cjs","names":["ChipContentContainer","styled","div","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${COLORS.white};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_500};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${COLORS.neutral_600};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.white};\r\n      border: 2px solid ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      border: 2px solid ${COLORS.primary_200};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      border: 2px solid ${COLORS.primary_300};\r\n      color: ${COLORS.primary_800};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.critical_100};\r\n      color: ${COLORS.critical_600};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${COLORS.primary_300};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${COLORS.primary_300};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${COLORS.neutral_100} !important;\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;;AAGA;AAKA;AAA8H;AAEvH,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,2KAK7C;AAAC;AAEK,IAAMC,WAAW,GAAGF,yBAAM,CAACC,GAAG,ywBACjC,IAAAE,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAAC;AAEK,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,inGAMjCC,WAAW,EAIT,IAAAK,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDH,WAAW,EAIT,IAAAM,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDI,mBAAW,EAIJC,cAAM,CAACC,KAAK,EAEnBT,WAAW,EACSQ,cAAM,CAACE,WAAW,EAKtCV,WAAW,EACSQ,cAAM,CAACG,WAAW,EAKtCX,WAAW,EACSQ,cAAM,CAACI,WAAW,EAK/BJ,cAAM,CAACK,WAAW,EAEzBb,WAAW,EACSQ,cAAM,CAACC,KAAK,EACZD,cAAM,CAACM,WAAW,EAKtCd,WAAW,EACSQ,cAAM,CAACO,UAAU,EACjBP,cAAM,CAACQ,WAAW,EAC7BR,cAAM,CAACG,WAAW,EAK3BX,WAAW,EACSQ,cAAM,CAACS,WAAW,EAClBT,cAAM,CAACU,WAAW,EAC7BV,cAAM,CAACI,WAAW,EAO3BZ,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSQ,cAAM,CAACW,YAAY,EAC9BX,cAAM,CAACY,YAAY,EAK5BpB,WAAW,EACGQ,cAAM,CAACa,YAAY,EACxBb,cAAM,CAACc,YAAY,EAK5BtB,WAAW,EACGQ,cAAM,CAACe,YAAY,EACxBf,cAAM,CAACgB,YAAY,EAK5BjB,mBAAW,EAIOC,cAAM,CAACG,WAAW,EAIlBH,cAAM,CAACI,WAAW,EAK7BJ,cAAM,CAACU,WAAW,EAKLV,cAAM,CAACa,YAAY,EAC9Bb,cAAM,CAACc,YAAY,EAIRd,cAAM,CAACe,YAAY,EAC9Bf,cAAM,CAACgB,YAAY,EAKnBhB,cAAM,CAACU,WAAW,EAO3BrB,oBAAoB,EAIpBG,WAAW,EAESQ,cAAM,CAACiB,WAAW,EAC7BjB,cAAM,CAACkB,WAAW,CAGhC;AAAC"}
+{"version":3,"file":"ChipStyles.cjs","names":["ChipContentContainer","styled","div","ChipContent","ComponentXSStyling","ComponentTextStyle","Bold","ChipContainer","ComponentSStyling","ComponentMStyling","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.default {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"mappings":";;;;;;;;AAGA;AAKA;AAA8H;AAEvH,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,2KAK7C;AAAC;AAEK,IAAMC,WAAW,GAAGF,yBAAM,CAACC,GAAG,ywBACjC,IAAAE,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAAC;AAEK,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,inGAMjCC,WAAW,EAIT,IAAAK,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDH,WAAW,EAIT,IAAAM,yBAAiB,EAACJ,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC,EAsBlDI,mBAAW,EAIJC,cAAM,CAACC,KAAK,EAEnBT,WAAW,EACSQ,cAAM,CAACE,WAAW,EAKtCV,WAAW,EACSQ,cAAM,CAACG,WAAW,EAKtCX,WAAW,EACSQ,cAAM,CAACI,WAAW,EAK/BJ,cAAM,CAACK,WAAW,EAEzBb,WAAW,EACSQ,cAAM,CAACC,KAAK,EACZD,cAAM,CAACM,WAAW,EAKtCd,WAAW,EACSQ,cAAM,CAACO,UAAU,EACjBP,cAAM,CAACQ,WAAW,EAC7BR,cAAM,CAACG,WAAW,EAK3BX,WAAW,EACSQ,cAAM,CAACS,WAAW,EAClBT,cAAM,CAACU,WAAW,EAC7BV,cAAM,CAACI,WAAW,EAO3BZ,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSQ,cAAM,CAACW,YAAY,EAC9BX,cAAM,CAACY,YAAY,EAK5BpB,WAAW,EACGQ,cAAM,CAACa,YAAY,EACxBb,cAAM,CAACc,YAAY,EAK5BtB,WAAW,EACGQ,cAAM,CAACe,YAAY,EACxBf,cAAM,CAACgB,YAAY,EAK5BjB,mBAAW,EAIOC,cAAM,CAACG,WAAW,EAIlBH,cAAM,CAACI,WAAW,EAK7BJ,cAAM,CAACU,WAAW,EAKLV,cAAM,CAACa,YAAY,EAC9Bb,cAAM,CAACc,YAAY,EAIRd,cAAM,CAACe,YAAY,EAC9Bf,cAAM,CAACgB,YAAY,EAKnBhB,cAAM,CAACU,WAAW,EAO3BrB,oBAAoB,EAIpBG,WAAW,EAESQ,cAAM,CAACiB,WAAW,EAC7BjB,cAAM,CAACkB,WAAW,CAGhC;AAAC"}

package/dist/Chips/ChipStyles.d.ts

@@ -1,3 +1,3 @@
-export declare const ChipContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Chips/ChipStyles.js

@@ -1,12 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
-/**
- * Import third-party libraries.
+/**
+ * Import third-party libraries.
  */
 import styled from 'styled-components';
 
-/**
- * Import custom style properties.
+/**
+ * Import custom style properties.
  */
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
 export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));

package/dist/Chips/ChipStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\n\r\n/**\r\n * Import custom style properties.\r\n */\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\r\n\r\nexport const ChipContentContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n  width: max-content;\r\n`;\r\n\r\nexport const ChipContent = styled.div`\r\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\r\n\r\n  position: relative;\r\n  display: flex;\r\n  gap: 4px;\r\n  align-items: center;\r\n  min-height: 24px;\r\n  box-sizing: border-box;\r\n  border-radius: 24px;\r\n  padding: 4px 12px;\r\n\r\n  .chip-icon {\r\n    height: 16px;\r\n    width: 16px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      height: 16px;\r\n      width: 16px;\r\n    }\r\n  }\r\n\r\n  .icon-left {\r\n    margin-left: -4px;\r\n  }\r\n\r\n  .icon-right {\r\n    margin-right: -4px;\r\n  }\r\n\r\n  .action-right {\r\n    position: absolute;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    height: 48px;\r\n    width: 48px;\r\n    right: -8px;\r\n  }\r\n\r\n  &.with-action-right {\r\n    position: relative;\r\n    padding-right: 28px;\r\n  }\r\n`;\r\n\r\nexport const ChipContainer = styled.div`\r\n  display: inline-block;\r\n  cursor: pointer;\r\n  position: relative;\r\n\r\n  &.medium {\r\n    ${ChipContent} {\r\n      gap: 6px;\r\n      padding: 10px 16px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 20px;\r\n        width: 20px;\r\n\r\n        svg {\r\n          height: 20px;\r\n          width: 20px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 38px;\r\n\r\n      .action-right {\r\n        right: -2px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ChipContent} {\r\n      gap: 8px;\r\n      padding: 12px 20px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      .chip-icon {\r\n        height: 24px;\r\n        width: 24px;\r\n\r\n        svg {\r\n          height: 24px;\r\n          width: 24px;\r\n        }\r\n      }\r\n    }\r\n\r\n    .with-action-right {\r\n      padding-right: 48px;\r\n\r\n      .action-right {\r\n        right: 4px;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.interactive:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &.default {\r\n    color: ${COLORS.white};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_500};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.default:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &.outline {\r\n    color: ${COLORS.neutral_600};\r\n\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.white};\r\n      border: 2px solid ${COLORS.neutral_200};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_20};\r\n      border: 2px solid ${COLORS.primary_200};\r\n      color: ${COLORS.primary_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.outline:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.primary_100};\r\n      border: 2px solid ${COLORS.primary_300};\r\n      color: ${COLORS.primary_800};\r\n      box-shadow: none;\r\n    }\r\n  }\r\n\r\n  //account for border\r\n  &.small.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 2px 10px;\r\n    }\r\n  }\r\n\r\n  &.medium.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 8px 14px;\r\n    }\r\n  }\r\n\r\n  &.large.outline:not(.disabled) {\r\n    ${ChipContent} {\r\n      padding: 10px 18px;\r\n    }\r\n  }\r\n\r\n  &.invalid {\r\n    ${ChipContent} {\r\n      background-color: ${COLORS.critical_100};\r\n      color: ${COLORS.critical_600};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:hover:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n  }\r\n\r\n  &.interactive.invalid:active:not(.action-within) {\r\n    ${ChipContent} {\r\n      background: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n  }\r\n\r\n  .action-right:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  .action-right:hover .chip-icon {\r\n    background-color: ${COLORS.primary_700};\r\n  }\r\n\r\n  .action-right:active .chip-icon {\r\n    background-color: ${COLORS.primary_800};\r\n  }\r\n\r\n  .action-right.disabled .chip-icon {\r\n    background-color: transparent;\r\n    color: ${COLORS.primary_300};\r\n  }\r\n\r\n  &.invalid {\r\n    .action-right:hover .chip-icon {\r\n      background-color: ${COLORS.critical_200};\r\n      color: ${COLORS.critical_700};\r\n    }\r\n\r\n    .action-right:active .chip-icon {\r\n      background-color: ${COLORS.critical_300};\r\n      color: ${COLORS.critical_800};\r\n    }\r\n\r\n    .action-right.disabled .chip-icon {\r\n      background-color: transparent;\r\n      color: ${COLORS.primary_300};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${ChipContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    ${ChipContent} {\r\n      border: none !important;\r\n      background-color: ${COLORS.neutral_100} !important;\r\n      color: ${COLORS.neutral_300} !important;\r\n    }\r\n  }\r\n`;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AAE7H,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG,6JAK7C;AAED,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAG,2vBACjCH,kBAAkB,CAACD,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAED,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAG,mmGAMjCC,WAAW,EAITN,iBAAiB,CAACC,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,EAsBlDD,WAAW,EAITP,iBAAiB,CAACE,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,EAsBlDJ,WAAW,EAIJL,MAAM,CAACW,KAAK,EAEnBH,WAAW,EACSR,MAAM,CAACY,WAAW,EAKtCJ,WAAW,EACSR,MAAM,CAACa,WAAW,EAKtCL,WAAW,EACSR,MAAM,CAACc,WAAW,EAK/Bd,MAAM,CAACe,WAAW,EAEzBP,WAAW,EACSR,MAAM,CAACW,KAAK,EACZX,MAAM,CAACgB,WAAW,EAKtCR,WAAW,EACSR,MAAM,CAACiB,UAAU,EACjBjB,MAAM,CAACkB,WAAW,EAC7BlB,MAAM,CAACa,WAAW,EAK3BL,WAAW,EACSR,MAAM,CAACmB,WAAW,EAClBnB,MAAM,CAACoB,WAAW,EAC7BpB,MAAM,CAACc,WAAW,EAO3BN,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSR,MAAM,CAACqB,YAAY,EAC9BrB,MAAM,CAACsB,YAAY,EAK5Bd,WAAW,EACGR,MAAM,CAACuB,YAAY,EACxBvB,MAAM,CAACwB,YAAY,EAK5BhB,WAAW,EACGR,MAAM,CAACyB,YAAY,EACxBzB,MAAM,CAAC0B,YAAY,EAK5BrB,WAAW,EAIOL,MAAM,CAACa,WAAW,EAIlBb,MAAM,CAACc,WAAW,EAK7Bd,MAAM,CAACoB,WAAW,EAKLpB,MAAM,CAACuB,YAAY,EAC9BvB,MAAM,CAACwB,YAAY,EAIRxB,MAAM,CAACyB,YAAY,EAC9BzB,MAAM,CAAC0B,YAAY,EAKnB1B,MAAM,CAACoB,WAAW,EAO3Bd,oBAAoB,EAIpBE,WAAW,EAESR,MAAM,CAAC2B,WAAW,EAC7B3B,MAAM,CAAC4B,WAAW,CAGhC"}
+{"version":3,"file":"ChipStyles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"sources":["../../src/Chips/ChipStyles.ts"],"sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ${ChipContent} {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ${ChipContent} {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.default {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.outline {\n    color: ${COLORS.neutral_600};\n\n    ${ChipContent} {\n      background-color: ${COLORS.white};\n      border: 2px solid ${COLORS.neutral_200};\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_20};\n      border: 2px solid ${COLORS.primary_200};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_100};\n      border: 2px solid ${COLORS.primary_300};\n      color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n  }\n\n  .action-right:focus {\n    ${focusStyles}\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ${COLORS.primary_700};\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ${COLORS.primary_800};\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ${COLORS.primary_300};\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ${ChipContentContainer} {\n      pointer-events: none;\n    }\n\n    ${ChipContent} {\n      border: none !important;\n      background-color: ${COLORS.neutral_100} !important;\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,MAAM,MAAM,mBAAmB;;AAEtC;AACA;AACA;AACA,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,WAAW,QAAQ,WAAW;AAE7H,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAG,6JAK7C;AAED,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAG,2vBACjCH,kBAAkB,CAACD,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,CA4CpD;AAED,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAG,mmGAMjCC,WAAW,EAITN,iBAAiB,CAACC,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,EAsBlDD,WAAW,EAITP,iBAAiB,CAACE,kBAAkB,CAACM,IAAI,EAAE,IAAI,CAAC,EAsBlDJ,WAAW,EAIJL,MAAM,CAACW,KAAK,EAEnBH,WAAW,EACSR,MAAM,CAACY,WAAW,EAKtCJ,WAAW,EACSR,MAAM,CAACa,WAAW,EAKtCL,WAAW,EACSR,MAAM,CAACc,WAAW,EAK/Bd,MAAM,CAACe,WAAW,EAEzBP,WAAW,EACSR,MAAM,CAACW,KAAK,EACZX,MAAM,CAACgB,WAAW,EAKtCR,WAAW,EACSR,MAAM,CAACiB,UAAU,EACjBjB,MAAM,CAACkB,WAAW,EAC7BlB,MAAM,CAACa,WAAW,EAK3BL,WAAW,EACSR,MAAM,CAACmB,WAAW,EAClBnB,MAAM,CAACoB,WAAW,EAC7BpB,MAAM,CAACc,WAAW,EAO3BN,WAAW,EAMXA,WAAW,EAMXA,WAAW,EAMXA,WAAW,EACSR,MAAM,CAACqB,YAAY,EAC9BrB,MAAM,CAACsB,YAAY,EAK5Bd,WAAW,EACGR,MAAM,CAACuB,YAAY,EACxBvB,MAAM,CAACwB,YAAY,EAK5BhB,WAAW,EACGR,MAAM,CAACyB,YAAY,EACxBzB,MAAM,CAAC0B,YAAY,EAK5BrB,WAAW,EAIOL,MAAM,CAACa,WAAW,EAIlBb,MAAM,CAACc,WAAW,EAK7Bd,MAAM,CAACoB,WAAW,EAKLpB,MAAM,CAACuB,YAAY,EAC9BvB,MAAM,CAACwB,YAAY,EAIRxB,MAAM,CAACyB,YAAY,EAC9BzB,MAAM,CAAC0B,YAAY,EAKnB1B,MAAM,CAACoB,WAAW,EAO3Bd,oBAAoB,EAIpBE,WAAW,EAESR,MAAM,CAAC2B,WAAW,EAC7B3B,MAAM,CAAC4B,WAAW,CAGhC"}