@digigov/ui 0.30.3 → 0.32.0

package/hooks/useTogglableNav.js

@@ -0,0 +1,305 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTogglableNav = useTogglableNav;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function useTogglableNav(_ref) {
+  var toggleProperty = _ref.toggleProperty,
+      toggleOpenClose = _ref.toggleOpenClose,
+      toggleParentOpen = _ref.toggleParentOpen,
+      onToggleProperty = _ref.onToggleProperty,
+      initial = _ref.initial,
+      ariaNavigation = _ref.ariaNavigation,
+      toggleHook = _ref.toggleHook;
+
+  var _useState = (0, _react.useState)(initial || {}),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      opened = _useState2[0],
+      setOpened = _useState2[1];
+
+  var registered = (0, _react.useRef)({});
+  var openedKeys = (0, _react.useRef)([]);
+  var registerButtonRef = (0, _react.useCallback)(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'button'
+    };
+  }, []);
+  var registerLinkRef = (0, _react.useCallback)(function (el) {
+    if (!el) return;
+    var key = el.getAttribute('aria-controls');
+    if (registered.current[key]) return;
+    registered.current[key] = {
+      el: el,
+      type: 'link'
+    };
+  }, []);
+  var toggle = (0, _react.useCallback)(function (e) {
+    var key = e.currentTarget.getAttribute('aria-controls');
+    var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
+
+    if (toggleHook) {
+      toggleHook(key);
+    }
+
+    e.preventDefault();
+
+    if (toggleOpenClose) {
+      if (toggleParentOpen) {
+        var items = key.split('__');
+        var currentKey = items.slice(0, items.length).join('__');
+        var totalKeys = items.map(function (_, index) {
+          return items.slice(0, index + 1).join('__');
+        });
+
+        if (!selected && !openedKeys.current.includes(currentKey)) {
+          openedKeys.current.push(currentKey);
+        }
+
+        if (selected && openedKeys.current.includes(currentKey)) {
+          openedKeys.current = openedKeys.current.filter(function (k) {
+            return k !== currentKey;
+          });
+        }
+
+        setOpened(function (_) {
+          return (0, _extends3["default"])({}, totalKeys.reduce(function (acc, cur) {
+            acc[cur] = cur === currentKey ? !selected : true;
+            return acc;
+          }, {}));
+        });
+      } else {
+        setOpened((0, _defineProperty2["default"])({}, key, !selected));
+      }
+    } else {
+      setOpened((0, _defineProperty2["default"])({}, key, true));
+    }
+  }, []);
+
+  var getMenuItems = function getMenuItems(element) {
+    if (element) {
+      if ((element === null || element === void 0 ? void 0 : element.role) === 'menuitem') {
+        return element;
+      } else {
+        var childrenArray = Array.from(element === null || element === void 0 ? void 0 : element.children);
+        var menuItemsArray = [];
+        childrenArray.forEach(function (child) {
+          var menuItem = getMenuItems(child);
+
+          if (menuItem && !menuItemsArray.includes(menuItem)) {
+            menuItemsArray.push(menuItem);
+          }
+        });
+        return menuItemsArray.flatMap(function (x) {
+          return x;
+        });
+      }
+    }
+
+    return null;
+  };
+
+  var findChildren = function findChildren(parent, items) {
+    return items ? items.filter(function (child) {
+      return child.slice(0, child.lastIndexOf('__')) === parent;
+    }) : items;
+  };
+
+  var findParent = function findParent(child, items) {
+    var parent = child.slice(0, child.lastIndexOf('__'));
+    return items.find(function (item) {
+      return item === parent;
+    }) ? parent : null;
+  };
+
+  var findSiblings = function findSiblings(key, items) {
+    var parent = key.slice(0, key.lastIndexOf('__'));
+
+    if (key.lastIndexOf('__') > 0) {
+      return items.filter(function (child) {
+        return child.slice(0, child.lastIndexOf('__')) === parent;
+      });
+    }
+
+    return items.filter(function (child) {
+      return !child.includes('__');
+    });
+  };
+
+  var findLeftSibling = function findLeftSibling(key, items) {
+    var siblings = findSiblings(key, items);
+
+    if (siblings.length > 0) {
+      var keyIndex = siblings.findIndex(function (item) {
+        return item === key;
+      });
+      return keyIndex > 0 ? siblings[keyIndex - 1] : null;
+    }
+
+    return null;
+  };
+
+  var findRightSibling = function findRightSibling(key, items) {
+    var siblings = findSiblings(key, items);
+
+    if (siblings.length > 0) {
+      var keyIndex = siblings.findIndex(function (item) {
+        return item === key;
+      });
+      return keyIndex < siblings.length - 1 ? siblings[keyIndex + 1] : null;
+    }
+
+    return null;
+  };
+
+  var getOpenItemChildren = function getOpenItemChildren(currentItem, items) {
+    var itemChildrenArray = [];
+    var itemChildren = findChildren(currentItem, items);
+    itemChildren.forEach(function (item) {
+      if (openedKeys.current.includes(item)) {
+        itemChildrenArray.push(item);
+        var internChildren = getOpenItemChildren(item, items);
+
+        if (internChildren.length > 0) {
+          itemChildrenArray.push(internChildren);
+        }
+      } else {
+        itemChildrenArray.push(item);
+      }
+    });
+    return itemChildrenArray.flatMap(function (x) {
+      return x;
+    });
+  };
+
+  var onKeyDown = (0, _react.useCallback)(function (e) {
+    var _document$querySelect;
+
+    var orientation = (_document$querySelect = document.querySelector("[aria-orientation]")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.getAttribute('aria-orientation');
+    var key = e.target.getAttribute('aria-controls');
+    var keys = Object.entries(registered.current).map(function (_ref2) {
+      var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+          entryKey = _ref3[0],
+          _ = _ref3[1];
+
+      return entryKey;
+    });
+
+    var handleArrowRight = function handleArrowRight() {
+      var arrowRightItem = findRightSibling(key, keys);
+
+      if (arrowRightItem) {
+        registered.current[arrowRightItem].el.focus();
+      }
+    };
+
+    var handleArrowLeft = function handleArrowLeft() {
+      var arrowLeftItem = findLeftSibling(key, keys);
+
+      if (arrowLeftItem) {
+        registered.current[arrowLeftItem].el.focus();
+      }
+    };
+
+    switch (e.key) {
+      case 'ArrowRight':
+        handleArrowRight();
+        break;
+
+      case 'ArrowDown':
+        var openItem = getOpenItemChildren(key, keys);
+        var arrowDownItems = findChildren(key, openItem);
+        var menuItems = getMenuItems(document.getElementById(key));
+
+        if (arrowDownItems.length > 0) {
+          registered.current[arrowDownItems[0]].el.focus();
+        } else {
+          if (orientation === 'vertical') {
+            var _document$activeEleme;
+
+            if (((_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.getAttribute('aria-selected')) === 'true' && menuItems && menuItems.length > 0) {
+              menuItems[0].focus();
+            } else {
+              handleArrowRight();
+            }
+          } else {
+            if (menuItems && menuItems.length > 0) {
+              menuItems[0].focus();
+            }
+          }
+        }
+
+        break;
+
+      case 'ArrowLeft':
+        handleArrowLeft();
+        break;
+
+      case 'ArrowUp':
+        if (orientation === 'vertical') {
+          handleArrowLeft();
+        } else {
+          var arrowUpItem = findParent(key, keys);
+
+          if (arrowUpItem) {
+            registered.current[arrowUpItem].el.focus();
+          }
+        }
+
+        break;
+
+      case ' ':
+      case 'Enter':
+        if (registered.current[key].type === 'link') {
+          registered.current[key].el.click();
+        } else {
+          toggle(e);
+        }
+
+        break;
+    }
+  }, []);
+  var registerButton = (0, _react.useCallback)(function (key) {
+    var _extends2;
+
+    var isOpen = !!opened[key];
+    return (0, _extends3["default"])((_extends2 = {
+      ref: registerButtonRef
+    }, (0, _defineProperty2["default"])(_extends2, toggleProperty, isOpen), (0, _defineProperty2["default"])(_extends2, onToggleProperty, toggle), (0, _defineProperty2["default"])(_extends2, 'aria-controls', "".concat(key)), _extends2), ariaNavigation && {
+      onKeyDown: onKeyDown
+    });
+  }, [opened]);
+  var registerLink = (0, _react.useCallback)(function (key) {
+    return (0, _extends3["default"])({
+      ref: registerLinkRef,
+      'aria-controls': "".concat(key)
+    }, ariaNavigation && {
+      onKeyDown: onKeyDown
+    });
+  }, [opened]);
+  return (0, _react.useMemo)(function () {
+    return {
+      registerButton: registerButton,
+      registerLink: registerLink,
+      registered: registered,
+      opened: opened,
+      toggle: toggle,
+      setOpened: setOpened
+    };
+  }, [opened]);
+}

package/hooks/{useTogglableSections.d.ts → useTogglableTab.d.ts}

@@ -1,14 +1,15 @@
-export interface UseTogglableSectionsInterface {
+export interface UseTogglableTabInterface {
     toggleProperty: string;
     singleOpen?: boolean;
     toggleOpenClose?: boolean;
+    toggleParentOpen?: boolean;
     onToggleProperty: string;
     initial?: Record<string, boolean>;
     firstOpen?: boolean;
     ariaNavigation?: boolean;
     toggleHook?: (id: string) => void;
 }
-export interface UseTogglableSectionsReturn {
+export interface UseTogglableTabReturn {
     register: (el: string) => any;
     registered: {
         current: Record<string, HTMLElement>;
@@ -17,4 +18,4 @@ export interface UseTogglableSectionsReturn {
     toggle: (id: string) => void;
     setOpened: (opened: ((curOpened: Record<string, boolean>) => Record<string, boolean>) | Record<string, boolean>) => void;
 }
-export declare function useTogglableSections({ toggleProperty, singleOpen, toggleOpenClose, onToggleProperty, initial, firstOpen, ariaNavigation, toggleHook, }: UseTogglableSectionsInterface): UseTogglableSectionsReturn;
+export declare function useTogglableTab({ toggleProperty, singleOpen, onToggleProperty, initial, firstOpen, ariaNavigation, toggleHook, }: UseTogglableTabInterface): UseTogglableTabReturn;

package/hooks/{useTogglableSections.js → useTogglableTab.js}

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTogglableSections = useTogglableSections;
+exports.useTogglableTab = useTogglableTab;
 
 var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -16,10 +16,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 
 /* eslint-disable react-hooks/exhaustive-deps */
-function useTogglableSections(_ref) {
+function useTogglableTab(_ref) {
   var toggleProperty = _ref.toggleProperty,
       singleOpen = _ref.singleOpen,
-      toggleOpenClose = _ref.toggleOpenClose,
       onToggleProperty = _ref.onToggleProperty,
       initial = _ref.initial,
       firstOpen = _ref.firstOpen,
@@ -46,7 +45,6 @@ function useTogglableSections(_ref) {
   }, []);
   var toggle = (0, _react.useCallback)(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
-    var selected = e.currentTarget.getAttribute('aria-selected') === 'true';
 
     if (toggleHook) {
       toggleHook(key);
@@ -55,11 +53,7 @@ function useTogglableSections(_ref) {
     e.preventDefault();
 
     if (singleOpen) {
-      if (toggleOpenClose) {
-        setOpened((0, _defineProperty2["default"])({}, key, !selected));
-      } else {
-        setOpened((0, _defineProperty2["default"])({}, key, true));
-      }
+      setOpened((0, _defineProperty2["default"])({}, key, true));
     } else {
       setOpened(function (prev) {
         return (0, _extends4["default"])({}, prev, (0, _defineProperty2["default"])({}, key, !prev[key]));

package/hooks/useVariantVars.d.ts

@@ -0,0 +1,11 @@
+export interface VariantVarsOptions {
+    name: string;
+    variables: string[];
+    variants: string[];
+}
+export declare type UseVariantVarsResult<T> = [
+    value: T,
+    changeValue: (value: T) => void
+];
+declare function useVariantVars({ name, variables, variants, }: VariantVarsOptions): UseVariantVarsResult<any>;
+export default useVariantVars;

package/hooks/useVariantVars.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function useVariantVars(_ref) {
+  var name = _ref.name,
+      variables = _ref.variables,
+      variants = _ref.variants;
+  var root = document.documentElement;
+  var storedValue = localStorage.getItem("--theme-".concat(name));
+
+  var _useState = (0, _react.useState)(storedValue || variants[0]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    localStorage.setItem("--theme-".concat(name), value);
+    variables.forEach(function (varName) {
+      root.style.setProperty("--".concat(varName), "var(--".concat(varName, "-").concat(value, ")"));
+    });
+  }, [value]);
+
+  function changeValue(v) {
+    setValue(v);
+  }
+
+  return [value, changeValue];
+}
+
+var _default = useVariantVars;
+exports["default"] = _default;

package/layouts/Basic/__stories__/Default.js

@@ -11,13 +11,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))));
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))));
 
 var Default = function Default() {
   return _ref;

package/layouts/Basic/__stories__/MultipleRowsLayout.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
-var _Side = require("@digigov/ui/layouts/Basic/Side");
+var _Aside = require("@digigov/ui/layouts/Basic/Aside");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))), /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Side.Side, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column"))), /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Aside.Aside, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
   size: "m"
 }, "One-third-column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a one-third wide column"))));
 

