@laerdal/life-react-components 1.7.0-dev.18 → 1.7.0-dev.19

package/dist/Card/CardTopSection.js

@@ -11,17 +11,17 @@ import { Tag } from '../Tag';
 import { COLORS } from '..';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Img = 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"])));
-var TagContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
-var Container = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
+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"])));
+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 CardTopSectionContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n"])), function (props) {
   return props.disabled ? "\n  img, svg {\n    filter: grayscale(100%);\n  }" : '';
 });
-var RibbonContainer = 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 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) {
   return props.$backgroundColor;
 }, function (props) {
   return props.$color;
 });
-var CheckboxContainer = 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 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 selected = _ref.selected,
@@ -36,11 +36,11 @@ var CardTopSection = function CardTopSection(_ref) {
       highlightRibbonContentColor = _ref.highlightRibbonContentColor,
       highlightRibbonBgColor = _ref.highlightRibbonBgColor,
       disabled = _ref.disabled;
-  return /*#__PURE__*/_jsxs(Container, {
+  return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
     disabled: disabled,
-    children: [/*#__PURE__*/_jsx(Img, {
+    children: [/*#__PURE__*/_jsx(CardImg, {
       src: image
-    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
       children: /*#__PURE__*/_jsx(Checkbox, {
         disabled: disabled,
         select: function select(selected) {
@@ -48,13 +48,13 @@ var CardTopSection = function CardTopSection(_ref) {
         },
         selected: selected || false
       })
-    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(TagContainer, {
+    }), (tagLabel || tagIcon) && /*#__PURE__*/_jsx(CardTopTagContainer, {
       children: /*#__PURE__*/_jsx(Tag, {
         label: tagLabel,
         variant: tagVariant,
         icon: tagIcon
       })
-    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(RibbonContainer, {
+    }), (highlightRibbonIcon || highlightRibbonText) && /*#__PURE__*/_jsxs(CardRibbonContainer, {
       $color: highlightRibbonContentColor !== null && highlightRibbonContentColor !== void 0 ? highlightRibbonContentColor : '',
       $backgroundColor: disabled ? COLORS.neutral_300 : highlightRibbonBgColor !== null && highlightRibbonBgColor !== void 0 ? highlightRibbonBgColor : '',
       children: [highlightRibbonIcon, highlightRibbonText && /*#__PURE__*/_jsx(ComponentS, {

package/dist/Card/CardTopSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","Img","img","TagContainer","div","Container","props","disabled","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","Regular"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,UAAR,EAAoBC,kBAApB,QAA6C,sBAA7C;AACA,OAAOC,QAAP,MAAqB,yBAArB;AACA,SAAQC,GAAR,QAA+B,QAA/B;AAEA,SAAQC,MAAR,QAAqB,IAArB;;;AAgBA,IAAMC,GAAG,GAAGN,MAAM,CAACO,GAAV,+LAAT;AAQA,IAAMC,YAAY,GAAGR,MAAM,CAACS,GAAV,4JAAlB;AAQA,IAAMC,SAAS,GAAGV,MAAM,CAACS,GAAV,mKAMX,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CANM,CAAf;AAYA,IAAMC,eAAe,GAAGb,MAAM,CAACS,GAAV,sbAEC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFN,EAcR,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdG,CAArB;AAsBA,IAAMC,iBAAiB,GAAGhB,MAAM,CAACS,GAAV,gMAOCJ,MAAM,CAACY,KAPR,CAAvB;;AAWA,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAY4B;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,OAOyB,QAPzBA,OAOyB;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,UAMY;AAAA,MALzBC,mBAKyB,QALzBA,mBAKyB;AAAA,MAJzBC,mBAIyB,QAJzBA,mBAIyB;AAAA,MAHzBC,2BAGyB,QAHzBA,2BAGyB;AAAA,MAFzBC,sBAEyB,QAFzBA,sBAEyB;AAAA,MADzBhB,QACyB,QADzBA,QACyB;AAC/F,sBACE,MAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAAA,4BACE,KAAC,GAAD;AAAK,MAAA,GAAG,EAAES;AAAV,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,KAAC,iBAAD;AAAA,6BACE,KAAC,QAAD;AAAU,QAAA,QAAQ,EAAER,QAApB;AAA8B,QAAA,MAAM,EAAE,gBAACO,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAAtC;AAAmG,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAAzH;AADF,MAHJ,EAOG,CAACG,QAAQ,IAAIC,OAAb,kBACC,KAAC,YAAD;AAAA,6BACE,KAAC,GAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MARJ,EAYG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,MAAC,eAAD;AAAiB,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAxD;AACiB,MAAA,gBAAgB,EAAEf,QAAQ,GAAGP,MAAM,CAACwB,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EAD7F;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,KAAC,UAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAEzB,kBAAkB,CAAC4B,OAApF;AAAA,kBACGJ;AADH,QAJJ;AAAA,MAbJ;AAAA,IADF;AA0BD,CAvCD;;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAT,EAAAA,Q;;AAyGF,eAAeM,cAAf","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 '..';\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?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = 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\nconst TagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nconst Container = 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\nconst RibbonContainer = 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\nconst CheckboxContainer = 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.FunctionComponent<CardTopSectionProps> = ({\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) => {\n  return (\n    <Container disabled={disabled}>\n      <Img src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $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        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","CardImg","img","CardTopTagContainer","div","CardTopSectionContainer","props","disabled","CardRibbonContainer","$backgroundColor","$color","CardCheckboxContainer","white","CardTopSection","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 '..';\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?: string;\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.FunctionComponent<CardTopSectionProps> = ({\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) => {\n  return (\n    <CardTopSectionContainer disabled={disabled}>\n      <CardImg src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CardCheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} 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 $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/index.cjs

@@ -2,9 +2,17 @@
 
 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() {
@@ -32,9 +40,49 @@ Object.defineProperty(exports, "CardTopSection", {
 
 var _Card = _interopRequireDefault(require("./Card"));
 
-var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+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];
+    }
+  });
+});
 
-var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+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); }
 
-var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+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;;AACA;;AACA;;AACA","sourcesContent":["export {default as Card} from './Card';\nexport {default as CardBottomSection} from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\n"],"file":"index.cjs"}
+{"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"}

package/dist/Card/index.d.ts

@@ -1,4 +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/index.js

@@ -1,5 +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/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;AACA,SAAQD,OAAO,IAAIE,iBAAnB,QAA2C,qBAA3C;AACA,SAAQF,OAAO,IAAIG,iBAAnB,QAA2C,qBAA3C;AACA,SAAQH,OAAO,IAAII,cAAnB,QAAwC,kBAAxC","sourcesContent":["export {default as Card} from './Card';\nexport {default as CardBottomSection} from './CardBottomSection';\nexport {default as CardMiddleSection} from './CardMiddleSection';\nexport {default as CardTopSection} from './CardTopSection';\n"],"file":"index.js"}
+{"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"}

package/dist/Chips/ChipStyles.cjs

@@ -23,7 +23,7 @@ var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateOb
 
 exports.ChipContent = ChipContent;
 
-var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\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    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\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    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\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    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\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    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 
 exports.ChipContainer = ChipContainer;
 //# sourceMappingURL=ChipStyles.cjs.map

package/dist/Chips/ChipStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","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"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,ywBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AA+CA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,8mGAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA0DpBE,mBA1DoB,EA8DbC,eAAOC,KA9DM,EAgEpBN,WAhEoB,EAiEAK,eAAOE,WAjEP,EAsEpBP,WAtEoB,EAuEAK,eAAOG,WAvEP,EA4EpBR,WA5EoB,EA6EAK,eAAOI,WA7EP,EAkFbJ,eAAOK,WAlFM,EAoFpBV,WApFoB,EAqFAK,eAAOC,KArFP,EAsFAD,eAAOM,WAtFP,EA2FpBX,WA3FoB,EA4FAK,eAAOO,UA5FP,EA6FAP,eAAOQ,WA7FP,EA8FXR,eAAOG,WA9FI,EAmGpBR,WAnGoB,EAoGAK,eAAOS,WApGP,EAqGAT,eAAOU,WArGP,EAsGXV,eAAOI,WAtGI,EA6GpBT,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAK,eAAOW,YAhIP,EAiIXX,eAAOY,YAjII,EAsIpBjB,WAtIoB,EAuINK,eAAOa,YAvID,EAwIXb,eAAOc,YAxII,EA6IpBnB,WA7IoB,EA8INK,eAAOe,YA9ID,EA+IXf,eAAOgB,YA/II,EAoJpBjB,mBApJoB,EAwJFC,eAAOG,WAxJL,EA4JFH,eAAOI,WA5JL,EAiKbJ,eAAOU,WAjKM,EAsKAV,eAAOa,YAtKP,EAuKXb,eAAOc,YAvKI,EA2KAd,eAAOe,YA3KP,EA4KXf,eAAOgB,YA5KI,EAiLXhB,eAAOU,WAjLI,EAwLpBlB,oBAxLoB,EA4LpBG,WA5LoB,EA8LAK,eAAOiB,WA9LP,EA+LXjB,eAAOkB,WA/LI,CAAnB","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  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal: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"],"file":"ChipStyles.cjs"}
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","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"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,ywBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AA+CA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,smGAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA0DpBE,mBA1DoB,EA8DbC,eAAOC,KA9DM,EAgEpBN,WAhEoB,EAiEAK,eAAOE,WAjEP,EAsEpBP,WAtEoB,EAuEAK,eAAOG,WAvEP,EA4EpBR,WA5EoB,EA6EAK,eAAOI,WA7EP,EAkFbJ,eAAOK,WAlFM,EAoFpBV,WApFoB,EAqFAK,eAAOC,KArFP,EAsFAD,eAAOM,WAtFP,EA2FpBX,WA3FoB,EA4FAK,eAAOO,UA5FP,EA6FAP,eAAOQ,WA7FP,EA8FXR,eAAOG,WA9FI,EAmGpBR,WAnGoB,EAoGAK,eAAOS,WApGP,EAqGAT,eAAOU,WArGP,EAsGXV,eAAOI,WAtGI,EA6GpBT,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAK,eAAOW,YAhIP,EAiIXX,eAAOY,YAjII,EAsIpBjB,WAtIoB,EAuINK,eAAOa,YAvID,EAwIXb,eAAOc,YAxII,EA6IpBnB,WA7IoB,EA8INK,eAAOe,YA9ID,EA+IXf,eAAOgB,YA/II,EAoJpBjB,mBApJoB,EAwJFC,eAAOG,WAxJL,EA4JFH,eAAOI,WA5JL,EAiKbJ,eAAOU,WAjKM,EAsKAV,eAAOa,YAtKP,EAuKXb,eAAOc,YAvKI,EA2KAd,eAAOe,YA3KP,EA4KXf,eAAOgB,YA5KI,EAiLXhB,eAAOU,WAjLI,EAwLpBlB,oBAxLoB,EA4LpBG,WA5LoB,EA8LAK,eAAOiB,WA9LP,EA+LXjB,eAAOkB,WA/LI,CAAnB","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  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal: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  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.error: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  &.error {\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"],"file":"ChipStyles.cjs"}

package/dist/Chips/ChipStyles.js

@@ -13,5 +13,5 @@ import styled from 'styled-components';
 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"])));
 export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\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"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\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    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\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    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
+export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\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    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\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    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.error {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
 //# sourceMappingURL=ChipStyles.js.map

package/dist/Chips/ChipStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"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"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,kBAA3E,EAA+FC,WAA/F,QAAkH,WAAlH;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AA+CP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,gmGAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAgCpBD,WAhCoB,EAoClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CApCC,EA0DpBJ,WA1DoB,EA8DbL,MAAM,CAACW,KA9DM,EAgEpBH,WAhEoB,EAiEAR,MAAM,CAACY,WAjEP,EAsEpBJ,WAtEoB,EAuEAR,MAAM,CAACa,WAvEP,EA4EpBL,WA5EoB,EA6EAR,MAAM,CAACc,WA7EP,EAkFbd,MAAM,CAACe,WAlFM,EAoFpBP,WApFoB,EAqFAR,MAAM,CAACW,KArFP,EAsFAX,MAAM,CAACgB,WAtFP,EA2FpBR,WA3FoB,EA4FAR,MAAM,CAACiB,UA5FP,EA6FAjB,MAAM,CAACkB,WA7FP,EA8FXlB,MAAM,CAACa,WA9FI,EAmGpBL,WAnGoB,EAoGAR,MAAM,CAACmB,WApGP,EAqGAnB,MAAM,CAACoB,WArGP,EAsGXpB,MAAM,CAACc,WAtGI,EA6GpBN,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAR,MAAM,CAACqB,YAhIP,EAiIXrB,MAAM,CAACsB,YAjII,EAsIpBd,WAtIoB,EAuINR,MAAM,CAACuB,YAvID,EAwIXvB,MAAM,CAACwB,YAxII,EA6IpBhB,WA7IoB,EA8INR,MAAM,CAACyB,YA9ID,EA+IXzB,MAAM,CAAC0B,YA/II,EAoJpBrB,WApJoB,EAwJFL,MAAM,CAACa,WAxJL,EA4JFb,MAAM,CAACc,WA5JL,EAiKbd,MAAM,CAACoB,WAjKM,EAsKApB,MAAM,CAACuB,YAtKP,EAuKXvB,MAAM,CAACwB,YAvKI,EA2KAxB,MAAM,CAACyB,YA3KP,EA4KXzB,MAAM,CAAC0B,YA5KI,EAiLX1B,MAAM,CAACoB,WAjLI,EAwLpBd,oBAxLoB,EA4LpBE,WA5LoB,EA8LAR,MAAM,CAAC2B,WA9LP,EA+LX3B,MAAM,CAAC4B,WA/LI,CAAnB","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  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal: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"],"file":"ChipStyles.js"}
+{"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"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"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,kBAA3E,EAA+FC,WAA/F,QAAkH,WAAlH;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AA+CP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,wlGAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAgCpBD,WAhCoB,EAoClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CApCC,EA0DpBJ,WA1DoB,EA8DbL,MAAM,CAACW,KA9DM,EAgEpBH,WAhEoB,EAiEAR,MAAM,CAACY,WAjEP,EAsEpBJ,WAtEoB,EAuEAR,MAAM,CAACa,WAvEP,EA4EpBL,WA5EoB,EA6EAR,MAAM,CAACc,WA7EP,EAkFbd,MAAM,CAACe,WAlFM,EAoFpBP,WApFoB,EAqFAR,MAAM,CAACW,KArFP,EAsFAX,MAAM,CAACgB,WAtFP,EA2FpBR,WA3FoB,EA4FAR,MAAM,CAACiB,UA5FP,EA6FAjB,MAAM,CAACkB,WA7FP,EA8FXlB,MAAM,CAACa,WA9FI,EAmGpBL,WAnGoB,EAoGAR,MAAM,CAACmB,WApGP,EAqGAnB,MAAM,CAACoB,WArGP,EAsGXpB,MAAM,CAACc,WAtGI,EA6GpBN,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAR,MAAM,CAACqB,YAhIP,EAiIXrB,MAAM,CAACsB,YAjII,EAsIpBd,WAtIoB,EAuINR,MAAM,CAACuB,YAvID,EAwIXvB,MAAM,CAACwB,YAxII,EA6IpBhB,WA7IoB,EA8INR,MAAM,CAACyB,YA9ID,EA+IXzB,MAAM,CAAC0B,YA/II,EAoJpBrB,WApJoB,EAwJFL,MAAM,CAACa,WAxJL,EA4JFb,MAAM,CAACc,WA5JL,EAiKbd,MAAM,CAACoB,WAjKM,EAsKApB,MAAM,CAACuB,YAtKP,EAuKXvB,MAAM,CAACwB,YAvKI,EA2KAxB,MAAM,CAACyB,YA3KP,EA4KXzB,MAAM,CAAC0B,YA5KI,EAiLX1B,MAAM,CAACoB,WAjLI,EAwLpBd,oBAxLoB,EA4LpBE,WA5LoB,EA8LAR,MAAM,CAAC2B,WA9LP,EA+LX3B,MAAM,CAAC4B,WA/LI,CAAnB","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  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.interactive.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.interactive.normal: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  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.interactive.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.interactive.error: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  &.error {\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"],"file":"ChipStyles.js"}

package/dist/Chips/ChipTypes.d.ts

@@ -35,4 +35,4 @@ export interface ChipValue {
     size: Size;
 }
 export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
-export declare type ChipVariant = 'normal' | 'invalid';
+export declare type ChipVariant = 'normal' | 'error';

package/dist/Chips/InputChip.cjs

@@ -32,9 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Import custom styles.
  */
-var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref2;
-
+var InputChip = function InputChip(_ref) {
   var icon = _ref.icon,
       text = _ref.text,
       variant = _ref.variant,
@@ -43,7 +41,7 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-  var containerRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
+  var containerRef = React.useRef(null);
   var removeRef = React.useRef(null);
   (0, _common.useActionWithin)(containerRef, [removeRef]);
   /**
@@ -55,16 +53,6 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     !!event && event.stopPropagation();
     onRemove(event);
   };
-
-  var handleContainerKeyDown = function handleContainerKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      !disabled && _onClick && _onClick();
-    }
-
-    if (event.key === 'Backspace' && !disableRemove) {
-      !disableRemove && onRemove && onRemove(event);
-    }
-  };
   /**
    * Return Input Chip component.
    */
@@ -76,7 +64,9 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled || !_onClick ? -1 : 0,
       onMouseDown: _common.defaultOnMouseDownHandler,
-      onKeyDown: handleContainerKeyDown,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === 'Enter' && _onClick && _onClick();
+      },
       onClick: function onClick() {
         return _onClick && _onClick();
       },
@@ -112,7 +102,8 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     })
   });
-});
+};
+
 var _default = InputChip;
 exports.default = _default;
 //# sourceMappingURL=InputChip.cjs.map

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","React","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","React","useRef","removeRef","onRemoveClick","event","stopPropagation","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAOA;;AAMA;;;;;;;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AASA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OASuB;AAAA,MARpBC,IAQoB,QARpBA,IAQoB;AAAA,MAPpBC,IAOoB,QAPpBA,IAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,IAKoB,QALpBA,IAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,QAGoB,QAHpBA,OAGoB;AAAA,MAFpBC,aAEoB,QAFpBA,aAEoB;AAAA,MADpBC,QACoB,QADpBA,QACoB;AAEhF,MAAMC,YAAY,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,SAAS,GAAGF,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAlB;AAEA,+BAAgBF,YAAhB,EAA8B,CAACG,SAAD,CAA9B;AAEA;AACF;AACA;AACA;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAoE;AACxF,KAAC,CAACA,KAAF,IAAWA,KAAK,CAACC,eAAN,EAAX;AACAP,IAAAA,QAAQ,CAACM,KAAD,CAAR;AACD,GAHD;AAKA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,GAAG,EAAEL,YAApB;AACe,MAAA,SAAS,YAAKL,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,eAA4CF,OAA5C,cAAuD,CAAC,CAACG,QAAF,GAAY,aAAZ,GAA4B,EAAnF,CADxB;AAEe,MAAA,QAAQ,EAAED,QAAQ,IAAI,CAACC,QAAb,GAAuB,CAAC,CAAxB,GAA4B,CAFrD;AAGe,MAAA,WAAW,EAAEU,iCAH5B;AAIe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBZ,QAArB,IAAgCA,QAAO,EAA3C;AAAA,OAJ3B;AAKe,MAAA,OAAO,EAAE;AAAA,eAAMA,QAAO,IAAIA,QAAO,EAAxB;AAAA,OALxB;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAa,UAAA,SAAS,EAAE,mBAAxB;AAAA,qBACGL,IAAI,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBAAwCkB,mBAAMlB,IAAN,EAAY;AAACmB,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AAAxC,YADX,eAGE;AAAA,sBAAMlB;AAAN,YAHF,eAKE;AAAK,YAAA,GAAG,EAAEU,SAAV;AACK,YAAA,SAAS,yBAAkBL,aAAa,GAAG,UAAH,GAAgB,EAA/C,CADd;AAEK,YAAA,QAAQ,EAAEA,aAAa,IAAIF,QAAjB,GAA4B,CAAC,CAA7B,GAAiC,CAFhD;AAGK,YAAA,WAAW,EAAEW,iCAHlB;AAIK,YAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,qBAAI,CAACV,aAAD,IAAkBM,aAAa,CAACI,CAAD,CAAnC;AAAA,aAJf;AAKK,YAAA,SAAS,EAAE,mBAAAA,CAAC;AAAA,qBAAI,CAACA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAhC,KAAwCL,aAAa,CAACI,CAAD,CAAzD;AAAA,aALjB;AAAA,mCAME;AAAK,cAAA,SAAS,EAAE,WAAhB;AAAA,qCACE,qBAAC,kBAAD,CAAa,KAAb;AAAmB,gBAAA,SAAS,EAAE;AAA9B;AADF;AANF,YALF;AAAA;AADF;AANF;AADF,IADF;AA6BD,CAzDD;;eA2DejB,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({\n                                                              icon,\n                                                              text,\n                                                              variant,\n                                                              size,\n                                                              disabled,\n                                                              onClick,\n                                                              disableRemove,\n                                                              onRemove\n                                                            }: InputChipProps) => {\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick && onClick()}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}

