@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/es/layouts/Stack/__stories__/Spacing.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+var _ref = /*#__PURE__*/React.createElement(Stack, {
+  spacing: 6
+}, /*#__PURE__*/React.createElement(Stack, {
+  direction: "row"
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 8
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")), /*#__PURE__*/React.createElement(Stack, {
+  direction: "row",
+  spacing: 12
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 1 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 2 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 3 "), /*#__PURE__*/React.createElement(Card, {
+  variant: "border"
+}, " Item 4 ")));
+
+export var Spacing = function Spacing() {
+  return _ref;
+};
+export default Spacing;

package/es/layouts/Stack/index.js

@@ -0,0 +1,2 @@
+import Stack from '@digigov/react-core/Stack';
+export default Stack;

package/es/layouts/index.js

@@ -2,10 +2,12 @@ export * from '@digigov/ui/layouts/Admin';
 export * from '@digigov/ui/layouts/Basic';
 export * from '@digigov/ui/layouts/Divider';
 export * from '@digigov/ui/layouts/Grid';
+export * from '@digigov/ui/layouts/Stack';
 export * from '@digigov/ui/layouts/Hidden';
 export * from '@digigov/ui/layouts/SectionBreak';
 export { default as AdminLayout } from '@digigov/ui/layouts/Admin';
 export { default as BasicLayout } from '@digigov/ui/layouts/Basic';
 export { default as Divider } from '@digigov/ui/layouts/Divider';
 export { default as SectionBreak } from '@digigov/ui/layouts/SectionBreak';
-export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Grid } from '@digigov/ui/layouts/Grid';
+export { default as Stack } from '@digigov/ui/layouts/Stack';

package/es/navigation/BackLink/index.mdx

@@ -13,11 +13,7 @@ import BackLink from "@digigov/ui/navigation/BackLink";
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/BackLink" story="Default.tsx" />
 
 ## API
 

package/es/navigation/Breadcrumbs/index.mdx

@@ -15,11 +15,7 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Breadcrumbs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Breadcrumbs" story="Default.tsx" />
 
 ## API
 

package/es/navigation/Drawer/index.mdx

@@ -9,11 +9,7 @@ import Drawer from '@digigov/ui/app/Drawer';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Drawer"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Drawer" story="Default.tsx" />
 
 ## API
 

package/es/navigation/Dropdown/index.js

@@ -5,7 +5,6 @@ import React, { useEffect, useRef } from 'react';
 import DropdownBase from '@digigov/react-core/DropdownBase';
 export * from '@digigov/react-core/DropdownButton';
 export * from '@digigov/react-core/DropdownContent';
