@digigov/react-core 0.22.0 → 0.23.0

package/es/NavListItem/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "layout", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -11,15 +11,13 @@ import clsx from 'clsx';
  */
 export var NavListItem = /*#__PURE__*/React.forwardRef(function NavHeaderListItem(_ref, ref) {
   var className = _ref.className,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "li",
     ref: ref,
-    className: clsx(className, layout === 'horizontal' && 'govgr-horizontal-nav__list-item', layout === 'vertical' && 'govgr-vertical-nav__list-item')
+    className: clsx(className, true && 'govgr-nav__list-item')
   }, props), children);
 });
 export default NavListItem;

package/es/NavListItemButton/__snapshots__/index.test.tsx.snap

@@ -6,18 +6,18 @@ exports[`renders the NavListItemButton with active=false 1`] = `
 >
   <ForwardRef(Button)
     aria-selected={false}
-    className="govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       aria-selected={false}
       as="button"
-      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
         aria-selected={false}
-        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)
@@ -58,18 +58,18 @@ exports[`renders the NavListItemButton with active=true 1`] = `
 >
   <ForwardRef(Button)
     aria-selected={true}
-    className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       aria-selected={true}
       as="button"
-      className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
         aria-selected={true}
-        className="govgr-horizontal-nav__list-item-btn--active govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn--active govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)
@@ -107,16 +107,16 @@ exports[`renders the NavListItemButton with active=true 1`] = `
 exports[`renders the NavListItemButton with no props 1`] = `
 <ForwardRef(NavListItemButton)>
   <ForwardRef(Button)
-    className="govgr-horizontal-nav__list-item-btn"
+    className="govgr-nav__list-item-btn"
     variant="link"
   >
     <ForwardRef(Base)
       as="button"
-      className="govgr-horizontal-nav__list-item-btn govgr-link"
+      className="govgr-nav__list-item-btn govgr-link"
       printHidden={true}
     >
       <button
-        className="govgr-horizontal-nav__list-item-btn govgr-link govgr-print-hidden"
+        className="govgr-nav__list-item-btn govgr-link govgr-print-hidden"
       >
         hello
         <ForwardRef(ArrowIcon)

package/es/NavListItemButton/index.js

@@ -21,7 +21,7 @@ export var NavListItemButton = /*#__PURE__*/React.forwardRef(function NavListIte
     variant: "link",
     ref: ref,
     "aria-selected": active,
-    className: clsx(className, active === true && 'govgr-horizontal-nav__list-item-btn--active', true && 'govgr-horizontal-nav__list-item-btn')
+    className: clsx(className, active === true && 'govgr-nav__list-item-btn--active', true && 'govgr-nav__list-item-btn')
   }, props), children, arrow && /*#__PURE__*/React.createElement(ArrowIcon, {
     direction: active ? 'up' : 'down'
   }));

package/es/NavListItemLink/__snapshots__/index.test.tsx.snap

@@ -5,17 +5,14 @@ exports[`renders the NavListItemLink with active=false 1`] = `
   active={false}
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>
@@ -29,17 +26,14 @@ exports[`renders the NavListItemLink with active=true 1`] = `
   active={true}
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link--active govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link--active govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link--active govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link--active govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>
@@ -54,16 +48,16 @@ exports[`renders the NavListItemLink with href and active=false 1`] = `
   href="/"
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
+    className="govgr-nav__list-item-link"
     href="/"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
+      className="govgr-nav__list-item-link govgr-link"
       href="/"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
+        className="govgr-nav__list-item-link govgr-link"
         href="/"
       >
         hello
@@ -79,16 +73,16 @@ exports[`renders the NavListItemLink with href and active=true 1`] = `
   href="/"
 >
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
+    className="govgr-nav__list-item-link"
     href="/"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
+      className="govgr-nav__list-item-link govgr-link"
       href="/"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
+        className="govgr-nav__list-item-link govgr-link"
         href="/"
       >
         hello
@@ -101,17 +95,14 @@ exports[`renders the NavListItemLink with href and active=true 1`] = `
 exports[`renders the NavListItemLink with no props 1`] = `
 <ForwardRef(NavListItemLink)>
   <ForwardRef(LinkBase)
-    className="govgr-horizontal-nav__list-item-link"
-    href="#"
+    className="govgr-nav__list-item-link"
   >
     <ForwardRef(Base)
       as="a"
-      className="govgr-horizontal-nav__list-item-link govgr-link"
-      href="#"
+      className="govgr-nav__list-item-link govgr-link"
     >
       <a
-        className="govgr-horizontal-nav__list-item-link govgr-link"
-        href="#"
+        className="govgr-nav__list-item-link govgr-link"
       >
         hello
       </a>

package/es/NavListItemLink/index.js

