@activecollab/components 1.0.181 → 1.0.183

package/dist/cjs/components/Chip/Chip.js

@@ -13,7 +13,7 @@ var _Styles = require("./Styles");
 
 var _Typography = require("../Typography/Typography");
 
-var _excluded = ["leftAdornment", "label", "onClose", "size"];
+var _excluded = ["leftAdornment", "label", "onClose", "size", "color", "backgroundColor", "closeClassName", "isLabel"];
 
 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); }
 
@@ -31,10 +31,18 @@ var Chip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       onClose = _ref.onClose,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "regular" : _ref$size,
+      color = _ref.color,
+      backgroundColor = _ref.backgroundColor,
+      closeClassName = _ref.closeClassName,
+      isLabel = _ref.isLabel,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var showClose = typeof onClose === "function";
   var variant = (0, _react.useMemo)(function () {
+    if (isLabel) {
+      return "Caption 2";
+    }
+
     switch (size) {
       case "regular":
         return "Body 2";
@@ -45,20 +53,24 @@ var Chip = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       default:
         return "Caption 1";
     }
-  }, [size]);
+  }, [isLabel, size]);
   return /*#__PURE__*/_react.default.createElement(_Styles.ChipContainer, _extends({}, rest, {
     ref: ref,
     $size: size,
-    $showClose: showClose
+    $showClose: showClose,
+    $color: color,
+    $backgroundColor: backgroundColor,
+    $isLabel: isLabel,
+    "data-testid": "chip-container"
   }), leftAdornment, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     variant: variant,
-    className: "tw-flex-1 tw-truncate"
+    "data-testid": "chip-typography"
   }, label), showClose ? /*#__PURE__*/_react.default.createElement(_Styles.ChipTrigger, {
     $size: size,
     onClick: onClose,
-    className: "tw-ml-0.5"
+    className: closeClassName
   }, /*#__PURE__*/_react.default.createElement(_Styles.ChipCloseIcon, {
-    fill: "currentColor"
+    fill: color ? color : "currentColor"
   })) : null);
 });
 

package/dist/cjs/components/Chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","rest","showClose","variant","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;AASO,IAAMA,IAAI,gBAAGC,eAAMC,UAAN,CAGlB,gBAA+DC,GAA/D,EAAuE;AAAA,MAApEC,aAAoE,QAApEA,aAAoE;AAAA,MAArDC,KAAqD,QAArDA,KAAqD;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,uBAArCC,IAAqC;AAAA,MAArCA,IAAqC,0BAA9B,SAA8B;AAAA,MAAhBC,IAAgB;;AACvE,MAAMC,SAAS,GAAG,OAAOH,OAAP,KAAmB,UAArC;AACA,MAAMI,OAAO,GAAG,oBAAQ,YAAM;AAC5B,YAAQH,IAAR;AACE,WAAK,SAAL;AACE,eAAO,QAAP;;AACF,WAAK,KAAL;AACE,eAAO,QAAP;;AACF;AACE,eAAO,WAAP;AANJ;AAQD,GATe,EASb,CAACA,IAAD,CATa,CAAhB;AAUA,sBACE,6BAAC,qBAAD,eAAmBC,IAAnB;AAAyB,IAAA,GAAG,EAAEL,GAA9B;AAAmC,IAAA,KAAK,EAAEI,IAA1C;AAAgD,IAAA,UAAU,EAAEE;AAA5D,MACGL,aADH,eAEE,6BAAC,sBAAD;AAAY,IAAA,OAAO,EAAEM,OAArB;AAA8B,IAAA,SAAS,EAAE;AAAzC,KACGL,KADH,CAFF,EAKGI,SAAS,gBACR,6BAAC,mBAAD;AAAa,IAAA,KAAK,EAAEF,IAApB;AAA0B,IAAA,OAAO,EAAED,OAAnC;AAA4C,IAAA,SAAS,EAAE;AAAvD,kBACE,6BAAC,qBAAD;AAAe,IAAA,IAAI,EAAC;AAApB,IADF,CADQ,GAIN,IATN,CADF;AAaD,CA5BmB,CAAb;;;AA8BPN,IAAI,CAACW,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface ChipProps {\n  label: string;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  leftAdornment?: ReactNode;\n  size?: InputSize;\n}\n\nexport const Chip = React.forwardRef<\n  HTMLDivElement,\n  ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(({ leftAdornment, label, onClose, size = \"regular\", ...rest }, ref) => {\n  const showClose = typeof onClose === \"function\";\n  const variant = useMemo(() => {\n    switch (size) {\n      case \"regular\":\n        return \"Body 2\";\n      case \"big\":\n        return \"Body 1\";\n      default:\n        return \"Caption 1\";\n    }\n  }, [size]);\n  return (\n    <ChipContainer {...rest} ref={ref} $size={size} $showClose={showClose}>\n      {leftAdornment}\n      <Typography variant={variant} className={\"tw-flex-1 tw-truncate\"}>\n        {label}\n      </Typography>\n      {showClose ? (\n        <ChipTrigger $size={size} onClick={onClose} className={\"tw-ml-0.5\"}>\n          <ChipCloseIcon fill=\"currentColor\" />\n        </ChipTrigger>\n      ) : null}\n    </ChipContainer>\n  );\n});\n\nChip.displayName = \"Chip\";\n"],"file":"Chip.js"}
+{"version":3,"sources":["../../../../src/components/Chip/Chip.tsx"],"names":["Chip","React","forwardRef","ref","leftAdornment","label","onClose","size","color","backgroundColor","closeClassName","isLabel","rest","showClose","variant","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;AAaO,IAAMA,IAAI,gBAAGC,eAAMC,UAAN,CAIlB,gBAYEC,GAZF,EAaK;AAAA,MAXDC,aAWC,QAXDA,aAWC;AAAA,MAVDC,KAUC,QAVDA,KAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,uBARDC,IAQC;AAAA,MARDA,IAQC,0BARM,SAQN;AAAA,MAPDC,KAOC,QAPDA,KAOC;AAAA,MANDC,eAMC,QANDA,eAMC;AAAA,MALDC,cAKC,QALDA,cAKC;AAAA,MAJDC,OAIC,QAJDA,OAIC;AAAA,MAHEC,IAGF;;AACH,MAAMC,SAAS,GAAG,OAAOP,OAAP,KAAmB,UAArC;AACA,MAAMQ,OAAO,GAAG,oBAAQ,YAAM;AAC5B,QAAIH,OAAJ,EAAa;AACX,aAAO,WAAP;AACD;;AACD,YAAQJ,IAAR;AACE,WAAK,SAAL;AACE,eAAO,QAAP;;AACF,WAAK,KAAL;AACE,eAAO,QAAP;;AACF;AACE,eAAO,WAAP;AANJ;AAQD,GAZe,EAYb,CAACI,OAAD,EAAUJ,IAAV,CAZa,CAAhB;AAaA,sBACE,6BAAC,qBAAD,eACMK,IADN;AAEE,IAAA,GAAG,EAAET,GAFP;AAGE,IAAA,KAAK,EAAEI,IAHT;AAIE,IAAA,UAAU,EAAEM,SAJd;AAKE,IAAA,MAAM,EAAEL,KALV;AAME,IAAA,gBAAgB,EAAEC,eANpB;AAOE,IAAA,QAAQ,EAAEE,OAPZ;AAQE,mBAAa;AARf,MAUGP,aAVH,eAWE,6BAAC,sBAAD;AAAY,IAAA,OAAO,EAAEU,OAArB;AAA8B,mBAAa;AAA3C,KACGT,KADH,CAXF,EAcGQ,SAAS,gBACR,6BAAC,mBAAD;AACE,IAAA,KAAK,EAAEN,IADT;AAEE,IAAA,OAAO,EAAED,OAFX;AAGE,IAAA,SAAS,EAAEI;AAHb,kBAKE,6BAAC,qBAAD;AAAe,IAAA,IAAI,EAAEF,KAAK,GAAGA,KAAH,GAAW;AAArC,IALF,CADQ,GAQN,IAtBN,CADF;AA0BD,CA1DiB,CAAb;;;AA6DPR,IAAI,CAACe,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { ReactNode, useMemo } from \"react\";\nimport { ChipCloseIcon, ChipContainer, ChipTrigger } from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport interface ChipProps {\n  label: string;\n  onClose?: React.MouseEventHandler<HTMLButtonElement>;\n  leftAdornment?: ReactNode;\n  size?: InputSize;\n  color?: string;\n  backgroundColor?: string;\n  closeClassName?: string;\n  isLabel?: boolean;\n}\n\nexport const Chip = React.forwardRef<\n  HTMLDivElement,\n  ChipProps & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof ChipProps>\n>(\n  (\n    {\n      leftAdornment,\n      label,\n      onClose,\n      size = \"regular\",\n      color,\n      backgroundColor,\n      closeClassName,\n      isLabel,\n      ...rest\n    },\n    ref\n  ) => {\n    const showClose = typeof onClose === \"function\";\n    const variant = useMemo(() => {\n      if (isLabel) {\n        return \"Caption 2\";\n      }\n      switch (size) {\n        case \"regular\":\n          return \"Body 2\";\n        case \"big\":\n          return \"Body 1\";\n        default:\n          return \"Caption 1\";\n      }\n    }, [isLabel, size]);\n    return (\n      <ChipContainer\n        {...rest}\n        ref={ref}\n        $size={size}\n        $showClose={showClose}\n        $color={color}\n        $backgroundColor={backgroundColor}\n        $isLabel={isLabel}\n        data-testid={\"chip-container\"}\n      >\n        {leftAdornment}\n        <Typography variant={variant} data-testid={\"chip-typography\"}>\n          {label}\n        </Typography>\n        {showClose ? (\n          <ChipTrigger\n            $size={size}\n            onClick={onClose}\n            className={closeClassName}\n          >\n            <ChipCloseIcon fill={color ? color : \"currentColor\"} />\n          </ChipTrigger>\n        ) : null}\n      </ChipContainer>\n    );\n  }\n);\n\nChip.displayName = \"Chip\";\n"],"file":"Chip.js"}

package/dist/cjs/components/Chip/Styles.js

@@ -17,6 +17,8 @@ var _Trigger = require("../Trigger");
 
 var _FontStyle = require("../FontStyle");
 
+var _Styles = require("../Typography/Styles");
+
 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; }
