@pedidopago/ui 1.0.9 → 1.1.3

package/dist/components/IconItem/styles.d.ts

@@ -1,19 +1,19 @@
-/// <reference types="react" />
-import { StyledItemIcon, StyledSkeletonItemIcon } from './types';
-export declare const IconItemSkeleton: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & StyledSkeletonItemIcon, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconItemContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconItemIcon: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & StyledItemIcon, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const IconItemTexts: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { StyledItemIcon, StyledSkeletonItemIcon } from './types';
+export declare const IconItemSkeleton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledSkeletonItemIcon, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconItemContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconItemIcon: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & StyledItemIcon, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconItemTexts: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/IconItem/types.d.ts

@@ -1,23 +1,23 @@
-import { ExtendThemeProps, GlobalColorsProps } from 'src';
-import { IconName } from '../Icon/types';
-export declare type IconItemProps = {
-    icon: IconName;
-    title?: string;
-    description?: string;
-    size?: 'sm' | 'md' | 'lg';
-    color?: GlobalColorsProps | (string & {});
-    isLoading?: boolean;
-};
-export declare type StyledItemIcon = {
-    boxSize?: 'sm' | 'md' | 'lg';
-    colorText?: GlobalColorsProps | (string & {});
-    haveText?: boolean;
-    theme?: ExtendThemeProps;
-};
-export declare type StyledSkeletonItemIcon = {
-    circle?: boolean;
-    theme?: ExtendThemeProps;
-    haveText?: boolean;
-    description?: boolean;
-};
+import { ExtendThemeProps, GlobalColorsProps } from 'src';
+import { IconName } from '../Icon/types';
+export declare type IconItemProps = {
+    icon: IconName;
+    title?: string;
+    description?: string;
+    size?: 'sm' | 'md' | 'lg';
+    color?: GlobalColorsProps | (string & {});
+    isLoading?: boolean;
+};
+export declare type StyledItemIcon = {
+    boxSize?: 'sm' | 'md' | 'lg';
+    colorText?: GlobalColorsProps | (string & {});
+    haveText?: boolean;
+    theme?: ExtendThemeProps;
+};
+export declare type StyledSkeletonItemIcon = {
+    circle?: boolean;
+    theme?: ExtendThemeProps;
+    haveText?: boolean;
+    description?: boolean;
+};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/ImageItem/imageFake.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-export declare const ImageFake: JSX.Element;
+/// <reference types="react" />
+export declare const ImageFake: JSX.Element;
 //# sourceMappingURL=imageFake.d.ts.map

package/dist/components/ImageItem/imageFake.js

@@ -4,20 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ImageFake = void 0;
-var ImageFake = /*#__PURE__*/React.createElement("div", {
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var ImageFake = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   style: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     position: 'absolute',
     inset: 0
-  }
-}, /*#__PURE__*/React.createElement("img", {
-  style: {
-    width: '100%',
-    height: '100%'
   },
-  src: "/img.png",
-  alt: "sdsadas"
-}));
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    style: {
+      width: '100%',
+      height: '100%'
+    },
+    src: "/img.png",
+    alt: "sdsadas"
+  })
+});
 exports.ImageFake = ImageFake;

package/dist/components/ImageItem/index.d.ts

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import { IInputProps } from './types';
-declare const ImageItem: FC<IInputProps>;
-export default ImageItem;
+import { FC } from 'react';
+import { IInputProps } from './types';
+declare const ImageItem: FC<IInputProps>;
+export default ImageItem;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/ImageItem/index.js

