@laerdal/life-react-components 1.9.8-dev.8.full → 1.9.9-dev.10

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

@@ -17,13 +17,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _typography = require("../styles/typography");
+var _typography = require("../../styles/typography");
 
-var _Checkbox = _interopRequireDefault(require("../InputFields/Checkbox"));
+var _Checkbox = _interopRequireDefault(require("../../InputFields/Checkbox"));
 
-var _Tag = require("../Tag");
+var _Tag = require("../../Tag");
 
-var _ = require("..");
+var _index = require("../../index");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
@@ -55,11 +55,10 @@ var CardRibbonContainer = _styledComponents.default.div(_templateObject4 || (_te
 
 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"])), _.COLORS.white);
+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;
-
-var CardTopSection = function CardTopSection(_ref) {
+var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
@@ -74,10 +73,13 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopSectionContainer, {
     disabled: disabled,
+    "data-testid": 'card-topSection',
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CardImg, {
       src: image
     }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CardCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        ref: ref,
         disabled: disabled,
         select: function select(selected) {
           return setSelected && setSelected(selected);
@@ -91,8 +93,9 @@ var CardTopSection = function CardTopSection(_ref) {
         icon: tagIcon
       })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
-      $backgroundColor: disabled ? _.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
+      $backgroundColor: disabled ? _index.COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentS, {
         color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
         textStyle: _typography.ComponentTextStyle.Regular,
@@ -100,19 +103,18 @@ var CardTopSection = function CardTopSection(_ref) {
       })]
     })]
   });
