@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

package/form/SelectContainer/__stories__/Default.js

@@ -19,13 +19,13 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   name: "select-list",
   "aria-label": "\u03C4\u03B1\u03BE\u03B9\u03BD\u03CC\u03BC\u03B7\u03C3\u03B7"
 }, /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "dim"
+  value: "popular"
 }, "\u0394\u03B7\u03BC\u03BF\u03C6\u03B9\u03BB\u03AE"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "recent"
 }, "\u03A0\u03C1\u03CC\u03C3\u03C6\u03B1\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "views"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B5\u03C2 \u03C0\u03C1\u03BF\u03B2\u03BF\u03BB\u03AD\u03C2"), /*#__PURE__*/_react["default"].createElement(_SelectContainer.SelectOption, {
-  value: "kat"
+  value: "comments"
 }, "\u03A0\u03B5\u03C1\u03B9\u03C3\u03C3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03C3\u03C7\u03CC\u03BB\u03B9\u03B1"))));
 
 var Default = function Default() {

package/form/SelectContainer/index.mdx

@@ -11,32 +11,26 @@ import SelectContainer from '@digigov/ui/form/SelectContainer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
+
+## Accessibility
 
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/form/SingleCharacterInputs/SingleCharacterInput.stories.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    export const title: string;
+    export const description: string;
+    export const link: string;
+    export { SingleCharacterInputs as component };
+    export const displayName: string;
+}
+export default _default;
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/Default";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode";
+export * from "@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit";
+import SingleCharacterInputs from "@digigov/ui/form/SingleCharacterInputs";

package/form/{SingleCharacterInputContainer/SingleCharacterInputContainer.stories.js → SingleCharacterInputs/SingleCharacterInput.stories.js}

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _SingleCharacterInputContainer = _interopRequireDefault(require("@digigov/ui/form/SingleCharacterInputContainer"));
+var _SingleCharacterInputs = _interopRequireDefault(require("@digigov/ui/form/SingleCharacterInputs"));
 
-var _Default = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/Default");
+var _Default = require("@digigov/ui/form/SingleCharacterInputs/__stories__/Default");
 
 Object.keys(_Default).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -24,7 +24,7 @@ Object.keys(_Default).forEach(function (key) {
   });
 });
 
-var _WithDefaultError = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithDefaultError");
+var _WithDefaultError = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError");
 
 Object.keys(_WithDefaultError).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -38,7 +38,7 @@ Object.keys(_WithDefaultError).forEach(function (key) {
   });
 });
 
-var _WithErrorMessageInvalidCode = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode");
+var _WithErrorMessageInvalidCode = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode");
 
 Object.keys(_WithErrorMessageInvalidCode).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -52,7 +52,7 @@ Object.keys(_WithErrorMessageInvalidCode).forEach(function (key) {
   });
 });
 
-var _WithErrorMessageLessDigit = require("@digigov/ui/form/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit");
+var _WithErrorMessageLessDigit = require("@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit");
 
 Object.keys(_WithErrorMessageLessDigit).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -66,10 +66,10 @@ Object.keys(_WithErrorMessageLessDigit).forEach(function (key) {
   });
 });
 var _default = {
-  title: 'Digigov UI/form/SingleCharacterInputContainer',
+  title: 'Digigov UI/form/SingleCharacterInputs',
   description: 'Use the One-time password input component to help users enter a memorable digital character for One-time password.',
   link: 'https://guide.services.gov.gr/docs/patterns/one-time-password',
-  component: _SingleCharacterInputContainer["default"],
-  displayName: 'SingleCharacterInputContainer'
+  component: _SingleCharacterInputs["default"],
+  displayName: 'SingleCharacterInputs'
 };
 exports["default"] = _default;

package/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/Default.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
-var _SingleCharacterInputContainer = require("@digigov/ui/form/SingleCharacterInputContainer");
+var _SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
 
 var _Hint = require("@digigov/ui/typography/Hint");
 
@@ -21,24 +21,24 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   heading: true
 }, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "code-hint"
