accessibility-react-widget 1.0.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Vladi Iokhim
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,111 @@
+# ♿  Accessibilik: React Accessibility Widget.
+
+![Banner Image](banner.png)
+
+[![NPM](https://img.shields.io/npm/v/accessibilik.svg)](https://www.npmjs.com/package/accessibilik)
+[![GitHub license](https://img.shields.io/github/license/RosenGray/accessibilik)](https://github.com/RosenGray/accessibilik/blob/master/LICENSE)
+
+
+
+Accessibilik: A React-based web accessibility widget to enhance UI/UX for all users.
+
+```
+yarn add accessibility-react-widget
+npm install accessibility-react-widget
+```
+
+Then use it in your app:
+
+```js
+import Accessibilik from 'accessibility-react-widget';
+
+export default function App() {
+
+  return (
+    <div className="App">
+      <MyApp/>
+      <Accessibilik />
+    </div>
+  );
+}
+```
+
+## 🔥 Features
+
+## Content
+🇸🇨 **Multilingual Support**: Supports multiple languages **(38 languages) ** :  <p> Hebrew, English, Russian, Chinese mandarin, Spanish, Arabic, Bengali, Hindi, Portuguese, Japanese, German, Chinese, Korean, French, Turkish, Vietnamese, Telugu, Marathi, Tamil, Italian, Urdu, Gujarati, Polish, Ukrainian, Persian, Malayalam, Kannada, Oriya, Romanian, Azerbaijani, Hausa, Burmese, Serbocroatian, Thai, Dutch, Yoruba, Sindhi </p>
+
+🔤 **Adjust Font Size**: offers users the ability to easily modify text size for optimal readability, enhancing accessibility for those with visual impairments or reading preferences. This feature ensures a comfortable and inclusive browsing experience for all users.
+
+📑 **Align Text**: provides users with the capability to adjust text alignment, offering options like left, right, center, or justified, catering to personal reading preferences and enhancing overall readability.
+
+🧠 **Dyslexia Font**: enables users to switch to a dyslexia-friendly font, improving readability and reducing visual stress for those with dyslexia, thereby fostering a more inclusive browsing experience.
+
+🔤 **Font Weight**: This feature enables users to customize text thickness from light to bold, enhancing readability and accommodating diverse visual needs for a comfortable reading experience.
+
+🔤 **Highlight Links**: This feature automatically highlights all hyperlinks on the page, making them more prominent and easier to locate, thus enhancing navigation and usability for all users, especially those with visual impairments.
+
+🔤 **Highlight Titles**: Enhances the visibility of headings and titles by adding distinct highlighting, aiding users in quickly identifying key sections and improving overall content navigation.
+
+🔤 **Letter Spacing**: Allows users to adjust the spacing between characters in texts, enhancing readability and reducing visual strain, especially beneficial for those with dyslexia or other reading difficulties.
+
+🔤 **Line Height**: Provides the ability to alter the space between lines of text, improving legibility and comfort for reading, particularly helpful for users with visual impairments or reading disorders.
+
+🔤 **Word Spacing**: Offers the option to modify the spacing between words, aiding in better readability and visual comfort, especially for users with dyslexia or other reading challenges.
+
+## 🖌 Colors
+
+🖌 **BlueLight Filter**: Reduces blue light emission from the screen, diminishing eye strain and improving viewing comfort, especially beneficial for users during extended use or in low-light conditions.
+
+🖌 **Brightness Control**: Allows users to adjust the screen brightness directly through the website, enhancing visual comfort and reducing eye strain, especially in varying light environments.
+
+🖌 **DarkContrast Button**: Activates a high-contrast, dark mode color scheme, reducing glare and eye strain, ideal for users with light sensitivity or those preferring a darker interface for easier reading.
+
+🖌 **HighContrast Button**: Enables a high-contrast color mode, enhancing text and image visibility against backgrounds, crucial for users with visual impairments or color vision deficiencies.
+
+🖌 **HighSaturation Button**: This feature enhances color saturation, making hues more vivid and distinct, which can be beneficial for users with color vision deficiencies or those who prefer more vibrant visuals.
+
+🖌 **LightContrast Button**: Offers a low-contrast color mode, ideal for users who find high contrast visually overwhelming, providing a softer and more comfortable viewing experience.
+
+🖌 **LowSaturation Button**: Reduces color intensity for a more subdued visual experience, ideal for users sensitive to bright colors or who prefer a less vibrant screen appearance.
+
+🖌 **Monochrome Button**: Converts the website's colors to grayscale, simplifying the visual experience and aiding users with color perception difficulties or those who prefer minimalistic design.
+
+🖌 **TextColor Picker**: Allows users to customize the color of text on the website, enabling personalization for better readability and comfort, especially helpful for those with visual impairments or color preferences.
+
+🖌 **Visual Impairment**: A dedicated mode tailored for users with visual impairments, incorporating features like enhanced contrast, larger text, and voice navigation to facilitate easier and more accessible web interaction.
+
+  ## 🧰 Tools
+
+🔍 **Zoom Button**: This feature enables a full-page zoom, magnifying both text and images for enhanced visibility, catering to users with visual impairments and improving overall accessibility.
+
+🖱 **Big Cursor**: Increases the size of the cursor on the website, enhancing its visibility and making navigation easier for users with visual impairments or those who struggle with fine motor control.
+
+📖 **Reading Guide**: Provides an on-screen, line-by-line guide to help users focus on the text, significantly aiding those with reading difficulties or visual tracking challenges, and enhancing overall comprehension.
+
+🎤 **Text To Speech**: Converts written text on the website into spoken words, facilitating access for users with visual impairments, reading difficulties, or those who prefer auditory learning.
+
+```
+yarn add accessibility-react-widget
+npm install accessibility-react-widget
+```
+
+Then use it in your app:
+
+```js
+import Accessibilik from 'accessibility-react-widget';
+
+export default function App() {
+
+  return (
+    <div className="App">
+      <MyApp/>
+      <Accessibilik />
+    </div>
+  );
+}
+```
+
+## License
+
+MIT Licensed. Copyright (c) Vladi Iokhim 2024.

package/dist/assets/main.css

@@ -0,0 +1 @@
+._AccessibilityIcon_1adfu_1{background-color:var(--primary-color);width:70px;height:70px;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 15px #252c6126,0 2px 4px #5d649433;position:fixed;z-index:500000;inset-inline-start:20px;bottom:20px;transition:.3s;cursor:pointer}._AccessibilityIcon_1adfu_1._showSpinner_1adfu_16{cursor:auto;animation:_spin_1adfu_1 2.5s linear infinite}._AccessibilityIcon_1adfu_1:hover{transform:scale(1.2)}._AccessibilityIcon_1adfu_1>svg{fill:var(--white);width:75%;z-index:1}._AccessibilityIcon_1adfu_1:after{content:"";position:absolute;left:50%;top:50%;bottom:0;width:80%;height:80%;border:2px solid white;background-color:var(--primary-color);z-index:0;transform:translate(-50%,-50%)}@keyframes _spin_1adfu_1{0%{transform:rotate(0)}to{transform:rotate(360deg)}}._accHeader__resetBtn_edc9t_1,._accHeader__closeBtn_edc9t_1{background-color:transparent;border:none;outline:none;display:flex;align-items:center}._accHeader__resetBtn_edc9t_1 svg,._accHeader__closeBtn_edc9t_1 svg{fill:#fff;font-weight:700;font-size:2em;width:30px}._accHeader_edc9t_1{height:60px;background-color:#2c2639;display:flex;align-items:center;justify-content:space-between;padding:.5em}._accHeader__title_edc9t_23{color:#fff;margin:0;font-size:18px}._accHeader_edc9t_1>._acc-lang-select-container_edc9t_28{flex:1}._accFooter_1og5x_1{height:30px;background-color:#2c2639;display:flex;align-items:center;justify-content:center;color:#fff}._accFooter_1og5x_1>a{color:#fff}._accAccessibilityMenu__overlay_1k9wv_1{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000}._accMenu_1k9wv_10{position:fixed;inset-inline-start:20px;bottom:100px;border-radius:10px;box-shadow:0 0 20px #00000080;opacity:1;transition:.3s;z-index:500000;overflow:hidden;background:#f9f9f9;width:500px;line-height:1;font-size:16px;letter-spacing:.015em;display:flex;flex-direction:column}._accMenu_1k9wv_10 [class$=-control]{border-radius:0;border:.3px solid #2C2639}._accMenu_1k9wv_10 [class$=-indicatorContainer] svg{fill:#2c2639}._accMenu_1k9wv_10 [class$=-indicatorSeparator]{background-color:#2c2639}._accMenu_1k9wv_10 [class$=-menu]{margin-top:0;z-index:100}._accMenuContentBlock_ba9px_1{border:.3px solid #2c2639;display:flex;align-items:center;flex-direction:column;max-height:calc(33.3333333333vh - 83px);justify-content:center;flex-grow:1;transition:max-height .3s linear;padding:10px 5px 5px;position:relative;cursor:pointer;overflow:hidden;z-index:10}._accMenuContentBlock_ba9px_1:focus{border:1px solid #2c2639}._accMenuContentBlock_ba9px_1._isExpanded_ba9px_19{cursor:auto;flex:1;max-height:100%;border:none}._accMenuContentBlock_ba9px_1._isAccMenuContentActive_ba9px_25:not(._isExpanded_ba9px_19){display:none}._accMenuContentBlock__titleContainer_ba9px_28{display:flex;flex-direction:column;align-items:center}._accMenuContentBlock__titleContainer_ba9px_28 svg{font-weight:700;width:30px;fill:#000}._accMenuContentBlock__title_ba9px_28{font-size:20px;font-weight:700;color:#000;text-transform:capitalize;margin:0;padding:.2em}._accMenuContentBlock__expendButtonContainer_ba9px_46{width:100%;display:flex;margin-bottom:10px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button{font-size:30px;width:80%;margin:auto;inset-inline-start:5px;height:100%;border:none;outline:none;background-color:var(--primary-color);border-radius:10px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button>svg{fill:#fff;width:24px}._accMenuContentBlock__expendButtonContainer_ba9px_46 button:hover{opacity:.8}._accMenuContentBlock__content_ba9px_69{display:grid;flex:1;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;-moz-column-gap:.8em;column-gap:.8em;overflow:auto;row-gap:1.5em;align-self:baseline;width:100%}._accButton_gu4kw_1{aspect-ratio:6/5;border-radius:4px;display:flex;flex-direction:column;padding:5px;color:#000;background:#fff;border:1px solid #ccc;transition:all .5s ease;position:relative;cursor:pointer}._accButton_gu4kw_1:hover,._accButton_gu4kw_1:focus{border-color:var(--primary-color);outline:none}._accButton_gu4kw_1._isToggled_gu4kw_18{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}._accButton_gu4kw_1._isToggled_gu4kw_18 svg{fill:#fff}._accButton_gu4kw_1._isActive_gu4kw_26{border-color:var(--primary-color)}._accButton__title_gu4kw_29{font-size:15px;font-weight:400;text-align:center;width:100%;color:inherit;margin:10px auto auto}._accButton__icon_gu4kw_38{width:24px;margin-bottom:8px}._accButton__icon--help_gu4kw_42{position:absolute;inset-inline-end:0}._accButton__icon--help_gu4kw_42:hover{fill:red!important}._accButton__icon--help_gu4kw_42:hover+span[data-tooltip]:after{opacity:1;padding:8px;max-height:10000px;transition-duration:.3s}._accButton__content_gu4kw_55{align-self:flex-end;width:100%;margin-top:auto;flex:.8}._accButton__stats_gu4kw_61{color:var(--primary-color);font-weight:700;position:absolute;align-self:flex-end;font-size:14px}._accButton_gu4kw_1 span[data-tooltip]{position:absolute;left:0;right:0;bottom:0;cursor:help}._accButton_gu4kw_1 span[data-tooltip]:after{position:absolute;opacity:0;pointer-events:none;content:attr(data-tooltip);color:var(--primary-color);left:0;right:0;bottom:0;margin:auto;line-height:1.5;border-radius:3px;box-shadow:0 0 5px 2px #64646499;background-color:#fff;z-index:10;word-wrap:break-word;text-align:start;transform:translateY(100%);transition:all .15s cubic-bezier(.25,.8,.25,1)}._accValueControl_p53sg_1{height:100%;display:flex;align-items:center;justify-content:space-around}._accValueControlButton_1pw3b_1{padding:0;background-color:var(--primary-color);border:none;outline:none;width:28px;aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center}._accValueControlButton_1pw3b_1 svg{fill:#fff;width:20px}._accValueControlButton_1pw3b_1:hover{opacity:.8}._accValueControlButton_1pw3b_1:focus{background-color:#fff;border:4px solid var(--primary-color)}._accValueControlButton_1pw3b_1:focus svg{fill:var(--primary-color)}._accLineHeightButton_n1tdk_1,._accZoomButton_1fl6t_1{height:100%;display:flex;align-items:center;justify-content:space-around}._accBrightnessControl_16gcc_1{height:100%;display:flex;align-items:center;justify-content:space-around;position:relative}.rc-slider{position:relative;width:100%;height:14px;padding:5px 0;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;height:4px;background-color:#e9e9e9;border-radius:6px}.rc-slider-track,.rc-slider-tracks{position:absolute;height:4px;background-color:#abe2fb;border-radius:6px}.rc-slider-track-draggable{z-index:1;box-sizing:content-box;background-clip:content-box;border-top:5px solid rgba(0,0,0,0);border-bottom:5px solid rgba(0,0,0,0);transform:translateY(-5px)}.rc-slider-handle{position:absolute;z-index:1;width:14px;height:14px;margin-top:-5px;background-color:#fff;border:solid 2px #96dbfa;border-radius:50%;cursor:pointer;cursor:grab;opacity:.8;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none;box-shadow:none}.rc-slider-handle:focus-visible{border-color:#2db7f5;box-shadow:0 0 0 3px #96dbfa}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;color:#999;text-align:center;vertical-align:middle;cursor:pointer}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;width:8px;height:8px;vertical-align:middle;background-color:#fff;border:2px solid #e9e9e9;border-radius:50%;cursor:pointer}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{background-color:#fff;border-color:#ccc;box-shadow:none;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{width:4px;height:100%}.rc-slider-vertical .rc-slider-track{bottom:0;left:5px;width:4px}.rc-slider-vertical .rc-slider-track-draggable{border-top:0;border-bottom:0;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);transform:translate(-5px)}.rc-slider-vertical .rc-slider-handle{position:absolute;z-index:1;margin-top:0;margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{width:4px;height:100%}.rc-slider-vertical .rc-slider-dot{margin-left:-2px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{display:block!important;animation-duration:.3s;animation-fill-mode:both;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{transform:scale(0);transform-origin:50% 100%;opacity:0}to{transform:scale(1);transform-origin:50% 100%}}@keyframes rcSliderTooltipZoomDownOut{0%{transform:scale(1);transform-origin:50% 100%}to{transform:scale(0);transform-origin:50% 100%;opacity:0}}.rc-slider-tooltip{position:absolute;top:-9999px;left:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{min-width:24px;height:24px;padding:6px 2px;color:#fff;font-size:12px;line-height:1;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}._accRcSlider_dhokk_1{position:absolute;left:0;right:0;bottom:-6px}._accRcSlider_dhokk_1 .rc-slider-rail{background-color:var(--primary-color)}._accRcSlider_dhokk_1 .rc-slider-handle{border:solid 2px var(--primary-color);background-color:red;opacity:1;width:22px;height:22px;margin-top:-9px}._accButtonTextColorPicker_dw9mu_1{grid-column:span 3;aspect-ratio:10/5}._accButtonTextColorPicker_dw9mu_1>h2{margin:0;position:absolute;display:inline-block;width:auto;inset-inline-end:5px}._accButtonTextColorPicker_dw9mu_1 [class^=_accButton__content]{flex:1}._accTextColorPicker_dw9mu_16{height:100%;display:flex;flex-direction:column;align-items:center}._accTextColorPicker__topContainer_dw9mu_22{width:100%;display:flex;align-items:center;justify-content:center;margin-bottom:15px;gap:10px}._accTextColorPicker__inputText_dw9mu_30{text-align:center;font-weight:700;letter-spacing:1px}._accTextColorPicker__hexColorPicker_dw9mu_35{flex:1;width:100%!important}._acc-readingGuide_x7idf_1{position:fixed;top:0;left:0;right:0;width:100%;height:0;pointer-events:none;background-color:#00000080;z-index:1000000}._accSelectVoicesContainer_1d5zn_1 .accSelectVoices__indicators{display:none}._accSelectVoicesContainer_1d5zn_1 .accSelectVoices__option{color:#333}._accMenuContent_1v82o_1{display:grid;height:calc(100vh - 250px);display:flex;flex-direction:column;overflow:hidden}:root{--primary-color: #222e8a;--highlight-color:#0048ff;--white:#fff}

package/dist/components/AccColors/AccColors.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../types";
+interface AccColorsProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const AccColors: FC<AccColorsProps>;
+export default AccColors;

package/dist/components/AccContent/AccContent.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../types";
+interface AccContentProps {
+    nodeListUpdated: number;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const AccContent: FC<AccContentProps>;
+export default AccContent;

package/dist/components/AccMenuContent/AccMenuContent.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../types";
+import { CollapsedState, CollapsedStateKeys } from "../../config";
+interface AccMenuContentProps {
+    nodeListUpdated: number;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+    onCollapse: (name: CollapsedStateKeys) => void;
+    collapsedState: CollapsedState;
+}
+declare const AccMenuContent: FC<AccMenuContentProps>;
+export default AccMenuContent;

package/dist/components/AccMenuContentBlock/AccMenuContentBlock.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from "react";
+import { IconSvgComponent } from "../../types";
+import { CollapsedStateKeys } from "../../config";
+interface AccMenuContentBlockProps {
+    children: ReactNode;
+    name: CollapsedStateKeys;
+    onCollapse: (name: CollapsedStateKeys) => void;
+    isExpanded: boolean;
+    isAccMenuContentActive: boolean;
+    Icon: IconSvgComponent;
+    tKey: string;
+}
+declare const AccMenuContentBlock: FC<AccMenuContentBlockProps>;
+export default AccMenuContentBlock;

package/dist/components/AccTools/AccTools.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../types";
+interface AccToolsProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const AccTools: FC<AccToolsProps>;
+export default AccTools;

package/dist/components/Accessibilik/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const Accessibilik: FC;
+export default Accessibilik;

package/dist/components/AccessibilityMenu/AccessibilityMenu.d.ts

@@ -0,0 +1,15 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../types";
+interface AccessibilityMenuProps {
+    nodeListUpdated: number;
+    display: string;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+    onLangChange: (langCode: string) => void;
+    onInit: () => void;
+    onShow: () => void;
+    showAcc: boolean;
+    hasLanguages: boolean;
+}
+declare const AccessibilityMenu: FC<AccessibilityMenuProps>;
+export default AccessibilityMenu;

package/dist/components/Footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const Footer: FC;
+export default Footer;

package/dist/components/Header/Header.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface HeaderProps {
+    onShow: () => void;
+    onInit: () => void;
+}
+declare const Header: FC<HeaderProps>;
+export default Header;

package/dist/components/Portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from "react";
+interface PortalProps {
+    children: ReactNode;
+    wrapperElementId?: string;
+    [key: string]: unknown;
+}
+declare const Portal: ({ children, wrapperElementId }: PortalProps) => React.ReactPortal | null;
+export default Portal;

package/dist/components/RcSlider/RcSlider.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+interface RcSliderProps {
+    range?: boolean;
+    min?: number;
+    max?: number;
+    value?: number;
+    onChange: (n: number | number[]) => void;
+    height?: number;
+    vertical?: boolean;
+}
+declare const RcSlider: FC<RcSliderProps>;
+export default RcSlider;

package/dist/components/buttons/AccButton/AccButton.d.ts

@@ -0,0 +1,23 @@
+import { FC, ReactNode } from "react";
+import { IconSvgComponent } from "../../../types";
+interface AccButtonProps {
+    Icon: IconSvgComponent;
+    isToggled?: boolean;
+    isActive?: boolean;
+    children?: ReactNode;
+    onToggle?: () => void;
+    titleTranslationKey: string;
+    elementType?: string;
+    title?: string;
+    stats?: number | string;
+    styleIcon?: {
+        [x: string]: unknown;
+    };
+    styleTitle?: {
+        [x: string]: unknown;
+    };
+    className?: string;
+    tooltipTranslationKey?: string;
+}
+declare const AccButton: FC<AccButtonProps>;
+export default AccButton;

package/dist/components/buttons/AccValueControl/AccValueControl.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+interface AccValueControlProps {
+    onIncrease: () => void;
+    onToggle: () => void;
+    onDescrease: () => void;
+}
+declare const AccValueControl: FC<AccValueControlProps>;
+export default AccValueControl;

package/dist/components/buttons/AccValueControlButton/AccValueControlButton.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, FC } from "react";
+export type ValueControlType = "init" | "increase" | "decrease";
+interface AccValueControlButtonProps {
+    controlType: ValueControlType;
+    onClick?: () => void;
+    style?: CSSProperties;
+}
+declare const AccValueControlButton: FC<AccValueControlButtonProps>;
+export default AccValueControlButton;

package/dist/components/buttons/AccessibilityButton/AccessibilityButton.d.ts

@@ -0,0 +1,7 @@
+import { FC } from "react";
+interface AccessibilityButtonProps {
+    onShow?: () => void;
+    showSpinner?: boolean;
+}
+declare const AccessibilityButton: FC<AccessibilityButtonProps>;
+export default AccessibilityButton;

package/dist/components/buttons/colors/BlueLightFilterButton/BlueLightFilterButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface BlueLightFilterButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const BlueLightFilterButton: FC<BlueLightFilterButtonProps>;
+export default BlueLightFilterButton;

package/dist/components/buttons/colors/BrightnessControl/BrightnessControl.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface BrightnessControlProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const BrightnessControl: FC<BrightnessControlProps>;
+export default BrightnessControl;

package/dist/components/buttons/colors/DarkContrastButton/DarkContrastButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface DarkContrastButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const DarkContrastButton: FC<DarkContrastButtonProps>;
+export default DarkContrastButton;

package/dist/components/buttons/colors/HighContrastButton/HighContrastButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface HighContrastButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const HighContrastButton: FC<HighContrastButtonProps>;
+export default HighContrastButton;

package/dist/components/buttons/colors/HighSaturationButton/HighSaturationButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface HighSaturationButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const HighSaturationButton: FC<HighSaturationButtonProps>;
+export default HighSaturationButton;

package/dist/components/buttons/colors/LightContrastButton/LightContrastButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface LightContrastButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const LightContrastButton: FC<LightContrastButtonProps>;
+export default LightContrastButton;

package/dist/components/buttons/colors/LowSaturationButton/LowSaturationButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface LowSaturationButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const LowSaturationButton: FC<LowSaturationButtonProps>;
+export default LowSaturationButton;

package/dist/components/buttons/colors/MonochromeButton/MonochromeButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface MonochromeButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const MonochromeButton: FC<MonochromeButtonProps>;
+export default MonochromeButton;

package/dist/components/buttons/colors/TextColorPickerButton/TextColorPickerButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface TextColorPickerButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const TextColorPickerButton: FC<TextColorPickerButtonProps>;
+export default TextColorPickerButton;

package/dist/components/buttons/colors/VisualImpairmentButton/VisualImpairmentButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface VisualImpairmentButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const VisualImpairmentButton: FC<VisualImpairmentButtonProps>;
+export default VisualImpairmentButton;

package/dist/components/buttons/content/AdjustFontSize/AdjustFontSize.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface AdjustFontSizeProps {
+    nodeListUpdated: number;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const AdjustFontSize: FC<AdjustFontSizeProps>;
+export default AdjustFontSize;

package/dist/components/buttons/content/AlignTextButton/AlignTextButton.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+type Direction = "right" | "center" | "left";
+interface AlignTextButtonProps {
+    direction: Direction;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+    translationKey: string;
+}
+declare const AlignTextButton: FC<AlignTextButtonProps>;
+export default AlignTextButton;

package/dist/components/buttons/content/DyslexiaFontButton/DyslexiaFontButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface DyslexiaFontButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const DyslexiaFontButton: FC<DyslexiaFontButtonProps>;
+export default DyslexiaFontButton;

package/dist/components/buttons/content/DyslexiaFontButton/style.d.ts

@@ -0,0 +1,2 @@
+declare const DYSLEXIA_FONT_STYLE = "\n @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300;400;700&display=swap');\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Bold.woff') format('woff');\n    font-weight: bold;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic3-Bold.ttf') format('truetype');\n    font-weight: bold;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic3-Regular.ttf') format('truetype');\n    font-weight: normal;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Regular.woff') format('woff');\n    font-weight: normal;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Regular.otf') format('opentype');\n    font-weight: normal;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: 'OpenDyslexic';\n    src: url('https://rosengray.github.io/static/fonts/OpenDyslexic-Bold.otf') format('opentype');\n    font-weight: bold;\n    font-style: normal;\n}\n\n\nhtml{\n    font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n  \n}\n\nhtml *, *{\n    font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important\n}\n\nhtml.acc-font-weight{\n    font-family: OpenDyslexic,Comic Neue,Arial,Helvetica,sans-serif !important \n}\n\n\n";
+export default DYSLEXIA_FONT_STYLE;

package/dist/components/buttons/content/FontWeightButton/FontWeightButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface FontWeightButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const FontWeightButton: FC<FontWeightButtonProps>;
+export default FontWeightButton;

package/dist/components/buttons/content/HighlightLinksButton/HighlightLinksButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface HighlightLinksButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const HighlightLinksButton: FC<HighlightLinksButtonProps>;
+export default HighlightLinksButton;

package/dist/components/buttons/content/HighlightTitlesButton/HighlightTitlesButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface HighlightTitlesButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const HighlightTitlesButton: FC<HighlightTitlesButtonProps>;
+export default HighlightTitlesButton;

package/dist/components/buttons/content/LetterSpacingButton/LetterSpacingButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface LetterSpacingButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const LetterSpacingButton: FC<LetterSpacingButtonProps>;
+export default LetterSpacingButton;

package/dist/components/buttons/content/LineHeightButton/LineHeightButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface LineHeightButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const LineHeightButton: FC<LineHeightButtonProps>;
+export default LineHeightButton;

package/dist/components/buttons/content/WordSpacingButton/WordSpacingButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface WordSpacingButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const WordSpacingButton: FC<WordSpacingButtonProps>;
+export default WordSpacingButton;

package/dist/components/buttons/content/ZoomButton/ZoomButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface ZoomButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const ZoomButton: FC<ZoomButtonProps>;
+export default ZoomButton;

package/dist/components/buttons/tools/BigCursorButton/BigCursorButton.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface BigCursorButtonProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const BigCursorButton: FC<BigCursorButtonProps>;
+export default BigCursorButton;

package/dist/components/buttons/tools/BigCursorButton/cursor.d.ts

@@ -0,0 +1,2 @@
+declare const cursor = "\n<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"57px\" height=\"98px\" viewBox=\"0 0 57 97\" version=\"1.1\">\n<g id=\"surface1\">\n<path style=\" stroke:black;stroke-width:4;fill-rule:nonzero;fill:#ccc;fill-opacity:1;\" d=\"M 29.65625 92.226562 L 46.339844 85.503906 L 33.871094 54.734375 L 54.179688 55.089844 L 3.910156 4.773438 L 2.820312 75.773438 L 17.183594 61.453125 Z M 29.65625 92.226562 \"/>\n</g>\n</svg>\n";
+export default cursor;

package/dist/components/buttons/tools/ReadingGuide/ReadingGuide.d.ts

@@ -0,0 +1,9 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface ReadingGuideProps {
+    rgGap?: number;
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const ReadingGuide: FC<ReadingGuideProps>;
+export default ReadingGuide;

package/dist/components/buttons/tools/TextToSpeech/TextToSpeech.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+import { AccessibilikState, ChangeAccDraftHander } from "../../../../types";
+interface TextToSpeechProps {
+    accState: AccessibilikState;
+    onChangeAccState: (fn: ChangeAccDraftHander) => void;
+}
+declare const TextToSpeech: FC<TextToSpeechProps>;
+export default TextToSpeech;

package/dist/config.d.ts

@@ -0,0 +1,22 @@
+import { IconSvgComponent } from "./types";
+export declare const langOptions: {
+    label: string;
+    value: string;
+}[];
+export declare const langMap: Record<string, {
+    label: string;
+    value: string;
+}>;
+type Collapsed = {
+    name: string;
+    isExpanded: boolean;
+    icon: IconSvgComponent;
+};
+export interface CollapsedState {
+    content: Collapsed;
+    colors: Collapsed;
+    tools: Collapsed;
+}
+export declare const collapsedStateInit: CollapsedState;
+export type CollapsedStateKeys = keyof typeof collapsedStateInit;
+export {};

package/dist/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const textTags: string[];
+export declare const ACC_MENU_CONTAINER_ID = "acc-accessibility-menu";
+export declare const APP_ID = "accessibilik";
+export declare const PORTAL_APP_ID = "portal-accessibilik";

package/dist/hooks/useFontSizeMutationObserver.d.ts

@@ -0,0 +1,2 @@
+declare const useFontSizeMutationObserver: () => number;
+export default useFontSizeMutationObserver;

package/dist/hooks/useFontSizeTraverse.d.ts

@@ -0,0 +1,2 @@
+declare const useFontSizeTraverse: () => boolean;
+export default useFontSizeTraverse;