@gympass/yoga 7.87.1 → 7.88.0

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

@@ -1,38 +1,332 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Phone_style_exports = {};
+__export(Phone_style_exports, {
+  Container: () => Container
+});
+module.exports = __toCommonJS(Phone_style_exports);
+var import_styled_components = __toESM(require("styled-components"));
+var import_data_images = require("./data-images");
+const flagsPositioning = import_styled_components.css`
+  .ar {
+    background-position: 0px 0px;
+  }
 
-exports.__esModule = true;
-exports.Container = void 0;
+  .br {
+    background-position: -20px 0px;
+  }
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+  .cl {
+    background-position: 0px -20px;
+  }
 
-var _dataImages = require("./data-images");
+  .de {
+    background-position: -20px -20px;
+  }
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+  .es {
+    background-position: -20px -40px;
+  }
 
-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); }
+  .gb {
+    background-position: -60px 0px;
+  }
 
-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; }
+  .ie {
+    background-position: -40px 0px;
+  }
 
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
+  .it {
+    background-position: -40px -20px;
+  }
 
-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 hiddenScrollBar = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  ::-webkit-scrollbar {\n    display: none;\n  }\n\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n"])));
+  .mx {
+    background-position: 0px -40px;
+  }
 
-var labelStateColors = function labelStateColors(_ref) {
-  var disabled = _ref.disabled,
-      error = _ref.error,
-      colors = _ref.theme.yoga.colors;
-  return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  ", "\n  ", "\n"])), disabled ? "color: " + colors.text.disabled + ";" : '', error ? "color: " + colors.feedback.attention[1] + ";" : '');
-};
+  .pt {
+    background-position: -40px -40px;
+  }
 
-var Container = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _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)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n    .react-tel-input {\n      box-sizing: border-box;\n      position: relative;\n      width: 100%;\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        position: absolute;\n        top: -", "px;\n        display: block;\n        background: white;\n        padding: 0 ", "px;\n        white-space: nowrap;\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      input[disabled] + .flag-dropdown:hover {\n        cursor: not-allowed;\n      }\n\n      .form-control {\n        background: transparent;\n        border: none;\n        width: 100%;\n        outline: none;\n        grid-area: input;\n        color: ", ";\n        font-family: ", ", sans-serif;\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        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          cursor: pointer;\n          background: transparent;\n        }\n      }\n\n      .selected-flag {\n        display: flex;\n        position: relative;\n        width: 52px;\n        height: 100%;\n        padding: 0;\n        padding-left: ", "px;\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          display: flex;\n          align-items: center;\n\n          .arrow {\n            background-color: ", ";\n            mask-image: url('data:image/svg+xml;utf8,", "');\n            width: 16px;\n            height: 16px;\n            transition: 0.6s, color 0.1s;\n            position: relative;\n            left: ", "px;\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        background-repeat: no-repeat;\n      }\n\n      ", ";\n\n      .country-list {\n        background-color: white;\n        position: absolute;\n        padding: 0;\n        outline: none;\n        overflow-y: scroll;\n        list-style: none;\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            margin-right: ", "px;\n          }\n\n          .country-name {\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, spacing.xxsmall, spacing.xxxsmall, 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, baseFont.family, input.font.size, spacing.xsmall, input.font.color["default"], spacing.xxxsmall, disabled ? 0.5 : 1, input.border.color["default"], spacing.xxxsmall, input.label.color["default"], _dataImages.chevronSvg, spacing.large + spacing.xxxsmall, 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, spacing.small, spacing.xxxsmall, colors.primary, colors.primary, _dataImages.checkSvg, colors.clear);
-});
+  .us {
+    background-position: -60px -20px;
+  }
+`;
+const hiddenScrollBar = import_styled_components.css`
+  ::-webkit-scrollbar {
+    display: none;
+  }
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+`;
+const labelStateColors = ({
+  disabled,
+  error,
+  theme: {
+    yoga: { colors }
+  }
+}) => import_styled_components.css`
+  ${disabled ? `color: ${colors.text.disabled};` : ""}
+  ${error ? `color: ${colors.feedback.attention[1]};` : ""}
+`;
+const Container = import_styled_components.default.div`
+  --fieldset-left-offset: 12px;
+  --dropdown-zIndex: 1;
+
+  height: inherit;
+
+  ${({
+  disabled,
+  theme: {
+    yoga: {
+      spacing,
+      colors,
+      baseFont,
+      components: { input }
+    }
+  }
+}) => import_styled_components.css`
+    .react-tel-input {
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      height: inherit;
+      font-family: ${baseFont.family}, sans-serif;
+      font-size: ${input.font.size}px;
+      font-weight: ${input.font.weight};
+      display: grid;
+      grid-template-areas: 'dropdown input';
+      grid-template-columns: min-content 1fr;
+
+      .special-label {
+        position: absolute;
+        top: -${spacing.xxsmall}px;
+        display: block;
+        background: white;
+        padding: 0 ${spacing.xxxsmall}px;
+        white-space: nowrap;
+        font-size: ${input.label.font.size.typed}px;
+        color: ${input.label.color.default};
+        letter-spacing: normal;
+        ${labelStateColors};
+      }
+
+      &:focus-within {
+        .special-label {
+          font-weight: ${input.label.font.weight.typed};
+          color: ${input.label.color.focus};
+          ${labelStateColors};
+        }
+      }
+
+      input[disabled] + .flag-dropdown:hover {
+        cursor: not-allowed;
+      }
+
+      .form-control {
+        background: transparent;
+        border: none;
+        width: 100%;
+        outline: none;
+        grid-area: input;
+        color: ${disabled ? colors.text.disabled : input.font.color.focus};
+        font-family: ${baseFont.family}, sans-serif;
+        font-size: ${input.font.size}px;
+        padding-left: ${spacing.xsmall}px;
+
+        &:disabled {
+          cursor: not-allowed;
+        }
+
+        &::placeholder {
+          color: ${input.font.color.default};
+        }
+
+        &:hover,
+        &:focus {
+          box-shadow: none;
+        }
+
+        &.open {
+          z-index: calc(var(--dropdown-zIndex) + 1);
+        }
+      }
+
+      .flag-dropdown {
+        border: none;
+        width: inherit;
+        grid-area: dropdown;
+
+        &.open {
+          width: 100%;
+          z-index: var(--dropdown-zIndex);
+        }
+
+        &.open,
+        &.open .selected-flag,
+        &:hover,
+        &:focus {
+          cursor: pointer;
+          background: transparent;
+        }
+      }
 
-exports.Container = Container;
+      .selected-flag {
+        display: flex;
+        position: relative;
+        width: 52px;
+        height: 100%;
+        padding: 0;
+        padding-left: ${spacing.xxxsmall}px;
+        align-items: center;
+        opacity: ${disabled ? 0.5 : 1};
+
+        &::after {
+          content: '';
+          position: absolute;
+          background-color: ${input.border.color.default};
+          height: 28px;
+          right: -${spacing.xxxsmall}px;
+          width: 1px;
+          top: 50%;
+          transform: translate(0, -50%);
+        }
+
+        .flag {
+          display: flex;
+          align-items: center;
+
+          .arrow {
+            background-color: ${input.label.color.default};
+            mask-image: url('data:image/svg+xml;utf8,${import_data_images.chevronSvg}');
+            width: 16px;
+            height: 16px;
+            transition: 0.6s, color 0.1s;
+            position: relative;
+            left: ${spacing.large + spacing.xxxsmall}px;
+
+            &.up {
+              border: none;
+              transform: rotateX(180deg);
+            }
+
+            &:hover,
+            &:focus {
+              border: none;
+              background-color: ${input.label.color.focus};
+            }
+          }
+        }
+      }
+
+      .flag {
+        width: 20px;
+        height: 20px;
+        background-image: url('data:image/png;base64,${import_data_images.flagsSprite}');
+        background-repeat: no-repeat;
+      }
+
+      ${flagsPositioning};
+
+      .country-list {
+        background-color: white;
+        position: absolute;
+        padding: 0;
+        outline: none;
+        overflow-y: scroll;
+        list-style: none;
+        max-height: 18rem;
+        margin: -${spacing.xxsmall}px 0 0 calc(-1 * var(--fieldset-left-offset) -
+              1px);
+        width: calc(100% + var(--fieldset-left-offset) + 2px);
+        z-index: var(--dropdown-zIndex);
+        border: 1px solid ${input.border.color.typed};
+        border-top: 0;
+        border-bottom-left-radius: ${spacing.xxsmall}px;
+        border-bottom-right-radius: ${spacing.xxsmall}px;
+
+        ${hiddenScrollBar};
+
+        .country {
+          display: flex;
+          align-items: center;
+          outline: 0;
+          padding: ${spacing.xsmall}px ${spacing.small}px ${spacing.xsmall}px
+            ${spacing.small}px;
+          color: ${input.font.color.focus};
+
+          .flag {
+            margin-right: ${spacing.small}px;
+          }
+
+          .country-name {
+            margin-right: ${spacing.xxxsmall}px;
+          }
+
+          .dial-code {
+            color: inherit;
+            display: flex;
+            flex: 1;
+
+            ::before {
+              content: '(';
+            }
+
+            ::after {
+              content: ')';
+            }
+          }
+
+          &.highlight {
+            background-color: transparent;
+            color: ${colors.primary};
+
+            &::after {
+              content: '';
+              background-color: ${colors.primary};
+              mask-image: url('data:image/svg+xml;utf8,${import_data_images.checkSvg}');
+              width: 16px;
+              height: 16px;
+            }
+          }
+
+          &.focus,
+          &:hover {
+            background-color: ${colors.clear};
+          }
+        }
+      }
+    }
+  `}
+`;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Container
+});

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

