glints-aries 4.0.149 → 4.0.152

package/es/General/Tag/ActionTags/ResetTag.js

@@ -3,5 +3,5 @@ import { PrimaryColor } from '../../../Utils/Colors';
 import BasicTag from '../BasicTag';
 export var ResetTag = styled(BasicTag).withConfig({
   displayName: "ResetTag",
-  componentId: "be45u9-0"
+  componentId: "sc-be45u9-0"
 })(["color:", ";border-style:solid;border-color:transparent;background-color:rgba(236,39,43,0.05);&:hover{background-color:rgba(236,39,43,0.1);}&:active{background-color:rgba(236,39,43,0.2);}"], PrimaryColor.glintsred);

package/es/General/Tag/BasicTag.d.ts

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

package/es/General/Tag/BasicTag.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "block", "outline", "onClick"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { TagContainer, TagContent } from './TagStyle';
@@ -10,7 +11,7 @@ var Tag = function Tag(props) {
       block = props.block,
       outline = props.outline,
       onClick = props.onClick,
-      restProps = _objectWithoutPropertiesLoose(props, ["className", "children", "block", "outline", "onClick"]);
+      restProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement(TagContainer, _extends({
     className: classNames('aries-tag', className),

package/es/General/Tag/Tag.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["variant", "action", "children", "icon", "block", "outline", "onClick"];
 import * as React from 'react';
 import { AddIcon, TrashIcon } from '../../General/Icon/components';
 import { StartIconContainer, EndIconContainer } from './TagStyle';
@@ -17,7 +18,7 @@ var Tag = function Tag(_ref) {
       _ref$outline = _ref.outline,
       outline = _ref$outline === void 0 ? false : _ref$outline,
       onClick = _ref.onClick,
-      resetProps = _objectWithoutPropertiesLoose(_ref, ["variant", "action", "children", "icon", "block", "outline", "onClick"]);
+      resetProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   if (variant === 'action') {
     switch (action) {

package/es/General/Typography/Paragraph.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "variant", "bold", "color", "ellipsis", "shouldSetLineHeight"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { Paragraph as StyledParagraph } from './ParagraphStyles';
@@ -17,7 +18,7 @@ export var Paragraph = function Paragraph(_ref) {
       ellipsis = _ref$ellipsis === void 0 ? false : _ref$ellipsis,
       _ref$shouldSetLineHei = _ref.shouldSetLineHeight,
       shouldSetLineHeight = _ref$shouldSetLineHei === void 0 ? false : _ref$shouldSetLineHei,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "variant", "bold", "color", "ellipsis", "shouldSetLineHeight"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledParagraph, _extends({
     className: classNames('aries-typography-paragraph', className),

package/es/General/Typography/Title.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "color", "ellipsis", "tag", "uppercase"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { Title as StyledTitle } from './TitleStyles';
@@ -15,7 +16,7 @@ export var Title = function Title(_ref) {
       tag = _ref$tag === void 0 ? 'h1' : _ref$tag,
       _ref$uppercase = _ref.uppercase,
       uppercase = _ref$uppercase === void 0 ? false : _ref$uppercase,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "color", "ellipsis", "tag", "uppercase"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(StyledTitle, _extends({
     className: classNames('aries-typography-title', className),

package/es/Input/Checkbox/Checkbox.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["id", "label", "value", "onClick", "size", "border", "indeterminate", "className", "checked"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { CheckboxContainer } from './CheckboxStyle';
@@ -28,7 +29,7 @@ export var Checkbox = function Checkbox(_ref) {
       indeterminate = _ref$indeterminate === void 0 ? undefined : _ref$indeterminate,
       className = _ref.className,
       checked = _ref.checked,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["id", "label", "value", "onClick", "size", "border", "indeterminate", "className", "checked"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _React$useState = React.useState(false),
       internalChecked = _React$useState[0],

package/es/Input/Checkbox/CheckboxStyle.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import { Greyscale, SecondaryColor } from '../../Utils/Colors';
 export var CheckboxContainer = styled.div.withConfig({
   displayName: "CheckboxStyle__CheckboxContainer",
-  componentId: "c3ckvs-0"
+  componentId: "sc-c3ckvs-0"
 })(["position:relative;display:inline-flex;font-size:", ";line-height:1.5;&:focus{outline:none;}input{padding:0;height:initial;width:initial;margin-bottom:0;display:none;cursor:pointer;}label:before{content:'';appearance:none;background-color:transparent;border:1px solid ", ";display:inline-block;position:relative;vertical-align:middle;cursor:pointer;margin-right:10px;border-radius:4px;width:1.29em;height:1.29em;box-sizing:border-box;}&[aria-checked='true'] label:before{border-color:transparent;}&[aria-checked='true'][data-border='true'] label:before{background:", ";}&[aria-checked='true'][data-border='false'] label:before{background:", ";}&[aria-checked='mixed'] label:before{background:", ";}label{position:relative;display:flex;align-items:center;line-height:1;cursor:pointer;outline:none;}&[aria-checked='true'] label{border-color:", ";}&[data-border='true'] label{border:1px solid #aaaaaa;cursor:pointer;border-radius:8px;padding:0.57em 0.86em;&:hover{background:rgba(1,126,183,0.1);border-color:", ";}}&[aria-checked='true'] label:after,&[aria-checked='mixed'] label:after{content:'';display:block;position:absolute;border:solid ", ";}&[aria-checked='true'] label:after{top:0.13em;left:0.45em;width:0.43em;height:0.86em;border-width:0 0.143em 0.143em 0;transform:rotate(45deg);}&[aria-checked='mixed'] label:after{top:0.55em;left:0.45em;width:0.43em;border-width:0.143em 0 0 0;}&[aria-checked='true'][data-border='true'] label:after,&[aria-checked='mixed'][data-border='true'] label:after{margin-top:0.61em;margin-left:0.89em;}"], function (_ref) {
   var size = _ref.size;
   return size === 'small' ? '14px' : '16px';

package/es/Input/Datepicker/Datepicker.d.ts

@@ -23,7 +23,7 @@ declare class Datepicker extends React.Component<Props, State> {
     renderTHead: () => JSX.Element;
     renderTBody: () => JSX.Element;
     renderFirstWeekRow: () => JSX.Element;
-    renderDayRow: (array?: React.ReactNodeArray, startingCount?: number) => React.ReactNode;
+    renderDayRow: (array?: React.ReactNode[], startingCount?: number) => React.ReactNode;
     renderOffSetDay: () => JSX.Element[];
     renderLeftSideIcon: (showMonths: boolean) => JSX.Element;
     renderRightSideIcon: (showMonths: boolean) => JSX.Element;

package/es/Input/Datepicker/DatepickerStyle.js

@@ -2,11 +2,11 @@ import styled from 'styled-components';
 import { Greyscale, SecondaryColor } from '../../Utils/Colors';
 export var DatepickerContainer = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerContainer",
-  componentId: "t24o7e-0"
+  componentId: "sc-t24o7e-0"
 })(["flex-grow:1;position:relative;"]);
 export var DatepickerWrapper = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerWrapper",
-  componentId: "t24o7e-1"
+  componentId: "sc-t24o7e-1"
 })(["position:absolute;visibility:", ";opacity:", ";transform:", ";transform-origin:center top;transition:", ";background:", ";width:280px;box-shadow:0 2px 8px rgba(0,0,0,0.15);margin-top:0.5em;outline:none;z-index:1000;"], function (_ref) {
   var isOpen = _ref.isOpen;
   return isOpen ? 'visible' : 'hidden';
@@ -22,52 +22,52 @@ export var DatepickerWrapper = styled.div.withConfig({
 }, Greyscale.white);
 export var DatepickerSection = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerSection",
-  componentId: "t24o7e-2"
+  componentId: "sc-t24o7e-2"
 })(["padding:10px;border-bottom:", ";"], function (_ref5) {
   var border = _ref5.border;
   return border && '1px solid #E8E8E8';
 });
 export var DatepickerContent = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerContent",
-  componentId: "t24o7e-3"
+  componentId: "sc-t24o7e-3"
 })(["display:flex;justify-content:", ";align-items:center;"], function (_ref6) {
   var justify = _ref6.justify;
   return justify || 'center';
 });
 export var DatepickerMonthYearBtn = styled.button.withConfig({
   displayName: "DatepickerStyle__DatepickerMonthYearBtn",
-  componentId: "t24o7e-4"
+  componentId: "sc-t24o7e-4"
 })(["border:none;background:", ";padding:0;cursor:pointer;margin:0 4px;&:hover{color:", ";}"], Greyscale.white, SecondaryColor.actionblue);
 export var DatepickerTodayBtn = styled.button.withConfig({
   displayName: "DatepickerStyle__DatepickerTodayBtn",
-  componentId: "t24o7e-5"
+  componentId: "sc-t24o7e-5"
 })(["display:flex;align-items:center;justify-content:center;border:none;outline:none;cursor:pointer;padding:0;&:hover{color:", ";}"], SecondaryColor.actionblue);
 export var DatepickerNavigation = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerNavigation",
-  componentId: "t24o7e-6"
+  componentId: "sc-t24o7e-6"
 })(["display:flex;"]);
 export var DatepickerIconWrapper = styled.div.withConfig({
   displayName: "DatepickerStyle__DatepickerIconWrapper",
-  componentId: "t24o7e-7"
+  componentId: "sc-t24o7e-7"
 })(["display:flex;font-size:8px;cursor:pointer;margin:", ";"], function (_ref7) {
   var needMargin = _ref7.needMargin;
   return needMargin && '0 8px';
 });
 export var DatepickerTable = styled.table.withConfig({
   displayName: "DatepickerStyle__DatepickerTable",
-  componentId: "t24o7e-8"
+  componentId: "sc-t24o7e-8"
 })(["width:100%;max-width:100%;"]);
 export var Td = styled.td.withConfig({
   displayName: "DatepickerStyle__Td",
-  componentId: "t24o7e-9"
+  componentId: "sc-t24o7e-9"
 })(["padding:0;"]);
 export var Th = styled.th.withConfig({
   displayName: "DatepickerStyle__Th",
-  componentId: "t24o7e-10"
+  componentId: "sc-t24o7e-10"
 })(["padding:0;"]);
 export var HoverContent = styled.div.withConfig({
   displayName: "DatepickerStyle__HoverContent",
-  componentId: "t24o7e-11"
+  componentId: "sc-t24o7e-11"
 })(["display:flex;justify-content:center;align-items:center;width:", ";height:", ";border-radius:2px;transition:background 0.3s ease;background-color:transparent;line-height:22px;", " ", ""], function (_ref8) {
   var biggerSize = _ref8.biggerSize;
   return !biggerSize ? '35px' : 'auto';

package/es/Input/DownshiftSelect/Select.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["items", "transformFunction", "components", "isLoading", "isOpenInitially", "helperText", "downshift", "placeholder", "label", "disabled", "disableTyping", "isOpen", "invalid", "onIsOpenChange", "selectedItem", "onSelectedItemChange", "inputValue", "onInputValueChange", "onClear", "onFocus", "onBlur", "emptyListText", "groupKey"];
 
-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, { useState } from 'react';
 import { useCombobox } from 'downshift';
@@ -60,7 +61,7 @@ export var Select = function Select(_ref) {
       _ref$emptyListText = _ref.emptyListText,
       emptyListText = _ref$emptyListText === void 0 ? defaultEmptyListText : _ref$emptyListText,
       groupKey = _ref.groupKey,
-      props = _objectWithoutPropertiesLoose(_ref, ["items", "transformFunction", "components", "isLoading", "isOpenInitially", "helperText", "downshift", "placeholder", "label", "disabled", "disableTyping", "isOpen", "invalid", "onIsOpenChange", "selectedItem", "onSelectedItemChange", "inputValue", "onInputValueChange", "onClear", "onFocus", "onBlur", "emptyListText", "groupKey"]);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var mergedComponents = _objectSpread(_objectSpread({}, internalComponents), externalComponents);
 

package/es/Input/DownshiftSelect/Select.stories.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 
-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, { useState } from 'react';
 import { Select } from './Select';
@@ -17,7 +17,7 @@ import { identity, sample, sampleSize } from 'lodash';
 import { TextField } from '../..';
 var StoryContainer = styled(BaseContainer).withConfig({
   displayName: "Selectstories__StoryContainer",
-  componentId: "qzffum-0"
+  componentId: "sc-qzffum-0"
 })(["min-height:250px;"]);
 export default {
   title: 'Input/DownshiftSelect',
@@ -71,11 +71,11 @@ var componentNames = Object.keys(Components).filter(function (name) {
 });
 var CustomLabel = styled.label.withConfig({
   displayName: "Selectstories__CustomLabel",
-  componentId: "qzffum-1"
+  componentId: "sc-qzffum-1"
 })(["color:green;"]);
 var CustomStyledItem = styled(Select.Components.Item).withConfig({
   displayName: "Selectstories__CustomStyledItem",
-  componentId: "qzffum-2"
+  componentId: "sc-qzffum-2"
 })(["display:flex;justify-content:space-between;&[aria-selected='true']{color:", ";}"], SecondaryColor.darkgreen);
 
 var CustomItem = function CustomItem(props) {
@@ -438,7 +438,7 @@ OnClearCallback.parameters = {
 };
 var ShortContainer = styled(Select.Components.Container).withConfig({
   displayName: "Selectstories__ShortContainer",
-  componentId: "qzffum-3"
+  componentId: "sc-qzffum-3"
 })(["max-width:280px;"]);
 export var ConfigurableWidth = Template.bind({});
 ConfigurableWidth.args = {
@@ -458,7 +458,7 @@ ConfigurableWidth.parameters = {
 };
 var SmallContainer = styled(Select.Components.Container).withConfig({
   displayName: "Selectstories__SmallContainer",
-  componentId: "qzffum-4"
+  componentId: "sc-qzffum-4"
 })(["max-width:200px;font-size:11px;"]);
 export var Small = Template.bind({});
 Small.args = {
@@ -478,7 +478,7 @@ Small.parameters = {
 };
 var StyledEmptyList = styled(Select.Components.EmptyList).withConfig({
   displayName: "Selectstories__StyledEmptyList",
-  componentId: "qzffum-5"
+  componentId: "sc-qzffum-5"
 })(["display:flex;justify-content:center;color:green;"]);
 export var EmptyListText = Template.bind({});
 EmptyListText.args = {

package/es/Input/DownshiftSelect/SelectStyle.js

@@ -4,65 +4,65 @@ import { Greyscale, PrimaryColor, SecondaryColor } from '../../Utils/Colors';
 import { Shadow } from '../../Utils/Shadow';
 export var Container = styled.div.withConfig({
   displayName: "SelectStyle__Container",
-  componentId: "qr1jv6-0"
+  componentId: "sc-qr1jv6-0"
 })(["position:relative;font-size:16px;"]);
 export var Label = styled.label.withConfig({
   displayName: "SelectStyle__Label",
-  componentId: "qr1jv6-1"
+  componentId: "sc-qr1jv6-1"
 })(["display:block;margin-bottom:8px;color:", ";font-weight:500;&[data-active='true']{color:", ";}&[data-disabled='true']{color:", ";}&[data-invalid='true']{color:", ";}"], Greyscale.devilsgrey, SecondaryColor.actionblue, Greyscale.lightgrey, PrimaryColor.glintsred);
 export var Combobox = styled.div.withConfig({
   displayName: "SelectStyle__Combobox",
-  componentId: "qr1jv6-2"
+  componentId: "sc-qr1jv6-2"
 })(["display:grid;grid-template-columns:1fr auto;grid-column-gap:0.75em;padding:0.75em 1em 0.75em 1em;border-radius:0.5em;background-color:#ebf5fa;:hover{background-color:#d6eaf2;}&[aria-expanded='true'],&[data-active='true']{background-color:#c2e0ed;}&[data-disabled='true']{background-color:", ";}&[data-invalid='true']{background-color:#feeeee;}"], Greyscale.softgrey);
 export var Input = styled.input.withConfig({
   displayName: "SelectStyle__Input",
-  componentId: "qr1jv6-3"
+  componentId: "sc-qr1jv6-3"
 })(["border:none;background-color:transparent;outline:none;color:", ";font-size:inherit;text-overflow:ellipsis;&:not([value='']){color:black;}:disabled::placeholder{color:", ";}"], Greyscale.devilsgrey, Greyscale.lightgrey);
 export var IndicatorsContainer = styled.div.withConfig({
   displayName: "SelectStyle__IndicatorsContainer",
-  componentId: "qr1jv6-4"
+  componentId: "sc-qr1jv6-4"
 })(["display:flex;flex-direction:row;>:not(:last-child){margin-right:0.75em;}"]);
 export var _IndicatorButton = styled.button.withConfig({
   displayName: "SelectStyle___IndicatorButton",
-  componentId: "qr1jv6-5"
+  componentId: "sc-qr1jv6-5"
 })(["padding:0;border:none;background:none;color:", ";font-size:inherit;"], Greyscale.devilsgrey);
 export var ClearButton = styled(_IndicatorButton).withConfig({
   displayName: "SelectStyle__ClearButton",
-  componentId: "qr1jv6-6"
+  componentId: "sc-qr1jv6-6"
 })([""]);
 export var ToggleButton = styled(_IndicatorButton).withConfig({
   displayName: "SelectStyle__ToggleButton",
-  componentId: "qr1jv6-7"
+  componentId: "sc-qr1jv6-7"
 })([""]);
 export var LoadingIndicator = styled(Loading).withConfig({
   displayName: "SelectStyle__LoadingIndicator",
-  componentId: "qr1jv6-8"
+  componentId: "sc-qr1jv6-8"
 })(["align-items:center;font-size:0.5625em;"]);
 export var Menu = styled.ul.withConfig({
   displayName: "SelectStyle__Menu",
-  componentId: "qr1jv6-9"
+  componentId: "sc-qr1jv6-9"
 })(["margin-top:4px;position:absolute;width:100%;padding:0.5em 0 0.5em 0;border:1px solid #eeeeee;border-radius:0.5em;box-shadow:", ";background-color:white;z-index:1;[aria-expanded='false'] + &{visibility:hidden;}"], Shadow.down3);
 export var Item = styled.li.withConfig({
   displayName: "SelectStyle__Item",
-  componentId: "qr1jv6-10"
+  componentId: "sc-qr1jv6-10"
 })(["padding:0.5em 1em;list-style-type:none;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&[aria-selected='true']{background-color:", ";color:", ";}&[disabled]{background-color:transparent;color:", ";cursor:not-allowed;}"], Greyscale.softgrey, SecondaryColor.actionblue, Greyscale.lightgrey);
 export var EmptyList = styled.li.withConfig({
   displayName: "SelectStyle__EmptyList",
-  componentId: "qr1jv6-11"
+  componentId: "sc-qr1jv6-11"
 })(["padding:0.5em 1em;list-style-type:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:", ";cursor:not-allowed;"], Greyscale.lightgrey);
 export var HelperText = styled.span.withConfig({
   displayName: "SelectStyle__HelperText",
-  componentId: "qr1jv6-12"
+  componentId: "sc-qr1jv6-12"
 })(["margin-top:4px;color:", ";font-size:0.875em;&[data-invalid='true']{color:", ";}"], Greyscale.devilsgrey, PrimaryColor.glintsred);
 export var GroupContainer = styled.li.withConfig({
   displayName: "SelectStyle__GroupContainer",
-  componentId: "qr1jv6-13"
+  componentId: "sc-qr1jv6-13"
 })(["margin-bottom:0.5em;padding:0;list-style-type:none;"]);
 export var Group = styled.ul.withConfig({
   displayName: "SelectStyle__Group",
-  componentId: "qr1jv6-14"
+  componentId: "sc-qr1jv6-14"
 })(["padding:0;"]);
 export var GroupHeading = styled.li.withConfig({
   displayName: "SelectStyle__GroupHeading",
-  componentId: "qr1jv6-15"
+  componentId: "sc-qr1jv6-15"
 })(["padding:0.5em 1em;list-style-type:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:", ";font-size:0.75em;text-transform:uppercase;"], Greyscale.devilsgrey);

package/es/Input/NumberInput/NumberInput.d.ts

@@ -8,7 +8,7 @@ import { TextFieldInput } from '../TextField/TextFieldStyle';
  * Use small to set the size of the input field. The ...rest is passed to the
  * internal field input. */
 export declare const NumberInput: (props: Props) => JSX.Element;
-export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldInput> {
+export declare type Props = React.ComponentPropsWithoutRef<typeof TextFieldInput> & {
     /** Placeholder for the text field. */
     label: string;
     disabled?: boolean;
@@ -23,5 +23,5 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof TextFieldIn
     forwardedRef?: React.RefObject<HTMLInputElement>;
     /** Icon at the start of the input element. */
     startIcon?: React.ReactNode;
-}
+};
 export default NumberInput;

package/es/Input/PhoneNumberInput/PhoneNumberInput.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"];
 
-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 { useCombobox } from 'downshift';
 import { find, orderBy } from 'lodash';
@@ -36,7 +37,7 @@ export var PhoneNumberInput = function PhoneNumberInput(_ref) {
       callingCodeNoOptionsLabel = _ref.callingCodeNoOptionsLabel,
       error = _ref.error,
       addon = _ref.addon,
-      restProps = _objectWithoutPropertiesLoose(_ref, ["value", "onChange", "onFocus", "onBlur", "callingCodeOptions", "onInputChange", "filterValue", "isLoadingCallingCodeOptions", "label", "featuredOptionsLabel", "otherOptionsLabel", "callingCodeFilterInputPlaceholder", "callingCodeNoOptionsLabel", "error", "addon"]);
+      restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = useState(false),
       isCallingCodeInputOpen = _useState[0],

package/es/Input/RadioButton/RadioButton.d.ts

@@ -10,7 +10,7 @@ export interface Props extends HTMLInputProps {
     /** Sets the label of Radio Button. */
     label?: React.ReactNode;
     /** Sets the props on the label element. */
-    labelProps?: React.LabelHTMLAttributes<{}>;
+    labelProps?: React.LabelHTMLAttributes<HTMLLabelElement>;
     /** Sets theme for Radio Button. */
     theme?: 'white';
     /** Sets a border around the radio button. */

package/es/Input/RadioButton/RadioButton.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["className", "children", "error", "label", "labelProps", "theme", "border", "disabled", "size"];
 import * as React from 'react';
 import classNames from 'classnames';
 import { RadioContainer, RadioLabel, RadioIcon, Border } from './RadioButtonStyle';
@@ -21,7 +22,7 @@ export var RadioButton = function RadioButton(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'regular' : _ref$size,
-      inputProps = _objectWithoutPropertiesLoose(_ref, ["className", "children", "error", "label", "labelProps", "theme", "border", "disabled", "size"]);
+      inputProps = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RadioIcon, {
     error: error,

package/es/Input/Select/Select.d.ts

@@ -12,7 +12,7 @@ export interface SelectInputProps {
     /** Deprecated! */
     status?: string;
 }
-export interface Props extends React.ComponentPropsWithoutRef<typeof SelectInput>, SelectInputProps {
+export declare type Props = React.ComponentPropsWithoutRef<typeof SelectInput> & SelectInputProps & {
     children: React.ReactNode;
     /** Sets value for Input. */
     value?: string;
@@ -46,6 +46,6 @@ export interface Props extends React.ComponentPropsWithoutRef<typeof SelectInput
     onChange?(value: string): void;
     /** Called when value of input is changed. */
     onInputChange?(event: React.ChangeEvent<HTMLInputElement>): void;
-}
+};
 export declare const Option: React.FC<SelectItemProps>;
 export default Select;

package/es/Input/Select/Select.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["label", "status", "disabled", "className", "onFocus", "onBlur", "onChange", "onInputChange", "noOptionResult", "small", "disableTyping", "removeFloatingLabel", "removeDropIcon", "error", "renderError", "value", "defaultValue", "defaultOpen", "children", "isLoading", "filterFunction"];
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import get from 'lodash/get';
@@ -39,7 +40,7 @@ var Select = function Select(props) {
       isLoading = props.isLoading,
       _props$filterFunction = props.filterFunction,
       filterFunction = _props$filterFunction === void 0 ? defaultFilterFunction : _props$filterFunction,
-      defaultProps = _objectWithoutPropertiesLoose(props, ["label", "status", "disabled", "className", "onFocus", "onBlur", "onChange", "onInputChange", "noOptionResult", "small", "disableTyping", "removeFloatingLabel", "removeDropIcon", "error", "renderError", "value", "defaultValue", "defaultOpen", "children", "isLoading", "filterFunction"]); // warn deprecated prop "status"
+      defaultProps = _objectWithoutPropertiesLoose(props, _excluded); // warn deprecated prop "status"
 
 
   React.useEffect(function warnDeprecatedProp() {
@@ -250,17 +251,17 @@ var Select = function Select(props) {
       setShouldScrollToActiveOption(true);
     } // down arrow key
     else if (e.keyCode === 40 && activeOptionIndex < options.length - 1) {
-        setActiveOptionIndex(activeOptionIndex + 1);
-        setShouldScrollToActiveOption(true);
-      } // enter key
-      else if (e.keyCode === 13) {
-          inputElement.blur();
-          handleClickOnOption();
-        } // escape key
-        else if (e.keyCode === 27) {
-            inputElement.blur();
-            setIsFocus(false);
-          }
+      setActiveOptionIndex(activeOptionIndex + 1);
+      setShouldScrollToActiveOption(true);
+    } // enter key
+    else if (e.keyCode === 13) {
+      inputElement.blur();
+      handleClickOnOption();
+    } // escape key
+    else if (e.keyCode === 27) {
+      inputElement.blur();
+      setIsFocus(false);
+    }
   }, [disableTyping, options, activeOptionIndex, handleClickOnOption]);
   React.useEffect(function handleScrollToActiveElement() {
     if (shouldScrollToActiveOption) {

package/es/Input/Select/SelectItem.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { SelectItemWrapper } from './SelectStyle';
 declare const SelectItem: React.FunctionComponent<Props>;
-interface Props extends React.ComponentPropsWithoutRef<typeof SelectItemWrapper> {
+declare type Props = React.ComponentPropsWithoutRef<typeof SelectItemWrapper> & {
     children: React.ReactNode;
     onClick?(event: React.MouseEvent<HTMLLIElement, MouseEvent>): void;
     className?: string;
-}
+};
 export default SelectItem;

package/es/Input/Select/SelectItem.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "className", "onClick"];
 import * as React from 'react';
 import { SelectItemWrapper } from './SelectStyle';
 
@@ -7,7 +8,7 @@ var SelectItem = function SelectItem(props) {
   var children = props.children,
       className = props.className,
       onClick = props.onClick,
-      defaultProps = _objectWithoutPropertiesLoose(props, ["children", "className", "onClick"]);
+      defaultProps = _objectWithoutPropertiesLoose(props, _excluded);
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectItemWrapper, _extends({
     className: className,

package/es/Input/Select/SelectList.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "children"];
 import * as React from 'react';
 import SelectItem from './SelectItem';
 import Loading from '../../General/Loading';
@@ -25,7 +26,7 @@ var SelectList = function SelectList(_ref) {
     var _data$props = data.props,
         value = _data$props.value,
         children = _data$props.children,
-        restProps = _objectWithoutPropertiesLoose(_data$props, ["value", "children"]);
+        restProps = _objectWithoutPropertiesLoose(_data$props, _excluded);
 
     delete restProps.onOptionClick;
     return /*#__PURE__*/React.createElement(SelectItem, _extends({}, restProps, {

package/es/Input/Select/SelectStyle.js

@@ -3,11 +3,11 @@ import { PrimaryColor, SecondaryColor, Greyscale } from '../../Utils/Colors';
 import { Shadow } from '../../Utils/Shadow';
 export var SelectContainer = styled.div.withConfig({
   displayName: "SelectStyle__SelectContainer",
-  componentId: "gv8n2w-0"
+  componentId: "sc-gv8n2w-0"
 })(["flex-grow:1;position:relative;font-weight:normal;"]);
 export var SelectWrapper = styled.div.withConfig({
   displayName: "SelectStyle__SelectWrapper",
-  componentId: "gv8n2w-1"
+  componentId: "sc-gv8n2w-1"
 })(["display:flex;align-items:center;.select-icon{font-size:", ";position:absolute;right:15px;display:flex;align-items:center;cursor:pointer;svg{transform:", ";transition:", ";}}"], function (_ref) {
   var small = _ref.small;
   return small ? '12px' : '15px';
@@ -20,7 +20,7 @@ export var SelectWrapper = styled.div.withConfig({
 });
 export var SelectLabel = styled.label.withConfig({
   displayName: "SelectStyle__SelectLabel",
-  componentId: "gv8n2w-2"
+  componentId: "sc-gv8n2w-2"
 })(["position:absolute;left:", ";background:", ";color:", ";transition:all .2s;pointer-events:none;font-size:", ";", " ", " ", ""], function (_ref4) {
   var small = _ref4.small;
   return small ? '16px' : '22px';
@@ -53,7 +53,7 @@ export var SelectLabel = styled.label.withConfig({
 });
 export var SelectInput = styled.input.withConfig({
   displayName: "SelectStyle__SelectInput",
-  componentId: "gv8n2w-3"
+  componentId: "sc-gv8n2w-3"
 })(["width:100%;outline:none;height:", ";padding:", ";border:", ";transition:all .5s;font-size:", ";line-height:1.5;&::placeholder{color:", ";}", " ", " &:disabled{cursor:not-allowed;background:", ";+ ", "{", " color:", ";}&:hover{border:2px solid ", ";}}&:hover{border:2px solid ", ";transition:all .5s;", " + ", "{", "}}&:focus{border:2px solid ", ";", " + ", "{padding:0 5px;top:1em;transform:", ";transition:all .2s;color:", ";font-size:12px;", "}}"], function (_ref10) {
   var small = _ref10.small;
   return small ? '46px' : '53px';
@@ -117,7 +117,7 @@ export var SelectInput = styled.input.withConfig({
 });
 export var SelectListWrapper = styled.ul.withConfig({
   displayName: "SelectStyle__SelectListWrapper",
-  componentId: "gv8n2w-4"
+  componentId: "sc-gv8n2w-4"
 })(["position:absolute;visibility:", ";opacity:", ";transform:", ";transform-origin:center top;transition:", ";background:", ";min-width:100%;height:auto;box-shadow:", ";z-index:9999;max-height:200px;overflow:auto;font-size:", ";padding:0;margin:0;"], function (_ref22) {
   var open = _ref22.open;
   return open ? 'visible' : 'hidden';
@@ -136,7 +136,7 @@ export var SelectListWrapper = styled.ul.withConfig({
 });
 export var SelectItemWrapper = styled.li.withConfig({
   displayName: "SelectStyle__SelectItemWrapper",
-  componentId: "gv8n2w-5"
+  componentId: "sc-gv8n2w-5"
 })(["display:flex;align-items:center;cursor:pointer;padding:0.5em 1em;list-style-type:none;&:first-child{margin-top:0.5em;}&:last-child{margin-bottom:0.5em;}&.active{color:", ";background:", ";}&.select-loading{justify-content:center;}", ""], SecondaryColor.actionblue, Greyscale.softgrey, function (_ref27) {
   var disabled = _ref27.disabled;
 
@@ -146,5 +146,5 @@ export var SelectItemWrapper = styled.li.withConfig({
 });
 export var SelectErrorDefault = styled.span.withConfig({
   displayName: "SelectStyle__SelectErrorDefault",
-  componentId: "gv8n2w-6"
+  componentId: "sc-gv8n2w-6"
 })(["color:", ";"], PrimaryColor.glintsred);