@digigov/ui 0.30.3 → 0.32.0

package/esm/admin/AccessibilityMenu/index.js

@@ -0,0 +1,13 @@
+export * from '@digigov/react-extensions/admin/AccessibilityMenu';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuContent';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuHeader';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuBody';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuList';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuListItem';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuOptionButton';
+export * from '@digigov/react-extensions/admin/AccessibilityMenuSteps';
+export * from '@digigov/react-core/AccessibilityIcon';
+export * from '@digigov/react-core/AccessibilityTextIcon';
+import AccessibilityMenu from '@digigov/react-extensions/admin/AccessibilityMenu';
+export default AccessibilityMenu;

package/esm/admin/Chip/index.js

@@ -3,5 +3,6 @@ export * from '@digigov/react-extensions/admin/ChipHeading';
 export * from '@digigov/react-extensions/admin/ChipSection';
 export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
 export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
+export * from '@digigov/react-extensions/admin/ChipKeyValue';
 import Chip from '@digigov/react-extensions/admin/Chip';
 export default Chip;

package/esm/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/esm/admin/Drawer/__stories__/Default.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/admin/Drawer';
 import { isNavListItemLinkInterface, NavListAuto, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/core/NavList';
-import { useNavList } from "@digigov/ui/hooks/useNavList";
+import { useNavList } from '@digigov/ui/hooks/useNavList';
 import { Title } from '@digigov/ui/typography/Title';
 import { DrawerHeading } from '@digigov/ui/admin/Drawer';
 import { Link } from '@digigov/ui/core';
@@ -64,13 +64,19 @@ export var Default = function Default() {
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return _extends({}, registerLink(name));
   };
 
   var layout = 'vertical';
+  var border = false;
   return /*#__PURE__*/React.createElement(Drawer, {
     direction: "left",
     open: open
@@ -81,31 +87,32 @@ export var Default = function Default() {
   }, _ref), /*#__PURE__*/React.createElement(NavListAuto, {
     layout: layout,
     links: links,
-    "aria-label": "Nav list",
-    role: "menu"
+    border: border,
+    "aria-label": "Nav list"
   }, links.map(function (item, key) {
     var _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement(NavListItem, {
-      layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/React.createElement(NavMenu, _extends({
       layout: layout
     }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
       layout: layout,
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
-      layout: layout
-    }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
-      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, {
-        key: menuIndex
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/esm/admin/Dropdown/__stories__/AlignRight.js

@@ -25,7 +25,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(NavVertical, {
   role: "menu"
@@ -39,7 +38,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(Button, {
   role: "menuitem"

package/esm/admin/Dropdown/__stories__/Default.js

@@ -24,7 +24,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(NavVertical, {
   role: "menu"
@@ -38,7 +37,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(Button, {
   role: "menuitem"

package/esm/admin/Dropdown/__stories__/PlacementTop.js

@@ -25,7 +25,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(NavVertical, {
   role: "menu"
@@ -39,7 +38,6 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {
-  visible: true,
   role: "separator"
 }), /*#__PURE__*/React.createElement(Button, {
   role: "menuitem"

package/esm/admin/FilterSection/index.js

@@ -1,6 +1,5 @@
 export * from '@digigov/react-extensions/admin/FilterSection';
-export * from '@digigov/react-extensions/admin/FilterSectionHorizontal';
-export * from '@digigov/react-extensions/admin/FilterHeadingSection';
+export * from '@digigov/react-extensions/admin/FilterHeading';
 export * from '@digigov/react-extensions/admin/FilterContent';
 export * from '@digigov/react-extensions/admin/FilterOptionsSection';
 export * from '@digigov/react-extensions/admin/FilterSelectedHeading';

package/esm/admin/Modal/index.js

@@ -1,5 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["open", "children", "onEscape"];
 export * from '@digigov/react-extensions/admin/ModalContainer';
@@ -43,18 +43,22 @@ export var useModal = function useModal() {
     }
   };
 };
-export var Modal = function Modal(props) {
+export var Modal = /*#__PURE__*/React.forwardRef(function Modal(_ref, ref) {
+  var props = _extends({}, _ref);
+
   if (props.open) {
-    return /*#__PURE__*/React.createElement(ModalBase, props);
+    return /*#__PURE__*/React.createElement(ModalBase, _extends({
+      ref: ref
+    }, props));
   } else {
     return null;
   }
-};
-export var ModalBase = function ModalBase(_ref) {
-  var open = _ref.open,
-      children = _ref.children,
-      onEscape = _ref.onEscape,
-      props = _objectWithoutProperties(_ref, _excluded);
+});
+export var ModalBase = /*#__PURE__*/React.forwardRef(function ModalBase(_ref2, ref) {
+  var open = _ref2.open,
+      children = _ref2.children,
+      onEscape = _ref2.onEscape,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   var firstModalElement = useRef();
   var lastModalElement = useRef();
@@ -71,7 +75,8 @@ export var ModalBase = function ModalBase(_ref) {
   }, [open]);
   return /*#__PURE__*/React.createElement(ModalContainer, _extends({
     open: open,
-    role: "dialog"
+    role: "dialog",
+    ref: ref
   }, props, {
     "aria-hidden": "false",
     "aria-modal": "true"
@@ -84,5 +89,5 @@ export var ModalBase = function ModalBase(_ref) {
     ref: lastModalElement,
     "aria-hidden": "true"
   }));
-};
+});
 export default Modal;

package/esm/admin/Pagination/__stories__/Default.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
@@ -29,8 +29,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   direction: "right"
 })))));
 
-var _ref2 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "l"
 });
 
@@ -60,8 +59,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   direction: "right"
 })))));
 
-var _ref4 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "l"
 });
 
@@ -89,8 +87,7 @@ var _ref5 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   direction: "right"
 })))));
 
