@digigov/ui 0.30.2 → 0.31.0

package/es/core/NavList/__stories__/NavHorizontalLayout.js

@@ -31,18 +31,25 @@ var links = [{
 }];
 export var NavHorizontalLayout = function NavHorizontalLayout() {
   var layout = 'horizontal';
+  var border = true;
 
   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));
   };
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout
+    layout: layout,
+    border: border
   }, /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, links.map(function (item, key) {
@@ -53,7 +60,8 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__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, {
@@ -63,11 +71,15 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__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, {
+        role: "presentation",
         key: menuIndex
       }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/es/core/NavList/__stories__/NavListEpathlaExample.js

@@ -7,7 +7,7 @@ var LANG = 'el';
 var DEFAULT_HREF_FLAG = true;
 var epathlaLinks = [{
   name: 'index',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG),
+  href: DEFAULT_HREF_FLAG ? '#index' : "/".concat(LANG),
   label: 'Αρχική'
 }, {
   name: 'epathla',
@@ -71,7 +71,7 @@ var epathlaLinks = [{
   }]
 }, {
   name: 'news',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/news"),
+  href: DEFAULT_HREF_FLAG ? '#news' : "/".concat(LANG, "/news"),
   label: 'Νέα'
 }, {
   name: 'send-report',
@@ -89,32 +89,44 @@ var epathlaLinks = [{
 export var NavListEpathlaExample = function NavListEpathlaExample() {
   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));
   };
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListAuto, {
     layout: 'horizontal',
     links: epathlaLinks,
-    "aria-label": "Nav list",
-    role: "menu"
+    "aria-label": "Nav list"
   }, epathlaLinks.map(function (item, key) {
-    var _item$subMenu;
+    var _container, _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement(NavListItem, {
       link: item,
-      setRegister: setRegister
-    }), /*#__PURE__*/React.createElement(NavMenu, container(item.name), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
+    }), (item === null || item === void 0 ? void 0 : item.subMenu) && /*#__PURE__*/React.createElement(NavMenu, _extends({}, container(item.name), {
+      "aria-expanded": (_container = container(item.name)) === null || _container === void 0 ? void 0 : _container.active
+    }), /*#__PURE__*/React.createElement(NavMenuContainer, {
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, null, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+    }, /*#__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: "".concat(item.name, "-").concat(menuIndex),
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/es/core/NavList/__stories__/NavListHorizontalAutoExample.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+var links = [{
+  name: 'Nav1',
+  label: 'Nav list item 1',
+  href: '#'
+}, {
+  name: 'Nav2',
+  label: 'Nav list item 2',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav2.1',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.2',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.3',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.4',
+      label: 'link navigation',
+      href: '#'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Nav list item 3',
+  href: '#'
+}];
+export var NavListHorizontalAutoExample = function NavListHorizontalAutoExample() {
+  var layout = 'horizontal';
+  var border = true;
+  return /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  }));
+};
+export default NavListHorizontalAutoExample;

package/es/core/NavList/__stories__/NavListSecondaryAutoExample.js

@@ -0,0 +1,255 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+import FieldContainer, { Fieldset } from '@digigov/ui/core/FieldContainer';
+import Hint from '@digigov/ui/typography/Hint';
+import { RadioContainer, RadioItem } from '@digigov/ui/core/RadioContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+var links = [{
+  name: 'Nav1',
+  label: 'Item list 1',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav1__Nav1.1',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav1__Nav1.2',
+      label: 'link navigation',
+      href: '?q=item'
+    }]
+  }
+}, {
+  name: 'Nav2',
+  label: 'Item list 2',
+  menu: {
+    title: 'This is the second Menu',
+    links: [{
+      name: 'Nav2__Nav2.1',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.2',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.3',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.4',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.5',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.6',
+      label: 'link navigation',
+      href: '?q=item'
+    }, {
+      name: 'Nav2__Nav2.7',
+      label: 'link navigation',
+      href: '?q=item'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Item list 3',
+  subMenu: [{
+    name: 'Nav3__Nav3.1',
+    label: 'Item list 4',
+    href: '?q=item4'
+  }, {
+    name: 'Nav3__Nav3.2',
+    label: 'Item list 5',
+    subMenu: [{
+      name: 'Nav3__Nav3.2__Nav3.2.1',
+      label: 'Item list 5.2',
+      menu: {
+        title: 'This is the fifth Menu',
+        links: [{
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.1',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.2',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.3',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.4',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.5',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.6',
+          label: 'link navigation',
+          href: '?q=item'
+        }, {
+          name: 'Nav3__Nav3.2__Nav3.2.1__Nav3.2.1.7',
+          label: 'link navigation',
+          href: '?q=item'
+        }]
+      }
+    }]
+  }, {
+    name: 'Nav3__Nav3.3',
+    label: 'Item list 6',
+    menu: {
+      title: 'This is the sixth Menu',
+      links: [{
+        name: 'Nav3__Nav3.3__Nav3.3.1',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.2',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.3',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.4',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.5',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.6',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.7',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.8',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.9',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.10',
+        label: 'link navigation',
+        href: '?q=item'
+      }, {
+        name: 'Nav3__Nav3.3__Nav3.3.11',
+        label: 'link navigation',
+        href: '?q=item'
+      }]
+    }
+  }]
+}];
+
+var _ref = /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false,
+  size: "l"
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Layout options:");
+
+var _ref3 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Bottom border:");
+
+var _ref4 = /*#__PURE__*/React.createElement(Hint, {
+  id: "name-hint"
+}, "Position fixed:");
+
+export var NavListSecondaryAutoExample = function NavListSecondaryAutoExample() {
+  var _useState = useState('horizontal'),
+      _useState2 = _slicedToArray(_useState, 2),
+      layout = _useState2[0],
+      setLayout = _useState2[1];
+
+  var _useState3 = useState('no'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      border = _useState4[0],
+      setBorder = _useState4[1];
+
+  var _useState5 = useState('no'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      fixed = _useState6[0],
+      setFixed = _useState6[1];
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border === 'yes',
+    fixed: fixed === 'yes',
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  })), _ref, /*#__PURE__*/React.createElement(FieldContainer, null, /*#__PURE__*/React.createElement(Fieldset, {
+    "aria-describedby": "name-hint"
+  }, _ref2, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: layout === 'vertical',
+    name: "changed_display",
+    value: "vertical",
+    onClick: function onClick() {
+      return setLayout('vertical');
+    }
+  }, "Vertical"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: layout === 'horizontal',
+    name: "changed_display",
+    value: "horizontal",
+    onClick: function onClick() {
+      return setLayout('horizontal');
+    }
+  }, "Horizontal")), _ref3, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: border === 'yes',
+    name: "changed_border",
+    value: "yes",
+    onClick: function onClick() {
+      return setBorder('yes');
+    }
+  }, "Yes"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: border === 'no',
+    name: "changed_border",
+    value: "no",
+    onClick: function onClick() {
+      return setBorder('no');
+    }
+  }, "No")), _ref4, /*#__PURE__*/React.createElement(RadioContainer, {
+    inline: true
+  }, /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: fixed === 'yes',
+    name: "changed_position",
+    value: "yes",
+    onClick: function onClick() {
+      return setFixed('yes');
+    }
+  }, "Yes"), /*#__PURE__*/React.createElement(RadioItem, {
+    defaultChecked: fixed === 'no',
+    name: "changed_position",
+    value: "no",
+    onClick: function onClick() {
+      return setFixed('no');
+    }
+  }, "No")))));
+};
+export default NavListSecondaryAutoExample;

