@digigov/ui 1.0.0-002c630d → 1.0.0-290a96e2

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() {

package/form/TextInput/index.mdx

@@ -11,19 +11,11 @@ import TextInput from '@digigov/ui/form/TextInput';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -33,59 +25,35 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FluidWidths.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/TextInput"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithHint.tsx" />
 
 ## Numbers
 
 ### Asking for whole numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="DisabledInput.tsx" />
 
 ## API
 

package/form/index.d.ts

@@ -8,8 +8,8 @@ export * from '@digigov/ui/form/FileUpload';
 export * from '@digigov/ui/form/Form';
 export * from '@digigov/ui/form/LabelContainer';
 export * from '@digigov/ui/form/RadioContainer';
-export * from '@digigov/ui/form/SearchSection';
+export * from '@digigov/ui/form/SearchContainer';
 export * from '@digigov/ui/form/SelectContainer';
-export * from '@digigov/ui/form/SingleCharacterInputContainer';
+export * from '@digigov/ui/form/SingleCharacterInputs';
 export * from '@digigov/ui/form/TextArea';
 export * from '@digigov/ui/form/TextInput';

package/form/index.js

@@ -134,15 +134,15 @@ Object.keys(_RadioContainer).forEach(function (key) {
   });
 });
 
-var _SearchSection = require("@digigov/ui/form/SearchSection");
+var _SearchContainer = require("@digigov/ui/form/SearchContainer");
 
-Object.keys(_SearchSection).forEach(function (key) {
+Object.keys(_SearchContainer).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _SearchSection[key]) return;
+  if (key in exports && exports[key] === _SearchContainer[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _SearchSection[key];
+      return _SearchContainer[key];
     }
   });
 });
@@ -160,15 +160,15 @@ Object.keys(_SelectContainer).forEach(function (key) {
   });
 });
 
-var _SingleCharacterInputContainer = require("@digigov/ui/form/SingleCharacterInputContainer");
+var _SingleCharacterInputs = require("@digigov/ui/form/SingleCharacterInputs");
 
-Object.keys(_SingleCharacterInputContainer).forEach(function (key) {
+Object.keys(_SingleCharacterInputs).forEach(function (key) {
   if (key === "default" || key === "__esModule") 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];
     }
   });
 });

package/govgr/Footer/index.js

@@ -13,22 +13,22 @@ var _Footer = _interopRequireDefault(require("@digigov/react-core/Footer"));
 
 var _FooterContainer = _interopRequireDefault(require("@digigov/react-core/FooterContainer"));
 
-var _FooterMeta = _interopRequireDefault(require("@digigov/react-core/FooterMeta"));
+var _FooterInfo = _interopRequireDefault(require("@digigov/react-core/FooterInfo"));
 
-var _FooterMetaItem = _interopRequireDefault(require("@digigov/react-core/FooterMetaItem"));
+var _FooterInfoSection = _interopRequireDefault(require("@digigov/react-core/FooterInfoSection"));
 
 var _Copyright = _interopRequireDefault(require("@digigov/ui/govgr/Footer/Copyright"));
 
 var _HellenicRepublicLogo = _interopRequireDefault(require("@digigov/ui/govgr/Footer/HellenicRepublicLogo"));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_FooterMetaItem["default"], null, /*#__PURE__*/_react["default"].createElement(_HellenicRepublicLogo["default"], null));
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_FooterInfoSection["default"], null, /*#__PURE__*/_react["default"].createElement(_HellenicRepublicLogo["default"], null));
 
 var GovGRFooter = function GovGRFooter(_ref) {
   var copyright = _ref.copyright,
       children = _ref.children,
       createdBy = _ref.createdBy,
       minDigitalCopyright = _ref.minDigitalCopyright;
-  return /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement(_FooterContainer["default"], null, children || /*#__PURE__*/_react["default"].createElement(_FooterMeta["default"], null, /*#__PURE__*/_react["default"].createElement(_FooterMetaItem["default"], null, copyright ? copyright : /*#__PURE__*/_react["default"].createElement(_Copyright["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_Footer["default"], null, /*#__PURE__*/_react["default"].createElement(_FooterContainer["default"], null, children || /*#__PURE__*/_react["default"].createElement(_FooterInfo["default"], null, /*#__PURE__*/_react["default"].createElement(_FooterInfoSection["default"], null, copyright ? copyright : /*#__PURE__*/_react["default"].createElement(_Copyright["default"], {
     createdBy: createdBy,
     minDigitalCopyright: minDigitalCopyright
   })), _ref2)));

package/icons/Icon/index.d.ts

@@ -1,5 +1,5 @@
-export * from '@digigov/react-core/Icon';
+export * from '@digigov/react-icons/Icon';
 export * from '@digigov/react-icons';
 export * from '@digigov/react-icons/icons';
-import Icon from '@digigov/react-core/Icon';
+import Icon from '@digigov/react-icons/Icon';
 export default Icon;

package/icons/Icon/index.js

@@ -8,7 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports["default"] = void 0;
 
-var _Icon = _interopRequireWildcard(require("@digigov/react-core/Icon"));
+var _Icon = _interopRequireWildcard(require("@digigov/react-icons/Icon"));
 
 Object.keys(_Icon).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;