@@ -10,8 +10,7 @@ import Link from '@digigov/react-core/LinkBase';
  */
 export var NavListItemLink = /*#__PURE__*/React.forwardRef(function NavListItemLink(_ref, ref) {
   var active = _ref.active,
-      _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '#' : _ref$href,
+      href = _ref.href,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -19,7 +18,7 @@ export var NavListItemLink = /*#__PURE__*/React.forwardRef(function NavListItemL
   return /*#__PURE__*/React.createElement(Link, _extends({
     href: href,
     ref: ref,
-    className: clsx(className, active === true && 'govgr-horizontal-nav__list-item-link--active', true && 'govgr-horizontal-nav__list-item-link')
+    className: clsx(className, active === true && 'govgr-nav__list-item-link--active', true && 'govgr-nav__list-item-link')
   }, props), children);
 });
 export default NavListItemLink;

package/es/NavMenu/__snapshots__/index.test.tsx.snap

@@ -5,11 +5,11 @@ exports[`renders the NavMenu with no props 1`] = `
   <ForwardRef(Base)
     aria-hidden={true}
     as="div"
-    className="govgr-nav-list__menu govgr-nav-list__menu-hidden"
+    className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
   >
     <div
       aria-hidden={true}
-      className="govgr-nav-list__menu govgr-nav-list__menu-hidden"
+      className="govgr-nav-menu--horizontal govgr-nav-menu--hidden govgr-nav-menu"
     >
       hello
     </div>

package/es/NavMenu/index.js

@@ -21,7 +21,7 @@ export var NavMenu = /*#__PURE__*/React.forwardRef(function NavMenu(_ref, ref) {
     as: "div",
     ref: ref,
     "aria-hidden": !active,
-    className: clsx(className, layout === 'horizontal' && 'govgr-nav-list__menu', layout === 'vertical' && 'govgr-vertical-nav-list__menu', !active && 'govgr-nav-list__menu-hidden')
+    className: clsx(className, layout === 'horizontal' && 'govgr-nav-menu--horizontal', layout === 'vertical' && 'govgr-nav-menu--vertical', !active && 'govgr-nav-menu--hidden', true && 'govgr-nav-menu')
   }, props), children);
 });
 export default NavMenu;

package/es/NavMenuContainer/index.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "layout", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Container from '@digigov/react-core/Container';
 
 /**
@@ -19,7 +18,7 @@ export var NavMenuContainer = /*#__PURE__*/React.forwardRef(function NavMenuCont
   return /*#__PURE__*/React.createElement(Container, _extends({
     cols: layout === 'horizontal',
     ref: ref,
-    className: clsx(className)
+    className: className
   }, props), children);
 });
 export default NavMenuContainer;

package/es/NavMenuContainerContent/index.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children"];
 import React from 'react';
-import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
 
 /**
@@ -19,7 +18,7 @@ export var NavMenuContainerContent = /*#__PURE__*/React.forwardRef(function NavM
     item: true,
     md: 2,
     ref: ref,
-    className: clsx(className)
+    className: className
   }, props), children);
 });
 export default NavMenuContainerContent;

package/es/NavMenuContainerContentList/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the NavMenuContainerContentList with no props 1`] = `
 <ForwardRef(NavMenuContainerContentList)>
   <ForwardRef(Base)
     as="ul"
-    className="govgr-nav-list__content-list"
+    className="govgr-nav-menu__content-list"
   >
     <ul
-      className="govgr-nav-list__content-list"
+      className="govgr-nav-menu__content-list"
     >
       hello
     </ul>

package/es/NavMenuContainerContentList/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "layout", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import Base from '@digigov/react-core/Base';
 import clsx from 'clsx';
@@ -11,15 +11,13 @@ import clsx from 'clsx';
  */
 export var NavMenuContainerContentList = /*#__PURE__*/React.forwardRef(function NavMenuContainerContentList(_ref, ref) {
   var className = _ref.className,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "ul",
     ref: ref,
-    className: clsx(className, layout === 'horizontal' && 'govgr-nav-list__content-list', layout === 'vertical' && 'govgr-vertical-nav-list__content-list')
+    className: clsx(className, true && 'govgr-nav-menu__content-list')
   }, props), children);
 });
 export default NavMenuContainerContentList;

package/es/NavMenuContainerContentListItem/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the NavMenuContainerContentListItem with no props 1`] = `
 <ForwardRef(NavMenuContainerContentListItem)>
   <ForwardRef(Base)
     as="li"
-    className="govgr-nav-list__content-list-item"
+    className="govgr-nav-menu__content-list-item"
   >
     <li
-      className="govgr-nav-list__content-list-item"
+      className="govgr-nav-menu__content-list-item"
     >
       hello
     </li>

package/es/NavMenuContainerContentListItem/index.js

@@ -17,7 +17,7 @@ export var NavMenuContainerContentListItem = /*#__PURE__*/React.forwardRef(funct
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "li",
     ref: ref,
-    className: clsx(className, true && 'govgr-nav-list__content-list-item')
+    className: clsx(className, true && 'govgr-nav-menu__content-list-item')
   }, props), children);
 });
 export default NavMenuContainerContentListItem;

package/es/NavMenuContainerTitle/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "layout", "children"];
+var _excluded = ["className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Grid from '@digigov/react-core/Grid';
@@ -13,8 +13,6 @@ import Heading from '@digigov/react-core/Heading';
  */
 export var NavMenuContainerTitle = /*#__PURE__*/React.forwardRef(function NavMenuContainerTitle(_ref, ref) {
   var className = _ref.className,
-      _ref$layout = _ref.layout,
-      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -22,11 +20,11 @@ export var NavMenuContainerTitle = /*#__PURE__*/React.forwardRef(function NavMen
     item: true,
     md: 1,
     ref: ref,
-    className: clsx(className, layout === 'vertical' && 'govgr-vertical-nav-list__container-title')
+    className: clsx(className, true && 'govgr-nav-menu__container-title')
   }, props), /*#__PURE__*/React.createElement(Heading, {
     element: "h3",
     size: "m",
-    className: clsx(layout === 'vertical' && 'govgr-vertical-nav-list__container-title-heading')
+    className: clsx(true && 'govgr-nav-menu__container-title-heading')
   }, children));
 });
 export default NavMenuContainerTitle;

package/es/SingleCharacterInputContainer/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SingleCharacterInputContainer with no props 1`] = `
+<ForwardRef(SingleCharacterInputContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-single-character-input--container"
+  >
+    <div
+      className="govgr-single-character-input--container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputContainer)>
+`;

