@orfium/ictinus 4.41.0 → 4.42.0

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

@@ -2,6 +2,6 @@ import React from 'react';
 import { DivProps } from 'utils/common';
 import { TestProps } from 'utils/types';
 import { Props } from './AvatarStack.types';
-declare const AvatarStack: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "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 AvatarStack: React.ForwardRefExoticComponent<Pick<Props & TestProps & DivProps, "children" | "onChange" | "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" | keyof TestProps | keyof Props> & React.RefAttributes<HTMLDivElement>>;
 export default AvatarStack;
 export { Props };

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

@@ -1,5 +1,4 @@
 import { Theme } from 'theme';
-import { RequiredProperties } from 'utils/common';
 import { Props } from './Button';
 export declare const buttonSpanStyle: () => () => {
     display: string;
@@ -9,9 +8,9 @@ export declare const buttonSpanStyle: () => () => {
 export declare const iconStyle: () => () => {
     display: string;
 };
-export declare const childrenWrapperStyle: ({ iconLeft, iconRight, hasChildren, }: RequiredProperties<Omit<Props, "onClick" | "dataTestId" | "block" | "isIconButton" | "buttonType"> & {
+export declare const childrenWrapperStyle: ({ iconLeft, iconRight, hasChildren, }: Omit<Props, "onClick" | "dataTestId" | "block" | "isIconButton" | "buttonType"> & {
     hasChildren: boolean;
-}>) => (theme: Theme) => {
+}) => (theme: Theme) => {
     marginLeft: number | "8";
     marginRight: number | "8";
 };

package/dist/components/ButtonBase/ButtonBase.d.ts

@@ -1,3 +1,4 @@
+import { CSSObject } from '@emotion/serialize';
 import React from 'react';
 import { ClickEvent } from '../../hooks/useLoading';
 import { AcceptedColorComponentTypes } from '../../utils/themeFunctions';
@@ -32,6 +33,10 @@ export declare type Props = {
     disabled?: boolean;
     /** Defines the button type */
     buttonType?: 'submit' | 'reset' | 'button';
+    /** Sx prop to override specific properties */
+    sx?: {
+        container?: CSSObject;
+    };
 };
 declare const ButtonBase: React.ForwardRefExoticComponent<Partial<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "css" | "onBlur" | "onClick" | "type">> & Props & TestProps & EventButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default ButtonBase;

package/dist/components/ButtonBase/ButtonBase.js

@@ -29,8 +29,6 @@ var ButtonBase = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
       filled = _props$filled === void 0 ? true : _props$filled,
       _props$transparent = props.transparent,
       transparent = _props$transparent === void 0 ? false : _props$transparent,
-      _props$isIconButton = props.isIconButton,
-      isIconButton = _props$isIconButton === void 0 ? false : _props$isIconButton,
       _props$iconLeft = props.iconLeft,
       iconLeft = _props$iconLeft === void 0 ? null : _props$iconLeft,
       _props$iconRight = props.iconRight,
@@ -42,16 +40,19 @@ var ButtonBase = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
       children = props.children,
       _props$dataTestId = props.dataTestId,
       dataTestId = _props$dataTestId === void 0 ? '' : _props$dataTestId,
+      _props$dataTestPrefix = props.dataTestPrefixId,
+      dataTestPrefixId = _props$dataTestPrefix === void 0 ? '' : _props$dataTestPrefix,
       _props$buttonType = props.buttonType,
       buttonType = _props$buttonType === void 0 ? 'button' : _props$buttonType,
       _onClick = props.onClick,
-      onBlur = props.onBlur;
+      onBlur = props.onBlur,
+      sx = props.sx;
 
   var _useTypeColorToColorM = (0, _useTypeColorToColorMatch.useTypeColorToColorMatch)(),
       calculateColorBetweenColorAndType = _useTypeColorToColorM.calculateColorBetweenColorAndType;
 
   var calculatedColor = calculateColorBetweenColorAndType(color, type);
-  var testIdName = (isIconButton ? 'icon-' : '') + "button";
+  var testIdName = dataTestPrefixId + "button";
   return (0, _react2.jsx)("button", {
     ref: ref,
     type: buttonType,
@@ -65,10 +66,10 @@ var ButtonBase = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
       color: color,
       transparent: transparent,
       calculatedColor: calculatedColor,
-      isIconButton: isIconButton,
       disabled: disabled,
       iconLeft: iconLeft,
       iconRight: iconRight,
+      sx: sx,
       childrenCount: _react["default"].Children.count(children)
     }),
     onClick: function onClick(event) {

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

@@ -1,61 +1,14 @@
+import { SerializedStyles } from '@emotion/react';
 import { Theme } from '../../theme';
-import { RequiredProperties } from '../../utils/common';
 import { ColorShapeFromComponent } from '../../utils/themeFunctions';
 import { Props } from './ButtonBase';
 import { buttonSizes } from './config';
 /** Calculates the button specific height based on the size passed to it **/
-export declare const heightBasedOnSize: (size: typeof buttonSizes[number]) => string;
-export declare const buttonBaseStyle: ({ type, filled, calculatedColor, size, block, isIconButton, transparent, childrenCount, }: RequiredProperties<Omit<Props, "buttonType"> & {
+export declare const heightBasedOnSize: (size: typeof buttonSizes[number] | 'default') => string;
+export declare const buttonBaseStyle: ({ type, filled, calculatedColor, size, block, transparent, childrenCount, sx, }: Omit<Props, "buttonType"> & {
     calculatedColor: ColorShapeFromComponent;
     childrenCount: number;
-}>) => (theme: Theme) => {
-    fontSize: any;
-    fontWeight: 500;
-    color: string;
-    width: string | undefined;
-    backgroundColor: string;
-    padding: string;
-    height: string;
-    borderRadius: "4";
-    border: string;
-    cursor: string;
-    transition: string;
-    ':focus-visible:not(:disabled)': {
-        outline: string;
-    };
-    ':hover:not(:disabled)': {
-        backgroundColor: string;
-    };
-    ':active:not(:disabled)': {
-        backgroundColor: string;
-    };
-    ':disabled': import("../../theme/states/disabled").GetDisabled;
-} | {
-    display: string;
-    justifyContent: string;
-    alignItems: string;
-    borderRadius: string;
-    padding: number;
-    width: string;
-    fontSize: any;
-    fontWeight: 500;
-    color: string;
-    backgroundColor: string;
-    height: string;
-    border: string;
-    cursor: string;
-    transition: string;
-    ':focus-visible:not(:disabled)': {
-        outline: string;
-    };
-    ':hover:not(:disabled)': {
-        backgroundColor: string;
-    };
-    ':active:not(:disabled)': {
-        backgroundColor: string;
-    };
-    ':disabled': import("../../theme/states/disabled").GetDisabled;
-};
+}) => (theme: Theme) => SerializedStyles;
 export declare const buttonSpanStyle: () => () => {
     display: string;
     alignItems: string;

package/dist/components/ButtonBase/ButtonBase.style.js

@@ -3,6 +3,8 @@
 exports.__esModule = true;
 exports.iconStyle = exports.buttonSpanStyle = exports.buttonBaseStyle = exports.heightBasedOnSize = void 0;
 
+var _react = require("@emotion/react");
+
 var _utils = require("../../theme/utils");
 
 var _states = require("../../theme/states");
@@ -15,7 +17,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 /** Calculates the button specific height based on the size passed to it **/
 var heightBasedOnSize = function heightBasedOnSize(size) {
-  return (0, _utils.rem)(_config.buttonConfig.sizes[size] || _config.buttonConfig.sizes["default"]);
+  var _buttonConfig$sizes$s;
+
+  return (0, _utils.rem)((_buttonConfig$sizes$s = _config.buttonConfig.sizes[size]) != null ? _buttonConfig$sizes$s : _config.buttonConfig.sizes["default"]);
 };
 /** Calculates the button specific font size based on the size passed to it **/
 
@@ -23,7 +27,9 @@ var heightBasedOnSize = function heightBasedOnSize(size) {
 exports.heightBasedOnSize = heightBasedOnSize;
 
 var fontSizeBasedOnSize = function fontSizeBasedOnSize(theme, size) {
-  return theme.typography.fontSizes[_config.buttonConfig.fontSize[size] || _config.buttonConfig.fontSize["default"]];
+  var _buttonConfig$fontSiz;
+
+  return theme.typography.fontSizes[(_buttonConfig$fontSiz = _config.buttonConfig.fontSize[size]) != null ? _buttonConfig$fontSiz : _config.buttonConfig.fontSize["default"]];
 };
 
 var buttonBaseStyle = function buttonBaseStyle(_ref) {
@@ -32,20 +38,20 @@ var buttonBaseStyle = function buttonBaseStyle(_ref) {
       calculatedColor = _ref.calculatedColor,
       size = _ref.size,
       block = _ref.block,
-      isIconButton = _ref.isIconButton,
       transparent = _ref.transparent,
-      childrenCount = _ref.childrenCount;
+      childrenCount = _ref.childrenCount,
+      sx = _ref.sx;
   return function (theme) {
     var backGroundColor = (0, _utils2.defineBackgroundColor)(theme, calculatedColor, type, childrenCount > 0);
     var isOutlined = !filled && !transparent;
     var isBackgroundTransparent = isOutlined || transparent;
     var borderWidth = isOutlined ? _config.buttonConfig.types.outlined.border.width : 0;
     var baseButtonStyles = {
-      fontSize: fontSizeBasedOnSize(theme, size),
+      fontSize: fontSizeBasedOnSize(theme, size || 'default'),
       fontWeight: theme.typography.weights.medium,
       color: (0, _utils2.calculateButtonColor)({
         type: type,
-        isBackgroundTransparent: isBackgroundTransparent,
+        isBackgroundTransparent: Boolean(isBackgroundTransparent),
         backGroundColor: backGroundColor,
         calculatedColor: calculatedColor,
         theme: theme
@@ -53,7 +59,7 @@ var buttonBaseStyle = function buttonBaseStyle(_ref) {
       width: block ? '100%' : undefined,
       backgroundColor: isBackgroundTransparent ? 'transparent' : backGroundColor,
       padding: size === 'lg' ? theme.spacing.md : "0 " + theme.spacing.md,
-      height: heightBasedOnSize(size),
+      height: heightBasedOnSize(size || 'default'),
       borderRadius: theme.spacing.xsm,
       border: isOutlined ? "solid " + (0, _utils.rem)(borderWidth) + " " + backGroundColor : 'none',
       cursor: 'pointer',
@@ -80,19 +86,12 @@ var buttonBaseStyle = function buttonBaseStyle(_ref) {
       },
       ':disabled': (0, _states.getDisabled)()
     };
+    return (
+      /*#__PURE__*/
 
-    if (isIconButton) {
-      return _extends({}, baseButtonStyles, {
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: '100%',
-        padding: 0,
-        width: heightBasedOnSize(size)
-      });
-    }
-
-    return baseButtonStyles;
+      /*#__PURE__*/
+      (0, _react.css)(_extends({}, baseButtonStyles, sx == null ? void 0 : sx.container), process.env.NODE_ENV === "production" ? "" : ";label:buttonBaseStyle;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbkJhc2UvQnV0dG9uQmFzZS5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRVMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnV0dG9uQmFzZS9CdXR0b25CYXNlLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IGdldERpc2FibGVkLCBnZXRGb2N1cywgZ2V0SG92ZXIsIGdldFByZXNzZWQgfSBmcm9tICcuLi8uLi90aGVtZS9zdGF0ZXMnO1xuaW1wb3J0IHsgQ29sb3JTaGFwZUZyb21Db21wb25lbnQgfSBmcm9tICcuLi8uLi91dGlscy90aGVtZUZ1bmN0aW9ucyc7XG5pbXBvcnQgeyBQcm9wcyB9IGZyb20gJy4vQnV0dG9uQmFzZSc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGJ1dHRvblNpemVzIH0gZnJvbSAnLi9jb25maWcnO1xuaW1wb3J0IHsgY2FsY3VsYXRlQnV0dG9uQ29sb3IsIGRlZmluZUJhY2tncm91bmRDb2xvciB9IGZyb20gJy4vdXRpbHMnO1xuXG4vKiogQ2FsY3VsYXRlcyB0aGUgYnV0dG9uIHNwZWNpZmljIGhlaWdodCBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXQgKiovXG5leHBvcnQgY29uc3QgaGVpZ2h0QmFzZWRPblNpemUgPSAoc2l6ZTogdHlwZW9mIGJ1dHRvblNpemVzW251bWJlcl0gfCAnZGVmYXVsdCcpID0+XG4gIHJlbShidXR0b25Db25maWcuc2l6ZXNbc2l6ZV0gPz8gYnV0dG9uQ29uZmlnLnNpemVzLmRlZmF1bHQpO1xuXG4vKiogQ2FsY3VsYXRlcyB0aGUgYnV0dG9uIHNwZWNpZmljIGZvbnQgc2l6ZSBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXQgKiovXG5jb25zdCBmb250U2l6ZUJhc2VkT25TaXplID0gKHRoZW1lOiBUaGVtZSwgc2l6ZTogdHlwZW9mIGJ1dHRvblNpemVzW251bWJlcl0gfCAnZGVmYXVsdCcpID0+XG4gIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzW2J1dHRvbkNvbmZpZy5mb250U2l6ZVtzaXplXSA/PyBidXR0b25Db25maWcuZm9udFNpemUuZGVmYXVsdF07XG5cbmV4cG9ydCBjb25zdCBidXR0b25CYXNlU3R5bGUgPSAoe1xuICB0eXBlLFxuICBmaWxsZWQsXG4gIGNhbGN1bGF0ZWRDb2xvcixcbiAgc2l6ZSxcbiAgYmxvY2ssXG4gIHRyYW5zcGFyZW50LFxuICBjaGlsZHJlbkNvdW50LFxuICBzeCxcbn06IE9taXQ8UHJvcHMsICdidXR0b25UeXBlJz4gJiB7XG4gIGNhbGN1bGF0ZWRDb2xvcjogQ29sb3JTaGFwZUZyb21Db21wb25lbnQ7XG4gIGNoaWxkcmVuQ291bnQ6IG51bWJlcjtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IHtcbiAgY29uc3QgYmFja0dyb3VuZENvbG9yID0gZGVmaW5lQmFja2dyb3VuZENvbG9yKHRoZW1lLCBjYWxjdWxhdGVkQ29sb3IsIHR5cGUsIGNoaWxkcmVuQ291bnQgPiAwKTtcbiAgY29uc3QgaXNPdXRsaW5lZCA9ICFmaWxsZWQgJiYgIXRyYW5zcGFyZW50O1xuICBjb25zdCBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA9IGlzT3V0bGluZWQgfHwgdHJhbnNwYXJlbnQ7XG5cbiAgY29uc3QgYm9yZGVyV2lkdGggPSBpc091dGxpbmVkID8gYnV0dG9uQ29uZmlnLnR5cGVzLm91dGxpbmVkLmJvcmRlci53aWR0aCA6IDA7XG5cbiAgY29uc3QgYmFzZUJ1dHRvblN0eWxlcyA9IHtcbiAgICBmb250U2l6ZTogZm9udFNpemVCYXNlZE9uU2l6ZSh0aGVtZSwgc2l6ZSB8fCAnZGVmYXVsdCcpLFxuICAgIGZvbnRXZWlnaHQ6IHRoZW1lLnR5cG9ncmFwaHkud2VpZ2h0cy5tZWRpdW0sXG4gICAgY29sb3I6IGNhbGN1bGF0ZUJ1dHRvbkNvbG9yKHtcbiAgICAgIHR5cGUsXG4gICAgICBpc0JhY2tncm91bmRUcmFuc3BhcmVudDogQm9vbGVhbihpc0JhY2tncm91bmRUcmFuc3BhcmVudCksXG4gICAgICBiYWNrR3JvdW5kQ29sb3IsXG4gICAgICBjYWxjdWxhdGVkQ29sb3IsXG4gICAgICB0aGVtZSxcbiAgICB9KSxcbiAgICB3aWR0aDogYmxvY2sgPyAnMTAwJScgOiB1bmRlZmluZWQsXG4gICAgYmFja2dyb3VuZENvbG9yOiBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA/ICd0cmFuc3BhcmVudCcgOiBiYWNrR3JvdW5kQ29sb3IsXG4gICAgcGFkZGluZzogc2l6ZSA9PT0gJ2xnJyA/IHRoZW1lLnNwYWNpbmcubWQgOiBgMCAke3RoZW1lLnNwYWNpbmcubWR9YCxcbiAgICBoZWlnaHQ6IGhlaWdodEJhc2VkT25TaXplKHNpemUgfHwgJ2RlZmF1bHQnKSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLnNwYWNpbmcueHNtLFxuICAgIGJvcmRlcjogaXNPdXRsaW5lZCA/IGBzb2xpZCAke3JlbShib3JkZXJXaWR0aCl9ICR7YmFja0dyb3VuZENvbG9yfWAgOiAnbm9uZScsXG4gICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgdHJhbnNpdGlvbjogJ2JhY2tncm91bmQtY29sb3IsYm9yZGVyIDE1MG1zIGxpbmVhcicsXG4gICAgJzpmb2N1cy12aXNpYmxlOm5vdCg6ZGlzYWJsZWQpJzoge1xuICAgICAgb3V0bGluZTogZ2V0Rm9jdXMoeyB0aGVtZSwgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoIH0pLnN0eWxlT3V0bGluZSxcbiAgICB9LFxuICAgICc6aG92ZXI6bm90KDpkaXNhYmxlZCknOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldEhvdmVyKHtcbiAgICAgICAgdGhlbWUsXG4gICAgICAgIGNvbG9yOiBjYWxjdWxhdGVkQ29sb3IuY29sb3IsXG4gICAgICAgIHNoYWRlOiBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA/IDAgOiBjYWxjdWxhdGVkQ29sb3Iuc2hhZGUsXG4gICAgICB9KS5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgICAnOmFjdGl2ZTpub3QoOmRpc2FibGVkKSc6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0UHJlc3NlZCh7XG4gICAgICAgIHRoZW1lLFxuICAgICAgICBjb2xvcjogY2FsY3VsYXRlZENvbG9yLmNvbG9yLFxuICAgICAgICBzaGFkZTogaXNCYWNrZ3JvdW5kVHJhbnNwYXJlbnQgPyAwIDogY2FsY3VsYXRlZENvbG9yLnNoYWRlLFxuICAgICAgfSkuYmFja2dyb3VuZENvbG9yLFxuICAgIH0sXG4gICAgJzpkaXNhYmxlZCc6IGdldERpc2FibGVkKCksXG4gIH07XG5cbiAgcmV0dXJuIGNzcyh7IC4uLmJhc2VCdXR0b25TdHlsZXMsIC4uLnN4Py5jb250YWluZXIgfSk7XG59O1xuXG5leHBvcnQgY29uc3QgYnV0dG9uU3BhblN0eWxlID0gKCkgPT4gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCBpY29uU3R5bGUgPSAoKSA9PiAoKSA9PiAoe1xuICBkaXNwbGF5OiAnaW5saW5lLWZsZXgnLFxufSk7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:buttonBaseStyle;", process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0J1dHRvbkJhc2UvQnV0dG9uQmFzZS5zdHlsZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyRVMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQnV0dG9uQmFzZS9CdXR0b25CYXNlLnN0eWxlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uL3RoZW1lJztcbmltcG9ydCB7IGdldERpc2FibGVkLCBnZXRGb2N1cywgZ2V0SG92ZXIsIGdldFByZXNzZWQgfSBmcm9tICcuLi8uLi90aGVtZS9zdGF0ZXMnO1xuaW1wb3J0IHsgQ29sb3JTaGFwZUZyb21Db21wb25lbnQgfSBmcm9tICcuLi8uLi91dGlscy90aGVtZUZ1bmN0aW9ucyc7XG5pbXBvcnQgeyBQcm9wcyB9IGZyb20gJy4vQnV0dG9uQmFzZSc7XG5pbXBvcnQgeyBidXR0b25Db25maWcsIGJ1dHRvblNpemVzIH0gZnJvbSAnLi9jb25maWcnO1xuaW1wb3J0IHsgY2FsY3VsYXRlQnV0dG9uQ29sb3IsIGRlZmluZUJhY2tncm91bmRDb2xvciB9IGZyb20gJy4vdXRpbHMnO1xuXG4vKiogQ2FsY3VsYXRlcyB0aGUgYnV0dG9uIHNwZWNpZmljIGhlaWdodCBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXQgKiovXG5leHBvcnQgY29uc3QgaGVpZ2h0QmFzZWRPblNpemUgPSAoc2l6ZTogdHlwZW9mIGJ1dHRvblNpemVzW251bWJlcl0gfCAnZGVmYXVsdCcpID0+XG4gIHJlbShidXR0b25Db25maWcuc2l6ZXNbc2l6ZV0gPz8gYnV0dG9uQ29uZmlnLnNpemVzLmRlZmF1bHQpO1xuXG4vKiogQ2FsY3VsYXRlcyB0aGUgYnV0dG9uIHNwZWNpZmljIGZvbnQgc2l6ZSBiYXNlZCBvbiB0aGUgc2l6ZSBwYXNzZWQgdG8gaXQgKiovXG5jb25zdCBmb250U2l6ZUJhc2VkT25TaXplID0gKHRoZW1lOiBUaGVtZSwgc2l6ZTogdHlwZW9mIGJ1dHRvblNpemVzW251bWJlcl0gfCAnZGVmYXVsdCcpID0+XG4gIHRoZW1lLnR5cG9ncmFwaHkuZm9udFNpemVzW2J1dHRvbkNvbmZpZy5mb250U2l6ZVtzaXplXSA/PyBidXR0b25Db25maWcuZm9udFNpemUuZGVmYXVsdF07XG5cbmV4cG9ydCBjb25zdCBidXR0b25CYXNlU3R5bGUgPSAoe1xuICB0eXBlLFxuICBmaWxsZWQsXG4gIGNhbGN1bGF0ZWRDb2xvcixcbiAgc2l6ZSxcbiAgYmxvY2ssXG4gIHRyYW5zcGFyZW50LFxuICBjaGlsZHJlbkNvdW50LFxuICBzeCxcbn06IE9taXQ8UHJvcHMsICdidXR0b25UeXBlJz4gJiB7XG4gIGNhbGN1bGF0ZWRDb2xvcjogQ29sb3JTaGFwZUZyb21Db21wb25lbnQ7XG4gIGNoaWxkcmVuQ291bnQ6IG51bWJlcjtcbn0pID0+ICh0aGVtZTogVGhlbWUpOiBTZXJpYWxpemVkU3R5bGVzID0+IHtcbiAgY29uc3QgYmFja0dyb3VuZENvbG9yID0gZGVmaW5lQmFja2dyb3VuZENvbG9yKHRoZW1lLCBjYWxjdWxhdGVkQ29sb3IsIHR5cGUsIGNoaWxkcmVuQ291bnQgPiAwKTtcbiAgY29uc3QgaXNPdXRsaW5lZCA9ICFmaWxsZWQgJiYgIXRyYW5zcGFyZW50O1xuICBjb25zdCBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA9IGlzT3V0bGluZWQgfHwgdHJhbnNwYXJlbnQ7XG5cbiAgY29uc3QgYm9yZGVyV2lkdGggPSBpc091dGxpbmVkID8gYnV0dG9uQ29uZmlnLnR5cGVzLm91dGxpbmVkLmJvcmRlci53aWR0aCA6IDA7XG5cbiAgY29uc3QgYmFzZUJ1dHRvblN0eWxlcyA9IHtcbiAgICBmb250U2l6ZTogZm9udFNpemVCYXNlZE9uU2l6ZSh0aGVtZSwgc2l6ZSB8fCAnZGVmYXVsdCcpLFxuICAgIGZvbnRXZWlnaHQ6IHRoZW1lLnR5cG9ncmFwaHkud2VpZ2h0cy5tZWRpdW0sXG4gICAgY29sb3I6IGNhbGN1bGF0ZUJ1dHRvbkNvbG9yKHtcbiAgICAgIHR5cGUsXG4gICAgICBpc0JhY2tncm91bmRUcmFuc3BhcmVudDogQm9vbGVhbihpc0JhY2tncm91bmRUcmFuc3BhcmVudCksXG4gICAgICBiYWNrR3JvdW5kQ29sb3IsXG4gICAgICBjYWxjdWxhdGVkQ29sb3IsXG4gICAgICB0aGVtZSxcbiAgICB9KSxcbiAgICB3aWR0aDogYmxvY2sgPyAnMTAwJScgOiB1bmRlZmluZWQsXG4gICAgYmFja2dyb3VuZENvbG9yOiBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA/ICd0cmFuc3BhcmVudCcgOiBiYWNrR3JvdW5kQ29sb3IsXG4gICAgcGFkZGluZzogc2l6ZSA9PT0gJ2xnJyA/IHRoZW1lLnNwYWNpbmcubWQgOiBgMCAke3RoZW1lLnNwYWNpbmcubWR9YCxcbiAgICBoZWlnaHQ6IGhlaWdodEJhc2VkT25TaXplKHNpemUgfHwgJ2RlZmF1bHQnKSxcbiAgICBib3JkZXJSYWRpdXM6IHRoZW1lLnNwYWNpbmcueHNtLFxuICAgIGJvcmRlcjogaXNPdXRsaW5lZCA/IGBzb2xpZCAke3JlbShib3JkZXJXaWR0aCl9ICR7YmFja0dyb3VuZENvbG9yfWAgOiAnbm9uZScsXG4gICAgY3Vyc29yOiAncG9pbnRlcicsXG4gICAgdHJhbnNpdGlvbjogJ2JhY2tncm91bmQtY29sb3IsYm9yZGVyIDE1MG1zIGxpbmVhcicsXG4gICAgJzpmb2N1cy12aXNpYmxlOm5vdCg6ZGlzYWJsZWQpJzoge1xuICAgICAgb3V0bGluZTogZ2V0Rm9jdXMoeyB0aGVtZSwgYm9yZGVyV2lkdGg6IGJvcmRlcldpZHRoIH0pLnN0eWxlT3V0bGluZSxcbiAgICB9LFxuICAgICc6aG92ZXI6bm90KDpkaXNhYmxlZCknOiB7XG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6IGdldEhvdmVyKHtcbiAgICAgICAgdGhlbWUsXG4gICAgICAgIGNvbG9yOiBjYWxjdWxhdGVkQ29sb3IuY29sb3IsXG4gICAgICAgIHNoYWRlOiBpc0JhY2tncm91bmRUcmFuc3BhcmVudCA/IDAgOiBjYWxjdWxhdGVkQ29sb3Iuc2hhZGUsXG4gICAgICB9KS5iYWNrZ3JvdW5kQ29sb3IsXG4gICAgfSxcbiAgICAnOmFjdGl2ZTpub3QoOmRpc2FibGVkKSc6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogZ2V0UHJlc3NlZCh7XG4gICAgICAgIHRoZW1lLFxuICAgICAgICBjb2xvcjogY2FsY3VsYXRlZENvbG9yLmNvbG9yLFxuICAgICAgICBzaGFkZTogaXNCYWNrZ3JvdW5kVHJhbnNwYXJlbnQgPyAwIDogY2FsY3VsYXRlZENvbG9yLnNoYWRlLFxuICAgICAgfSkuYmFja2dyb3VuZENvbG9yLFxuICAgIH0sXG4gICAgJzpkaXNhYmxlZCc6IGdldERpc2FibGVkKCksXG4gIH07XG5cbiAgcmV0dXJuIGNzcyh7IC4uLmJhc2VCdXR0b25TdHlsZXMsIC4uLnN4Py5jb250YWluZXIgfSk7XG59O1xuXG5leHBvcnQgY29uc3QgYnV0dG9uU3BhblN0eWxlID0gKCkgPT4gKCkgPT4ge1xuICByZXR1cm4ge1xuICAgIGRpc3BsYXk6ICdmbGV4JyxcbiAgICBhbGlnbkl0ZW1zOiAnY2VudGVyJyxcbiAgfTtcbn07XG5cbmV4cG9ydCBjb25zdCBpY29uU3R5bGUgPSAoKSA9PiAoKSA9PiAoe1xuICBkaXNwbGF5OiAnaW5saW5lLWZsZXgnLFxufSk7XG4iXX0= */")
+    );
   };
 };
 

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

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const Chip: React.ForwardRefExoticComponent<import("./Chip.types").Props & import("../../utils/types").TestProps & Partial<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "css" | "onBlur" | "onClick" | "type">> & React.RefAttributes<HTMLButtonElement>>;
+declare const Chip: React.ForwardRefExoticComponent<import("./Chip.types").Props & import("../../utils/types").TestProps & Partial<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "css" | "onBlur" | "onClick" | "type">> & React.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
 export default Chip;

package/dist/components/Chip/Chip.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _helpers = require("../../utils/helpers");
 
@@ -25,6 +25,10 @@ var _excluded = ["styleType", "disabled", "dataTestId"];
 
 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; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
@@ -51,19 +55,7 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     badgeNumber: badgeNumber,
     disabled: disabled
   });
-  return (0, _react2.jsx)("button", {
-    ref: ref,
-    "data-testid": (0, _helpers.generateTestDataId)('chip', dataTestId),
-    onClick: onClick,
-    disabled: disabled,
-    css: (0, _Chip.chipStyle)({
-      styleType: styleType,
-      fill: fill,
-      isSelected: isSelected,
-      onClear: onClear,
-      onClick: onClick
-    })
-  }, isChecked && (0, _react2.jsx)(_Icon["default"], {
+  var contents = (0, _react2.jsx)(_react.Fragment, null, isChecked && (0, _react2.jsx)(_Icon["default"], {
     size: 14,
     name: 'checkmark',
     color: 'darkGrey',
@@ -92,6 +84,34 @@ var Chip = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       }
     }
   })));
+
+  if (styleType === 'read-only') {
+    return (0, _react2.jsx)("div", {
+      ref: ref,
+      "data-testid": (0, _helpers.generateTestDataId)('chip', dataTestId),
+      css: (0, _Chip.chipStyle)({
+        styleType: styleType,
+        fill: fill,
+        isSelected: isSelected
+      }),
+      "aria-readonly": "true"
+    }, contents);
+  }
+
+  return (0, _react2.jsx)("button", {
+    role: "button",
+    ref: ref,
+    "data-testid": (0, _helpers.generateTestDataId)('chip', dataTestId),
+    css: (0, _Chip.chipStyle)({
+      styleType: styleType,
+      fill: fill,
+      isSelected: isSelected,
+      onClear: onClear,
+      onClick: onClick
+    }),
+    onClick: onClick,
+    disabled: disabled
+  }, contents);
 });
 
 Chip.displayName = 'Chip';

package/dist/components/DatePicker/Month/Month.utils.d.ts

@@ -2,5 +2,5 @@ import { Dayjs } from 'dayjs';
 import { DisabledDates } from '../DatePicker';
 export declare const calculateDisabledDays: (day: number | undefined, month: number, year: number, disabledDates?: DisabledDates | undefined) => boolean;
 export declare const calculatedDayIsBetween: (day: number | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | undefined;
-export declare const calculateSelectedDayPosition: (day: number | undefined, position: "last" | "first" | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | 0 | undefined;
+export declare const calculateSelectedDayPosition: (day: number | undefined, position: "first" | "last" | undefined, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean | 0 | undefined;
 export declare const calculateSelectedDay: (day: number, month: number, year: number, from: Dayjs | undefined, to: Dayjs | undefined) => boolean;

package/dist/components/IconButton/IconButton.js

@@ -13,6 +13,8 @@ var _utils = require("../Button/utils");
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _IconButton = require("./IconButton.style");
+
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase/ButtonBase"));
 
 var _react2 = require("@emotion/react");
@@ -38,9 +40,13 @@ var IconButton = /*#__PURE__*/_react["default"].forwardRef(function (props, ref)
 
   var calculatedColor = calculateColorBetweenColorAndType(color, type);
   var iconColor = filled && !transparent ? theme.utils.getAAColorFromSwatches(calculatedColor.color, calculatedColor.shade) : (0, _utils.defineBackgroundColor)(theme, calculatedColor, type, true, true);
+  var sx = (0, _IconButton.sxProp)({
+    size: props.size
+  });
   return (0, _react2.jsx)(_ButtonBase["default"], _extends({}, props, {
     ref: ref,
-    isIconButton: true
+    sx: sx,
+    dataTestPrefixId: 'icon-'
   }), (0, _react2.jsx)(_Icon["default"], {
     name: name,
     color: iconColor,

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

@@ -1,15 +1,11 @@
-import { RequiredProperties } from '../../utils/common';
-import { ColorShapeFromComponent } from '../../utils/themeFunctions';
 import { Props } from '../Button/Button';
-export declare const iconButtonStyle: ({ size, }: RequiredProperties<Props & {
-    calculatedColor: ColorShapeFromComponent;
-    iconExists: boolean;
-    childrenCount: number;
-}>) => () => {
-    display: string;
-    justifyContent: string;
-    alignItems: string;
-    borderRadius: string;
-    padding: number;
-    width: string;
+export declare const sxProp: ({ size }: Pick<Props, 'size'>) => {
+    container: {
+        display: string;
+        justifyContent: string;
+        alignItems: string;
+        borderRadius: string;
+        padding: number;
+        width: string;
+    };
 };

package/dist/components/IconButton/IconButton.style.js

@@ -1,22 +1,22 @@
 "use strict";
 
 exports.__esModule = true;
-exports.iconButtonStyle = void 0;
+exports.sxProp = void 0;
 
 var _ButtonBase = require("../ButtonBase/ButtonBase.style");
 
-var iconButtonStyle = function iconButtonStyle(_ref) {
+var sxProp = function sxProp(_ref) {
   var size = _ref.size;
-  return function () {
-    return {
+  return {
+    container: {
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
       borderRadius: '100%',
       padding: 0,
-      width: (0, _ButtonBase.heightBasedOnSize)(size)
-    };
+      width: (0, _ButtonBase.heightBasedOnSize)(size || 'default')
+    }
   };
 };
 
-exports.iconButtonStyle = iconButtonStyle;
+exports.sxProp = sxProp;

package/dist/components/Notification/NotificationsContainer/NotificationsContainer.d.ts

@@ -1,8 +1,11 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
+import React from 'react';
 declare type Positions = 'top-right' | 'top-left' | 'bottom-left' | 'bottom-right';
 declare type Props = {
     /** Notifications Container position */
     position: Positions;
+    children: ReactNode;
+    parent?: HTMLElement | null;
 };
 declare const NotificationsContainer: React.FC<Props>;
 export default NotificationsContainer;

package/dist/components/Notification/NotificationsContainer/NotificationsContainer.js

@@ -3,22 +3,29 @@
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _NotificationsContainer = require("./NotificationsContainer.style");
 
 var _react2 = require("@emotion/react");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var NotificationsContainer = function NotificationsContainer(props) {
+  var children = props.children,
+      position = props.position,
+      _props$parent = props.parent,
+      parent = _props$parent === void 0 ? document.body : _props$parent;
 
-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; }
+  if (parent === null) {
+    return null;
+  }
 
-var NotificationsContainer = function NotificationsContainer(_ref) {
-  var children = _ref.children,
-      position = _ref.position;
-  return (0, _react2.jsx)("div", {
-    css: (0, _NotificationsContainer.notificationsContainer)(position)
-  }, children);
+  return /*#__PURE__*/_reactDom["default"].createPortal((0, _react2.jsx)("div", {
+    css: (0, _NotificationsContainer.notificationsContainer)(position, parent)
+  }, children), parent);
 };
 
 var _default = NotificationsContainer;

package/dist/components/Notification/NotificationsContainer/NotificationsContainer.style.d.ts

@@ -1,3 +1,3 @@
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from '../../../theme';
-export declare const notificationsContainer: (currentPosition: string) => (theme: Theme) => SerializedStyles;
+export declare const notificationsContainer: (currentPosition: string, parent: HTMLElement) => (theme: Theme) => SerializedStyles;

package/dist/components/Notification/NotificationsContainer/NotificationsContainer.style.js

@@ -12,7 +12,7 @@ var getPositionStyle = function getPositionStyle(styleLiteral) {
     /*#__PURE__*/
 
     /*#__PURE__*/
-    (0, _react.css)(styleLiteral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getPositionStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1ZIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL3RoZW1lJztcblxuY29uc3QgZ2V0UG9zaXRpb25TdHlsZSA9IChzdHlsZUxpdGVyYWw6IHN0cmluZykgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICR7c3R5bGVMaXRlcmFsfVxuICBgO1xufTtcblxuY29uc3QgcG9zaXRpb25PcHRpb25zID0ge1xuICAndG9wLXJpZ2h0JzogYHRvcDowOyByaWdodDogMDsgYWxpZ24taXRlbXM6IGZsZXgtZW5kO2AsXG4gICd0b3AtbGVmdCc6IGB0b3A6MDsgbGVmdDogMDsgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7YCxcbiAgJ2JvdHRvbS1sZWZ0JzogYGJvdHRvbTowOyBsZWZ0OiAwOyBhbGlnbi1pdGVtczogZmxleC1zdGFydDtgLFxuICAnYm90dG9tLXJpZ2h0JzogYGJvdHRvbTowOyByaWdodDogMDsgYWxpZ24taXRlbXM6IGZsZXgtZW5kO2AsXG59O1xuXG5leHBvcnQgY29uc3Qgbm90aWZpY2F0aW9uc0NvbnRhaW5lciA9IChjdXJyZW50UG9zaXRpb246IHN0cmluZykgPT4gKFxuICB0aGVtZTogVGhlbWVcbik6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwb3NpdGlvbjogZml4ZWQ7XG4gICR7Z2V0UG9zaXRpb25TdHlsZShwb3NpdGlvbk9wdGlvbnNbY3VycmVudFBvc2l0aW9uXSl9O1xuICBtYXgtd2lkdGg6IDY2JTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgei1pbmRleDogMjUwMDtcbiAgbWFyZ2luOiAke3RoZW1lLnNwYWNpbmcuc219ICR7dGhlbWUuc3BhY2luZy5tZH0gJHt0aGVtZS5zcGFjaW5nLm1kfTtcbiAgPiBkaXYge1xuICAgIG1hcmdpbjogJHt0aGVtZS5zcGFjaW5nLnNtfSAwO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSd0b2FzdCddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDMzNil9O1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdzbmFja2JhciddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDMzNil9O1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB7XG4gICAgbWluLXdpZHRoOiAke3JlbSg0OTApfTtcbiAgfVxuXG4gIGRpdltub3RpZmljYXRpb24tdHlwZT0nYmFubmVyJ10gfiBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3RvYXN0J10ge1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB+IGRpdltub3RpZmljYXRpb24tdHlwZT0nc25hY2tiYXInXSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:getPositionStyle;")
+    (0, _react.css)(styleLiteral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getPositionStyle;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1ZIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzLCBTZXJpYWxpemVkU3R5bGVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgcmVtIH0gZnJvbSAndGhlbWUvdXRpbHMnO1xuXG5pbXBvcnQgeyBUaGVtZSB9IGZyb20gJy4uLy4uLy4uL3RoZW1lJztcblxuY29uc3QgZ2V0UG9zaXRpb25TdHlsZSA9IChzdHlsZUxpdGVyYWw6IHN0cmluZykgPT4ge1xuICByZXR1cm4gY3NzYFxuICAgICR7c3R5bGVMaXRlcmFsfVxuICBgO1xufTtcblxuY29uc3QgcG9zaXRpb25PcHRpb25zID0ge1xuICAndG9wLXJpZ2h0JzogYHRvcDowOyByaWdodDogMDsgYWxpZ24taXRlbXM6IGZsZXgtZW5kO2AsXG4gICd0b3AtbGVmdCc6IGB0b3A6MDsgbGVmdDogMDsgYWxpZ24taXRlbXM6IGZsZXgtc3RhcnQ7YCxcbiAgJ2JvdHRvbS1sZWZ0JzogYGJvdHRvbTowOyBsZWZ0OiAwOyBhbGlnbi1pdGVtczogZmxleC1zdGFydDtgLFxuICAnYm90dG9tLXJpZ2h0JzogYGJvdHRvbTowOyByaWdodDogMDsgYWxpZ24taXRlbXM6IGZsZXgtZW5kO2AsXG59O1xuXG5leHBvcnQgY29uc3Qgbm90aWZpY2F0aW9uc0NvbnRhaW5lciA9IChjdXJyZW50UG9zaXRpb246IHN0cmluZywgcGFyZW50OiBIVE1MRWxlbWVudCkgPT4gKFxuICB0aGVtZTogVGhlbWVcbik6IFNlcmlhbGl6ZWRTdHlsZXMgPT4gY3NzYFxuICBwb3NpdGlvbjogJHtwYXJlbnQgPT09IGRvY3VtZW50LmJvZHkgPyAnZml4ZWQnIDogJ2Fic29sdXRlJ307XG4gICR7Z2V0UG9zaXRpb25TdHlsZShwb3NpdGlvbk9wdGlvbnNbY3VycmVudFBvc2l0aW9uXSl9O1xuICBtYXgtd2lkdGg6IDY2JTtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgei1pbmRleDogMjUwMDtcbiAgbWFyZ2luOiAke3RoZW1lLnNwYWNpbmcuc219ICR7dGhlbWUuc3BhY2luZy5tZH0gJHt0aGVtZS5zcGFjaW5nLm1kfTtcbiAgPiBkaXYge1xuICAgIG1hcmdpbjogJHt0aGVtZS5zcGFjaW5nLnNtfSAwO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSd0b2FzdCddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDMzNil9O1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdzbmFja2JhciddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDMzNil9O1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB7XG4gICAgbWluLXdpZHRoOiAke3JlbSg0OTApfTtcbiAgfVxuXG4gIGRpdltub3RpZmljYXRpb24tdHlwZT0nYmFubmVyJ10gfiBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3RvYXN0J10ge1xuICAgIHdpZHRoOiAxMDAlO1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB+IGRpdltub3RpZmljYXRpb24tdHlwZT0nc25hY2tiYXInXSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cbmA7XG4iXX0= */", process.env.NODE_ENV === "production" ? "" : ";label:getPositionStyle;")
   );
 };
 
@@ -23,13 +23,13 @@ var positionOptions = {
   'bottom-right': "bottom:0; right: 0; align-items: flex-end;"
 };
 
-var notificationsContainer = function notificationsContainer(currentPosition) {
+var notificationsContainer = function notificationsContainer(currentPosition, parent) {
   return function (theme) {
     return (
       /*#__PURE__*/
 
       /*#__PURE__*/
-      (0, _react.css)("position:fixed;", getPositionStyle(positionOptions[currentPosition]), ";max-width:66%;display:flex;flex-direction:column;z-index:2500;margin:", theme.spacing.sm, " ", theme.spacing.md, " ", theme.spacing.md, ";>div{margin:", theme.spacing.sm, " 0;}div[notification-type='toast']{min-width:", (0, _utils.rem)(336), ";width:100%;}div[notification-type='snackbar']{min-width:", (0, _utils.rem)(336), ";width:100%;}div[notification-type='banner']{min-width:", (0, _utils.rem)(490), ";}div[notification-type='banner']~div[notification-type='toast']{width:100%;}div[notification-type='banner']~div[notification-type='snackbar']{width:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:notificationsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CMEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTm90aWZpY2F0aW9uL05vdGlmaWNhdGlvbnNDb250YWluZXIvTm90aWZpY2F0aW9uc0NvbnRhaW5lci5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdGhlbWUnO1xuXG5jb25zdCBnZXRQb3NpdGlvblN0eWxlID0gKHN0eWxlTGl0ZXJhbDogc3RyaW5nKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgJHtzdHlsZUxpdGVyYWx9XG4gIGA7XG59O1xuXG5jb25zdCBwb3NpdGlvbk9wdGlvbnMgPSB7XG4gICd0b3AtcmlnaHQnOiBgdG9wOjA7IHJpZ2h0OiAwOyBhbGlnbi1pdGVtczogZmxleC1lbmQ7YCxcbiAgJ3RvcC1sZWZ0JzogYHRvcDowOyBsZWZ0OiAwOyBhbGlnbi1pdGVtczogZmxleC1zdGFydDtgLFxuICAnYm90dG9tLWxlZnQnOiBgYm90dG9tOjA7IGxlZnQ6IDA7IGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O2AsXG4gICdib3R0b20tcmlnaHQnOiBgYm90dG9tOjA7IHJpZ2h0OiAwOyBhbGlnbi1pdGVtczogZmxleC1lbmQ7YCxcbn07XG5cbmV4cG9ydCBjb25zdCBub3RpZmljYXRpb25zQ29udGFpbmVyID0gKGN1cnJlbnRQb3NpdGlvbjogc3RyaW5nKSA9PiAoXG4gIHRoZW1lOiBUaGVtZVxuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgJHtnZXRQb3NpdGlvblN0eWxlKHBvc2l0aW9uT3B0aW9uc1tjdXJyZW50UG9zaXRpb25dKX07XG4gIG1heC13aWR0aDogNjYlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB6LWluZGV4OiAyNTAwO1xuICBtYXJnaW46ICR7dGhlbWUuc3BhY2luZy5zbX0gJHt0aGVtZS5zcGFjaW5nLm1kfSAke3RoZW1lLnNwYWNpbmcubWR9O1xuICA+IGRpdiB7XG4gICAgbWFyZ2luOiAke3RoZW1lLnNwYWNpbmcuc219IDA7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3RvYXN0J10ge1xuICAgIG1pbi13aWR0aDogJHtyZW0oMzM2KX07XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3NuYWNrYmFyJ10ge1xuICAgIG1pbi13aWR0aDogJHtyZW0oMzM2KX07XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J2Jhbm5lciddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDQ5MCl9O1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB+IGRpdltub3RpZmljYXRpb24tdHlwZT0ndG9hc3QnXSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J2Jhbm5lciddIH4gZGl2W25vdGlmaWNhdGlvbi10eXBlPSdzbmFja2JhciddIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:notificationsContainer;")
+      (0, _react.css)("position:", parent === document.body ? 'fixed' : 'absolute', ";", getPositionStyle(positionOptions[currentPosition]), ";max-width:66%;display:flex;flex-direction:column;z-index:2500;margin:", theme.spacing.sm, " ", theme.spacing.md, " ", theme.spacing.md, ";>div{margin:", theme.spacing.sm, " 0;}div[notification-type='toast']{min-width:", (0, _utils.rem)(336), ";width:100%;}div[notification-type='snackbar']{min-width:", (0, _utils.rem)(336), ";width:100%;}div[notification-type='banner']{min-width:", (0, _utils.rem)(490), ";}div[notification-type='banner']~div[notification-type='toast']{width:100%;}div[notification-type='banner']~div[notification-type='snackbar']{width:100%;}" + (process.env.NODE_ENV === "production" ? "" : ";label:notificationsContainer;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL05vdGlmaWNhdGlvbi9Ob3RpZmljYXRpb25zQ29udGFpbmVyL05vdGlmaWNhdGlvbnNDb250YWluZXIuc3R5bGUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9CMEIiLCJmaWxlIjoiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvTm90aWZpY2F0aW9uL05vdGlmaWNhdGlvbnNDb250YWluZXIvTm90aWZpY2F0aW9uc0NvbnRhaW5lci5zdHlsZS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIFNlcmlhbGl6ZWRTdHlsZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgeyByZW0gfSBmcm9tICd0aGVtZS91dGlscyc7XG5cbmltcG9ydCB7IFRoZW1lIH0gZnJvbSAnLi4vLi4vLi4vdGhlbWUnO1xuXG5jb25zdCBnZXRQb3NpdGlvblN0eWxlID0gKHN0eWxlTGl0ZXJhbDogc3RyaW5nKSA9PiB7XG4gIHJldHVybiBjc3NgXG4gICAgJHtzdHlsZUxpdGVyYWx9XG4gIGA7XG59O1xuXG5jb25zdCBwb3NpdGlvbk9wdGlvbnMgPSB7XG4gICd0b3AtcmlnaHQnOiBgdG9wOjA7IHJpZ2h0OiAwOyBhbGlnbi1pdGVtczogZmxleC1lbmQ7YCxcbiAgJ3RvcC1sZWZ0JzogYHRvcDowOyBsZWZ0OiAwOyBhbGlnbi1pdGVtczogZmxleC1zdGFydDtgLFxuICAnYm90dG9tLWxlZnQnOiBgYm90dG9tOjA7IGxlZnQ6IDA7IGFsaWduLWl0ZW1zOiBmbGV4LXN0YXJ0O2AsXG4gICdib3R0b20tcmlnaHQnOiBgYm90dG9tOjA7IHJpZ2h0OiAwOyBhbGlnbi1pdGVtczogZmxleC1lbmQ7YCxcbn07XG5cbmV4cG9ydCBjb25zdCBub3RpZmljYXRpb25zQ29udGFpbmVyID0gKGN1cnJlbnRQb3NpdGlvbjogc3RyaW5nLCBwYXJlbnQ6IEhUTUxFbGVtZW50KSA9PiAoXG4gIHRoZW1lOiBUaGVtZVxuKTogU2VyaWFsaXplZFN0eWxlcyA9PiBjc3NgXG4gIHBvc2l0aW9uOiAke3BhcmVudCA9PT0gZG9jdW1lbnQuYm9keSA/ICdmaXhlZCcgOiAnYWJzb2x1dGUnfTtcbiAgJHtnZXRQb3NpdGlvblN0eWxlKHBvc2l0aW9uT3B0aW9uc1tjdXJyZW50UG9zaXRpb25dKX07XG4gIG1heC13aWR0aDogNjYlO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICB6LWluZGV4OiAyNTAwO1xuICBtYXJnaW46ICR7dGhlbWUuc3BhY2luZy5zbX0gJHt0aGVtZS5zcGFjaW5nLm1kfSAke3RoZW1lLnNwYWNpbmcubWR9O1xuICA+IGRpdiB7XG4gICAgbWFyZ2luOiAke3RoZW1lLnNwYWNpbmcuc219IDA7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3RvYXN0J10ge1xuICAgIG1pbi13aWR0aDogJHtyZW0oMzM2KX07XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J3NuYWNrYmFyJ10ge1xuICAgIG1pbi13aWR0aDogJHtyZW0oMzM2KX07XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J2Jhbm5lciddIHtcbiAgICBtaW4td2lkdGg6ICR7cmVtKDQ5MCl9O1xuICB9XG5cbiAgZGl2W25vdGlmaWNhdGlvbi10eXBlPSdiYW5uZXInXSB+IGRpdltub3RpZmljYXRpb24tdHlwZT0ndG9hc3QnXSB7XG4gICAgd2lkdGg6IDEwMCU7XG4gIH1cblxuICBkaXZbbm90aWZpY2F0aW9uLXR5cGU9J2Jhbm5lciddIH4gZGl2W25vdGlmaWNhdGlvbi10eXBlPSdzbmFja2JhciddIHtcbiAgICB3aWR0aDogMTAwJTtcbiAgfVxuYDtcbiJdfQ== */", process.env.NODE_ENV === "production" ? "" : ";label:notificationsContainer;")
     );
   };
 };

package/dist/components/SearchField/SearchField.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _sizeUtils = require("../../utils/size-utils");
 
+var _utils = require("../../theme/utils");
+
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 var _commons = require("../TextField/components/commons");
@@ -35,7 +37,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 } : {
   name: "1mz673n-SearchField",
   styles: "width:100%;label:SearchField;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlYXJjaEZpZWxkL1NlYXJjaEZpZWxkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFnRGUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2VhcmNoRmllbGQvU2VhcmNoRmllbGQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHVzZVRoZW1lIGZyb20gJ2hvb2tzL3VzZVRoZW1lJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBERUZBVUxUX1NJWkUgfSBmcm9tICd1dGlscy9zaXplLXV0aWxzJztcblxuaW1wb3J0IHsgVGVzdFByb3BzIH0gZnJvbSAnLi4vLi4vdXRpbHMvdHlwZXMnO1xuaW1wb3J0IEljb24gZnJvbSAnLi4vSWNvbic7XG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL1RleHRGaWVsZC9jb21wb25lbnRzL2NvbW1vbnMnO1xuaW1wb3J0IHsgUHJvcHMgYXMgVGV4dEZpZWxkUHJvcHMgfSBmcm9tICdjb21wb25lbnRzL1RleHRGaWVsZC9UZXh0RmllbGQnO1xuaW1wb3J0IFRleHRJbnB1dEJhc2UgZnJvbSAnY29tcG9uZW50cy9UZXh0SW5wdXRCYXNlJztcbmltcG9ydCB7IGlucHV0U3R5bGUgfSBmcm9tICdjb21wb25lbnRzL1RleHRJbnB1dEJhc2UvVGV4dElucHV0QmFzZS5zdHlsZSc7XG5cbmV4cG9ydCB0eXBlIFByb3BzID0ge1xuICAvKiogQSBjYWxsYmFjayB0aGF0J3MgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSAnY2xlYXInIGljb24gKi9cbiAgb25DbGVhcjogKCkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFNlYXJjaEZpZWxkID0gUmVhY3QuZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50LCBQcm9wcyAmIFRleHRGaWVsZFByb3BzICYgVGVzdFByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCB7XG4gICAgICBwbGFjZWhvbGRlciA9ICdTZWFyY2gnLFxuICAgICAgZGlzYWJsZWQsXG4gICAgICBzaXplID0gREVGQVVMVF9TSVpFLFxuICAgICAgZGFyayA9IGZhbHNlLFxuICAgICAgb25DbGVhcixcbiAgICAgIGRhdGFUZXN0SWQsXG4gICAgICB2YWx1ZSA9ICcnLFxuICAgICAgLi4ucmVzdFxuICAgIH0gPSBwcm9wcztcblxuICAgIGNvbnN0IHNob3VsZFNob3dDbGVhciA9ICh2YWx1ZSBhcyBzdHJpbmcpLmxlbmd0aCA+IDA7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICA8VGV4dElucHV0QmFzZVxuICAgICAgICAgIGRhdGFUZXN0SWQ9e2RhdGFUZXN0SWR9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgICAgaXNTZWFyY2hcbiAgICAgICAgICBzdHlsZVR5cGU9eydvdXRsaW5lZCd9XG4gICAgICAgICAgbGVmdEljb249eydzZWFyY2gnfVxuICAgICAgICAgIHJpZ2h0SWNvbj17J2Nsb3NlJ31cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uV3JhcHBlciBpY29uUG9zaXRpb249eydsZWZ0J30+XG4gICAgICAgICAgICA8SWNvbiBuYW1lPXsnc2VhcmNoJ30gc2l6ZT17MjB9IGNvbG9yPXt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgNjUwKX0gLz5cbiAgICAgICAgICA8L0ljb25XcmFwcGVyPlxuXG4gICAgICAgICAgPGRpdiBjc3M9e3sgd2lkdGg6ICcxMDAlJyB9fT5cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICBjc3M9e2lucHV0U3R5bGUoeyBzaXplLCBkYXJrLCBwbGFjZWhvbGRlciB9KX1cbiAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIHtzaG91bGRTaG93Q2xlYXIgJiYgIWRpc2FibGVkICYmIChcbiAgICAgICAgICAgIDxJY29uV3JhcHBlclxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgb25DbGVhcigpO1xuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICBpY29uUG9zaXRpb249eydyaWdodCd9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxJY29uIG5hbWU9eydjbG9zZSd9IHNpemU9ezIwfSBjb2xvcj17dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDY1MCl9IC8+XG4gICAgICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dElucHV0QmFzZT5cbiAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKTtcbiAgfVxuKTtcblxuU2VhcmNoRmllbGQuZGlzcGxheU5hbWUgPSAnU2VhcmNoRmllbGQnO1xuXG5leHBvcnQgZGVmYXVsdCBTZWFyY2hGaWVsZDtcbiJdfQ== */",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL1NlYXJjaEZpZWxkL1NlYXJjaEZpZWxkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpRGUiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvU2VhcmNoRmllbGQvU2VhcmNoRmllbGQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHVzZVRoZW1lIGZyb20gJ2hvb2tzL3VzZVRoZW1lJztcbmltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBERUZBVUxUX1NJWkUgfSBmcm9tICd1dGlscy9zaXplLXV0aWxzJztcblxuaW1wb3J0IHsgcmVtIH0gZnJvbSAnLi4vLi4vdGhlbWUvdXRpbHMnO1xuaW1wb3J0IHsgVGVzdFByb3BzIH0gZnJvbSAnLi4vLi4vdXRpbHMvdHlwZXMnO1xuaW1wb3J0IEljb24gZnJvbSAnLi4vSWNvbic7XG5pbXBvcnQgeyBJY29uV3JhcHBlciB9IGZyb20gJy4uL1RleHRGaWVsZC9jb21wb25lbnRzL2NvbW1vbnMnO1xuaW1wb3J0IHsgUHJvcHMgYXMgVGV4dEZpZWxkUHJvcHMgfSBmcm9tICdjb21wb25lbnRzL1RleHRGaWVsZC9UZXh0RmllbGQnO1xuaW1wb3J0IFRleHRJbnB1dEJhc2UgZnJvbSAnY29tcG9uZW50cy9UZXh0SW5wdXRCYXNlJztcbmltcG9ydCB7IGlucHV0U3R5bGUgfSBmcm9tICdjb21wb25lbnRzL1RleHRJbnB1dEJhc2UvVGV4dElucHV0QmFzZS5zdHlsZSc7XG5cbmV4cG9ydCB0eXBlIFByb3BzID0ge1xuICAvKiogQSBjYWxsYmFjayB0aGF0J3MgY2FsbGVkIHdoZW4gdGhlIHVzZXIgY2xpY2tzIHRoZSAnY2xlYXInIGljb24gKi9cbiAgb25DbGVhcjogKCkgPT4gdm9pZDtcbn07XG5cbmNvbnN0IFNlYXJjaEZpZWxkID0gUmVhY3QuZm9yd2FyZFJlZjxIVE1MSW5wdXRFbGVtZW50LCBQcm9wcyAmIFRleHRGaWVsZFByb3BzICYgVGVzdFByb3BzPihcbiAgKHByb3BzLCByZWYpID0+IHtcbiAgICBjb25zdCB0aGVtZSA9IHVzZVRoZW1lKCk7XG5cbiAgICBjb25zdCB7XG4gICAgICBwbGFjZWhvbGRlciA9ICdTZWFyY2gnLFxuICAgICAgZGlzYWJsZWQsXG4gICAgICBzaXplID0gREVGQVVMVF9TSVpFLFxuICAgICAgZGFyayA9IGZhbHNlLFxuICAgICAgb25DbGVhcixcbiAgICAgIGRhdGFUZXN0SWQsXG4gICAgICB2YWx1ZSA9ICcnLFxuICAgICAgLi4ucmVzdFxuICAgIH0gPSBwcm9wcztcblxuICAgIGNvbnN0IHNob3VsZFNob3dDbGVhciA9ICh2YWx1ZSBhcyBzdHJpbmcpLmxlbmd0aCA+IDA7XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFJlYWN0LkZyYWdtZW50PlxuICAgICAgICA8VGV4dElucHV0QmFzZVxuICAgICAgICAgIGRhdGFUZXN0SWQ9e2RhdGFUZXN0SWR9XG4gICAgICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgICAgIHNpemU9e3NpemV9XG4gICAgICAgICAgc3R5bGVUeXBlPXsnb3V0bGluZWQnfVxuICAgICAgICAgIGxlZnRJY29uPXsnc2VhcmNoJ31cbiAgICAgICAgICByaWdodEljb249eydjbG9zZSd9XG4gICAgICAgICAgc3g9e3sgd3JhcHBlcjogeyBib3JkZXJSYWRpdXM6IHJlbSgxMDApIH0gfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uV3JhcHBlciBpY29uUG9zaXRpb249eydsZWZ0J30+XG4gICAgICAgICAgICA8SWNvbiBuYW1lPXsnc2VhcmNoJ30gc2l6ZT17MjB9IGNvbG9yPXt0aGVtZS51dGlscy5nZXRDb2xvcignbGlnaHRHcmV5JywgNjUwKX0gLz5cbiAgICAgICAgICA8L0ljb25XcmFwcGVyPlxuXG4gICAgICAgICAgPGRpdiBjc3M9e3sgd2lkdGg6ICcxMDAlJyB9fT5cbiAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICBjc3M9e2lucHV0U3R5bGUoeyBzaXplLCBkYXJrLCBwbGFjZWhvbGRlciB9KX1cbiAgICAgICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICAgICAgICAgIHZhbHVlPXt2YWx1ZX1cbiAgICAgICAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgICAgICAgIHsuLi5yZXN0fVxuICAgICAgICAgICAgLz5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIHtzaG91bGRTaG93Q2xlYXIgJiYgIWRpc2FibGVkICYmIChcbiAgICAgICAgICAgIDxJY29uV3JhcHBlclxuICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICAgICAgb25DbGVhcigpO1xuICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICBpY29uUG9zaXRpb249eydyaWdodCd9XG4gICAgICAgICAgICA+XG4gICAgICAgICAgICAgIDxJY29uIG5hbWU9eydjbG9zZSd9IHNpemU9ezIwfSBjb2xvcj17dGhlbWUudXRpbHMuZ2V0Q29sb3IoJ2xpZ2h0R3JleScsIDY1MCl9IC8+XG4gICAgICAgICAgICA8L0ljb25XcmFwcGVyPlxuICAgICAgICAgICl9XG4gICAgICAgIDwvVGV4dElucHV0QmFzZT5cbiAgICAgIDwvUmVhY3QuRnJhZ21lbnQ+XG4gICAgKTtcbiAgfVxuKTtcblxuU2VhcmNoRmllbGQuZGlzcGxheU5hbWUgPSAnU2VhcmNoRmllbGQnO1xuXG5leHBvcnQgZGVmYXVsdCBTZWFyY2hGaWVsZDtcbiJdfQ== */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
@@ -60,10 +62,14 @@ var SearchField = /*#__PURE__*/_react["default"].forwardRef(function (props, ref
     dataTestId: dataTestId,
     disabled: disabled,
     size: size,
-    isSearch: true,
     styleType: 'outlined',
     leftIcon: 'search',
-    rightIcon: 'close'
+    rightIcon: 'close',
+    sx: {
+      wrapper: {
+        borderRadius: (0, _utils.rem)(100)
+      }
+    }
   }, (0, _react2.jsx)(_commons.IconWrapper, {
     iconPosition: 'left'
   }, (0, _react2.jsx)(_Icon["default"], {