@gympass/yoga 7.65.0 → 7.66.1

package/esm/Input/native/Password.test.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Password />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match when input is focused', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input"
+      }))),
+          toJSON = _render2.toJSON,
+          getByTestId = _render2.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        disabled: true
+      }))),
+          toJSON = _render3.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Label",
+        full: true
+      }))),
+          toJSON = _render4.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChangeText', function () {
+      var onChangeTextMock = jest.fn();
+
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input",
+        onChangeText: onChangeTextMock
+      }))),
+          getByTestId = _render5.getByTestId;
+
+      fireEvent.changeText(getByTestId('input'), 'foo');
+      expect(onChangeTextMock).toHaveBeenCalled();
+    });
+    it('should not call onChangeText when input is readOnly', function () {
+      var onChangeTextMock = jest.fn();
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input",
+        onChangeText: onChangeTextMock,
+        readOnly: true
+      }))),
+          getByTestId = _render6.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it('should not call onChangeText when input is disabled', function () {
+      var onChangeTextMock = jest.fn();
+
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input",
+        onChangeText: onChangeTextMock,
+        disabled: true
+      }))),
+          getByTestId = _render7.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(onChangeTextMock).not.toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input",
+        onFocus: onFocusMock
+      }))),
+          getByTestId = _render8.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input",
+        onBlur: onBlurMock
+      }))),
+          getByTestId = _render9.getByTestId;
+
+      fireEvent(getByTestId('input'), 'focus');
+      fireEvent(getByTestId('input'), 'blur');
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('visibility button', function () {
+    it('should toggle password visibility when press visibility button', function () {
+      var _render10 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        testID: "input"
+      }))),
+          getByRole = _render10.getByRole,
+          getByTestId = _render10.getByTestId;
+
+      expect(getByTestId('input').props.secureTextEntry).toBe(true);
+      fireEvent.press(getByRole('button'));
+      expect(getByTestId('input').props.secureTextEntry).toBe(false);
+    });
+  });
+});

package/esm/Input/native/Tel.js

@@ -0,0 +1,14 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+import React from 'react';
+import Input from './Input';
+var Tel = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, props, {
+    keyboardType: "phone-pad",
+    autoCompleteType: "tel",
+    textContentType: "telephoneNumber"
+  }));
+});
+export default Tel;

package/esm/Input/native/Tel.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Tel />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Tel, null))),
+          toJSON = _render.toJSON;
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/native/index.js

@@ -0,0 +1,6 @@
+import Input from './Input';
+import Password from './Password';
+import InputNumber from './Number';
+import Tel from './Tel';
+import Email from './Email';
+export { Input, Password, InputNumber, Tel, Email };

package/esm/Input/web/Email.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Email />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Email, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/web/Input.js

@@ -1,4 +1,4 @@
-var _excluded = ["cleanable", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
+var _excluded = ["cleanable", "children", "disabled", "error", "full", "helper", "label", "maxLength", "readOnly", "style", "value", "onChange", "onClean", "hideMaxLength", "rightIcon"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -10,7 +10,7 @@ function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.s
 
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components';
-import { func, string, bool, number, shape, oneOfType, node } from 'prop-types';
+import { arrayOf, func, string, bool, number, shape, oneOfType, node } from 'prop-types';
 import { Close } from '@gympass/yoga-icons';
 import { theme } from '../../Theme';
 import Field from './Field';
@@ -34,6 +34,7 @@ var IconWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemp
 });
 var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
   var cleanable = _ref3.cleanable,
+      children = _ref3.children,
       disabled = _ref3.disabled,
       error = _ref3.error,
       full = _ref3.full,
@@ -68,7 +69,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     label: label,
     style: style,
     value: value
