@orfium/ictinus 4.5.2 → 4.8.0

package/dist/components/Avatar/Avatar.d.ts

@@ -23,7 +23,7 @@ export declare type Props = {
     /** The class name of the avatar component if its styled **/
     className?: string;
 };
-export declare type AvatarSizes = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+export declare type AvatarSizes = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
 export declare type AvatarShapes = 'regular' | 'rounded' | 'circular';
 declare const Avatar: React.ForwardRefExoticComponent<Pick<Props & DivProps, "children" | "onChange" | "onBlur" | "onClick" | "type" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "sizes" | "span" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "width" | "wmode" | "wrap" | "key" | keyof Props> & React.RefAttributes<HTMLDivElement>>;
 export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -17,6 +17,22 @@ var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var iconSizeBasedOnAvatar = function iconSizeBasedOnAvatar(size) {
+  switch (size) {
+    case 'xs':
+      return 18;
+
+    case 'xxs':
+      return 18;
+
+    case 'xxxs':
+      return 10;
+
+    default:
+      return 20;
+  }
+};
+
 var Avatar = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$src = _ref.src,
       src = _ref$src === void 0 ? '' : _ref$src,
@@ -45,7 +61,7 @@ var Avatar = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   }), !src && !children && iconName && (0, _react2.jsx)(_Icon["default"], {
     color: (0, _palette.pickTextColorFromSwatches)(calculatedColor.color, calculatedColor.shade),
     name: iconName,
-    size: size === 'xs' ? 18 : 20
+    size: iconSizeBasedOnAvatar(size)
   }), !src && children);
 });
 

package/dist/components/Avatar/Avatar.style.js

@@ -25,6 +25,9 @@ var sizeBasedOnProp = function sizeBasedOnProp(size) {
     case 'xxs':
       return (0, _utils.rem)(20);
 
+    case 'xxxs':
+      return (0, _utils.rem)(16);
+
     default:
       return (0, _utils.rem)(56);
   }
@@ -54,6 +57,9 @@ var fontSizeBasedOnProp = function fontSizeBasedOnProp(theme, size) {
     case 'xxs':
       return theme.typography.fontSizes['11'];
 
+    case 'xxxs':
+      return theme.typography.fontSizes['8'];
+
     default:
       return theme.typography.fontSizes['18'];
   }
@@ -69,7 +75,7 @@ var avatarStyle = function avatarStyle(_ref) {
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)(_functions.flex, ";width:", sizeBasedOnProp(size), ";height:", sizeBasedOnProp(size), ";border-radius:", shapeBasedOnProp(shape), ";background:", theme.utils.getColor(fill, fillShade), ";overflow:hidden;position:relative;font-size:", fontSizeBasedOnProp(theme, size), ";align-items:center;flex-shrink:0;line-height:1;user-select:none;justify-content:center;color:", (0, _palette.pickTextColorFromSwatches)(fill, fillShade), ";img{border-radius:100%;width:100%;height:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:avatarStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUQ2QyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IGZsZXggfSBmcm9tICcuLi8uLi90aGVtZS9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgY29sb3JTaGFkZXMsIGZsYXRDb2xvcnMsIHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMgfSBmcm9tICcuLi8uLi90aGVtZS9wYWxldHRlJztcbmltcG9ydCB7IEF2YXRhclNoYXBlcywgQXZhdGFyU2l6ZXMgfSBmcm9tICcuL0F2YXRhcic7XG5cbmNvbnN0IHNpemVCYXNlZE9uUHJvcCA9IChzaXplOiBBdmF0YXJTaXplcykgPT4ge1xuICBzd2l0Y2ggKHNpemUpIHtcbiAgICBjYXNlICdzbSc6XG4gICAgICByZXR1cm4gcmVtKDM2KTtcbiAgICBjYXNlICdtZCc6XG4gICAgICByZXR1cm4gcmVtKDQ2KTtcbiAgICBjYXNlICd4cyc6XG4gICAgICByZXR1cm4gcmVtKDI0KTtcbiAgICBjYXNlICd4eHMnOlxuICAgICAgcmV0dXJuIHJlbSgyMCk7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiByZW0oNTYpO1xuICB9XG59O1xuXG5jb25zdCBzaGFwZUJhc2VkT25Qcm9wID0gKHNoYXBlOiBBdmF0YXJTaGFwZXMpID0+IHtcbiAgc3dpdGNoIChzaGFwZSkge1xuICAgIGNhc2UgJ3JvdW5kZWQnOlxuICAgICAgcmV0dXJuIHJlbSg0KTtcbiAgICBjYXNlICdjaXJjdWxhcic6XG4gICAgICByZXR1cm4gJzEwMCUnO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gcmVtKDgpO1xuICB9XG59O1xuXG5jb25zdCBmb250U2l6ZUJhc2VkT25Qcm9wID0gKHRoZW1lOiBUaGVtZSwgc2l6ZTogQXZhdGFyU2l6ZXMpID0+IHtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnc20nOlxuICAgICAgcmV0dXJuIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxNCddO1xuICAgIGNhc2UgJ3hzJzpcbiAgICAgIHJldHVybiB0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1snMTMnXTtcbiAgICBjYXNlICd4eHMnOlxuICAgICAgcmV0dXJuIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxMSddO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gdGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbJzE4J107XG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBhdmF0YXJTdHlsZSA9ICh7XG4gIHNoYXBlLFxuICBzaXplLFxuICBmaWxsLFxuICBmaWxsU2hhZGUsXG59OiB7XG4gIHNoYXBlOiBBdmF0YXJTaGFwZXM7XG4gIHNpemU6IEF2YXRhclNpemVzO1xuICBmaWxsOiB0eXBlb2YgZmxhdENvbG9yc1tudW1iZXJdO1xuICBmaWxsU2hhZGU6IHR5cGVvZiBjb2xvclNoYWRlc1tudW1iZXJdO1xufSkgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICAke2ZsZXh9O1xuICB3aWR0aDogJHtzaXplQmFzZWRPblByb3Aoc2l6ZSl9O1xuICBoZWlnaHQ6ICR7c2l6ZUJhc2VkT25Qcm9wKHNpemUpfTtcbiAgYm9yZGVyLXJhZGl1czogJHtzaGFwZUJhc2VkT25Qcm9wKHNoYXBlKX07XG4gIGJhY2tncm91bmQ6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgZmlsbFNoYWRlKX07XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZm9udC1zaXplOiAke2ZvbnRTaXplQmFzZWRPblByb3AodGhlbWUsIHNpemUpfTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGxpbmUtaGVpZ2h0OiAxO1xuICB1c2VyLXNlbGVjdDogbm9uZTtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGNvbG9yOiAke3BpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMoZmlsbCwgZmlsbFNoYWRlKX07XG5cbiAgaW1nIHtcbiAgICBib3JkZXItcmFkaXVzOiAxMDAlO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgfVxuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:avatarStyle;")
+      (0, _react.css)(_functions.flex, ";width:", sizeBasedOnProp(size), ";height:", sizeBasedOnProp(size), ";border-radius:", shapeBasedOnProp(shape), ";background:", theme.utils.getColor(fill, fillShade), ";overflow:hidden;position:relative;font-size:", fontSizeBasedOnProp(theme, size), ";align-items:center;flex-shrink:0;line-height:1;user-select:none;justify-content:center;color:", (0, _palette.pickTextColorFromSwatches)(fill, fillShade), ";img{border-radius:100%;width:100%;height:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:avatarStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0F2YXRhci9BdmF0YXIuc3R5bGUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNkQ2QyIsImZpbGUiOiIuLi8uLi8uLi9zcmMvY29tcG9uZW50cy9BdmF0YXIvQXZhdGFyLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IGZsZXggfSBmcm9tICcuLi8uLi90aGVtZS9mdW5jdGlvbnMnO1xuaW1wb3J0IHsgY29sb3JTaGFkZXMsIGZsYXRDb2xvcnMsIHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMgfSBmcm9tICcuLi8uLi90aGVtZS9wYWxldHRlJztcbmltcG9ydCB7IEF2YXRhclNoYXBlcywgQXZhdGFyU2l6ZXMgfSBmcm9tICcuL0F2YXRhcic7XG5cbmNvbnN0IHNpemVCYXNlZE9uUHJvcCA9IChzaXplOiBBdmF0YXJTaXplcykgPT4ge1xuICBzd2l0Y2ggKHNpemUpIHtcbiAgICBjYXNlICdzbSc6XG4gICAgICByZXR1cm4gcmVtKDM2KTtcbiAgICBjYXNlICdtZCc6XG4gICAgICByZXR1cm4gcmVtKDQ2KTtcbiAgICBjYXNlICd4cyc6XG4gICAgICByZXR1cm4gcmVtKDI0KTtcbiAgICBjYXNlICd4eHMnOlxuICAgICAgcmV0dXJuIHJlbSgyMCk7XG4gICAgY2FzZSAneHh4cyc6XG4gICAgICByZXR1cm4gcmVtKDE2KTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHJlbSg1Nik7XG4gIH1cbn07XG5cbmNvbnN0IHNoYXBlQmFzZWRPblByb3AgPSAoc2hhcGU6IEF2YXRhclNoYXBlcykgPT4ge1xuICBzd2l0Y2ggKHNoYXBlKSB7XG4gICAgY2FzZSAncm91bmRlZCc6XG4gICAgICByZXR1cm4gcmVtKDQpO1xuICAgIGNhc2UgJ2NpcmN1bGFyJzpcbiAgICAgIHJldHVybiAnMTAwJSc7XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiByZW0oOCk7XG4gIH1cbn07XG5cbmNvbnN0IGZvbnRTaXplQmFzZWRPblByb3AgPSAodGhlbWU6IFRoZW1lLCBzaXplOiBBdmF0YXJTaXplcykgPT4ge1xuICBzd2l0Y2ggKHNpemUpIHtcbiAgICBjYXNlICdzbSc6XG4gICAgICByZXR1cm4gdGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbJzE0J107XG4gICAgY2FzZSAneHMnOlxuICAgICAgcmV0dXJuIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxMyddO1xuICAgIGNhc2UgJ3h4cyc6XG4gICAgICByZXR1cm4gdGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbJzExJ107XG4gICAgY2FzZSAneHh4cyc6XG4gICAgICByZXR1cm4gdGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbJzgnXTtcbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxOCddO1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgYXZhdGFyU3R5bGUgPSAoe1xuICBzaGFwZSxcbiAgc2l6ZSxcbiAgZmlsbCxcbiAgZmlsbFNoYWRlLFxufToge1xuICBzaGFwZTogQXZhdGFyU2hhcGVzO1xuICBzaXplOiBBdmF0YXJTaXplcztcbiAgZmlsbDogdHlwZW9mIGZsYXRDb2xvcnNbbnVtYmVyXTtcbiAgZmlsbFNoYWRlOiB0eXBlb2YgY29sb3JTaGFkZXNbbnVtYmVyXTtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4fTtcbiAgd2lkdGg6ICR7c2l6ZUJhc2VkT25Qcm9wKHNpemUpfTtcbiAgaGVpZ2h0OiAke3NpemVCYXNlZE9uUHJvcChzaXplKX07XG4gIGJvcmRlci1yYWRpdXM6ICR7c2hhcGVCYXNlZE9uUHJvcChzaGFwZSl9O1xuICBiYWNrZ3JvdW5kOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKGZpbGwsIGZpbGxTaGFkZSl9O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gIGZvbnQtc2l6ZTogJHtmb250U2l6ZUJhc2VkT25Qcm9wKHRoZW1lLCBzaXplKX07XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGZsZXgtc2hyaW5rOiAwO1xuICBsaW5lLWhlaWdodDogMTtcbiAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICBjb2xvcjogJHtwaWNrVGV4dENvbG9yRnJvbVN3YXRjaGVzKGZpbGwsIGZpbGxTaGFkZSl9O1xuXG4gIGltZyB7XG4gICAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgICB3aWR0aDogMTAwJTtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:avatarStyle;")
     );
   };
 };

