vision-accessibility 1.0.0 → 1.0.1

package/dist/components/AccessibilityPanel/AccessibilityPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessibilityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AccessibilityPanel/AccessibilityPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AA6HtD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAMhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"AccessibilityPanel.d.ts","sourceRoot":"","sources":["../../../src/components/AccessibilityPanel/AccessibilityPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAC;AAuItD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAMhE,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/index.esm.js

@@ -91,6 +91,68 @@ const safeDOMOperation = (operation, errorMessage) => {
 const isDOMAvailable = () => {
   return typeof window !== "undefined" && typeof document !== "undefined";
 };
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var classnames = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+(function(module) {
+  (function() {
+    var hasOwn = {}.hasOwnProperty;
+    function classNames() {
+      var classes = "";
+      for (var i = 0; i < arguments.length; i++) {
+        var arg = arguments[i];
+        if (arg) {
+          classes = appendClass(classes, parseValue(arg));
+        }
+      }
+      return classes;
+    }
+    function parseValue(arg) {
+      if (typeof arg === "string" || typeof arg === "number") {
+        return arg;
+      }
+      if (typeof arg !== "object") {
+        return "";
+      }
+      if (Array.isArray(arg)) {
+        return classNames.apply(null, arg);
+      }
+      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
+        return arg.toString();
+      }
+      var classes = "";
+      for (var key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes = appendClass(classes, key);
+        }
+      }
+      return classes;
+    }
+    function appendClass(value, newClass) {
+      if (!newClass) {
+        return value;
+      }
+      if (value) {
+        return value + " " + newClass;
+      }
+      return value + newClass;
+    }
+    if (module.exports) {
+      classNames.default = classNames;
+      module.exports = classNames;
+    } else {
+      window.classNames = classNames;
+    }
+  })();
+})(classnames);
+var classnamesExports = classnames.exports;
+const cn = /* @__PURE__ */ getDefaultExportFromCjs(classnamesExports);
 const ORIGINAL_FONT_SIZE_ATTR = "data-original-font-size";
 const FONT_SIZE_MULTIPLIERS = {
   small: 0.8,
@@ -192,7 +254,7 @@ const isFontSizeModified = () => {
   return false;
 };
 const CSS_CLASSES = {
-  HIGH_CONTRAST: "accessibility-high-contrast",
+  HIGH_CONTRAST: cn("accessibility-high-contrast"),
   FONT_SMALL: "accessibility-font-small",
   FONT_LARGE: "accessibility-font-large",
   HIDE_IMAGES: "accessibility-hide-images"
@@ -202,9 +264,11 @@ const applyColorScheme = (scheme) => {
     if (!isDOMAvailable()) return;
     document.body.classList.remove(CSS_CLASSES.HIGH_CONTRAST);
     document.body.style.filter = "";
+    removeHighContrastStylesFromAllElements();
     switch (scheme) {
       case "high-contrast":
         document.body.classList.add(CSS_CLASSES.HIGH_CONTRAST);
+        applyHighContrastStylesToAllElements();
         break;
       case "grayscale":
         document.body.style.filter = "grayscale(100%)";
@@ -241,6 +305,7 @@ const removeAllAccessibilityStyles = () => {
     resetAllFontSizes();
     const imageElements = getImageElements();
     removeClassFromElements(imageElements, CSS_CLASSES.HIDE_IMAGES);
+    removeHighContrastStylesFromAllElements();
   }, "Ошибка при удалении всех стилей доступности");
 };
 const applyAllSettings = (settings) => {
@@ -252,6 +317,88 @@ const applyAllSettings = (settings) => {
   applyFontSize(settings.fontSize);
   applyImageVisibility(settings.showImages);
 };
+const applyHighContrastStylesToAllElements = () => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+    const allElements = document.querySelectorAll("*");
+    allElements.forEach((element) => {
+      if (element instanceof HTMLElement) {
+        element.style.backgroundColor = "#000";
+        element.style.color = "#fff";
+        element.style.borderColor = "#fff";
+      }
+    });
+    const links = document.querySelectorAll("a");
+    links.forEach((link) => {
+      if (link instanceof HTMLElement) {
+        link.style.color = "#ffff00";
+      }
+    });
+    const visitedLinks = document.querySelectorAll("a:visited");
+    visitedLinks.forEach((link) => {
+      if (link instanceof HTMLElement) {
+        link.style.color = "#ff00ff";
+      }
+    });
+    const buttons = document.querySelectorAll("button");
+    buttons.forEach((button) => {
+      if (button instanceof HTMLElement) {
+        button.style.backgroundColor = "#fff";
+        button.style.color = "#000";
+        button.style.border = "2px solid #fff";
+      }
+    });
+    const inputs = document.querySelectorAll("input, textarea, select");
+    inputs.forEach((input) => {
+      if (input instanceof HTMLElement) {
+        input.style.backgroundColor = "#fff";
+        input.style.color = "#000";
+        input.style.border = "2px solid #fff";
+      }
+    });
+  }, "Ошибка при применении стилей высокого контраста ко всем элементам");
+};
+const removeHighContrastStylesFromAllElements = () => {
+  safeDOMOperation(() => {
+    if (!isDOMAvailable()) return;
+    const allElements = document.querySelectorAll("*");
+    allElements.forEach((element) => {
+      if (element instanceof HTMLElement) {
+        element.style.backgroundColor = "";
+        element.style.color = "";
+        element.style.borderColor = "";
+      }
+    });
+    const links = document.querySelectorAll("a");
+    links.forEach((link) => {
+      if (link instanceof HTMLElement) {
+        link.style.color = "";
+      }
+    });
+    const visitedLinks = document.querySelectorAll("a:visited");
+    visitedLinks.forEach((link) => {
+      if (link instanceof HTMLElement) {
+        link.style.color = "";
+      }
+    });
+    const buttons = document.querySelectorAll("button");
+    buttons.forEach((button) => {
+      if (button instanceof HTMLElement) {
+        button.style.backgroundColor = "";
+        button.style.color = "";
+        button.style.border = "";
+      }
+    });
+    const inputs = document.querySelectorAll("input, textarea, select");
+    inputs.forEach((input) => {
+      if (input instanceof HTMLElement) {
+        input.style.backgroundColor = "";
+        input.style.color = "";
+        input.style.border = "";
+      }
+    });
+  }, "Ошибка при удалении стилей высокого контраста со всех элементов");
+};
 const applySettingIfEnabled = (isEnabled, settingType, value) => {
   if (!isEnabled) {
     return;
@@ -699,16 +846,17 @@ const useAccessibilityContext = () => {
   }
   return context;
 };
-const accessibilityToggle = "_accessibilityToggle_jwfla_9";
-const toggleContainer = "_toggleContainer_jwfla_15";
-const toggleLabel = "_toggleLabel_jwfla_21";
-const toggleInput = "_toggleInput_jwfla_42";
-const toggleSlider = "_toggleSlider_jwfla_49";
-const toggleThumb = "_toggleThumb_jwfla_55";
-const toggleContent = "_toggleContent_jwfla_81";
-const toggleTitle = "_toggleTitle_jwfla_88";
-const toggleStatus = "_toggleStatus_jwfla_95";
-const description$2 = "_description_jwfla_102";
+const accessibilityToggle = "_accessibilityToggle_kpjm6_9";
+const toggleContainer = "_toggleContainer_kpjm6_15";
+const toggleLabel = "_toggleLabel_kpjm6_21";
+const toggleInput = "_toggleInput_kpjm6_42";
+const toggleSlider = "_toggleSlider_kpjm6_49";
+const toggleThumb = "_toggleThumb_kpjm6_55";
+const toggleContent = "_toggleContent_kpjm6_81";
+const toggleTitle = "_toggleTitle_kpjm6_88";
+const toggleStatus = "_toggleStatus_kpjm6_95";
+const description$2 = "_description_kpjm6_102";
+const highContrastMode$4 = "_highContrastMode_kpjm6_110";
 const styles$4 = {
   accessibilityToggle,
   toggleContainer,
@@ -719,7 +867,8 @@ const styles$4 = {
   toggleContent,
   toggleTitle,
   toggleStatus,
-  description: description$2
+  description: description$2,
+  highContrastMode: highContrastMode$4
 };
 const AccessibilityToggle = ({
   className
@@ -729,7 +878,7 @@ const AccessibilityToggle = ({
   const handleToggleChange = (event) => {
     updateSettings({ isEnabled: event.target.checked });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$4.accessibilityToggle} ${className || ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.toggleContainer, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles$4.accessibilityToggle} ${className || ""} ${settings.colorScheme === "high-contrast" ? styles$4.highContrastMode : ""}`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$4.toggleContainer, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: styles$4.toggleLabel, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         "input",
@@ -757,18 +906,19 @@ const AccessibilityToggle = ({
     )
   ] }) });
 };
-const colorSchemeControl = "_colorSchemeControl_tkb2w_9";
-const disabled$2 = "_disabled_tkb2w_12";
-const title$3 = "_title_tkb2w_12";
-const optionsContainer$1 = "_optionsContainer_tkb2w_23";
-const option$1 = "_option_tkb2w_23";
-const selected$1 = "_selected_tkb2w_50";
-const radioIndicator$1 = "_radioIndicator_tkb2w_54";
-const optionDisabled$1 = "_optionDisabled_tkb2w_62";
-const radioInput$1 = "_radioInput_tkb2w_72";
-const optionContent$1 = "_optionContent_tkb2w_79";
-const optionLabel$1 = "_optionLabel_tkb2w_91";
-const optionDescription$1 = "_optionDescription_tkb2w_98";
+const colorSchemeControl = "_colorSchemeControl_1kr72_9";
+const disabled$2 = "_disabled_1kr72_12";
+const title$3 = "_title_1kr72_12";
+const optionsContainer$1 = "_optionsContainer_1kr72_23";
+const option$1 = "_option_1kr72_23";
+const selected$1 = "_selected_1kr72_50";
+const radioIndicator$1 = "_radioIndicator_1kr72_54";
+const optionDisabled$1 = "_optionDisabled_1kr72_62";
+const radioInput$1 = "_radioInput_1kr72_72";
+const optionContent$1 = "_optionContent_1kr72_79";
+const optionLabel$1 = "_optionLabel_1kr72_91";
+const optionDescription$1 = "_optionDescription_1kr72_98";
+const highContrastMode$3 = "_highContrastMode_1kr72_129";
 const styles$3 = {
   colorSchemeControl,
   disabled: disabled$2,
@@ -781,7 +931,8 @@ const styles$3 = {
   radioInput: radioInput$1,
   optionContent: optionContent$1,
   optionLabel: optionLabel$1,
-  optionDescription: optionDescription$1
+  optionDescription: optionDescription$1,
+  highContrastMode: highContrastMode$3
 };
 const COLOR_SCHEME_OPTIONS = [
   {
@@ -810,7 +961,7 @@ const ColorSchemeControl = ({
     const newColorScheme = event.target.value;
     updateSettings({ colorScheme: newColorScheme });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$3.colorSchemeControl} ${className || ""} ${!isEnabled ? styles$3.disabled : ""}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$3.colorSchemeControl} ${className || ""} ${!isEnabled ? styles$3.disabled : ""} ${colorScheme === "high-contrast" ? styles$3.highContrastMode : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$3.title, children: "Цветовая схема" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$3.optionsContainer, role: "radiogroup", "aria-labelledby": "color-scheme-title", children: COLOR_SCHEME_OPTIONS.map((option2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "label",
@@ -848,18 +999,19 @@ const ColorSchemeControl = ({
     )) })
   ] });
 };
-const fontSizeControl = "_fontSizeControl_xe2rx_9";
-const disabled$1 = "_disabled_xe2rx_12";
-const title$2 = "_title_xe2rx_12";
-const optionsContainer = "_optionsContainer_xe2rx_23";
-const option = "_option_xe2rx_23";
-const selected = "_selected_xe2rx_50";
-const radioIndicator = "_radioIndicator_xe2rx_54";
-const optionDisabled = "_optionDisabled_xe2rx_62";
-const radioInput = "_radioInput_xe2rx_72";
-const optionContent = "_optionContent_xe2rx_79";
-const optionLabel = "_optionLabel_xe2rx_91";
-const optionDescription = "_optionDescription_xe2rx_98";
+const fontSizeControl = "_fontSizeControl_1c68l_9";
+const disabled$1 = "_disabled_1c68l_12";
+const title$2 = "_title_1c68l_12";
+const optionsContainer = "_optionsContainer_1c68l_23";
+const option = "_option_1c68l_23";
+const selected = "_selected_1c68l_50";
+const radioIndicator = "_radioIndicator_1c68l_54";
+const optionDisabled = "_optionDisabled_1c68l_62";
+const radioInput = "_radioInput_1c68l_72";
+const optionContent = "_optionContent_1c68l_79";
+const optionLabel = "_optionLabel_1c68l_91";
+const optionDescription = "_optionDescription_1c68l_98";
+const highContrastMode$2 = "_highContrastMode_1c68l_129";
 const styles$2 = {
   fontSizeControl,
   disabled: disabled$1,
@@ -872,7 +1024,8 @@ const styles$2 = {
   radioInput,
   optionContent,
   optionLabel,
-  optionDescription
+  optionDescription,
+  highContrastMode: highContrastMode$2
 };
 const FONT_SIZE_OPTIONS = [
   {
@@ -901,7 +1054,7 @@ const FontSizeControl = ({
     const newFontSize = event.target.value;
     updateSettings({ fontSize: newFontSize });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$2.fontSizeControl} ${className || ""} ${!isEnabled ? styles$2.disabled : ""}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$2.fontSizeControl} ${className || ""} ${!isEnabled ? styles$2.disabled : ""} ${settings.colorScheme === "high-contrast" ? styles$2.highContrastMode : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$2.title, children: "Размер шрифта" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: styles$2.optionsContainer, role: "radiogroup", "aria-labelledby": "font-size-title", children: FONT_SIZE_OPTIONS.map((option2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
       "label",
@@ -939,17 +1092,18 @@ const FontSizeControl = ({
     )) })
   ] });
 };
-const imageControl = "_imageControl_rczak_9";
-const disabled = "_disabled_rczak_12";
-const title$1 = "_title_rczak_12";
-const switchContainer = "_switchContainer_rczak_23";
-const switchLabel = "_switchLabel_rczak_29";
-const switchDisabled = "_switchDisabled_rczak_49";
-const switchInput = "_switchInput_rczak_59";
-const switchSlider = "_switchSlider_rczak_66";
-const switchThumb = "_switchThumb_rczak_72";
-const switchText = "_switchText_rczak_98";
-const description$1 = "_description_rczak_106";
+const imageControl = "_imageControl_hkxkm_9";
+const disabled = "_disabled_hkxkm_12";
+const title$1 = "_title_hkxkm_12";
+const switchContainer = "_switchContainer_hkxkm_23";
+const switchLabel = "_switchLabel_hkxkm_29";
+const switchDisabled = "_switchDisabled_hkxkm_49";
+const switchInput = "_switchInput_hkxkm_59";
+const switchSlider = "_switchSlider_hkxkm_66";
+const switchThumb = "_switchThumb_hkxkm_72";
+const switchText = "_switchText_hkxkm_98";
+const description$1 = "_description_hkxkm_106";
+const highContrastMode$1 = "_highContrastMode_hkxkm_114";
 const styles$1 = {
   imageControl,
   disabled,
@@ -961,7 +1115,8 @@ const styles$1 = {
   switchSlider,
   switchThumb,
   switchText,
-  description: description$1
+  description: description$1,
+  highContrastMode: highContrastMode$1
 };
 const ImageControl = ({
   className
@@ -972,7 +1127,7 @@ const ImageControl = ({
   const handleImageVisibilityChange = (event) => {
     updateSettings({ showImages: event.target.checked });
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$1.imageControl} ${className || ""} ${!isEnabled ? styles$1.disabled : ""}`, children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${styles$1.imageControl} ${className || ""} ${!isEnabled ? styles$1.disabled : ""} ${settings.colorScheme === "high-contrast" ? styles$1.highContrastMode : ""}`, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: styles$1.title, children: "Изображения" }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles$1.switchContainer, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: `${styles$1.switchLabel} ${!isEnabled ? styles$1.switchDisabled : ""}`, children: [
@@ -1001,30 +1156,59 @@ const ImageControl = ({
     ] })
   ] });
 };
-const stickyContainer = "_stickyContainer_1xqyi_9";
-const panel = "_panel_1xqyi_23";
-const topRight = "_topRight_1xqyi_38";
-const topLeft = "_topLeft_1xqyi_42";
-const header = "_header_1xqyi_59";
-const title = "_title_1xqyi_68";
-const closeButton = "_closeButton_1xqyi_76";
-const description = "_description_1xqyi_107";
-const content = "_content_1xqyi_115";
-const controls = "_controls_1xqyi_135";
-const slideIn = "_slideIn_1xqyi_1";
-const styles = {
+const stickyContainer = "_stickyContainer_lzoik_9";
+const panel = "_panel_lzoik_23";
+const topRight = "_top-right_lzoik_38";
+const topLeft = "_top-left_lzoik_42";
+const bottomRight = "_bottom-right_lzoik_46";
+const bottomLeft = "_bottom-left_lzoik_54";
+const header = "_header_lzoik_75";
+const title = "_title_lzoik_84";
+const closeButton = "_closeButton_lzoik_92";
+const description = "_description_lzoik_123";
+const content = "_content_lzoik_131";
+const controls = "_controls_lzoik_151";
+const highContrastMode = "_highContrastMode_lzoik_157";
+const slideIn = "_slideIn_lzoik_1";
+const AccessibilityPanel_module = {
   stickyContainer,
   panel,
+  "top-right": "_top-right_lzoik_38",
   topRight,
+  "top-left": "_top-left_lzoik_42",
   topLeft,
+  "bottom-right": "_bottom-right_lzoik_46",
+  bottomRight,
+  "bottom-left": "_bottom-left_lzoik_54",
+  bottomLeft,
   header,
   title,
   closeButton,
   description,
   content,
   controls,
+  highContrastMode,
   slideIn
 };
+const stylesImport = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  bottomLeft,
+  bottomRight,
+  closeButton,
+  content,
+  controls,
+  default: AccessibilityPanel_module,
+  description,
+  header,
+  highContrastMode,
+  panel,
+  slideIn,
+  stickyContainer,
+  title,
+  topLeft,
+  topRight
+}, Symbol.toStringTag, { value: "Module" }));
+const styles = typeof stylesImport === "object" && AccessibilityPanel_module ? AccessibilityPanel_module : AccessibilityPanel_module || stylesImport;
 const AccessibilityPanelInner = ({
   isOpen,
   onClose,
@@ -1066,23 +1250,28 @@ const AccessibilityPanelInner = ({
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${styles.stickyContainer} accessibility-panel-container`, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  const { settings } = useAccessibilityContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(styles.stickyContainer), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
       ref: panelRef,
-      className: `${styles.panel} ${styles[position]}`,
+      className: cn(
+        styles.panel,
+        styles[position],
+        settings.colorScheme === "high-contrast" && styles.highContrastMode
+      ),
       role: "dialog",
       "aria-modal": "true",
       "aria-labelledby": "accessibility-panel-title",
       "aria-describedby": "accessibility-panel-description",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.header, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: "accessibility-panel-title", className: styles.title, children: "Настройки доступности" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.header), children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { id: "accessibility-panel-title", className: cn(styles.title), children: "Настройки доступности" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "button",
             {
               onClick: handleCloseClick,
-              className: styles.closeButton,
+              className: cn(styles.closeButton),
               "aria-label": "Закрыть панель настроек доступности",
               type: "button",
               children: "×"
@@ -1093,13 +1282,13 @@ const AccessibilityPanelInner = ({
           "div",
           {
             id: "accessibility-panel-description",
-            className: styles.description,
+            className: cn(styles.description),
             children: "Настройте отображение страницы для улучшения доступности"
           }
         ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.content, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.content), children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(AccessibilityToggle, {}),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: styles.controls, children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(styles.controls), children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(ColorSchemeControl, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(FontSizeControl, {}),
             /* @__PURE__ */ jsxRuntimeExports.jsx(ImageControl, {})