@digigov/ui 0.31.0 → 0.32.0

package/{es/core/NavList/__stories__/NavHorizontalLayout.js → esm/core/NavList/__stories__/NavVerticalLayout.js}

@@ -29,9 +29,9 @@ var links = [{
   href: '#',
   label: 'Nav list item 3'
 }];
-export var NavHorizontalLayout = function NavHorizontalLayout() {
-  var layout = 'horizontal';
-  var border = true;
+export var NavVerticalLayout = function NavVerticalLayout() {
+  var layout = 'vertical';
+  var border = false;
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
@@ -50,15 +50,12 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     open: true,
     layout: layout,
     border: border
-  }, /*#__PURE__*/React.createElement(NavList, {
-    layout: layout
-  }, links.map(function (item, key) {
+  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement(NavListItem, {
-      layout: layout,
       link: item,
       setRegisterButton: setRegisterButton,
       setRegisterLink: setRegisterLink
@@ -68,11 +65,8 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
-      layout: layout
-    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      role: "menu",
-      layout: layout
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      role: "menu"
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
       return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
         role: "presentation",
@@ -85,4 +79,4 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     }))))));
   })));
 };
-export default NavHorizontalLayout;
+export default NavVerticalLayout;

package/esm/core/NavList/index.js

@@ -1,4 +1,5 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
 export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
 export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';

package/esm/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories.js

@@ -0,0 +1,12 @@
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+export default {
+  title: 'Digigov UI/core/SingleCharacterInputContainer',
+  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,
+  displayName: 'SingleCharacterInputContainer'
+};
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/Default';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithDefaultError';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode';
+export * from '@digigov/ui/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit';

package/esm/core/SingleCharacterInputContainer/__stories__/Default.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\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.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: 4
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: 5
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  value: 1
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  value: 2
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  value: 3
+}))));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/SingleCharacterInputContainer/__stories__/WithDefaultError.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(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.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  error: true
+}))));
+
+export var WithDefaultError = function WithDefaultError() {
+  return _ref;
+};
+export default WithDefaultError;

package/esm/core/SingleCharacterInputContainer/__stories__/WithErrorMessageInvalidCode.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(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.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: 4,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: 4,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: 5,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  value: 1,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  value: 2,
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  value: 3,
+  error: true
+}))));
+
+export var WithErrorMessageInvalidCode = function WithErrorMessageInvalidCode() {
+  return _ref;
+};
+export default WithErrorMessageInvalidCode;

package/esm/core/SingleCharacterInputContainer/__stories__/WithErrorMessageLessDigit.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SingleCharacterInputContainer, SingleCharacterInputItem } from '@digigov/ui/core/SingleCharacterInputContainer';
+import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
+import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
+
+var _ref = /*#__PURE__*/React.createElement(FieldContainer, {
+  error: true
+}, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
+  heading: true
+}, "\u039A\u03C9\u03B4\u03B9\u03BA\u03CC\u03C2 \u0395\u03C0\u03B9\u03B2\u03B5\u03B2\u03B1\u03AF\u03C9\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(Paragraph, null, "\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.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(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.createElement(SingleCharacterInputContainer, null, /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "first-digit",
+  value: "6"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "second-digit",
+  value: "4"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "third-digit",
+  value: "5"
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "forth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "fifth-digit",
+  error: true
+}), /*#__PURE__*/React.createElement(SingleCharacterInputItem, {
+  name: "sixth-digit",
+  error: true
+}))));
+
+export var WithErrorMessageLessDigit = function WithErrorMessageLessDigit() {
+  return _ref;
+};
+export default WithErrorMessageLessDigit;

package/esm/core/SingleCharacterInputContainer/index.js

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

package/esm/core/SingleCharacterInputContainer/index.mdx