package/dist/components/Chip/Chip.d.ts

@@ -1,32 +1,34 @@
+import { ClickEvent } from 'hooks/useLoading';
 import React from 'react';
-import { colorShades, flatColors } from 'theme/palette';
+import { flatColors } from 'theme/palette';
 import { TestId } from 'utils/types';
 import { DivProps } from '../../utils/common';
 export declare type Props = {
     /**
-     * Style of input field
-     * @default filled
+     * Determines whether the chip should be read-only or interactive.
+     * @default read-only
      */
-    styleType?: 'filled' | 'outlined';
-    /** This property define the size of the button.
-     *  @default md
-     * */
-    size?: 'md' | 'sm';
-    /** Defines the fill color of the component, if filled */
+    styleType?: 'read-only' | 'interactive';
+    /** Defines the fill color of the component, if filled. */
     fill?: typeof flatColors[number];
-    /** Defines the shade of the fill */
-    shade?: typeof colorShades[number];
-    /** An optional icon to show to the left */
-    leftIcon?: JSX.Element;
-    /** */
-    onLeftIconClick?: React.ReactEventHandler;
-    /** An optional icon to show to the right */
-    rightIcon?: JSX.Element;
-    /** */
-    onRightIconClick?: React.ReactEventHandler;
+    /** An optional thumbnail to show to the left. */
+    thumbnail?: {
+        src?: string;
+        name?: string;
+    };
+    /** Boolean defining if the chip is selected. */
+    isSelected?: boolean;
+    /** Boolean defining if the check icon is shown. */
+    isChecked?: boolean;
+    /** Defines the number value of the badge */
+    badgeNumber?: number;
+    /** Callback function for onClick. */
+    onClick?: (event: ClickEvent) => void;
+    /** A callback that is being triggered when type is interactive and you press the X icon. */
+    onClear?: () => void;
 };
 declare type TestProps = {
     dataTestId?: TestId;
 };
-declare const Chip: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "color" | "onBlur" | "onClick" | "type" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "width" | "wmode" | "wrap" | "key" | "dataTestId" | keyof Props> & React.RefAttributes<HTMLDivElement>>;
+declare const Chip: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "color" | "onBlur" | "type" | "autoFocus" | "disabled" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "value" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "download" | "encType" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "useMap" | "width" | "wmode" | "wrap" | "key" | "dataTestId" | keyof Props> & React.RefAttributes<HTMLDivElement>>;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -7,44 +7,79 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../utils/helpers");
 
+var _palette = require("../../theme/palette");
+
 var _Chip = require("./Chip.style");
 
+var _Badge = _interopRequireDefault(require("./components/Badge"));
+
+var _Avatar = _interopRequireDefault(require("../Avatar"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$styleType = _ref.styleType,
-      styleType = _ref$styleType === void 0 ? 'filled' : _ref$styleType,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
+      styleType = _ref$styleType === void 0 ? 'read-only' : _ref$styleType,
       fill = _ref.fill,
-      shade = _ref.shade,
-      leftIcon = _ref.leftIcon,
-      leftIconHandler = _ref.onLeftIconClick,
-      rightIcon = _ref.rightIcon,
-      rightIconHandler = _ref.onRightIconClick,
+      thumbnail = _ref.thumbnail,
+      isSelected = _ref.isSelected,
+      isChecked = _ref.isChecked,
+      badgeNumber = _ref.badgeNumber,
+      onClick = _ref.onClick,
+      onClear = _ref.onClear,
       _ref$dataTestId = _ref.dataTestId,
       dataTestId = _ref$dataTestId === void 0 ? '' : _ref$dataTestId,
       children = _ref.children;
+
+  if (styleType === 'read-only' && (isSelected || isChecked || badgeNumber)) {
+    throw new Error('The properties isSelected, isChecked and badgeNumber are only for Interactive style type Chips.');
+  }
+
+  if (styleType === 'interactive' && thumbnail) {
+    throw new Error('The property thumbnail is only for Read-Only style type Chips.');
+  }
+
   return (0, _react2.jsx)("div", {
     ref: ref,
     "data-testid": (0, _helpers.generateTestDataId)('chip', dataTestId),
-    css: (0, _Chip.wrapperStyle)({
+    onClick: onClick,
+    css: (0, _Chip.chipStyle)({
       styleType: styleType,
-      size: size,
       fill: fill,
-      shade: shade,
-      leftIcon: leftIcon,
-      rightIcon: rightIcon
+      isSelected: isSelected,
+      onClear: onClear,
+      onClick: onClick
     })
-  }, leftIcon && (0, _react2.jsx)("div", {
-    onClick: leftIconHandler,
-    css: (0, _Chip.iconWrapperStyle)(size, leftIconHandler)
-  }, leftIcon), (0, _react2.jsx)("div", null, children), rightIcon && (0, _react2.jsx)("div", {
-    onClick: rightIconHandler,
-    css: (0, _Chip.iconWrapperStyle)(size, rightIconHandler)
-  }, rightIcon));
+  }, isChecked && (0, _react2.jsx)(_Icon["default"], {
+    size: 14,
+    name: 'checkmark',
+    color: 'darkGrey',
+    variant: 850
+  }), thumbnail && (0, _react2.jsx)("div", null, (0, _react2.jsx)(_Avatar["default"], {
+    size: 'xxxs',
+    color: fill + "-" + _palette.BASE_SHADE,
+    src: thumbnail.src
+  }, thumbnail.name)), (0, _react2.jsx)("div", null, children), badgeNumber && (0, _react2.jsx)(_Badge["default"], {
+    fill: fill,
+    badgeNumber: badgeNumber,
+    isSelected: isSelected,
+    dataTestId: dataTestId
+  }), onClear && (0, _react2.jsx)("div", {
+    css: (0, _Chip.closeIconWrapperStyle)()
+  }, (0, _react2.jsx)(_Icon["default"], {
+    size: 14,
+    name: 'close',
+    color: 'darkGrey',
+    variant: 850,
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      onClear();
+    }
+  })));
 });
 
 Chip.displayName = 'Chip';