-export * from '@digigov/react-core/DropdownArrowDown';
 
 /**
  * Dropdown component is used for showing more options with a button.

package/es/navigation/Dropdown/index.mdx

@@ -11,31 +11,19 @@ import Dropdown from '@digigov/ui/navigation/Dropdown';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="Default.tsx" />
 
 ### Dropdown with align right
 
 You can display the dropdown menu to the right side of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="AlignRight.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="AlignRight.tsx" />
 
 ### Dropdown with placement top
 
 You can display the dropdown menu to the top of the `Dropdown` button.
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Dropdown"
-  story="PlacementTop.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Dropdown" story="PlacementTop.tsx" />
 
 You can read more about the accessibility patterns used in our Dropdown
 implementation in the ARIA Authoring Practices Guide (APG) at

package/es/navigation/Link/index.mdx

@@ -11,43 +11,23 @@ import Link from '@digigov/ui/navigation/Link';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="Default.tsx" />
 
 ### No Underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="NoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link"story="NoUnderline.tsx" />
 
 ### Opens in a new tab
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="OpensInNewTab.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="OpensInNewTab.tsx" />
 
 ### At dark background
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackground.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackground.tsx" />
 
 ### At dark background and no underline
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Link"
-  story="DarkBackgroundNoUnderline.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
 
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at

package/es/navigation/NavList/index.mdx

@@ -11,19 +11,11 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
 
 ### Vertical NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="Default.tsx" />
 
 ### Horizontal NavList
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/NavList"
-  story="NavVerticalLayout.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/NavList" story="NavVerticalLayout.tsx" />
 
 ## Accessibility
 

package/es/navigation/Pagination/__stories__/Default.js

@@ -38,7 +38,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
   end: 20,
   total: 10000
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
@@ -82,7 +82,7 @@ var _ref5 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
 }, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "right"
 })))));

package/es/navigation/Pagination/__stories__/PaginationSmall.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 10,
   total: 15
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }))), /*#__PURE__*/React.createElement(PaginationListItem, {

package/es/navigation/Pagination/__stories__/PaginationWithSmallFont.js

@@ -7,7 +7,7 @@ import { Pagination, PaginationList, PaginationListItem, PaginationLabel } from
 import { ArrowIcon } from '@digigov/ui/utils/SvgIcon';
 
 var _ref = /*#__PURE__*/React.createElement(Pagination, {
-  fontSize: "sm"
+  size: "sm"
 }, /*#__PURE__*/React.createElement(PaginationLabel, {
   start: 1,
   end: 10,

package/es/navigation/Pagination/__stories__/WithInactiveValues.js

@@ -10,7 +10,7 @@ var _ref = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/React
   end: 20,
   total: 10000
 }), /*#__PURE__*/React.createElement(PaginationList, null, /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "left"
 }), "\u03A0\u03C1\u03BF\u03B7\u03B3\u03BF\u03CD\u03BC\u03B5\u03BD\u03BF")), /*#__PURE__*/React.createElement(PaginationListItem, {
@@ -54,7 +54,7 @@ var _ref3 = /*#__PURE__*/React.createElement(Pagination, null, /*#__PURE__*/Reac
 }, "8")), /*#__PURE__*/React.createElement(PaginationListItem, {
   currentPage: true
 }, "9"), /*#__PURE__*/React.createElement(PaginationListItem, {
-  inactive: true
+  active: false
 }, /*#__PURE__*/React.createElement(Link, null, "\u0395\u03C0\u03CC\u03BC\u03B5\u03BD\u03BF", /*#__PURE__*/React.createElement(ArrowIcon, {
   direction: "right"
 })))));

package/es/navigation/Pagination/index.mdx

@@ -9,27 +9,20 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="Default.tsx"
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="Default.tsx"
 />
 
 ## With inactive values
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithInactiveValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination" story="WithInactiveValues.tsx" />
+
+## With small fonts
+
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="PaginationWithSmallFont.tsx" />
 
 ## With results per page
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Pagination"
-  story="WithResultsPerPage.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Pagination"story="WithResultsPerPage.tsx" />
 
 ## API
 

package/es/navigation/SkipLink/SkipLink.stories.js

@@ -0,0 +1,8 @@
+import SkipLink from '@digigov/ui/navigation/SkipLink';
+export default {
+  title: 'Digigov UI/navigation/SkipLink',
+  description: 'Use the skip link component to help keyboard-only users skip to the main content on a page.',
+  component: SkipLink,
+  displayName: 'SkipLink'
+};
+export * from '@digigov/ui/navigation/SkipLink/__stories__/Default';