@@ -0,0 +1,29 @@
+---
+id: otp-input
+title: SingleCharacterInputContainer
+---
+
+# SingleCharacterInputItem
+
+```bash
+import SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
+```
+
+## How to use
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="Default.tsx"
+/>
+
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story
+  packageName="@digigov/ui"
+  component="core/SingleCharacterInputContainer"
+  story="WithDefaultError.tsx"
+/>

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.31.0
+/** @license Digigov v0.32.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/locales/el.js

@@ -29,6 +29,10 @@ export default {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}'
+      },
+      otp: {
+        invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
+        less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.'
       }
     }
   },

package/esm/registry.js

@@ -122,6 +122,7 @@ import * as _digigov_ui_core_RadioContainer from '@digigov/ui/core/RadioContaine
 import * as _digigov_ui_core_SectionBreak from '@digigov/ui/core/SectionBreak';
 import * as _digigov_ui_core_SelectContainer from '@digigov/ui/core/SelectContainer';
 import * as _digigov_ui_core_ServiceBadge from '@digigov/ui/core/ServiceBadge';
+import * as _digigov_ui_core_SingleCharacterInputContainer from '@digigov/ui/core/SingleCharacterInputContainer';
 import * as _digigov_ui_core_SkipLink from '@digigov/ui/core/SkipLink';
 import * as _digigov_ui_core_SummaryList from '@digigov/ui/core/SummaryList';
 import * as _digigov_ui_core_SvgIcon from '@digigov/ui/core/SvgIcon';
@@ -333,6 +334,7 @@ export default {
   '@digigov/ui/core/SectionBreak': lazyImport(_digigov_ui_core_SectionBreak),
   '@digigov/ui/core/SelectContainer': lazyImport(_digigov_ui_core_SelectContainer),
   '@digigov/ui/core/ServiceBadge': lazyImport(_digigov_ui_core_ServiceBadge),
+  '@digigov/ui/core/SingleCharacterInputContainer': lazyImport(_digigov_ui_core_SingleCharacterInputContainer),
   '@digigov/ui/core/SkipLink': lazyImport(_digigov_ui_core_SkipLink),
   '@digigov/ui/core/SummaryList': lazyImport(_digigov_ui_core_SummaryList),
   '@digigov/ui/core/SvgIcon': lazyImport(_digigov_ui_core_SvgIcon),
@@ -443,6 +445,7 @@ import * as _digigov_ui_core_NotificationBanner_NotificationBanner_stories from
 import * as _digigov_ui_core_PhaseBanner_PhaseBanner_stories from '@digigov/ui/core/PhaseBanner/PhaseBanner.stories';
 import * as _digigov_ui_core_RadioContainer_RadioContainer_stories from '@digigov/ui/core/RadioContainer/RadioContainer.stories';
 import * as _digigov_ui_core_SelectContainer_Select_stories from '@digigov/ui/core/SelectContainer/Select.stories';
+import * as _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories from '@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories';
 import * as _digigov_ui_core_SummaryList_SummaryList_stories from '@digigov/ui/core/SummaryList/SummaryList.stories';
 import * as _digigov_ui_core_Table_Table_stories from '@digigov/ui/core/Table/Table.stories';
 import * as _digigov_ui_core_Tabs_Tabs_stories from '@digigov/ui/core/Tabs/Tabs.stories';
@@ -496,6 +499,7 @@ export var stories = {
   '@digigov/ui/core/PhaseBanner/PhaseBanner.stories': _digigov_ui_core_PhaseBanner_PhaseBanner_stories,
   '@digigov/ui/core/RadioContainer/RadioContainer.stories': _digigov_ui_core_RadioContainer_RadioContainer_stories,
   '@digigov/ui/core/SelectContainer/Select.stories': _digigov_ui_core_SelectContainer_Select_stories,
+  '@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories,
   '@digigov/ui/core/SummaryList/SummaryList.stories': _digigov_ui_core_SummaryList_SummaryList_stories,
   '@digigov/ui/core/Table/Table.stories': _digigov_ui_core_Table_Table_stories,
   '@digigov/ui/core/Tabs/Tabs.stories': _digigov_ui_core_Tabs_Tabs_stories,

package/locales/el.d.ts

@@ -30,6 +30,10 @@ declare const _default: {
                 earlier_than: string;
                 later_than: string;
             };
+            otp: {
+                invalid: string;
+                less_than: string;
+            };
         };
     };
     button: {

package/locales/el.js

@@ -35,6 +35,10 @@ var _default = {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}'
+      },
+      otp: {
+        invalid: 'Ο κωδικός που έχετε εισάγει είναι λάθος.',
+        less_than: 'Έχετε συμπληρώσει λιγότερα από {{maxLength}} ψηφία.'
       }
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "@digigov reusable components toolkit",
   "main": "./index.js",
   "module": "./esm/index.js",
@@ -20,8 +20,8 @@
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0",
-    "@digigov/react-core": "0.22.0",
-    "@digigov/react-extensions": "0.21.0"
+    "@digigov/react-core": "0.23.0",
+    "@digigov/react-extensions": "0.21.2"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -123,6 +123,7 @@ declare var _default: {
     '@digigov/ui/core/SectionBreak': {};
     '@digigov/ui/core/SelectContainer': {};
     '@digigov/ui/core/ServiceBadge': {};
+    '@digigov/ui/core/SingleCharacterInputContainer': {};
     '@digigov/ui/core/SkipLink': {};
     '@digigov/ui/core/SummaryList': {};
     '@digigov/ui/core/SvgIcon': {};
@@ -235,6 +236,7 @@ export const stories: {
     '@digigov/ui/core/PhaseBanner/PhaseBanner.stories': typeof _digigov_ui_core_PhaseBanner_PhaseBanner_stories;
     '@digigov/ui/core/RadioContainer/RadioContainer.stories': typeof _digigov_ui_core_RadioContainer_RadioContainer_stories;
     '@digigov/ui/core/SelectContainer/Select.stories': typeof _digigov_ui_core_SelectContainer_Select_stories;
+    '@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': typeof _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories;
     '@digigov/ui/core/SummaryList/SummaryList.stories': typeof _digigov_ui_core_SummaryList_SummaryList_stories;
     '@digigov/ui/core/Table/Table.stories': typeof _digigov_ui_core_Table_Table_stories;
     '@digigov/ui/core/Tabs/Tabs.stories': typeof _digigov_ui_core_Tabs_Tabs_stories;
@@ -288,6 +290,7 @@ import * as _digigov_ui_core_NotificationBanner_NotificationBanner_stories from
 import * as _digigov_ui_core_PhaseBanner_PhaseBanner_stories from "@digigov/ui/core/PhaseBanner/PhaseBanner.stories";
 import * as _digigov_ui_core_RadioContainer_RadioContainer_stories from "@digigov/ui/core/RadioContainer/RadioContainer.stories";
 import * as _digigov_ui_core_SelectContainer_Select_stories from "@digigov/ui/core/SelectContainer/Select.stories";
+import * as _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories from "@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories";
 import * as _digigov_ui_core_SummaryList_SummaryList_stories from "@digigov/ui/core/SummaryList/SummaryList.stories";
 import * as _digigov_ui_core_Table_Table_stories from "@digigov/ui/core/Table/Table.stories";
 import * as _digigov_ui_core_Tabs_Tabs_stories from "@digigov/ui/core/Tabs/Tabs.stories";

package/registry.js

@@ -255,6 +255,8 @@ var _digigov_ui_core_SelectContainer = _interopRequireWildcard(require("@digigov
 
 var _digigov_ui_core_ServiceBadge = _interopRequireWildcard(require("@digigov/ui/core/ServiceBadge"));
 
+var _digigov_ui_core_SingleCharacterInputContainer = _interopRequireWildcard(require("@digigov/ui/core/SingleCharacterInputContainer"));
+
 var _digigov_ui_core_SkipLink = _interopRequireWildcard(require("@digigov/ui/core/SkipLink"));
 
 var _digigov_ui_core_SummaryList = _interopRequireWildcard(require("@digigov/ui/core/SummaryList"));
@@ -473,6 +475,8 @@ var _digigov_ui_core_RadioContainer_RadioContainer_stories = _interopRequireWild
 
 var _digigov_ui_core_SelectContainer_Select_stories = _interopRequireWildcard(require("@digigov/ui/core/SelectContainer/Select.stories"));
 
+var _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories = _interopRequireWildcard(require("@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories"));
+
 var _digigov_ui_core_SummaryList_SummaryList_stories = _interopRequireWildcard(require("@digigov/ui/core/SummaryList/SummaryList.stories"));
 
 var _digigov_ui_core_Table_Table_stories = _interopRequireWildcard(require("@digigov/ui/core/Table/Table.stories"));
@@ -644,6 +648,7 @@ var _default = {
   '@digigov/ui/core/SectionBreak': lazyImport(_digigov_ui_core_SectionBreak),
   '@digigov/ui/core/SelectContainer': lazyImport(_digigov_ui_core_SelectContainer),
   '@digigov/ui/core/ServiceBadge': lazyImport(_digigov_ui_core_ServiceBadge),
+  '@digigov/ui/core/SingleCharacterInputContainer': lazyImport(_digigov_ui_core_SingleCharacterInputContainer),
   '@digigov/ui/core/SkipLink': lazyImport(_digigov_ui_core_SkipLink),
   '@digigov/ui/core/SummaryList': lazyImport(_digigov_ui_core_SummaryList),
   '@digigov/ui/core/SvgIcon': lazyImport(_digigov_ui_core_SvgIcon),
@@ -756,6 +761,7 @@ var stories = {
   '@digigov/ui/core/PhaseBanner/PhaseBanner.stories': _digigov_ui_core_PhaseBanner_PhaseBanner_stories,
   '@digigov/ui/core/RadioContainer/RadioContainer.stories': _digigov_ui_core_RadioContainer_RadioContainer_stories,
   '@digigov/ui/core/SelectContainer/Select.stories': _digigov_ui_core_SelectContainer_Select_stories,
+  '@digigov/ui/core/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': _digigov_ui_core_SingleCharacterInputContainer_SingleCharacterInputContainer_stories,
   '@digigov/ui/core/SummaryList/SummaryList.stories': _digigov_ui_core_SummaryList_SummaryList_stories,
   '@digigov/ui/core/Table/Table.stories': _digigov_ui_core_Table_Table_stories,
   '@digigov/ui/core/Tabs/Tabs.stories': _digigov_ui_core_Tabs_Tabs_stories,

package/src/admin/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -12,7 +12,7 @@
               }
             }
           ],
-          "id": "BSaIJR2CMZJU",
+          "id": "slm0qFzUIkGw",
           "title": "Click button"
         }
       ]
@@ -28,7 +28,7 @@
               }
             }
           ],
-          "id": "T50MBtHpfRog",
+          "id": "dTykMmK3AzLT",
           "title": "Click button"
         }
       ]

package/src/admin/Drawer/__stories__/Default.tsx

@@ -84,7 +84,6 @@ export const Default = () => {
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItem
-              layout={layout}
               link={item}
               setRegisterButton={setRegisterButton}
               setRegisterLink={setRegisterLink}
@@ -95,11 +94,9 @@ export const Default = () => {
                 paddingLeft={5}
                 paddingRight={5}
               >
-                <NavMenuContainerTitle layout={layout}>
-                  {item.label}
-                </NavMenuContainerTitle>
+                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
                 <NavMenuContainerContent>
-                  <NavMenuContainerContentList role="menu" layout={layout}>
+                  <NavMenuContainerContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
                         isNavListItemLinkInterface(subMenu) && (

package/src/core/Accordion/Accordion.stories.playwright.json

@@ -8,11 +8,11 @@
             {
               "name": "click",
               "args": {
-                "selector": "text=Δικαστήρια"
+                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>summary"
               }
             }
           ],
-          "id": "nJuTGfjq9kyK",
+          "id": "ZB3bfJynL-CN",
           "title": "Mouse navigation"
         }
       ]

package/src/core/ErrorSummary/ErrorSummary.stories.playwright.json

@@ -18,7 +18,7 @@
               }
             }
           ],
-          "id": "V4VBSZxQfqiJ",
+          "id": "lFKC342tG4hT",
           "title": "Go to checkbox"
         }
       ]

package/src/core/NavList/NavList.stories.js

@@ -8,8 +8,4 @@ export default {
   displayName: 'NavList',
 };
 export * from '@digigov/ui/core/NavList/__stories__/Default';
-export * from '@digigov/ui/core/NavList/__stories__/NavListHorizontalAutoExample';
-export * from '@digigov/ui/core/NavList/__stories__/NavListVerticalAutoExample';
-export * from '@digigov/ui/core/NavList/__stories__/NavListSecondaryAutoExample';
-export * from '@digigov/ui/core/NavList/__stories__/NavListEpathlaExample';
-export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';
+export * from '@digigov/ui/core/NavList/__stories__/NavVerticalLayout';

package/src/core/NavList/NavListAuto/NavListBaseAuto.tsx

@@ -14,7 +14,7 @@ export const NavListBaseAuto: React.FC<NavListAutoProps> = ({
 }) => {
   return (
     <Nav open={true} layout={layout} {...props} aria-orientation={layout}>
-      <NavList layout={layout}>{children}</NavList>
+      <NavList>{children}</NavList>
     </Nav>
   );
 };

package/src/core/NavList/NavListAuto/NavListItemAnchorAuto.tsx

@@ -2,13 +2,11 @@ import React, { useContext } from 'react';
 import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
 import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 import NavListItem from '@digigov/react-core/NavListItem';
-import { NavListLayout } from '@digigov/ui/core/NavList/types';
 
 interface NavListItemAnchorAutoProps {
   name: string;
   href?: string;
   active?: boolean;
-  layout?: NavListLayout;
   children?: React.ReactNode;
 }
 
@@ -16,14 +14,13 @@ export const NavListItemAnchorAuto: React.FC<NavListItemAnchorAutoProps> = ({
   name,
   href,
   active,
-  layout,
   children,
   ...props
 }) => {
   const { container, setRegisterLink } = useContext(NavListContextAuto);
 
   return (
-    <NavListItem layout={layout}>
+    <NavListItem>
       {setRegisterLink && (
         <NavListItemLink
           href={href}

package/src/core/NavList/NavListAuto/NavListItemAuto.tsx

@@ -25,9 +25,7 @@ export const NavListItemAuto: React.FC<NavListItemAutoProps> = ({
   return (
     <React.Fragment>
       {children ? (
-        <NavListItem layout={layout} {...props}>
-          {children}
-        </NavListItem>
+        <NavListItem {...props}>{children}</NavListItem>
       ) : item?.menu || item?.subMenu ? (
         <NavItemButtonAuto
           item={item}
@@ -39,7 +37,7 @@ export const NavListItemAuto: React.FC<NavListItemAutoProps> = ({
           {item?.label}
         </NavItemButtonAuto>
       ) : (
-        <NavItemAnchorAuto href={item?.href} name={itemName} layout={layout}>
+        <NavItemAnchorAuto href={item?.href} name={itemName}>
           {item?.label}
         </NavItemAnchorAuto>
       )}

package/src/core/NavList/NavListAuto/NavListItemButtonAuto.tsx

@@ -25,7 +25,7 @@ export const NavListItemButtonAuto: React.FC<NavListItemButtonAutoProps> = ({
   return (
     <React.Fragment>
       {onSelect && (
-        <NavListItem layout={layout}>
+        <NavListItem>
           <NavListItemButton active={active} {...onSelect(name)}>
             {children}
           </NavListItemButton>

package/src/core/NavList/NavListAuto/NavListMenuAuto.tsx

@@ -26,9 +26,9 @@ export const NavListMenuAuto: React.FC<NavListMenuAutoProps> = ({
   return (
     <NavMenu layout={layout} active={active} id={id}>
       <NavMenuContainer layout={layout} paddingLeft={5} paddingRight={5}>
-        <NavMenuContainerTitle layout={layout}>{title}</NavMenuContainerTitle>
+        <NavMenuContainerTitle>{title}</NavMenuContainerTitle>
         <NavMenuContainerContent>
-          <NavMenuContainerContentList role="menu" layout={layout}>
+          <NavMenuContainerContentList role="menu">
             {subMenu?.map((item, index) => {
               return (
                 <NavMenuContainerContentListItem

package/src/core/NavList/NavListAuto/NavListSubMenuAuto.tsx

@@ -18,7 +18,7 @@ export const NavListSubMenuAuto: React.FC<NavListSubMenuAutoProps> = ({
 }) => {
   return open ? (
     <Nav hidden={!open} layout={layout} {...props} aria-orientation={layout}>
-      <NavList layout={layout}>
+      <NavList>
         {items?.map((subMenuItem, index) => (
           <NavItemAuto key={index} item={subMenuItem} />
         ))}

package/src/core/NavList/NavListItem.tsx

@@ -10,7 +10,6 @@ import {
 
 export const NavListItem: React.FC<NavListItemProps> = ({
   link,
-  layout,
   setRegisterButton,
   setRegisterLink,
   active,
@@ -18,7 +17,7 @@ export const NavListItem: React.FC<NavListItemProps> = ({
   ...props
 }) => {
   return (
-    <NavListItemContainer layout={layout} {...props}>
+    <NavListItemContainer {...props}>
       {children ? (
         children
       ) : isNavListItemSubMenuInterface(link) && link?.subMenu ? (

package/src/core/NavList/NavListItemBase.tsx

@@ -33,7 +33,6 @@ export const NavListItemBase: React.FC<NavListItemBaseProps> = ({
   return (
     <>
       <NavListItem
-        layout={layout}
         link={item}
         setRegisterButton={setRegisterButton}
         role="menuitem"
@@ -41,11 +40,9 @@ export const NavListItemBase: React.FC<NavListItemBaseProps> = ({
       />
       <NavMenu layout={layout} {...(container && container(item.name))}>
         <NavMenuContainer layout={layout} paddingLeft={5} paddingRight={5}>
-          <NavMenuContainerTitle layout={layout}>
-            {item.label}
-          </NavMenuContainerTitle>
+          <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
           <NavMenuContainerContent>
-            <NavMenuContainerContentList layout={layout}>
+            <NavMenuContainerContentList>
               {item.subMenu?.map((subMenu, menuIndex) => {
                 return (
                   isNavListItemLinkInterface(subMenu) && (