@digigov/ui 0.30.2 → 0.31.0

package/hooks/useHighlightLinks.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHighlightLinks = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useHighlightLinks = function useHighlightLinks() {
+  var storedHighlightLinks = localStorage.getItem('--theme-highlight-links');
+
+  var _useState = (0, _react.useState)(storedHighlightLinks || 'default'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      highlightLinks = _useState2[0],
+      changeHighlightLinks = _useState2[1];
+
+  (0, _react.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]);
+  (0, _react.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];
+};
+
+exports.useHighlightLinks = useHighlightLinks;
+var _default = useHighlightLinks;
+exports["default"] = _default;

package/hooks/useLetterSpacing.d.ts

@@ -0,0 +1,6 @@
+import { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+export declare type LetterSpacingOptions = 'default' | 'extra';
+export declare type StoredLetterSpacingOptions = LetterSpacingOptions | null;
+export declare type UseLetterSpacingResult = UseVariantVarsResult<LetterSpacingOptions>;
+export declare const useLetterSpacing: () => UseLetterSpacingResult;
+export default useLetterSpacing;

package/hooks/useLetterSpacing.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLetterSpacing = exports["default"] = void 0;
+
+var _useVariantVars = _interopRequireDefault(require("@digigov/ui/hooks/useVariantVars"));
+
+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 (0, _useVariantVars["default"])(config);
+};
+
+exports.useLetterSpacing = useLetterSpacing;
+var _default = useLetterSpacing;
+exports["default"] = _default;

package/hooks/useLineHeight.d.ts

@@ -0,0 +1,6 @@
+import { UseVariantVarsResult } from '@digigov/ui/hooks/useVariantVars';
+export declare type LineHeightOptions = 'default' | 'large';
+export declare type StoredLineHeightOptions = LineHeightOptions | null;
+export declare type UseLineHeightResult = UseVariantVarsResult<LineHeightOptions>;
+export declare const useLineHeight: () => UseLineHeightResult;
+export default useLineHeight;

package/hooks/useLineHeight.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useLineHeight = exports["default"] = void 0;
+
+var _useVariantVars = _interopRequireDefault(require("@digigov/ui/hooks/useVariantVars"));
+
+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 (0, _useVariantVars["default"])(config);
+};
+
+exports.useLineHeight = useLineHeight;
+var _default = useLineHeight;
+exports["default"] = _default;

package/hooks/useNavList.d.ts