-var _ref6 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "l"
 });
 

package/esm/admin/Pagination/__stories__/PaginationSmall.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from '@digigov/ui/admin/Pagination';
 import { ArrowIcon } from '@digigov/ui/core/SvgIcon';
 import { Link } from '@digigov/ui/core/Link';
-import { Divider } from '@digigov/ui/core/Divider';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 import { I18NProvider } from '@digigov/ui/app/i18n';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React.createElement(PaginationLabel, {
@@ -21,8 +21,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   direction: "right"
 })))));
 
-var _ref2 = /*#__PURE__*/React.createElement(Divider, {
-  visible: true,
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
   size: "l"
 });
 

package/esm/app/Footer/__stories__/FooterAllInclusive.js

@@ -12,6 +12,7 @@ import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
 var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.createElement(FooterNavigation, null, /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD"), /*#__PURE__*/React.createElement(FooterList, {
   columns: 2
 }, /*#__PURE__*/React.createElement(FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/React.createElement(FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")))), /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, null, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03AC\u03BB\u03BB\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"))))), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false,
   size: "m"
 }), /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
   grow: true

package/esm/app/Footer/__stories__/FooterWithSecondaryNavigation.js

@@ -16,6 +16,7 @@ var _ref = /*#__PURE__*/React.createElement(Footer, null, /*#__PURE__*/React.cre
 }, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE")))), /*#__PURE__*/React.createElement(FooterSection, null, /*#__PURE__*/React.createElement(FooterHeading, {
   size: "m"
 }, "\u03A4\u03AF\u03C4\u03BB\u03BF\u03C2 \u03B3\u03B9\u03B1 \u03C4\u03BF \u03AC\u03BB\u03BB\u03BF \u03BC\u03B5\u03BD\u03BF\u03CD size m"), /*#__PURE__*/React.createElement(FooterList, null, /*#__PURE__*/React.createElement(FooterListItem, null, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"), /*#__PURE__*/React.createElement(FooterListItem, null, /*#__PURE__*/React.createElement(FooterLink, null, "\u0386\u03BB\u03BB\u03B7 \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE"))))), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false,
   size: "m"
 }), /*#__PURE__*/React.createElement(FooterMeta, null, /*#__PURE__*/React.createElement(FooterMetaItem, {
   grow: true

package/esm/app/Header/__stories__/WithNavigation.js

@@ -15,14 +15,16 @@ var _ref = /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.cre
   href: "#"
 }))));
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 export var WithNavigation = function WithNavigation() {
   var _useNavList = useNavList(),
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
   };
 
   return /*#__PURE__*/React.createElement(Top, null, _ref, /*#__PURE__*/React.createElement(Nav, {
@@ -33,28 +35,28 @@ export var WithNavigation = function WithNavigation() {
       label: 'Home',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/React.createElement(NavListItem, {
     link: {
       name: 'form',
       label: 'Form registration',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/React.createElement(NavListItem, {
     link: {
       name: 'news',
       label: 'News',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), /*#__PURE__*/React.createElement(NavListItem, {
     link: {
       name: 'contact',
       label: 'Contact',
       subMenu: []
     },
-    setRegister: setRegister
+    setRegisterButton: setRegisterButton
   }), _ref2)));
 };
 export default WithNavigation;

package/esm/app/QrCodeScanner/__stories__/Default.js

@@ -1,7 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { Suspense, useState } from 'react';
 import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
 
 var _ref = /*#__PURE__*/React.createElement("div", null, "Loading...");
@@ -45,8 +45,8 @@ export var Default = function Default() {
     validate: validate,
     onScan: handleScan,
     onError: handleError
-  }, error.message && /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-    size: "sm"
+  }, error.message && /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+    size: "s"
   }, error.message))));
 };
 export default Default;

