@digigov/react-core 1.0.0-rc → 1.0.0-rc.2

package/es/CloseButton/index.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import CloseButton from '@digigov/react-core/CloseButton';
+
+var _ref = /*#__PURE__*/React.createElement(CloseButton, null);
+
+it('renders the CloseButton', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(CloseButton, {
+  label: "\u039A\u03BB\u03B5\u03AF\u03C3\u03B9\u03BC\u03BF"
+});
+
+it('renders the CloseButton with label prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});

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

@@ -2,28 +2,24 @@
 
 exports[`renders the Container with cols={false} prop 1`] = `
 <ForwardRef(Container)
-  cols={false}
   fullWidth={true}
+  grid={false}
 >
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-full-width-container"
+  <ForwardRef(Grid)
+    className="govgr-container--full-width govgr-container"
+    container={false}
   >
-    <div
-      className="govgr-full-width-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container"
     >
-      <ForwardRef(Base)
-        as="div"
-        className=""
+      <div
+        className="govgr-container--full-width govgr-container"
       >
-        <div
-          className=""
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
@@ -31,48 +27,50 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <ForwardRef(Container)
   fullWidth={true}
 >
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-full-width-container"
+  <ForwardRef(Grid)
+    className="govgr-container--full-width govgr-container"
+    container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
-    <div
-      className="govgr-full-width-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
 exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-width-container"
+  <ForwardRef(Grid)
+    className="govgr-container"
+    container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
-    <div
-      className="govgr-width-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container govgr-gap-sm-12 govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;

package/es/Container/index.js

@@ -1,29 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["cols", "fullWidth", "className", "children"];
+var _excluded = ["grid", "fullWidth", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
-import Base from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
 
 /**
  * Use Container as a wrapper.
  */
 export var Container = /*#__PURE__*/React.forwardRef(function Container(_ref, ref) {
-  var _ref$cols = _ref.cols,
-      cols = _ref$cols === void 0 ? true : _ref$cols,
+  var _ref$grid = _ref.grid,
+      grid = _ref$grid === void 0 ? true : _ref$grid,
       _ref$fullWidth = _ref.fullWidth,
       fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Base, _extends({
-    as: "div",
+  return /*#__PURE__*/React.createElement(Grid, _extends({
+    container: grid,
+    spacing: grid ? {
+      sm: 12
+    } : undefined,
     ref: ref,
-    className: clsx(className, !fullWidth && 'govgr-width-container', fullWidth && 'govgr-full-width-container')
-  }, props), /*#__PURE__*/React.createElement(Base, {
-    as: "div",
-    className: clsx(cols && 'govgr-main-wrapper')
-  }, children));
+    className: clsx(className, fullWidth && 'govgr-container--full-width', true && 'govgr-container')
+  }, props), children);
 });
 export default Container;

package/es/Container/index.test.js

@@ -18,7 +18,7 @@ it('renders the Container with fullWidth prop', function () {
 
 var _ref3 = /*#__PURE__*/React.createElement(Container, {
   fullWidth: true,
-  cols: false
+  grid: false
 }, "hello");
 
 it('renders the Container with cols={false} prop', function () {

package/es/CopyToClipboardContainer/__snapshots__/index.spec.tsx.snap

@@ -1,16 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the CopyToClipboardContainer with dense=true 1`] = `
+<ForwardRef(CopyToClipboardContainer)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-copy-to-clipboard"
+  >
+    <div
+      className="govgr-copy-to-clipboard"
+    >
+      <div
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip--dense govgr-copy-to-clipboard__tooltip"
+      >
+        Text copied!
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(CopyToClipboardContainer)>
+`;
+
 exports[`renders the CopyToClipboardContainer with no props 1`] = `
 <ForwardRef(CopyToClipboardContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>
@@ -25,13 +46,13 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__banner"
       >
         Text copied!
       </div>
@@ -42,17 +63,18 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 
 exports[`renders the CopyToClipboardContainer with variant=tooltip 1`] = `
 <ForwardRef(CopyToClipboardContainer)
-  variant="tooltip-right"
+  tooltipAlign="right"
+  variant="tooltip"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className="govgr-copy-to-clipboard--container"
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>

package/es/CopyToClipboardContainer/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "className", "children"];
+var _excluded = ["variant", "tooltipAlign", "className", "dense", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -9,8 +9,12 @@ import Base from '@digigov/react-core/Base';
  * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
  */
 export var CopyToClipboardContainer = /*#__PURE__*/React.forwardRef(function CopyToClipboardContainer(_ref, ref) {
-  var variant = _ref.variant,
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tooltip' : _ref$variant,
+      _ref$tooltipAlign = _ref.tooltipAlign,
+      tooltipAlign = _ref$tooltipAlign === void 0 ? 'right' : _ref$tooltipAlign,
       className = _ref.className,
+      dense = _ref.dense,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -18,9 +22,9 @@ export var CopyToClipboardContainer = /*#__PURE__*/React.forwardRef(function Cop
     as: "div",
     ref: ref
   }, props, {
-    className: clsx(className, true && 'govgr-copy-to-clipboard-root')
+    className: clsx(className, true && 'govgr-copy-to-clipboard')
   }, props), /*#__PURE__*/React.createElement("div", {
-    className: clsx(className, (variant === 'tooltip-left' || variant === 'tooltip-right') && 'govgr-copy-to-clipboard-container')
+    className: clsx(className, variant === 'tooltip' && [tooltipAlign === 'right' && 'govgr-copy-to-clipboard__tooltip--right', tooltipAlign === 'left' && 'govgr-copy-to-clipboard__tooltip--left', dense && 'govgr-copy-to-clipboard__tooltip--dense', 'govgr-copy-to-clipboard__tooltip'], variant === 'banner' && 'govgr-copy-to-clipboard__banner')
   }, children));
 });
 export default CopyToClipboardContainer;

