@digigov/ui 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/app/QrCodeViewer/index.js

@@ -1,32 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.QrCodeViewer = 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 _qrcodegen = _interopRequireDefault(require("@digigov/ui/app/QrCodeViewer/qrcodegen"));
-
-var _utils = require("@digigov/ui/app/QrCodeViewer/utils");
-
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"];
-
-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; }
-
+import React, { useRef, useEffect, useState } from 'react';
+import qrcodegen from "./qrcodegen";
+import { generatePath, excavateModules, getImageSettings, MARGIN_SIZE } from "./utils";
 var DEFAULT_SIZE = 128;
 var DEFAULT_LEVEL = 'L';
 var DEFAULT_BGCOLOR = '#FFFFFF';
@@ -44,13 +22,12 @@ var SUPPORTS_PATH2D = function () {
 }();
 
 var ERROR_LEVEL_MAP = {
-  L: _qrcodegen["default"].QrCode.Ecc.LOW,
-  M: _qrcodegen["default"].QrCode.Ecc.MEDIUM,
-  Q: _qrcodegen["default"].QrCode.Ecc.QUARTILE,
-  H: _qrcodegen["default"].QrCode.Ecc.HIGH
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
 };
-
-var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCodeViewerCanvas(props, ref) {
+var QrCodeViewerCanvas = /*#__PURE__*/React.forwardRef(function QrCodeViewerCanvas(props, ref) {
   var value = props.value,
       _props$size = props.size,
       size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
@@ -64,23 +41,24 @@ var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCo
       includeMargin = _props$includeMargin === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin,
       style = props.style,
       imageSettings = props.imageSettings,
-      otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+      otherProps = _objectWithoutProperties(props, _excluded);
+
   var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
 
-  var _canvas = ref || (0, _react.useRef)(null);
+  var _canvas = ref || useRef(null);
 
-  var _image = (0, _react.useRef)(null); // We're just using this state to trigger rerenders when images load. We
+  var _image = useRef(null); // We're just using this state to trigger rerenders when images load. We
   // Don't actually read the value anywhere. A smarter use of useEffect would
   // depend on this value.
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
       isImgLoaded = _useState2[0],
       setIsImageLoaded = _useState2[1];
 
-  (0, _react.useEffect)(function () {
+  useEffect(function () {
     // Always update the canvas. It's cheap enough and we want to be correct
     // with the current state.
     if (_canvas.current !== null) {
@@ -91,17 +69,16 @@ var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCo
         return;
       }
 
-      var cells = _qrcodegen["default"].QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
-
-      var margin = includeMargin ? _utils.MARGIN_SIZE : 0;
+      var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      var margin = includeMargin ? MARGIN_SIZE : 0;
       var numCells = cells.length + margin * 2;
-      var calculatedImageSettings = (0, _utils.getImageSettings)(cells, size, includeMargin, imageSettings);
+      var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
       var image = _image.current;
       var haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
 
       if (haveImageToRender && calculatedImageSettings) {
         if (calculatedImageSettings.excavation != null) {
-          cells = (0, _utils.excavateModules)(cells, calculatedImageSettings.excavation);
+          cells = excavateModules(cells, calculatedImageSettings.excavation);
         }
       } // We're going to scale this so that the number of drawable units
       // matches the number of cells. This avoids rounding issues, but does
@@ -120,7 +97,7 @@ var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCo
 
       if (SUPPORTS_PATH2D) {
         // $FlowFixMe: Path2D c'tor doesn't support args yet.
-        ctx.fill(new Path2D((0, _utils.generatePath)(cells, margin)));
+        ctx.fill(new Path2D(generatePath(cells, margin)));
       } else {
         cells.forEach(function (row, rdx) {
           row.forEach(function (cell, cdx) {
@@ -140,17 +117,19 @@ var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCo
   }); // Ensure we mark image loaded as false here so we trigger updating the
   // canvas in our other effect.
 
-  (0, _react.useEffect)(function () {
+  useEffect(function () {
     setIsImageLoaded(false);
   }, [imgSrc, isImgLoaded]);
-  var canvasStyle = (0, _extends2["default"])({
+
+  var canvasStyle = _extends({
     height: size,
     width: size
   }, style);
+
   var img;
 
   if (imgSrc != null) {
-    img = /*#__PURE__*/_react["default"].createElement("img", {
+    img = /*#__PURE__*/React.createElement("img", {
       src: imgSrc,
       key: imgSrc,
       style: {
@@ -163,18 +142,15 @@ var QrCodeViewerCanvas = /*#__PURE__*/_react["default"].forwardRef(function QrCo
     });
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("canvas", (0, _extends2["default"])({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
     style: canvasStyle,
     height: size,
     width: size,
     ref: _canvas
   }, otherProps)), img);
 });
-
-var QrCodeViewer = /*#__PURE__*/_react["default"].forwardRef(function QrCodeViewer(props, ref) {
-  return /*#__PURE__*/_react["default"].createElement(QrCodeViewerCanvas, (0, _extends2["default"])({}, props, {
+export var QrCodeViewer = /*#__PURE__*/React.forwardRef(function QrCodeViewer(props, ref) {
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, _extends({}, props, {
     ref: ref
   }));
-});
-
-exports.QrCodeViewer = QrCodeViewer;
+});

package/app/QrCodeViewer/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/app/QrCodeViewer/index.js"
+}

package/app/QrCodeViewer/qrcodegen/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/QrCodeViewer/qrcodegen/index.js"
+}

package/app/QrCodeViewer/types/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/QrCodeViewer/types/index.js"
+}

package/app/QrCodeViewer/utils/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/QrCodeViewer/utils/index.js"
+}

package/app/ThemeOptions/index.js

@@ -1,82 +1,51 @@
-"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("@digigov/ui/app/hooks/useFontSize"));
-
-var _useHighlightLinks3 = _interopRequireDefault(require("@digigov/ui/app/hooks/useHighlightLinks"));
-
-var _useLetterSpacing3 = _interopRequireDefault(require("@digigov/ui/app/hooks/useLetterSpacing"));
-
-var _useLineHeight3 = _interopRequireDefault(require("@digigov/ui/app/hooks/useLineHeight"));
-
-var _useTheme3 = _interopRequireDefault(require("@digigov/ui/app/hooks/useTheme"));
-
-var _Button = _interopRequireDefault(require("@digigov/ui/form/Button"));
-
-var _FieldContainer = _interopRequireWildcard(require("@digigov/ui/form/FieldContainer"));
-
-var _Form = _interopRequireDefault(require("@digigov/ui/form/Form"));
-
-var _RadioContainer = require("@digigov/ui/form/RadioContainer");
-
-var _SectionBreak = _interopRequireDefault(require("@digigov/ui/layouts/SectionBreak"));
-
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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; }
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import useFontSize from "../hooks/useFontSize";
+import useHighlightLinks from "../hooks/useHighlightLinks";
+import useLetterSpacing from "../hooks/useLetterSpacing";
+import useLineHeight from "../hooks/useLineHeight";
+import useTheme from "../hooks/useTheme";
+import Button from "../../form/Button";
+import FieldContainer, { Fieldset, FieldsetLegend } from "../../form/FieldContainer";
+import Form from "../../form/Form";
+import { RadioContainer, RadioItem } from "../../form/RadioContainer";
+import SectionBreak from "../../layouts/SectionBreak";
+import { VisuallyHidden } from "../../utils/VisuallyHidden";
 
 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, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, titleSize === 'hidden' ? /*#__PURE__*/React.createElement(FieldsetLegend, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, titleValue)) : /*#__PURE__*/React.createElement(FieldsetLegend, {
     size: titleSize
   }, titleValue));
 }; // export const ThemeOptions = () => {
 
 
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_FieldContainer.FieldsetLegend, {
+var _ref3 = /*#__PURE__*/React.createElement(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, {
+var _ref4 = /*#__PURE__*/React.createElement(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, {
+var _ref5 = /*#__PURE__*/React.createElement(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, {
+var _ref6 = /*#__PURE__*/React.createElement(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"], {
+var _ref7 = /*#__PURE__*/React.createElement(SectionBreak, {
   visible: false
 });
 
-var ThemeOptions = /*#__PURE__*/_react["default"].forwardRef(function ThemeOptions(_ref2, ref) {
+export var ThemeOptions = /*#__PURE__*/React.forwardRef(function ThemeOptions(_ref2, ref) {
   var _ref2$colorsOption = _ref2.colorsOption,
       colorsOption = _ref2$colorsOption === void 0 ? true : _ref2$colorsOption,
       _ref2$fontSizeOption = _ref2.fontSizeOption,
@@ -98,55 +67,55 @@ var ThemeOptions = /*#__PURE__*/_react["default"].forwardRef(function ThemeOptio
       _ref2$highlightLinksO2 = _ref2.highlightLinksOptionTitleSize,
       highlightLinksOptionTitleSize = _ref2$highlightLinksO2 === void 0 ? 'sm' : _ref2$highlightLinksO2,
       className = _ref2.className,
-      props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
+      props = _objectWithoutProperties(_ref2, _excluded);
 
-  var _useTheme = (0, _useTheme3["default"])(),
-      _useTheme2 = (0, _slicedToArray2["default"])(_useTheme, 2),
+  var _useTheme = useTheme(),
+      _useTheme2 = _slicedToArray(_useTheme, 2),
       theme = _useTheme2[0],
       changeTheme = _useTheme2[1];
 
-  var _useState = (0, _react.useState)(theme || 'auto'),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+  var _useState = useState(theme || 'auto'),
+      _useState2 = _slicedToArray(_useState, 2),
       selectedTheme = _useState2[0],
       setSelectedTheme = _useState2[1];
 
-  var _useFontSize = (0, _useFontSize3["default"])(),
-      _useFontSize2 = (0, _slicedToArray2["default"])(_useFontSize, 2),
+  var _useFontSize = useFontSize(),
+      _useFontSize2 = _slicedToArray(_useFontSize, 2),
       fontSize = _useFontSize2[0],
       changeFontSize = _useFontSize2[1];
 
-  var _useState3 = (0, _react.useState)(fontSize || 'default'),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+  var _useState3 = useState(fontSize || 'default'),
+      _useState4 = _slicedToArray(_useState3, 2),
       selectedFontSize = _useState4[0],
       setSelectedFontSize = _useState4[1];
 
-  var _useLineHeight = (0, _useLineHeight3["default"])(),
-      _useLineHeight2 = (0, _slicedToArray2["default"])(_useLineHeight, 2),
+  var _useLineHeight = useLineHeight(),
+      _useLineHeight2 = _slicedToArray(_useLineHeight, 2),
       lineHeight = _useLineHeight2[0],
       changeLineHeight = _useLineHeight2[1];
 
-  var _useState5 = (0, _react.useState)(lineHeight || 'default'),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+  var _useState5 = useState(lineHeight || 'default'),
+      _useState6 = _slicedToArray(_useState5, 2),
       selectedLineHeight = _useState6[0],
       setSelectedLineHeight = _useState6[1];
 
-  var _useLetterSpacing = (0, _useLetterSpacing3["default"])(),
-      _useLetterSpacing2 = (0, _slicedToArray2["default"])(_useLetterSpacing, 2),
+  var _useLetterSpacing = useLetterSpacing(),
+      _useLetterSpacing2 = _slicedToArray(_useLetterSpacing, 2),
       letterSpacing = _useLetterSpacing2[0],
       changeLetterSpacing = _useLetterSpacing2[1];
 
-  var _useState7 = (0, _react.useState)(letterSpacing || 'default'),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+  var _useState7 = useState(letterSpacing || 'default'),
+      _useState8 = _slicedToArray(_useState7, 2),
       selectedLetterSpacing = _useState8[0],
       setSelectedLetterSpacing = _useState8[1];
 
-  var _useHighlightLinks = (0, _useHighlightLinks3["default"])(),
-      _useHighlightLinks2 = (0, _slicedToArray2["default"])(_useHighlightLinks, 2),
+  var _useHighlightLinks = useHighlightLinks(),
+      _useHighlightLinks2 = _slicedToArray(_useHighlightLinks, 2),
       highlightLinks = _useHighlightLinks2[0],
       changeHighlightLinks = _useHighlightLinks2[1];
 
-  var _useState9 = (0, _react.useState)(highlightLinks || 'default'),
-      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+  var _useState9 = useState(highlightLinks || 'default'),
+      _useState10 = _slicedToArray(_useState9, 2),
       selectedHighlightLinks = _useState10[0],
       setSelectedHighlightLinks = _useState10[1];
 
@@ -174,116 +143,113 @@ var ThemeOptions = /*#__PURE__*/_react["default"].forwardRef(function ThemeOptio
     }
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_Form["default"], (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/React.createElement(Form, _extends({}, props, {
     ref: ref,
-    className: (0, _clsx["default"])(className)
-  }), colorsOption && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
+    className: clsx(className)
+  }), colorsOption && /*#__PURE__*/React.createElement(FieldContainer, {
     marginBottom: 4
-  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, /*#__PURE__*/_react["default"].createElement(FieldsetLegendTitle, {
+  }, /*#__PURE__*/React.createElement(Fieldset, null, /*#__PURE__*/React.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, {
+  }), /*#__PURE__*/React.createElement(RadioContainer, null, /*#__PURE__*/React.createElement(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, {
+  }, "\u03A6\u03C9\u03C4\u03B5\u03B9\u03BD\u03CC \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(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, {
+  }, "\u03A3\u03BA\u03BF\u03CD\u03C1\u03BF \u03B8\u03AD\u03BC\u03B1"), /*#__PURE__*/React.createElement(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"], {
+  }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE \u03C3\u03C5\u03C3\u03C4\u03AE\u03BC\u03B1\u03C4\u03BF\u03C2")))), fontSizeOption && /*#__PURE__*/React.createElement(FieldContainer, {
     marginBottom: 4
-  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref3, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref3, /*#__PURE__*/React.createElement(RadioContainer, {
     layout: "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  }, /*#__PURE__*/React.createElement(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, {
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(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"], {
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), lineHeightOption && /*#__PURE__*/React.createElement(FieldContainer, {
     marginBottom: 4
-  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref4, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref4, /*#__PURE__*/React.createElement(RadioContainer, {
     layout: "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  }, /*#__PURE__*/React.createElement(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, {
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03CC (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(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"], {
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03BF")))), letterSpacingOption && /*#__PURE__*/React.createElement(FieldContainer, {
     marginBottom: 4
-  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref5, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref5, /*#__PURE__*/React.createElement(RadioContainer, {
     layout: "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  }, /*#__PURE__*/React.createElement(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, {
+  }, "\u039A\u03B1\u03BD\u03BF\u03BD\u03B9\u03BA\u03AE (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(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"], {
+  }, "\u039C\u03B5\u03B3\u03B1\u03BB\u03CD\u03C4\u03B5\u03C1\u03B7")))), highlightLinksOption && /*#__PURE__*/React.createElement(FieldContainer, {
     marginBottom: 4
-  }, /*#__PURE__*/_react["default"].createElement(_FieldContainer.Fieldset, null, _ref6, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioContainer, {
+  }, /*#__PURE__*/React.createElement(Fieldset, null, _ref6, /*#__PURE__*/React.createElement(RadioContainer, {
     layout: "horizontal"
-  }, /*#__PURE__*/_react["default"].createElement(_RadioContainer.RadioItem, {
+  }, /*#__PURE__*/React.createElement(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, {
+  }, "\u038C\u03C7\u03B9 (\u03C0\u03C1\u03BF\u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE)"), /*#__PURE__*/React.createElement(RadioItem, {
     name: "highlight-links",
     value: "yes",
     onChange: function onChange() {
       setSelectedHighlightLinks('highlight');
     },
     checked: selectedHighlightLinks === 'highlight'
-  }, "\u039D\u03B1\u03B9")))), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, "\u039D\u03B1\u03B9")))), /*#__PURE__*/React.createElement(Button, {
     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"], {
+  }, "\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.createElement(Button, {
     onClick: handleOptions,
     disabled: !optionsHasChanged()
   }, "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE"));
 });
-
-exports.ThemeOptions = ThemeOptions;
-var _default = ThemeOptions;
-exports["default"] = _default;
+export default ThemeOptions;

package/app/ThemeOptions/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/app/ThemeOptions/index.js"
+}

package/app/hooks/useFontSize/index.js

@@ -0,0 +1,10 @@
+import useVariantVars from "./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/app/hooks/useFontSize/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useFontSize/index.js"
+}

package/app/hooks/useHighlightLinks/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useHighlightLinks/index.js"
+}

package/app/hooks/useLetterSpacing/index.js

@@ -0,0 +1,10 @@
+import useVariantVars from "./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/app/hooks/useLetterSpacing/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useLetterSpacing/index.js"
+}

package/app/hooks/useLineHeight/index.js

@@ -0,0 +1,10 @@
+import useVariantVars from "./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;

package/app/hooks/useLineHeight/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useLineHeight/index.js"
+}

package/app/hooks/useTheme/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useTheme/index.js"
+}

package/app/hooks/useVariantVars/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/app/hooks/useVariantVars/index.js"
+}

package/app/index.d.ts

@@ -1,5 +1,4 @@
 export * from '@digigov/ui/app/App';
-export * from '@digigov/ui/app/AccessibilityMenu';
 export * from '@digigov/ui/app/BannerContainer';
 export * from '@digigov/ui/app/BottomInfo';
 export * from '@digigov/ui/app/Panel';