@@ -24,7 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var ChipContainer = _styledComponents.default.div.withConfig({
   displayName: "Styles__ChipContainer",
   componentId: "sc-7s0bd1-0"
-})(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], {
+})(["min-width:44px;max-width:220px;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "{", " ", "}", " ", " ", " ", " ", " ", " ", ""], {
   "height": "1.5rem"
 }, {
   "borderRadius": "0.25rem"
@@ -48,6 +50,21 @@ var ChipContainer = _styledComponents.default.div.withConfig({
   "fontWeight": "400"
 }, {
   "backgroundColor": "var(--color-theme-400)"
+}, _Styles.StyledTypography, {
+  "flex": "1 1 0%"
+}, {
+  "overflow": "hidden",
+  "textOverflow": "ellipsis",
+  "whiteSpace": "nowrap"
+}, function (_ref) {
+  var $color = _ref.$color;
+  return $color && (0, _styledComponents.css)(["", "{color:", ";}"], _Styles.StyledTypography, $color);
+}, function (_ref2) {
+  var $isLabel = _ref2.$isLabel;
+  return $isLabel && (0, _styledComponents.css)(["", "{color:#303037;}"], _Styles.StyledTypography);
+}, function (_ref3) {
+  var $backgroundColor = _ref3.$backgroundColor;
+  return $backgroundColor && (0, _styledComponents.css)(["background-color:", ";"], $backgroundColor);
 }, function (props) {
   return props.$showClose ? null : (0, _styledComponents.css)(["", ""], {
     "paddingRight": "0.375rem"
@@ -79,12 +96,14 @@ ChipLabel.displayName = "ChipLabel";
 var ChipTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
   displayName: "Styles__ChipTrigger",
   componentId: "sc-7s0bd1-2"
-})(["", " ", " ", " &:hover{", "}", " ", " ", ""], {
+})(["", " ", " ", " ", " &:hover{", "}", " ", " ", ""], {
   "display": "flex"
 }, {
   "alignItems": "center"
 }, {
   "justifyContent": "center"
+}, {
+  "marginLeft": "0.125rem"
 }, {
   "backgroundColor": "var(--color-theme-transparent-400)"
 }, function (props) {

package/dist/cjs/components/Chip/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Chip/Styles.ts"],"names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","props","$showClose","css","$size","displayName","ChipLabel","span","ChipTrigger","Trigger","ChipCloseIcon","CloseSmallIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,iIAMpB;AAAA;AAAA,CANoB,EAOpB;AAAA;AAAA,CAPoB,EAQpB;AAAA;AAAA,CARoB,EASpB;AAAA;AAAA,CAToB,EAUpB;AAAA;AAAA,CAVoB,EAWpB;AAAA;AAAA,CAXoB,EAatBC,oBAbsB,EActBC,8BAdsB,EAiBpB;AAAA;AAAA,CAjBoB,EAkBpB;AAAA;AAAA,CAlBoB,EAmBpB;AAAA;AAAA,CAnBoB,EAoBpB;AAAA;AAAA,CApBoB,EAqBpB;AAAA;AAAA,CArBoB,EAwBpB;AAAA;AAAA,CAxBoB,EA0BtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,GACI,IADJ,OAEIC,qBAFJ,YAGU;AAAA;AAAA,GAHV,CADA;AAAA,CA1BsB,EAiCtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,QACAD,qBADA,mBADA;AAAA,CAjCsB,EAuCtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,mBADA;AAAA,CAvCsB,EA6CtB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,KAAhB,QACAD,qBADA,mBADA;AAAA,CA7CsB,CAAnB;;;AAoDPP,aAAa,CAACS,WAAd,GAA4B,eAA5B;;AAEO,IAAMC,SAAS,GAAGT,0BAAOU,IAAV;AAAA;AAAA;AAAA,kBAChB;AAAA;AAAA,CADgB,EAEhB;AAAA;AAAA;AAAA;AAAA,CAFgB,CAAf;;;AAKPD,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEO,IAAMG,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,mDAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAMhB;AAAA;AAAA,CANgB,EASpB,UAACR,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,SAAhB,QACAD,qBADA,8BADA;AAAA,CAToB,EAgBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,OAAhB,QACAD,qBADA,8BADA;AAAA,CAhBoB,EAuBpB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,KAAN,KAAgB,KAAhB,QACAD,qBADA,8BADA;AAAA,CAvBoB,CAAjB;;AA+BPK,WAAW,CAACH,WAAZ,GAA0B,aAA1B;AAEO,IAAMK,aAAa,GAAG,+BAAOC,qBAAP,CAAH;AAAA;AAAA;AAAA,aACpB;AAAA;AAAA,CADoB,CAAnB;;AAIPD,aAAa,CAACL,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const ChipContainer = styled.div<{\n  $showClose?: boolean;\n  $size?: string;\n}>`\n  min-width: 44px;\n  max-width: 220px;\n  ${tw`tw-h-6`}\n  ${tw`tw-rounded`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  ${tw`tw-pl-1.5`}\n  ${tw`tw-overflow-hidden`}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  // font\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n\n  // background\n  ${tw`tw-bg-theme-400`}\n\n  ${(props) =>\n    props.$showClose\n      ? null\n      : css`\n          ${tw`tw-pr-1.5`}\n        `}\n\n  ${(props) =>\n    props.$size === \"regular\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      height: 18px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 30px;\n    `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n  ${tw`tw-w-full`}\n  ${tw`tw-truncate`}\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<{ $size?: string }>`\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  ${tw`tw-justify-center`}\n\n  &:hover {\n    ${tw`tw-bg-theme-transparent-400`}\n  }\n\n  ${(props) =>\n    props.$size === \"regular\" &&\n    css`\n      height: 24px;\n      width: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      height: 18px;\n      width: 18px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 30px;\n      width: 30px;\n    `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n  ${tw`tw-text-theme-700`}\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Chip/Styles.ts"],"names":["ChipContainer","styled","div","FontStyle","BoxSizingStyle","StyledTypography","$color","css","$isLabel","$backgroundColor","props","$showClose","$size","displayName","ChipLabel","span","ChipTrigger","Trigger","ChipCloseIcon","CloseSmallIcon"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,aAAa,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+JASpB;AAAA;AAAA,CAToB,EAUpB;AAAA;AAAA,CAVoB,EAWpB;AAAA;AAAA,CAXoB,EAYpB;AAAA;AAAA,CAZoB,EAapB;AAAA;AAAA,CAboB,EAcpB;AAAA;AAAA,CAdoB,EAgBtBC,oBAhBsB,EAiBtBC,8BAjBsB,EAoBpB;AAAA;AAAA,CApBoB,EAqBpB;AAAA;AAAA,CArBoB,EAsBpB;AAAA;AAAA,CAtBoB,EAuBpB;AAAA;AAAA,CAvBoB,EAwBpB;AAAA;AAAA,CAxBoB,EA2BpB;AAAA;AAAA,CA3BoB,EA6BtBC,wBA7BsB,EA8BlB;AAAA;AAAA,CA9BkB,EA+BlB;AAAA;AAAA;AAAA;AAAA,CA/BkB,EAkCtB;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,SACAA,MAAM,QACNC,qBADM,yBAEFF,wBAFE,EAGOC,MAHP,CADN;AAAA,CAlCsB,EAyCtB;AAAA,MAAGE,QAAH,SAAGA,QAAH;AAAA,SACAA,QAAQ,QACRD,qBADQ,4BAEJF,wBAFI,CADR;AAAA,CAzCsB,EAiDtB;AAAA,MAAGI,gBAAH,SAAGA,gBAAH;AAAA,SACAA,gBAAgB,QAChBF,qBADgB,8BAEME,gBAFN,CADhB;AAAA,CAjDsB,EAuDtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,GACI,IADJ,OAEIJ,qBAFJ,YAGU;AAAA;AAAA,GAHV,CADA;AAAA,CAvDsB,EA8DtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,SAAhB,QACAL,qBADA,mBADA;AAAA,CA9DsB,EAoEtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,QACAL,qBADA,mBADA;AAAA,CApEsB,EA0EtB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,KAAhB,QACAL,qBADA,mBADA;AAAA,CA1EsB,CAAnB;;;AAiFPP,aAAa,CAACa,WAAd,GAA4B,eAA5B;;AAEO,IAAMC,SAAS,GAAGb,0BAAOc,IAAV;AAAA;AAAA;AAAA,kBAChB;AAAA;AAAA,CADgB,EAEhB;AAAA;AAAA;AAAA;AAAA,CAFgB,CAAf;;;AAKPD,SAAS,CAACD,WAAV,GAAwB,WAAxB;AAEO,IAAMG,WAAW,GAAG,+BAAOC,gBAAP,CAAH;AAAA;AAAA;AAAA,wDAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAQhB;AAAA;AAAA,CARgB,EAWpB,UAACP,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,SAAhB,QACAL,qBADA,8BADA;AAAA,CAXoB,EAkBpB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,OAAhB,QACAL,qBADA,8BADA;AAAA,CAlBoB,EAyBpB,UAACG,KAAD;AAAA,SACAA,KAAK,CAACE,KAAN,KAAgB,KAAhB,QACAL,qBADA,8BADA;AAAA,CAzBoB,CAAjB;;AAiCPS,WAAW,CAACH,WAAZ,GAA0B,aAA1B;AAEO,IAAMK,aAAa,GAAG,+BAAOC,qBAAP,CAAH;AAAA;AAAA;AAAA,aACpB;AAAA;AAAA,CADoB,CAAnB;;AAIPD,aAAa,CAACL,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { CloseSmallIcon } from \"../Icons\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { Trigger } from \"../Trigger\";\nimport { FontStyle } from \"../FontStyle\";\nimport { StyledTypography } from \"../Typography/Styles\";\n\nexport const ChipContainer = styled.div<{\n  $showClose?: boolean;\n  $size?: string;\n  $color?: string;\n  $backgroundColor?: string;\n  $isLabel?: boolean;\n}>`\n  min-width: 44px;\n  max-width: 220px;\n  ${tw`tw-h-6`}\n  ${tw`tw-rounded`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  ${tw`tw-pl-1.5`}\n  ${tw`tw-overflow-hidden`}\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  // font\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n\n  // background\n  ${tw`tw-bg-theme-400`}\n\n  ${StyledTypography} {\n    ${tw`tw-flex-1`}\n    ${tw`tw-truncate`}\n  }\n\n  ${({ $color }) =>\n    $color &&\n    css`\n      ${StyledTypography} {\n        color: ${$color};\n      }\n    `}\n  ${({ $isLabel }) =>\n    $isLabel &&\n    css`\n      ${StyledTypography} {\n        color: #303037;\n      }\n    `}\n\n  ${({ $backgroundColor }) =>\n    $backgroundColor &&\n    css`\n      background-color: ${$backgroundColor};\n    `}\n\n  ${(props) =>\n    props.$showClose\n      ? null\n      : css`\n          ${tw`tw-pr-1.5`}\n        `}\n\n  ${(props) =>\n    props.$size === \"regular\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      height: 18px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 30px;\n    `}\n`;\n\nChipContainer.displayName = \"ChipContainer\";\n\nexport const ChipLabel = styled.span`\n  ${tw`tw-w-full`}\n  ${tw`tw-truncate`}\n`;\n\nChipLabel.displayName = \"ChipLabel\";\n\nexport const ChipTrigger = styled(Trigger)<{ $size?: string }>`\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  ${tw`tw-justify-center`}\n  ${tw`tw-ml-0.5`}\n\n\n  &:hover {\n    ${tw`tw-bg-theme-transparent-400`}\n  }\n\n  ${(props) =>\n    props.$size === \"regular\" &&\n    css`\n      height: 24px;\n      width: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      height: 18px;\n      width: 18px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 30px;\n      width: 30px;\n    `}\n`;\n\nChipTrigger.displayName = \"ChipTrigger\";\n\nexport const ChipCloseIcon = styled(CloseSmallIcon)`\n  ${tw`tw-text-theme-700`}\n`;\n\nChipCloseIcon.displayName = \"ChipCloseIcon\";\n"],"file":"Styles.js"}

package/dist/cjs/components/ComboBox/ComboBox.js

@@ -53,7 +53,7 @@ var _ConditionWrapper = require("../../helpers/ConditionWrapper/ConditionWrapper
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName"];
+var _excluded = ["options", "selected", "loading", "loadingText", "onChange", "placeholder", "handleEmptyAction", "disabled", "size", "invalid", "type", "renderChip", "forceCloseMenu", "renderOption", "limitChips", "hiddenNumberText", "inPortal", "inputWrapperClassName", "scrollWrapper"];
 
 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); }
 
@@ -109,6 +109,7 @@ var ComboBox = function ComboBox(_ref) {
       _ref$inPortal = _ref.inPortal,
       inPortal = _ref$inPortal === void 0 ? false : _ref$inPortal,
       inputWrapperClassName = _ref.inputWrapperClassName,
+      scrollWrapper = _ref.scrollWrapper,
       prop = _objectWithoutProperties(_ref, _excluded);
 
   var selectedName = (0, _react.useMemo)(function () {
@@ -272,24 +273,39 @@ var ComboBox = function ComboBox(_ref) {
         "marginRight": "0.125rem"
       }
     })) : undefined;
+
+    var onClose = function onClose(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      if (Array.isArray(selected) && selected.includes(option.id)) {
+        if (typeof onChange === "function") {
+          var newSelected = selected.filter(function (item) {
+            return item !== option.id;
+          });
+          onChange(newSelected);
+        }
+      }
+    };
+
+    var showOnClose = true;
+
+    if (disabled) {
+      showOnClose = false;
+    }
+
+    if (option.color) {
+      showOnClose = false;
+    }
+
     return /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
       className: "c-combo-box-chip",
       leftAdornment: leftAdornment,
       label: option.name,
       key: index,
-      onClose: !disabled ? function (e) {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (Array.isArray(selected) && selected.includes(option.id)) {
-          if (typeof onChange === "function") {
-            var newSelected = selected.filter(function (item) {
-              return item !== option.id;
-            });
-            onChange(newSelected);
-          }
-        }
-      } : undefined,
+      backgroundColor: option.color,
+      isLabel: Boolean(option.color),
+      onClose: showOnClose ? onClose : undefined,
       size: size
     });
   }, [disabled, onChange, renderChip, selected, size]);
@@ -350,7 +366,9 @@ var ComboBox = function ComboBox(_ref) {
 
       (_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.focus();
     },
-    $_css3: autoSize === "auto" ? "auto" : undefined
+    $_css3: autoSize === "auto" ? "auto" : undefined,
+    $_css4: autoSize === "auto" && scrollWrapper ? "scroll" : undefined,
+    $_css5: autoSize === "auto" && scrollWrapper ? "80px" : undefined
   }, /*#__PURE__*/_react.default.createElement(_Styles.StyledChipWrapper, {
     $autoSize: autoSize,
     $open: open,
@@ -455,8 +473,12 @@ var _StyledTypography = (0, _styledComponents.default)(_Typography.Typography).w
 var _StyledStyledInputWrapper = (0, _styledComponents.default)(_Styles2.StyledInputWrapper).withConfig({
   displayName: "ComboBox___StyledStyledInputWrapper",
   componentId: "sc-uvsz9l-2"
-})(["display:flex;justify-content:space-between;flex:1;height:", ";"], function (p) {
+})(["display:flex;justify-content:space-between;flex:1;height:", ";overflow-y:", ";max-height:", ";"], function (p) {
   return p.$_css3;
+}, function (p) {
+  return p.$_css4;
+}, function (p) {
+  return p.$_css5;
 });
 
 var _StyledTrigger = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({

package/dist/cjs/components/ComboBox/ComboBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","inPortal","inputWrapperClassName","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","comboBoxRef","open","setOpen","current","contains","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","handleBlur","renderChipAdornment","index","avatarProps","leftAdornment","undefined","Array","isArray","includes","newSelected","filter","item","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","display","flex","alignSelf","width","children","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n  IAutocompleteProps,\n  isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledChipWrapper,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInput, StyledInputWrapper } from \"../Input/Styles\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\nimport { Trigger } from \"../Trigger\";\nimport { Typography } from \"../Typography/Typography\";\nimport tw from \"twin.macro\";\nimport { Portal } from \"../../helpers\";\nimport { ConditionalWrapper } from \"../../helpers/ConditionWrapper/ConditionWrapper\";\nimport classNames from \"classnames\";\n\nexport interface IComboBoxProps\n  extends Omit<IAutocompleteProps, \"handleChange\" | \"inputEl\"> {\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (\n    e: (string | number)[] | string | number | null | undefined\n  ) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n  /** Invalid state */\n  invalid?: boolean;\n  /** Render Chip */\n  renderChip?: <T extends IOptionItemProps>(\n    item: T,\n    key?: string | number\n  ) => JSX.Element;\n  /** Close menu on change */\n  forceCloseMenu?: boolean;\n  /** Limit chips */\n  limitChips?: number;\n  /** Hidden number text */\n  hiddenNumberText?: (hidden: number) => string;\n  /** Render Autocomplete in <Portal> */\n  inPortal?: boolean;\n  /** inputWrapperClassName */\n  inputWrapperClassName?: string;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\n  type = \"single\",\n  renderChip,\n  forceCloseMenu = type === \"single\",\n  renderOption,\n  limitChips = 2,\n  hiddenNumberText,\n  inPortal = false,\n  inputWrapperClassName,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const chipWrapper = useRef<HTMLDivElement>(null);\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const [open, setOpen] = useState(false);\n\n  useOnClickOutside(wrapperRef, (e) => {\n    if (e.target && comboBoxRef.current?.contains(e.target as Node)) {\n      return;\n    }\n    setOpen(false);\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n      if (e.key === \"Enter\" && type === \"multiple\") {\n        setValue(\"\");\n      }\n    },\n    [open, selectedName, type]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      onChange?.(selectedValue);\n      if (forceCloseMenu) {\n        setOpen(false);\n      }\n    },\n    [forceCloseMenu, onChange]\n  );\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback(\n    (option, props) => {\n      if (typeof renderOption === \"function\") {\n        return renderOption(option, props);\n      }\n      if (type === \"multiple\") {\n        return (\n          <>\n            <OptionContent\n              imageUrl={option.image}\n              color={option.color}\n              textColor={option.textColor}\n              name={option.name}\n            />\n            <Checkbox {...props} />\n          </>\n        );\n      }\n      return (\n        <>\n          <OptionContent\n            imageUrl={option.image}\n            color={option.color}\n            textColor={option.textColor}\n            name={option.name}\n          />\n          <RadioButton {...props} />\n        </>\n      );\n    },\n    [type, renderOption]\n  );\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (type === \"multiple\") {\n        onChange?.([]);\n      } else {\n        onChange?.(\"\");\n      }\n\n      setOpen(false);\n    },\n    [type, onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const renderChipAdornment = useCallback(\n    (option, index) => {\n      if (typeof renderChip === \"function\") {\n        return renderChip(option, index);\n      }\n      const avatarProps: Partial<IAvatar> = {\n        size: 18,\n      };\n      switch (size) {\n        case \"big\":\n          avatarProps.size = 22;\n          break;\n        case \"small\":\n          avatarProps.size = 14;\n          break;\n      }\n      const leftAdornment = option.image ? (\n        <Avatar\n          css={`\n            ${tw`tw-my-0.5`}\n            ${tw`tw-mr-0.5`}\n          `}\n          url={option.image}\n          {...avatarProps}\n        />\n      ) : undefined;\n\n      return (\n        <Chip\n          className={\"c-combo-box-chip\"}\n          leftAdornment={leftAdornment}\n          label={option.name}\n          key={index}\n          onClose={\n            !disabled\n              ? (e) => {\n                  e.preventDefault();\n                  e.stopPropagation();\n                  if (Array.isArray(selected) && selected.includes(option.id)) {\n                    if (typeof onChange === \"function\") {\n                      const newSelected = selected.filter(\n                        (item) => item !== option.id\n                      );\n                      onChange(newSelected);\n                    }\n                  }\n                }\n              : undefined\n          }\n          size={size}\n        />\n      );\n    },\n    [disabled, onChange, renderChip, selected, size]\n  );\n\n  const autoSize = useMemo(() => {\n    if (\n      type === \"multiple\" &&\n      open &&\n      Array.isArray(selected) &&\n      selected.length > 1\n    ) {\n      return \"auto\";\n    }\n    return size;\n  }, [open, selected, size, type]);\n\n  const startAdornment = useMemo(() => {\n    if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n      const elements: JSX.Element[] = [];\n      let total = 0;\n      options.forEach((option, index) => {\n        const isGrouped = isOptionGroup(option);\n        if (selected.includes(option.id) && !isGrouped) {\n          total = total + 1;\n          elements.push(renderChipAdornment(option, index));\n        } else if (isGrouped) {\n          const groupedOptions = option.options.filter((o) =>\n            selected.includes(o.id)\n          );\n          total = total + groupedOptions.length;\n          if (groupedOptions.length > 0) {\n            groupedOptions.forEach((o, _index) => {\n              elements.push(renderChipAdornment(o, `${index}_${_index}`));\n            });\n          }\n        }\n      });\n      let hidden = 0;\n      if (!open && limitChips > 0 && elements.length > limitChips) {\n        hidden = elements.splice(\n          limitChips,\n          elements.length - limitChips\n        ).length;\n      }\n\n      return (\n        <Fragment>\n          {elements}\n          {hidden > 0 && (\n            <Typography\n              variant={\n                size === \"small\"\n                  ? \"Caption 1\"\n                  : size === \"regular\"\n                  ? \"Body 2\"\n                  : \"Body 1\"\n              }\n              css={`\n                display: flex;\n                flex-shrink: 0;\n                align-items: center;\n              `}\n            >\n              {typeof hiddenNumberText === \"function\"\n                ? hiddenNumberText(hidden)\n                : `+${hidden}`}\n            </Typography>\n          )}\n        </Fragment>\n      );\n    }\n    return undefined;\n  }, [\n    type,\n    selected,\n    options,\n    open,\n    limitChips,\n    hiddenNumberText,\n    renderChipAdornment,\n    size,\n  ]);\n\n  const showXIcon =\n    Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n  const hasSelected =\n    type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n  return (\n    <div className=\"c-combo-box\">\n      {type === \"multiple\" ? (\n        <>\n          <StyledInputWrapper\n            $size={size}\n            $invalid={invalid}\n            ref={comboBoxRef}\n            css={`\n              display: flex;\n              justify-content: space-between;\n              flex: 1;\n              height: ${autoSize === \"auto\" ? \"auto\" : undefined};\n            `}\n            className={classNames(\n              \"c-combo-box-input-wrapper\",\n              inputWrapperClassName\n            )}\n            onClick={() => {\n              elementRef.current?.focus();\n            }}\n          >\n            <StyledChipWrapper\n              $autoSize={autoSize}\n              $open={open}\n              ref={chipWrapper}\n            >\n              {startAdornment}\n              <StyledInput\n                className={\"c-combo-box-input\"}\n                onBlur={handleBlur}\n                onFocus={onOpen}\n                ref={handleRef}\n                value={loading && loadingText ? loadingText : value}\n                onKeyDown={handleOnKeyDown}\n                onChange={handleOnChange}\n                placeholder={!hasSelected ? placeholder : undefined}\n                disabled={disabled}\n                $size={size}\n                $loading={loading}\n                style={{\n                  display: \"flex\",\n                  flex: 1,\n                  alignSelf: \"center\",\n                  width: autoSize === \"auto\" ? \"auto\" : \"100%\",\n                }}\n              />\n            </StyledChipWrapper>\n            {!disabled && (\n              <>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : (\n                  <>\n                    {showXIcon && (\n                      <Trigger\n                        onMouseDown={handleMouseDown}\n                        onClick={handleDeselect}\n                        data-testid={\"deselect-all\"}\n                        css={`\n                          display: flex;\n                          justify-content: center;\n                        `}\n                      >\n                        <StyledComboBoxCloseSmallIcon />\n                      </Trigger>\n                    )}\n                    <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n                  </>\n                )}\n              </>\n            )}\n          </StyledInputWrapper>\n        </>\n      ) : (\n        <StyledComboBoxInput\n          className={classNames(\"c-combo-box-input\", inputWrapperClassName)}\n          onBlur={handleBlur}\n          onFocus={onOpen}\n          wrapRef={comboBoxRef}\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n          invalid={invalid}\n          $loading={loading}\n          startAdornment={startAdornment}\n          endAdornment={\n            !disabled ? (\n              <InputAdornment disablePointerEvents={disabled}>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : selected ? (\n                  <Button\n                    onMouseDown={handleMouseDown}\n                    onClick={handleDeselect}\n                    variant=\"text gray\"\n                    size=\"small\"\n                  >\n                    <StyledComboBoxCloseSmallIcon />\n                  </Button>\n                ) : null}\n                <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n              </InputAdornment>\n            ) : null\n          }\n        />\n      )}\n\n      {!disabled ? (\n        <ConditionalWrapper\n          condition={inPortal}\n          wrap={(children) => <Portal>{children}</Portal>}\n        >\n          <Popper\n            anchorEl={comboBoxRef.current}\n            open={open}\n            placement=\"bottom\"\n            style={{\n              zIndex: 10,\n              width: comboBoxRef.current?.clientWidth,\n            }}\n            ref={wrapperRef}\n            strategy={\"fixed\"}\n          >\n            <RemoveScroll noIsolation allowPinchZoom>\n              <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n                <Autocomplete\n                  {...prop}\n                  inputEl={childNode}\n                  selected={selected}\n                  handleChange={handleChange}\n                  renderOption={handleRenderOption}\n                  options={options}\n                  type={type}\n                  handleEmptyAction={emptyAction}\n                />\n              </StyledComboBoxList>\n            </RemoveScroll>\n          </Popper>\n        </ConditionalWrapper>\n      ) : null}\n    </div>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}
+{"version":3,"sources":["../../../../src/components/ComboBox/ComboBox.tsx"],"names":["ComboBox","options","selected","loading","loadingText","onChange","placeholder","handleEmptyAction","disabled","size","invalid","type","renderChip","forceCloseMenu","renderOption","limitChips","hiddenNumberText","inPortal","inputWrapperClassName","scrollWrapper","prop","selectedName","value","map","v","find","q","id","name","setValue","handleOnChange","e","target","childNode","setChildNode","elementRef","handleRef","wrapperRef","chipWrapper","comboBoxRef","open","setOpen","current","contains","handleOnKeyDown","key","stopPropagation","focus","blur","emptyAction","handleChange","selectedValue","onOpen","handleRenderOption","option","props","image","color","textColor","handleDeselect","handleMouseDown","preventDefault","handleBlur","renderChipAdornment","index","avatarProps","leftAdornment","undefined","onClose","Array","isArray","includes","newSelected","filter","item","showOnClose","Boolean","autoSize","length","startAdornment","elements","total","forEach","isGrouped","push","groupedOptions","o","_index","hidden","splice","showXIcon","hasSelected","display","flex","alignSelf","width","children","zIndex","clientWidth","displayName"],"mappings":"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","sourcesContent":["import React, {\n  FC,\n  useCallback,\n  useState,\n  useEffect,\n  useRef,\n  useMemo,\n  Fragment,\n} from \"react\";\nimport { RadioButton } from \"../RadioButton\";\nimport { Autocomplete } from \"../Autocomplete\";\nimport { Button } from \"../Button/Button\";\nimport {\n  IAutocompleteProps,\n  isOptionGroup,\n} from \"../Autocomplete/Autocomplete\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { Popper } from \"../Popper\";\nimport { IOptionGroupProps, IOptionItemProps } from \"../Select\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { SpinnerLoader } from \"../Loaders/Spinner/SpinnerLoader\";\nimport { OptionContent } from \"../Select/OptionContent/OptionContent\";\nimport {\n  StyledComboBoxCloseSmallIcon,\n  StyledComboBoxCollapseExpandSingleIcon,\n  StyledComboBoxInput,\n  StyledComboBoxList,\n  StyledChipWrapper,\n} from \"./Styles\";\nimport { InputSize } from \"../Input/types\";\nimport { InputAdornment } from \"../Input/InputAdornment\";\nimport { Checkbox } from \"../Checkbox\";\nimport { Chip } from \"../Chip\";\nimport { StyledInput, StyledInputWrapper } from \"../Input/Styles\";\nimport { useOnClickOutside } from \"../../hooks/useOnClickOutside\";\nimport { Avatar, IAvatar } from \"../Avatar\";\nimport { Trigger } from \"../Trigger\";\nimport { Typography } from \"../Typography/Typography\";\nimport tw from \"twin.macro\";\nimport { Portal } from \"../../helpers\";\nimport { ConditionalWrapper } from \"../../helpers/ConditionWrapper/ConditionWrapper\";\nimport classNames from \"classnames\";\n\nexport interface IComboBoxProps\n  extends Omit<IAutocompleteProps, \"handleChange\" | \"inputEl\"> {\n  /** Set combobox in to loading state */\n  loading?: boolean;\n  /** Text to display while in loading state */\n  loadingText?: string;\n  /** onChange callback */\n  onChange?: (\n    e: (string | number)[] | string | number | null | undefined\n  ) => void;\n  /** Placeholder for Select input */\n  placeholder?: string;\n  /** disable Input element */\n  disabled?: boolean;\n  /** Combobox size */\n  size?: InputSize;\n  /** Invalid state */\n  invalid?: boolean;\n  /** Render Chip */\n  renderChip?: <T extends IOptionItemProps>(\n    item: T,\n    key?: string | number\n  ) => JSX.Element;\n  /** Close menu on change */\n  forceCloseMenu?: boolean;\n  /** Limit chips */\n  limitChips?: number;\n  /** Hidden number text */\n  hiddenNumberText?: (hidden: number) => string;\n  /** Render Autocomplete in <Portal> */\n  inPortal?: boolean;\n  /** inputWrapperClassName */\n  inputWrapperClassName?: string;\n  /** scrollWrapper */\n  scrollWrapper?: boolean;\n}\n\nexport const ComboBox: FC<IComboBoxProps> = ({\n  options = [],\n  selected,\n  loading = false,\n  loadingText,\n  onChange,\n  placeholder,\n  handleEmptyAction,\n  disabled = false,\n  size = \"regular\",\n  invalid = false,\n  type = \"single\",\n  renderChip,\n  forceCloseMenu = type === \"single\",\n  renderOption,\n  limitChips = 2,\n  hiddenNumberText,\n  inPortal = false,\n  inputWrapperClassName,\n  scrollWrapper,\n  ...prop\n}) => {\n  const selectedName = useMemo(() => {\n    let value = \"\";\n    if (!selected) {\n      return value;\n    }\n    options.map((v) => {\n      if ((v as IOptionGroupProps)?.options) {\n        return (v as IOptionGroupProps).options.find((q) => {\n          if (q.id === selected) {\n            value = q.name;\n            return;\n          }\n        });\n      } else {\n        if (v.id === selected) {\n          value = v.name;\n          return;\n        }\n      }\n    });\n    return value;\n  }, [options, selected]);\n  const [value, setValue] = useState(selectedName);\n  const handleOnChange = useCallback((e) => setValue(e.target.value), []);\n  const [childNode, setChildNode] = useState<HTMLInputElement | null>();\n  const elementRef = useRef<HTMLInputElement | null>(null);\n  const handleRef = useForkRef(setChildNode, elementRef);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const chipWrapper = useRef<HTMLDivElement>(null);\n  const comboBoxRef = useRef<HTMLDivElement | null>(null);\n\n  const [open, setOpen] = useState(false);\n\n  useOnClickOutside(wrapperRef, (e) => {\n    if (e.target && comboBoxRef.current?.contains(e.target as Node)) {\n      return;\n    }\n    setOpen(false);\n  });\n\n  const handleOnKeyDown = useCallback(\n    (e) => {\n      if (e.key === \"Escape\" && open) {\n        setOpen(false);\n        setValue(selectedName);\n        e.stopPropagation();\n      }\n      if (e.key === \"Enter\" && type === \"multiple\") {\n        setValue(\"\");\n      }\n    },\n    [open, selectedName, type]\n  );\n\n  useEffect(() => {\n    open && childNode?.focus();\n    !open && childNode?.blur();\n  }, [childNode, open]);\n\n  useEffect(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const emptyAction = useCallback(\n    (v) => {\n      handleEmptyAction?.(v);\n      setOpen(false);\n    },\n    [handleEmptyAction]\n  );\n\n  const handleChange = useCallback(\n    (selectedValue) => {\n      onChange?.(selectedValue);\n      if (forceCloseMenu) {\n        setOpen(false);\n      }\n    },\n    [forceCloseMenu, onChange]\n  );\n\n  const onOpen = useCallback(() => {\n    if (!disabled) {\n      setOpen(true);\n    }\n  }, [disabled]);\n\n  const handleRenderOption = useCallback(\n    (option, props) => {\n      if (typeof renderOption === \"function\") {\n        return renderOption(option, props);\n      }\n      if (type === \"multiple\") {\n        return (\n          <>\n            <OptionContent\n              imageUrl={option.image}\n              color={option.color}\n              textColor={option.textColor}\n              name={option.name}\n            />\n            <Checkbox {...props} />\n          </>\n        );\n      }\n      return (\n        <>\n          <OptionContent\n            imageUrl={option.image}\n            color={option.color}\n            textColor={option.textColor}\n            name={option.name}\n          />\n          <RadioButton {...props} />\n        </>\n      );\n    },\n    [type, renderOption]\n  );\n\n  const handleDeselect = useCallback(\n    (e) => {\n      e.stopPropagation();\n      if (type === \"multiple\") {\n        onChange?.([]);\n      } else {\n        onChange?.(\"\");\n      }\n\n      setOpen(false);\n    },\n    [type, onChange]\n  );\n\n  const handleMouseDown = useCallback((e) => {\n    e.preventDefault();\n  }, []);\n\n  const handleBlur = useCallback(() => {\n    setValue(selectedName);\n  }, [selectedName]);\n\n  const renderChipAdornment = useCallback(\n    (option, index) => {\n      if (typeof renderChip === \"function\") {\n        return renderChip(option, index);\n      }\n      const avatarProps: Partial<IAvatar> = {\n        size: 18,\n      };\n      switch (size) {\n        case \"big\":\n          avatarProps.size = 22;\n          break;\n        case \"small\":\n          avatarProps.size = 14;\n          break;\n      }\n      const leftAdornment = option.image ? (\n        <Avatar\n          css={`\n            ${tw`tw-my-0.5`}\n            ${tw`tw-mr-0.5`}\n          `}\n          url={option.image}\n          {...avatarProps}\n        />\n      ) : undefined;\n\n      const onClose = (e) => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (Array.isArray(selected) && selected.includes(option.id)) {\n          if (typeof onChange === \"function\") {\n            const newSelected = selected.filter((item) => item !== option.id);\n            onChange(newSelected);\n          }\n        }\n      };\n\n      let showOnClose = true;\n      if (disabled) {\n        showOnClose = false;\n      }\n      if (option.color) {\n        showOnClose = false;\n      }\n\n      return (\n        <Chip\n          className={\"c-combo-box-chip\"}\n          leftAdornment={leftAdornment}\n          label={option.name}\n          key={index}\n          backgroundColor={option.color}\n          isLabel={Boolean(option.color)}\n          onClose={showOnClose ? onClose : undefined}\n          size={size}\n        />\n      );\n    },\n    [disabled, onChange, renderChip, selected, size]\n  );\n\n  const autoSize = useMemo(() => {\n    if (\n      type === \"multiple\" &&\n      open &&\n      Array.isArray(selected) &&\n      selected.length > 1\n    ) {\n      return \"auto\";\n    }\n    return size;\n  }, [open, selected, size, type]);\n\n  const startAdornment = useMemo(() => {\n    if (type === \"multiple\" && Array.isArray(selected) && selected.length > 0) {\n      const elements: JSX.Element[] = [];\n      let total = 0;\n      options.forEach((option, index) => {\n        const isGrouped = isOptionGroup(option);\n        if (selected.includes(option.id) && !isGrouped) {\n          total = total + 1;\n          elements.push(renderChipAdornment(option, index));\n        } else if (isGrouped) {\n          const groupedOptions = option.options.filter((o) =>\n            selected.includes(o.id)\n          );\n          total = total + groupedOptions.length;\n          if (groupedOptions.length > 0) {\n            groupedOptions.forEach((o, _index) => {\n              elements.push(renderChipAdornment(o, `${index}_${_index}`));\n            });\n          }\n        }\n      });\n      let hidden = 0;\n      if (!open && limitChips > 0 && elements.length > limitChips) {\n        hidden = elements.splice(\n          limitChips,\n          elements.length - limitChips\n        ).length;\n      }\n\n      return (\n        <Fragment>\n          {elements}\n          {hidden > 0 && (\n            <Typography\n              variant={\n                size === \"small\"\n                  ? \"Caption 1\"\n                  : size === \"regular\"\n                  ? \"Body 2\"\n                  : \"Body 1\"\n              }\n              css={`\n                display: flex;\n                flex-shrink: 0;\n                align-items: center;\n              `}\n            >\n              {typeof hiddenNumberText === \"function\"\n                ? hiddenNumberText(hidden)\n                : `+${hidden}`}\n            </Typography>\n          )}\n        </Fragment>\n      );\n    }\n    return undefined;\n  }, [\n    type,\n    selected,\n    options,\n    open,\n    limitChips,\n    hiddenNumberText,\n    renderChipAdornment,\n    size,\n  ]);\n\n  const showXIcon =\n    Array.isArray(selected) && type === \"multiple\" && selected.length > 0;\n\n  const hasSelected =\n    type === \"multiple\" && Array.isArray(selected) && selected.length > 0;\n\n  return (\n    <div className=\"c-combo-box\">\n      {type === \"multiple\" ? (\n        <>\n          <StyledInputWrapper\n            $size={size}\n            $invalid={invalid}\n            ref={comboBoxRef}\n            css={`\n              display: flex;\n              justify-content: space-between;\n              flex: 1;\n              height: ${autoSize === \"auto\" ? \"auto\" : undefined};\n              overflow-y: ${autoSize === \"auto\" && scrollWrapper\n                ? \"scroll\"\n                : undefined};\n              max-height: ${autoSize === \"auto\" && scrollWrapper\n                ? \"80px\"\n                : undefined};\n            `}\n            className={classNames(\n              \"c-combo-box-input-wrapper\",\n              inputWrapperClassName\n            )}\n            onClick={() => {\n              elementRef.current?.focus();\n            }}\n          >\n            <StyledChipWrapper\n              $autoSize={autoSize}\n              $open={open}\n              ref={chipWrapper}\n            >\n              {startAdornment}\n              <StyledInput\n                className={\"c-combo-box-input\"}\n                onBlur={handleBlur}\n                onFocus={onOpen}\n                ref={handleRef}\n                value={loading && loadingText ? loadingText : value}\n                onKeyDown={handleOnKeyDown}\n                onChange={handleOnChange}\n                placeholder={!hasSelected ? placeholder : undefined}\n                disabled={disabled}\n                $size={size}\n                $loading={loading}\n                style={{\n                  display: \"flex\",\n                  flex: 1,\n                  alignSelf: \"center\",\n                  width: autoSize === \"auto\" ? \"auto\" : \"100%\",\n                }}\n              />\n            </StyledChipWrapper>\n            {!disabled && (\n              <>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : (\n                  <>\n                    {showXIcon && (\n                      <Trigger\n                        onMouseDown={handleMouseDown}\n                        onClick={handleDeselect}\n                        data-testid={\"deselect-all\"}\n                        css={`\n                          display: flex;\n                          justify-content: center;\n                        `}\n                      >\n                        <StyledComboBoxCloseSmallIcon />\n                      </Trigger>\n                    )}\n                    <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n                  </>\n                )}\n              </>\n            )}\n          </StyledInputWrapper>\n        </>\n      ) : (\n        <StyledComboBoxInput\n          className={classNames(\"c-combo-box-input\", inputWrapperClassName)}\n          onBlur={handleBlur}\n          onFocus={onOpen}\n          wrapRef={comboBoxRef}\n          ref={handleRef}\n          value={loading && loadingText ? loadingText : value}\n          onKeyDown={handleOnKeyDown}\n          onChange={handleOnChange}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n          invalid={invalid}\n          $loading={loading}\n          startAdornment={startAdornment}\n          endAdornment={\n            !disabled ? (\n              <InputAdornment disablePointerEvents={disabled}>\n                {loading ? (\n                  <SpinnerLoader />\n                ) : selected ? (\n                  <Button\n                    onMouseDown={handleMouseDown}\n                    onClick={handleDeselect}\n                    variant=\"text gray\"\n                    size=\"small\"\n                  >\n                    <StyledComboBoxCloseSmallIcon />\n                  </Button>\n                ) : null}\n                <StyledComboBoxCollapseExpandSingleIcon $open={open} />\n              </InputAdornment>\n            ) : null\n          }\n        />\n      )}\n\n      {!disabled ? (\n        <ConditionalWrapper\n          condition={inPortal}\n          wrap={(children) => <Portal>{children}</Portal>}\n        >\n          <Popper\n            anchorEl={comboBoxRef.current}\n            open={open}\n            placement=\"bottom\"\n            style={{\n              zIndex: 10,\n              width: comboBoxRef.current?.clientWidth,\n            }}\n            ref={wrapperRef}\n            strategy={\"fixed\"}\n          >\n            <RemoveScroll noIsolation allowPinchZoom>\n              <StyledComboBoxList $width={comboBoxRef.current?.clientWidth}>\n                <Autocomplete\n                  {...prop}\n                  inputEl={childNode}\n                  selected={selected}\n                  handleChange={handleChange}\n                  renderOption={handleRenderOption}\n                  options={options}\n                  type={type}\n                  handleEmptyAction={emptyAction}\n                />\n              </StyledComboBoxList>\n            </RemoveScroll>\n          </Popper>\n        </ConditionalWrapper>\n      ) : null}\n    </div>\n  );\n};\n\nComboBox.displayName = \"ComboBox\";\n"],"file":"ComboBox.js"}

package/dist/cjs/components/EditableContent/EditableContent.js

@@ -0,0 +1,73 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditableContent = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Styles = require("./Styles");
+
+var _excluded = ["className", "variant", "weight", "inputProps"];
+
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
+      weight = _ref.weight,
+      inputProps = _ref.inputProps,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(function () {
+    return inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerValue = _useState2[0],
+      setInnerValue = _useState2[1];
+
+  var handleChange = (0, _react.useCallback)(function (evt) {
+    setInnerValue(evt.target.value);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Styles.StyledDiv, _extends({
+    className: className,
+    ref: ref
+  }, props), /*#__PURE__*/_react.default.createElement(_Styles.StyledSpan, {
+    variant: variant,
+    forwardedAs: "span",
+    weight: weight
+  }, innerValue), /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({}, inputProps, {
+    forwardedAs: "input",
+    variant: variant,
+    weight: weight,
+    onChange: handleChange,
+    value: innerValue
+  })));
+});
+exports.EditableContent = EditableContent;
+EditableContent.displayName = "EditableContent";
+//# sourceMappingURL=EditableContent.js.map

package/dist/cjs/components/EditableContent/EditableContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["EditableContent","ref","className","variant","weight","inputProps","props","value","innerValue","setInnerValue","handleChange","evt","target","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,IAAMA,eAAe,gBAAG,uBAI7B,gBAAkEC,GAAlE,EAA0E;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,0BAA5DC,OAA4D;AAAA,MAA5DA,OAA4D,6BAAlD,QAAkD;AAAA,MAAxCC,MAAwC,QAAxCA,MAAwC;AAAA,MAAhCC,UAAgC,QAAhCA,UAAgC;AAAA,MAAjBC,KAAiB;;AAC1E,kBAAoC,qBAAS;AAAA,WAAMD,UAAN,aAAMA,UAAN,uBAAMA,UAAU,CAAEE,KAAlB;AAAA,GAAT,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AAEA,MAAMC,YAAY,GAAG,wBAAY,UAACC,GAAD,EAAS;AACxCF,IAAAA,aAAa,CAACE,GAAG,CAACC,MAAJ,CAAWL,KAAZ,CAAb;AACD,GAFoB,EAElB,EAFkB,CAArB;AAIA,sBACE,6BAAC,iBAAD;AAAW,IAAA,SAAS,EAAEL,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CK,KAA/C,gBACE,6BAAC,kBAAD;AAAY,IAAA,OAAO,EAAEH,OAArB;AAA8B,IAAA,WAAW,EAAC,MAA1C;AAAiD,IAAA,MAAM,EAAEC;AAAzD,KACGI,UADH,CADF,eAIE,6BAAC,mBAAD,eACMH,UADN;AAEE,IAAA,WAAW,EAAC,OAFd;AAGE,IAAA,OAAO,EAAEF,OAHX;AAIE,IAAA,MAAM,EAAEC,MAJV;AAKE,IAAA,QAAQ,EAAEM,YALZ;AAME,IAAA,KAAK,EAAEF;AANT,KAJF,CADF;AAeD,CA1B8B,CAAxB;;AA4BPR,eAAe,CAACa,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n  /** Typography variant. */\n  variant?: Variant;\n  /** Typography weight. */\n  weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n  /** Input props. */\n  inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n}\n\nexport const EditableContent = forwardRef<\n  HTMLDivElement,\n  EditableContentInterface &\n    Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(({ className, variant = \"Body 2\", weight, inputProps, ...props }, ref) => {\n  const [innerValue, setInnerValue] = useState(() => inputProps?.value);\n\n  const handleChange = useCallback((evt) => {\n    setInnerValue(evt.target.value);\n  }, []);\n\n  return (\n    <StyledDiv className={className} ref={ref} {...props}>\n      <StyledSpan variant={variant} forwardedAs=\"span\" weight={weight}>\n        {innerValue}\n      </StyledSpan>\n      <StyledInput\n        {...inputProps}\n        forwardedAs=\"input\"\n        variant={variant}\n        weight={weight}\n        onChange={handleChange}\n        value={innerValue}\n      />\n    </StyledDiv>\n  );\n});\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}

package/dist/cjs/components/EditableContent/Styles.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSpan = exports.StyledInput = exports.StyledDiv = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _BoxSizingStyle = require("../BoxSizingStyle");
+
+var _FontStyle = require("../FontStyle");
+
+var _Typography = require("../Typography/Typography");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var StyledDiv = _styledComponents.default.div.withConfig({
+  displayName: "Styles__StyledDiv",
+  componentId: "sc-1wapx2a-0"
+})(["", " ", " ", ""], _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
+  "position": "relative",
+  "display": "inline-block",
+  "maxWidth": "100%"
+});
+
+exports.StyledDiv = StyledDiv;
+var StyledSpan = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+  displayName: "Styles__StyledSpan",
+  componentId: "sc-1wapx2a-1"
+})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;&:empty:before{content:\"i\";}"]);
+exports.StyledSpan = StyledSpan;
+StyledSpan.displayName = "StyledSpan";
+var StyledInput = (0, _styledComponents.default)(_Typography.Typography).withConfig({
+  displayName: "Styles__StyledInput",
+  componentId: "sc-1wapx2a-2"
+})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;"], {
+  "position": "absolute",
+  "top": "0px",
+  "right": "0px",
+  "bottom": "0px",
+  "left": "0px",
+  "borderWidth": "1px",
+  "borderColor": "rgba(0, 0, 0, 0)",
+  "borderStyle": "solid",
+  ":hover": {
+    "borderColor": "var(--color-theme-700)"
+  },
+  ":focus-within": {
+    "borderColor": "var(--color-theme-700)",
+    "overflow": "scroll"
+  },
+  "borderRadius": "0.375rem",
+  "boxSizing": "border-box",
+  "overflow": "hidden",
+  "whiteSpace": "nowrap",
+  "width": "100%"
+});
+exports.StyledInput = StyledInput;
+StyledInput.displayName = "StyledInput";
+//# sourceMappingURL=Styles.js.map