package/es/CopyToClipboardContainer/index.spec.js

@@ -9,7 +9,8 @@ it('renders the CopyToClipboardContainer with no props', function () {
 });
 
 var _ref2 = /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
-  variant: "tooltip-right"
+  variant: "tooltip",
+  tooltipAlign: "right"
 }, "Text copied!");
 
 it('renders the CopyToClipboardContainer with variant=tooltip', function () {
@@ -22,4 +23,12 @@ var _ref3 = /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
 
 it('renders the CopyToClipboardContainer with variant=banner', function () {
   expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(CopyToClipboardContainer, {
+  dense: true
+}, "Text copied!");
+
+it('renders the CopyToClipboardContainer with dense=true', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
 });

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

@@ -3,14 +3,13 @@
 exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="banner"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -19,15 +18,13 @@ exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with banner prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="banner"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -41,10 +38,10 @@ exports[`renders the CopyToClipboardMessage with copied prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className=""
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className=""
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -56,10 +53,10 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 <ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -70,14 +67,13 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="tooltip-right"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -86,15 +82,13 @@ exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with tooltip prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="tooltip-right"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>

package/es/CopyToClipboardMessage/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["variant", "enabled", "className", "children"];
+var _excluded = ["enabled", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -10,8 +10,7 @@ import Base from '@digigov/react-core/Base';
  * This component is used inside the CopyToClipboard component that lies inside the digigov/ui library
  */
 export var CopyToClipboardMessage = /*#__PURE__*/React.forwardRef(function CopyToClipboardMessage(_ref, ref) {
-  var variant = _ref.variant,
-      enabled = _ref.enabled,
+  var enabled = _ref.enabled,
       className = _ref.className,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
@@ -19,7 +18,7 @@ export var CopyToClipboardMessage = /*#__PURE__*/React.forwardRef(function CopyT
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "div",
     ref: ref,
-    className: clsx(className, (variant === 'tooltip-left' || variant === 'tooltip-right') && 'govgr-copy-to-clipboard--tooltip', variant === 'tooltip-right' && 'govgr-copy-to-clipboard--tooltip-right', variant === 'tooltip-left' && 'govgr-copy-to-clipboard--tooltip-left', variant === 'banner' && 'govgr-copy-to-clipboard--banner', !enabled && 'govgr-copy-to-clipboard--hidden')
+    className: clsx(className, !enabled && 'govgr-copy-to-clipboard--hidden', true && 'govgr-copy-to-clipboard__message')
   }, props), children);
 });
 export default CopyToClipboardMessage;

package/es/CopyToClipboardMessage/index.test.js

@@ -8,17 +8,13 @@ it('renders the CopyToClipboardMessage with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
 });
 
-var _ref2 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
-  variant: "banner"
-}, "Text copied!");
+var _ref2 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, null, "Text copied!");
 
 it('renders the CopyToClipboardMessage with banner prop', function () {
   expect(mount(_ref2)).toMatchSnapshot();
 });
 
-var _ref3 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
-  variant: "tooltip-right"
-}, "Text copied!");
+var _ref3 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, null, "Text copied!");
 
 it('renders the CopyToClipboardMessage with tooltip prop', function () {
   expect(mount(_ref3)).toMatchSnapshot();
@@ -33,7 +29,6 @@ it('renders the CopyToClipboardMessage with copied prop', function () {
 });
 
 var _ref5 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
-  variant: "tooltip-right",
   enabled: true
 }, "Text copied!");
 
@@ -42,7 +37,6 @@ it('renders the CopyToClipboardMessage with tooltip and copied prop', function (
 });
 
 var _ref6 = /*#__PURE__*/React.createElement(CopyToClipboardMessage, {
-  variant: "banner",
   enabled: true
 }, "Text copied!");
 

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

@@ -4,10 +4,10 @@ exports[`renders the CopyrightContainer with no props 1`] = `
 <ForwardRef(CopyrightContainer)>
   <ForwardRef(Base)
     as="p"
-    className="govgr-footer__licence-description"
+    className="govgr-footer__copyright"
   >
     <p
-      className="govgr-footer__licence-description"
+      className="govgr-footer__copyright"
     >
       hello
     </p>

package/es/CopyrightContainer/index.js

@@ -17,7 +17,7 @@ export var CopyrightContainer = /*#__PURE__*/React.forwardRef(function Copyright
   return /*#__PURE__*/React.createElement(Base, _extends({
     as: "p",
     ref: ref,
-    className: clsx(className, true && 'govgr-footer__licence-description')
+    className: clsx(className, true && 'govgr-footer__copyright')
   }, props), children);
 });
 export default CopyrightContainer;

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the DateInputContainer with dense prop 1`] = `
+<ForwardRef(DateInputContainer)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-date-input--dense govgr-date-input"
+  >
+    <div
+      className="govgr-date-input--dense govgr-date-input"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(DateInputContainer)>
+`;
+
 exports[`renders the DateInputContainer with no props 1`] = `
 <ForwardRef(DateInputContainer)>
   <ForwardRef(Base)

package/es/DateInputContainer/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children"];
+var _excluded = ["dense", "className", "children"];
 import React from 'react';
 import clsx from 'clsx';
 import Base from '@digigov/react-core/Base';
@@ -12,14 +12,15 @@ import Base from '@digigov/react-core/Base';
  *
  */
 export var DateInputContainer = /*#__PURE__*/React.forwardRef(function DateInputContainer(_ref, ref) {
-  var className = _ref.className,
+  var dense = _ref.dense,
+      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-date-input')
+    className: clsx(className, dense && 'govgr-date-input--dense', true && 'govgr-date-input')
   }, props), children);
 });
 export default DateInputContainer;