package/dist/Chips/InputChip.js

@@ -20,9 +20,8 @@ import { defaultOnMouseDownHandler, useActionWithin } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref2;
 
+var InputChip = function InputChip(_ref) {
   var icon = _ref.icon,
       text = _ref.text,
       variant = _ref.variant,
@@ -31,7 +30,7 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-  var containerRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
+  var containerRef = React.useRef(null);
   var removeRef = React.useRef(null);
   useActionWithin(containerRef, [removeRef]);
   /**
@@ -43,16 +42,6 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     !!event && event.stopPropagation();
     onRemove(event);
   };
-
-  var handleContainerKeyDown = function handleContainerKeyDown(event) {
-    if (event.key === 'Enter' || event.key === ' ') {
-      !disabled && _onClick && _onClick();
-    }
-
-    if (event.key === 'Backspace' && !disableRemove) {
-      !disableRemove && onRemove && onRemove(event);
-    }
-  };
   /**
    * Return Input Chip component.
    */
@@ -64,7 +53,9 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled || !_onClick ? -1 : 0,
       onMouseDown: defaultOnMouseDownHandler,
-      onKeyDown: handleContainerKeyDown,
+      onKeyDown: function onKeyDown(e) {
+        return e.key === 'Enter' && _onClick && _onClick();
+      },
       onClick: function onClick() {
         return _onClick && _onClick();
       },
@@ -100,6 +91,7 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       })
     })
   });
