glints-aries 4.0.149 → 4.0.152

package/lib/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/lib/Input/TextField/TextField.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.TextField = exports.isFilled = void 0;
+exports.isFilled = exports["default"] = exports.TextField = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -19,6 +17,12 @@ var _components = require("../../General/Icon/components");
 
 var _TextFieldStyle = require("./TextFieldStyle");
 
+var _excluded = ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon", "endIcon"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var isFilled = function isFilled(type, value) {
   if (value === undefined || value === null) return false;
   if (type === 'number') return !isNaN(parseInt(value));
@@ -53,7 +57,8 @@ var TextField = function TextField(_ref) {
       forwardedRef = _ref.forwardedRef,
       onChange = _ref.onChange,
       startIcon = _ref.startIcon,
-      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["value", "status", "onKeyDown", "disableTyping", "small", "type", "label", "disabled", "className", "removeFloatingLabel", "allowClear", "forwardedRef", "onChange", "startIcon"]);
+      endIcon = _ref.endIcon,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _React$useState = React.useState(false),
       floating = _React$useState[0],
@@ -92,7 +97,7 @@ var TextField = function TextField(_ref) {
   }, /*#__PURE__*/React.createElement(_TextFieldStyle.TextFieldInput, (0, _extends2["default"])({
     ref: forwardedRef,
     type: inputType,
-    placeholder: removeFloatingLabel && label,
+    placeholder: removeFloatingLabel ? label : undefined,
     status: status,
     disabled: disabled,
     onChange: onChange,
@@ -117,7 +122,7 @@ var TextField = function TextField(_ref) {
     onClick: handleShowPassword
   }, inputType === 'password' ? /*#__PURE__*/React.createElement(_components.EyeSlashedIcon, {
     "data-testid": "invisible-icon"
-  }) : /*#__PURE__*/React.createElement(_components.EyeIcon, null)));
+  }) : /*#__PURE__*/React.createElement(_components.EyeIcon, null)), endIcon && /*#__PURE__*/React.createElement(_TextFieldStyle.EndIconContainer, null, endIcon));
 };
 
 exports.TextField = TextField;

package/lib/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/lib/Input/TextField/TextField.stories.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.PasswordField = exports.TextFieldWithStartIcon = exports.Disabled = exports.TextFieldWithClearIcon = exports.Interactive = exports["default"] = void 0;
+exports["default"] = exports.TextFieldWithStartIcon = exports.TextFieldWithEndIcon = exports.TextFieldWithClearIcon = exports.PasswordField = exports.Interactive = exports.Disabled = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,6 +15,10 @@ var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
 
 var _SearchIcon = _interopRequireDefault(require("../../General/Icon/components/SearchIcon"));
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Input/TextField',
   component: _TextField.TextField,
@@ -66,6 +68,13 @@ TextFieldWithStartIcon.args = {
   type: 'text',
   startIcon: /*#__PURE__*/_react["default"].createElement(_SearchIcon["default"], null)
 };
