@pedidopago/ui 1.7.25 → 1.8.0

package/dist/components/Input/index.js

@@ -1,163 +1 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _Button = _interopRequireDefault(require("../Button"));
-var _styles = require("./styles");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["placeholder", "type", "disabled", "label", "labelBackground", "hiddenContent", "helperText", "alert", "withAddon", "addonContent", "withIcon", "onLeftIconClick", "onRightIconClick", "leftIcon", "rightIcon"];
-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; }
-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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var placeholder = _ref.placeholder,
-    type = _ref.type,
-    disabled = _ref.disabled,
-    label = _ref.label,
-    labelBackground = _ref.labelBackground,
-    hiddenContent = _ref.hiddenContent,
-    helperText = _ref.helperText,
-    alert = _ref.alert,
-    withAddon = _ref.withAddon,
-    addonContent = _ref.addonContent,
-    withIcon = _ref.withIcon,
-    onLeftIconClick = _ref.onLeftIconClick,
-    onRightIconClick = _ref.onRightIconClick,
-    leftIcon = _ref.leftIcon,
-    rightIcon = _ref.rightIcon,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    hasValueOnInput = _useState2[0],
-    setHasValueOnInput = _useState2[1];
-  var _useState3 = (0, _react.useState)(hiddenContent || false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hiddenInfo = _useState4[0],
-    setHiddenInfo = _useState4[1];
-  function handleInputChange(value) {
-    setHasValueOnInput(value.length > 0);
-  }
-  function handleHiddenChange() {
-    setHiddenInfo(!hiddenInfo);
-  }
-  var inputRef = (0, _react.useRef)(null);
-  (0, _react.useImperativeHandle)(ref, function () {
-    return inputRef.current;
-  });
-  (0, _react.useEffect)(function () {
-    var _inputRef$current;
-    setHasValueOnInput(!!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value));
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputGroupElement, {
-    withIcon: !!withIcon,
-    hasValueOnInput: placeholder || rest.value ? true : hasValueOnInput,
-    alert: alert,
-    withAddon: withAddon,
-    hasDisabled: disabled,
-    labelBackground: labelBackground,
-    className: rest.className,
-    style: rest.style,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputColumn, {
-      children: [withAddon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.AddonElement, {
-        alert: alert,
-        hasDisabled: disabled,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-          fontSize: "xs",
-          children: addonContent
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContent, {
-        withAddon: withAddon,
-        children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputLabel, {
-          withIcon: !!withIcon,
-          hasDisabled: disabled,
-          children: label
-        }), /*#__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
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputContentRow, {
-          children: [(withIcon || leftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-              type: "button",
-              variant: "ghost",
-              style: {
-                padding: 0,
-                cursor: onLeftIconClick ? 'pointer' : 'default'
-              },
-              onClick: onLeftIconClick,
-              tabIndex: onLeftIconClick ? 0 : -1,
-              children: withIcon || leftIcon
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Input, _objectSpread(_objectSpread({
-            "data-input": "input",
-            type: hiddenInfo ? 'password' : type,
-            "aria-label": label,
-            withIcon: withIcon,
-            leftIcon: leftIcon,
-            rightIcon: rightIcon,
-            hiddenContent: hiddenContent,
-            disabled: disabled,
-            alert: alert,
-            placeholder: placeholder,
-            ref: inputRef
-          }, rest), {}, {
-            onChange: function onChange(e) {
-              var _rest$onChange;
-              handleInputChange(e.currentTarget.value);
-              (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 ? void 0 : _rest$onChange.call(rest, e);
-            }
-          })), 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"
-            })
-          }), rightIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputIcon, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-              type: "button",
-              variant: "ghost",
-              style: {
-                padding: 0,
-                cursor: onRightIconClick ? 'pointer' : 'default'
-              },
-              onClick: onRightIconClick,
-              tabIndex: onRightIconClick ? 0 : -1,
-              children: rightIcon
-            })
-          })]
-        })]
-      })]
-    }), helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.HelperText, {
-      alert: alert,
-      children: helperText
-    })]
-  });
-});
-Input.displayName = 'Input';
-var _default = Input;
-exports.default = _default;
+"use strict";function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(obj)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=require("react"),_Button=_interopRequireDefault(require("../Button")),_styles=require("./styles"),_Typography=_interopRequireDefault(require("../Typography")),_Icon=_interopRequireDefault(require("../Icon")),_jsxRuntime=require("react/jsx-runtime"),_excluded=["placeholder","type","disabled","label","labelBackground","hiddenContent","helperText","alert","withAddon","addonContent","withIcon","onLeftIconClick","onRightIconClick","leftIcon","rightIcon"];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}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)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){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}function _slicedToArray(arr,i){return _arrayWithHoles(arr)||_iterableToArrayLimit(arr,i)||_unsupportedIterableToArray(arr,i)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _iterableToArrayLimit(arr,i){var _i=null==arr?null:"undefined"!=typeof Symbol&&arr[Symbol.iterator]||arr["@@iterator"];if(null!=_i){var _s,_e,_x,_r,_arr=[],_n=!0,_d=!1;try{if(_x=(_i=_i.call(arr)).next,0===i){if(Object(_i)!==_i)return;_n=!1}else for(;!(_n=(_s=_x.call(_i)).done)&&(_arr.push(_s.value),_arr.length!==i);_n=!0);}catch(err){_d=!0,_e=err}finally{try{if(!_n&&null!=_i.return&&(_r=_i.return(),Object(_r)!==_r))return}finally{if(_d)throw _e}}return _arr}}function _arrayWithHoles(arr){if(Array.isArray(arr))return arr}function _objectWithoutProperties(source,excluded){if(null==source)return{};var key,i,target=_objectWithoutPropertiesLoose(source,excluded);if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],0<=excluded.indexOf(key)||Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key])}return target}function _objectWithoutPropertiesLoose(source,excluded){if(null==source)return{};var key,i,target={},sourceKeys=Object.keys(source);for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],0<=excluded.indexOf(key)||(target[key]=source[key]);return target}var Input=/*#__PURE__*/(0,_react.forwardRef)(function(_ref,ref){function handleInputChange(value){setHasValueOnInput(0<value.length)}var placeholder=_ref.placeholder,type=_ref.type,disabled=_ref.disabled,label=_ref.label,labelBackground=_ref.labelBackground,hiddenContent=_ref.hiddenContent,helperText=_ref.helperText,alert=_ref.alert,withAddon=_ref.withAddon,addonContent=_ref.addonContent,withIcon=_ref.withIcon,onLeftIconClick=_ref.onLeftIconClick,onRightIconClick=_ref.onRightIconClick,leftIcon=_ref.leftIcon,rightIcon=_ref.rightIcon,rest=_objectWithoutProperties(_ref,_excluded),_useState=(0,_react.useState)(!1),_useState2=_slicedToArray(_useState,2),hasValueOnInput=_useState2[0],setHasValueOnInput=_useState2[1],_useState3=(0,_react.useState)(hiddenContent||!1),_useState4=_slicedToArray(_useState3,2),hiddenInfo=_useState4[0],setHiddenInfo=_useState4[1],inputRef=(0,_react.useRef)(null);return(0,_react.useImperativeHandle)(ref,function(){return inputRef.current}),(0,_react.useEffect)(function(){var _inputRef$current;setHasValueOnInput(!!(null!==(_inputRef$current=inputRef.current)&&void 0!==_inputRef$current&&_inputRef$current.value))}),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.InputGroupElement,{withIcon:!!withIcon,hasValueOnInput:!!(placeholder||rest.value)||hasValueOnInput,alert:alert,withAddon:withAddon,hasDisabled:disabled,labelBackground:labelBackground,className:rest.className,style:rest.style,children:[/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.InputColumn,{children:[withAddon&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.AddonElement,{alert:alert,hasDisabled:disabled,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Typography.default,{fontSize:"xs",children:addonContent})}),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.InputContent,{withAddon:withAddon,children:[label&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.InputLabel,{withIcon:!!withIcon,hasDisabled:disabled,children:label}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.Fieldset,{"aria-hidden":!0,hasDisabled:disabled,withAddon:withAddon,alert:alert,children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.Legend,{children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.LegendText,{children:label})})}),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.InputContentRow,{children:[(withIcon||leftIcon)&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.InputIcon,{children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Button.default,{type:"button",variant:"ghost",style:{padding:0,cursor:onLeftIconClick?"pointer":"default"},onClick:onLeftIconClick,tabIndex:onLeftIconClick?0:-1,children:withIcon||leftIcon})}),/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.Input,_objectSpread(_objectSpread({"data-input":"input",type:hiddenInfo?"password":type,"aria-label":label,withIcon:withIcon,leftIcon:leftIcon,rightIcon:rightIcon,hiddenContent:hiddenContent,disabled:disabled,alert:alert,placeholder:placeholder,ref:inputRef},rest),{},{onChange:function onChange(e){var _rest$onChange;handleInputChange(e.currentTarget.value),null===(_rest$onChange=rest.onChange)||void 0===_rest$onChange?void 0:_rest$onChange.call(rest,e)}})),hiddenContent&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.InputIcon,{clickable:!0,onClick:function(){setHiddenInfo(!hiddenInfo)},children:hiddenInfo?/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"eye"}):/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"eye-off"})}),rightIcon&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.InputIcon,{children:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Button.default,{type:"button",variant:"ghost",style:{padding:0,cursor:onRightIconClick?"pointer":"default"},onClick:onRightIconClick,tabIndex:onRightIconClick?0:-1,children:rightIcon})})]})]})]}),helperText&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_styles.HelperText,{alert:alert,children:helperText})]})});Input.displayName="Input";var _default=Input;exports.default=_default;

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