package/dist/components/Chip/Chip.style.d.ts

@@ -1,5 +1,5 @@
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from '../../theme';
 import { Props } from './Chip';
-export declare const wrapperStyle: ({ styleType, size, fill, shade, leftIcon, rightIcon }: Props) => (theme: Theme) => SerializedStyles;
-export declare const iconWrapperStyle: (size: 'md' | 'sm', iconHandler?: import("react").ReactEventHandler<Element> | undefined) => SerializedStyles;
+export declare const chipStyle: ({ styleType, fill, isSelected, onClear, onClick, }: Props) => (theme: Theme) => SerializedStyles;
+export declare const closeIconWrapperStyle: () => () => SerializedStyles;

package/dist/components/Chip/Chip.style.js

@@ -1,77 +1,49 @@
 "use strict";
 
 exports.__esModule = true;
-exports.iconWrapperStyle = exports.wrapperStyle = void 0;
+exports.closeIconWrapperStyle = exports.chipStyle = void 0;
 
 var _react = require("@emotion/react");
 
-var _polished = require("polished");
-
 var _functions = require("../../theme/functions");
 
-var _palette = require("../../theme/palette");
-
 var _utils = require("../../theme/utils");
 
-/** Calculates the label specific height based on the size passed to it
- * These sizes are specific to this component thus these are placed here and not in the config **/
-var styleBasedOnSize = function styleBasedOnSize(theme, size, leftIcon, rightIcon) {
-  var hasIcon = leftIcon !== undefined || rightIcon !== undefined;
-
-  switch (size) {
-    case 'sm':
-      return "\n      height: " + (0, _utils.rem)(20) + ";\n      border-radius: " + (0, _utils.rem)(16.5) + ";\n      font-size: " + theme.typography.fontSizes['10'] + ";\n      ";
-
-    default:
-      return "\n      height: " + (0, _utils.rem)(24) + ";\n      border-radius: " + (0, _utils.rem)(12.5) + ";\n      font-size: " + theme.typography.fontSizes['12'] + ";\n      ";
-  }
-};
-
-var wrapperStyleSwitch = function wrapperStyleSwitch(theme, styleType, fill, shade) {
-  if (shade === void 0) {
-    shade = _palette.BASE_SHADE;
-  }
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
-  switch (styleType) {
-    case 'outlined':
-      {
-        var fillColor = fill ? theme.utils.getColor(fill, shade) : theme.utils.getColor('lightGrey', shade);
-        var borderColor = shade < 500 ? (0, _polished.darken)('0.5', fillColor) : (0, _polished.lighten)('0.5', fillColor);
-        return "\n        background-color: " + (fill ? fillColor : 'transparent') + ";\n        color: " + (fill ? (0, _palette.pickTextColorFromSwatches)(fill, shade) : '#232323') + ";\n        border: " + (0, _utils.rem)(1) + " solid " + borderColor + ";\n      ";
-      }
-
-    case 'filled':
-    default:
-      return "\n        background-color: " + (fill ? theme.utils.getColor(fill, shade) : theme.utils.getColor('lightGrey', 50)) + ";\n        color: " + (fill ? (0, _palette.pickTextColorFromSwatches)(fill, shade) : '#232323') + ";\n        border: " + (0, _utils.rem)(1) + " solid " + (fill ? theme.utils.getColor(fill, shade) : theme.utils.getColor('lightGrey', 50)) + ";\n      ";
-  }
-};
-
-var wrapperStyle = function wrapperStyle(_ref) {
-  var styleType = _ref.styleType,
-      size = _ref.size,
-      fill = _ref.fill,
-      shade = _ref.shade,
-      leftIcon = _ref.leftIcon,
-      rightIcon = _ref.rightIcon;
+var chipStyle = function chipStyle(_ref2) {
+  var styleType = _ref2.styleType,
+      _ref2$fill = _ref2.fill,
+      fill = _ref2$fill === void 0 ? 'greyScale' : _ref2$fill,
+      isSelected = _ref2.isSelected,
+      onClear = _ref2.onClear,
+      onClick = _ref2.onClick;
   return function (theme) {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)(_functions.flexCenterVertical, ";", styleBasedOnSize(theme, size, leftIcon, rightIcon), ";box-sizing:border-box;padding-left:", leftIcon ? 'inherit' : (0, _utils.rem)(8), ";padding-right:", rightIcon ? 'inherit' : (0, _utils.rem)(8), ";", wrapperStyleSwitch(theme, styleType, fill, shade), ";width:fit-content;" + (process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzRTBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRhcmtlbiwgbGlnaHRlbiB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IGZsZXhDZW50ZXJWZXJ0aWNhbCB9IGZyb20gJ3RoZW1lL2Z1bmN0aW9ucyc7XG5pbXBvcnQgeyBCQVNFX1NIQURFLCBjb2xvclNoYWRlcywgcGlja1RleHRDb2xvckZyb21Td2F0Y2hlcyB9IGZyb20gJ3RoZW1lL3BhbGV0dGUnO1xuaW1wb3J0IHsgZmxhdENvbG9ycyB9IGZyb20gJ3RoZW1lL3BhbGV0dGUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IFByb3BzIH0gZnJvbSAnLi9DaGlwJztcblxuLyoqIENhbGN1bGF0ZXMgdGhlIGxhYmVsIHNwZWNpZmljIGhlaWdodCBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXRcbiAqIFRoZXNlIHNpemVzIGFyZSBzcGVjaWZpYyB0byB0aGlzIGNvbXBvbmVudCB0aHVzIHRoZXNlIGFyZSBwbGFjZWQgaGVyZSBhbmQgbm90IGluIHRoZSBjb25maWcgKiovXG5jb25zdCBzdHlsZUJhc2VkT25TaXplID0gKFxuICB0aGVtZTogVGhlbWUsXG4gIHNpemU/OiAnbWQnIHwgJ3NtJyxcbiAgbGVmdEljb24/OiBKU1guRWxlbWVudCxcbiAgcmlnaHRJY29uPzogSlNYLkVsZW1lbnRcbikgPT4ge1xuICBjb25zdCBoYXNJY29uOiBib29sZWFuID0gbGVmdEljb24gIT09IHVuZGVmaW5lZCB8fCByaWdodEljb24gIT09IHVuZGVmaW5lZDtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnc20nOlxuICAgICAgcmV0dXJuIGBcbiAgICAgIGhlaWdodDogJHtyZW0oMjApfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7cmVtKDE2LjUpfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1snMTAnXX07XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gYFxuICAgICAgaGVpZ2h0OiAke3JlbSgyNCl9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHtyZW0oMTIuNSl9O1xuICAgICAgZm9udC1zaXplOiAke3RoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxMiddfTtcbiAgICAgIGA7XG4gIH1cbn07XG5cbmNvbnN0IHdyYXBwZXJTdHlsZVN3aXRjaCA9IChcbiAgdGhlbWU6IFRoZW1lLFxuICBzdHlsZVR5cGU/OiAnZmlsbGVkJyB8ICdvdXRsaW5lZCcsXG4gIGZpbGw/OiB0eXBlb2YgZmxhdENvbG9yc1tudW1iZXJdLFxuICBzaGFkZTogdHlwZW9mIGNvbG9yU2hhZGVzW251bWJlcl0gPSBCQVNFX1NIQURFXG4pID0+IHtcbiAgc3dpdGNoIChzdHlsZVR5cGUpIHtcbiAgICBjYXNlICdvdXRsaW5lZCc6IHtcbiAgICAgIGNvbnN0IGZpbGxDb2xvciA9IGZpbGxcbiAgICAgICAgPyB0aGVtZS51dGlscy5nZXRDb2xvcihmaWxsLCBzaGFkZSlcbiAgICAgICAgOiB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5Jywgc2hhZGUpO1xuICAgICAgY29uc3QgYm9yZGVyQ29sb3IgPSBzaGFkZSA8IDUwMCA/IGRhcmtlbignMC41JywgZmlsbENvbG9yKSA6IGxpZ2h0ZW4oJzAuNScsIGZpbGxDb2xvcik7XG5cbiAgICAgIHJldHVybiBgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZmlsbCA/IGZpbGxDb2xvciA6ICd0cmFuc3BhcmVudCd9O1xuICAgICAgICBjb2xvcjogJHtmaWxsID8gcGlja1RleHRDb2xvckZyb21Td2F0Y2hlcyhmaWxsLCBzaGFkZSkgOiAnIzIzMjMyMyd9O1xuICAgICAgICBib3JkZXI6ICR7cmVtKDEpfSBzb2xpZCAke2JvcmRlckNvbG9yfTtcbiAgICAgIGA7XG4gICAgfVxuICAgIGNhc2UgJ2ZpbGxlZCc6XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7XG4gICAgICAgICAgZmlsbCA/IHRoZW1lLnV0aWxzLmdldENvbG9yKGZpbGwsIHNoYWRlKSA6IHRoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCA1MClcbiAgICAgICAgfTtcbiAgICAgICAgY29sb3I6ICR7ZmlsbCA/IHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMoZmlsbCwgc2hhZGUpIDogJyMyMzIzMjMnfTtcbiAgICAgICAgYm9yZGVyOiAke3JlbSgxKX0gc29saWQgJHtcbiAgICAgICAgICBmaWxsID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgc2hhZGUpIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKVxuICAgICAgICB9O1xuICAgICAgYDtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXJTdHlsZSA9ICh7IHN0eWxlVHlwZSwgc2l6ZSwgZmlsbCwgc2hhZGUsIGxlZnRJY29uLCByaWdodEljb24gfTogUHJvcHMpID0+IChcbiAgdGhlbWU6IFRoZW1lXG4pOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4Q2VudGVyVmVydGljYWx9O1xuICAke3N0eWxlQmFzZWRPblNpemUodGhlbWUsIHNpemUsIGxlZnRJY29uLCByaWdodEljb24pfTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcGFkZGluZy1sZWZ0OiAke2xlZnRJY29uID8gJ2luaGVyaXQnIDogcmVtKDgpfTtcbiAgcGFkZGluZy1yaWdodDogJHtyaWdodEljb24gPyAnaW5oZXJpdCcgOiByZW0oOCl9O1xuICAke3dyYXBwZXJTdHlsZVN3aXRjaCh0aGVtZSwgc3R5bGVUeXBlLCBmaWxsLCBzaGFkZSl9O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgaWNvbldyYXBwZXJTdHlsZSA9IChcbiAgc2l6ZTogJ21kJyB8ICdzbScsXG4gIGljb25IYW5kbGVyPzogUmVhY3QuUmVhY3RFdmVudEhhbmRsZXJcbik6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICAke2ZsZXhDZW50ZXJWZXJ0aWNhbH07XG4gIGhlaWdodDogJHtzaXplID09PSAnbWQnID8gcmVtKDE2KSA6IHJlbSgxNCl9O1xuICB3aWR0aDogJHtzaXplID09PSAnbWQnID8gcmVtKDE2KSA6IHJlbSgxNCl9O1xuICAmID4gKiB7XG4gICAgbWF4LWhlaWdodDogMTAwJTtcbiAgfVxuXG4gIGN1cnNvcjogJHtpY29uSGFuZGxlciA/ICdwb2ludGVyJyA6ICdhdXRvJ307XG4gIHBhZGRpbmctbGVmdDogJHtyZW0oNCl9O1xuICBwYWRkaW5nLXJpZ2h0OiAke3JlbSg0KX07XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:wrapperStyle;")
+      (0, _react.css)(_functions.flexCenterVertical, ";height:", theme.spacing.lg, ";border-radius:", theme.spacing.lg, ";font-size:", theme.typography.fontSizes['12'], ";font-weight:", theme.typography.weights.medium, ";line-height:normal;box-sizing:border-box;padding:", theme.spacing.xsm, " ", theme.spacing.sm, ";background-color:", styleType === 'read-only' || onClear || isSelected ? theme.utils.getColor(fill, 50) : theme.palette.white, ";color:", theme.utils.getColor('darkGrey', 850), ";border:", (0, _utils.rem)(1), " solid ", styleType === 'read-only' || onClear || isSelected ? theme.utils.getColor(fill, 550) : theme.utils.getColor('lightGrey', 200), ";cursor:", onClick ? 'pointer' : 'auto', ";width:fit-content;transition:background-color 150ms linear;&:hover{background:", styleType === 'read-only' || onClear || isSelected ? theme.utils.getColor(fill, 100) : theme.utils.getColor('lightGrey', null, 'pale'), ";}>:not(:last-child){margin-right:", theme.spacing.xsm, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:chipStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhb0QiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ2hpcC9DaGlwLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgZmxleENlbnRlclZlcnRpY2FsIH0gZnJvbSAndGhlbWUvZnVuY3Rpb25zJztcbmltcG9ydCB7IHJlbSB9IGZyb20gJ3RoZW1lL3V0aWxzJztcblxuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICcuLi8uLi90aGVtZSc7XG5pbXBvcnQgeyBQcm9wcyB9IGZyb20gJy4vQ2hpcCc7XG5cbmV4cG9ydCBjb25zdCBjaGlwU3R5bGUgPSAoe1xuICBzdHlsZVR5cGUsXG4gIGZpbGwgPSAnZ3JleVNjYWxlJyxcbiAgaXNTZWxlY3RlZCxcbiAgb25DbGVhcixcbiAgb25DbGljayxcbn06IFByb3BzKSA9PiAodGhlbWU6IFRoZW1lKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gICR7ZmxleENlbnRlclZlcnRpY2FsfTtcbiAgaGVpZ2h0OiAke3RoZW1lLnNwYWNpbmcubGd9O1xuICBib3JkZXItcmFkaXVzOiAke3RoZW1lLnNwYWNpbmcubGd9O1xuICBmb250LXNpemU6ICR7dGhlbWUudHlwb2dyYXBoeS5mb250U2l6ZXNbJzEyJ119O1xuICBmb250LXdlaWdodDogJHt0aGVtZS50eXBvZ3JhcGh5LndlaWdodHMubWVkaXVtfTtcbiAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcGFkZGluZzogJHt0aGVtZS5zcGFjaW5nLnhzbX0gJHt0aGVtZS5zcGFjaW5nLnNtfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHtzdHlsZVR5cGUgPT09ICdyZWFkLW9ubHknIHx8IG9uQ2xlYXIgfHwgaXNTZWxlY3RlZFxuICAgID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgNTApXG4gICAgOiB0aGVtZS5wYWxldHRlLndoaXRlfTtcbiAgY29sb3I6ICR7dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2RhcmtHcmV5JywgODUwKX07XG4gIGJvcmRlcjogJHtyZW0oMSl9IHNvbGlkXG4gICAgJHtzdHlsZVR5cGUgPT09ICdyZWFkLW9ubHknIHx8IG9uQ2xlYXIgfHwgaXNTZWxlY3RlZFxuICAgICAgPyB0aGVtZS51dGlscy5nZXRDb2xvcihmaWxsLCA1NTApXG4gICAgICA6IHRoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCAyMDApfTtcbiAgY3Vyc29yOiAke29uQ2xpY2sgPyAncG9pbnRlcicgOiAnYXV0byd9O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG4gIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMTUwbXMgbGluZWFyO1xuXG4gICY6aG92ZXIge1xuICAgIGJhY2tncm91bmQ6ICR7c3R5bGVUeXBlID09PSAncmVhZC1vbmx5JyB8fCBvbkNsZWFyIHx8IGlzU2VsZWN0ZWRcbiAgICAgID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgMTAwKVxuICAgICAgOiB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgbnVsbCwgJ3BhbGUnKX07XG4gIH1cblxuICA+IDpub3QoOmxhc3QtY2hpbGQpIHtcbiAgICBtYXJnaW4tcmlnaHQ6ICR7dGhlbWUuc3BhY2luZy54c219O1xuICB9XG5gO1xuXG5leHBvcnQgY29uc3QgY2xvc2VJY29uV3JhcHBlclN0eWxlID0gKCkgPT4gKCk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBjdXJzb3I6IHBvaW50ZXI7XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:chipStyle;")
     );
   };
 };
 
-exports.wrapperStyle = wrapperStyle;
+exports.chipStyle = chipStyle;
 
-var iconWrapperStyle = function iconWrapperStyle(size, iconHandler) {
-  return (
-    /*#__PURE__*/
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "e0dnmk",
+  styles: "cursor:pointer"
+} : {
+  name: "uvczt0-closeIconWrapperStyle",
+  styles: "cursor:pointer;label:closeIconWrapperStyle;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE2Q3NFIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGZsZXhDZW50ZXJWZXJ0aWNhbCB9IGZyb20gJ3RoZW1lL2Z1bmN0aW9ucyc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vdGhlbWUnO1xuaW1wb3J0IHsgUHJvcHMgfSBmcm9tICcuL0NoaXAnO1xuXG5leHBvcnQgY29uc3QgY2hpcFN0eWxlID0gKHtcbiAgc3R5bGVUeXBlLFxuICBmaWxsID0gJ2dyZXlTY2FsZScsXG4gIGlzU2VsZWN0ZWQsXG4gIG9uQ2xlYXIsXG4gIG9uQ2xpY2ssXG59OiBQcm9wcykgPT4gKHRoZW1lOiBUaGVtZSk6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICAke2ZsZXhDZW50ZXJWZXJ0aWNhbH07XG4gIGhlaWdodDogJHt0aGVtZS5zcGFjaW5nLmxnfTtcbiAgYm9yZGVyLXJhZGl1czogJHt0aGVtZS5zcGFjaW5nLmxnfTtcbiAgZm9udC1zaXplOiAke3RoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxMiddfTtcbiAgZm9udC13ZWlnaHQ6ICR7dGhlbWUudHlwb2dyYXBoeS53ZWlnaHRzLm1lZGl1bX07XG4gIGxpbmUtaGVpZ2h0OiBub3JtYWw7XG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIHBhZGRpbmc6ICR7dGhlbWUuc3BhY2luZy54c219ICR7dGhlbWUuc3BhY2luZy5zbX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7c3R5bGVUeXBlID09PSAncmVhZC1vbmx5JyB8fCBvbkNsZWFyIHx8IGlzU2VsZWN0ZWRcbiAgICA/IHRoZW1lLnV0aWxzLmdldENvbG9yKGZpbGwsIDUwKVxuICAgIDogdGhlbWUucGFsZXR0ZS53aGl0ZX07XG4gIGNvbG9yOiAke3RoZW1lLnV0aWxzLmdldENvbG9yKCdkYXJrR3JleScsIDg1MCl9O1xuICBib3JkZXI6ICR7cmVtKDEpfSBzb2xpZFxuICAgICR7c3R5bGVUeXBlID09PSAncmVhZC1vbmx5JyB8fCBvbkNsZWFyIHx8IGlzU2VsZWN0ZWRcbiAgICAgID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgNTUwKVxuICAgICAgOiB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMjAwKX07XG4gIGN1cnNvcjogJHtvbkNsaWNrID8gJ3BvaW50ZXInIDogJ2F1dG8nfTtcbiAgd2lkdGg6IGZpdC1jb250ZW50O1xuICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDE1MG1zIGxpbmVhcjtcblxuICAmOmhvdmVyIHtcbiAgICBiYWNrZ3JvdW5kOiAke3N0eWxlVHlwZSA9PT0gJ3JlYWQtb25seScgfHwgb25DbGVhciB8fCBpc1NlbGVjdGVkXG4gICAgICA/IHRoZW1lLnV0aWxzLmdldENvbG9yKGZpbGwsIDEwMClcbiAgICAgIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIG51bGwsICdwYWxlJyl9O1xuICB9XG5cbiAgPiA6bm90KDpsYXN0LWNoaWxkKSB7XG4gICAgbWFyZ2luLXJpZ2h0OiAke3RoZW1lLnNwYWNpbmcueHNtfTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IGNsb3NlSWNvbldyYXBwZXJTdHlsZSA9ICgpID0+ICgpOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgY3Vyc29yOiBwb2ludGVyO1xuYDtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 
-    /*#__PURE__*/
-    (0, _react.css)(_functions.flexCenterVertical, ";height:", size === 'md' ? (0, _utils.rem)(16) : (0, _utils.rem)(14), ";width:", size === 'md' ? (0, _utils.rem)(16) : (0, _utils.rem)(14), ";&>*{max-height:100%;}cursor:", iconHandler ? 'pointer' : 'auto', ";padding-left:", (0, _utils.rem)(4), ";padding-right:", (0, _utils.rem)(4), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:iconWrapperStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRjBCIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC5zdHlsZS50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywgU2VyaWFsaXplZFN0eWxlcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRhcmtlbiwgbGlnaHRlbiB9IGZyb20gJ3BvbGlzaGVkJztcbmltcG9ydCB7IGZsZXhDZW50ZXJWZXJ0aWNhbCB9IGZyb20gJ3RoZW1lL2Z1bmN0aW9ucyc7XG5pbXBvcnQgeyBCQVNFX1NIQURFLCBjb2xvclNoYWRlcywgcGlja1RleHRDb2xvckZyb21Td2F0Y2hlcyB9IGZyb20gJ3RoZW1lL3BhbGV0dGUnO1xuaW1wb3J0IHsgZmxhdENvbG9ycyB9IGZyb20gJ3RoZW1lL3BhbGV0dGUnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IFByb3BzIH0gZnJvbSAnLi9DaGlwJztcblxuLyoqIENhbGN1bGF0ZXMgdGhlIGxhYmVsIHNwZWNpZmljIGhlaWdodCBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXRcbiAqIFRoZXNlIHNpemVzIGFyZSBzcGVjaWZpYyB0byB0aGlzIGNvbXBvbmVudCB0aHVzIHRoZXNlIGFyZSBwbGFjZWQgaGVyZSBhbmQgbm90IGluIHRoZSBjb25maWcgKiovXG5jb25zdCBzdHlsZUJhc2VkT25TaXplID0gKFxuICB0aGVtZTogVGhlbWUsXG4gIHNpemU/OiAnbWQnIHwgJ3NtJyxcbiAgbGVmdEljb24/OiBKU1guRWxlbWVudCxcbiAgcmlnaHRJY29uPzogSlNYLkVsZW1lbnRcbikgPT4ge1xuICBjb25zdCBoYXNJY29uOiBib29sZWFuID0gbGVmdEljb24gIT09IHVuZGVmaW5lZCB8fCByaWdodEljb24gIT09IHVuZGVmaW5lZDtcbiAgc3dpdGNoIChzaXplKSB7XG4gICAgY2FzZSAnc20nOlxuICAgICAgcmV0dXJuIGBcbiAgICAgIGhlaWdodDogJHtyZW0oMjApfTtcbiAgICAgIGJvcmRlci1yYWRpdXM6ICR7cmVtKDE2LjUpfTtcbiAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1snMTAnXX07XG4gICAgICBgO1xuICAgIGRlZmF1bHQ6XG4gICAgICByZXR1cm4gYFxuICAgICAgaGVpZ2h0OiAke3JlbSgyNCl9O1xuICAgICAgYm9yZGVyLXJhZGl1czogJHtyZW0oMTIuNSl9O1xuICAgICAgZm9udC1zaXplOiAke3RoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzWycxMiddfTtcbiAgICAgIGA7XG4gIH1cbn07XG5cbmNvbnN0IHdyYXBwZXJTdHlsZVN3aXRjaCA9IChcbiAgdGhlbWU6IFRoZW1lLFxuICBzdHlsZVR5cGU/OiAnZmlsbGVkJyB8ICdvdXRsaW5lZCcsXG4gIGZpbGw/OiB0eXBlb2YgZmxhdENvbG9yc1tudW1iZXJdLFxuICBzaGFkZTogdHlwZW9mIGNvbG9yU2hhZGVzW251bWJlcl0gPSBCQVNFX1NIQURFXG4pID0+IHtcbiAgc3dpdGNoIChzdHlsZVR5cGUpIHtcbiAgICBjYXNlICdvdXRsaW5lZCc6IHtcbiAgICAgIGNvbnN0IGZpbGxDb2xvciA9IGZpbGxcbiAgICAgICAgPyB0aGVtZS51dGlscy5nZXRDb2xvcihmaWxsLCBzaGFkZSlcbiAgICAgICAgOiB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5Jywgc2hhZGUpO1xuICAgICAgY29uc3QgYm9yZGVyQ29sb3IgPSBzaGFkZSA8IDUwMCA/IGRhcmtlbignMC41JywgZmlsbENvbG9yKSA6IGxpZ2h0ZW4oJzAuNScsIGZpbGxDb2xvcik7XG5cbiAgICAgIHJldHVybiBgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZmlsbCA/IGZpbGxDb2xvciA6ICd0cmFuc3BhcmVudCd9O1xuICAgICAgICBjb2xvcjogJHtmaWxsID8gcGlja1RleHRDb2xvckZyb21Td2F0Y2hlcyhmaWxsLCBzaGFkZSkgOiAnIzIzMjMyMyd9O1xuICAgICAgICBib3JkZXI6ICR7cmVtKDEpfSBzb2xpZCAke2JvcmRlckNvbG9yfTtcbiAgICAgIGA7XG4gICAgfVxuICAgIGNhc2UgJ2ZpbGxlZCc6XG4gICAgZGVmYXVsdDpcbiAgICAgIHJldHVybiBgXG4gICAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7XG4gICAgICAgICAgZmlsbCA/IHRoZW1lLnV0aWxzLmdldENvbG9yKGZpbGwsIHNoYWRlKSA6IHRoZW1lLnV0aWxzLmdldENvbG9yKCdsaWdodEdyZXknLCA1MClcbiAgICAgICAgfTtcbiAgICAgICAgY29sb3I6ICR7ZmlsbCA/IHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMoZmlsbCwgc2hhZGUpIDogJyMyMzIzMjMnfTtcbiAgICAgICAgYm9yZGVyOiAke3JlbSgxKX0gc29saWQgJHtcbiAgICAgICAgICBmaWxsID8gdGhlbWUudXRpbHMuZ2V0Q29sb3IoZmlsbCwgc2hhZGUpIDogdGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDUwKVxuICAgICAgICB9O1xuICAgICAgYDtcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IHdyYXBwZXJTdHlsZSA9ICh7IHN0eWxlVHlwZSwgc2l6ZSwgZmlsbCwgc2hhZGUsIGxlZnRJY29uLCByaWdodEljb24gfTogUHJvcHMpID0+IChcbiAgdGhlbWU6IFRoZW1lXG4pOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4Q2VudGVyVmVydGljYWx9O1xuICAke3N0eWxlQmFzZWRPblNpemUodGhlbWUsIHNpemUsIGxlZnRJY29uLCByaWdodEljb24pfTtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgcGFkZGluZy1sZWZ0OiAke2xlZnRJY29uID8gJ2luaGVyaXQnIDogcmVtKDgpfTtcbiAgcGFkZGluZy1yaWdodDogJHtyaWdodEljb24gPyAnaW5oZXJpdCcgOiByZW0oOCl9O1xuICAke3dyYXBwZXJTdHlsZVN3aXRjaCh0aGVtZSwgc3R5bGVUeXBlLCBmaWxsLCBzaGFkZSl9O1xuICB3aWR0aDogZml0LWNvbnRlbnQ7XG5gO1xuXG5leHBvcnQgY29uc3QgaWNvbldyYXBwZXJTdHlsZSA9IChcbiAgc2l6ZTogJ21kJyB8ICdzbScsXG4gIGljb25IYW5kbGVyPzogUmVhY3QuUmVhY3RFdmVudEhhbmRsZXJcbik6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICAke2ZsZXhDZW50ZXJWZXJ0aWNhbH07XG4gIGhlaWdodDogJHtzaXplID09PSAnbWQnID8gcmVtKDE2KSA6IHJlbSgxNCl9O1xuICB3aWR0aDogJHtzaXplID09PSAnbWQnID8gcmVtKDE2KSA6IHJlbSgxNCl9O1xuICAmID4gKiB7XG4gICAgbWF4LWhlaWdodDogMTAwJTtcbiAgfVxuXG4gIGN1cnNvcjogJHtpY29uSGFuZGxlciA/ICdwb2ludGVyJyA6ICdhdXRvJ307XG4gIHBhZGRpbmctbGVmdDogJHtyZW0oNCl9O1xuICBwYWRkaW5nLXJpZ2h0OiAke3JlbSg0KX07XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:iconWrapperStyle;")
-  );
+var closeIconWrapperStyle = function closeIconWrapperStyle() {
+  return function () {
+    return _ref;
+  };
 };
 
-exports.iconWrapperStyle = iconWrapperStyle;
+exports.closeIconWrapperStyle = closeIconWrapperStyle;

package/dist/components/Chip/components/Badge/Badge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TestId } from 'utils/types';
+import { Props } from '../../Chip';
+declare type TestProps = {
+    dataTestId?: TestId;
+};
+declare const Badge: React.FC<Props & TestProps>;
+export default Badge;

package/dist/components/Chip/components/Badge/Badge.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../../../utils/helpers");
+
+var _Badge = require("./Badge.style");
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Badge = function Badge(_ref) {
+  var fill = _ref.fill,
+      isSelected = _ref.isSelected,
+      badgeNumber = _ref.badgeNumber,
+      dataTestId = _ref.dataTestId;
+  return (0, _react2.jsx)("div", {
+    "data-testid": (0, _helpers.generateTestDataId)('badge', dataTestId),
+    css: (0, _Badge.badgeStyle)({
+      fill: fill,
+      isSelected: isSelected
+    })
+  }, badgeNumber);
+};
+
+var _default = Badge;
+exports["default"] = _default;

package/dist/components/Chip/components/Badge/Badge.style.d.ts

@@ -0,0 +1,4 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+import { Props } from '../../Chip';
+export declare const badgeStyle: ({ fill, isSelected }: Props) => (theme: Theme) => SerializedStyles;

package/dist/components/Chip/components/Badge/Badge.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.badgeStyle = void 0;
+
+var _react = require("@emotion/react");
+
+var _functions = require("../../../../theme/functions");
+
+var _palette = require("../../../../theme/palette");
+
+var badgeStyle = function badgeStyle(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? 'greyScale' : _ref$fill,
+      isSelected = _ref.isSelected;
+  return function (theme) {
+    return (
+      /*#__PURE__*/
+
+      /*#__PURE__*/
+      (0, _react.css)(_functions.flex, ";width:", theme.spacing.md, ";height:", theme.spacing.md, ";border-radius:100%;background:", isSelected ? theme.utils.getColor(fill, 550) : theme.utils.getColor('lightGrey', 200), ";font-size:", theme.typography.fontSizes['10'], ";font-weight:", theme.typography.weights.medium, ";align-items:center;flex-shrink:0;line-height:normal;justify-content:center;color:", isSelected ? (0, _palette.pickTextColorFromSwatches)(fill, 550) : (0, _palette.pickTextColorFromSwatches)('lightGrey', 200), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:badgeStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvY29tcG9uZW50cy9CYWRnZS9CYWRnZS5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFTMEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ2hpcC9jb21wb25lbnRzL0JhZGdlL0JhZGdlLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgVGhlbWUgfSBmcm9tICd0aGVtZSc7XG5pbXBvcnQgeyBmbGV4IH0gZnJvbSAndGhlbWUvZnVuY3Rpb25zJztcbmltcG9ydCB7IHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMgfSBmcm9tICd0aGVtZS9wYWxldHRlJztcblxuaW1wb3J0IHsgUHJvcHMgfSBmcm9tICcuLi8uLi9DaGlwJztcblxuZXhwb3J0IGNvbnN0IGJhZGdlU3R5bGUgPSAoeyBmaWxsID0gJ2dyZXlTY2FsZScsIGlzU2VsZWN0ZWQgfTogUHJvcHMpID0+IChcbiAgdGhlbWU6IFRoZW1lXG4pOiBTZXJpYWxpemVkU3R5bGVzID0+IGNzc2BcbiAgJHtmbGV4fTtcbiAgd2lkdGg6ICR7dGhlbWUuc3BhY2luZy5tZH07XG4gIGhlaWdodDogJHt0aGVtZS5zcGFjaW5nLm1kfTtcbiAgYm9yZGVyLXJhZGl1czogMTAwJTtcbiAgYmFja2dyb3VuZDogJHtpc1NlbGVjdGVkXG4gICAgPyB0aGVtZS51dGlscy5nZXRDb2xvcihmaWxsLCA1NTApXG4gICAgOiB0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgMjAwKX07XG4gIGZvbnQtc2l6ZTogJHt0aGVtZS50eXBvZ3JhcGh5LmZvbnRTaXplc1snMTAnXX07XG4gIGZvbnQtd2VpZ2h0OiAke3RoZW1lLnR5cG9ncmFwaHkud2VpZ2h0cy5tZWRpdW19O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBmbGV4LXNocmluazogMDtcbiAgbGluZS1oZWlnaHQ6IG5vcm1hbDtcbiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gIGNvbG9yOiAke2lzU2VsZWN0ZWRcbiAgICA/IHBpY2tUZXh0Q29sb3JGcm9tU3dhdGNoZXMoZmlsbCwgNTUwKVxuICAgIDogcGlja1RleHRDb2xvckZyb21Td2F0Y2hlcygnbGlnaHRHcmV5JywgMjAwKX07XG5gO1xuIl19 */", process.env.NODE_ENV === "production" ? "" : ";label:badgeStyle;")
+    );
+  };
+};
+
+exports.badgeStyle = badgeStyle;

package/dist/components/Chip/components/Badge/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Badge';

package/dist/components/Chip/components/Badge/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Badge = _interopRequireDefault(require("./Badge"));
+
+exports["default"] = _Badge["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/components/Table/Table.d.ts

@@ -3,6 +3,8 @@ import { ExtendedColumn, Sort, SortingOrder } from './types';
 export declare type ContentComponent<T> = (data: Cell<T>) => React.Component | JSX.Element;
 export declare type Cell<T> = {
     content: number | string | ContentComponent<T>;
+    tooltipContent?: string;
+    hasTruncatedTooltip?: boolean;
     colSpan?: number;
     type?: 'financial' | 'normal';
     align?: 'left' | 'right';
@@ -51,4 +53,5 @@ declare type Props<T> = {
     dataTestIdPrefix?: string;
 };
 declare function Table<T>({ data, columns, type, fixedHeader, fixedCTA, onCheck, padded, onSort, initialSort, sortDir, topLeftText, topRightArea, actionWidth, dataTestIdPrefix, }: Props<T>): import("@emotion/react/jsx-runtime").JSX.Element;
-export default Table;
+declare const _default: React.MemoExoticComponent<typeof Table>;
+export default _default;

package/dist/components/Table/Table.js

@@ -11,6 +11,8 @@ var _pluralize = _interopRequireDefault(require("pluralize"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 var _CheckBox = _interopRequireDefault(require("../CheckBox"));
 
 var _ExtendedColumnItem = _interopRequireDefault(require("./components/ExtendedColumnItem"));
@@ -251,7 +253,6 @@ function Table(_ref) {
         fixedHeader: fixedHeader,
         type: type,
         columnCount: columnCount,
-        columnsHasNumberArr: columnsHasNumberArr,
         columnsWithWidth: columnsWithWidth,
         onSelectionChangeExist: Boolean(onCheck),
         expanded: Boolean(row.expanded),
@@ -263,5 +264,6 @@ function Table(_ref) {
   }))));
 }
 
-var _default = Table;
+var _default = /*#__PURE__*/_react["default"].memo(Table, _reactFastCompare["default"]);
+
 exports["default"] = _default;

package/dist/components/Table/TableRowContext.d.ts

@@ -4,7 +4,6 @@ export declare type TableRowContextProps<T extends {
     [key: string]: unknown;
 }> = {
     row: Row<T>;
-    columnsHasNumberArr: boolean[];
     columnsWithWidth: number[];
     padded: boolean;
     onSelectionChangeExist: boolean;

package/dist/components/Table/TableRowContext.js

@@ -14,7 +14,6 @@ var TableRowContext = /*#__PURE__*/React.createContext({
     id: 0,
     cells: []
   },
-  columnsHasNumberArr: [],
   columnsWithWidth: [],
   padded: false,
   onSelectionChangeExist: false,

package/dist/components/Table/components/RenderRowOrNestedRow/RenderRowOrNestedRow.js

@@ -44,7 +44,6 @@ var RenderRowWithCells = /*#__PURE__*/React.memo(function (_ref) {
       rowIndex = _ref.rowIndex;
 
   var _React$useContext = React.useContext(_TableRowContext.TableRowContext),
-      columnsHasNumberArr = _React$useContext.columnsHasNumberArr,
       columnsWithWidth = _React$useContext.columnsWithWidth,
       onSelectionChangeExist = _React$useContext.onSelectionChangeExist,
       padded = _React$useContext.padded,
@@ -87,17 +86,20 @@ var RenderRowWithCells = /*#__PURE__*/React.memo(function (_ref) {
     onClick: tChange
   }))), (_row$cells2 = row.cells) == null ? void 0 : _row$cells2.map(function (_ref2, index) {
     var content = _ref2.content,
+        tooltipContent = _ref2.tooltipContent,
+        _ref2$hasTruncatedToo = _ref2.hasTruncatedTooltip,
+        hasTruncatedTooltip = _ref2$hasTruncatedToo === void 0 ? true : _ref2$hasTruncatedToo,
         colSpan = _ref2.colSpan,
         cellType = _ref2.type,
         align = _ref2.align;
     return (0, _react2.jsx)(_ContentCell["default"], {
       key: row.id + "-" + index,
       cellCounter: index,
-      columnsHasNumberArr: columnsHasNumberArr,
+      columnWidth: columnsWithWidth[index],
       columns: columns,
+      tooltipContent: hasTruncatedTooltip ? (0, _helpers.isComponentFunctionType)(content) ? tooltipContent : tooltipContent != null ? tooltipContent : content.toString() : undefined,
       padded: padded,
       colSpan: colSpan,
-      columnsWithWidth: columnsWithWidth,
       content: content,
       cellType: cellType,
       rowType: type,

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ContentComponent, TableType } from '../../../../Table';
 declare type Props = {
-    columnsHasNumberArr: boolean[];
     columns: string[];
     padded: boolean;
-    columnsWithWidth: number[];
+    tooltipContent?: string;
+    columnWidth?: number;
     content: number | string | ContentComponent<any>;
     colSpan?: number;
     cellType?: 'financial' | 'normal';

package/dist/components/Table/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _helpers = require("../../../../../../utils/helpers");
 
+var _TruncatedContent = _interopRequireDefault(require("../../../../../TruncatedContent"));
+
 var _TableCell = _interopRequireDefault(require("../../../TableCell"));
 
 var _ContentCell = require("./ContentCell.style");
@@ -16,10 +18,10 @@ var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var ContentCell = function ContentCell(_ref) {
-  var columnsHasNumberArr = _ref.columnsHasNumberArr,
-      columns = _ref.columns,
+  var columns = _ref.columns,
       padded = _ref.padded,
-      columnsWithWidth = _ref.columnsWithWidth,
+      columnWidth = _ref.columnWidth,
+      tooltipContent = _ref.tooltipContent,
       content = _ref.content,
       colSpan = _ref.colSpan,
       rowType = _ref.rowType,
@@ -29,24 +31,28 @@ var ContentCell = function ContentCell(_ref) {
       dataTestIdPrefix = _ref.dataTestIdPrefix,
       rowIndex = _ref.rowIndex,
       index = _ref.index;
-  var isNumeral = columnsHasNumberArr[cellCounter];
+  var isNumeral = !Number.isNaN(Number(content));
   return (0, _react2.jsx)(_TableCell["default"], {
     textAlign: align ? align : isNumeral ? 'right' : 'left',
     colSpan: colSpan,
     type: cellType,
     padded: padded,
-    width: columnsWithWidth[cellCounter] ? columnsWithWidth[cellCounter] + "%" : 'initial',
+    width: columnWidth ? columnWidth + "%" : 'initial',
     dataTestIdPrefix: dataTestIdPrefix,
     rowIndex: rowIndex,
     index: index
   }, rowType === 'nested-header' && (0, _react2.jsx)("div", {
     css: (0, _ContentCell.nestedHeaderStyle)()
-  }, columns[cellCounter]), (0, _helpers.isComponentFunctionType)(content) ? content({
+  }, columns[cellCounter]), (0, _react2.jsx)(_TruncatedContent["default"], {
+    placement: 'bottom',
+    shouldAlwaysShow: (0, _helpers.isComponentFunctionType)(content) && !!tooltipContent,
+    tooltipContent: tooltipContent
+  }, (0, _helpers.isComponentFunctionType)(content) ? content({
     content: content,
     colSpan: colSpan
   }) : (0, _react2.jsx)("span", {
     "data-column": columns[cellCounter]
-  }, content));
+  }, content)));
 };
 
 var _default = /*#__PURE__*/_react["default"].memo(ContentCell);

package/dist/components/Table/components/TableRowWrapper/TableRowWrapper.d.ts

@@ -3,7 +3,6 @@ declare type TableRowWrapperProps<T> = {
     row: Row<T>;
     isRowSelected: boolean;
     onSelectionAdd: (selection: Selection) => void;
-    columnsHasNumberArr: boolean[];
     columnsWithWidth: number[];
     padded: boolean;
     onSelectionChangeExist: boolean;

package/dist/components/Table/components/TableRowWrapper/TableRowWrapper.js

@@ -21,7 +21,6 @@ var TableRowWrapper = function TableRowWrapper(props) {
       columns = props.columns,
       fixedHeader = props.fixedHeader,
       type = props.type,
-      columnsHasNumberArr = props.columnsHasNumberArr,
       columnsWithWidth = props.columnsWithWidth,
       columnCount = props.columnCount,
       onSelectionChangeExist = props.onSelectionChangeExist,
@@ -37,7 +36,6 @@ var TableRowWrapper = function TableRowWrapper(props) {
   return (0, _react2.jsx)(_TableRowContext.TableRowContext.Provider, {
     value: {
       row: row,
-      columnsHasNumberArr: columnsHasNumberArr,
       columnsWithWidth: columnsWithWidth,
       onSelectionChangeExist: onSelectionChangeExist,
       padded: padded,

package/dist/components/TruncatedContent/TruncatedContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    /** The content of the tooltip */
+    tooltipContent: string | undefined;
+    /** Flag for overriding other settings to always show the tooltip */
+    shouldAlwaysShow?: boolean;
+    /** The placement of the tooltip */
+    placement?: 'top' | 'bottom' | 'right' | 'left';
+};
+declare const TruncatedContent: React.FC<Props>;
+export default TruncatedContent;

package/dist/components/TruncatedContent/TruncatedContent.js

@@ -0,0 +1,69 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TruncatedContent = require("./TruncatedContent.style");
+
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+
+var _react2 = require("@emotion/react");
+
+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; }
+
+var TruncatedContent = function TruncatedContent(_ref) {
+  var children = _ref.children,
+      _ref$shouldAlwaysShow = _ref.shouldAlwaysShow,
+      shouldAlwaysShow = _ref$shouldAlwaysShow === void 0 ? false : _ref$shouldAlwaysShow,
+      tooltipContent = _ref.tooltipContent,
+      _ref$placement = _ref.placement,
+      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement;
+
+  var _useState = (0, _react.useState)(false),
+      isHovered = _useState[0],
+      setIsHovered = _useState[1];
+
+  var targetRef = (0, _react.useRef)(null);
+  var target = targetRef.current;
+  var handleMouseEnter = (0, _react.useCallback)(function () {
+    setIsHovered(true);
+  }, []);
+  var handleMouseLeave = (0, _react.useCallback)(function () {
+    setIsHovered(false);
+  }, []);
+  var isTruncated = (0, _react.useMemo)(function () {
+    return !!target && target.scrollWidth > target.offsetWidth;
+  }, [target]);
+  var showTooltip = (0, _react.useCallback)(function (tooltipContent, isHovered, isTruncated, shouldAlwaysShow) {
+    if (tooltipContent === undefined) {
+      return false;
+    }
+
+    if (shouldAlwaysShow) {
+      return true;
+    }
+
+    return isHovered && isTruncated;
+  }, []);
+  return showTooltip(tooltipContent, isHovered, isTruncated, shouldAlwaysShow) ? (0, _react2.jsx)(_Tooltip["default"], {
+    placement: placement,
+    content: tooltipContent
+  }, (0, _react2.jsx)(_TruncatedContent.TruncationDiv, {
+    ref: targetRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, children)) : (0, _react2.jsx)(_TruncatedContent.TruncationDiv, {
+    ref: targetRef,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, children);
+};
+
+var _default = TruncatedContent;
+exports["default"] = _default;

package/dist/components/TruncatedContent/TruncatedContent.style.d.ts

@@ -0,0 +1,4 @@
+export declare const TruncationDiv: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/TruncatedContent/TruncatedContent.style.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.TruncationDiv = void 0;
+
+var _base = _interopRequireDefault(require("@emotion/styled/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var TruncationDiv = (0, _base["default"])("div", process.env.NODE_ENV === "production" ? {
+  target: "ep8j7z50"
+} : {
+  target: "ep8j7z50",
+  label: "TruncationDiv"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1h52dri",
+  styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap"
+} : {
+  name: "1h52dri",
+  styles: "overflow:hidden;text-overflow:ellipsis;white-space:nowrap",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RydW5jYXRlZENvbnRlbnQvVHJ1bmNhdGVkQ29udGVudC5zdHlsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBRXVDIiwiZmlsZSI6Ii4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1RydW5jYXRlZENvbnRlbnQvVHJ1bmNhdGVkQ29udGVudC5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5cbmV4cG9ydCBjb25zdCBUcnVuY2F0aW9uRGl2ID0gc3R5bGVkLmRpdmBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5gO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+exports.TruncationDiv = TruncationDiv;

package/dist/components/TruncatedContent/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TruncatedContent';

package/dist/components/TruncatedContent/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _TruncatedContent = _interopRequireDefault(require("./TruncatedContent"));
+
+exports["default"] = _TruncatedContent["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/dist/index.d.ts

@@ -52,5 +52,6 @@ export { default as useTheme } from './hooks/useTheme';
 export { default as useBreakpoints } from './hooks/useBreakpoints';
 export { default as useEscape } from './hooks/useEscape';
 export { default as Filter } from './components/Filter';
+export { default as TruncatedContent } from './components/TruncatedContent';
 export { default as themeConfig } from './theme';
 export { themeFunctions, palette, spacing, typography, elevation, overrides, queriesSizes, };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.typography = exports.spacing = exports.palette = exports.overrides = exports.themeFunctions = exports.elevation = exports.themeConfig = exports.Filter = exports.useEscape = exports.useBreakpoints = exports.useTheme = exports.TopNavBar = exports.Tooltip = exports.Toast = exports.ThemeProvider = exports.TextArea = exports.SearchField = exports.TextField = exports.Table = exports.Select = exports.RadioGroup = exports.Radio = exports.Pagination = exports.Snackbar = exports.Banner = exports.NotificationVisual = exports.NotificationsContainer = exports.InlineNotification = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Label = exports.IconButton = exports.Icon = exports.ExpandCollapse = exports.Drawer = exports.DatePicker = exports.Chip = exports.CheckBox = exports.DonutChart = exports.BarChart = exports.LineChart = exports.Card = exports.Button = exports.Breadcrumb = exports.Avatar = void 0;
+exports.typography = exports.spacing = exports.palette = exports.overrides = exports.themeFunctions = exports.elevation = exports.themeConfig = exports.TruncatedContent = exports.Filter = exports.useEscape = exports.useBreakpoints = exports.useTheme = exports.TopNavBar = exports.Tooltip = exports.Toast = exports.ThemeProvider = exports.TextArea = exports.SearchField = exports.TextField = exports.Table = exports.Select = exports.RadioGroup = exports.Radio = exports.Pagination = exports.Snackbar = exports.Banner = exports.NotificationVisual = exports.NotificationsContainer = exports.InlineNotification = exports.Modal = exports.Menu = exports.Loader = exports.List = exports.Label = exports.IconButton = exports.Icon = exports.ExpandCollapse = exports.Drawer = exports.DatePicker = exports.Chip = exports.CheckBox = exports.DonutChart = exports.BarChart = exports.LineChart = exports.Card = exports.Button = exports.Breadcrumb = exports.Avatar = void 0;
 
 var _useBreakpoints = _interopRequireWildcard(require("./hooks/useBreakpoints"));
 
@@ -188,6 +188,10 @@ var _Filter = _interopRequireDefault(require("./components/Filter"));
 
 exports.Filter = _Filter["default"];
 
+var _TruncatedContent = _interopRequireDefault(require("./components/TruncatedContent"));
+
+exports.TruncatedContent = _TruncatedContent["default"];
+
 var _theme = _interopRequireDefault(require("./theme"));
 
 exports.themeConfig = _theme["default"];

package/dist/theme/palette.config.js

@@ -13,7 +13,7 @@ var flatPaletteConfig = {
   magenta: '#C813D5',
   purple: '#8833FF',
   darkBlue: '#4945EE',
-  blue: '#2979FF',
+  blue: '#175BF5',
   lightBlue: '#28BDFF',
   teal: '#1DE9B6',
   green: '#36C152',

package/dist/theme/palette.js

@@ -62,8 +62,8 @@ var pickTextColorFromSwatches = function pickTextColorFromSwatches(color, shade)
     650: ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'green', 'orange', 'darkOrange'],
     600: ['greyScale', 'darkGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
     550: ['greyScale', 'darkGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
-    500: ['darkGrey', 'magenta', 'purple', 'darkBlue', 'darkOrange'],
-    450: ['darkGrey', 'purple', 'darkBlue', 'darkOrange'],
+    500: ['darkGrey', 'magenta', 'purple', 'darkBlue', 'blue', 'darkOrange'],
+    450: ['darkGrey', 'purple', 'darkBlue', 'blue', 'darkOrange'],
     400: ['darkGrey', 'darkOrange'],
     350: ['darkGrey', 'darkOrange']
   };

package/dist/theme/typography.d.ts

@@ -8,6 +8,7 @@ declare const weights: {
 export declare type Typography = {
     globalFontSize: number;
     fontSizes: {
+        8: string;
         10: string;
         11: string;
         12: string;

package/dist/theme/typography.js

@@ -14,6 +14,7 @@ var weights = {
   black: 900
 };
 var fontSizes = {
+  8: (0, _utils.rem)('8px'),
   10: (0, _utils.rem)('10px'),
   11: (0, _utils.rem)('11px'),
   12: (0, _utils.rem)('12px'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.5.2",
+  "version": "4.8.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -97,6 +97,7 @@
     "lodash": "^4.17.19",
     "pluralize": "^8.0.0",
     "polished": "^3.4.4",
+    "react-fast-compare": "^3.2.0",
     "react-highlight-words": "^0.17.0",
     "react-media": "^2.0.0-rc.1",
     "react-window": "^1.8.6",