@@ -1,5 +1,5 @@
-import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
-export interface UseNavListReturn extends UseTogglableSectionsReturn {
+import { UseTogglableNavReturn } from '@digigov/ui/hooks/useTogglableNav';
+export interface UseNavListReturn extends UseTogglableNavReturn {
     container: (key: string) => {
         active: boolean;
         id: string;

package/hooks/useNavList.js

@@ -11,25 +11,27 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("react");
+var _useTogglableNav2 = require("@digigov/ui/hooks/useTogglableNav");
 
-var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+var _react = require("react");
 
-var _excluded = ["register", "opened"];
+var _excluded = ["registerButton", "registerLink", "opened"];
 
 var useNavList = function useNavList() {
   var registeredContainers = (0, _react.useRef)({});
 
-  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+  var _useTogglableNav = (0, _useTogglableNav2.useTogglableNav)({
     singleOpen: true,
     toggleOpenClose: true,
+    toggleParentOpen: true,
     toggleProperty: 'active',
     onToggleProperty: 'onClick',
     ariaNavigation: true
   }),
-      register = _useTogglableSections.register,
-      opened = _useTogglableSections.opened,
-      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
+      registerButton = _useTogglableNav.registerButton,
+      registerLink = _useTogglableNav.registerLink,
+      opened = _useTogglableNav.opened,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableNav, _excluded);
 
   var container = (0, _react.useCallback)(function (key) {
     return {
@@ -43,7 +45,8 @@ var useNavList = function useNavList() {
     };
   }, [opened]);
   return (0, _extends2["default"])({
-    register: register,
+    registerButton: registerButton,
+    registerLink: registerLink,
     opened: opened,
     container: container
   }, rest);

package/hooks/useTheme.d.ts

@@ -1,8 +1,8 @@
 export declare type ThemeSelectOptions = 'light' | 'dark' | 'auto';
 export declare type StoredThemeOptions = ThemeSelectOptions | null;
-export interface UseThemeResult {
-    theme: ThemeSelectOptions;
-    changeTheme: (selectedTheme: ThemeSelectOptions) => void;
-}
+export declare type UseThemeResult = [
+    theme: ThemeSelectOptions,
+    changeTheme: (selectedTheme: ThemeSelectOptions) => void
+];
 export declare const useTheme: () => UseThemeResult;
 export default useTheme;

package/hooks/useTheme.js

@@ -11,11 +11,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-;
-
 var useTheme = function useTheme() {
   var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-  var storedTheme = localStorage.getItem('theme');
+  var storedTheme = localStorage.getItem('--theme-palette');
 
   var _useState = (0, _react.useState)(storedTheme || 'auto'),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -23,21 +21,33 @@ var useTheme = function useTheme() {
       changeTheme = _useState2[1];
 
   (0, _react.useEffect)(function () {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
+
     if (theme === 'auto') {
-      document.documentElement.className = prefersDarkScheme ? 'dark' : 'light';
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
     } else {
-      document.documentElement.className = theme;
+      document.documentElement.classList.add(theme);
     }
 
-    localStorage.setItem('theme', theme);
+    localStorage.setItem('--theme-palette', theme);
   }, [theme]);
   (0, _react.useEffect)(function () {
     var beforePrintListener = function beforePrintListener() {
-      document.documentElement.className = 'light';
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
     };
 
     var afterPrintListener = function afterPrintListener() {
-      document.documentElement.className = localStorage.getItem('theme') || theme;
+      document.documentElement.classList.remove('light');
+      var localtheme;
+
+      if (localStorage.getItem('--theme-palette') === 'auto') {
+        localtheme = prefersDarkScheme ? 'dark' : 'light';
+      } else {
+        localtheme = localStorage.getItem('--theme-palette');
+      }
+
+      document.documentElement.classList.add(localtheme || theme);
     };
 
     window.addEventListener('beforeprint', beforePrintListener);
@@ -47,10 +57,7 @@ var useTheme = function useTheme() {
       window.removeEventListener('afterprint', afterPrintListener);
     };
   }, []);
-  return {
-    theme: theme,
-    changeTheme: changeTheme
-  };
+  return [theme, changeTheme];
 };
 
 exports.useTheme = useTheme;

package/hooks/useTogglableNav.d.ts

@@ -0,0 +1,25 @@
+export interface UseTogglableNavInterface {
+    toggleProperty: string;
+    singleOpen?: boolean;
+    toggleOpenClose?: boolean;
+    toggleParentOpen?: boolean;
+    onToggleProperty: string;
+    initial?: Record<string, boolean>;
+    firstOpen?: boolean;
+    ariaNavigation?: boolean;
+    toggleHook?: (id: string) => void;
+}
+export interface UseTogglableNavReturn {
+    registerButton: (el: string) => any;
+    registerLink: (el: string) => any;
+    registered: {
+        current: Record<string, {
+            el: HTMLElement;
+            type: string;
+        }>;
+    };
+    opened: Record<string, boolean>;
+    toggle: (id: string) => void;
+    setOpened: (opened: ((curOpened: Record<string, boolean>) => Record<string, boolean>) | Record<string, boolean>) => void;
+}
+export declare function useTogglableNav({ toggleProperty, toggleOpenClose, toggleParentOpen, onToggleProperty, initial, ariaNavigation, toggleHook, }: UseTogglableNavInterface): UseTogglableNavReturn;

package/hooks/useTogglableNav.js

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

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

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

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

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

package/hooks/useVariantVars.d.ts

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