-};
-
+});
 CardTopSection.propTypes = {
   selected: _propTypes.default.bool,
   setSelected: _propTypes.default.func,
   tagLabel: _propTypes.default.string,
   tagIcon: _propTypes.default.node,
   highlightRibbonText: _propTypes.default.string,
-  highlightRibbonIcon: _propTypes.default.string,
+  highlightRibbonIcon: _propTypes.default.node,
   highlightRibbonContentColor: _propTypes.default.string,
   highlightRibbonBgColor: _propTypes.default.string,
   image: _propTypes.default.string,
-  disabled: _propTypes.default.bool.isRequired
+  disabled: _propTypes.default.bool
 };
 var _default = CardTopSection;
 exports.default = _default;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"names":["CardImg","styled","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","COLORS","white","CardTopSection","React","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","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';\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?: string;\n  disabled?: boolean;\n}\n\nexport const CardImg = styled.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\nexport const CardTopTagContainer = 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  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = 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 CardCheckboxContainer = 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'}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer 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        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TagVariants } from '../Tag';
+import { TagVariants } from '../../Tag';
 export interface CardTopSectionProps {
     selected?: boolean;
     setSelected?: (arg0: boolean) => void;
@@ -7,21 +7,21 @@ export interface CardTopSectionProps {
     tagIcon?: React.ReactNode;
     tagVariant?: TagVariants;
     highlightRibbonText?: string;
-    highlightRibbonIcon?: string;
+    highlightRibbonIcon?: React.ReactNode;
     highlightRibbonContentColor?: string;
     highlightRibbonBgColor?: string;
     image?: string;
-    disabled: boolean;
+    disabled?: boolean;
 }
 export declare const CardImg: import("styled-components").StyledComponent<"img", 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;
+    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.FunctionComponent<CardTopSectionProps>;
+declare const CardTopSection: React.ForwardRefExoticComponent<CardTopSectionProps & React.RefAttributes<HTMLDivElement>>;
 export default CardTopSection;

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

@@ -5,10 +5,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 
 import * as React from 'react';
 import styled from 'styled-components';
-import { ComponentS, ComponentTextStyle } from '../styles/typography';
-import Checkbox from '../InputFields/Checkbox';
-import { Tag } from '../Tag';
-import { COLORS } from '..';
+import { ComponentS, ComponentTextStyle } from '../../styles/typography';
+import Checkbox from '../../InputFields/Checkbox';
+import { Tag } from '../../Tag';
+import { COLORS } from '../../index';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var CardImg = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n"])));
@@ -22,8 +22,7 @@ export var CardRibbonContainer = styled.div(_templateObject4 || (_templateObject
   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);
-
-var CardTopSection = function CardTopSection(_ref) {
+var CardTopSection = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
@@ -38,10 +37,13 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
     disabled: disabled,
+    "data-testid": 'card-topSection',
     children: [/*#__PURE__*/_jsx(CardImg, {
       src: image
     }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
+      "data-testid": 'card-topSection-checkbox',
       children: /*#__PURE__*/_jsx(Checkbox, {
+        ref: ref,
         disabled: disabled,
         select: function select(selected) {
           return setSelected && setSelected(selected);
@@ -55,6 +57,7 @@ var CardTopSection = function CardTopSection(_ref) {
         icon: tagIcon
       })
     }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardRibbonContainer, {
+      "data-testid": 'card-topSection-ribbon',
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {
@@ -64,19 +67,18 @@ var CardTopSection = function CardTopSection(_ref) {
       })]
     })]
   });
-};
-
+});
 CardTopSection.propTypes = {
   selected: _pt.bool,
   setSelected: _pt.func,
   tagLabel: _pt.string,
   tagIcon: _pt.node,
   highlightRibbonText: _pt.string,
-  highlightRibbonIcon: _pt.string,
+  highlightRibbonIcon: _pt.node,
   highlightRibbonContentColor: _pt.string,
   highlightRibbonBgColor: _pt.string,
   image: _pt.string,
-  disabled: _pt.bool.isRequired
+  disabled: _pt.bool
 };
 export default CardTopSection;
 //# sourceMappingURL=CardTopSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","CardImg","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","forwardRef","ref","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","Regular"],"mappings":"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","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';\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?: string;\n  disabled?: boolean;\n}\n\nexport const CardImg = styled.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\nexport const CardTopTagContainer = 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  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nexport const CardRibbonContainer = 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 CardCheckboxContainer = 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'}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer data-testid={'card-topSection-checkbox'}>\n          <Checkbox ref={ref}\n                    disabled={disabled}\n                    select={(selected: boolean) => setSelected && setSelected(selected)}\n                    selected={selected || false}/>\n        </CardCheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <CardTopTagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </CardTopTagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <CardRibbonContainer 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        </CardRibbonContainer>\n      )}\n    </CardTopSectionContainer>\n  );\n});\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}

package/dist/Card/VerticalCard/index.cjs

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Card: true,
+  CardBottomSection: true,
+  CardMiddleSection: true,
+  CardTopSection: true
+};
+Object.defineProperty(exports, "Card", {
+  enumerable: true,
+  get: function get() {
+    return _Card.default;
+  }
+});
+Object.defineProperty(exports, "CardBottomSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardBottomSection.default;
+  }
+});
+Object.defineProperty(exports, "CardMiddleSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardMiddleSection.default;
+  }
+});
+Object.defineProperty(exports, "CardTopSection", {
+  enumerable: true,
+  get: function get() {
+    return _CardTopSection.default;
+  }
+});
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
+
+Object.keys(_CardBottomSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardBottomSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardBottomSection[key];
+    }
+  });
+});
+
+var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
+
+Object.keys(_CardMiddleSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardMiddleSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardMiddleSection[key];
+    }
+  });
+});
+
+var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
+
+Object.keys(_CardTopSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardTopSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardTopSection[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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"],"file":"index.cjs"}

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

@@ -0,0 +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';

package/dist/Card/VerticalCard/index.js

@@ -0,0 +1,8 @@
+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';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Card/VerticalCard/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AAEA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,cAAc,kBAAd","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"],"file":"index.js"}

package/dist/Card/index.cjs

@@ -1,88 +1,32 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  Card: true,
-  CardBottomSection: true,
-  CardMiddleSection: true,
-  CardTopSection: true
-};
-Object.defineProperty(exports, "Card", {
-  enumerable: true,
-  get: function get() {
-    return _Card.default;
-  }
-});
-Object.defineProperty(exports, "CardBottomSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardBottomSection.default;
-  }
-});
-Object.defineProperty(exports, "CardMiddleSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardMiddleSection.default;
-  }
-});
-Object.defineProperty(exports, "CardTopSection", {
-  enumerable: true,
-  get: function get() {
-    return _CardTopSection.default;
-  }
-});
-
-var _Card = _interopRequireDefault(require("./Card"));
-
-var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
-
-Object.keys(_CardBottomSection).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardBottomSection[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _CardBottomSection[key];
-    }
-  });
-});
 