@@ -0,0 +1,112 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("@testing-library/react");
+var import__ = require("../..");
+const numbersFormats = [
+  {
+    country: "BR",
+    base: "+5511959112508",
+    expected: "+55 (11) 959112508"
+  },
+  {
+    country: "US",
+    base: "+12025550134",
+    expected: "+1 (202) 555-0134"
+  },
+  {
+    country: "PT",
+    base: "+351911803423",
+    expected: "+351 911 803 423"
+  }
+];
+describe("<Input.Phone />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, {}) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match with disabled input", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, { disabled: true }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match with error", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input, { error: "Error message" }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+    it("should match with full width", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Password, { label: "Label", full: true }) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+  describe("Behaviour", () => {
+    numbersFormats.forEach((spec) => {
+      it(`Should render number in ${spec.country} format according to phone value`, () => {
+        const { getByDisplayValue } = (0, import_react2.render)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, { value: spec.base }) })
+        );
+        expect(getByDisplayValue(spec.expected)).toBeInTheDocument();
+      });
+    });
+    it("should prefix the phone number with newly selected country dial code", () => __async(exports, null, function* () {
+      const { getByRole, getByText, getByDisplayValue } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Phone, { defaultCountry: "us" }) })
+      );
+      yield (0, import_react2.waitFor)(() => {
+        import_react2.fireEvent.click(getByRole("button"));
+        import_react2.fireEvent.click(getByText("Portugal"));
+      });
+      expect(getByDisplayValue("+351")).toBeInTheDocument();
+    }));
+  });
+});

package/cjs/Input/web/Tel.js

@@ -1,23 +1,55 @@
 "use strict";
-
-exports.__esModule = true;
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Input = _interopRequireDefault(require("./Input"));
-
-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); }
-
-var Tel = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
-    ref: ref
-  }, props, {
-    type: "tel"
-  }));
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Tel_exports = {};
+__export(Tel_exports, {
+  default: () => Tel_default
 });
-
-var _default = Tel;
-exports["default"] = _default;
+module.exports = __toCommonJS(Tel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_Input = __toESM(require("./Input"));
+const Tel = import_react.default.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Input.default, __spreadProps(__spreadValues({ ref }, props), { type: "tel" })));
+var Tel_default = Tel;

package/cjs/Input/web/Tel.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react2 = require("@testing-library/react");
+var import__ = require("../..");
+describe("<Input.Tel />", () => {
+  describe("Snapshots", () => {
+    it("should match with default input", () => {
+      const { container } = (0, import_react2.render)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import__.Input.Tel, {}) })
+      );
+      expect(container).toMatchSnapshot();
+    });
+  });
+});