@@ -9,9 +9,15 @@ var _imageFake = require("./imageFake");
 
 var _styles = require("./styles");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["title", "subtitle", "size", "styles", "color", "disabled", "children", "imageSide"];
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 = 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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -31,32 +37,38 @@ var ImageItem = function ImageItem(_ref) {
       imageSide = _ref$imageSide === void 0 ? 'left' : _ref$imageSide,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(_styles.ImageItemWrapper, _extends({}, rest, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ImageItemWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     color: color,
     tabIndex: 0,
     disabled: disabled,
-    style: styles && styles.imageItemStyle
-  }), imageSide === 'left' && /*#__PURE__*/React.createElement(_styles.ImageWrapper, {
-    size: size,
-    "data-testid": "ImageItem-ImageWrapper",
-    id: "ImageItem-ImageWrapper",
-    style: styles && styles.imageStyle
-  }, children || _imageFake.ImageFake), /*#__PURE__*/React.createElement(_styles.DescriptionWrapper, {
-    size: size,
-    imageSide: imageSide,
-    "data-testid": "ImageItem-DescriptionWrapper"
-  }, /*#__PURE__*/React.createElement(_styles.Title, {
-    style: styles && styles.titleStyle,
-    id: "ImageItem-Title"
-  }, title || 'Default Title'), /*#__PURE__*/React.createElement(_styles.Subtitle, {
-    style: styles && styles.subtitleStyle,
-    id: "ImageItem-Subtitle"
-  }, subtitle || 'Default Subtitle')), imageSide === 'right' && /*#__PURE__*/React.createElement(_styles.ImageWrapper, {
-    size: size,
-    "data-testid": "ImageItem-ImageWrapper",
-    id: "ImageItem-ImageWrapper",
-    style: styles && styles.imageStyle
-  }, children || _imageFake.ImageFake));
+    style: styles && styles.imageItemStyle,
+    children: [imageSide === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageWrapper, {
+      size: size,
+      "data-testid": "ImageItem-ImageWrapper",
+      id: "ImageItem-ImageWrapper",
+      style: styles && styles.imageStyle,
+      children: children || _imageFake.ImageFake
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.DescriptionWrapper, {
+      size: size,
+      imageSide: imageSide,
+      "data-testid": "ImageItem-DescriptionWrapper",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Title, {
+        style: styles && styles.titleStyle,
+        id: "ImageItem-Title",
+        children: title || 'Default Title'
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Subtitle, {
+        style: styles && styles.subtitleStyle,
+        id: "ImageItem-Subtitle",
+        children: subtitle || 'Default Subtitle'
+      })]
+    }), imageSide === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ImageWrapper, {
+      size: size,
+      "data-testid": "ImageItem-ImageWrapper",
+      id: "ImageItem-ImageWrapper",
+      style: styles && styles.imageStyle,
+      children: children || _imageFake.ImageFake
+    })]
+  }));
 };
 
 var _default = ImageItem;

package/dist/components/ImageItem/input.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=input.test.d.ts.map

package/dist/components/ImageItem/input.test.js

@@ -6,6 +6,8 @@ require("@testing-library/jest-dom/extend-expect");
 
 var _ = _interopRequireDefault(require("."));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
@@ -18,7 +20,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var imageMock = /*#__PURE__*/React.createElement("div", {
+var imageMock = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
   style: {
     display: 'flex',
     alignItems: 'center',
@@ -28,14 +30,15 @@ var imageMock = /*#__PURE__*/React.createElement("div", {
     left: 0,
     right: 0,
     bottom: 0
-  }
-}, /*#__PURE__*/React.createElement("img", {
-  src: "/img.png",
-  alt: "sdsadas"
-}));
+  },
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+    src: "/img.png",
+    alt: "sdsadas"
+  })
+});
 
 var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, props));
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({}, props)));
   var ImageWrapper = utils.getByTestId('ImageItem-ImageWrapper');
   var DescriptionWrapper = utils.getByTestId('ImageItem-DescriptionWrapper');
   return _objectSpread({

package/dist/components/ImageItem/styles.d.ts

@@ -1,27 +1,27 @@
-/// <reference types="react" />
-import { IStyleProps } from './types';
-export declare const ImageItemWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Title: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Subtitle: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Description: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+/// <reference types="react" />
+import { IStyleProps } from './types';
+export declare const ImageItemWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DescriptionWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Title: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Subtitle: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & IStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/dist/components/ImageItem/types.d.ts

@@ -1,26 +1,26 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Theme } from '@emotion/react';
-export declare type IStyleProps = {
-    theme?: Theme;
-    imageSide?: 'left' | 'right';
-    disabled?: boolean;
-    color?: string;
-    size?: 'normal' | 'large';
-};
-export declare type ImageItemStyles = {
-    imageItemStyle?: CSSProperties;
-    imageStyle?: CSSProperties;
-    titleStyle?: CSSProperties;
-    subtitleStyle?: CSSProperties;
-};
-export interface IInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
-    title?: string;
-    subtitle?: string;
-    size?: 'normal' | 'large';
-    imageSide?: 'left' | 'right';
-    styles?: ImageItemStyles;
-    color?: string;
-    disabled?: boolean;
-    children?: ReactNode;
-}
+import React, { CSSProperties, ReactNode } from 'react';
+import { Theme } from '@emotion/react';
+export declare type IStyleProps = {
+    theme?: Theme;
+    imageSide?: 'left' | 'right';
+    disabled?: boolean;
+    color?: string;
+    size?: 'normal' | 'large';
+};
+export declare type ImageItemStyles = {
+    imageItemStyle?: CSSProperties;
+    imageStyle?: CSSProperties;
+    titleStyle?: CSSProperties;
+    subtitleStyle?: CSSProperties;
+};
+export interface IInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style'> {
+    title?: string;
+    subtitle?: string;
+    size?: 'normal' | 'large';
+    imageSide?: 'left' | 'right';
+    styles?: ImageItemStyles;
+    color?: string;
+    disabled?: boolean;
+    children?: ReactNode;
+}
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Input/index.d.ts

@@ -1,5 +1,5 @@
-import { InputHTMLAttributes, FC } from 'react';
-import { IInputGroupProps } from './types';
-declare const Input: FC<InputHTMLAttributes<HTMLInputElement> & IInputGroupProps>;
-export default Input;
+import { InputHTMLAttributes, FC } from 'react';
+import { IInputGroupProps } from './types';
+declare const Input: FC<InputHTMLAttributes<HTMLInputElement> & IInputGroupProps>;
+export default Input;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Input/index.js