package/es/SingleCharacterInputContainer/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ * Details for the SingleCharacterInputContainer.
+ * It is used as a parent component to wrap SingleCharacterInput component.
+ *
+ */
+export var SingleCharacterInputContainer = /*#__PURE__*/React.forwardRef(function SingleCharacterInputContainer(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, true && 'govgr-single-character-input--container')
+  }, props), children);
+});
+export default SingleCharacterInputContainer;

package/es/SingleCharacterInputContainer/index.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import SingleCharacterInputContainer from '@digigov/react-core/SingleCharacterInputContainer';
+
+var _ref = /*#__PURE__*/React.createElement(SingleCharacterInputContainer, null, "hello");
+
+it('renders the SingleCharacterInputContainer with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/es/SingleCharacterInputItem/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,173 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SingleCharacterInputItem with maxLength prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  maxLength={6}
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={6}
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={6}
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name and error props 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name and error props 2`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  name="single-character-input"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    name="single-character-input"
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      name="single-character-input"
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with name, pattern, maxLength and error props 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  error={true}
+  maxLength={6}
+  name="single-character-input"
+  pattern="\\\\d{1}"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={6}
+    name="single-character-input"
+    pattern="\\\\d{1}"
+    type="text"
+  >
+    <input
+      className="govgr-error-input govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={6}
+      name="single-character-input"
+      pattern="\\\\d{1}"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with no props 1`] = `
+<ForwardRef(SingleCharacterInputItem)>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    pattern="[0-9]*"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      pattern="[0-9]*"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;
+
+exports[`renders the SingleCharacterInputItem with pattern prop 1`] = `
+<ForwardRef(SingleCharacterInputItem)
+  pattern="\\\\d{1}"
+>
+  <ForwardRef(Base)
+    as="input"
+    className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+    inputMode="numeric"
+    maxLength={1}
+    pattern="\\\\d{1}"
+    type="text"
+  >
+    <input
+      className="govgr-otp-input__item govgr-input govgr-otp-input--width"
+      inputMode="numeric"
+      maxLength={1}
+      pattern="\\\\d{1}"
+      type="text"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SingleCharacterInputItem)>
+`;

package/es/SingleCharacterInputItem/index.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "error", "className", "pattern", "maxLength"];
+import React from 'react';
+import Base from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+/**
+ * Details for the SingleCharacterInputItem.
+ * SingleCharacterInputItem component is used for displaying simple digital character inputs.
+ * SingleCharacterInputItem component must be included inside SingleCharacterInputContainer component as children component
+ */
+export var SingleCharacterInputItem = /*#__PURE__*/React.forwardRef(function SingleCharacterInputItem(_ref, ref) {
+  var name = _ref.name,
+      error = _ref.error,
+      className = _ref.className,
+      _ref$pattern = _ref.pattern,
+      pattern = _ref$pattern === void 0 ? '[0-9]*' : _ref$pattern,
+      _ref$maxLength = _ref.maxLength,
+      maxLength = _ref$maxLength === void 0 ? 1 : _ref$maxLength,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Base, _extends({
+    as: "input",
+    ref: ref,
+    type: "text",
+    pattern: pattern,
+    maxLength: maxLength,
+    inputMode: "numeric",
+    name: name,
+    className: clsx(error === true && 'govgr-error-input', className && className, true && ['govgr-otp-input__item', 'govgr-input', 'govgr-otp-input--width'])
+  }, props)));
+});
+export default SingleCharacterInputItem;