-var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
+var _VerticalCard = require("./VerticalCard");
 
-Object.keys(_CardMiddleSection).forEach(function (key) {
+Object.keys(_VerticalCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardMiddleSection[key]) return;
+  if (key in exports && exports[key] === _VerticalCard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CardMiddleSection[key];
+      return _VerticalCard[key];
     }
   });
 });
 
-var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
+var _HorizontalCard = require("./HorizontalCard");
 
-Object.keys(_CardTopSection).forEach(function (key) {
+Object.keys(_HorizontalCard).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _CardTopSection[key]) return;
+  if (key in exports && exports[key] === _HorizontalCard[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CardTopSection[key];
+      return _HorizontalCard[key];
     }
   });
 });
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.cjs.map

package/dist/Card/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAEA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Card/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"file":"index.cjs"}

package/dist/Card/index.d.ts

@@ -1,7 +1,2 @@
-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 * from './VerticalCard';
+export * from './HorizontalCard';

package/dist/Card/index.js

@@ -1,8 +1,3 @@
-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 * from './VerticalCard';
+export * from './HorizontalCard';
 //# sourceMappingURL=index.js.map

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/index.tsx"],"names":["default","Card","CardBottomSection","CardMiddleSection","CardTopSection"],"mappings":"AAAA,SAAQA,OAAO,IAAIC,IAAnB,QAA8B,QAA9B;AAEA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,cAAc,qBAAd;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC;AACA,cAAc,kBAAd","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"],"file":"index.js"}
+{"version":3,"sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './VerticalCard';\nexport * from './HorizontalCard';\n"],"file":"index.js"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -140,6 +140,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -178,6 +179,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,4GAAb;;AAIA,IAAMC,OAAO,GAAGF,0BAAOC,GAAV,wHAAb;;AAKO,IAAME,mBAAmB,GAAGH,0BAAOC,GAAV,sMAAzB;;;;AASA,IAAMG,yBAAyB,GAAGJ,0BAAOC,GAAV,+fAclC,8BAAiBI,YAAKC,KAAtB,CAdkC,CAA/B;;;;AAyBA,IAAMC,WAAW,GAAGP,0BAAOQ,KAAV,6SAUpB,+BAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAVoB,EAWbC,eAAOC,KAXM,EAclB,+BAAkBH,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CAdkB,CAAjB;;;;AAkBA,IAAMC,kBAAkB,GAAGf,0BAAOC,GAAV,kqCAKCU,eAAOK,WALR,EAMTL,eAAOM,KANE,EAa3B,+BAAkBR,2BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAb2B,EAkBzBL,WAlByB,EAmBvB,+BAAkBE,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CAnBuB,EA2BzBP,WA3ByB,EA4BvB,+BAAkBE,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CA5BuB,EAiCzBV,yBAjCyB,EA2CzBc,mBA3CyB,EA+CGP,eAAOQ,WA/CV,EAmDGR,eAAOS,WAnDV,EAyDGT,eAAOU,YAzDV,EA6DzBjB,yBA7DyB,EAkEGO,eAAOW,WAlEV,EAoElBX,eAAOY,WApEW,CAAxB;;;;AA4FA,IAAMC,cAAc,gBAAGC,eAAMC,UAAN,CAC5B,gBAkBEC,GAlBF,EAmBK;AAAA,MAjBDC,OAiBC,QAjBDA,OAiBC;AAAA,MAhBDC,KAgBC,QAhBDA,KAgBC;AAAA,2BAfDC,QAeC;AAAA,MAfDA,QAeC,8BAfU,KAeV;AAAA,MAdDC,WAcC,QAdDA,WAcC;AAAA,MAbDC,cAaC,QAbDA,cAaC;AAAA,4BAZDC,SAYC;AAAA,MAZDA,SAYC,+BAZW,IAYX;AAAA,uBAXDC,IAWC;AAAA,MAXDA,IAWC,0BAXM7B,YAAK8B,MAWX;AAAA,MAVDC,iBAUC,QAVDA,iBAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,MARDC,YAQC,QARDA,YAQC;AAAA,MAPDC,kBAOC,QAPDA,kBAOC;AAAA,MANDC,cAMC,QANDA,cAMC;AAAA,MALDC,kBAKC,QALDA,kBAKC;AAAA,MAJDC,UAIC,QAJDA,UAIC;AAAA,MAHDC,QAGC,QAHDA,QAGC;;AACH,MAAMC,YAAY,GAAGnB,eAAMoB,MAAN,CAA6B,IAA7B,CAArB;;AACA,MAAMC,QAAQ,GAAG,gCAAmB,CAACF,YAAD,CAAnB,EAAmCjB,GAAnC,CAAjB;AAEA;AACJ;AACA;;AACIF,iBAAMsB,SAAN,CAAgB,YAAM;AACpB,QAAID,QAAQ,CAACE,OAAT,IAAoBC,QAAQ,CAACC,aAAT,KAA2BJ,QAAQ,CAACE,OAA5D,EAAqE;AACnEF,MAAAA,QAAQ,CAACE,OAAT,CAAiBG,cAAjB,CAAgC;AAC9BC,QAAAA,KAAK,EAAE,SADuB;AAE9BC,QAAAA,MAAM,EAAE;AAFsB,OAAhC;AAID;AACF,GAPD,EAOG,CAACT,YAAD,EAAeE,QAAf,EAAyBjB,KAAzB,CAPH;AASA;AACJ;AACA;;;AACI,MAAMyB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAA8C;AAAA;;AACvE,QAAIA,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyB,uBAACV,QAAQ,CAACE,OAAV,8CAAC,kBAAkBS,KAAnB,CAAzB,IAAqD,CAACF,CAAC,CAACG,MAAxD,IAAkE7B,KAAK,CAAC8B,MAAN,GAAe,CAArF,EAAwF;AACtFrB,MAAAA,YAAY,CAACT,KAAK,CAACA,KAAK,CAAC8B,MAAN,GAAe,CAAhB,CAAN,EAA0B9B,KAAK,CAAC8B,MAAN,GAAe,CAAzC,CAAZ;AACD,KAFD,MAEO;AACLnB,MAAAA,cAAc,CAACe,CAAD,CAAd;AACD;AACF,GAND;;AAQA,MAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAaC,IAAb,EAA6BC,KAA7B,EAA+C;AAAA;;AACtEzB,IAAAA,YAAY,CAACwB,IAAD,EAAOC,KAAP,CAAZ;AACA,0BAAAjB,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAAEC,MAAAA,YAAY,EAAEJ,KAAK,CAACK,MAAN,KAAiB;AAAjC,KAAxB;AACD,GAHD;;AAKA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACZ,CAAD,EAAY;AAAA;;AACnChB,IAAAA,kBAAkB,CAAC,EAAD,CAAlB;AACA,0BAAAO,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAAEC,MAAAA,YAAY,EAAE,CAAAV,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEW,MAAH,MAAc;AAA9B,KAAxB;AACD,GAHD;;AAKA,MAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,CAAD,EAA4B;AACzD,QAAI,CAACX,YAAY,CAACI,OAAd,IAA0BO,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyBD,CAAC,CAACC,GAAF,KAAU,YAAjE,EAAgF;AAEhF,QAAM3B,KAAK,GAAGe,YAAY,CAACI,OAAb,CAAqBqB,gBAArB,CAAsC,gBAAtC,CAAd;AACA,QAAMC,YAAY,GAAGC,KAAK,CAACC,IAAN,CAAW3C,KAAX,EAAkB4C,OAAlB,CAA0BlB,CAAC,CAACmB,MAA5B,CAArB;AACA,QAAMC,SAAS,GAAGpB,CAAC,CAACC,GAAF,KAAU,WAAV,GAAwB,CAAC,CAAzB,GAA6B,CAA/C;AACA,QAAMM,IAAI,GAAGjC,KAAK,CAACyC,YAAY,GAAGK,SAAhB,CAAlB;AACAb,IAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,KAAN,CAAY;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAAZ;AAEAxB,IAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,KAAD,CAAxC;AACD,GAVD;;AAYA,MAAMmC,GAAG,aAAM3C,SAAS,GAAG,WAAH,GAAiB,EAAhC,cAAsCG,iBAAiB,GAAG,SAAH,GAAe,EAAtE,cAA4EF,IAA5E,cAAoFG,OAAO,GAAG,SAAH,GAAe,EAA1G,cAAgHP,QAAQ,GAAG,UAAH,GAAgB,EAAxI,CAAT;AAEA,sBACE,sBAAC,OAAD;AAAA,4BACE,qBAAC,kBAAD;AAAoB,MAAA,GAAG,EAAEc,YAAzB;AAAuC,MAAA,SAAS,EAAEwB,sBAAlD;AAA0E,MAAA,OAAO,EAAE;AAAA;;AAAA,eAAM,CAACtC,QAAD,2BAAagB,QAAQ,CAACE,OAAtB,uDAAa,mBAAkBgB,KAAlB,EAAb,CAAN;AAAA,OAAnF;AAAiI,MAAA,SAAS,EAAEY,GAA5I;AAAA,6BACE,sBAAC,yBAAD;AAAA,mBACG/C,KADH,aACGA,KADH,uBACGA,KAAK,CAAEgD,GAAP,CAAW,UAACC,IAAD,EAAiBf,KAAjB;AAAA,8BACV,qBAAC,gBAAD;AAEE,YAAA,IAAI,EAAEe,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,IAFd;AAGE,YAAA,IAAI,EAAE7C,IAHR;AAIE,YAAA,QAAQ,EAAE4C,IAAI,CAAChD,QAAL,IAAiBA,QAJ7B;AAKE,YAAA,OAAO,EAAEgD,IAAI,CAACE,OAAL,IAAgBC,cAAOC,OALlC;AAME,YAAA,IAAI,EAAEJ,IAAI,CAACK,KANb;AAOE,YAAA,QAAQ,EAAE,kBAAC5B,CAAD;AAAA,qBAAOK,gBAAgB,CAACL,CAAD,EAAIuB,IAAJ,EAAUf,KAAV,CAAvB;AAAA;AAPZ,4BACeA,KADf,EADU;AAAA,SAAX,CADH,eAYE,sBAAC,mBAAD;AAAA,kCACE,qBAAC,WAAD;AACE,YAAA,GAAG,EAAEjB,QADP;AAEE,YAAA,IAAI,EAAC,MAFP;AAGE,YAAA,EAAE,EAAElB,OAHN;AAIE,YAAA,QAAQ,EAAEe,QAJZ;AAKE,YAAA,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL5B;AAME,YAAA,KAAK,EAAEY,UANT;AAOE,YAAA,QAAQ,EAAE,kBAACa,CAAD;AAAA,qBAAOhB,kBAAkB,CAACgB,CAAC,CAACmB,MAAF,CAASjB,KAAV,CAAzB;AAAA,aAPZ;AAQE,YAAA,SAAS,EAAEH,kBARb;AASE,YAAA,WAAW,EAAE,CAAAzB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAE8B,MAAP,MAAkB,CAAlB,GAAsB5B,WAAtB,GAAoCC,cAAc,IAAI,EATrE;AAUE,YAAA,OAAO,EAAE,iBAACuB,CAAD,EAAO;AACdA,cAAAA,CAAC,CAAC6B,eAAF;AACA3C,cAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,IAAD,CAAxC;AACD;AAbH,YADF,EAgBGC,UAAU,IAAI,CAACZ,QAAf,iBACC,qBAAC,kBAAD;AACE,YAAA,MAAM,EAAEqC,gBADV;AAEE,YAAA,GAAG,EAAE,aAACxC,KAAD,EAAS;AACZA,cAAAA,KAAG,SAAH,IAAAA,KAAG,WAAH,YAAAA,KAAG,CAAEwB,cAAL,CAAoB;AAClBC,gBAAAA,KAAK,EAAE,SADW;AAElBC,gBAAAA,MAAM,EAAE;AAFU,eAApB;AAID,aAPH;AAQE,YAAA,wBAAwB,EAAE,IAR5B;AASE,YAAA,KAAK,EAAE,UATT;AAUE,YAAA,KAAK,EAAE;AAAEgC,cAAAA,UAAU,EAAE;AAAd,aAVT;AAWE,YAAA,OAAO,EAAE,WAXX;AAAA,mCAYE,qBAAC,kBAAD,CAAa,KAAb;AAZF,YAjBJ,EAiCGhD,OAAO,iBACN,qBAAC,OAAD;AAAS,YAAA,SAAS,EAAEH,IAApB;AAAA,mCACE,qBAAC,kCAAD;AAAkB,cAAA,IAAI,EAAE7B,YAAKC,KAA7B;AAAoC,cAAA,KAAK,EAAEK,eAAOG;AAAlD;AADF,YAlCJ;AAAA,UAZF;AAAA;AADF,MADF,EAuDGsB,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEzB,eAAO2E;AAAhC,QADF,eAEE;AAAA,kBAAOlD;AAAP,QAFF;AAAA,MAxDJ;AAAA,IADF;AAgED,CAvI2B,CAAvB;;;;AAnBLR,EAAAA,O;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,S;AAEAI,EAAAA,O;AACAM,EAAAA,Q;AAEAP,EAAAA,iB;AAEAE,EAAAA,Y;AACAI,EAAAA,U;AACAH,EAAAA,kB;AACAC,EAAAA,c;AACAC,EAAAA,kB","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\nimport styled from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\n        <ChipInputContainer ref={containerRef} onKeyDown={handleContainerKeyDown} onClick={() => !disabled && inputRef.current?.focus()} className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{ marginLeft: '-8px' }}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear />\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.cjs"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","document","activeElement","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","States","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\nimport styled from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\n  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\n                tabIndex={disabled ? -1 : 0}\n                value={inputValue}\n                onChange={(e) => onInputValueChange(e.target.value)}\n                onKeyDown={handleInputKeyDown}\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\n                onClick={(e) => {\n                  e.stopPropagation();\n                  onActivationChange && onActivationChange(true);\n                }}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  action={handleInputClear}\n                  ref={(ref) => {\n                    ref?.scrollIntoView({\n                      block: 'nearest',\n                      inline: 'nearest',\n                    });\n                  }}\n                  useTransparentBackground={true}\n                  shape={'circular'}\n                  style={{ marginLeft: '-8px' }}\n                  variant={'secondary'}>\n                  <SystemIcons.Clear />\n                </IconButton>\n              )}\n\n              {loading && (\n                <Loading className={size}>\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n                </Loading>\n              )}\n            </ChipInputBoundItems>\n          </ChipInputContentContainer>\n        </ChipInputContainer>\n        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400} />\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"file":"ChipInputField.cjs"}

package/dist/ChipsInput/ChipInputField.js

@@ -102,6 +102,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -140,6 +141,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({