-  }, /*#__PURE__*/React.createElement(Field, _extends({}, props, {
+  }, !children ? /*#__PURE__*/React.createElement(Field, _extends({}, props, {
     label: label,
     cleanable: cleanable,
     disabled: disabled,
@@ -79,7 +80,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     ref: inputRef,
     value: value,
     onChange: onChange
-  })), /*#__PURE__*/React.createElement(Label, {
+  })) : children, /*#__PURE__*/React.createElement(Label, {
     error: error,
     disabled: disabled
   }, label), label && /*#__PURE__*/React.createElement(Legend, null, label), cleanable && !readOnly && value && /*#__PURE__*/React.createElement(IconWrapper, {
@@ -111,6 +112,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 Input.propTypes = {
   className: string,
 
+  /** a children node to override default input component */
+  children: oneOfType([arrayOf(node), node]),
+
   /** display a close icon to clean the field */
   cleanable: bool,
   disabled: bool,
@@ -138,6 +142,7 @@ Input.propTypes = {
 };
 Input.defaultProps = {
   className: undefined,
+  children: undefined,
   cleanable: true,
   disabled: false,
   error: undefined,

package/esm/Input/web/Input.test.js

@@ -0,0 +1,145 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with label', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        disabled: true
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with error', function () {
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        error: "Error message"
+      }))),
+          container = _render4.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with helper text and max length', function () {
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20
+      }))),
+          container = _render5.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with helper text, max length and hideMaxLength', function () {
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        helper: "Helper text",
+        maxLength: 20,
+        hideMaxLength: true
+      }))),
+          container = _render6.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Label",
+        full: true
+      }))),
+          container = _render7.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange', function () {
+      var onChangeMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        onChange: onChangeMock,
+        "data-testid": "input"
+      })));
+      fireEvent.change(screen.getByTestId('input'), {
+        target: {
+          value: 'foo'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        "data-testid": "input",
+        onFocus: onFocusMock
+      })));
+      fireEvent.focus(screen.getByTestId('input'));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        "data-testid": "input",
+        onBlur: onBlurMock
+      })));
+      fireEvent.focus(screen.getByTestId('input'));
+      fireEvent.blur(screen.getByTestId('input'));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('maxLength', function () {
+    it('should update maxLength counter when add character', function () {
+      var _render8 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        maxLength: 10
+      }))),
+          rerender = _render8.rerender;
+
+      expect(screen.getByText('0/10').textContent).toBe('0/10');
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        maxLength: 10
+      })));
+      expect(screen.getByText('3/10').textContent).toBe('3/10');
+    });
+  });
+  describe('clean button', function () {
+    it('should call onClean when press clean button', function () {
+      var onClean = jest.fn();
+      render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo",
+        onClean: onClean
+      })));
+      fireEvent.click(screen.queryByRole('button'));
+      expect(onClean).toHaveBeenCalled();
+    });
+    it('should test if clean button is present', function () {
+      var _render9 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input"
+      }))),
+          rerender = _render9.rerender; // closeButton
+
+
+      expect(screen.queryByRole('button')).toBeNull();
+      rerender( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input, {
+        label: "Input",
+        value: "foo"
+      })));
+      expect(screen.queryByRole('button')).not.toBeNull();
+    });
+  });
+});

package/esm/Input/web/Number.test.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Number />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Number, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+});