-}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputContainer, null, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInputs, null, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "first-digit",
-  value: 4
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: 4
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "second-digit",
-  value: 4
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: 4
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "third-digit",
-  value: 5
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: 5
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "forth-digit",
-  value: 1
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: 1
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "fifth-digit",
-  value: 2
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: 2
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "sixth-digit",
-  value: 3
+  defaultValue: 3
 }))));
 
 var Default = function Default() {

package/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithDefaultError.js

@@ -13,7 +13,7 @@ var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
 
 var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
-var _SingleCharacterInputContainer = require("@digigov/ui/form/SingleCharacterInputContainer");
+var _SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
 
 var _Hint = require("@digigov/ui/typography/Hint");
 
@@ -27,22 +27,22 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   heading: true
 }, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_Hint.Hint, {
   id: "code-hint"
-}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C5\u03C0\u03BF\u03C7\u03C1\u03B5\u03C9\u03C4\u03B9\u03BA\u03CC."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputContainer, null, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u03A4\u03BF \u03C0\u03B5\u03B4\u03AF\u03BF \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C5\u03C0\u03BF\u03C7\u03C1\u03B5\u03C9\u03C4\u03B9\u03BA\u03CC."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInputs, null, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "first-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "second-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "third-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "forth-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "fifth-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "sixth-digit",
   error: true
 }))));

package/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageInvalidCode.js

@@ -13,7 +13,7 @@ var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
 
 var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
-var _SingleCharacterInputContainer = require("@digigov/ui/form/SingleCharacterInputContainer");
+var _SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
 
 var _Hint = require("@digigov/ui/typography/Hint");
 
@@ -29,31 +29,31 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   id: "code-hint"
 }, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
   id: "code-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03B9 \u03BB\u03AC\u03B8\u03BF\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputContainer, {
+}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03B5\u03B9\u03C3\u03AC\u03B3\u03B5\u03B9 \u03BB\u03AC\u03B8\u03BF\u03C2 \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInputs, {
   "aria-describedby": "code-error"
-}, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "first-digit",
-  value: 4,
+  defaultValue: 4,
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "second-digit",
-  value: 4,
+  defaultValue: 4,
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "third-digit",
-  value: 5,
+  defaultValue: 5,
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "forth-digit",
-  value: 1,
+  defaultValue: 1,
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "fifth-digit",
-  value: 2,
+  defaultValue: 2,
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "sixth-digit",
-  value: 3,
+  defaultValue: 3,
   error: true
 }))));
 

package/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageLessDigit.js

@@ -13,7 +13,7 @@ var _ErrorMessage = require("@digigov/ui/form/ErrorMessage");
 
 var _FieldContainer = require("@digigov/ui/form/FieldContainer");
 
-var _SingleCharacterInputContainer = require("@digigov/ui/form/SingleCharacterInputContainer");
+var _SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
 
 var _Hint = require("@digigov/ui/typography/Hint");
 
@@ -29,24 +29,24 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   id: "code-hint"
 }, "\u0395\u03B9\u03C3\u03AC\u03B3\u03B5\u03C4\u03B5 \u03C4\u03BF\u03BD \u03BC\u03BF\u03BD\u03B1\u03B4\u03B9\u03BA\u03CC \u03BA\u03C9\u03B4\u03B9\u03BA\u03CC \u03C0\u03BF\u03C5 \u03BB\u03AC\u03B2\u03B1\u03C4\u03B5 \u03C3\u03C4\u03BF \u03B7\u03BB\u03B5\u03BA\u03C4\u03C1\u03BF\u03BD\u03B9\u03BA\u03CC \u03C3\u03B1\u03C2 \u03C4\u03B1\u03C7\u03C5\u03B4\u03C1\u03BF\u03BC\u03B5\u03AF\u03BF."), /*#__PURE__*/_react["default"].createElement(_ErrorMessage.ErrorMessage, {
   id: "code-error"
-}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03B9 \u03BB\u03B9\u03B3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03B1\u03C0\u03CC 6 \u03C8\u03B7\u03C6\u03AF\u03B1."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputContainer, {
+}, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, "\u039B\u03AC\u03B8\u03BF\u03C2:"), "\u0388\u03C7\u03B5\u03C4\u03B5 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03B9 \u03BB\u03B9\u03B3\u03CC\u03C4\u03B5\u03C1\u03B1 \u03B1\u03C0\u03CC 6 \u03C8\u03B7\u03C6\u03AF\u03B1."), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInputs, {
   "aria-describedby": "code-error"
-}, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}, /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "first-digit",
-  value: "6"
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: "6"
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "second-digit",
-  value: "4"
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: "4"
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "third-digit",
-  value: "5"
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+  defaultValue: "5"
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "forth-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "fifth-digit",
   error: true
-}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputContainer.SingleCharacterInputItem, {
+}), /*#__PURE__*/_react["default"].createElement(_SingleCharacterInputs.SingleCharacterInput, {
   name: "sixth-digit",
   error: true
 }))));