@@ -13,11 +13,17 @@ var _Skeleton = _interopRequireDefault(require("../Skeleton"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var _excluded = ["placeholder", "type", "disabled", "isLoading", "label", "labelBackground", "withIcon", "hiddenContent", "helperText", "alert", "withAddon", "addonContent"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 = 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; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -68,49 +74,70 @@ var Input = function Input(_ref) {
     setHiddenInfo(!hiddenInfo);
   }
 
-  return /*#__PURE__*/React.createElement(_styles.InputGroupElement, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputGroupElement, {
     hasValueOnInput: Icon || placeholder || rest.value ? true : hasValueOnInput,
     alert: alert,
     withAddon: withAddon,
     hasDisabled: disabled,
-    labelBackground: labelBackground
-  }, isLoading ? /*#__PURE__*/React.createElement(_Skeleton.default, {
-    variant: "rectangle",
-    height: 50,
-    animation: "wave"
-  }) : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_styles.InputColumn, null, withAddon && /*#__PURE__*/React.createElement(_styles.AddonElement, {
-    alert: alert,
-    hasDisabled: disabled
-  }, /*#__PURE__*/React.createElement(_styles.AddonContent, null, addonContent)), /*#__PURE__*/React.createElement(_styles.InputContent, {
-    withAddon: withAddon
-  }, /*#__PURE__*/React.createElement(_styles.InputLabel, {
-    hasDisabled: disabled
-  }, label), /*#__PURE__*/React.createElement(_styles.InputContentRow, null, Icon && /*#__PURE__*/React.createElement(_styles.InputIcon, null, Icon), /*#__PURE__*/React.createElement(_styles.Input, _extends({
-    type: hiddenInfo ? 'password' : type,
-    "aria-label": label,
-    withIcon: Icon,
-    hiddenContent: hiddenContent,
-    disabled: disabled,
-    alert: alert,
-    onChange: function onChange(e) {
-      return handleInputChange(e.target.value);
-    },
-    placeholder: placeholder
-  }, rest)), hiddenContent && /*#__PURE__*/React.createElement(_styles.InputIcon, {
-    clickable: true,
-    onClick: handleHiddenChange
-  }, hiddenInfo ? /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "eye"
-  }) : /*#__PURE__*/React.createElement(_Icon.default, {
-    name: "eye-off"
-  })), /*#__PURE__*/React.createElement(_styles.Fieldset, {
-    "aria-hidden": true,
-    hasDisabled: disabled,
-    withAddon: withAddon,
-    alert: alert
-  }, /*#__PURE__*/React.createElement(_styles.Legend, null, /*#__PURE__*/React.createElement(_styles.LegendText, null, label)))))), helperText && /*#__PURE__*/React.createElement(_styles.HelperText, {
-    alert: alert
-  }, helperText)));
+    labelBackground: labelBackground,
+    children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      variant: "rectangle",
+      height: 50,
+      animation: "wave"
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputColumn, {
+        children: [withAddon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonElement, {
+          alert: alert,
+          hasDisabled: disabled,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonContent, {
+            children: addonContent
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContent, {
+          withAddon: withAddon,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputLabel, {
+            hasDisabled: disabled,
+            children: label
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
+            children: [Icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
+              children: Icon
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread({
+              type: hiddenInfo ? 'password' : type,
+              "aria-label": label,
+              withIcon: Icon,
+              hiddenContent: hiddenContent,
+              disabled: disabled,
+              alert: alert,
+              onChange: function onChange(e) {
+                return handleInputChange(e.target.value);
+              },
+              placeholder: placeholder
+            }, rest)), hiddenContent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
+              clickable: true,
+              onClick: handleHiddenChange,
+              children: hiddenInfo ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                name: "eye"
+              }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                name: "eye-off"
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Fieldset, {
+              "aria-hidden": true,
+              hasDisabled: disabled,
+              withAddon: withAddon,
+              alert: alert,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Legend, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.LegendText, {
+                  children: label
+                })
+              })
+            })]
+          })]
+        })]
+      }), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
+        alert: alert,
+        children: helperText
+      })]
+    })
+  });
 };
 
 var _default = Input;

package/dist/components/Input/input.test.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 //# sourceMappingURL=input.test.d.ts.map

package/dist/components/Input/input.test.js

@@ -10,6 +10,8 @@ var _ = _interopRequireDefault(require("."));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -18,10 +20,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/React.createElement(_.default, _extends({
+  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({
     "data-testid": "input-component"
   }, props)));
   var input = utils.getByLabelText(props.label);
@@ -58,7 +58,7 @@ describe('Input', function () {
 
     var _setup3 = setup({
       label: 'E-mail',
-      withIcon: /*#__PURE__*/React.createElement(_Icon.default, {
+      withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "search",
         color: "neutral.neutral4"
       })