package/esm/Input/web/Password.test.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { ThemeProvider, Input } from '../..';
+describe('<Input.Password />', function () {
+  describe('Snapshots', function () {
+    it('should match with default input', function () {
+      var _render = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, null))),
+          container = _render.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with disabled input', function () {
+      var _render2 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        disabled: true
+      }))),
+          container = _render2.container;
+
+      expect(container).toMatchSnapshot();
+    });
+    it('should match with full width', function () {
+      var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Label",
+        full: true
+      }))),
+          container = _render3.container;
+
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe('Events', function () {
+    it('should call onChange', function () {
+      var onChangeMock = jest.fn();
+
+      var _render4 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onChange: onChangeMock
+      }))),
+          getByTestId = _render4.getByTestId;
+
+      fireEvent.change(getByTestId('input'), {
+        target: {
+          value: 'foo'
+        }
+      });
+      expect(onChangeMock).toHaveBeenCalled();
+    });
+    it('should call onFocus', function () {
+      var onFocusMock = jest.fn();
+
+      var _render5 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onFocus: onFocusMock
+      }))),
+          getByTestId = _render5.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      expect(onFocusMock).toHaveBeenCalled();
+    });
+    it('should call onBlur', function () {
+      var onBlurMock = jest.fn();
+
+      var _render6 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input",
+        onBlur: onBlurMock
+      }))),
+          getByTestId = _render6.getByTestId;
+
+      fireEvent.focus(getByTestId('input'));
+      fireEvent.blur(getByTestId('input'));
+      expect(onBlurMock).toHaveBeenCalled();
+    });
+  });
+  describe('visibility button', function () {
+    it('should toggle password visibility when click visibility button', function () {
+      var _render7 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Input.Password, {
+        label: "Input",
+        "data-testid": "input"
+      }))),
+          getByRole = _render7.getByRole,
+          getByTestId = _render7.getByTestId;
+
+      expect(getByTestId('input').type).toBe('password');
+      fireEvent.click(getByRole('button'));
+      expect(getByTestId('input').type).toBe('text');
+    });
+  });
+});

package/esm/Input/web/Phone.js

@@ -0,0 +1,124 @@
+var _excluded = ["defaultCountry", "disabled", "readOnly", "error", "full", "helper", "label", "placeholder", "value", "onChange"];
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
+
+import React, { useRef, useCallback } from 'react';
+import BasePhoneInput from 'react-phone-input-2';
+import PropTypes, { func, string, bool } from 'prop-types';
+import * as S from './Phone.style';
+import Input from './Input';
+import { useCombinedRefs } from '../../hooks';
+var phoneBaseSettings = {
+  onlyCountries: ['ar', 'br', 'cl', 'de', 'es', 'gb', 'ie', 'it', 'mx', 'pt', 'us']
+};
+var Phone = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
+  var defaultCountry = _ref.defaultCountry,
+      disabled = _ref.disabled,
+      readOnly = _ref.readOnly,
+      error = _ref.error,
+      full = _ref.full,
+      helper = _ref.helper,
+      label = _ref.label,
+      placeholder = _ref.placeholder,
+      value = _ref.value,
+      _onChange = _ref.onChange,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var inputRef = useCombinedRefs(forwardedRef);
+  var currentCountry = useRef(defaultCountry);
+  var onChangeCountry = useCallback(function (countryCode) {
+    if (currentCountry.current !== countryCode) {
+      inputRef.current.focus();
+      currentCountry.current = countryCode;
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Input, _extends({}, _extends({
+    disabled: disabled,
+    readOnly: readOnly,
+    error: error,
+    full: full,
+    helper: helper,
+    value: value
+  }, rest), {
+    ref: inputRef,
+    label: "",
+    onClean: function onClean(phoneNumber) {
+      return _onChange(phoneNumber);
+    }
+  }), /*#__PURE__*/React.createElement(S.Container, {
+    error: error,
+    disabled: disabled,
+    full: full
+  }, /*#__PURE__*/React.createElement(BasePhoneInput, _extends({}, phoneBaseSettings, {
+    ref: function ref(phoneRef) {
+      inputRef.current = phoneRef == null ? void 0 : phoneRef.numberInputRef;
+    },
+    inputProps: {
+      readOnly: readOnly
+    },
+    disabled: disabled,
+    disableDropdown: readOnly,
+    country: defaultCountry,
+    specialLabel: label,
+    placeholder: placeholder,
+    onChange: function onChange(phoneNumber, options) {
+      _onChange(phoneNumber, options);
+
+      onChangeCountry(options.countryCode);
+    },
+    value: value
+  }))));
+});
+Phone.propTypes = {
+  className: string,
+
+  /** display a close icon to clean the field */
+  cleanable: bool,
+
+  /** default country to be selected on the dropdown */
+  defaultCountry: PropTypes.string,
+
+  /** disable the whole input */
+  disabled: bool,
+
+  /** display a error message and error style */
+  error: string,
+
+  /** should occupy the whole container width */
+  full: bool,
+
+  /** a helper text to be displayed below field */
+  helper: string,
+
+  /** label for the input */
+  label: string,
+
+  /** make the input read only */
+  readOnly: bool,
+
+  /** value of the input */
+  value: string,
+
+  /** callback invoked when value changes, either by typing of selecting a country */
+  onChange: func,
+
+  /** placeholder to show when the input is cleared */
+  placeholder: string
+};
+Phone.defaultProps = {
+  className: undefined,
+  cleanable: true,
+  defaultCountry: 'br',
+  disabled: false,
+  error: undefined,
+  full: false,
+  helper: undefined,
+  label: '',
+  readOnly: false,
+  value: '',
+  onChange: function onChange() {},
+  placeholder: '+55 (11) 999999999'
+};
+export default Phone;