package/es/core/NavList/__stories__/NavListVerticalAutoExample.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+var links = [{
+  name: 'Nav1',
+  label: 'Nav list item 1',
+  href: '#'
+}, {
+  name: 'Nav2',
+  label: 'Nav list item 2',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav2.1',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.2',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.3',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.4',
+      label: 'link navigation',
+      href: '#'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Nav list item 3',
+  href: '#'
+}];
+export var NavListVerticalAutoExample = function NavListVerticalAutoExample() {
+  var layout = 'vertical';
+  var border = false;
+  return /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  }));
+};
+export default NavListVerticalAutoExample;

package/es/core/NavList/index.js

@@ -1,11 +1,8 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
-export * from '@digigov/ui/core/NavList/NavListAuto';
-export * from '@digigov/ui/core/NavList/NavListItemAuto';
-export * from '@digigov/ui/core/NavList/NavListSubMenu';
-export * from '@digigov/ui/core/NavList/NavListContext';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';
 export * from '@digigov/ui/core/NavList/NavList';
-export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListItemLink';
 export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { Tabs, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/core/Tabs';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
 import { Link } from '@digigov/ui/core/Link';
 
-var _ref = /*#__PURE__*/React.createElement(Title, {
-  size: "md",
+var _ref = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
@@ -14,8 +14,8 @@ var _ref2 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/Rea
   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(Title, {
-  size: "md",
+var _ref3 = /*#__PURE__*/React.createElement(Heading, {
+  size: "m",
   element: "h3"
 }, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
 

package/es/core/Tabs/index.js

@@ -3,12 +3,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["register", "opened"];
 import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
-import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+import { useTogglableTab } from '@digigov/ui/hooks/useTogglableTab';
 export var useTabs = function useTabs() {
   var registeredPanels = useRef({});
   var goTo = useCallback(function (key) {
-    console.log(registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop);
-
     if (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop >= 30) {
       var _registeredPanels$cur;
 
@@ -19,7 +17,7 @@ export var useTabs = function useTabs() {
     }
   }, []);
 
-  var _useTogglableSections = useTogglableSections({
+  var _useTogglableTab = useTogglableTab({
     singleOpen: true,
     toggleProperty: 'selected',
     onToggleProperty: 'onClick',
@@ -27,9 +25,9 @@ export var useTabs = function useTabs() {
     ariaNavigation: true,
     toggleHook: goTo
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+      register = _useTogglableTab.register,
+      opened = _useTogglableTab.opened,
+      rest = _objectWithoutProperties(_useTogglableTab, _excluded);
 
   var panel = useCallback(function (key) {
     return {

package/es/hooks/useFontSize.js

@@ -0,0 +1,10 @@
+import useVariantVars from "@digigov/ui/hooks/useVariantVars";
+export var useFontSize = function useFontSize() {
+  var config = {
+    'name': 'font-size',
+    'variables': ['text-sm', 'text-base', 'text-lg', 'text-xl', 'text-2xl', 'text-3xl', 'text-4xl', 'text-5xl'],
+    'variants': ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useFontSize;

package/es/hooks/useHighlightLinks.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState, useEffect } from 'react';
+export var useHighlightLinks = function useHighlightLinks() {
+  var storedHighlightLinks = localStorage.getItem('--theme-highlight-links');
+
+  var _useState = useState(storedHighlightLinks || 'default'),
+      _useState2 = _slicedToArray(_useState, 2),
+      highlightLinks = _useState2[0],
+      changeHighlightLinks = _useState2[1];
+
+  useEffect(function () {
+    if (highlightLinks === 'highlight') {
+      document.documentElement.classList.add("govgr-highlight-links");
+    } else {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    }
+
+    localStorage.setItem('--theme-highlight-links', highlightLinks);
+  }, [highlightLinks]);
+  useEffect(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.classList.remove("govgr-highlight-links");
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      document.documentElement.classList.add(localStorage.getItem('--theme-highlight-links') === 'highlight' ? "govgr-highlight-links" : '');
+    };
+
+    window.addEventListener('beforeprint', beforePrintListener);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return [highlightLinks, changeHighlightLinks];
+};
+export default useHighlightLinks;

package/es/hooks/useLetterSpacing.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLetterSpacing = function useLetterSpacing() {
+  var config = {
+    name: 'letter-spacing',
+    variables: ["letter-spacing-normal", "letter-spacing-wide", "letter-spacing-wider", "letter-spacing-widest"],
+    variants: ['default', 'extra']
+  };
+  return useVariantVars(config);
+};
+export default useLetterSpacing;

package/es/hooks/useLineHeight.js

@@ -0,0 +1,10 @@
+import useVariantVars from '@digigov/ui/hooks/useVariantVars';
+export var useLineHeight = function useLineHeight() {
+  var config = {
+    name: 'line-height',
+    variables: ["line-h-sm", "line-h-base", "line-h-lg", "line-h-xl", "line-h-2xl", "line-h-3xl", "line-h-4xl", "line-h-5xl"],
+    variants: ['default', 'large']
+  };
+  return useVariantVars(config);
+};
+export default useLineHeight;