package/dist/cjs/components/EditableContent/Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EditableContent/Styles.ts"],"names":["StyledDiv","styled","div","FontStyle","BoxSizingStyle","StyledSpan","Typography","displayName","StyledInput"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBAClBC,oBADkB,EAElBC,8BAFkB,EAIhB;AAAA;AAAA;AAAA;AAAA,CAJgB,CAAf;;;AAOA,IAAMC,UAAU,GAAG,+BAAOC,sBAAP,CAAH;AAAA;AAAA;AAAA,mRAAhB;;AAoBPD,UAAU,CAACE,WAAX,GAAyB,YAAzB;AAEO,IAAMC,WAAW,GAAG,+BAAOF,sBAAP,CAAH;AAAA;AAAA;AAAA,sMAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADkB,CAAjB;;AA6BPE,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)`\n  visibility: hidden;\n  display: block;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  position: relative;\n  border: 1px solid transparent;\n  border-radius: 6px;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: pre;\n\n  &:empty:before {\n    content: \"i\";\n  }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n  ${tw`\n    tw-absolute\n    tw-inset-0\n    tw-border\n    tw-border-transparent\n    tw-border-solid\n    hover:tw-border-theme-700\n    focus-within:tw-border-theme-700\n    tw-rounded-md\n    tw-box-border\n    tw-overflow-hidden\n    tw-whitespace-nowrap\n    focus-within:tw-overflow-scroll\n    tw-w-full`}\n\n  background-color: inherit;\n  padding-left: 4px;\n  padding-right: 4px;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  text-overflow: ellipsis;\n  &:focus-whitin {\n    text-overflow: clip;\n  }\n  outline-width: 0px;\n  outline: none;\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}

package/dist/cjs/components/EditableContent/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _EditableContent = require("./EditableContent");
+
+Object.keys(_EditableContent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _EditableContent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _EditableContent[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/EditableContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/EditableContent/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./EditableContent\";\n"],"file":"index.js"}

package/dist/cjs/components/Entity/EntityCard.js

@@ -15,8 +15,12 @@ var _Card = require("../Card");
 
 var _EntityGroup = require("./EntityGroup");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["children", "isCollection", "background", "className", "as"];
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 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; }
@@ -38,6 +42,7 @@ var EntityCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _useContext = (0, _react.useContext)(_EntityGroup.EntityGroupContext),
       renderAs = _useContext.renderAs;
 
+  var classSuffix = "c-entity-card-".concat(renderAs);
   var paperType = renderAs === "grid" ? "paper-1" : "paper-2";
   var Component = as || _Card.Card;
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledEntityCard, _extends({
@@ -45,7 +50,7 @@ var EntityCard = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     $renderAs: renderAs,
     $background: background,
     paperType: paperType,
-    className: className,
+    className: (0, _classnames.default)("c-entity-card", classSuffix, className),
     $isCollection: isCollection
   }, rest, {
     ref: ref