@@ -1,120 +1 @@
-"use strict";
-
-var _testUtils = require("../../shared/tests/test-utils");
-var _react = require("@testing-library/react");
-require("@testing-library/jest-dom/extend-expect");
-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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(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; }
-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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-var setup = function setup(props) {
-  var utils = (0, _testUtils.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, _objectSpread({
-    "data-testid": "input-component"
-  }, props)));
-  var input = utils.getByLabelText(props.label);
-  return _objectSpread({
-    input: input
-  }, utils);
-};
-describe('Input', function () {
-  it('should render the input', function () {
-    var _setup = setup({
-        label: 'E-mail'
-      }),
-      input = _setup.input;
-    expect(input.getAttribute('aria-label')).toEqual('E-mail');
-  });
-  it('should render the input and receives a value', function () {
-    var _setup2 = setup({
-        label: 'E-mail'
-      }),
-      input = _setup2.input;
-    _react.fireEvent.change(input, {
-      target: {
-        value: 'teste@teste.com'
-      }
-    });
-    expect(input.value).toEqual('teste@teste.com');
-  });
-  it('should render the input with an icon', function () {
-    var _input$parentElement;
-    var _setup3 = setup({
-        label: 'E-mail',
-        withIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          name: "search",
-          color: "neutral.neutral4"
-        })
-      }),
-      input = _setup3.input;
-    expect((_input$parentElement = input.parentElement) === null || _input$parentElement === void 0 ? void 0 : _input$parentElement.querySelectorAll('svg').length).not.toBe(0);
-  });
-  it('should render input with placeholder', function () {
-    var _setup4 = setup({
-        label: 'E-mail',
-        placeholder: 'Digite seu e-mail'
-      }),
-      input = _setup4.input;
-    expect(input.getAttribute('placeholder')).toEqual('Digite seu e-mail');
-  });
-  it('should render the input with an addon', function () {
-    var _input$parentElement2, _input$parentElement3, _input$parentElement4, _input$parentElement5;
-    var _setup5 = setup({
-        label: 'E-mail',
-        withAddon: true,
-        addonContent: 'R$'
-      }),
-      input = _setup5.input;
-    expect((_input$parentElement2 = input.parentElement) === null || _input$parentElement2 === void 0 ? void 0 : (_input$parentElement3 = _input$parentElement2.parentElement) === null || _input$parentElement3 === void 0 ? void 0 : (_input$parentElement4 = _input$parentElement3.parentElement) === null || _input$parentElement4 === void 0 ? void 0 : (_input$parentElement5 = _input$parentElement4.querySelectorAll('div')[0].firstChild) === null || _input$parentElement5 === void 0 ? void 0 : _input$parentElement5.textContent).toBe('R$');
-  });
-  it('should render the input and hide your value', function () {
-    var _setup6 = setup({
-        label: 'Senha',
-        hiddenContent: true
-      }),
-      input = _setup6.input;
-    expect(input.getAttribute('type')).toEqual('password');
-  });
-  it('should focus the input', function () {
-    var focusCallback = jest.fn();
-    var _setup7 = setup({
-        label: 'E-mail',
-        onFocus: function onFocus() {
-          return focusCallback();
-        }
-      }),
-      input = _setup7.input;
-    input.focus();
-    expect(focusCallback).toHaveBeenCalled();
-  });
-  it('should focus the input with addon', function () {
-    var focusCallback = jest.fn();
-    var _setup8 = setup({
-        label: 'E-mail',
-        withAddon: true,
-        onFocus: function onFocus() {
-          return focusCallback();
-        }
-      }),
-      input = _setup8.input;
-    input.focus();
-    expect(focusCallback).toHaveBeenCalled();
-  });
-  it('should hover the input', function () {
-    var hoverCallback = jest.fn();
-    var _setup9 = setup({
-        label: 'E-mail',
-        onMouseMove: function onMouseMove() {
-          return hoverCallback();
-        }
-      }),
-      input = _setup9.input;
-    _react.fireEvent.mouseMove(input);
-    expect(hoverCallback).toHaveBeenCalled();
-  });
-});
+"use strict";var _testUtils=require("../../shared/tests/test-utils"),_react=require("@testing-library/react");require("@testing-library/jest-dom/extend-expect");var _=_interopRequireDefault(require(".")),_Icon=_interopRequireDefault(require("../Icon")),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _typeof(obj){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj},_typeof(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}function _objectSpread(target){for(var source,i=1;i<arguments.length;i++)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){return key=_toPropertyKey(key),key in obj?Object.defineProperty(obj,key,{value:value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function _toPropertyKey(arg){var key=_toPrimitive(arg,"string");return"symbol"===_typeof(key)?key:key+""}function _toPrimitive(input,hint){if("object"!==_typeof(input)||null===input)return input;var prim=input[Symbol.toPrimitive];if(prim!==void 0){var res=prim.call(input,hint||"default");if("object"!==_typeof(res))return res;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===hint?String:Number)(input)}var setup=function(props){var utils=(0,_testUtils.render)(/*#__PURE__*/(0,_jsxRuntime.jsx)(_.default,_objectSpread({"data-testid":"input-component"},props))),input=utils.getByLabelText(props.label);return _objectSpread({input:input},utils)};describe("Input",function(){it("should render the input",function(){var _setup=setup({label:"E-mail"}),input=_setup.input;expect(input.getAttribute("aria-label")).toEqual("E-mail")}),it("should render the input and receives a value",function(){var _setup2=setup({label:"E-mail"}),input=_setup2.input;_react.fireEvent.change(input,{target:{value:"teste@teste.com"}}),expect(input.value).toEqual("teste@teste.com")}),it("should render the input with an icon",function(){var _input$parentElement,_setup3=setup({label:"E-mail",withIcon:/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:"search",color:"neutral.neutral4"})}),input=_setup3.input;expect(null===(_input$parentElement=input.parentElement)||void 0===_input$parentElement?void 0:_input$parentElement.querySelectorAll("svg").length).not.toBe(0)}),it("should render input with placeholder",function(){var _setup4=setup({label:"E-mail",placeholder:"Digite seu e-mail"}),input=_setup4.input;expect(input.getAttribute("placeholder")).toEqual("Digite seu e-mail")}),it("should render the input with an addon",function(){var _input$parentElement2,_input$parentElement3,_input$parentElement4,_input$parentElement5,_setup5=setup({label:"E-mail",withAddon:!0,addonContent:"R$"}),input=_setup5.input;expect(null===(_input$parentElement2=input.parentElement)||void 0===_input$parentElement2||null===(_input$parentElement3=_input$parentElement2.parentElement)||void 0===_input$parentElement3||null===(_input$parentElement4=_input$parentElement3.parentElement)||void 0===_input$parentElement4||null===(_input$parentElement5=_input$parentElement4.querySelectorAll("div")[0].firstChild)||void 0===_input$parentElement5?void 0:_input$parentElement5.textContent).toBe("R$")}),it("should render the input and hide your value",function(){var _setup6=setup({label:"Senha",hiddenContent:!0}),input=_setup6.input;expect(input.getAttribute("type")).toEqual("password")}),it("should focus the input",function(){var focusCallback=jest.fn(),_setup7=setup({label:"E-mail",onFocus:function onFocus(){return focusCallback()}}),input=_setup7.input;input.focus(),expect(focusCallback).toHaveBeenCalled()}),it("should focus the input with addon",function(){var focusCallback=jest.fn(),_setup8=setup({label:"E-mail",withAddon:!0,onFocus:function onFocus(){return focusCallback()}}),input=_setup8.input;input.focus(),expect(focusCallback).toHaveBeenCalled()}),it("should hover the input",function(){var hoverCallback=jest.fn(),_setup9=setup({label:"E-mail",onMouseMove:function onMouseMove(){return hoverCallback()}}),input=_setup9.input;_react.fireEvent.mouseMove(input),expect(hoverCallback).toHaveBeenCalled()})});

package/dist/components/Input/styles.js

@@ -1,177 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LegendText = exports.Legend = exports.InputLabel = exports.InputIcon = exports.InputGroupElement = exports.InputContentRow = exports.InputContent = exports.InputColumn = exports.Input = exports.HelperText = exports.Fieldset = exports.AddonElement = void 0;
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _react = require("@emotion/react");
-var _invertColor = require("../../utils//invertColor");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var InputGroupElement = _styled.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ", ";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ", ";\n    &:hover label {\n      color: ", ";\n    }\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ", ";\n    border-color: ", ";\n  }\n\n  > div > div:first-of-type span {\n    color: ", ";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ", ";\n  }\n  &:focus-within label {\n    color: ", ";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ", ";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n\n    background-color: ", ";\n\n    height: 20px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ", ";\n  }\n\n  ", "\n\n  & label {\n    transform: ", ";\n    height: ", ";\n    background: ", ";\n  }\n"])), function (props) {
-  return props.theme.borderRadius.default;
-}, function (props) {
-  return props.theme.fontWeight[400];
-}, function (_ref) {
-  var theme = _ref.theme,
-    alert = _ref.alert,
-    hasDisabled = _ref.hasDisabled;
-  if (alert && !hasDisabled) {
-    return theme.colors[alert].default + '66';
-  }
-  if (hasDisabled) {
-    return 'none';
-  }
-  return theme.colors.primary.hover;
-}, function (_ref2) {
-  var theme = _ref2.theme,
-    alert = _ref2.alert,
-    hasDisabled = _ref2.hasDisabled;
-  if (alert && !hasDisabled) {
-    return theme.colors[alert].default + '66';
-  }
-  if (hasDisabled) {
-    return 'none';
-  }
-  return theme.colors.primary.hover;
-}, function (_ref3) {
-  var theme = _ref3.theme,
-    hasDisabled = _ref3.hasDisabled;
-  return !hasDisabled && theme.colors.neutral.neutral5;
-}, function (props) {
-  return !props.alert && props.withAddon && props.theme.colors.primary.disabled;
-}, function (props) {
-  return !props.alert && props.withAddon && props.theme.colors.primary.hover;
-}, function (props) {
-  return props.alert ? (0, _invertColor.invertColor)(props.theme.colors[props.alert].default, true) : props.theme.colors.neutral.black;
-}, function (props) {
-  return props.theme.colors.primary.disabled;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.neutral.neutral5;
-}, function (props) {
-  return props.alert ? "".concat(props.theme.colors[props.alert].blurred, "33") : props.theme.colors.primary.disabled;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colors.neutral.white;
-}, function (props) {
-  return !props.alert && props.theme.colors.primary.hover;
-}, function (props) {
-  return props.addonContent && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &:focus-within > div > div:first-of-type {\n        border-color: ", ";\n        background-color: ", ";\n      }\n    "])), props.alert ? 'transparent' : props.theme.colors.primary.focus, props.alert && props.alert === 'success' ? props.theme.colors.primary.focus : '');
-}, function (_ref6) {
-  var hasValueOnInput = _ref6.hasValueOnInput,
-    withIcon = _ref6.withIcon;
-  return hasValueOnInput ? 'translate(19px, -11px) scale(0.8) !important' : withIcon ? 'translate(60px, calc(100% - 10px))' : 'translate(20px, calc(100% - 10px))';
-}, function (_ref7) {
-  var hasValueOnInput = _ref7.hasValueOnInput;
-  return hasValueOnInput ? '20px' : 'unset';
-}, function (_ref8) {
-  var hasValueOnInput = _ref8.hasValueOnInput,
-    theme = _ref8.theme;
-  return hasValueOnInput ? theme.colors.neutral.white : 'transparent';
-});
-exports.InputGroupElement = InputGroupElement;
-var InputColumn = _styled.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ", ";\n  width: 100%;\n  min-height: 56px;\n"])), function (props) {
-  return props.theme.borderRadius.default;
-});
-exports.InputColumn = InputColumn;
-var InputContent = _styled.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ", ";\n  height: 100%;\n"])), function (props) {
-  return props.withAddon ? '2 / end' : '1 / end';
-});
-exports.InputContent = InputContent;
-var InputContentRow = _styled.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));
-exports.InputContentRow = InputContentRow;
-var InputIcon = _styled.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: relative;\n  z-index: ", ";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ", ";\n  color: ", ";\n"])), function (props) {
-  return props.theme.zIndex.level1;
-}, function (props) {
-  return props.clickable ? 'pointer' : 'default';
-}, function (props) {
-  return props.theme.colors.neutral.neutral5;
-});
-exports.InputIcon = InputIcon;
-function inputPadding(props) {
-  var leftIcon = props.leftIcon,
-    withIcon = props.withIcon;
-  if (leftIcon || withIcon) return '0 0';
-  return '0 20px';
-}
-var Input = _styled.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: ", ";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ", ";\n  &:disabled {\n    color: ", ";\n  }\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ", ";\n  background-color: transparent;\n  position: relative;\n  font-weight: 500;\n"])), inputPadding, function (props) {
-  return props.theme.colors.neutral.black;
-}, function (_ref9) {
-  var theme = _ref9.theme;
-  return theme.colors.neutral.neutral5;
-}, function (_ref10) {
-  var theme = _ref10.theme;
-  return theme.colors.neutral.neutral5;
-}, function (props) {
-  return props.theme.fontSizes.xs;
-});
-exports.Input = Input;
-var InputLabel = _styled.default.label(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ", ";\n  pointer-events: none;\n  color: ", ";\n  background-color: transparent;\n  transform-origin: left;\n  transition: all ease 0.2s;\n  font-weight: 500;\n\n  white-space: nowrap;\n  max-width: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) {
-  return props.theme.zIndex.level1;
-}, function (props) {
-  return props.theme.colors.neutral.neutral3;
-}, function (_ref11) {
-  var withIcon = _ref11.withIcon;
-  return withIcon ? '65%' : '85%';
-});
-exports.InputLabel = InputLabel;
-var Fieldset = _styled.default.fieldset(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  background-color: ", ";\n\n  border-radius: ", ";\n  border: 2px solid\n    ", ";\n  border-left: ", ";\n\n  transition: all 0.2s ease;\n"])), function (_ref12) {
-  var alert = _ref12.alert,
-    theme = _ref12.theme,
-    hasDisabled = _ref12.hasDisabled;
-  if (alert && !hasDisabled) {
-    return "".concat(theme.colors[alert].blurred, "33");
-  }
-  if (hasDisabled) {
-    return theme.colors.neutral.neutral1;
-  }
-  return 'transparent';
-}, function (props) {
-  return props.withAddon ? "0 ".concat(props.theme.borderRadius.default, " ").concat(props.theme.borderRadius.default, " 0") : props.theme.borderRadius.default;
-}, function (_ref13) {
-  var theme = _ref13.theme,
-    hasDisabled = _ref13.hasDisabled,
-    alert = _ref13.alert;
-  if (alert && !hasDisabled) {
-    return theme.colors[alert].default;
-  }
-  return theme.colors.neutral.neutral2;
-}, function (props) {
-  return props.withAddon ? 'none !important' : 'auto';
-});
-exports.Fieldset = Fieldset;
-var Legend = _styled.default.legend(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));
-exports.Legend = Legend;
-var LegendText = _styled.default.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));
-exports.LegendText = LegendText;
-var HelperText = _styled.default.span(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  font-size: ", ";\n\n  color: ", ";\n  padding: 0 20px;\n"])), function (props) {
-  return props.theme.fontSizes.xxs;
-}, function (props) {
-  return props.alert && props.alert !== 'success' ? props.theme.colors[props.alert].default : props.theme.colors.neutral.neutral4;
-});
-exports.HelperText = HelperText;
-var AddonElement = _styled.default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 0 20px;\n  height: 100%;\n\n  background-color: ", ";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  border: 2px solid\n    ", ";\n  border-right: none;\n\n  border-radius: ", " 0 0\n    ", ";\n"])), function (props) {
-  if (props.alert && !props.hasDisabled) {
-    return props.theme.colors[props.alert].default;
-  }
-  if (props.hasDisabled) {
-    return props.theme.colors.neutral.neutral2;
-  }
-  return props.theme.colors.neutral.neutral1;
-}, function (_ref14) {
-  var theme = _ref14.theme,
-    hasDisabled = _ref14.hasDisabled,
-    alert = _ref14.alert;
-  if (alert && !hasDisabled) {
-    return theme.colors[alert].default;
-  }
-  return theme.colors.neutral.neutral2;
-}, function (props) {
-  return props.theme.borderRadius.default;
-}, function (props) {
-  return props.theme.borderRadius.default;
-});
-exports.AddonElement = AddonElement;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.LegendText=exports.Legend=exports.InputLabel=exports.InputIcon=exports.InputGroupElement=exports.InputContentRow=exports.InputContent=exports.InputColumn=exports.Input=exports.HelperText=exports.Fieldset=exports.AddonElement=void 0;var _templateObject,_templateObject2,_templateObject3,_templateObject4,_templateObject5,_templateObject6,_templateObject7,_templateObject8,_templateObject9,_templateObject10,_templateObject11,_templateObject12,_templateObject13,_styled=_interopRequireDefault(require("@emotion/styled")),_react=require("@emotion/react"),_invertColor=require("../../utils//invertColor");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function _taggedTemplateLiteral(strings,raw){return raw||(raw=strings.slice(0)),Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}))}var InputGroupElement=_styled.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  width: 100%;\n  border-radius: ",";\n  font-weight: ",";\n  transition: all 0.2s ease-in-out;\n\n  &:hover fieldset {\n    border-color: ",";\n  }\n\n  &:hover > div > div:first-of-type {\n    border-color: ",";\n    &:hover label {\n      color: ",";\n    }\n  }\n\n  &:focus-within > div > div:first-of-type {\n    background: ",";\n    border-color: ",";\n  }\n\n  > div > div:first-of-type span {\n    color: ",";\n  }\n\n  &:focus-within {\n    border-radius: 2px solid ",";\n  }\n  &:focus-within label {\n    color: ",";\n  }\n\n  &:focus-within > div {\n    box-shadow: 0 0 0 2px\n      ",";\n  }\n\n  &:focus-within label {\n    transform: translate(19px, -11px) scale(0.8);\n\n    background-color: ",";\n\n    height: 20px;\n  }\n\n  &:focus-within fieldset {\n    border-width: 2px;\n    border-color: ",";\n  }\n\n  ","\n\n  & label {\n    transform: ",";\n    height: ",";\n    background: ",";\n  }\n"])),function(props){return props.theme.borderRadius.default},function(props){return props.theme.fontWeight[400]},function(_ref){var theme=_ref.theme,alert=_ref.alert,hasDisabled=_ref.hasDisabled;return alert&&!hasDisabled?theme.colors[alert].default+"66":hasDisabled?"none":theme.colors.primary.hover},function(_ref2){var theme=_ref2.theme,alert=_ref2.alert,hasDisabled=_ref2.hasDisabled;return alert&&!hasDisabled?theme.colors[alert].default+"66":hasDisabled?"none":theme.colors.primary.hover},function(_ref3){var theme=_ref3.theme,hasDisabled=_ref3.hasDisabled;return!hasDisabled&&theme.colors.neutral.neutral5},function(props){return!props.alert&&props.withAddon&&props.theme.colors.primary.disabled},function(props){return!props.alert&&props.withAddon&&props.theme.colors.primary.hover},function(props){return props.alert?(0,_invertColor.invertColor)(props.theme.colors[props.alert].default,!0):props.theme.colors.neutral.black},function(props){return props.theme.colors.primary.disabled},function(_ref4){var theme=_ref4.theme;return theme.colors.neutral.neutral5},function(props){return props.alert?"".concat(props.theme.colors[props.alert].blurred,"33"):props.theme.colors.primary.disabled},function(_ref5){var theme=_ref5.theme;return theme.colors.neutral.white},function(props){return!props.alert&&props.theme.colors.primary.hover},function(props){return props.addonContent&&(0,_react.css)(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n      &:focus-within > div > div:first-of-type {\n        border-color: ",";\n        background-color: ",";\n      }\n    "])),props.alert?"transparent":props.theme.colors.primary.focus,props.alert&&"success"===props.alert?props.theme.colors.primary.focus:"")},function(_ref6){var hasValueOnInput=_ref6.hasValueOnInput,withIcon=_ref6.withIcon;return hasValueOnInput?"translate(19px, -11px) scale(0.8) !important":withIcon?"translate(60px, calc(100% - 10px))":"translate(20px, calc(100% - 10px))"},function(_ref7){var hasValueOnInput=_ref7.hasValueOnInput;return hasValueOnInput?"20px":"unset"},function(_ref8){var hasValueOnInput=_ref8.hasValueOnInput,theme=_ref8.theme;return hasValueOnInput?theme.colors.neutral.white:"transparent"});exports.InputGroupElement=InputGroupElement;var InputColumn=_styled.default.div(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n  align-items: center;\n  border-radius: ",";\n  width: 100%;\n  min-height: 56px;\n"])),function(props){return props.theme.borderRadius.default});exports.InputColumn=InputColumn;var InputContent=_styled.default.div(_templateObject4||(_templateObject4=_taggedTemplateLiteral(["\n  width: 100%;\n  position: relative;\n  grid-column: ",";\n  height: 100%;\n"])),function(props){return props.withAddon?"2 / end":"1 / end"});exports.InputContent=InputContent;var InputContentRow=_styled.default.div(_templateObject5||(_templateObject5=_taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: 100%;\n"])));exports.InputContentRow=InputContentRow;var InputIcon=_styled.default.div(_templateObject6||(_templateObject6=_taggedTemplateLiteral(["\n  position: relative;\n  z-index: ",";\n  display: flex;\n  margin: auto;\n  padding: 0 20px;\n  align-items: center;\n  justify-content: center;\n  cursor: ",";\n  color: ",";\n"])),function(props){return props.theme.zIndex.level1},function(props){return props.clickable?"pointer":"default"},function(props){return props.theme.colors.neutral.neutral5});exports.InputIcon=InputIcon;function inputPadding(props){var leftIcon=props.leftIcon,withIcon=props.withIcon;return leftIcon||withIcon?"0 0":"0 20px"}var Input=_styled.default.input(_templateObject7||(_templateObject7=_taggedTemplateLiteral(["\n  width: 100%;\n  padding: ",";\n  flex: 1;\n  height: 100%;\n  border: none;\n  color: ",";\n  &:disabled {\n    color: ",";\n  }\n\n  &::placeholder {\n    color: ",";\n  }\n\n  font-family: inherit;\n  outline: none;\n  font-size: ",";\n  background-color: transparent;\n  position: relative;\n  font-weight: 500;\n"])),inputPadding,function(props){return props.theme.colors.neutral.black},function(_ref9){var theme=_ref9.theme;return theme.colors.neutral.neutral5},function(_ref10){var theme=_ref10.theme;return theme.colors.neutral.neutral5},function(props){return props.theme.fontSizes.xs});exports.Input=Input;var InputLabel=_styled.default.label(_templateObject8||(_templateObject8=_taggedTemplateLiteral(["\n  top: 0;\n  left: 0;\n  height: auto;\n  padding: 0 6px;\n  position: absolute;\n  z-index: ",";\n  pointer-events: none;\n  color: ",";\n  background-color: transparent;\n  transform-origin: left;\n  transition: all ease 0.2s;\n  font-weight: 500;\n\n  white-space: nowrap;\n  max-width: ",";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])),function(props){return props.theme.zIndex.level1},function(props){return props.theme.colors.neutral.neutral3},function(_ref11){var withIcon=_ref11.withIcon;return withIcon?"65%":"85%"});exports.InputLabel=InputLabel;var Fieldset=_styled.default.fieldset(_templateObject9||(_templateObject9=_taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  margin: 0;\n  top: 0;\n  pointer-events: none;\n  padding: 0 17px;\n  overflow: hidden;\n\n  background-color: ",";\n\n  border-radius: ",";\n  border: 2px solid\n    ",";\n  border-left: ",";\n\n  transition: all 0.2s ease;\n"])),function(_ref12){var alert=_ref12.alert,theme=_ref12.theme,hasDisabled=_ref12.hasDisabled;return alert&&!hasDisabled?"".concat(theme.colors[alert].blurred,"33"):hasDisabled?theme.colors.neutral.neutral1:"transparent"},function(props){return props.withAddon?"0 ".concat(props.theme.borderRadius.default," ").concat(props.theme.borderRadius.default," 0"):props.theme.borderRadius.default},function(_ref13){var theme=_ref13.theme,hasDisabled=_ref13.hasDisabled,alert=_ref13.alert;return alert&&!hasDisabled?theme.colors[alert].default:theme.colors.neutral.neutral2},function(props){return props.withAddon?"none !important":"auto"});exports.Fieldset=Fieldset;var Legend=_styled.default.legend(_templateObject10||(_templateObject10=_taggedTemplateLiteral(["\n  padding: 0;\n  width: auto;\n  max-width: 0.01px;\n  font-size: 14px;\n  height: 0px;\n  visibility: hidden;\n  transition: all 0.1s;\n"])));exports.Legend=Legend;var LegendText=_styled.default.span(_templateObject11||(_templateObject11=_taggedTemplateLiteral(["\n  padding: 0 2px;\n  display: inline-block;\n  visibility: hidden;\n"])));exports.LegendText=LegendText;var HelperText=_styled.default.span(_templateObject12||(_templateObject12=_taggedTemplateLiteral(["\n  font-size: ",";\n\n  color: ",";\n  padding: 0 20px;\n"])),function(props){return props.theme.fontSizes.xxs},function(props){return props.alert&&"success"!==props.alert?props.theme.colors[props.alert].default:props.theme.colors.neutral.neutral4});exports.HelperText=HelperText;var AddonElement=_styled.default.div(_templateObject13||(_templateObject13=_taggedTemplateLiteral(["\n  padding: 0 20px;\n  height: 100%;\n\n  background-color: ",";\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease;\n  border: 2px solid\n    ",";\n  border-right: none;\n\n  border-radius: "," 0 0\n    ",";\n"])),function(props){return props.alert&&!props.hasDisabled?props.theme.colors[props.alert].default:props.hasDisabled?props.theme.colors.neutral.neutral2:props.theme.colors.neutral.neutral1},function(_ref14){var theme=_ref14.theme,hasDisabled=_ref14.hasDisabled,alert=_ref14.alert;return alert&&!hasDisabled?theme.colors[alert].default:theme.colors.neutral.neutral2},function(props){return props.theme.borderRadius.default},function(props){return props.theme.borderRadius.default});exports.AddonElement=AddonElement;