-});
+};
+
 export default InputChip;
 //# sourceMappingURL=InputChip.js.map

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","e","key","className"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({\n                                                              icon,\n                                                              text,\n                                                              variant,\n                                                              size,\n                                                              disabled,\n                                                              onClick,\n                                                              disableRemove,\n                                                              onRemove\n                                                            }: InputChipProps) => {\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick && onClick()}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/ChipsInput/ChipDropdownInput.cjs

@@ -58,6 +58,7 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       inputId = _ref.inputId,
       variants = _ref.variants,
       placeholder = _ref.placeholder,
+      validationType = _ref.validationType,
       validationMessage = _ref.validationMessage,
       onValueChange = _ref.onValueChange,
       suggestion = _ref.suggestion,
@@ -343,6 +344,7 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       altPlaceholder: altPlaceholder,
       disabled: disabled,
       multiLine: multiLine,
+      validationType: validationType,
       validationMessage: validationMessage,
       loading: loading,
       onRemoveItem: function onRemoveItem(chip, index) {
@@ -350,8 +352,8 @@ var ChipDropdownInput = function ChipDropdownInput(_ref) {
       },
       onInputValueChange: handleInputValueChange,
       onInputKeyDown: handleInputKeyDown,
-      onActivationChange: function onActivationChange(value) {
-        return setDropdownIsOpen(value);
+      onActivation: function onActivation() {
+        return setDropdownIsOpen(true);
       }
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownContent, {
       customizationProps: {