package/es/DateInputContainer/index.test.js

@@ -6,4 +6,12 @@ var _ref = /*#__PURE__*/React.createElement(DateInputContainer, null, "hello");
 
 it('renders the DateInputContainer with no props', function () {
   expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(DateInputContainer, {
+  dense: true
+}, "hello");
+
+it('renders the DateInputContainer with dense prop', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
 });

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

@@ -14,14 +14,14 @@ exports[`renders the DateInputItem with name and width===4 props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-4 govgr-input"
+        className="govgr-input--width-4-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-4 govgr-input"
+          className="govgr-input--width-4-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -46,14 +46,14 @@ exports[`renders the DateInputItem with name prop 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -76,13 +76,13 @@ exports[`renders the DateInputItem with no props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           pattern="[0-9]*"
           type="text"

package/es/DateInputItem/index.js

@@ -30,7 +30,7 @@ export var DateInputItem = /*#__PURE__*/React.forwardRef(function DateInputItem(
     pattern: "[0-9]*",
     inputMode: "numeric",
     name: name,
-    className: clsx(width === 2 && 'govgr-input--width-2', width === 4 && 'govgr-input--width-4', error && 'govgr-input--error', true && 'govgr-input')
+    className: clsx(width === 2 && 'govgr-input--width-2-char', width === 4 && 'govgr-input--width-4-char', error && 'govgr-input--error', true && 'govgr-input')
   }, props))));
 });
 export default DateInputItem;