@laerdal/life-react-components 1.7.0-dev.7 → 1.7.0-dev.8.full

package/dist/Card/CardMiddleSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","InteractionType","Tag","Container","div","props","interactionType","Clickable","disabled","ColorBand","$color","TagsContainer","CategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","Boolean","Bold","black","neutral_600","map","x"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA2EC,eAA3E,EAA4FC,GAA5F,QAAuG,IAAvG;;;AAaA,IAAMC,SAAS,GAAGP,MAAM,CAACQ,GAAV,mUAiBX,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBL,eAAe,CAACM,SAAzC,2BAEUF,KAAK,CAACG,QAAN,GAAiB,aAAjB,GAAiC,SAF3C,aAII,EALC;AAAA,CAjBM,CAAf;AAyBA,IAAMC,SAAS,GAAGb,MAAM,CAACQ,GAAV,uLAMO,UAAAC,KAAK;AAAA,SAAIA,KAAK,CAACK,MAAV;AAAA,CANZ,CAAf;AASA,IAAMC,aAAa,GAAGf,MAAM,CAACQ,GAAV,uKAAnB;AAQA,IAAMQ,iBAAiB,GAAGhB,MAAM,CAACQ,GAAV,uPAQVP,MAAM,CAACgB,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAS7C;AAAA,MAR5BR,eAQ4B,QAR5BA,eAQ4B;AAAA,MAP5BS,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BZ,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAA+B,IAAA,eAAe,EAAEF,eAAhD;AAAA,eACGS,cAAc,iBAAI,KAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,MAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEM,OAAO,CAACN,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEM,OAAO,CAACL,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEjB,kBAAkB,CAACuB,IAA1C;AAAgD,QAAA,KAAK,EAAEzB,MAAM,CAACgB,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAElB,kBAAkB,CAACuB,IAAlE;AAAwE,MAAA,KAAK,EAAEd,QAAQ,GAAGX,MAAM,CAACgB,WAAV,GAAwBhB,MAAM,CAAC0B,KAAtH;AAAA,gBACGL;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAEtB,MAAM,CAAC2B,WAAvD;AAAA,gBACGL;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,aAAD;AAAA,gBACGA,IAAI,CAACK,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CApCD;;;AAlEEX,EAAAA,c;AAEAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAZ,EAAAA,Q;;AAiGF,eAAeM,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL, ComponentXS, InteractionType, Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  interactionType: InteractionType;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div<{ interactionType: InteractionType; disabled: boolean }>`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n\n  ${props =>\n    props.interactionType == InteractionType.Clickable\n      ? `\n    cursor: ${props.disabled ? 'not-allowed' : 'pointer'};\n  `\n      : ''}\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  interactionType,\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container disabled={disabled} interactionType={interactionType}>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}
+{"version":3,"sources":["../../src/Card/CardMiddleSection.tsx"],"names":["React","styled","COLORS","ComponentS","ComponentTextStyle","ComponentXL","Tag","Container","div","ColorBand","props","$color","TagsContainer","CategoryContainer","neutral_500","CardMiddleSection","colorBandColor","categoryIcon","categoryLabel","title","description","tags","disabled","Boolean","Bold","black","neutral_600","map","x"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,MAAT,EAAiBC,UAAjB,EAA6BC,kBAA7B,EAAiDC,WAAjD,EAA+DC,GAA/D,QAA0E,IAA1E;;;AAYA,IAAMC,SAAS,GAAGN,MAAM,CAACO,GAAV,wTAAf;AAkBA,IAAMC,SAAS,GAAGR,MAAM,CAACO,GAAV,uLAMO,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,MAAV;AAAA,CANZ,CAAf;AASA,IAAMC,aAAa,GAAGX,MAAM,CAACO,GAAV,uKAAnB;AAQA,IAAMK,iBAAiB,GAAGZ,MAAM,CAACO,GAAV,uPAQVN,MAAM,CAACY,WARG,CAAvB;;AAcA,IAAMC,iBAAkE,GAAG,SAArEA,iBAAqE,OAQ7C;AAAA,MAP5BC,cAO4B,QAP5BA,cAO4B;AAAA,MAN5BC,YAM4B,QAN5BA,YAM4B;AAAA,MAL5BC,aAK4B,QAL5BA,aAK4B;AAAA,MAJ5BC,KAI4B,QAJ5BA,KAI4B;AAAA,MAH5BC,WAG4B,QAH5BA,WAG4B;AAAA,MAF5BC,IAE4B,QAF5BA,IAE4B;AAAA,MAD5BC,QAC4B,QAD5BA,QAC4B;AAC5B,sBACE,MAAC,SAAD;AAAA,eACGN,cAAc,iBAAI,KAAC,SAAD;AAAW,MAAA,MAAM,EAAEA;AAAnB,MADrB,eAEE,MAAC,iBAAD;AAAmB,MAAA,cAAc,EAAEO,OAAO,CAACP,cAAD,CAA1C;AAA4D,MAAA,YAAY,EAAEO,OAAO,CAACN,YAAY,IAAIC,aAAjB,CAAjF;AAAA,iBACGD,YADH,eAEE,KAAC,UAAD;AAAY,QAAA,SAAS,EAAEb,kBAAkB,CAACoB,IAA1C;AAAgD,QAAA,KAAK,EAAEtB,MAAM,CAACY,WAA9D;AAAA,kBACGI;AADH,QAFF;AAAA,MAFF,eAQE,KAAC,WAAD;AAAa,MAAA,SAAS,EAAC,YAAvB;AAAoC,MAAA,SAAS,EAAEd,kBAAkB,CAACoB,IAAlE;AAAwE,MAAA,KAAK,EAAEF,QAAQ,GAAGpB,MAAM,CAACY,WAAV,GAAwBZ,MAAM,CAACuB,KAAtH;AAAA,gBACGN;AADH,MARF,EAWGC,WAAW,iBACV,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,kBAAtB;AAAyC,MAAA,KAAK,EAAElB,MAAM,CAACwB,WAAvD;AAAA,gBACGN;AADH,MAZJ,EAgBGC,IAAI,iBACH,KAAC,aAAD;AAAA,gBACGA,IAAI,CAACM,GAAL,CAAS,UAAAC,CAAC;AAAA,4BACT,KAAC,GAAD;AAAK,UAAA,KAAK,EAAEA;AAAZ,UADS;AAAA,OAAV;AADH,MAjBJ;AAAA,IADF;AA0BD,CAnCD;;;AA1DEZ,EAAAA,c;AACAC,EAAAA,Y;AACAC,EAAAA,a;AACAC,EAAAA,K;AACAC,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;;AAyFF,eAAeP,iBAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, ComponentS, ComponentTextStyle, ComponentXL,  Tag } from '..';\n\nexport interface CardMiddleSectionProps {\n  colorBandColor?: string;\n  categoryIcon?: React.ReactNode;\n  categoryLabel?: string;\n  title: string;\n  description?: string;\n  tags?: string[];\n  disabled: boolean;\n}\n\nconst Container = styled.div`\n  display: flex;\n  flex-grow: 1;\n  width: calc(100% - 32px);\n  position: relative;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n\n  .descriptionBlock {\n    padding: 2px 0;\n  }\n\n  .titleBlock {\n    padding: 2px 0;\n  }\n`;\n\nconst ColorBand = styled.div<{ $color: string }>`\n  position: absolute;\n  width: 100%;\n  top: 0px;\n  left: 0px;\n  height: 8px;\n  background-color: ${props => props.$color};\n`;\n\nconst TagsContainer = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 4px 0;\n  gap: 4px;\n  flex-wrap: wrap;\n`;\n\nconst CategoryContainer = styled.div<{ extraTopMargin: boolean; bottomMargin: boolean }>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: none;\n  gap: 6px;\n  \n  svg {\n    color: ${COLORS.neutral_500};\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CardMiddleSection: React.FunctionComponent<CardMiddleSectionProps> = ({\n  colorBandColor,\n  categoryIcon,\n  categoryLabel,\n  title,\n  description,\n  tags,\n  disabled\n}: CardMiddleSectionProps) => {\n  return (\n    <Container>\n      {colorBandColor && <ColorBand $color={colorBandColor} />}\n      <CategoryContainer extraTopMargin={Boolean(colorBandColor)} bottomMargin={Boolean(categoryIcon || categoryLabel)}>\n        {categoryIcon}\n        <ComponentS textStyle={ComponentTextStyle.Bold} color={COLORS.neutral_500}>\n          {categoryLabel}\n        </ComponentS>\n      </CategoryContainer>\n      <ComponentXL className=\"titleBlock\" textStyle={ComponentTextStyle.Bold} color={disabled ? COLORS.neutral_500 : COLORS.black}>\n        {title}\n      </ComponentXL>\n      {description && (\n        <ComponentS className=\"descriptionBlock\" color={COLORS.neutral_600}>\n          {description}\n        </ComponentS>\n      )}\n      {tags && (\n        <TagsContainer>\n          {tags.map(x => (\n            <Tag label={x} />\n          ))}\n        </TagsContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardMiddleSection;\n"],"file":"CardMiddleSection.js"}

package/dist/Card/CardTopSection.cjs

@@ -37,10 +37,8 @@ var Img = _styledComponents.default.img(_templateObject || (_templateObject = (0
 
 var TagContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n"])));
 
-var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ", "\n\n  ", "\n"])), function (props) {
+var Container = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: calc(40px - 16px);\n  background-color: ", ";\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ", ";\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n"])), function (props) {
@@ -49,11 +47,10 @@ var RibbonContainer = _styledComponents.default.div(_templateObject4 || (_templa
   return props.$color;
 });
 
-var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0px;\n  right: 0px;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
+var CheckboxContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), _.COLORS.white);
 
 var CardTopSection = function CardTopSection(_ref) {
-  var interactionType = _ref.interactionType,
-      selected = _ref.selected,
+  var selected = _ref.selected,
       setSelected = _ref.setSelected,
       image = _ref.image,
       tagLabel = _ref.tagLabel,
@@ -67,15 +64,15 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     disabled: disabled,
-    interactionType: interactionType,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Img, {
       src: image
-    }), (selected !== undefined || setSelected !== undefined) && interactionType == _.InteractionType.Selectable && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckboxContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        disabled: disabled,
         select: function select(selected) {
-          return setSelected(selected);
+          return setSelected && setSelected(selected);
         },
-        selected: selected
+        selected: selected || false
       })
     }), (tagLabel || tagIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(TagContainer, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tag.Tag, {
@@ -96,8 +93,8 @@ var CardTopSection = function CardTopSection(_ref) {
 };
 
 CardTopSection.propTypes = {
-  selected: _propTypes.default.bool.isRequired,
-  setSelected: _propTypes.default.func.isRequired,
+  selected: _propTypes.default.bool,
+  setSelected: _propTypes.default.func,
   tagLabel: _propTypes.default.string,
   tagIcon: _propTypes.default.node,
   highlightRibbonText: _propTypes.default.string,

package/dist/Card/CardTopSection.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","interactionType","InteractionType","Clickable","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","undefined","Selectable","neutral_300","ComponentTextStyle","Regular"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { ComponentS, ComponentTextStyle } from '../styles/typography';\nimport Checkbox, { 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.cjs"}
+{"version":3,"sources":["../../src/Card/CardTopSection.tsx"],"names":["Img","styled","img","TagContainer","div","Container","props","disabled","RibbonContainer","$backgroundColor","$color","CheckboxContainer","COLORS","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","ComponentTextStyle","Regular"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;;;;;AAgBA,IAAMA,GAAG,GAAGC,0BAAOC,GAAV,6MAAT;;AAQA,IAAMC,YAAY,GAAGF,0BAAOG,GAAV,0KAAlB;;AAQA,IAAMC,SAAS,GAAGJ,0BAAOG,GAAV,iLAMX,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACC,QAAN,yDAGN,EAHE;AAAA,CANM,CAAf;;AAYA,IAAMC,eAAe,GAAGP,0BAAOG,GAAV,ocAEC,UAAAE,KAAK;AAAA,SAAIA,KAAK,CAACG,gBAAV;AAAA,CAFN,EAcR,UAAAH,KAAK;AAAA,SAAIA,KAAK,CAACI,MAAV;AAAA,CAdG,CAArB;;AAsBA,IAAMC,iBAAiB,GAAGV,0BAAOG,GAAV,8MAOCQ,SAAOC,KAPR,CAAvB;;AAWA,IAAMC,cAA4D,GAAG,SAA/DA,cAA+D,OAY4B;AAAA,MAXzBC,QAWyB,QAXzBA,QAWyB;AAAA,MAVzBC,WAUyB,QAVzBA,WAUyB;AAAA,MATzBC,KASyB,QATzBA,KASyB;AAAA,MARzBC,QAQyB,QARzBA,QAQyB;AAAA,MAPzBC,OAOyB,QAPzBA,OAOyB;AAAA,6BANzBC,UAMyB;AAAA,MANzBA,UAMyB,gCANZ,UAMY;AAAA,MALzBC,mBAKyB,QALzBA,mBAKyB;AAAA,MAJzBC,mBAIyB,QAJzBA,mBAIyB;AAAA,MAHzBC,2BAGyB,QAHzBA,2BAGyB;AAAA,MAFzBC,sBAEyB,QAFzBA,sBAEyB;AAAA,MADzBjB,QACyB,QADzBA,QACyB;AAC/F,sBACE,sBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEA,QAArB;AAAA,4BACE,qBAAC,GAAD;AAAK,MAAA,GAAG,EAAEU;AAAV,MADF,EAEG,CAAC,CAAC,CAACF,QAAF,IAAc,CAAC,CAACC,WAAjB,kBACC,qBAAC,iBAAD;AAAA,6BACE,qBAAC,iBAAD;AAAU,QAAA,QAAQ,EAAET,QAApB;AAA8B,QAAA,MAAM,EAAE,gBAACQ,QAAD;AAAA,iBAAuBC,WAAW,IAAIA,WAAW,CAACD,QAAD,CAAjD;AAAA,SAAtC;AAAmG,QAAA,QAAQ,EAAEA,QAAQ,IAAI;AAAzH;AADF,MAHJ,EAOG,CAACG,QAAQ,IAAIC,OAAb,kBACC,qBAAC,YAAD;AAAA,6BACE,qBAAC,QAAD;AAAK,QAAA,KAAK,EAAED,QAAZ;AAAsB,QAAA,OAAO,EAAEE,UAA/B;AAA2C,QAAA,IAAI,EAAED;AAAjD;AADF,MARJ,EAYG,CAACE,mBAAmB,IAAIC,mBAAxB,kBACC,sBAAC,eAAD;AAAiB,MAAA,MAAM,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAxD;AACiB,MAAA,gBAAgB,EAAEhB,QAAQ,GAAGK,SAAOa,WAAV,GAAwBD,sBAAxB,aAAwBA,sBAAxB,cAAwBA,sBAAxB,GAAkD,EAD7F;AAAA,iBAEGH,mBAFH,EAGGC,mBAAmB,iBAClB,qBAAC,sBAAD;AAAY,QAAA,KAAK,EAAEC,2BAAF,aAAEA,2BAAF,cAAEA,2BAAF,GAAiC,EAAlD;AAAsD,QAAA,SAAS,EAAEG,+BAAmBC,OAApF;AAAA,kBACGL;AADH,QAJJ;AAAA,MAbJ;AAAA,IADF;AA0BD,CAvCD;;;AA1EEP,EAAAA,Q;AACAC,EAAAA,W;AACAE,EAAAA,Q;AACAC,EAAAA,O;AAEAG,EAAAA,mB;AACAD,EAAAA,mB;AACAE,EAAAA,2B;AACAC,EAAAA,sB;AACAP,EAAAA,K;AACAV,EAAAA,Q;;eAyGaO,c","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {ComponentS, ComponentTextStyle} from '../styles/typography';\nimport Checkbox from '../InputFields/Checkbox';\nimport {Tag, TagVariants} from '../Tag';\n\nimport {COLORS} from '..';\n\nexport interface CardTopSectionProps {\n  selected?: boolean;\n  setSelected?: (arg0: boolean) => void;\n  tagLabel?: string;\n  tagIcon?: React.ReactNode;\n  tagVariant?: TagVariants;\n  highlightRibbonText?: string;\n  highlightRibbonIcon?: string;\n  highlightRibbonContentColor?: string;\n  highlightRibbonBgColor?: string;\n  image?: string;\n  disabled: boolean;\n}\n\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n                                                                        selected,\n                                                                        setSelected,\n                                                                        image,\n                                                                        tagLabel,\n                                                                        tagIcon,\n                                                                        tagVariant = 'positive',\n                                                                        highlightRibbonIcon,\n                                                                        highlightRibbonText,\n                                                                        highlightRibbonContentColor,\n                                                                        highlightRibbonBgColor,\n                                                                        disabled\n                                                                      }: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled}>\n      <Img src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''}\n                         $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.cjs"}

package/dist/Card/CardTopSection.d.ts

@@ -1,10 +1,8 @@
 import * as React from 'react';
 import { TagVariants } from '../Tag';
-import { InteractionType } from '..';
 export interface CardTopSectionProps {
-    interactionType: InteractionType;
-    selected: boolean;
-    setSelected: (arg0: boolean) => void;
+    selected?: boolean;
+    setSelected?: (arg0: boolean) => void;
     tagLabel?: string;
     tagIcon?: React.ReactNode;
     tagVariant?: TagVariants;

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) {
+var Container = 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) {
   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);
+var CheckboxContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ", ";\n  }\n"])), COLORS.white);
 
 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,
@@ -41,15 +38,15 @@ var CardTopSection = function CardTopSection(_ref) {
       disabled = _ref.disabled;
   return /*#__PURE__*/_jsxs(Container, {
     disabled: disabled,
-    interactionType: interactionType,
     children: [/*#__PURE__*/_jsx(Img, {
       src: image
-    }), (selected !== undefined || setSelected !== undefined) && interactionType == InteractionType.Selectable && /*#__PURE__*/_jsx(CheckboxContainer, {
+    }), (!!selected || !!setSelected) && /*#__PURE__*/_jsx(CheckboxContainer, {
       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, {
       children: /*#__PURE__*/_jsx(Tag, {
@@ -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","Img","img","TagContainer","div","Container","props","disabled","RibbonContainer","$backgroundColor","$color","CheckboxContainer","white","CardTopSection","selected","setSelected","image","tagLabel","tagIcon","tagVariant","highlightRibbonIcon","highlightRibbonText","highlightRibbonContentColor","highlightRibbonBgColor","neutral_300","Regular"],"mappings":"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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\nconst Img = styled.img`\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  border-top-right-radius: 8px;\n  border-top-left-radius: 8px;\n`;\n\nconst TagContainer = styled.div`\n  position: absolute;\n\n  top: 16px;\n  left: 16px;\n  width: calc(100% - 32px);\n`;\n\nconst Container = styled.div<{ disabled: boolean }>`\n  position: relative;\n  width: 100%;\n  height: 200px;\n  overflow: visible;\n\n  ${props => props.disabled ? `\n  img, svg {\n    filter: grayscale(100%);\n  }` : ''}\n`;\n\nconst RibbonContainer = styled.div<{ $color: string; $backgroundColor: string }>`\n  min-height: calc(40px - 16px);\n  background-color: ${props => props.$backgroundColor};\n  width: calc(100% - 32px);\n  position: absolute;\n  bottom: 0px;\n  left: 0px;\n  padding: 8px 16px 8px 16px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n\n  svg {\n    color: ${props => props.$color};\n    width: 24px;\n    height: 24px;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n`;\n\nconst CheckboxContainer = styled.div`\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 1;\n\n  .checkbox-icon {\n    background-color: ${COLORS.white};\n  }\n`;\n\nconst CardTopSection: React.FunctionComponent<CardTopSectionProps> = ({\n                                                                        selected,\n                                                                        setSelected,\n                                                                        image,\n                                                                        tagLabel,\n                                                                        tagIcon,\n                                                                        tagVariant = 'positive',\n                                                                        highlightRibbonIcon,\n                                                                        highlightRibbonText,\n                                                                        highlightRibbonContentColor,\n                                                                        highlightRibbonBgColor,\n                                                                        disabled\n                                                                      }: CardTopSectionProps) => {\n  return (\n    <Container disabled={disabled}>\n      <Img src={image}/>\n      {(!!selected || !!setSelected) && (\n        <CheckboxContainer>\n          <Checkbox disabled={disabled} select={(selected: boolean) => setSelected && setSelected(selected)} selected={selected || false}/>\n        </CheckboxContainer>\n      )}\n      {(tagLabel || tagIcon) && (\n        <TagContainer>\n          <Tag label={tagLabel} variant={tagVariant} icon={tagIcon}/>\n        </TagContainer>\n      )}\n      {(highlightRibbonIcon || highlightRibbonText) && (\n        <RibbonContainer $color={highlightRibbonContentColor ?? ''}\n                         $backgroundColor={disabled ? COLORS.neutral_300 : highlightRibbonBgColor ?? ''}>\n          {highlightRibbonIcon}\n          {highlightRibbonText && (\n            <ComponentS color={highlightRibbonContentColor ?? ''} textStyle={ComponentTextStyle.Regular}>\n              {highlightRibbonText}\n            </ComponentS>\n          )}\n        </RibbonContainer>\n      )}\n    </Container>\n  );\n};\n\nexport default CardTopSection;\n"],"file":"CardTopSection.js"}

package/dist/Card/index.cjs

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

package/dist/Card/index.cjs.map

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

package/dist/Card/index.d.ts

@@ -2,4 +2,3 @@ export { default as Card } from './Card';
 export { default as CardBottomSection } from './CardBottomSection';
 export { default as CardMiddleSection } from './CardMiddleSection';
 export { default as CardTopSection } from './CardTopSection';
-export { InteractionType } from './Card';

package/dist/Card/index.js

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

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,7 +13,7 @@ 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"])));
 
@@ -23,19 +23,7 @@ var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateOb
 
 exports.ChipContent = ChipContent;
 
-var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n\n  }\n\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  &:focus {\n    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\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    }\n  }\n\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\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    }\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  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\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    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\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    }\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  &.warning {\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: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    }\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.warning_100, _styles.COLORS.warning_600, 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, _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.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_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\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  &.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\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  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.warning:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.warning:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\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\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  &.warning {\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: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.warning_100, _styles.COLORS.warning_600, 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, _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.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_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    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover {\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","focusStyles","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;;;;AASO,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,0oHAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAiCpBF,WAjCoB,EAqClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CArCkB,EA4DpBE,mBA5DoB,EAgEbC,eAAOC,KAhEM,EAkEpBN,WAlEoB,EAmEAK,eAAOE,WAnEP,EAwEpBP,WAxEoB,EAyEAK,eAAOG,WAzEP,EA8EpBR,WA9EoB,EA+EAK,eAAOI,WA/EP,EAqFbJ,eAAOK,WArFM,EAuFpBV,WAvFoB,EAwFAK,eAAOC,KAxFP,EAyFAD,eAAOM,WAzFP,EA8FpBX,WA9FoB,EA+FAK,eAAOO,UA/FP,EAgGAP,eAAOQ,WAhGP,EAiGXR,eAAOG,WAjGI,EAsGpBR,WAtGoB,EAuGAK,eAAOS,WAvGP,EAwGAT,eAAOU,WAxGP,EAyGXV,eAAOI,WAzGI,EA+GpBT,WA/GoB,EAqHpBA,WArHoB,EA2HpBA,WA3HoB,EAiIpBA,WAjIoB,EAkIAK,eAAOW,WAlIP,EAmIXX,eAAOY,WAnII,EAwIpBjB,WAxIoB,EAyINK,eAAOa,WAzID,EA0IXb,eAAOc,WA1II,EA+IpBnB,WA/IoB,EAgJNK,eAAOe,WAhJD,EAiJXf,eAAOgB,WAjJI,EAsJpBrB,WAtJoB,EAuJAK,eAAOiB,YAvJP,EAwJXjB,eAAOkB,YAxJI,EA8JpBvB,WA9JoB,EA+JNK,eAAOmB,YA/JD,EAgKXnB,eAAOoB,YAhKI,EAqKpBzB,WArKoB,EAsKNK,eAAOqB,YAtKD,EAuKXrB,eAAOsB,YAvKI,EA6KpBvB,mBA7KoB,EAiLFC,eAAOG,WAjLL,EAqLFH,eAAOI,WArLL,EA0LbJ,eAAOU,WA1LM,EAgMAV,eAAOa,WAhMP,EAiMXb,eAAOc,WAjMI,EAqMAd,eAAOe,WArMP,EAsMXf,eAAOgB,WAtMI,EA2MXhB,eAAOU,WA3MI,EAiNAV,eAAOmB,YAjNP,EAkNXnB,eAAOoB,YAlNI,EAsNApB,eAAOqB,YAtNP,EAuNXrB,eAAOsB,YAvNI,EA4NXtB,eAAOU,WA5NI,EAoOpBlB,oBApOoB,EAwOpBG,WAxOoB,EA0OAK,eAAOuB,WA1OP,EA2OXvB,eAAOwB,WA3OI,CAAnB;;;;AAgPA,IAAMC,kBAAkB,GAAGhC,0BAAOC,GAAV,8zBAMOM,eAAO0B,WANd,EAgB3B,+BAAkB9B,2BAAmB+B,OAArC,EAA8C3B,eAAO4B,KAArD,CAhB2B,EAiBpB5B,eAAO4B,KAjBa,EAqBS5B,eAAO6B,WArBhB,EA0BS7B,eAAO8B,YA1BhB,EAmCS9B,eAAOI,WAnChB,EAuCSJ,eAAOG,WAvChB,CAAxB;;;;AA2CA,IAAM4B,YAAY,GAAGtC,0BAAOuC,IAAV,6NACdhC,eAAO8B,YADO,CAAlB;;;;AAUA,IAAMG,WAAW,GAAGxC,0BAAOyC,KAAV,qQASpB,+BAAkBtC,2BAAmB+B,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 {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  focusStyles\n} 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  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\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  &:focus {\n    ${focusStyles}\n  }\n\n  &.normal {\n    color: ${COLORS.white};\n\n    ${ChipContent} {\n      background-color: ${COLORS.primary_500};\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    }\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: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    }\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  &.warning {\n    ${ChipContent} {\n      background-color: ${COLORS.warning_100};\n      color: ${COLORS.warning_600};\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    }\n  }\n\n  &.error {\n    ${ChipContent} {\n      background-color: ${COLORS.critical_100};\n      color: ${COLORS.critical_600};\n    }\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    }\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  &.warning {\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: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    }\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    box-shadow: inset 0px 0px 0px 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover {\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","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"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AASO,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,2wHAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAiCpBF,WAjCoB,EAqClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CArCkB,EA4DpBE,mBA5DoB,EAgEbC,eAAOC,KAhEM,EAkEpBN,WAlEoB,EAmEAK,eAAOE,WAnEP,EAwEpBP,WAxEoB,EAyEAK,eAAOG,WAzEP,EA8EpBR,WA9EoB,EA+EAK,eAAOI,WA/EP,EAqFbJ,eAAOK,WArFM,EAuFpBV,WAvFoB,EAwFAK,eAAOC,KAxFP,EAyFAD,eAAOM,WAzFP,EA8FpBX,WA9FoB,EA+FAK,eAAOO,UA/FP,EAgGAP,eAAOQ,WAhGP,EAiGXR,eAAOG,WAjGI,EAsGpBR,WAtGoB,EAuGAK,eAAOS,WAvGP,EAwGAT,eAAOU,WAxGP,EAyGXV,eAAOI,WAzGI,EAgHpBT,WAhHoB,EAsHpBA,WAtHoB,EA4HpBA,WA5HoB,EAkIpBA,WAlIoB,EAmIAK,eAAOW,WAnIP,EAoIXX,eAAOY,WApII,EAyIpBjB,WAzIoB,EA0INK,eAAOa,WA1ID,EA2IXb,eAAOc,WA3II,EAgJpBnB,WAhJoB,EAiJNK,eAAOe,WAjJD,EAkJXf,eAAOgB,WAlJI,EAuJpBrB,WAvJoB,EAwJAK,eAAOiB,YAxJP,EAyJXjB,eAAOkB,YAzJI,EA8JpBvB,WA9JoB,EA+JNK,eAAOmB,YA/JD,EAgKXnB,eAAOoB,YAhKI,EAqKpBzB,WArKoB,EAsKNK,eAAOqB,YAtKD,EAuKXrB,eAAOsB,YAvKI,EA6KpBvB,mBA7KoB,EAiLFC,eAAOG,WAjLL,EAqLFH,eAAOI,WArLL,EA0LbJ,eAAOU,WA1LM,EAgMAV,eAAOa,WAhMP,EAiMXb,eAAOc,WAjMI,EAqMAd,eAAOe,WArMP,EAsMXf,eAAOgB,WAtMI,EA2MXhB,eAAOU,WA3MI,EAiNAV,eAAOmB,YAjNP,EAkNXnB,eAAOoB,YAlNI,EAsNApB,eAAOqB,YAtNP,EAuNXrB,eAAOsB,YAvNI,EA4NXtB,eAAOU,WA5NI,EAmOpBlB,oBAnOoB,EAuOpBG,WAvOoB,EAyOAK,eAAOuB,WAzOP,EA0OXvB,eAAOwB,WA1OI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  focusStyles\n} 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  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\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  &.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\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  &.warning {\n    ${ChipContent} {\n      background-color: ${COLORS.warning_100};\n      color: ${COLORS.warning_600};\n    }\n  }\n\n  &.interactive.warning:hover:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_200};\n      color: ${COLORS.warning_700};\n    }\n  }\n\n  &.interactive.warning:active:not(.action-within) {\n    ${ChipContent} {\n      background: ${COLORS.warning_300};\n      color: ${COLORS.warning_800};\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\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  &.warning {\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: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.
@@ -13,8 +13,5 @@ import styled from 'styled-components';
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
 export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n"])));
 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  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\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  &:focus {\n    ", "\n  }\n\n  &.normal {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\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    }\n  }\n\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\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    }\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  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\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    }\n  }\n\n  &.error {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\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    }\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  &.warning {\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: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    }\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.warning_100, COLORS.warning_600, ChipContent, COLORS.warning_200, COLORS.warning_700, ChipContent, COLORS.warning_300, COLORS.warning_800, 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.warning_200, COLORS.warning_700, COLORS.warning_300, COLORS.warning_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
-export var 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    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error,\n  &.error:hover {\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);
+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\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  &.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\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  &.warning {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.warning:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.warning:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\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\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  &.warning {\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: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.warning_100, COLORS.warning_600, ChipContent, COLORS.warning_200, COLORS.warning_700, ChipContent, COLORS.warning_300, COLORS.warning_800, 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.warning_200, COLORS.warning_700, COLORS.warning_300, COLORS.warning_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