@orfium/ictinus 4.6.1 → 4.9.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/List/List.d.ts

@@ -20,9 +20,10 @@ export declare type ListProps = {
     searchTerm?: string;
     /** Option Click handler for SelectOption[] data case */
     handleOptionClick?: SelectHandlerType;
+    /** Defines if this is searchable list or not **/
     isSearchable?: boolean;
 } & TestProps;
-declare const List: React.ForwardRefExoticComponent<{
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     /** Data for the list */
     data: ListItemType[];
     /** Size of the list's row (height of ListItem Component)  */
@@ -41,6 +42,7 @@ declare const List: React.ForwardRefExoticComponent<{
     searchTerm?: string | undefined;
     /** Option Click handler for SelectOption[] data case */
     handleOptionClick?: SelectHandlerType | undefined;
+    /** Defines if this is searchable list or not **/
     isSearchable?: boolean | undefined;
-} & TestProps & React.RefAttributes<HTMLDivElement>>;
-export default List;
+} & TestProps & React.RefAttributes<HTMLDivElement>>>;
+export default _default;

package/dist/components/List/List.js

@@ -3,7 +3,9 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
 
 var _List = require("./List.style");
 
@@ -15,6 +17,10 @@ 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 List = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var data = _ref.data,
       rowSize = _ref.rowSize,
@@ -60,5 +66,7 @@ var List = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
 });
 
 List.displayName = 'List';
-var _default = List;
+
+var _default = /*#__PURE__*/(0, _react.memo)(List, _reactFastCompare["default"]);
+
 exports["default"] = _default;

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

@@ -4,3 +4,8 @@ export declare const wrapperStyle: ({ width, isSearchable, }: {
     width: number | undefined;
     isSearchable?: boolean | undefined;
 }) => (theme: Theme) => SerializedStyles;
+export declare const listStyle: ({ width, height, isSearchable, }: {
+    width?: number | undefined;
+    height?: number | undefined;
+    isSearchable?: boolean | undefined;
+}) => (theme: Theme) => SerializedStyles;