@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-b4257f67

package/cjs/app/QrCodeViewer/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/cjs/app/QrCodeViewer/utils.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MARGIN_SIZE = void 0;
+exports.excavateModules = excavateModules;
+exports.generatePath = generatePath;
+exports.getImageSettings = getImageSettings;
+var DEFAULT_IMG_SCALE = 0.1;
+var MARGIN_SIZE = 4;
+exports.MARGIN_SIZE = MARGIN_SIZE;
+
+function generatePath(modules) {
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var ops = [];
+  modules.forEach(function (row, y) {
+    var start = null;
+    row.forEach(function (cell, x) {
+      if (!cell && start !== null) {
+        // M0 0h7v1H0z injects the space with the move and drops the comma,
+        // saving a char per operation
+        ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+        start = null;
+        return;
+      } // end of row, clean up or skip
+
+
+      if (x === row.length - 1) {
+        if (!cell) {
+          // We would have closed the op above already so this can only mean
+          // 2+ light modules in a row.
+          return;
+        }
+
+        if (start === null) {
+          // Just a single dark module.
+          ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+        } else {
+          // Otherwise finish the current line.
+          ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+        }
+
+        return;
+      }
+
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join('');
+} // We could just do this in generatePath, except that we want to support
+// non-Path2D canvas, so we need to keep it an explicit step.
+
+
+function excavateModules(modules, excavation) {
+  return modules.slice().map(function (row, y) {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row;
+    }
+
+    return row.map(function (cell, x) {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell;
+      }
+
+      return false;
+    });
+  });
+}
+
+function getImageSettings(cells, size, includeMargin, imageSettings) {
+  if (imageSettings == null) {
+    return null;
+  }
+
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  var scale = numCells / size;
+  var w = (imageSettings.width || defaultSize) * scale;
+  var h = (imageSettings.height || defaultSize) * scale;
+  var x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  var y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  var excavation;
+
+  if (imageSettings.excavate) {
+    var floorX = Math.floor(x);
+    var floorY = Math.floor(y);
+    var ceilW = Math.ceil(w + x - floorX);
+    var ceilH = Math.ceil(h + y - floorY);
+    excavation = {
+      x: floorX,
+      y: floorY,
+      w: ceilW,
+      h: ceilH
+    };
+  }
+
+  return {
+    x: x,
+    y: y,
+    h: h,
+    w: w,
+    excavation: excavation
+  };
+}

package/cjs/app/ThemeOptions/index.js

@@ -0,0 +1,289 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ThemeOptions = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _useFontSize3 = _interopRequireDefault(require("../hooks/useFontSize"));
+
+var _useHighlightLinks3 = _interopRequireDefault(require("../hooks/useHighlightLinks"));
+
+var _useLetterSpacing3 = _interopRequireDefault(require("../hooks/useLetterSpacing"));
+
+var _useLineHeight3 = _interopRequireDefault(require("../hooks/useLineHeight"));
+
+var _useTheme3 = _interopRequireDefault(require("../hooks/useTheme"));
+
+var _Button = _interopRequireDefault(require("../../form/Button"));
+
+var _FieldContainer = _interopRequireWildcard(require("../../form/FieldContainer"));
+
+var _Form = _interopRequireDefault(require("../../form/Form"));
+
+var _RadioContainer = require("../../form/RadioContainer");
+
+var _SectionBreak = _interopRequireDefault(require("../../layouts/SectionBreak"));
+
+var _VisuallyHidden = require("../../utils/VisuallyHidden");
+
+var _excluded = ["colorsOption", "fontSizeOption", "lineHeightOption", "letterSpacingOption", "highlightLinksOption", "colorsOptionTitleSize", "fontSizeOptionTitleSize", "lineHeightOptionTitleSize", "letterSpacingOptionTitleSize", "highlightLinksOptionTitleSize", "className"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var FieldsetLegendTitle = function FieldsetLegendTitle(_ref) {
+  var titleSize = _ref.titleSize,
+      titleValue = _ref.titleValue;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, titleSize === 'hidden' ? /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, null, /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.VisuallyHidden, null, titleValue)) : /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+    size: titleSize
+  }, titleValue));
+}; // export const ThemeOptions = () => {
+
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "sm"
+}, "\u039C\u03AD\u03B3\u03B5\u03B8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "sm"
+}, "\u038E\u03C8\u03BF\u03C2 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AE\u03C2 \u03BA\u03B5\u03B9\u03BC\u03AD\u03BD\u03C9\u03BD");
+
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "sm"
+}, "\u0391\u03C0\u03CC\u03C3\u03C4\u03B1\u03C3\u03B7 \u03B3\u03C1\u03B1\u03BC\u03BC\u03AC\u03C4\u03C9\u03BD");
+
+var _ref6 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+  size: "sm"
+}, "\u0388\u03BD\u03C4\u03BF\u03BD\u03B7 \u03B5\u03BC\u03C6\u03AC\u03BD\u03B9\u03C3\u03B7 \u03C3\u03C5\u03BD\u03B4\u03AD\u03C3\u03BC\u03C9\u03BD");
+
+var _ref7 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], {
+  visible: false
+});
+
+var ThemeOptions = /*#__PURE__*/_react["default"].forwardRef(function ThemeOptions(_ref2, ref) {
+  var _ref2$colorsOption = _ref2.colorsOption,
+      colorsOption = _ref2$colorsOption === void 0 ? true : _ref2$colorsOption,
+      _ref2$fontSizeOption = _ref2.fontSizeOption,
+      fontSizeOption = _ref2$fontSizeOption === void 0 ? true : _ref2$fontSizeOption,
+      _ref2$lineHeightOptio = _ref2.lineHeightOption,
+      lineHeightOption = _ref2$lineHeightOptio === void 0 ? true : _ref2$lineHeightOptio,
+      _ref2$letterSpacingOp = _ref2.letterSpacingOption,
+      letterSpacingOption = _ref2$letterSpacingOp === void 0 ? true : _ref2$letterSpacingOp,
+      _ref2$highlightLinksO = _ref2.highlightLinksOption,
+      highlightLinksOption = _ref2$highlightLinksO === void 0 ? true : _ref2$highlightLinksO,
+      _ref2$colorsOptionTit = _ref2.colorsOptionTitleSize,
+      colorsOptionTitleSize = _ref2$colorsOptionTit === void 0 ? 'sm' : _ref2$colorsOptionTit,
+      _ref2$fontSizeOptionT = _ref2.fontSizeOptionTitleSize,
+      fontSizeOptionTitleSize = _ref2$fontSizeOptionT === void 0 ? 'sm' : _ref2$fontSizeOptionT,
+      _ref2$lineHeightOptio2 = _ref2.lineHeightOptionTitleSize,
+      lineHeightOptionTitleSize = _ref2$lineHeightOptio2 === void 0 ? 'sm' : _ref2$lineHeightOptio2,
+      _ref2$letterSpacingOp2 = _ref2.letterSpacingOptionTitleSize,
+      letterSpacingOptionTitleSize = _ref2$letterSpacingOp2 === void 0 ? 'sm' : _ref2$letterSpacingOp2,
+      _ref2$highlightLinksO2 = _ref2.highlightLinksOptionTitleSize,
+      highlightLinksOptionTitleSize = _ref2$highlightLinksO2 === void 0 ? 'sm' : _ref2$highlightLinksO2,
+      className = _ref2.className,
+      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+
+  var _useTheme = (0, _useTheme3["default"])(),
+      _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
+      theme = _useTheme2[0],
+      changeTheme = _useTheme2[1];
+
+  var _useState = (0, _react.useState)(theme || 'auto'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      selectedTheme = _useState2[0],
+      setSelectedTheme = _useState2[1];
+
+  var _useFontSize = (0, _useFontSize3["default"])(),
+      _useFontSize2 = (0, _slicedToArray2["default"])(_useFontSize, 2),
+      fontSize = _useFontSize2[0],
+      changeFontSize = _useFontSize2[1];
+
+  var _useState3 = (0, _react.useState)(fontSize || 'default'),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedFontSize = _useState4[0],
+      setSelectedFontSize = _useState4[1];
+
+  var _useLineHeight = (0, _useLineHeight3["default"])(),
+      _useLineHeight2 = (0, _slicedToArray2["default"])(_useLineHeight, 2),
+      lineHeight = _useLineHeight2[0],
+      changeLineHeight = _useLineHeight2[1];
+
+  var _useState5 = (0, _react.useState)(lineHeight || 'default'),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      selectedLineHeight = _useState6[0],
+      setSelectedLineHeight = _useState6[1];
+
+  var _useLetterSpacing = (0, _useLetterSpacing3["default"])(),
+      _useLetterSpacing2 = (0, _slicedToArray2["default"])(_useLetterSpacing, 2),
+      letterSpacing = _useLetterSpacing2[0],
+      changeLetterSpacing = _useLetterSpacing2[1];
+
+  var _useState7 = (0, _react.useState)(letterSpacing || 'default'),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedLetterSpacing = _useState8[0],
+      setSelectedLetterSpacing = _useState8[1];
+
+  var _useHighlightLinks = (0, _useHighlightLinks3["default"])(),
+      _useHighlightLinks2 = (0, _slicedToArray2["default"])(_useHighlightLinks, 2),
+      highlightLinks = _useHighlightLinks2[0],
+      changeHighlightLinks = _useHighlightLinks2[1];
+
+  var _useState9 = (0, _react.useState)(highlightLinks || 'default'),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      selectedHighlightLinks = _useState10[0],
+      setSelectedHighlightLinks = _useState10[1];
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+
+  function optionsHasChanged() {
+    if (theme != selectedTheme || fontSize != selectedFontSize || lineHeight != selectedLineHeight || letterSpacing != selectedLetterSpacing || highlightLinks != selectedHighlightLinks) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Form["default"], (0, _extends2["default"])({}, props, {
+    ref: ref,
+    className: (0, _clsx["default"])(className)
+  }), colorsOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(FieldsetLegendTitle, {
+    titleSize: colorsOptionTitleSize,
+    titleValue: "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03B8\u03AD\u03BC\u03B1\u03C4\u03BF\u03C2"
+  }), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, null, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "light",
+    onChange: function onChange() {
+      return setSelectedTheme('light');
+    },
+    checked: selectedTheme === 'light'
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "dark",
+    onChange: function onChange() {
+      return setSelectedTheme('dark');
+    },
+    checked: selectedTheme === 'dark'
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "theme_mode",
+    value: "auto",
+    onChange: function onChange() {
+      return setSelectedTheme('auto');
+    },
+    checked: selectedTheme === 'auto'
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2")))), fontSizeOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref3, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    layout: "horizontal"
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "font-size",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedFontSize('default');
+    },
+    checked: selectedFontSize === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "font-size",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedFontSize('large');
+    },
+    checked: selectedFontSize === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), lineHeightOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref4, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    layout: "horizontal"
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "line-height",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLineHeight('default');
+    },
+    checked: selectedLineHeight === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "line-height",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLineHeight('large');
+    },
+    checked: selectedLineHeight === 'large'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), letterSpacingOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref5, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    layout: "horizontal"
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "letter-spacing",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedLetterSpacing('default');
+    },
+    checked: selectedLetterSpacing === 'default'
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03AE (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "letter-spacing",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedLetterSpacing('extra');
+    },
+    checked: selectedLetterSpacing === 'extra'
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03B7")))), highlightLinksOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    marginBottom: 4
+  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref6, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+    layout: "horizontal"
+  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "highlight-links",
+    value: "no",
+    onChange: function onChange() {
+      return setSelectedHighlightLinks('default');
+    },
+    checked: selectedHighlightLinks === 'default'
+  }, "\u038C\u03C7\u03B9 (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+    name: "highlight-links",
+    value: "yes",
+    onChange: function onChange() {
+      setSelectedHighlightLinks('highlight');
+    },
+    checked: selectedHighlightLinks === 'highlight'
+  }, "\u039D\u03B1\u03B9")))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: resetOptions,
+    variant: "link"
+  }, "\u0395\u03C0\u03B1\u03BD\u03B1\u03C6\u03BF\u03C1\u03AC \u03CC\u03BB\u03C9\u03BD \u03C4\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD"), _ref7, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    onClick: handleOptions,
+    disabled: !optionsHasChanged()
+  }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
+});
+
+exports.ThemeOptions = ThemeOptions;
+var _default = ThemeOptions;
+exports["default"] = _default;