package/es/navigation/SkipLink/__stories__/Default.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SkipLink } from '@digigov/ui/navigation/SkipLink';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "\u0393\u03B9\u03B1 \u03BD\u03B1 \u03B5\u03BC\u03C6\u03B1\u03BD\u03B9\u03C3\u03C4\u03B5\u03AF \u03BF \u03C3\u03CD\u03BD\u03B4\u03B5\u03C3\u03BC\u03BF\u03C2, \u03C0\u03B5\u03C1\u03B9\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03BC\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab \u03AE \u03BA\u03AC\u03BD\u03BF\u03BD\u03C4\u03B1\u03C2 \u03BA\u03BB\u03B9\u03BA \u03C3\u03C4\u03BF \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03BA\u03B1\u03B9 \u03BC\u03B5\u03C4\u03AC \u03C0\u03B1\u03C4\u03AE\u03C3\u03C4\u03B5 \u03C4\u03BF \u03BA\u03BF\u03C5\u03BC\u03C0\u03AF tab.");
+
+var _ref2 = /*#__PURE__*/React.createElement(SkipLink, null, "\u039C\u03B5\u03C4\u03AC\u03B2\u03B1\u03C3\u03B7 \u03C3\u03C4\u03BF \u03B2\u03B1\u03C3\u03B9\u03BA\u03CC \u03C0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF");
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/es/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
               }
             }
           ],

package/es/navigation/Tabs/__stories__/Default.js

@@ -1,20 +1,24 @@
 import React from 'react';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
-import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
+import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
-var _ref = /*#__PURE__*/React.createElement(Heading, {
+var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
+
+var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
   href: "#"
 }, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
-var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
 }, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
@@ -24,6 +28,6 @@ export function Default() {
       register = _useTabs.register,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/React.createElement(Tabs, null, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref, _ref2), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref3, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
 }
 export default Default;

package/es/navigation/Tabs/index.js

