@gympass/yoga 7.64.4 → 7.66.0

package/cjs/Accordion/web/Accordion.js

@@ -15,18 +15,23 @@ var _yoga = require("@gympass/yoga");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
+var _excluded = ["title", "subtitle", "children", "disabled", "expanded"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
+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 Accordion = function Accordion(_ref) {
   var title = _ref.title,
       subtitle = _ref.subtitle,
       children = _ref.children,
       disabled = _ref.disabled,
-      expanded = _ref.expanded;
+      expanded = _ref.expanded,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = (0, _react.useState)(expanded),
       open = _useState[0],
@@ -73,7 +78,7 @@ var Accordion = function Accordion(_ref) {
     return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
   });
 
-  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, null, /*#__PURE__*/_react["default"].createElement(Header, {
+  return /*#__PURE__*/_react["default"].createElement(AccordionWrapper, props, /*#__PURE__*/_react["default"].createElement(Header, {
     disabled: disabled,
     onClick: function onClick() {
       setOpen(!open);

package/cjs/Checkbox/web/Checkbox.js

@@ -155,11 +155,11 @@ var Checkbox = function Checkbox(_ref8) {
       inputRef.current.indeterminate = indeterminate;
     }
   });
-  return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, {
+  return /*#__PURE__*/_react["default"].createElement(CheckboxWrapper, _extends({
     style: style,
     className: className,
     disabled: disabled
-  }, /*#__PURE__*/_react["default"].createElement(CheckboxStyled, {
+  }, rest), /*#__PURE__*/_react["default"].createElement(CheckboxStyled, {
     checked: checked,
     indeterminate: indeterminate,
     inverted: inverted,

package/cjs/Datepicker/web/Datepicker.js

@@ -19,7 +19,8 @@ var _Theme = require("../../Theme");
 
 var _Calendar = _interopRequireDefault(require("./Calendar"));
 
-var _excluded = ["_disabled", "inputFilled"];
+var _excluded = ["_disabled", "inputFilled"],
+    _excluded2 = ["fullWidth", "type", "placeholder", "startDate", "endDate", "onSelectSingle", "disabled", "onSelectRange", "customOnSelectRange", "disablePastDates", "disableFutureDates", "disablePastFrom", "disableFutureFrom", "error", "onOpen", "displayEndDateOnly"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -138,7 +139,8 @@ function Datepicker(_ref8) {
       disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
       onOpen = _ref8.onOpen,
-      displayEndDateOnly = _ref8.displayEndDateOnly;
+      displayEndDateOnly = _ref8.displayEndDateOnly,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
 
   var _useState = (0, _react.useState)(),
       open = _useState[0],
@@ -238,10 +240,10 @@ function Datepicker(_ref8) {
     }, (0, _dateFns.format)(toUTC(start), dateFormat), end && " - " + (0, _dateFns.format)(toUTC(end), dateFormat));
   };
 
-  return /*#__PURE__*/_react["default"].createElement(Wrapper, {
+  return /*#__PURE__*/_react["default"].createElement(Wrapper, _extends({
     fullWidth: fullWidth,
     tabIndex: "0"
-  }, /*#__PURE__*/_react["default"].createElement(Selector, {
+  }, props), /*#__PURE__*/_react["default"].createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
     error: error,

package/cjs/Divider/web/Divider.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _excluded = ["vertical", "style"];
+
 var _templateObject, _templateObject2;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -17,6 +19,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 var StyledDivider = _styledComponents["default"].hr(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
@@ -29,12 +35,14 @@ var StyledDivider = _styledComponents["default"].hr(_templateObject || (_templat
 
 var Divider = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
   var vertical = _ref2.vertical,
-      style = _ref2.style;
-  return /*#__PURE__*/_react["default"].createElement(StyledDivider, {
+      style = _ref2.style,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(StyledDivider, _extends({
     vertical: vertical,
     ref: ref,
     style: style
-  });
+  }, props));
 });
 
 Divider.propTypes = {

package/cjs/Feedback/web/Feedback.js

@@ -17,10 +17,14 @@ var _Text = _interopRequireDefault(require("../../Text"));
 
 var _StyledFeedback = require("./StyledFeedback");
 
+var _excluded = ["variant", "title", "description", "children"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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; }
+
 var ICON_SIZE = 64;
 var VARIANT_ICONS = {
   success: {
@@ -45,7 +49,9 @@ function Feedback(_ref) {
   var variant = _ref.variant,
       title = _ref.title,
       description = _ref.description,
-      children = _ref.children;
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var iconProps = VARIANT_ICONS[variant];
   var primaryButton;
   var secondaryButton;
@@ -69,7 +75,7 @@ function Feedback(_ref) {
     display: "flex",
     alignItems: "flex-end",
     bg: "white"
-  }, /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
+  }, /*#__PURE__*/_react["default"].createElement(_StyledFeedback.Content, props, /*#__PURE__*/_react["default"].createElement(_Icon["default"], _extends({}, iconProps, {
     size: ICON_SIZE,
     mb: "large",
     "data-testid": "feedback-icon"

package/cjs/Feedback/web/StyledFeedback.js

@@ -21,7 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
-var Content = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
+var Content = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
 
 exports.Content = Content;
 

package/cjs/Header/web/Header.js

@@ -15,6 +15,8 @@ var _Box = _interopRequireDefault(require("../../Box"));
 
 var _Logo = _interopRequireDefault(require("./Logo"));
 
+var _excluded = ["link", "logo", "children"];
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -23,6 +25,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 var StyledHeader = (0, _styledComponents["default"])(_Box["default"])(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n"])), function (_ref) {
@@ -32,16 +38,18 @@ var StyledHeader = (0, _styledComponents["default"])(_Box["default"])(_templateO
 
 var Header = function Header(_ref2) {
   var link = _ref2.link,
+      logo = _ref2.logo,
       children = _ref2.children,
-      logo = _ref2.logo;
-  return /*#__PURE__*/_react["default"].createElement(StyledHeader, {
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/_react["default"].createElement(StyledHeader, _extends({
     as: "header",
     d: "flex",
     elevation: "medium",
     bgColor: "white",
     alignItems: "center",
     w: "100%"
-  }, link ? /*#__PURE__*/_react["default"].createElement("a", {
+  }, props), link ? /*#__PURE__*/_react["default"].createElement("a", {
     href: link
   }, /*#__PURE__*/_react["default"].createElement(_Logo["default"], {
     customLogo: logo

package/cjs/Heading/web/Heading.js

@@ -17,15 +17,23 @@ var _BackButton = _interopRequireDefault(require("./BackButton"));
 
 var _RightButton = _interopRequireDefault(require("./RightButton"));
 
+var _excluded = ["children", "noPadding"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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; }
+
 var Heading = function Heading(_ref) {
   var children = _ref.children,
-      noPadding = _ref.noPadding;
+      noPadding = _ref.noPadding,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var backButton = null;
   var title = null;
   var rightButtons = [];
@@ -45,9 +53,9 @@ var Heading = function Heading(_ref) {
     defineComponent(children);
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_StyledHeading["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_StyledHeading["default"], _extends({
     noPadding: noPadding
-  }, backButton || /*#__PURE__*/_react["default"].createElement(_StyledHeading.Button, null), title || /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+  }, props), backButton || /*#__PURE__*/_react["default"].createElement(_StyledHeading.Button, null), title || /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     w: "100%"
   }), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
     display: "flex",

package/cjs/Input/index.js

@@ -9,5 +9,6 @@ _web.Input.Password = _web.Password;
 _web.Input.Email = _web.Email;
 _web.Input.Number = _web.InputNumber;
 _web.Input.Tel = _web.Tel;
+_web.Input.Phone = _web.Phone;
 var _default = _web.Input;
 exports["default"] = _default;

package/cjs/Input/web/Input.js

@@ -23,7 +23,7 @@ var _Legend = _interopRequireDefault(require("./Legend"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
-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;
 
@@ -57,6 +57,7 @@ var IconWrapper = _styledComponents["default"].div(_templateObject3 || (_templat
 
 var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
   var cleanable = _ref3.cleanable,
+      children = _ref3.children,
       disabled = _ref3.disabled,
       error = _ref3.error,
       full = _ref3.full,
@@ -91,7 +92,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
     label: label,
     style: style,
     value: value
-  }, /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
+  }, !children ? /*#__PURE__*/_react["default"].createElement(_Field["default"], _extends({}, props, {
     label: label,
     cleanable: cleanable,
     disabled: disabled,
@@ -102,7 +103,7 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
     ref: inputRef,
     value: value,
     onChange: onChange
-  })), /*#__PURE__*/_react["default"].createElement(_Label["default"], {
+  })) : children, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
     error: error,
     disabled: disabled
   }, label), label && /*#__PURE__*/_react["default"].createElement(_Legend["default"], null, label), cleanable && !readOnly && value && /*#__PURE__*/_react["default"].createElement(IconWrapper, {
@@ -135,6 +136,9 @@ var Input = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, ref) {
 Input.propTypes = {
   className: _propTypes.string,
 
+  /** a children node to override default input component */
+  children: (0, _propTypes.oneOfType)([(0, _propTypes.arrayOf)(_propTypes.node), _propTypes.node]),
+
   /** display a close icon to clean the field */
   cleanable: _propTypes.bool,
   disabled: _propTypes.bool,
@@ -162,6 +166,7 @@ Input.propTypes = {
 };
 Input.defaultProps = {
   className: undefined,
+  children: undefined,
   cleanable: true,
   disabled: false,
   error: undefined,

package/cjs/Input/web/Phone.js

@@ -0,0 +1,144 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactPhoneInput = _interopRequireDefault(require("react-phone-input-2"));
+
+var _propTypes = _interopRequireWildcard(require("prop-types"));
+
+var S = _interopRequireWildcard(require("./Phone.style"));
+
+var _Input = _interopRequireDefault(require("./Input"));
+
+var _hooks = require("../../hooks");
+
+var _excluded = ["defaultCountry", "disabled", "readOnly", "error", "full", "helper", "label", "placeholder", "value", "onChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _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; }
+
+var phoneBaseSettings = {
+  onlyCountries: ['ar', 'br', 'cl', 'de', 'es', 'gb', 'ie', 'it', 'mx', 'pt', 'us']
+};
+
+var Phone = /*#__PURE__*/_react["default"].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 = (0, _hooks.useCombinedRefs)(forwardedRef);
+  var currentCountry = (0, _react.useRef)(defaultCountry);
+  var onChangeCountry = (0, _react.useCallback)(function (countryCode) {
+    if (currentCountry.current !== countryCode) {
+      inputRef.current.focus();
+      currentCountry.current = countryCode;
+    }
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_Input["default"], _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["default"].createElement(S.Container, {
+    error: error,
+    disabled: disabled,
+    full: full
+  }, /*#__PURE__*/_react["default"].createElement(_reactPhoneInput["default"], _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: _propTypes.string,
+
+  /** display a close icon to clean the field */
+  cleanable: _propTypes.bool,
+
+  /** default country to be selected on the dropdown */
+  defaultCountry: _propTypes["default"].string,
+
+  /** disable the whole input */
+  disabled: _propTypes.bool,
+
+  /** display a error message and error style */
+  error: _propTypes.string,
+
+  /** should occupy the whole container width */
+  full: _propTypes.bool,
+
+  /** a helper text to be displayed below field */
+  helper: _propTypes.string,
+
+  /** label for the input */
+  label: _propTypes.string,
+
+  /** make the input read only */
+  readOnly: _propTypes.bool,
+
+  /** value of the input */
+  value: _propTypes.string,
+
+  /** callback invoked when value changes, either by typing of selecting a country */
+  onChange: _propTypes.func,
+
+  /** placeholder to show when the input is cleared */
+  placeholder: _propTypes.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'
+};
+var _default = Phone;
+exports["default"] = _default;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Container = void 0;
+
+require("react-phone-input-2/lib/material.css");
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _dataImages = require("./data-images");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+
+var flagsPositioning = (0, _styledComponents.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 = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  top: initial;\n  left: initial;\n  margin-top: 0;\n"])));
+var hiddenScrollBar = (0, _styledComponents.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 (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), disabled ? "color: " + colors.text.disabled + ";" : '', error ? "color: " + colors.feedback.attention[1] + ";" : '');
+};
+
+var Container = _styledComponents["default"].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 (0, _styledComponents.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"], _dataImages.chevronSvg, input.label.color.focus, _dataImages.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, _dataImages.checkSvg, colors.clear);
+});
+
+exports.Container = Container;

package/cjs/Input/web/data-images.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports.flagsSprite = exports.chevronSvg = exports.checkSvg = void 0;
+var chevronSvg = encodeURI("\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n    <path fill-rule=\"evenodd\" d=\"M3.146 4.146a.5.5 0 0 1 .708 0L6 6.293l2.146-2.147a.5.5 0 0 1 .708.708l-2.5 2.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708Z\" clip-rule=\"evenodd\"/>\n  </svg>\n");
+exports.chevronSvg = chevronSvg;
+var checkSvg = encodeURI("\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n    <path fill-rule=\"evenodd\" d=\"M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0Z\" clip-rule=\"evenodd\"/>\n  </svg>\n");
+exports.checkSvg = checkSvg;
+var flagsSprite = encodeURI('iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAYAAADxJz2MAAAAAXNSR0IArs4c6QAAEBZJREFUeF7NXHlwXMWZ//XoGB86ZnwIc1hostYBjrM+CCZYWTvYZCvYRIdZAnLIaljA2PEhkQXbRcUa7W7WmCRYSmxnnThItVhaUottTZBIeTEpREQKFz6mloA1EqyeBXb5nifJthgdr7e+N/NGb2bem3lvZli2/8Kj7l9//Xtf99f9/bph0CjLXNw2OHWwmnHLUg4+n4EVBKt5AAgc3H3yuZxmrbZav9U0LbONZ1iqYbEsZWDzOecyHgPzcMYFcMn9yzV/NIX37flPVN/rWLUUwHwAin0CAE96f4c762trDOOh/LANlozqfU8VLy2/1jvf91CtjDf9yH7PIT5LWPvr024c+q4mHosc8KKdg+WwsCZw2GITxAQOqT4ekRtal5czzpqAeHhcAHh9PCIVvG8VPmy7r+hhTRMn/aUB1r80CuC8nq0TYxO5+vVyBO3b+w9FeIh/hqur1sm409p/hdfYbVj/2x763AIwXh9JZBiBC386tItx1Bj1LKrHGVwnn82u12qzuXXFLskkHrPA9YtHj8bF+1bhw4hDYMAkxlxs7VVNvIGBgV3r9ntrWt+9KFeNTSBQtSQPO0686rq99aUQXojAhT8dqmMcLjPkKXUZYw3Hn82qVbfd9B8r6riUGJ6FoaGx6mhMPMMEBlhsYE9fDcM7U/VMXVr+za6srU/KHkYkxiIwSB7S8m9B9rYnG3Jzc2U8mcCFLw5WM8jTLPHCecWJLTltBLCx5b5qwKKJNyUdeGIOMDwOHOoHrvi1u+TMUrG76r908cwRSCO1VLC1V2Q8VP6+uqp0VtOO479DWv4sKCSWltg0p3BXt0ieJ5OXtfWJAOF/ulCBtgfbZAJ/8sZg3/WRUKBIiMSMNC7WlI477Ha7uKlleR+fCDwhvMJsYI0DmGYN/HTVD7QIQO+gZpdi2siYo8H5tiaeeQIhIpM7mFMUUdnRB/CCqtI8qEnsv/w5ZnV/FLYGni+5E7nbXwwnLzDlRUijDubz+aoZS9L7guPnnNduf2O1qOV937kV+M4tgODLgfvDv5JblM39BAX2QfzhLPCHcxokctSCSZp4pgkkeInXsqP/HoYXSeJI18kwAqWBIYx90DvhecH1MmhtLRHYxhgri+V21hsd4OAYmbIqpndyzt3bOx6ihTuEN90a8Lo52UBj1wLUtNPOY6I0PNiJzUtO4ewNYP/HUVPaDc7D8JSWCRHIuXtfwTFIUvh4S0tykPfeMWSWLpTJUkfh9HmFsORmg7yzyxs+VSzgbiaKYp9qHxU2OMv4JVhvtCNzuEP+fWTSMoxMXoXxDGXbFcWnsL3jIZEH9magKUvr3eR0QErLw/NdW+UGAzfG0HHqqmwUlb4tL8ueSFOaPPHYZQWXCwwshKfuLSECAeGyo03ko+OyfVpl9INeDG17Sf5T9o5aZMwr0nUa/rlfIAK5Xo300Q8xZeBFMOm6XIVIGM75IcYy5uqC/pg8kNbpfGDZTRPVRiavhNf/KPov+zEvfypyp6Sjq3sA61/uxTPfOCJ7oVJ0p7Sq1wQJhPfpPF3bE/lDfAIH94CNB/ZJnE3FDdtzhgik9Y7WPaVETt/SklzseOQryJ9hxcend+O+2V2hum9fCEToWOX/E4G6UzhtTJCncMbnb8tjIS/yT1kFKW2m3tg829/4O5tyVFs8IxA4KOr6/NMwre4HUe12PPoVbFn4L/JHGh4LrIO9Q0o1LjBmgYKnbpwggZ6LM1ptbJJVdw0a/aAHQ9t2BafwM8iYV6j7HVlGhsdwECEU/5SVMb1CK4gQeU/OAW6dAjS8uwC1r4cHkV0PdqJmySl8PAgcEAJbG1X5vwkixTnInzEJSsRVBxEi0N91EhcXL9YOIj6fr4YxFqA8ycI5d27vWG0Ds0ThKVPa1DYGklM+k2vgJeSBnDvZmwfojB+yj04YdAK59sJvkD6vGJbcrLAoTJH52gv7Md5/DtsWPSKfWCaK5CQPtDX8Ka1vVIp32I/N7tRMCM8/kOOQMy+Z6bQsRCUjNDfSfeopq+6DC79c85YuXgIECuxpnyOYeZHtU5M33n8eA//8LGadjt5Ik3dGk8gEHFrpkE8icgaGscPJOCAf586T2wIprg2vLC9nFm08mtKrZwOT04DffAJ53dMuklPJzGjhmSaQvE/JzJS/Xl71zZsOK55H5G1b9D3oHuW8IvY+Tl6q9sTzTsrMhJIJi14cagCwORESGUf98S3ZYYmIDa8sb2AWlhAel1C/+7GjMfFMEchZPVt3NQzP5/M1XN+5f7NCXtxkQmleiMTR/nP1jtaXZLywdNZdO4dcnKHOFIkSGk9szdZMgW14ZYWLWczhcbDG3WvejItnnEDWyJ6+qonXV/WM6/lFj9QZTmeV5mGPs7DRbreH8KISqoHMjKWODttxiBTBuVPJwOjVpcwMA6vTSi5EtBE5487dVW8FMiY6RcFbVvi9gjj5QBGMO9laMSYeZWaANHm8cfKBMh4OPhiGF0WgYneAyLSybCufP+QPkMnB6Gjl4XysUxqWmj0uu2jUW4MprjIGFChHPcaYwDn3gEudaaNSM2VejOK9e7qjeu7NS+jMHZXSz+xu6px8ur5ZzrwYLZW/r9731B1llexcwZW/fUo+6tlfaxDasuZ41v7a2wlptBltFVF42gQGNQIwthScDOQF4sulhClrDrTfs9vtxjWHQESuBhCpYcgaCwA3AMN4FOljaSLDh99y3+xcbRhP0UTycqxLLw6OqMcb0IBijDeaQJVGoP54QQLVPxFwvQEiywEY0ERkIilVHnPgRjQR2tNde2G/rNncgd6YeD6fr3zB1hNNEodt7+OF6Dh1Bb968xyMjjecwMp22mBqLrgagDKZjDFXbm6upuYQ3LCa0lgAWQZIShMJEhiwD9xVjB5NvH/93Ue7bp9prVmz+7Rct/25eWh994K8We49/jPNyS/1nwvDmyCwsoMWUjk008ZRSTUpKHoEBkkMaQSqXimaJ6SxAKAtVcKaiJpAsscCNBTBG4aH4HjVY6UMEaXaqHQf+pHu6qnGCxAoR6IJDYN26P1X/HK6yQiBcoDhvMJutysRita75DQWoAJAQppIJIFBT6woRo+MV7L+reru88NNNM6VC6Zj26t0MAFoCise+D8XW2KGn/Q5BRX5zTsCmoiiEdDXUEDpS3R5B2R3Jm+M5YHBnkTOuayJUI5UL0kb06rwPxKOg7QHLY0l1j5Qi0DCscLvcEAQF/2os+9E31ABkUfpNFrzqFBmiJyG1kGj42WR3rfu/ltkICqK3Ef/bQCQvLC22f5V8RP4k/U+uf9cpNUOtsw1rYnoEEiQteUb94rdZ4dD9lFy94P+QMJYPYWNjpehor0NDCENgzywaslNyJ9pxfrf9oamsUFA9wX7PWRLTI3FhBe69xy4zbQmEoNANzvzDupfO1NGM4scJX+6VZ7CuVPS5KxMa9cF2SPPTPpjfDPHJTfD6vZTgb1eoFCmWFn71F/HCIG0Z7pgW6ypYcS3RrOGsLdltmlNJAaBgvtgG/YcOVtAyxLNNvK6F9yB9Df9myQHmsKxgojKUoGhsl1XE1EPySCBOG9bnCBX2s32tMzW/EMCa6CMU1L5c0P2GSQQrBvFhgg01OsXUCnVBM4Sj6XUSiIwFRFTMYqOPnRsi5eIMDoIz97W/JDGom6UoAd6ZonHUmofEUh7o5Qt+sFBpgwv1UEk599cYJKUEvu4xeJm3bijBpBSo4lActofy7al2dJTgufvHXHu/P4005qIXhDhkJwM6bZUjpf1ocDmh1VTwzA6z4L1hBJ4HbxvmQ2j2pqIOTwusKLENBEdAmX7Uj1e+STyEYrKLUhSE4HkVDIf3Ls8aY0F5C1FgWu/ZjURLQLJ+xT7zu1qKk8vvD0pDWj8ks9JKbNQMqEbxQlrIhys/g50hyUOeM/yBiAxTQQc9aw4cU0kkkAt+0gTYSwx+4JpvGhN5DRKXAzcnCYCNJbAq5my4t4VLpjVWMAaWVFymkgEgbr2+Xw+l/TpeVPjtcyeFVsTOY2S6iCJ8bYiIgN3KhkOvfWN99BtVVYHjQuXEW1kjYUVJ6+JBAk0ZF+y49XVRAjYAlbGIYVpDgwWD4fUaYW/mTIbRgODTCSzlIHLe8TA0ZEzARbuAaROpEvNzJEaTeTavv/sHN3yE1P2KeMFpJBmQ0fTeOPVJJBuK5CGwUgTCRdt4moEWoQGI181A5YGBaXgOxEijwkSJHe81LsalzSRe14drF5w5HpK8Iw6gVa9KAJJc7h79rebvjtvbcx3IoNbfi5c3/dqXM3Bi6JyHrjAHufdCT3gia9hKJrI1w8O2u4+NJHw1RicIbxkyKO2YQQq7zoW3LYMlX+9ISb2wPp/wnBrR0zNoQfFuyQdjUUPPJaGoX538vWDg4hDoNxFLLxkyQsjUP2uwwyBBKKlOXhRRGJ6QpqIFl7kuxOjBOrZlwryQgRGvuswS2DwS4c0h2BkSyorzcBDeFrvTswQGGlfqsgLERipOSRCoFpzSFGGJ6RhaGkiZglU25dSArW+boIEkl21t/xiuujvHUvK+5QBWmys1lUyNUoToXuGSz/zY9qhIVw/OmyGj9oSeOnElbLCNh5Y3qZ+10HIkQRmel8Gz5qN0VvvD3WsBJEIS9zFXm0NIyGLOdyb3p94J0JvTujZBF0XVsro2TF8+tgljH6me9FQ3bW7BF66KZGywja1rDilXPZRUInAh2++i56Myj+lX3wPPDMH47Y75X/7v1qDK64jchSOKEJx72xRrbEkZykXNr8/8U6EHuzM+8SPK7snti+5FVORfms6Pn1MffVWt1c5I5OcTeGt2caWFVEpfcUDfX+uQUE/3fuZKEJ+Gez3NkDHA1Hco61hJGr0pvcnWu5cCIy4b+DijhFYV/4N/B3vwP4DC6b9fRZ67zprqIsSeHVPX4YAIirFJPCND5tg7W3CspELcrNjGdMhFj+JB+50fqkEXtqbiZn/3YaLt6/48gnc1Hp/X+Q7DMUDxeFL2PPOP+LzsYDwPCljKn74zZ/BNnmmHoGe4p58m4HLmUY/tmfzcRbSRCpnA0vGxyCUnQdYFsCvw+G+CdeP+XF+61UjmJ4SeBcYqWi0TtwgQiT+ua9dxrvXsUomj8qXEUToYvqWuUD25THcODaCqYszQevPp9+/BAomBkrqg8jGA/fVRL7DSHQbQ1nfvB/PsEnieEo0EWthuvP5aZOiNJGv2YC7z/gx/dAQrpnYxqiz0gbINlSFab3rSJDAL0Rz0Ht3ksBGOuURmBiWI1Kk5pAIgeqvm2qNRUsTMUvgF+F9IQKDJIbedZglUEtzSLXGEvnuxAyBWvYZmp8GKoXtiZR3HSYJ1NUcUq2xqN+dmCBQ1z4D/MStErWppLPxNxyr6h648/GYmshgzQ5xuPlwXE0kWc0hcgTKO5G7Dg4VxMkHGtJE4jIUp4Lurjz4P6OgKxATGsbEM4dOuk0fvI1qyIZENQc98I575lfPec9fZlbDMGSsiUr/C+U5BKMm6UjbAAAAAElFTkSuQmCC');
+exports.flagsSprite = flagsSprite;

package/cjs/Input/web/index.js

@@ -10,6 +10,10 @@ var _Password = _interopRequireDefault(require("./Password"));
 
 exports.Password = _Password["default"];
 
+var _Phone = _interopRequireDefault(require("./Phone"));
+
+exports.Phone = _Phone["default"];
+
 var _Number = _interopRequireDefault(require("./Number"));
 
 exports.InputNumber = _Number["default"];

package/cjs/Text/web/Text.js

@@ -26,7 +26,7 @@ var styledText = function styledText(type, element) {
     element = false;
   }
 
-  return (element ? _styledComponents["default"][type] : _styledComponents["default"].p)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n\n  ", "\n  ", "\n"])), (0, _textStyle["default"])(type), _yogaSystem.system);
+  return (element ? _styledComponents["default"][type] : _styledComponents["default"].p)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    margin: 0;\n    padding: 0;\n    ", "\n    ", "\n"])), (0, _textStyle["default"])(type), _yogaSystem.system);
 };
 
 var H1 = styledText('h1', true);

package/cjs/hooks/index.js

@@ -16,4 +16,12 @@ Object.keys(_useKeyPress).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _useKeyPress[key]) return;
   exports[key] = _useKeyPress[key];
+});
+
+var _useCombinedRefs = require("./useCombinedRefs");
+
+Object.keys(_useCombinedRefs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCombinedRefs[key]) return;
+  exports[key] = _useCombinedRefs[key];
 });

package/cjs/hooks/useCombinedRefs.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCombinedRefs = void 0;
+
+var _react = require("react");
+
+/**
+ *  A hook for combining multiple refs into one ref.
+ */
+var useCombinedRefs = function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  var targetRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    for (var i = 0; i < refs.length; i++) {
+      var ref = refs[i];
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    }
+  }, [refs]);
+  return targetRef;
+};
+
+exports.useCombinedRefs = useCombinedRefs;

package/esm/Accordion/web/Accordion.js

@@ -1,7 +1,11 @@
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
+var _excluded = ["title", "subtitle", "children", "disabled", "expanded"];
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
+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, { useState } from 'react';
 import styled, { css } from 'styled-components';
 import { string, node, bool } from 'prop-types';
@@ -13,7 +17,8 @@ var Accordion = function Accordion(_ref) {
       subtitle = _ref.subtitle,
       children = _ref.children,
       disabled = _ref.disabled,
-      expanded = _ref.expanded;
+      expanded = _ref.expanded,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var _useState = useState(expanded),
       open = _useState[0],
@@ -55,7 +60,7 @@ var Accordion = function Accordion(_ref) {
     var accordion = _ref10.theme.yoga.components.accordion;
     return "\n      padding: " + accordion.paddingArrow.total + "px;\n    ";
   });
-  return /*#__PURE__*/React.createElement(AccordionWrapper, null, /*#__PURE__*/React.createElement(Header, {
+  return /*#__PURE__*/React.createElement(AccordionWrapper, props, /*#__PURE__*/React.createElement(Header, {
     disabled: disabled,
     onClick: function onClick() {
       setOpen(!open);

package/esm/Checkbox/web/Checkbox.js

@@ -133,11 +133,11 @@ var Checkbox = function Checkbox(_ref8) {
       inputRef.current.indeterminate = indeterminate;
     }
   });
-  return /*#__PURE__*/React.createElement(CheckboxWrapper, {
+  return /*#__PURE__*/React.createElement(CheckboxWrapper, _extends({
     style: style,
     className: className,
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(CheckboxStyled, {
+  }, rest), /*#__PURE__*/React.createElement(CheckboxStyled, {
     checked: checked,
     indeterminate: indeterminate,
     inverted: inverted,

package/esm/Datepicker/web/Datepicker.js

@@ -1,4 +1,5 @@
-var _excluded = ["_disabled", "inputFilled"];
+var _excluded = ["_disabled", "inputFilled"],
+    _excluded2 = ["fullWidth", "type", "placeholder", "startDate", "endDate", "onSelectSingle", "disabled", "onSelectRange", "customOnSelectRange", "disablePastDates", "disableFutureDates", "disablePastFrom", "disableFutureFrom", "error", "onOpen", "displayEndDateOnly"];
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -113,7 +114,8 @@ function Datepicker(_ref8) {
       disableFutureFrom = _ref8.disableFutureFrom,
       error = _ref8.error,
       onOpen = _ref8.onOpen,
-      displayEndDateOnly = _ref8.displayEndDateOnly;
+      displayEndDateOnly = _ref8.displayEndDateOnly,
+      props = _objectWithoutPropertiesLoose(_ref8, _excluded2);
 
   var _useState = useState(),
       open = _useState[0],
@@ -213,10 +215,10 @@ function Datepicker(_ref8) {
     }, format(toUTC(start), dateFormat), end && " - " + format(toUTC(end), dateFormat));
   };
 
-  return /*#__PURE__*/React.createElement(Wrapper, {
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({
     fullWidth: fullWidth,
     tabIndex: "0"
-  }, /*#__PURE__*/React.createElement(Selector, {
+  }, props), /*#__PURE__*/React.createElement(Selector, {
     open: open === 'true',
     disabled: disabled,
     error: error,

package/esm/Divider/web/Divider.js

@@ -1,5 +1,11 @@
+var _excluded = ["vertical", "style"];
+
 var _templateObject, _templateObject2;
 
+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; }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import { bool, shape } from 'prop-types';
@@ -14,12 +20,14 @@ var StyledDivider = styled.hr(_templateObject || (_templateObject = _taggedTempl
 });
 var Divider = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var vertical = _ref2.vertical,
-      style = _ref2.style;
-  return /*#__PURE__*/React.createElement(StyledDivider, {
+      style = _ref2.style,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledDivider, _extends({
     vertical: vertical,
     ref: ref,
     style: style
-  });
+  }, props));
 });
 Divider.propTypes = {
   /** If this value is defined, the divider will be in vertical if the flexDirection is row type */

package/esm/Feedback/web/Feedback.js

@@ -1,5 +1,9 @@
+var _excluded = ["variant", "title", "description", "children"];
+
 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 { arrayOf, node, oneOf, oneOfType, string } from 'prop-types';
 import React from 'react';
 import { CheckedFull, AlertCircle, AlertTriangle } from '@gympass/yoga-icons';
@@ -31,7 +35,9 @@ function Feedback(_ref) {
   var variant = _ref.variant,
       title = _ref.title,
       description = _ref.description,
-      children = _ref.children;
+      children = _ref.children,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var iconProps = VARIANT_ICONS[variant];
   var primaryButton;
   var secondaryButton;
@@ -54,7 +60,7 @@ function Feedback(_ref) {
     display: "flex",
     alignItems: "flex-end",
     bg: "white"
-  }, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
+  }, /*#__PURE__*/React.createElement(Content, props, /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
     size: ICON_SIZE,
     mb: "large",
     "data-testid": "feedback-icon"

package/esm/Feedback/web/StyledFeedback.js

@@ -6,7 +6,7 @@ import styled, { css } from 'styled-components';
 import Box from '../../Box';
 import Button from '../../Button';
 import Text from '../../Text';
-export var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
+export var Content = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  @media (min-width: 769px) {\n    margin: auto;\n  }\n"])));
 export var TextContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ", "}\n"])), function (_ref) {
   var feedback = _ref.theme.yoga.components.feedback;
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      max-width: 100%;\n      @media (min-width: 769px) {\n        max-width: ", "px;\n      }\n    "])), feedback.text.maxWidth);

package/esm/Header/web/Header.js

@@ -1,5 +1,11 @@
+var _excluded = ["link", "logo", "children"];
+
 var _templateObject, _templateObject2, _templateObject3;
 
+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; }
+
 function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
 
 import React from 'react';
@@ -15,16 +21,18 @@ var StyledHeader = styled(Box)(_templateObject || (_templateObject = _taggedTemp
 
 var Header = function Header(_ref2) {
   var link = _ref2.link,
+      logo = _ref2.logo,
       children = _ref2.children,
-      logo = _ref2.logo;
-  return /*#__PURE__*/React.createElement(StyledHeader, {
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+
+  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
     as: "header",
     d: "flex",
     elevation: "medium",
     bgColor: "white",
     alignItems: "center",
     w: "100%"
-  }, link ? /*#__PURE__*/React.createElement("a", {
+  }, props), link ? /*#__PURE__*/React.createElement("a", {
     href: link
   }, /*#__PURE__*/React.createElement(Logo, {
     customLogo: logo

package/esm/Heading/web/Heading.js

@@ -1,3 +1,9 @@
+var _excluded = ["children", "noPadding"];
+
+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 from 'react';
 import PropTypes, { bool } from 'prop-types';
 import StyledHeading, { Button } from './StyledHeading';
@@ -8,7 +14,9 @@ import RightButton from './RightButton';
 
 var Heading = function Heading(_ref) {
   var children = _ref.children,
-      noPadding = _ref.noPadding;
+      noPadding = _ref.noPadding,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
   var backButton = null;
   var title = null;
   var rightButtons = [];
@@ -28,9 +36,9 @@ var Heading = function Heading(_ref) {
     defineComponent(children);
   }
 
-  return /*#__PURE__*/React.createElement(StyledHeading, {
+  return /*#__PURE__*/React.createElement(StyledHeading, _extends({
     noPadding: noPadding
-  }, backButton || /*#__PURE__*/React.createElement(Button, null), title || /*#__PURE__*/React.createElement(Box, {
+  }, props), backButton || /*#__PURE__*/React.createElement(Button, null), title || /*#__PURE__*/React.createElement(Box, {
     w: "100%"
   }), /*#__PURE__*/React.createElement(Box, {
     display: "flex",

package/esm/Input/index.js

@@ -1,6 +1,7 @@
-import { Input, Password, Email, InputNumber, Tel } from './web';
+import { Input, Password, Email, InputNumber, Tel, Phone } from './web';
 Input.Password = Password;
 Input.Email = Email;
 Input.Number = InputNumber;
 Input.Tel = Tel;
+Input.Phone = Phone;
 export default Input;

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/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);
+});

package/esm/Input/web/data-images.js

@@ -0,0 +1,3 @@
+export var chevronSvg = encodeURI("\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n    <path fill-rule=\"evenodd\" d=\"M3.146 4.146a.5.5 0 0 1 .708 0L6 6.293l2.146-2.147a.5.5 0 0 1 .708.708l-2.5 2.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 0-.708Z\" clip-rule=\"evenodd\"/>\n  </svg>\n");
+export var checkSvg = encodeURI("\n  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\">\n    <path fill-rule=\"evenodd\" d=\"M9.854 3.146a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 1 1 .708-.708L5 7.293l4.146-4.147a.5.5 0 0 1 .708 0Z\" clip-rule=\"evenodd\"/>\n  </svg>\n");
+export var flagsSprite = encodeURI('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');

package/esm/Input/web/index.js

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

package/esm/Text/web/Text.js

@@ -14,7 +14,7 @@ var styledText = function styledText(type, element) {
     element = false;
   }
 
-  return (element ? styled[type] : styled.p)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin: 0;\n  padding: 0;\n\n  ", "\n  ", "\n"])), textStyle(type), system);
+  return (element ? styled[type] : styled.p)(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    margin: 0;\n    padding: 0;\n    ", "\n    ", "\n"])), textStyle(type), system);
 };
 
 var H1 = styledText('h1', true);

package/esm/hooks/index.js

@@ -1,2 +1,3 @@
 export * from './usePortal';
-export * from './useKeyPress';
+export * from './useKeyPress';
+export * from './useCombinedRefs';

package/esm/hooks/useCombinedRefs.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react';
+/**
+ *  A hook for combining multiple refs into one ref.
+ */
+
+export var useCombinedRefs = function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  var targetRef = useRef(null);
+  useEffect(function () {
+    for (var i = 0; i < refs.length; i++) {
+      var ref = refs[i];
+      if (!ref) return;
+
+      if (typeof ref === 'function') {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    }
+  }, [refs]);
+  return targetRef;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.64.4",
+  "version": "7.66.0",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -39,7 +39,8 @@
     "prop-types": "^15.7.2",
     "proxy-polyfill": "^0.3.1",
     "rc-slider": "^8.7.1",
-    "react-google-font-loader": "^1.1.0"
+    "react-google-font-loader": "^1.1.0",
+    "react-phone-input-2": "^2.15.1"
   },
   "devDependencies": {
     "@testing-library/react": "^12.0.4",
@@ -52,7 +53,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "7796e568fc72db2f5820bb7287c05d05a4d52768",
+  "gitHead": "be5fcc8bdaa4f8d32ae3f78815ef7f669ccbcfe2",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"