package/esm/app/QrCodeViewer/index.js

@@ -27,8 +27,7 @@ var ERROR_LEVEL_MAP = {
   Q: qrcodegen.QrCode.Ecc.QUARTILE,
   H: qrcodegen.QrCode.Ecc.HIGH
 };
-
-function QrCodeViewerCanvas(props) {
+var QrCodeViewerCanvas = /*#__PURE__*/React.forwardRef(function QrCodeViewerCanvas(props, ref) {
   var value = props.value,
       _props$size = props.size,
       size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
@@ -46,7 +45,7 @@ function QrCodeViewerCanvas(props) {
 
   var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
 
-  var _canvas = useRef(null);
+  var _canvas = ref || useRef(null);
 
   var _image = useRef(null); // We're just using this state to trigger rerenders when images load. We
   // Don't actually read the value anywhere. A smarter use of useEffect would
@@ -149,9 +148,9 @@ function QrCodeViewerCanvas(props) {
     width: size,
     ref: _canvas
   }, otherProps)), img);
-}
-
-export var QrCodeViewer = function QrCodeViewer(props) {
-  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, props);
-};
-export default QrCodeViewer;
+});
+export var QrCodeViewer = /*#__PURE__*/React.forwardRef(function QrCodeViewer(props, ref) {
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, _extends({}, props, {
+    ref: ref
+  }));
+});

package/esm/app/ThemeOptionsForm/index.js