package/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Basic = require("@digigov/ui/layouts/Basic");
 
-var _Content = require("@digigov/ui/layouts/Basic/Content");
+var _Container = require("@digigov/ui/layouts/Basic/Container");
 
 var _Main = require("@digigov/ui/layouts/Basic/Main");
 
-var _Side = require("@digigov/ui/layouts/Basic/Side");
+var _Aside = require("@digigov/ui/layouts/Basic/Aside");
 
 var _typography = require("@digigov/ui/typography");
 
-var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Content.Content, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Side.Side, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
+var _ref = /*#__PURE__*/_react["default"].createElement(_Basic.Layout, null, /*#__PURE__*/_react["default"].createElement(_Container.Container, null, /*#__PURE__*/_react["default"].createElement(_Main.Main, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, null, "Two-thirds column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/_react["default"].createElement(_Aside.Aside, null, /*#__PURE__*/_react["default"].createElement(_typography.Heading, {
   size: "m"
 }, "One-third-column"), /*#__PURE__*/_react["default"].createElement(_typography.Paragraph, null, "This is a paragraph inside a one-third wide column"))));
 

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.30.3",
+  "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.21.1",
-    "@digigov/react-extensions": "0.20.7"
+    "@digigov/react-core": "0.23.0",
+    "@digigov/react-extensions": "0.21.2"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -1,4 +1,5 @@
 declare var _default: {
+    '@digigov/ui/admin/AccessibilityMenu': {};
     '@digigov/ui/admin/AdminLayout': {};
     '@digigov/ui/admin/AutoComplete': {};
     '@digigov/ui/admin/AutoComplete/Status': {};
@@ -56,7 +57,8 @@ declare var _default: {
     '@digigov/ui/app/QrCodeViewer/qrcodegen': {};
     '@digigov/ui/app/QrCodeViewer/types': {};
     '@digigov/ui/app/QrCodeViewer/utils': {};
-    '@digigov/ui/app/ThemeSelectorOptions': {};
+    '@digigov/ui/app/ThemeOptionsForm': {};
+    '@digigov/ui/app/ThemePaletteForm': {};
     '@digigov/ui/core/Accordion': {};
     '@digigov/ui/core/BackLink': {};
     '@digigov/ui/core/Base': {};
@@ -94,15 +96,18 @@ declare var _default: {
     '@digigov/ui/core/NavList': {};
     '@digigov/ui/core/NavList/Nav': {};
     '@digigov/ui/core/NavList/NavList': {};
-    '@digigov/ui/core/NavList/NavListAuto': {};
-    '@digigov/ui/core/NavList/NavListBase': {};
-    '@digigov/ui/core/NavList/NavListContext': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto': {};
+    '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto': {};
     '@digigov/ui/core/NavList/NavListItem': {};
-    '@digigov/ui/core/NavList/NavListItemAuto': {};
     '@digigov/ui/core/NavList/NavListItemBase': {};
     '@digigov/ui/core/NavList/NavListItemButton': {};
     '@digigov/ui/core/NavList/NavListItemLink': {};
-    '@digigov/ui/core/NavList/NavListSubMenu': {};
     '@digigov/ui/core/NavList/NavMenu': {};
     '@digigov/ui/core/NavList/NavMenuContainer': {};
     '@digigov/ui/core/NavList/NavMenuContainerContent': {};
@@ -118,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': {};
@@ -146,13 +152,19 @@ declare var _default: {
     '@digigov/ui/govgr/images/minedu-logo-black-base64': {};
     '@digigov/ui/govgr': {};
     '@digigov/ui/hooks/useDebounce': {};
+    '@digigov/ui/hooks/useFontSize': {};
+    '@digigov/ui/hooks/useHighlightLinks': {};
     '@digigov/ui/hooks/useKeypress': {};
     '@digigov/ui/hooks/useLatest': {};
+    '@digigov/ui/hooks/useLetterSpacing': {};
+    '@digigov/ui/hooks/useLineHeight': {};
     '@digigov/ui/hooks/useNavList': {};
     '@digigov/ui/hooks/useOutdatedBrowserCheck': {};
     '@digigov/ui/hooks/useSearch': {};
     '@digigov/ui/hooks/useTheme': {};
-    '@digigov/ui/hooks/useTogglableSections': {};
+    '@digigov/ui/hooks/useTogglableNav': {};
+    '@digigov/ui/hooks/useTogglableTab': {};
+    '@digigov/ui/hooks/useVariantVars': {};
     '@digigov/ui': {};
     '@digigov/ui/layouts/Basic/Aside': {};
     '@digigov/ui/layouts/Basic/Bottom': {};
@@ -224,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;
@@ -277,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";