+var TextFieldWithEndIcon = Template.bind({});
+exports.TextFieldWithEndIcon = TextFieldWithEndIcon;
+TextFieldWithEndIcon.args = {
+  label: 'Description',
+  type: 'text',
+  endIcon: /*#__PURE__*/_react["default"].createElement(_SearchIcon["default"], null)
+};
 var PasswordField = Template.bind({});
 exports.PasswordField = PasswordField;
 PasswordField.args = {

package/lib/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/lib/Input/TextField/TextFieldStyle.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.TextFieldInput = exports.TextFieldLabel = exports.TextFieldContainer = exports.StartIconContainer = exports.IconContainer = void 0;
+exports.TextFieldLabel = exports.TextFieldInput = exports.TextFieldContainer = exports.StartIconContainer = exports.IconContainer = exports.EndIconContainer = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -25,16 +25,23 @@ var StartIconContainer = _styledComponents["default"].div.withConfig({
 
 exports.StartIconContainer = StartIconContainer;
 
+var EndIconContainer = _styledComponents["default"].div.withConfig({
+  displayName: "TextFieldStyle__EndIconContainer",
+  componentId: "sc-5sd02x-2"
+})(["position:absolute;display:flex;right:16px;svg{fill:#666666;}"]);
+
+exports.EndIconContainer = EndIconContainer;
+
 var TextFieldContainer = _styledComponents["default"].div.withConfig({
   displayName: "TextFieldStyle__TextFieldContainer",
-  componentId: "sc-5sd02x-2"
+  componentId: "sc-5sd02x-3"
 })(["position:relative;display:flex;align-items:center;flex-grow:1;"]);
 
 exports.TextFieldContainer = TextFieldContainer;
 
 var TextFieldLabel = _styledComponents["default"].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';
@@ -66,7 +73,7 @@ exports.TextFieldLabel = TextFieldLabel;
 
 var TextFieldInput = _styledComponents["default"].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/lib/Input/Textarea/Textarea.js

@@ -17,6 +17,7 @@ var _isFunction = _interopRequireDefault(require("lodash/isFunction"));
 
 var _TextareaStyle = require("./TextareaStyle");
 
+var _excluded = ["label", "value", "status", "disabled", "className", "onBlur", "onChange", "forwardedRef", "removeFloatingLabel", "small"];
 var MIN_ROWS = 4;
 var MAX_ROWS = 12; // Rows are required to set the textarea height depending on the content added.
 
@@ -44,7 +45,7 @@ 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["label", "value", "status", "disabled", "className", "onBlur", "onChange", "forwardedRef", "removeFloatingLabel", "small"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _React$useState = _react["default"].useState(false),
       floating = _React$useState[0],
@@ -95,7 +96,7 @@ var Textarea = function Textarea(_ref) {
     className: (0, _classnames["default"])('aries-textarea', className)
   }, /*#__PURE__*/_react["default"].createElement(_TextareaStyle.TextareaInput, (0, _extends2["default"])({
     ref: textareaInputRef,
-    placeholder: removeFloatingLabel && label,
+    placeholder: removeFloatingLabel ? label : undefined,
     rows: rows,
     status: status,
     disabled: disabled,

package/lib/Input/Textarea/Textarea.stories.js

@@ -1,9 +1,7 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
-exports.removeFloatingLabelIsTrue = exports.Interactive = exports["default"] = void 0;
+exports.removeFloatingLabelIsTrue = exports["default"] = exports.Interactive = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -11,6 +9,10 @@ var _Textarea = require("./Textarea");
 
 var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Input/Textarea',
   component: _Textarea.Textarea,

package/lib/Input/Textarea/TextareaStyle.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.TextareaInput = exports.TextareaLabel = exports.TextareaContainer = void 0;
+exports.TextareaLabel = exports.TextareaInput = exports.TextareaContainer = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/lib/Input/ToggleSwitch/Styles.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Toggle = exports.ToggleBall = void 0;
+exports.ToggleBall = exports.Toggle = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -18,7 +18,7 @@ var DEFAULTS = {
 
 var Toggle = _styledComponents["default"].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;
@@ -28,7 +28,7 @@ exports.Toggle = Toggle;
 
 var ToggleBall = _styledComponents["default"].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/lib/Input/ToggleSwitch/ToggleSwitch.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -19,6 +17,12 @@ var _Colors = require("../../Utils/Colors");
 
 var _Styles = require("./Styles");
 
+var _excluded = ["active", "defaultActive", "iconOptions", "onChange", "className"];
+
+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; }
+
 /** The className and ...defaultProps are passed to the main toggle container. */
 var ToggleSwitch = function ToggleSwitch(_ref) {
   var active = _ref.active,
@@ -27,7 +31,7 @@ var ToggleSwitch = function ToggleSwitch(_ref) {
       iconOptions = _ref.iconOptions,
       onChange = _ref.onChange,
       className = _ref.className,
-      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["active", "defaultActive", "iconOptions", "onChange", "className"]);
+      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _React$useState = React.useState(active || defaultActive),
       innerActive = _React$useState[0],

package/lib/Input/ToggleSwitch/ToggleSwitch.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.ToggleSwitchInAnActiveState = exports.ToggleSwitchWithIcons = exports.Interactive = exports["default"] = void 0;
+exports["default"] = exports.ToggleSwitchWithIcons = exports.ToggleSwitchInAnActiveState = exports.Interactive = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 

package/lib/Layout/Box/Box.stories.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.ResponsiveSpacing = exports.Interactive = exports["default"] = void 0;
+exports["default"] = exports.ResponsiveSpacing = exports.Interactive = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,6 +15,10 @@ var S = _interopRequireWildcard(require("./BoxStoryStyle"));
 
 var _constants = require("./constants");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var _default = {
   title: 'Layout/Box',
   component: _index.Box,

package/lib/Layout/Box/BoxStoryStyle.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Box = exports.Content = exports.GreyBackground = void 0;
+exports.GreyBackground = exports.Content = exports.Box = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 

package/lib/Layout/Box/constants.js

@@ -11,9 +11,9 @@ var _Shadow = require("../../Utils/Shadow");
 
 var _Spacing = require("../../Layout/Spacing");
 
-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) { (0, _defineProperty2["default"])(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) { (0, _defineProperty2["default"])(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; }
 
 var allSpacingProps = ['p', 'pl', 'pr', 'pt', 'pb', 'px', 'py', 'm', 'ml', 'mr', 'mt', 'mb', 'mx', 'my'];
 

package/lib/Layout/Box/index.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Box = exports.StyledBox = void 0;
+exports.StyledBox = exports.Box = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,6 +15,10 @@ var _styledSystem = require("styled-system");
 
 var _StyleConfig = require("../../Utils/StyleConfig");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var theme = {
   breakpoints: {
     mobileS: _StyleConfig.ScreenSize.mobileS + "px",
@@ -38,7 +40,7 @@ var theme = {
 
 var StyledBox = _styledComponents["default"].div.withConfig({
   displayName: "Box__StyledBox",
-  componentId: "pr7b7l-0"
+  componentId: "sc-pr7b7l-0"
 })(["", " ", ""], _styledSystem.space, _styledSystem.shadow);
 
 exports.StyledBox = StyledBox;

package/lib/Layout/Flex/Flex.stories.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Interactive = exports["default"] = void 0;
+exports["default"] = exports.Interactive = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -19,9 +17,13 @@ var S = _interopRequireWildcard(require("./FlexStoryStyle"));
 
 var _constants = require("../Box/constants");
 
-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 _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 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) { (0, _defineProperty2["default"])(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) { (0, _defineProperty2["default"])(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; }
 
 var _default = {
   title: 'Layout/Flex',

package/lib/Layout/Flex/FlexStoryStyle.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Flex = exports.Item = void 0;
+exports.Item = exports.Flex = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -11,12 +11,12 @@ var _Flex = require("../../../src/Layout/Flex");
 
 var Item = _styledComponents["default"].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;"]);
 
 exports.Item = Item;
 var Flex = (0, _styledComponents["default"])(_Flex.Flex).withConfig({
   displayName: "FlexStoryStyle__Flex",
-  componentId: "jlb02q-1"
+  componentId: "sc-jlb02q-1"
 })(["width:500px;height:150px;padding:16px;background-color:#4caf50;"]);
 exports.Flex = Flex;

package/lib/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/lib/Layout/Flex/index.js

@@ -1,11 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.Flex = exports.StyledFlex = void 0;
+exports.StyledFlex = exports.Flex = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,6 +15,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Box = require("../Box");
 
+var _excluded = ["flexDirection", "justifyContent", "alignItems", "flexWrap"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var StyledFlex = (0, _styledComponents["default"])(_Box.Box).withConfig({
   displayName: "Flex__StyledFlex",
   componentId: "sc-11ryoct-0"
@@ -44,7 +48,7 @@ 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 = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, ["flexDirection", "justifyContent", "alignItems", "flexWrap"]);
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref5, _excluded);
   return /*#__PURE__*/React.createElement(StyledFlex, (0, _extends2["default"])({
     flexDirection: flexDirection,
     justifyContent: justifyContent,

package/lib/Layout/GlintsContainer/GlintsContainer.js

@@ -1,14 +1,16 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 exports.__esModule = true;
-exports["default"] = exports.GlintsContainer = exports.PageContainer = exports.BaseContainer = void 0;
+exports["default"] = exports.PageContainer = exports.GlintsContainer = exports.BaseContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _StyleConfig = require("../../Utils/StyleConfig");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var BaseStyles = (0, _styledComponents.css)(["font-family:Poppins,sans-serif;*,*:before,*:after{box-sizing:border-box;}"]);
 var PageStyles = (0, _styledComponents.css)(["position:relative;@media ", "{width:100%;margin:0 12px;}@media ", "{width:720px;margin:0 16px;}@media ", "{width:960px;margin:0 auto;}@media ", "{width:1140px;}@media ", "{width:1260px;}"], "(max-width: " + (_StyleConfig.ScreenSize.tablet - 1) + "px)", _StyleConfig.Device.tablet, _StyleConfig.Device.desktopS, _StyleConfig.Device.desktopM, _StyleConfig.Device.desktopL);
 

package/lib/Layout/Grid/Col.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -15,6 +13,12 @@ var React = _interopRequireWildcard(require("react"));
 
 var _GridStyle = require("./GridStyle");
 
+var _excluded = ["xs", "sm", "md", "xsOrder", "smOrder", "mdOrder", "children"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Col = function Col(_ref) {
   var xs = _ref.xs,
       sm = _ref.sm,
@@ -23,7 +27,7 @@ var Col = function Col(_ref) {
       smOrder = _ref.smOrder,
       mdOrder = _ref.mdOrder,
       children = _ref.children,
-      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["xs", "sm", "md", "xsOrder", "smOrder", "mdOrder", "children"]);
+      defaultProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return /*#__PURE__*/React.createElement(_GridStyle.ColumnContainer
   /** Set number of columns you wish to span for extra small devices like phone (<=640px) */
   , (0, _extends2["default"])({