@@ -0,0 +1,215 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import Button from '@digigov/ui/core/Button';
+import FieldContainer, { Fieldset, FieldsetLegend } from '@digigov/ui/core/FieldContainer';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import SectionBreak from '@digigov/ui/core/SectionBreak';
+import useTheme from '@digigov/ui/hooks/useTheme';
+import useFontSize from '@digigov/ui/hooks/useFontSize';
+import useLineHeight from '@digigov/ui/hooks/useLineHeight';
+import useLetterSpacing from '@digigov/ui/hooks/useLetterSpacing';
+import useHighlightLinks from '@digigov/ui/hooks/useHighlightLinks';
+
+var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B8\u03AD\u03BC\u03B1\u03C4\u03BF\u03C2");
+
+var _ref2 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "M\u03AD\u03B3\u03B5\u03B8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref3 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u038E\u03C8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AE\u03C2 \u03BA\u03B5\u03B9\u03BC\u03AD\u03BD\u03C9\u03BD");
+
+var _ref4 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0391\u03C0\u03CC\u03C3\u03C4\u03B1\u03C3\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref5 = /*#__PURE__*/React.createElement(FieldsetLegend, {
+  size: "s"
+}, "\u0388\u03BD\u03C4\u03BF\u03BD\u03B7 \u03B5\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03C9\u03BD");
+
+var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
+
+export var ThemeOptionsForm = function ThemeOptionsForm() {
+  var _useTheme = useTheme(),
+      _useTheme2 = _slicedToArray(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
+
+  var _useState = useState(theme || 'auto'),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedTheme = _useState2[0],
+      setSelectedTheme = _useState2[1];
+
+  var _useFontSize = useFontSize(),
+      _useFontSize2 = _slicedToArray(_useFontSize, 2),
+      fontSize = _useFontSize2[0],
+      changeFontSize = _useFontSize2[1];
+
+  var _useState3 = useState(fontSize || 'default'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedFontSize = _useState4[0],
+      setSelectedFontSize = _useState4[1];
+
+  var _useLineHeight = useLineHeight(),
+      _useLineHeight2 = _slicedToArray(_useLineHeight, 2),
+      lineHeight = _useLineHeight2[0],
+      changeLineHeight = _useLineHeight2[1];
+
+  var _useState5 = useState(lineHeight || 'default'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      selectedLineHeight = _useState6[0],
+      setSelectedLineHeight = _useState6[1];
+
+  var _useLetterSpacing = useLetterSpacing(),
+      _useLetterSpacing2 = _slicedToArray(_useLetterSpacing, 2),
+      letterSpacing = _useLetterSpacing2[0],
+      changeLetterSpacing = _useLetterSpacing2[1];
+
+  var _useState7 = useState(letterSpacing || 'default'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedLetterSpacing = _useState8[0],
+      setSelectedLetterSpacing = _useState8[1];
+
+  var _useHighlightLinks = useHighlightLinks(),
+      _useHighlightLinks2 = _slicedToArray(_useHighlightLinks, 2),
+      highlightLinks = _useHighlightLinks2[0],
+      changeHighlightLinks = _useHighlightLinks2[1];
+
+  var _useState9 = useState(highlightLinks || 'default'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedHighlightLinks = _useState10[0],
+      setSelectedHighlightLinks = _useState10[1];
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+
+  function optionsHasChanged() {
+    if (theme != selectedTheme || fontSize != selectedFontSize || lineHeight != selectedLineHeight || letterSpacing != selectedLetterSpacing || highlightLinks != selectedHighlightLinks) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref, /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "light",
+    onChange: function onChange() {
+      return setSelectedTheme('light');
+    },
+    checked: selectedTheme === 'light'
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "dark",
+    onChange: function onChange() {
+      return setSelectedTheme('dark');
+    },
+    checked: selectedTheme === 'dark'
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "theme_mode",
+    value: "auto",
+    onChange: function onChange() {
+      return setSelectedTheme('auto');
+    },
+    checked: selectedTheme === 'auto'
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref2, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "font-size",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedFontSize('default');
+    },
+    checked: selectedFontSize === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "font-size",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedFontSize('large');
+    },
+    checked: selectedFontSize === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref3, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "line-height",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLineHeight('default');
+    },
+    checked: selectedLineHeight === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "line-height",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLineHeight('large');
+    },
+    checked: selectedLineHeight === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref4, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "letter-spacing",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLetterSpacing('default');
+    },
+    checked: selectedLetterSpacing === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03AE (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "letter-spacing",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLetterSpacing('extra');
+    },
+    checked: selectedLetterSpacing === 'extra'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03B7")))), /*#__PURE__*/React.createElement(FieldContainer, {
+    marginBottom: 4
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref5, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    name: "highlight-links",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedHighlightLinks('default');
+    },
+    checked: selectedHighlightLinks === 'default'
+  }, "\u038C\u03C7\u03B9 (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
+    name: "highlight-links",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedHighlightLinks('highlight');
+    },
+    checked: selectedHighlightLinks === 'highlight'
+  }, "\u039D\u03B1\u03B9")), /*#__PURE__*/React.createElement(Button, {
+    onClick: resetOptions,
+    variant: "link"
+  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"))), _ref6, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleOptions,
+    disabled: !optionsHasChanged()
+  }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
+};
+export default ThemeOptionsForm;

package/esm/app/{ThemeSelectorOptions → ThemePaletteForm}/index.js

@@ -11,10 +11,11 @@ var _ref = /*#__PURE__*/React.createElement(FieldsetLegend, null, /*#__PURE__*/R
 
 var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
 
-export var ThemeToggleOptions = function ThemeToggleOptions() {
+export var ThemePaletteForm = function ThemePaletteForm() {
   var _useTheme = useTheme(),
-      theme = _useTheme.theme,
-      changeTheme = _useTheme.changeTheme;
+      _useTheme2 = _slicedToArray(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
 
   var _useState = useState(theme || 'auto'),
       _useState2 = _slicedToArray(_useState, 2),
@@ -52,4 +53,4 @@ export var ThemeToggleOptions = function ThemeToggleOptions() {
     }
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
 };
-export default ThemeToggleOptions;
+export default ThemePaletteForm;