@digigov/ui 0.30.2 → 0.31.0

package/es/typography/NormalText/__stories__/FontSizes.js

@@ -6,37 +6,49 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "14"
 }, " govgr-!-font-size-14 ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "16"
 }, " govgr-!-font-size-16 ");
 
-var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref4 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref5 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "19"
 }, " govgr-!-font-size-19 ");
 
-var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref6 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref7 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "24"
 }, " govgr-!-font-size-24 ");
 
-var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref8 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref9 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "30"
 }, " govgr-!-font-size-30 ");
 
-var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref10 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref11 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "48"
 }, " govgr-!-font-size-48 ");
 
-var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref12 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref13 = /*#__PURE__*/React.createElement(NormalText, {
   fontSize: "72"

package/es/typography/NormalText/__stories__/FontWeight.js

@@ -6,7 +6,9 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   fontWeight: "regular"
 }, " govgr-!-font-weight-regular ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   fontWeight: "bold"

package/es/typography/NormalText/__stories__/Variants.js

@@ -6,7 +6,9 @@ var _ref = /*#__PURE__*/React.createElement(NormalText, {
   variant: "small"
 }, " govgr-variant-small ");
 
-var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, null);
+var _ref2 = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+});
 
 var _ref3 = /*#__PURE__*/React.createElement(NormalText, {
   variant: "lead"

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/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,8 +87,8 @@ 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;
 
@@ -91,7 +97,8 @@ export var Default = function Default() {
     }, /*#__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, {
@@ -101,11 +108,15 @@ export var Default = function Default() {
     }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
       layout: layout
     }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      role: "menu",
       layout: layout
     }, (_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
+  }));
+});