@@ -19,7 +19,7 @@ export var useTabs = function useTabs() {
 
   var _useTogglableTab = useTogglableTab({
     singleOpen: true,
-    toggleProperty: 'selected',
+    toggleProperty: 'open',
     onToggleProperty: 'onClick',
     firstOpen: true,
     ariaNavigation: true,

package/es/navigation/Tabs/index.mdx

@@ -11,11 +11,7 @@ import Tabs from '@digigov/ui/navigation/Tabs';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="navigation/Tabs"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="navigation/Tabs" story="Default.tsx" />
 
 ## API
 

package/es/registry.js

@@ -10,7 +10,8 @@ import * as _digigov_ui_app_AccessibilityMenu from '@digigov/ui/app/Accessibilit
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
 import * as _digigov_ui_app_BannerContainer from '@digigov/ui/app/BannerContainer';
 import * as _digigov_ui_app_BottomInfo from '@digigov/ui/app/BottomInfo';
-import * as _digigov_ui_app_FilterSection from '@digigov/ui/app/FilterSection';
+import * as _digigov_ui_app_CloseButton from '@digigov/ui/app/CloseButton';
+import * as _digigov_ui_app_FilterContainer from '@digigov/ui/app/FilterContainer';
 import * as _digigov_ui_app_Footer from '@digigov/ui/app/Footer';
 import * as _digigov_ui_app_Header_HeaderContent from '@digigov/ui/app/Header/HeaderContent';
 import * as _digigov_ui_app_Header_HeaderLogo from '@digigov/ui/app/Header/HeaderLogo';
@@ -33,7 +34,7 @@ import * as _digigov_ui_app_NotFound from '@digigov/ui/app/NotFound';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
 import * as _digigov_ui_app_OutdatedBrowserBanner from '@digigov/ui/app/OutdatedBrowserBanner';
-import * as _digigov_ui_app_PageTitle from '@digigov/ui/app/PageTitle';
+import * as _digigov_ui_app_PageTitleContainer from '@digigov/ui/app/PageTitleContainer';
 import * as _digigov_ui_app_Panel from '@digigov/ui/app/Panel';
 import * as _digigov_ui_app_PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 import * as _digigov_ui_app_QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
@@ -88,9 +89,9 @@ import * as _digigov_ui_form_Form from '@digigov/ui/form/Form';
 import * as _digigov_ui_form from '@digigov/ui/form';
 import * as _digigov_ui_form_LabelContainer from '@digigov/ui/form/LabelContainer';
 import * as _digigov_ui_form_RadioContainer from '@digigov/ui/form/RadioContainer';
-import * as _digigov_ui_form_SearchSection from '@digigov/ui/form/SearchSection';
+import * as _digigov_ui_form_SearchContainer from '@digigov/ui/form/SearchContainer';
 import * as _digigov_ui_form_SelectContainer from '@digigov/ui/form/SelectContainer';
-import * as _digigov_ui_form_SingleCharacterInputContainer from '@digigov/ui/form/SingleCharacterInputContainer';
+import * as _digigov_ui_form_SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
 import * as _digigov_ui_form_TextArea from '@digigov/ui/form/TextArea';
 import * as _digigov_ui_form_TextInput from '@digigov/ui/form/TextInput';
 import * as _digigov_ui_govgr_Footer_Copyright from '@digigov/ui/govgr/Footer/Copyright';
@@ -131,7 +132,9 @@ import * as _digigov_ui_layouts_Divider from '@digigov/ui/layouts/Divider';
 import * as _digigov_ui_layouts_Grid from '@digigov/ui/layouts/Grid';
 import * as _digigov_ui_layouts_Hidden from '@digigov/ui/layouts/Hidden';
 import * as _digigov_ui_layouts from '@digigov/ui/layouts';
+import * as _digigov_ui_layouts_Section from '@digigov/ui/layouts/Section';
 import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBreak';
+import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
 import * as _digigov_ui_misc_KitchenSink from '@digigov/ui/misc/KitchenSink';
 import * as _digigov_ui_navigation_BackLink from '@digigov/ui/navigation/BackLink';
 import * as _digigov_ui_navigation_Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
@@ -220,7 +223,8 @@ export default {
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
   '@digigov/ui/app/BannerContainer': lazyImport(_digigov_ui_app_BannerContainer),
   '@digigov/ui/app/BottomInfo': lazyImport(_digigov_ui_app_BottomInfo),
-  '@digigov/ui/app/FilterSection': lazyImport(_digigov_ui_app_FilterSection),
+  '@digigov/ui/app/CloseButton': lazyImport(_digigov_ui_app_CloseButton),
+  '@digigov/ui/app/FilterContainer': lazyImport(_digigov_ui_app_FilterContainer),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),
   '@digigov/ui/app/Header/HeaderLogo': lazyImport(_digigov_ui_app_Header_HeaderLogo),
@@ -243,7 +247,7 @@ export default {
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion),
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck),
   '@digigov/ui/app/OutdatedBrowserBanner': lazyImport(_digigov_ui_app_OutdatedBrowserBanner),
-  '@digigov/ui/app/PageTitle': lazyImport(_digigov_ui_app_PageTitle),
+  '@digigov/ui/app/PageTitleContainer': lazyImport(_digigov_ui_app_PageTitleContainer),
   '@digigov/ui/app/Panel': lazyImport(_digigov_ui_app_Panel),
   '@digigov/ui/app/PhaseBannerHeader': lazyImport(_digigov_ui_app_PhaseBannerHeader),
   '@digigov/ui/app/QrCodeScanner': lazyImport(_digigov_ui_app_QrCodeScanner),
@@ -298,9 +302,9 @@ export default {
   '@digigov/ui/form': lazyImport(_digigov_ui_form),
   '@digigov/ui/form/LabelContainer': lazyImport(_digigov_ui_form_LabelContainer),
   '@digigov/ui/form/RadioContainer': lazyImport(_digigov_ui_form_RadioContainer),
-  '@digigov/ui/form/SearchSection': lazyImport(_digigov_ui_form_SearchSection),
+  '@digigov/ui/form/SearchContainer': lazyImport(_digigov_ui_form_SearchContainer),
   '@digigov/ui/form/SelectContainer': lazyImport(_digigov_ui_form_SelectContainer),
-  '@digigov/ui/form/SingleCharacterInputContainer': lazyImport(_digigov_ui_form_SingleCharacterInputContainer),
+  '@digigov/ui/form/SingleCharacterInputs': lazyImport(_digigov_ui_form_SingleCharacterInputs),
   '@digigov/ui/form/TextArea': lazyImport(_digigov_ui_form_TextArea),
   '@digigov/ui/form/TextInput': lazyImport(_digigov_ui_form_TextInput),
   '@digigov/ui/govgr/Footer/Copyright': lazyImport(_digigov_ui_govgr_Footer_Copyright),
@@ -341,7 +345,9 @@ export default {
   '@digigov/ui/layouts/Grid': lazyImport(_digigov_ui_layouts_Grid),
   '@digigov/ui/layouts/Hidden': lazyImport(_digigov_ui_layouts_Hidden),
   '@digigov/ui/layouts': lazyImport(_digigov_ui_layouts),
+  '@digigov/ui/layouts/Section': lazyImport(_digigov_ui_layouts_Section),
   '@digigov/ui/layouts/SectionBreak': lazyImport(_digigov_ui_layouts_SectionBreak),
+  '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
   '@digigov/ui/misc/KitchenSink': lazyImport(_digigov_ui_misc_KitchenSink),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
@@ -436,12 +442,13 @@ import * as _digigov_ui_form_ErrorMessage_ErrorMessage_stories from '@digigov/ui
 import * as _digigov_ui_form_FileUpload_FileUpload_stories from '@digigov/ui/form/FileUpload/FileUpload.stories';
 import * as _digigov_ui_form_RadioContainer_RadioContainer_stories from '@digigov/ui/form/RadioContainer/RadioContainer.stories';
 import * as _digigov_ui_form_SelectContainer_Select_stories from '@digigov/ui/form/SelectContainer/Select.stories';
-import * as _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories from '@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories';
+import * as _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories from '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories';
 import * as _digigov_ui_form_TextArea_TextArea_stories from '@digigov/ui/form/TextArea/TextArea.stories';
 import * as _digigov_ui_form_TextInput_TextInput_stories from '@digigov/ui/form/TextInput/TextInput.stories';
 import * as _digigov_ui_layouts_Basic_Basic_stories from '@digigov/ui/layouts/Basic/Basic.stories';
 import * as _digigov_ui_layouts_Divider_Divider_stories from '@digigov/ui/layouts/Divider/Divider.stories';
 import * as _digigov_ui_layouts_Grid_Grid_stories from '@digigov/ui/layouts/Grid/Grid.stories';
+import * as _digigov_ui_layouts_Stack_Stack_stories from '@digigov/ui/layouts/Stack/Stack.stories';
 import * as _digigov_ui_navigation_BackLink_BackLink_stories from '@digigov/ui/navigation/BackLink/BackLink.stories';
 import * as _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories from '@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories';
 import * as _digigov_ui_navigation_Drawer_Drawer_stories from '@digigov/ui/navigation/Drawer/Drawer.stories';
@@ -449,6 +456,7 @@ import * as _digigov_ui_navigation_Dropdown_Dropdown_stories from '@digigov/ui/n
 import * as _digigov_ui_navigation_Link_Link_stories from '@digigov/ui/navigation/Link/Link.stories';
 import * as _digigov_ui_navigation_NavList_NavList_stories from '@digigov/ui/navigation/NavList/NavList.stories';
 import * as _digigov_ui_navigation_Pagination_Pagination_stories from '@digigov/ui/navigation/Pagination/Pagination.stories';
+import * as _digigov_ui_navigation_SkipLink_SkipLink_stories from '@digigov/ui/navigation/SkipLink/SkipLink.stories';
 import * as _digigov_ui_navigation_Tabs_Tabs_stories from '@digigov/ui/navigation/Tabs/Tabs.stories';
 import * as _digigov_ui_typography_Heading_Heading_stories from '@digigov/ui/typography/Heading/Heading.stories';
 import * as _digigov_ui_typography_HeadingCaption_HeadingCaption_stories from '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories';
@@ -491,12 +499,13 @@ export var stories = {
   '@digigov/ui/form/FileUpload/FileUpload.stories': _digigov_ui_form_FileUpload_FileUpload_stories,
   '@digigov/ui/form/RadioContainer/RadioContainer.stories': _digigov_ui_form_RadioContainer_RadioContainer_stories,
   '@digigov/ui/form/SelectContainer/Select.stories': _digigov_ui_form_SelectContainer_Select_stories,
-  '@digigov/ui/form/SingleCharacterInputContainer/SingleCharacterInputContainer.stories': _digigov_ui_form_SingleCharacterInputContainer_SingleCharacterInputContainer_stories,
+  '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories': _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories,
   '@digigov/ui/form/TextArea/TextArea.stories': _digigov_ui_form_TextArea_TextArea_stories,
   '@digigov/ui/form/TextInput/TextInput.stories': _digigov_ui_form_TextInput_TextInput_stories,
   '@digigov/ui/layouts/Basic/Basic.stories': _digigov_ui_layouts_Basic_Basic_stories,
   '@digigov/ui/layouts/Divider/Divider.stories': _digigov_ui_layouts_Divider_Divider_stories,
   '@digigov/ui/layouts/Grid/Grid.stories': _digigov_ui_layouts_Grid_Grid_stories,
+  '@digigov/ui/layouts/Stack/Stack.stories': _digigov_ui_layouts_Stack_Stack_stories,
   '@digigov/ui/navigation/BackLink/BackLink.stories': _digigov_ui_navigation_BackLink_BackLink_stories,
   '@digigov/ui/navigation/Breadcrumbs/Breadcrumbs.stories': _digigov_ui_navigation_Breadcrumbs_Breadcrumbs_stories,
   '@digigov/ui/navigation/Drawer/Drawer.stories': _digigov_ui_navigation_Drawer_Drawer_stories,
@@ -504,6 +513,7 @@ export var stories = {
   '@digigov/ui/navigation/Link/Link.stories': _digigov_ui_navigation_Link_Link_stories,
   '@digigov/ui/navigation/NavList/NavList.stories': _digigov_ui_navigation_NavList_NavList_stories,
   '@digigov/ui/navigation/Pagination/Pagination.stories': _digigov_ui_navigation_Pagination_Pagination_stories,
+  '@digigov/ui/navigation/SkipLink/SkipLink.stories': _digigov_ui_navigation_SkipLink_SkipLink_stories,
   '@digigov/ui/navigation/Tabs/Tabs.stories': _digigov_ui_navigation_Tabs_Tabs_stories,
   '@digigov/ui/typography/Heading/Heading.stories': _digigov_ui_typography_Heading_Heading_stories,
   '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories': _digigov_ui_typography_HeadingCaption_HeadingCaption_stories,

package/es/typography/Heading/__stories__/Default.js

@@ -6,19 +6,24 @@ var _ref = /*#__PURE__*/React.createElement(Heading, null, " govgr-heading-xl ")
 var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   size: "lg",
   element: "h2"
-}, ' ', "govgr-heading-lg", ' ');
+}, "govgr-heading-lg");
 
 var _ref3 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
-}, ' ', "govgr-heading-md", ' ');
+}, "govgr-heading-md");
 
 var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: "sm",
   element: "h4"
-}, ' ', "govgr-heading-sm", ' ');
+}, "govgr-heading-sm");
+
+var _ref5 = /*#__PURE__*/React.createElement(Heading, {
+  size: "xs",
+  element: "h5"
+}, "govgr-heading-xs");
 
 export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2, _ref3, _ref4, _ref5);
 };
 export default Default;

package/es/typography/Heading/index.mdx

@@ -9,11 +9,7 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Heading"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Heading"story="Default.tsx" />
 
 ## API
 

package/es/typography/HeadingCaption/index.mdx

@@ -9,11 +9,7 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/HeadingCaption"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/HeadingCaption" story="Default.tsx" />
 
 ### Nested caption to title