package/form/SingleCharacterInputs/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/SingleCharacterInputs';
+export * from '@digigov/react-core/SingleCharacterInput';
+import SingleCharacterInputs from '@digigov/react-core/SingleCharacterInputs';
+export default SingleCharacterInputs;

package/form/{SingleCharacterInputContainer → SingleCharacterInputs}/index.js

@@ -8,30 +8,30 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _SingleCharacterInputContainer = _interopRequireWildcard(require("@digigov/react-core/SingleCharacterInputContainer"));
+var _SingleCharacterInputs = _interopRequireWildcard(require("@digigov/react-core/SingleCharacterInputs"));
 
-Object.keys(_SingleCharacterInputContainer).forEach(function (key) {
+Object.keys(_SingleCharacterInputs).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SingleCharacterInputContainer[key]) return;
+  if (key in exports && exports[key] === _SingleCharacterInputs[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SingleCharacterInputContainer[key];
+      return _SingleCharacterInputs[key];
     }
   });
 });
 
-var _SingleCharacterInputItem = require("@digigov/react-core/SingleCharacterInputItem");
+var _SingleCharacterInput = require("@digigov/react-core/SingleCharacterInput");
 
-Object.keys(_SingleCharacterInputItem).forEach(function (key) {
+Object.keys(_SingleCharacterInput).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _SingleCharacterInputItem[key]) return;
+  if (key in exports && exports[key] === _SingleCharacterInput[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SingleCharacterInputItem[key];
+      return _SingleCharacterInput[key];
     }
   });
 });
@@ -40,5 +40,5 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-var _default = _SingleCharacterInputContainer["default"];
+var _default = _SingleCharacterInputs["default"];
 exports["default"] = _default;

package/form/SingleCharacterInputs/index.mdx

@@ -0,0 +1,24 @@
+---
+id: single-character-inputs
+title: SingleCharacterInputs
+---
+
+# SingleCharacterInput
+
+```bash
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="Default.tsx" />
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />

package/form/TextArea/index.mdx

@@ -11,65 +11,37 @@ import TextArea from '@digigov/ui/form/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="DisabledInput.tsx" />
 
 ## API
 

package/form/TextInput/__stories__/FixedWidths.js

@@ -19,42 +19,42 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 20 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 20
+  maxWidth: '20-char'
 })));
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 10 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 10
+  maxWidth: '10-char'
 })));
 
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 5 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 5
+  maxWidth: '5-char'
 })));
 
 var _ref4 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 4 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 4
+  maxWidth: '4-char'
 })));
 
 var _ref5 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 3 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 3
+  maxWidth: '3-char'
 })));
 
 var _ref6 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03B5\u03B4\u03AF\u03BF 2 \u03C7\u03B1\u03C1\u03B1\u03BA\u03C4\u03AE\u03C1\u03C9\u03BD"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  characterWidth: 2
+  maxWidth: '2-char'
 })));
 
 var FixedWidths = function FixedWidths() {

package/form/TextInput/__stories__/FluidWidths.js

@@ -19,42 +19,42 @@ var _ref = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldCon
   size: "sm"
 }, "\u039C\u03AD\u03B3\u03B9\u03C3\u03C4\u03BF \u03C0\u03BB\u03AC\u03C4\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "full"
+  width: "full"
 })));
 
 var _ref2 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03B1 \u03C4\u03C1\u03AF\u03B1-\u03C4\u03AD\u03C4\u03B1\u03C1\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "three-quarters"
+  width: "75%"
 })));
 
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03B1 \u03B4\u03CD\u03BF-\u03C4\u03C1\u03AF\u03C4\u03B1"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "two-thirds"
+  width: "66.6%"
 })));
 
 var _ref4 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03BC\u03B9\u03C3\u03CC"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "one-half"
+  width: "50%"
 })));
 
 var _ref5 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03AD\u03BD\u03B1-\u03C4\u03C1\u03AF\u03C4\u03BF"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "one-third"
+  width: "33.3%"
 })));
 
 var _ref6 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelContainer, null, /*#__PURE__*/_react["default"].createElement(_LabelContainer.LabelTitle, {
   size: "sm"
 }, "\u03A0\u03BB\u03AC\u03C4\u03BF\u03C2 \u03C3\u03C4\u03BF \u03AD\u03BD\u03B1-\u03C4\u03AD\u03C4\u03B1\u03C1\u03C4\u03BF"), /*#__PURE__*/_react["default"].createElement(_TextInput.TextInput, {
   name: "inputext",
-  cellWidth: "one-quarter"
+  width: "25%"
 })));
 
 var FluidWidths = function FluidWidths() {