package/dist/components/Label/index.js

@@ -1,45 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = LabelInput;
-var _react = require("@emotion/react");
-var _getColorValue = require("../../utils/getColorValue");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _styles = require("./styles");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function LabelInput(_ref) {
-  var label = _ref.label,
-    _ref$labelType = _ref.labelType,
-    labelType = _ref$labelType === void 0 ? 'success' : _ref$labelType,
-    Icon = _ref.icon,
-    _ref$iconSide = _ref.iconSide,
-    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
-    _ref$textColor = _ref.textColor,
-    textColor = _ref$textColor === void 0 ? '' : _ref$textColor,
-    _ref$backgroundColor = _ref.backgroundColor,
-    backgroundColor = _ref$backgroundColor === void 0 ? '' : _ref$backgroundColor;
-  var theme = (0, _react.useTheme)();
-  var parsedTextColor = (0, _getColorValue.getColorValue)(textColor, theme, theme.colors[labelType].default);
-  var parsedBackgroundColor = (0, _getColorValue.getColorValue)(backgroundColor, theme, theme.colors[labelType].blurred);
-  if (parsedTextColor.includes('.')) {
-    parsedTextColor = (0, _getColorValue.getThemeHex)(parsedTextColor, theme);
-  }
-  if (parsedBackgroundColor.includes('.')) {
-    parsedBackgroundColor = (0, _getColorValue.getThemeHex)(parsedTextColor, theme);
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.LabelWrapper, {
-    backgroundColor: parsedBackgroundColor,
-    color: parsedTextColor,
-    "data-testid": "label-wrapper",
-    children: [Icon && iconSide === 'left' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: Icon,
-      size: "16px"
-    }), label || 'default', Icon && iconSide === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-      name: Icon,
-      size: "16px"
-    })]
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=LabelInput;var _react=require("@emotion/react"),_getColorValue=require("../../utils/getColorValue"),_Icon=_interopRequireDefault(require("../Icon")),_styles=require("./styles"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}function LabelInput(_ref){var label=_ref.label,_ref$labelType=_ref.labelType,labelType=void 0===_ref$labelType?"success":_ref$labelType,Icon=_ref.icon,_ref$iconSide=_ref.iconSide,iconSide=void 0===_ref$iconSide?"left":_ref$iconSide,_ref$textColor=_ref.textColor,textColor=void 0===_ref$textColor?"":_ref$textColor,_ref$backgroundColor=_ref.backgroundColor,backgroundColor=void 0===_ref$backgroundColor?"":_ref$backgroundColor,theme=(0,_react.useTheme)(),parsedTextColor=(0,_getColorValue.getColorValue)(textColor,theme,theme.colors[labelType].default),parsedBackgroundColor=(0,_getColorValue.getColorValue)(backgroundColor,theme,theme.colors[labelType].blurred);return parsedTextColor.includes(".")&&(parsedTextColor=(0,_getColorValue.getThemeHex)(parsedTextColor,theme)),parsedBackgroundColor.includes(".")&&(parsedBackgroundColor=(0,_getColorValue.getThemeHex)(parsedTextColor,theme)),/*#__PURE__*/(0,_jsxRuntime.jsxs)(_styles.LabelWrapper,{backgroundColor:parsedBackgroundColor,color:parsedTextColor,"data-testid":"label-wrapper",children:[Icon&&"left"===iconSide&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:Icon,size:"16px"}),label||"default",Icon&&"right"===iconSide&&/*#__PURE__*/(0,_jsxRuntime.jsx)(_Icon.default,{name:Icon,size:"16px"})]})}