@laerdal/life-react-components 1.7.0 → 1.8.0

package/dist/Card/CardTopSection.js

@@ -8,26 +8,23 @@ import styled from 'styled-components';
 import { ComponentS, ComponentTextStyle } from '../styles/typography';
 import Checkbox from '../InputFields/Checkbox';
 import { Tag } from '../Tag';
-import { COLORS, InteractionType } from '..';
+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\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  }" : '';
-}, function (props) {
-  return props.interactionType == InteractionType.Clickable ? "\n    cursor: ".concat(props.disabled ? 'not-allowed' : 'pointer', ";\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: 0px;\n  right: 0px;\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 interactionType = _ref.interactionType,
-      selected = _ref.selected,
+  var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
       tagLabel = _ref.tagLabel,
@@ -39,25 +36,25 @@ var CardTopSection = function CardTopSection(_ref) {
       highlightRibbonContentColor = _ref.highlightRibbonContentColor,
       highlightRibbonBgColor = _ref.highlightRibbonBgColor,
       disabled = _ref.disabled;
-  return /*#__PURE__*/_jsxs(Container, {
+  return /*#__PURE__*/_jsxs(CardTopSectionContainer, {
     disabled: disabled,
-    interactionType: interactionType,
-    children: [/*#__PURE__*/_jsx(Img, {
+    children: [/*#__PURE__*/_jsx(CardImg, {
       src: image
-    }), (selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && /*#__PURE__*/_jsx(CheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CardCheckboxContainer, {
       children: /*#__PURE__*/_jsx(Checkbox, {
+        disabled: disabled,
         select: function select(selected) {
-          return setSelected(selected);
+          return setSelected && setSelected(selected);
         },
-        selected: selected
+        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, {
@@ -70,8 +67,8 @@ var CardTopSection = function CardTopSection(_ref) {
 };
 
 CardTopSection.propTypes = {
-  selected: _pt.bool.isRequired,
-  setSelected: _pt.func.isRequired,
+  selected: _pt.bool,
+  setSelected: _pt.func,
   tagLabel: _pt.string,
   tagIcon: _pt.node,
   highlightRibbonText: _pt.string,

package/dist/Card/CardTopSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["React","styled","ComponentS","ComponentTextStyle","Checkbox","Tag","COLORS","InteractionType","Img","img","TagContainer","div","Container","props","disabled","interactionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","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, { StyledCheckBox } from '../InputFields/Checkbox';\nimport { Tag, TagVariants } from '../Tag';\n\nimport { COLORS, InteractionType } from '..';\n\nexport interface CardTopSectionProps {\n  interactionType: InteractionType;\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<{ interactionType: InteractionType; 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  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\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: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n  interactionType,\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} interactionType={interactionType}>\n      <Img src={image} />\n      {(selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && (\n        <CheckboxContainer>\n          <Checkbox select={(selected: boolean) => setSelected(selected)} selected={selected} />\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 ?? ''} $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

@@ -7,6 +7,12 @@ 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() {
@@ -31,20 +37,50 @@ Object.defineProperty(exports, "CardTopSection", {
     return _CardTopSection.default;
   }
 });
-Object.defineProperty(exports, "InteractionType", {
-  enumerable: true,
-  get: function get() {
-    return _Card.InteractionType;
-  }
+
+var _Card = _interopRequireDefault(require("./Card"));
+
+var _CardBottomSection = _interopRequireWildcard(require("./CardBottomSection"));
+
+Object.keys(_CardBottomSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardBottomSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardBottomSection[key];
+    }
+  });
 });
 
-var _Card = _interopRequireWildcard(require("./Card"));
+var _CardMiddleSection = _interopRequireWildcard(require("./CardMiddleSection"));
 
-var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
+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 _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
+var _CardTopSection = _interopRequireWildcard(require("./CardTopSection"));
 
-var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
+Object.keys(_CardTopSection).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CardTopSection[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _CardTopSection[key];
+    }
+  });
+});
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

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';\nexport {InteractionType} from './Card';"],"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,5 +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 { InteractionType } from './Card';
+export * from './CardTopSection';

package/dist/Card/index.js

@@ -1,6 +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 { InteractionType } from './Card';
+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","InteractionType"],"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;AACA,SAAQC,eAAR,QAA8B,QAA9B","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';\nexport {InteractionType} from './Card';"],"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/ActionChip.cjs

@@ -44,15 +44,15 @@ var ActionChip = function ActionChip(_ref) {
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline"),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
       onClick: function onClick() {
-        return _onClick();
+        return !disabled && _onClick && _onClick();
       },
       onMouseDown: _common.defaultOnMouseDownHandler,
       onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
+        return e.key === 'Enter' && !disabled && _onClick && _onClick();
       },
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: disabled || !!_onClick ? -1 : 0,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
           children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/dist/Chips/ActionChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","disabled","onClick","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AAMA;;;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,aAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAMC,QAAO,EAAb;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEC,iCAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBH,QAAO,EAAhC;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAJzC;AAAA,6BAKE,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBAEIH,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGQ,mBAAMR,IAAN,EAAY;AAACS,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGR;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline`}\n                     onClick={() => onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     tabIndex={disabled ? -1 : 0}>\n        <ChipContentContainer>\n          <ChipContent>\n            {\n              icon &&\n              <div className={'chip-icon icon-left'}>\n                {icons[icon]({className: 'icon'})}\n              </div>\n            }\n            <div>\n              {text}\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}
+{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["ActionChip","icon","text","size","disabled","onClick","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAKA;;AAMA;;;;;;;;AAnBA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEC,iCAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACJ,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,IAAI,CAAC,CAACC,QAAd,GAAwB,CAAC,CAAzB,GAA6B,CAJtD;AAAA,6BAKE,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBAEIJ,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGQ,mBAAMR,IAAN,EAAY;AAACS,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGR;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;eAoCeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n                     onClick={() => !disabled && onClick && onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n                     tabIndex={disabled || !!onClick ? -1 : 0}>\n        <ChipContentContainer>\n          <ChipContent>\n            {\n              icon &&\n              <div className={'chip-icon icon-left'}>\n                {icons[icon]({className: 'icon'})}\n              </div>\n            }\n            <div>\n              {text}\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.cjs"}

package/dist/Chips/ActionChip.js

@@ -33,15 +33,15 @@ var ActionChip = function ActionChip(_ref) {
    */
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline"),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!_onClick ? 'interactive' : ''),
       onClick: function onClick() {
-        return _onClick();
+        return !disabled && _onClick && _onClick();
       },
       onMouseDown: defaultOnMouseDownHandler,
       onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
+        return e.key === 'Enter' && !disabled && _onClick && _onClick();
       },
-      tabIndex: disabled ? -1 : 0,
+      tabIndex: disabled || !!_onClick ? -1 : 0,
       children: /*#__PURE__*/_jsx(ChipContentContainer, {
         children: /*#__PURE__*/_jsxs(ChipContent, {
           children: [icon && /*#__PURE__*/_jsx("div", {

package/dist/Chips/ActionChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","disabled","onClick","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;;AAEA;AACA;AACA;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,aAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAMC,QAAO,EAAb;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEN,yBAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAO,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBF,QAAO,EAAhC;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAJzC;AAAA,6BAKE,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBAEIH,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGN,KAAK,CAACM,IAAD,CAAL,CAAY;AAACO,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGN;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline`}\n                     onClick={() => onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     tabIndex={disabled ? -1 : 0}>\n        <ChipContentContainer>\n          <ChipContent>\n            {\n              icon &&\n              <div className={'chip-icon icon-left'}>\n                {icons[icon]({className: 'icon'})}\n              </div>\n            }\n            <div>\n              {text}\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}
+{"version":3,"sources":["../../src/Chips/ActionChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ActionChip","icon","text","size","disabled","onClick","e","key","className"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,WAAW,IAAIC,KAAvB,QAAmC,gBAAnC;;AAEA;AACA;AACA;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,IAKqB,QALrBA,IAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAEnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,sBAAmD,CAAC,CAACC,QAAF,GAAY,aAAZ,GAA4B,EAA/E,CAAxB;AACe,MAAA,OAAO,EAAE;AAAA,eAAM,CAACD,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OADxB;AAEe,MAAA,WAAW,EAAEN,yBAF5B;AAGe,MAAA,SAAS,EAAE,mBAAAO,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAH3B;AAIe,MAAA,QAAQ,EAAED,QAAQ,IAAI,CAAC,CAACC,QAAd,GAAwB,CAAC,CAAzB,GAA6B,CAJtD;AAAA,6BAKE,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBAEIJ,IAAI,iBACJ;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBACGN,KAAK,CAACM,IAAD,CAAL,CAAY;AAACO,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AADH,YAHJ,eAOE;AAAA,sBACGN;AADH,YAPF;AAAA;AADF;AALF;AADF,IADF;AAuBD,CAlCD;;AAoCA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons as icons} from '../icons/index';\nimport {Size} from '../types';\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ActionChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ActionChip: React.FunctionComponent<ActionChipProps> = ({\n                                                                icon,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: ActionChipProps) => {\n\n  /**\n   * Return Action Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} outline ${!!onClick ? 'interactive' : ''}`}\n                     onClick={() => !disabled && onClick && onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n                     tabIndex={disabled || !!onClick ? -1 : 0}>\n        <ChipContentContainer>\n          <ChipContent>\n            {\n              icon &&\n              <div className={'chip-icon icon-left'}>\n                {icons[icon]({className: 'icon'})}\n              </div>\n            }\n            <div>\n              {text}\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default ActionChip;\n"],"file":"ActionChip.js"}

package/dist/Chips/ChipStyles.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.RequiredStar = exports.ChipInputEl = exports.ChipInputContainer = exports.ChipContentContainer = exports.ChipContent = exports.ChipContainer = void 0;
+exports.ChipContentContainer = exports.ChipContent = exports.ChipContainer = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -13,29 +13,17 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _styles = require("../styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3;
 
-var ChipContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n"])));
+var ChipContentContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
 
 exports.ChipContentContainer = ChipContentContainer;
 
-var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
+var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
 
 exports.ChipContent = ChipContent;
 
-var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\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\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\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.normal:focus {\n    ", " {\n      background-color: ", ";\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  }\n\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.outline:focus {\n    ", " {\n      border: none;\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &:focus {\n    outline: none;\n\n    ", " {\n      border: none !important;\n    }\n  }\n\n  //account for border \n  &.small.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.warning:focus {\n    ", " {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.warning:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.warning:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.error:focus {\n    ", " {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n\n  .action-right:focus {\n    outline: none;\n  }\n\n  .action-right:focus .chip-icon {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    background-color: ", ";\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  &.warning {\n    .action-right:focus .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\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  &.error {\n    .action-right:focus .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\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\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      box-shadow: none !important;\n    }\n  }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, 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, ChipContent, _styles.COLORS.warning_100, _styles.COLORS.warning_600, ChipContent, ChipContent, _styles.COLORS.warning_200, _styles.COLORS.warning_700, ChipContent, _styles.COLORS.warning_300, _styles.COLORS.warning_800, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_700, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_300, _styles.COLORS.warning_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _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;
-
-var ChipInputContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  cursor: text;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ", "\n  color: ", " !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), _styles.COLORS.neutral_400, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black, _styles.COLORS.warning_500, _styles.COLORS.critical_500, _styles.COLORS.primary_800, _styles.COLORS.primary_700);
-
-exports.ChipInputContainer = ChipInputContainer;
-
-var RequiredStar = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), _styles.COLORS.critical_500);
-
-exports.RequiredStar = RequiredStar;
-
-var ChipInputEl = _styledComponents.default.input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ", "\n  color: ", " !important;\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), _styles.COLORS.black);
-
-exports.ChipInputEl = ChipInputEl;
 //# 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","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300","ChipInputContainer","neutral_400","Regular","black","warning_500","critical_500","RequiredStar","span","ChipInputEl","input"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,oJAA1B;;;;AAMA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,2wBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AAgDA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,8sJAKpBC,WALoB,EASlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CATkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA2DbE,eAAOC,KA3DM,EA6DpBL,WA7DoB,EA8DAI,eAAOE,WA9DP,EAmEpBN,WAnEoB,EAoEAI,eAAOG,WApEP,EA0EpBP,WA1EoB,EA2EAI,eAAOG,WA3EP,EAgFpBP,WAhFoB,EAiFAI,eAAOI,WAjFP,EAwFbJ,eAAOK,WAxFM,EA0FpBT,WA1FoB,EA2FAI,eAAOC,KA3FP,EA4FAD,eAAOM,WA5FP,EAiGpBV,WAjGoB,EAwGpBA,WAxGoB,EAyGAI,eAAOO,UAzGP,EA0GAP,eAAOQ,WA1GP,EA2GXR,eAAOG,WA3GI,EAgHpBP,WAhHoB,EAiHAI,eAAOS,WAjHP,EAkHAT,eAAOU,WAlHP,EAmHXV,eAAOI,WAnHI,EA2HpBR,WA3HoB,EAkIpBA,WAlIoB,EAwIpBA,WAxIoB,EA8IpBA,WA9IoB,EAoJpBA,WApJoB,EAqJAI,eAAOW,WArJP,EAsJXX,eAAOY,WAtJI,EA2JpBhB,WA3JoB,EAiKpBA,WAjKoB,EAkKNI,eAAOa,WAlKD,EAmKXb,eAAOc,WAnKI,EAwKpBlB,WAxKoB,EAyKNI,eAAOe,WAzKD,EA0KXf,eAAOgB,WA1KI,EAgLpBpB,WAhLoB,EAiLAI,eAAOiB,YAjLP,EAkLXjB,eAAOkB,YAlLI,EAuLpBtB,WAvLoB,EA6LpBA,WA7LoB,EA8LNI,eAAOmB,YA9LD,EA+LXnB,eAAOoB,YA/LI,EAoMpBxB,WApMoB,EAqMNI,eAAOqB,YArMD,EAsMXrB,eAAOsB,YAtMI,EAkNFtB,eAAOG,WAlNL,EAsNFH,eAAOG,WAtNL,EA0NFH,eAAOI,WA1NL,EA+NbJ,eAAOU,WA/NM,EAoOAV,eAAOa,WApOP,EAqOXb,eAAOc,WArOI,EAyOAd,eAAOa,WAzOP,EA0OXb,eAAOc,WA1OI,EA8OAd,eAAOe,WA9OP,EA+OXf,eAAOgB,WA/OI,EAoPXhB,eAAOU,WApPI,EA0PAV,eAAOmB,YA1PP,EA2PXnB,eAAOoB,YA3PI,EA+PApB,eAAOmB,YA/PP,EAgQXnB,eAAOoB,YAhQI,EAoQApB,eAAOqB,YApQP,EAqQXrB,eAAOsB,YArQI,EA0QXtB,eAAOU,WA1QI,EAkRpBjB,oBAlRoB,EAsRpBG,WAtRoB,EAwRAI,eAAOuB,WAxRP,EAyRXvB,eAAOwB,WAzRI,CAAnB;;;;AAgSA,IAAMC,kBAAkB,GAAG/B,0BAAOC,GAAV,o2BAMOK,eAAO0B,WANd,EAgB3B,+BAAkB7B,2BAAmB8B,OAArC,EAA8C3B,eAAO4B,KAArD,CAhB2B,EAiBpB5B,eAAO4B,KAjBa,EAsBS5B,eAAO6B,WAtBhB,EA4BS7B,eAAO8B,YA5BhB,EAqCS9B,eAAOI,WArChB,EAyCSJ,eAAOG,WAzChB,CAAxB;;;;AA6CA,IAAM4B,YAAY,GAAGrC,0BAAOsC,IAAV,6NACdhC,eAAO8B,YADO,CAAlB;;;;AAUA,IAAMG,WAAW,GAAGvC,0BAAOwC,KAAV,qQASpB,+BAAkBrC,2BAAmB8B,OAArC,EAA8C3B,eAAO4B,KAArD,CAToB,EAUb5B,eAAO4B,KAVM,CAAjB","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} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\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`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\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\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\n  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.normal:focus {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.normal:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\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  &.outline:focus {\n    ${ChipContent} {\n      border: none;\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.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  &.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  &:focus {\n    outline: none;\n\n    ${ChipContent} {\n      border: none !important;\n    }\n  }\n\n  //account for border \n  &.small.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.warning {\n    ${ChipContent} {\n      background-color: ${COLORS.warning_100};\n      color: ${COLORS.warning_600};\n    }\n  }\n\n  &.warning:focus {\n    ${ChipContent} {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.warning:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n  }\n\n  &.warning:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_300};\n      color: ${COLORS.warning_800};\n      box-shadow: none;\n    }\n  }\n\n  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.error:focus {\n    ${ChipContent} {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.error:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n      box-shadow: none;\n    }\n  }\n\n\n  .action-right:focus {\n    outline: none;\n  }\n\n  .action-right:focus .chip-icon {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    background-color: ${COLORS.primary_700};\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  &.warning {\n    .action-right:focus .chip-icon {\n      background-color: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.warning_300};\n      color: ${COLORS.warning_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.error {\n    .action-right:focus .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\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\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      box-shadow: none !important;\n    }\n  }\n`;\n\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  cursor: text;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\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.d.ts

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

package/dist/Chips/ChipStyles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3;
 
 /**
  * Import third-party libraries.
@@ -10,11 +10,8 @@ import styled from 'styled-components';
  * Import custom style properties.
  */
 
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles';
-export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\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\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
-export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  cursor: pointer;\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\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\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.normal:focus {\n    ", " {\n      background-color: ", ";\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.normal:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.normal:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      box-shadow: none;\n    }\n  }\n\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.outline:focus {\n    ", " {\n      border: none;\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &:focus {\n    outline: none;\n\n    ", " {\n      border: none !important;\n    }\n  }\n\n  //account for border \n  &.small.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(:focus):not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.warning:focus {\n    ", " {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.warning:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.warning:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.error:focus {\n    ", " {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.error:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.error:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n\n  .action-right:focus {\n    outline: none;\n  }\n\n  .action-right:focus .chip-icon {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    background-color: ", ";\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  &.warning {\n    .action-right:focus .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\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  &.error {\n    .action-right:focus .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\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\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      box-shadow: none !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.warning_100, COLORS.warning_600, ChipContent, ChipContent, COLORS.warning_200, COLORS.warning_700, ChipContent, COLORS.warning_300, COLORS.warning_800, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, COLORS.primary_700, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.warning_200, COLORS.warning_700, COLORS.warning_200, COLORS.warning_700, COLORS.warning_300, COLORS.warning_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, 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 ChipInputContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  cursor: text;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ", "\n  color: ", " !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n"])), COLORS.neutral_400, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black, COLORS.warning_500, COLORS.critical_500, COLORS.primary_800, COLORS.primary_700);
-export var RequiredStar = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n"])), COLORS.critical_500);
-export var ChipInputEl = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ", "\n  color: ", " !important;\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), COLORS.black);
+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  &.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","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300","ChipInputContainer","neutral_400","Regular","black","warning_500","critical_500","RequiredStar","span","ChipInputEl","input"],"mappings":"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","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} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n  display: flex;\n  align-items: center;\n  min-height: 48px;\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`;\n\nexport const ChipContainer = styled.div`\n  display: inline-block;\n  cursor: pointer;\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\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\n  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\n    }\n  }\n\n  &.normal:focus {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.normal:hover:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_700};\n    }\n  }\n\n  &.normal:active:not(.action-within) {\n    ${ChipContent} {\n      background-color: ${COLORS.primary_800};\n      box-shadow: none;\n    }\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  &.outline:focus {\n    ${ChipContent} {\n      border: none;\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.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  &.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  &:focus {\n    outline: none;\n\n    ${ChipContent} {\n      border: none !important;\n    }\n  }\n\n  //account for border \n  &.small.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(:focus):not(.disabled) {\n    ${ChipContent} {\n      padding: 10px 18px;\n    }\n  }\n\n  &.warning {\n    ${ChipContent} {\n      background-color: ${COLORS.warning_100};\n      color: ${COLORS.warning_600};\n    }\n  }\n\n  &.warning:focus {\n    ${ChipContent} {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.warning:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n  }\n\n  &.warning:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_300};\n      color: ${COLORS.warning_800};\n      box-shadow: none;\n    }\n  }\n\n  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\n  }\n\n  &.error:focus {\n    ${ChipContent} {\n      box-shadow: 0 4px 12px rgba(46, 127, 161, 0.25), 0 0 8px #2E7FA1;\n    }\n  }\n\n  &.error:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n  }\n\n  &.error:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.critical_300};\n      color: ${COLORS.critical_800};\n      box-shadow: none;\n    }\n  }\n\n\n  .action-right:focus {\n    outline: none;\n  }\n\n  .action-right:focus .chip-icon {\n    box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n    background-color: ${COLORS.primary_700};\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  &.warning {\n    .action-right:focus .chip-icon {\n      background-color: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n\n    .action-right:hover .chip-icon {\n      background-color: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ${COLORS.warning_300};\n      color: ${COLORS.warning_800};\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ${COLORS.primary_300};\n    }\n  }\n\n  &.error {\n    .action-right:focus .chip-icon {\n      background-color: ${COLORS.critical_200};\n      color: ${COLORS.critical_700};\n    }\n\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\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      box-shadow: none !important;\n    }\n  }\n`;\n\n\nexport const ChipInputContainer = styled.div`\n  min-height: 56px;\n  height: auto;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 16px 16px 8px 16px;\n  cursor: text;\n  outline: none;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_500};\n  }\n\n  > div {\n    margin-right: 8px;\n    margin-bottom: 8px;\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n  }\n`;\n\nexport const RequiredStar = styled.span`\n  color: ${COLORS.critical_500};\n  font-size: 28px;\n  line-height: 12px;\n  float: right;\n  font-weight: 700;\n  position: relative;\n  top: 10px;\n`;\n\nexport const ChipInputEl = styled.input`\n  height: 40px;\n  width: auto;\n  display: inline-flex;\n  border: none;\n  outline: none;\n  margin-top: 5px;\n  margin-bottom: 8px;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  color: ${COLORS.black} !important;\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"}