package/esm/Input/web/Phone.style.js

@@ -0,0 +1,27 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+import 'react-phone-input-2/lib/material.css';
+import styled, { css } from 'styled-components';
+import { flagsSprite, chevronSvg, checkSvg } from './data-images';
+var flagsPositioning = css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  .ar {\n    background-position: 0px 0px;\n  }\n\n  .br {\n    background-position: -20px 0px;\n  }\n\n  .cl {\n    background-position: 0px -20px;\n  }\n\n  .de {\n    background-position: -20px -20px;\n  }\n\n  .es {\n    background-position: -20px -40px;\n  }\n\n  .gb {\n    background-position: -60px 0px;\n  }\n\n  .ie {\n    background-position: -40px 0px;\n  }\n\n  .it {\n    background-position: -40px -20px;\n  }\n\n  .mx {\n    background-position: 0px -40px;\n  }\n\n  .pt {\n    background-position: -40px -40px;\n  }\n\n  .us {\n    background-position: -60px -20px;\n  }\n"])));
+var flagReset = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  top: initial;\n  left: initial;\n  margin-top: 0;\n"])));
+var hiddenScrollBar = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n"])));
+
+var labelStateColors = function labelStateColors(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error,
+      colors = _ref.theme.yoga.colors;
+  return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), disabled ? "color: " + colors.text.disabled + ";" : '', error ? "color: " + colors.feedback.attention[1] + ";" : '');
+};
+
+export var Container = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  --fieldset-left-offset: 12px;\n  --dropdown-zIndex: 1;\n\n  height: inherit;\n\n  ", "\n"])), function (_ref2) {
+  var disabled = _ref2.disabled,
+      _ref2$theme$yoga = _ref2.theme.yoga,
+      spacing = _ref2$theme$yoga.spacing,
+      colors = _ref2$theme$yoga.colors,
+      baseFont = _ref2$theme$yoga.baseFont,
+      input = _ref2$theme$yoga.components.input;
+  return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n    .react-tel-input {\n      width: inherit;\n      height: inherit;\n      font-family: ", ", sans-serif;\n      font-size: ", "px;\n      font-weight: ", ";\n      display: grid;\n      grid-template-areas: 'dropdown input';\n      grid-template-columns: min-content 1fr;\n\n      .special-label {\n        z-index: unset;\n        left: unset;\n        font-size: ", "px;\n        color: ", ";\n        letter-spacing: normal;\n        ", ";\n      }\n\n      &:focus-within {\n        .special-label {\n          font-weight: ", ";\n          color: ", ";\n          ", ";\n        }\n      }\n\n      .form-control {\n        background: transparent;\n        border: unset;\n        padding: unset;\n        box-sizing: border-box;\n        width: 100%;\n        grid-area: input;\n        color: ", ";\n        font-size: ", "px;\n        padding-left: ", "px;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n\n        &::placeholder {\n          color: ", ";\n        }\n\n        &:hover,\n        &:focus {\n          box-shadow: none;\n        }\n\n        &.open {\n          z-index: calc(var(--dropdown-zIndex) + 1);\n        }\n      }\n\n      .flag-dropdown {\n        border: none;\n        width: inherit;\n        position: unset;\n        top: unset;\n        bottom: unset;\n        padding: unset;\n        grid-area: dropdown;\n\n        &.open {\n          width: 100%;\n          z-index: var(--dropdown-zIndex);\n        }\n\n        &.open,\n        &.open .selected-flag,\n        &:hover,\n        &:focus {\n          background: transparent;\n        }\n      }\n\n      .selected-flag {\n        border: none;\n        padding: 0;\n        padding-left: ", "px;\n        display: flex;\n        align-items: center;\n        opacity: ", ";\n\n        &::after {\n          content: '';\n          position: absolute;\n          background-color: ", ";\n          height: 28px;\n          right: -", "px;\n          width: 1px;\n          top: 50%;\n          transform: translate(0, -50%);\n        }\n\n        .flag {\n          ", ";\n          display: flex;\n          align-items: center;\n\n          .arrow {\n            background-color: ", ";\n            mask-image: url('data:image/svg+xml;utf8,", "');\n            border: none;\n            top: unset;\n            margin-top: unset;\n            width: 16px;\n            height: 16px;\n            transition: 0.6s, color 0.1s;\n\n            &.up {\n              border: none;\n              transform: rotateX(180deg);\n            }\n\n            &:hover,\n            &:focus {\n              border: none;\n              background-color: ", ";\n            }\n          }\n        }\n      }\n\n      .flag {\n        width: 20px;\n        height: 20px;\n        background-image: url('data:image/png;base64,", "');\n      }\n\n      ", ";\n\n      .country-list {\n        box-shadow: none;\n        border-radius: unset;\n        max-height: 18rem;\n        margin: -", "px 0 0 calc(-1 * var(--fieldset-left-offset) -\n              1px);\n        width: calc(100% + var(--fieldset-left-offset) + 2px);\n        z-index: var(--dropdown-zIndex);\n        border: 1px solid ", ";\n        border-top: 0;\n        border-bottom-left-radius: ", "px;\n        border-bottom-right-radius: ", "px;\n\n        ", ";\n\n        .country {\n          display: flex;\n          align-items: center;\n          outline: 0;\n          padding: ", "px ", "px ", "px\n            ", "px;\n          color: ", ";\n\n          .flag {\n            ", ";\n            margin-right: ", "px;\n          }\n\n          .dial-code {\n            color: inherit;\n            display: flex;\n            flex: 1;\n\n            ::before {\n              content: '(';\n            }\n\n            ::after {\n              content: ')';\n            }\n          }\n\n          &.highlight {\n            background-color: transparent;\n            color: ", ";\n\n            &::after {\n              content: '';\n              background-color: ", ";\n              mask-image: url('data:image/svg+xml;utf8,", "');\n              width: 16px;\n              height: 16px;\n            }\n          }\n\n          &.focus,\n          &:hover {\n            background-color: ", ";\n          }\n        }\n      }\n    }\n  "])), baseFont.family, input.font.size, input.font.weight, input.label.font.size.typed, input.label.color["default"], labelStateColors, input.label.font.weight.typed, input.label.color.focus, labelStateColors, disabled ? colors.text.disabled : input.font.color.focus, input.font.size, spacing.xsmall, input.font.color["default"], spacing.xxxsmall, disabled ? 0.5 : 1, input.border.color["default"], spacing.xxxsmall, flagReset, input.label.color["default"], chevronSvg, input.label.color.focus, flagsSprite, flagsPositioning, spacing.xxsmall, input.border.color.typed, spacing.xxsmall, spacing.xxsmall, hiddenScrollBar, spacing.xsmall, spacing.small, spacing.xsmall, spacing.small, input.font.color.focus, flagReset, spacing.small, colors.primary, colors.primary, checkSvg, colors.clear);
+});