glints-aries 4.0.149 → 4.0.152

package/es/Input/TextField/TextField.d.ts

@@ -10,7 +10,7 @@ export declare const isFilled: (type: textFieldType, value: any) => boolean;
  * internal text field input. */
 export declare const TextField: React.FunctionComponent<Props>;
 export declare type textFieldType = 'text' | 'password' | 'number';
-export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldInput> {
+export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput> & {
     type: textFieldType;
     /** Placeholder for the text field. */
     label: string;
@@ -28,6 +28,68 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldIn
     forwardedRef?: React.RefObject<HTMLInputElement>;
     /** Icon at the start of the input element. */
     startIcon?: React.ReactNode;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, string | number> & React.RefAttributes<HTMLInputElement>>;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+};
+declare const _default: React.ForwardRefExoticComponent<(Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    type: textFieldType;
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** If true, removes the input content with clear icon. Works for type "text" only. */
+    allowClear?: boolean;
+    /** Minimum value of the "number" type input */
+    min?: number;
+    /** Maximum value of the "number" type input. */
+    max?: number;
+    /** Step value for the "number" type input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+}, string | number | symbol> | Pick<Pick<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    children?: React.ReactNode;
+} & {
+    as?: string | React.ComponentType<any>;
+    forwardedAs?: string | React.ComponentType<any>;
+}, string | number | symbol> & {
+    type: textFieldType;
+    /** Placeholder for the text field. */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+    removeFloatingLabel?: boolean;
+    /** If true, removes the input content with clear icon. Works for type "text" only. */
+    allowClear?: boolean;
+    /** Minimum value of the "number" type input */
+    min?: number;
+    /** Maximum value of the "number" type input. */
+    max?: number;
+    /** Step value for the "number" type input */
+    step?: number;
+    forwardedRef?: React.RefObject<HTMLInputElement>;
+    /** Icon at the start of the input element. */
+    startIcon?: React.ReactNode;
+    /** Icon at the end of the input element. */
+    endIcon?: React.ReactNode;
+}, string | number | symbol>) & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/es/Input/TextField/TextField.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { EyeIcon, EyeSlashedIcon, CloseCircleSolidIcon } from '../../General/Icon/components';
-import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer } from './TextFieldStyle';
+import { TextFieldContainer, TextFieldInput, TextFieldLabel, IconContainer, StartIconContainer, EndIconContainer } from './TextFieldStyle';
 export var isFilled = function isFilled(type, value) {
   if (value === undefined || value === null) return false;
   if (type === 'number') return !isNaN(parseInt(value));
@@ -35,7 +36,8 @@ export var TextField = function TextField(_ref) {
       forwardedRef = _ref.forwardedRef,
       onChange = _ref.onChange,
       startIcon = _ref.startIcon,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon"]);
+      endIcon = _ref.endIcon,
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React.useState(false),
       floating = _React$useState[0],
@@ -74,7 +76,7 @@ export var TextField = function TextField(_ref) {
   }, /*#__PURE__*/React.createElement(TextFieldInput, _extends({
     ref: forwardedRef,
     type: inputType,
-    placeholder: removeFloatingLabel && label,
+    placeholder: removeFloatingLabel ? label : undefined,
     status: status,
     disabled: disabled,
     onChange: onChange,
@@ -99,7 +101,7 @@ export var TextField = function TextField(_ref) {
     onClick: handleShowPassword
   }, inputType === 'password' ? /*#__PURE__*/React.createElement(EyeSlashedIcon, {
     "data-testid": "invisible-icon"
-  }) : /*#__PURE__*/React.createElement(EyeIcon, null)));
+  }) : /*#__PURE__*/React.createElement(EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(EndIconContainer, null, endIcon));
 };
 
 var forwardRef = function forwardRef(props, ref) {

package/es/Input/TextField/TextField.stories.d.ts

@@ -5,4 +5,5 @@ export declare const Interactive: any;
 export declare const TextFieldWithClearIcon: any;
 export declare const Disabled: any;
 export declare const TextFieldWithStartIcon: any;
+export declare const TextFieldWithEndIcon: any;
 export declare const PasswordField: any;

package/es/Input/TextField/TextField.stories.js

@@ -47,6 +47,12 @@ TextFieldWithStartIcon.args = {
   type: 'text',
   startIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
 };
+export var TextFieldWithEndIcon = Template.bind({});
+TextFieldWithEndIcon.args = {
+  label: 'Description',
+  type: 'text',
+  endIcon: /*#__PURE__*/React.createElement(SearchIcon, null)
+};
 export var PasswordField = Template.bind({});
 PasswordField.args = {
   label: 'Description',

package/es/Input/TextField/TextFieldStyle.d.ts

@@ -1,5 +1,6 @@
 export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StartIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EndIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextFieldLabel: import("styled-components").StyledComponent<"label", any, TextFieldLabelProps, never>;
 declare type statusType = 'success' | 'error';

package/es/Input/TextField/TextFieldStyle.js

@@ -9,13 +9,17 @@ export var StartIconContainer = styled.div.withConfig({
   displayName: "TextFieldStyle__StartIconContainer",
   componentId: "sc-5sd02x-1"
 })(["position:absolute;display:flex;left:16px;svg{fill:#666666;}"]);
+export var EndIconContainer = styled.div.withConfig({
+  displayName: "TextFieldStyle__EndIconContainer",
+  componentId: "sc-5sd02x-2"
+})(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
 export var TextFieldContainer = styled.div.withConfig({
   displayName: "TextFieldStyle__TextFieldContainer",
-  componentId: "sc-5sd02x-2"
+  componentId: "sc-5sd02x-3"
 })(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
 export var TextFieldLabel = styled.label.withConfig({
   displayName: "TextFieldStyle__TextFieldLabel",
-  componentId: "sc-5sd02x-3"
+  componentId: "sc-5sd02x-4"
 })(["position:absolute;left:", ";margin-right:1px;overflow:hidden;color:#666666;transition:all .2s;pointer-events:none;font-weight:400;font-size:", ";", " ", " ", ""], function (_ref) {
   var small = _ref.small;
   return small ? '16px' : '22px';
@@ -44,7 +48,7 @@ export var TextFieldLabel = styled.label.withConfig({
 });
 export var TextFieldInput = styled.input.withConfig({
   displayName: "TextFieldStyle__TextFieldInput",
-  componentId: "sc-5sd02x-4"
+  componentId: "sc-5sd02x-5"
 })(["position:relative;width:100%;outline:none;font-size:", ";padding:", ";border:unset;border-radius:", ";transition:all .5s;background-color:", ";", " ", " &:hover{transition:all .5s;background-color:", ";~ ", "{color:#666666;}}&:focus{background-color:", ";", " ~ ", "{padding:0 5px;top:1em;transform:", ";transition:all .2s;font-size:12px;right:auto;background-color:", ";}}&:disabled{cursor:not-allowed;background:", ";+ ", "{background:transparent;color:", ";}}"], function (_ref6) {
   var small = _ref6.small;
   return small ? '14px' : '16px';

package/es/Input/Textarea/Textarea.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "value", "status", "disabled", "className", "onBlur", "onChange", "forwardedRef", "removeFloatingLabel", "small"];
 import React from 'react';
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';
@@ -31,7 +32,7 @@ export var Textarea = function Textarea(_ref) {
       removeFloatingLabel = _ref$removeFloatingLa === void 0 ? false : _ref$removeFloatingLa,
       _ref$small = _ref.small,
       small = _ref$small === void 0 ? false : _ref$small,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["label", "value", "status", "disabled", "className", "onBlur", "onChange", "forwardedRef", "removeFloatingLabel", "small"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React.useState(false),
       floating = _React$useState[0],
@@ -77,7 +78,7 @@ export var Textarea = function Textarea(_ref) {
     className: classNames('aries-textarea', className)
   }, /*#__PURE__*/React.createElement(TextareaInput, _extends({
     ref: textareaInputRef,
-    placeholder: removeFloatingLabel && label,
+    placeholder: removeFloatingLabel ? label : undefined,
     rows: rows,
     status: status,
     disabled: disabled,

package/es/Input/ToggleSwitch/Styles.js

@@ -8,14 +8,14 @@ var DEFAULTS = {
 };
 var Toggle = styled.button.withConfig({
   displayName: "Styles__Toggle",
-  componentId: "bsue54-0"
+  componentId: "sc-bsue54-0"
 })(["cursor:pointer;display:flex;align-items:center;overflow:hidden;position:relative;transform:translate3d(0,0,0);background-color:", ";height:25px;width:56px;border-radius:14px;padding:0px;border:none;"], function (_ref) {
   var active = _ref.active;
   return active ? DEFAULTS.activeBackgroundColor : DEFAULTS.inactiveBackgroundColor;
 });
 var ToggleBall = styled.div.withConfig({
   displayName: "Styles__ToggleBall",
-  componentId: "bsue54-1"
+  componentId: "sc-bsue54-1"
 })(["display:flex;justify-content:center;align-items:center;border-radius:50%;transition:transform 0.3s cubic-bezier(1,0.19,0.15,0.7);transition-delay:0.1s;background-color:", ";height:19px;width:19px;margin:3px;transform:", ";&:active{background-color:", ";}"], DEFAULTS.inactiveBallColor, function (props) {
   return props.active ? "translateX(31px)" : 'translateX(0px)';
 }, DEFAULTS.activeBallColor);

package/es/Input/ToggleSwitch/ToggleSwitch.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["active", "defaultActive", "iconOptions", "onChange", "className"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { SecondaryColor, Greyscale } from '../../Utils/Colors';
@@ -13,7 +14,7 @@ export var ToggleSwitch = function ToggleSwitch(_ref) {
       iconOptions = _ref.iconOptions,
       onChange = _ref.onChange,
       className = _ref.className,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["active", "defaultActive", "iconOptions", "onChange", "className"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React.useState(active || defaultActive),
       innerActive = _React$useState[0],

package/es/Layout/Box/constants.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { Shadow } from '../../Utils/Shadow';
 import { Spacing } from '../../Layout/Spacing';

package/es/Layout/Box/index.js

@@ -23,7 +23,7 @@ var theme = {
 };
 export var StyledBox = styled.div.withConfig({
   displayName: "Box__StyledBox",
-  componentId: "pr7b7l-0"
+  componentId: "sc-pr7b7l-0"
 })(["", " ", ""], space, shadow);
 export var Box = function Box(props) {
   return /*#__PURE__*/React.createElement(StyledBox, _extends({

package/es/Layout/Box/types.js

@@ -0,0 +1 @@
+export {};

package/es/Layout/Flex/Flex.stories.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import React from 'react';
 import { Flex } from './index';

package/es/Layout/Flex/FlexStoryStyle.js

@@ -2,9 +2,9 @@ import styled from 'styled-components';
 import { Flex as BaseFlex } from '../../../src/Layout/Flex';
 export var Item = styled.span.withConfig({
   displayName: "FlexStoryStyle__Item",
-  componentId: "jlb02q-0"
+  componentId: "sc-jlb02q-0"
 })(["display:flex;justify-content:center;align-items:center;width:50px;height:50px;background-color:#f3f3f3;"]);
 export var Flex = styled(BaseFlex).withConfig({
   displayName: "FlexStoryStyle__Flex",
-  componentId: "jlb02q-1"
+  componentId: "sc-jlb02q-1"
 })(["width:500px;height:150px;padding:16px;background-color:#4caf50;"]);

package/es/Layout/Flex/index.d.ts

@@ -4,6 +4,8 @@ import { FlexProps } from './types';
 declare type Props = FlexProps & BoxProps & {
     style?: React.CSSProperties;
 };
-export declare const StyledFlex: import("styled-components").StyledComponent<React.FC<BoxProps>, any, Props, never>;
+export declare const StyledFlex: import("styled-components").StyledComponent<React.FC<BoxProps>, any, FlexProps & BoxProps & {
+    style?: React.CSSProperties;
+}, never>;
 export declare const Flex: React.FC<Props>;
 export {};

package/es/Layout/Flex/index.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["flexDirection", "justifyContent", "alignItems", "flexWrap"];
 import * as React from 'react';
 import styled from 'styled-components';
 import { Box } from '../Box';
@@ -28,7 +29,7 @@ export var Flex = function Flex(_ref5) {
       alignItems = _ref5$alignItems === void 0 ? 'stretch' : _ref5$alignItems,
       _ref5$flexWrap = _ref5.flexWrap,
       flexWrap = _ref5$flexWrap === void 0 ? 'nowrap' : _ref5$flexWrap,
-      restProps = _objectWithoutPropertiesLoose(_ref5, ["flexDirection", "justifyContent", "alignItems", "flexWrap"]);
+      restProps = _objectWithoutPropertiesLoose(_ref5, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledFlex, _extends({
     flexDirection: flexDirection,

package/es/Layout/Grid/Col.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["xs", "sm", "md", "xsOrder", "smOrder", "mdOrder", "children"];
 import * as React from 'react';
 import { ColumnContainer } from './GridStyle';
 export var Col = function Col(_ref) {
@@ -10,7 +11,7 @@ export var Col = function Col(_ref) {
       smOrder = _ref.smOrder,
       mdOrder = _ref.mdOrder,
       children = _ref.children,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["xs", "sm", "md", "xsOrder", "smOrder", "mdOrder", "children"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(ColumnContainer
   /** Set number of columns you wish to span for extra small devices like phone (<=640px) */

package/es/Layout/Grid/Row.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "alignContent", "justifyContent"];
 import * as React from 'react';
 import { RowContainer } from './GridStyle';
 
@@ -7,7 +8,7 @@ var Row = function Row(_ref) {
   var children = _ref.children,
       alignContent = _ref.alignContent,
       justifyContent = _ref.justifyContent,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["children", "alignContent", "justifyContent"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(RowContainer, _extends({
     alignContent: alignContent,

package/es/Navigation/Breadcrumb/Breadcrumb.d.ts

@@ -5,7 +5,7 @@ export declare const Breadcrumb: Breadcrumb;
 declare type Breadcrumb = React.FunctionComponent<Props> & {
     Item: typeof BreadcrumbItem;
 };
-export interface Props extends React.ComponentPropsWithoutRef<typeof BreadcrumbContainer> {
+export declare type Props = React.ComponentPropsWithoutRef<typeof BreadcrumbContainer> & {
     children: React.ReactNode;
-}
+};
 export default Breadcrumb;

package/es/Navigation/Breadcrumb/Breadcrumb.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { BreadcrumbContainer } from './BreadcrumbStyle';
@@ -7,7 +8,7 @@ import BreadcrumbItem from './BreadcrumbItem';
 export var Breadcrumb = function Breadcrumb(_ref) {
   var className = _ref.className,
       children = _ref.children,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["className", "children"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(BreadcrumbContainer, _extends({
     className: classNames('aries-breadcrumb', className)

package/es/Navigation/Breadcrumb/BreadcrumbItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { BreadcrumbItemWrapper } from './BreadcrumbStyle';
 declare const BreadcrumbItem: React.FunctionComponent<Props>;
-interface Props extends React.ComponentPropsWithoutRef<typeof BreadcrumbItemWrapper> {
+declare type Props = React.ComponentPropsWithoutRef<typeof BreadcrumbItemWrapper> & {
     children: React.ReactNode;
-}
+};
 export default BreadcrumbItem;

package/es/Navigation/Breadcrumb/BreadcrumbItem.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["active", "className", "children"];
 import * as React from 'react';
 import { BreadcrumbItemWrapper } from './BreadcrumbStyle';
 import classNames from 'classnames';
@@ -8,7 +9,7 @@ var BreadcrumbItem = function BreadcrumbItem(props) {
   var active = props.active,
       className = props.className,
       children = props.children,
-      defaultProps = _objectWithoutPropertiesLoose(props, ["active", "className", "children"]);
+      defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement(BreadcrumbItemWrapper, _extends({
     className: classNames('aries-breadcrumb-item', className),

package/es/Navigation/Breadcrumb/BreadcrumbStyle.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Greyscale } from '../../Utils/Colors';
 export var BreadcrumbItemWrapper = styled.label.withConfig({
   displayName: "BreadcrumbStyle__BreadcrumbItemWrapper",
-  componentId: "eq3cq-0"
+  componentId: "sc-eq3cq-0"
 })(["cursor:", ";font-size:1em;line-height:1.5;*{color:", ";}span{margin:0 1em;color:#aaaaaa;}"], function (_ref) {
   var active = _ref.active;
   return active ? 'default' : 'pointer';
@@ -12,5 +12,5 @@ export var BreadcrumbItemWrapper = styled.label.withConfig({
 });
 export var BreadcrumbContainer = styled.div.withConfig({
   displayName: "BreadcrumbStyle__BreadcrumbContainer",
-  componentId: "eq3cq-1"
+  componentId: "sc-eq3cq-1"
 })(["position:relative;display:flex;background-color:", ";padding:1em;label.aries-breadcrumb-item:last-child span{display:none;}"], Greyscale.softgrey);

package/es/Navigation/Drawer/Drawer.d.ts

@@ -4,7 +4,7 @@ export declare type DrawerPosition = 'left' | 'right';
 export interface Props {
     children: React.ReactNode;
     isOpen: boolean;
-    onClose: Function;
+    onClose: () => void;
     getContainerElement?: () => HTMLElement;
     position?: DrawerPosition;
 }

package/es/Navigation/Drawer/Drawer.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "isOpen", "onClose", "position", "getContainerElement"];
 import * as React from 'react';
 import { DrawerContainer, DrawerWrapper } from './DrawerStyle';
 
@@ -10,7 +11,7 @@ var Drawer = function Drawer(_ref) {
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'right' : _ref$position,
       getContainerElement = _ref.getContainerElement,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["children", "isOpen", "onClose", "position", "getContainerElement"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   React.useEffect(function preventContainerScrolling() {
     if (!getContainerElement) return;
@@ -23,7 +24,7 @@ var Drawer = function Drawer(_ref) {
     }
 
     return function () {
-      return containerElement.style.overflow = 'scroll';
+      containerElement.style.overflow = 'scroll';
     };
   }, [getContainerElement, isOpen]);
   return /*#__PURE__*/React.createElement(DrawerContainer, {

package/es/Navigation/Dropdown/Dropdown.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "showHoverLine", "dropDownPlacement", "noLineBreak", "iconDefaultColor", "showFullWidth", "disabled", "hoverToOpen", "onChange", "children", "leftIcon", "className", "itemElement"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { ArrowDownIcon } from '../../General/Icon/components';
@@ -27,7 +28,7 @@ export var Dropdown = function Dropdown(_ref) {
       leftIcon = _ref.leftIcon,
       className = _ref.className,
       itemElement = _ref.itemElement,
-      defaultProps = _objectWithoutPropertiesLoose(_ref, ["label", "showHoverLine", "dropDownPlacement", "noLineBreak", "iconDefaultColor", "showFullWidth", "disabled", "hoverToOpen", "onChange", "children", "leftIcon", "className", "itemElement"]);
+      defaultProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var dropdownBodyRef = React.useRef(null);
 

package/es/Navigation/Dropdown/DropdownItem.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { DropdownItemWrapper } from './DropdownStyle';
 declare const DropdownItem: React.FunctionComponent<Props>;
-export interface Props extends React.ComponentPropsWithoutRef<typeof DropdownItemWrapper> {
+export declare type Props = React.ComponentPropsWithoutRef<typeof DropdownItemWrapper> & {
     value?: any;
     onClick?: (e: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
     children: React.ReactNode;
-}
+};
 export default DropdownItem;

package/es/Navigation/Dropdown/DropdownItem.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className"];
 import * as React from 'react';
 import { DropdownItemWrapper } from './DropdownStyle';
 
 var DropdownItem = function DropdownItem(props) {
   var children = props.children,
       className = props.className,
-      defaultProps = _objectWithoutPropertiesLoose(props, ["children", "className"]);
+      defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement(DropdownItemWrapper, _extends({
     className: className

package/es/Utils/Icon/IconLibrary.d.ts

@@ -106,6 +106,8 @@ export declare const ICONS: {
     MEDAL: JSX.Element;
     MENU: JSX.Element;
     MENU_HALF: JSX.Element;
+    MESSAGE_OUTLINE: JSX.Element;
+    MESSAGE_OUTLINE_INCOMING: JSX.Element;
     MIC: JSX.Element;
     MIC_OFF: JSX.Element;
     MINUS: JSX.Element;

package/es/Utils/Icon/IconLibrary.js

@@ -480,6 +480,22 @@ export var ICONS = {
   MENU_HALF: /*#__PURE__*/React.createElement("path", {
     d: "M0 14h100v8H0v-8zm20 32h80v8H20v-8zM0 78h100v8H0v-8z"
   }),
+  MESSAGE_OUTLINE: /*#__PURE__*/React.createElement("g", {
+    transform: "scale(4)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.875 12C10.875 12.2984 10.9935 12.5845 11.2045 12.7955C11.4155 13.0065 11.7016 13.125 12 13.125C12.2984 13.125 12.5845 13.0065 12.7955 12.7955C13.0065 12.5845 13.125 12.2984 13.125 12C13.125 11.7016 13.0065 11.4155 12.7955 11.2045C12.5845 10.9935 12.2984 10.875 12 10.875C11.7016 10.875 11.4155 10.9935 11.2045 11.2045C10.9935 11.4155 10.875 11.7016 10.875 12ZM15.5625 12C15.5625 12.2984 15.681 12.5845 15.892 12.7955C16.103 13.0065 16.3891 13.125 16.6875 13.125C16.9859 13.125 17.272 13.0065 17.483 12.7955C17.694 12.5845 17.8125 12.2984 17.8125 12C17.8125 11.7016 17.694 11.4155 17.483 11.2045C17.272 10.9935 16.9859 10.875 16.6875 10.875C16.3891 10.875 16.103 10.9935 15.892 11.2045C15.681 11.4155 15.5625 11.7016 15.5625 12ZM6.18751 12C6.18751 12.2984 6.30604 12.5845 6.51702 12.7955C6.72799 13.0065 7.01414 13.125 7.31251 13.125C7.61088 13.125 7.89703 13.0065 8.10801 12.7955C8.31898 12.5845 8.43751 12.2984 8.43751 12C8.43751 11.7016 8.31898 11.4155 8.10801 11.2045C7.89703 10.9935 7.61088 10.875 7.31251 10.875C7.01414 10.875 6.72799 10.9935 6.51702 11.2045C6.30604 11.4155 6.18751 11.7016 6.18751 12ZM21.6844 7.93125C21.1547 6.67266 20.3953 5.54297 19.4274 4.57266C18.4662 3.60796 17.3251 2.84114 16.0688 2.31563C14.7797 1.77422 13.4109 1.5 12 1.5H11.9531C10.5328 1.50703 9.15704 1.78828 7.86329 2.34141C6.61772 2.87232 5.48735 3.64049 4.53517 4.60312C3.57657 5.57109 2.82423 6.69609 2.30392 7.95C1.76485 9.24844 1.49298 10.6289 1.50001 12.0492C1.50796 13.6769 1.89304 15.2806 2.62501 16.7344V20.2969C2.62501 20.5828 2.7386 20.857 2.94079 21.0592C3.14297 21.2614 3.4172 21.375 3.70314 21.375H7.26798C8.72179 22.107 10.3255 22.492 11.9531 22.5H12.0024C13.4063 22.5 14.768 22.2281 16.05 21.6961C17.3 21.1768 18.4368 20.419 19.3969 19.4648C20.3649 18.5063 21.1266 17.3859 21.6586 16.1367C22.2117 14.843 22.493 13.4672 22.5 12.0469C22.507 10.6195 22.2305 9.23438 21.6844 7.93125ZM18.143 18.1969C16.5 19.8234 14.3203 20.7188 12 20.7188H11.9602C10.5469 20.7117 9.14298 20.3602 7.90314 19.6992L7.70626 19.5938H4.40626V16.2938L4.30079 16.0969C3.63985 14.857 3.28829 13.4531 3.28126 12.0398C3.27189 9.70312 4.16485 7.50937 5.80314 5.85703C7.43907 4.20469 9.62579 3.29062 11.9625 3.28125H12.0024C13.1742 3.28125 14.3109 3.50859 15.382 3.95859C16.4274 4.39687 17.3649 5.02734 18.1711 5.83359C18.975 6.6375 19.6078 7.57734 20.0461 8.62266C20.5008 9.70547 20.7281 10.8539 20.7234 12.0398C20.7094 14.3742 19.793 16.5609 18.143 18.1969Z"
+  })),
+  MESSAGE_OUTLINE_INCOMING: /*#__PURE__*/React.createElement("g", {
+    transform: "scale(4)"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9.87513 11C9.87513 11.2984 9.99366 11.5845 10.2046 11.7955C10.4156 12.0065 10.7018 12.125 11.0001 12.125C11.2985 12.125 11.5846 12.0065 11.7956 11.7955C12.0066 11.5845 12.1251 11.2984 12.1251 11C12.1251 10.7016 12.0066 10.4155 11.7956 10.2045C11.5846 9.99353 11.2985 9.875 11.0001 9.875C10.7018 9.875 10.4156 9.99353 10.2046 10.2045C9.99366 10.4155 9.87513 10.7016 9.87513 11V11ZM14.5626 11C14.5626 11.2984 14.6812 11.5845 14.8921 11.7955C15.1031 12.0065 15.3893 12.125 15.6876 12.125C15.986 12.125 16.2721 12.0065 16.4831 11.7955C16.6941 11.5845 16.8126 11.2984 16.8126 11C16.8126 10.7016 16.6941 10.4155 16.4831 10.2045C16.2721 9.99353 15.986 9.875 15.6876 9.875C15.3893 9.875 15.1031 9.99353 14.8921 10.2045C14.6812 10.4155 14.5626 10.7016 14.5626 11ZM5.18763 11C5.18763 11.2984 5.30616 11.5845 5.51714 11.7955C5.72812 12.0065 6.01426 12.125 6.31263 12.125C6.611 12.125 6.89715 12.0065 7.10813 11.7955C7.31911 11.5845 7.43763 11.2984 7.43763 11C7.43763 10.7016 7.31911 10.4155 7.10813 10.2045C6.89715 9.99353 6.611 9.875 6.31263 9.875C6.01426 9.875 5.72812 9.99353 5.51714 10.2045C5.30616 10.4155 5.18763 10.7016 5.18763 11V11ZM20.6845 6.93125C20.1548 5.67266 19.3954 4.54297 18.4275 3.57266C17.4663 2.60796 16.3252 1.84114 15.0689 1.31563C13.7798 0.774219 12.4111 0.5 11.0001 0.5H10.9533C9.53295 0.507031 8.15716 0.788281 6.86341 1.34141C5.61785 1.87232 4.48747 2.64049 3.53529 3.60312C2.5767 4.57109 1.82435 5.69609 1.30404 6.95C0.764977 8.24844 0.493102 9.62891 0.500133 11.0492C0.508086 12.6769 0.893161 14.2806 1.62513 15.7344V19.2969C1.62513 19.5828 1.73872 19.857 1.94091 20.0592C2.1431 20.2614 2.41732 20.375 2.70326 20.375H6.2681C7.72192 21.107 9.32559 21.492 10.9533 21.5H11.0025C12.4064 21.5 13.7681 21.2281 15.0501 20.6961C16.3001 20.1768 17.4369 19.419 18.397 18.4648C19.365 17.5062 20.1267 16.3859 20.6587 15.1367C21.2119 13.843 21.4931 12.4672 21.5001 11.0469C21.5072 9.61953 21.2306 8.23437 20.6845 6.93125V6.93125ZM17.1431 17.1969C15.5001 18.8234 13.3204 19.7188 11.0001 19.7188H10.9603C9.54701 19.7117 8.1431 19.3602 6.90326 18.6992L6.70638 18.5938H3.40638V15.2938L3.30091 15.0969C2.63998 13.857 2.28841 12.4531 2.28138 11.0398C2.27201 8.70313 3.16498 6.50937 4.80326 4.85703C6.4392 3.20469 8.62591 2.29063 10.9626 2.28125H11.0025C12.1744 2.28125 13.3111 2.50859 14.3822 2.95859C15.4275 3.39687 16.365 4.02734 17.1712 4.83359C17.9751 5.6375 18.6079 6.57734 19.0462 7.62266C19.5009 8.70547 19.7283 9.85391 19.7236 11.0398C19.7095 13.3742 18.7931 15.5609 17.1431 17.1969V17.1969Z"
+  }), /*#__PURE__*/React.createElement("ellipse", {
+    cx: "17.5",
+    cy: "6.8402",
+    rx: "4.5",
+    ry: "4.8695",
+    fill: "#F01818"
+  })),
   MIC: /*#__PURE__*/React.createElement("g", {
     transform: "scale(4, 4)"
   }, /*#__PURE__*/React.createElement("path", {

package/es/Utils/Shadow/ShadowsStoriesHelpers.js

@@ -5,11 +5,11 @@ export var levels = [[Shadow.up1, Shadow.down1], [Shadow.up2, Shadow.down2], [Sh
 export var levelUsages = ['Elements that uses shadow by default', 'Elements in hovered state', 'Sticky elements, dropdown elements', 'Alerts'];
 export var PreviewCell = styled.div.withConfig({
   displayName: "ShadowsStoriesHelpers__PreviewCell",
-  componentId: "cigkku-0"
+  componentId: "sc-cigkku-0"
 })(["background-color:white;padding:16px;display:flex;*{margin-top:0 !important;margin-bottom:0 !important;}"]);
 export var PreviewBox = styled.div.withConfig({
   displayName: "ShadowsStoriesHelpers__PreviewBox",
-  componentId: "cigkku-1"
+  componentId: "sc-cigkku-1"
 })(["box-shadow:", ";margin:16px;border:1px solid black;background-color:", ";width:32px;height:32px;"], function (_ref) {
   var shadow = _ref.shadow;
   return shadow;

package/es/index.d.ts

@@ -147,6 +147,8 @@ export { default as MailSolidIcon } from './General/Icon/components/MailSolidIco
 export { default as MedalIcon } from './General/Icon/components/MedalIcon';
 export { default as MenuIcon } from './General/Icon/components/MenuIcon';
 export { default as MenuHalfIcon } from './General/Icon/components/MenuHalfIcon';
+export { default as MessageOutlineIcon } from './General/Icon/components/MessageOutlineIcon';
+export { default as MessageOutlineIncomingIcon } from './General/Icon/components/MessageOutlineIncomingIcon';
 export { default as MicIcon } from './General/Icon/components/MicIcon';
 export { default as MicOffIcon } from './General/Icon/components/MicOffIcon';
 export { default as MinusIcon } from './General/Icon/components/MinusIcon';

package/es/index.js

@@ -151,6 +151,8 @@ export { default as MailSolidIcon } from './General/Icon/components/MailSolidIco
 export { default as MedalIcon } from './General/Icon/components/MedalIcon';
 export { default as MenuIcon } from './General/Icon/components/MenuIcon';
 export { default as MenuHalfIcon } from './General/Icon/components/MenuHalfIcon';
+export { default as MessageOutlineIcon } from './General/Icon/components/MessageOutlineIcon';
+export { default as MessageOutlineIncomingIcon } from './General/Icon/components/MessageOutlineIncomingIcon';
 export { default as MicIcon } from './General/Icon/components/MicIcon';
 export { default as MicOffIcon } from './General/Icon/components/MicOffIcon';
 export { default as MinusIcon } from './General/Icon/components/MinusIcon';