package/cjs/app/hooks/useFontSize.js

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

package/cjs/app/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/cjs/app/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("./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/cjs/app/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("./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/cjs/app/hooks/useTheme.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTheme = exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useTheme = function useTheme() {
+  var prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  var storedTheme = localStorage.getItem('--theme-palette');
+
+  var _useState = (0, _react.useState)(storedTheme || 'auto'),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      theme = _useState2[0],
+      changeTheme = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    document.documentElement.classList.remove('dark', 'light', 'auto');
+
+    if (theme === 'auto') {
+      document.documentElement.classList.add(prefersDarkScheme ? 'dark' : 'light');
+    } else {
+      document.documentElement.classList.add(theme);
+    }
+
+    localStorage.setItem('--theme-palette', theme);
+  }, [theme]);
+  (0, _react.useEffect)(function () {
+    var beforePrintListener = function beforePrintListener() {
+      document.documentElement.classList.remove('dark');
+      document.documentElement.classList.add('light');
+    };
+
+    var afterPrintListener = function afterPrintListener() {
+      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);
+    window.addEventListener('afterprint', afterPrintListener);
+    return function () {
+      window.removeEventListener('beforeprint', beforePrintListener);
+      window.removeEventListener('afterprint', afterPrintListener);
+    };
+  }, []);
+  return [theme, changeTheme];
+};
+
+exports.useTheme = useTheme;
+var _default = useTheme;
+exports["default"] = _default;

package/cjs/app/hooks/useVariantVars.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function useVariantVars(_ref) {
+  var name = _ref.name,
+      variables = _ref.variables,
+      variants = _ref.variants;
+  var root = document.documentElement;
+  var storedValue = localStorage.getItem("--theme-".concat(name));
+
+  var _useState = (0, _react.useState)(storedValue || variants[0]),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    localStorage.setItem("--theme-".concat(name), value);
+    variables.forEach(function (varName) {
+      root.style.setProperty("--".concat(varName), "var(--".concat(varName, "-").concat(value, ")"));
+    });
+  }, [value]);
+
+  function changeValue(v) {
+    setValue(v);
+  }
+
+  return [value, changeValue];
+}
+
+var _default = useVariantVars;
+exports["default"] = _default;