@geotab/zenith 3.11.0-beta.0 → 3.11.0-beta.1

package/esm/filtersBar/filtersContainer/filtersContainer.js

@@ -4,63 +4,63 @@ import { ButtonIconPosition, TextIconButton } from "../../textIconButton/textIco
 import { classNames } from "../../commonHelpers/classNames/classNames";
 import { useEffect, useRef, useState, Children, cloneElement, useCallback } from "react";
 import { IconChevronRight } from "../../icons/iconChevronRight";
-import { IconChevronLeft } from "../../icons/iconChevronLeft";
-import { useDirectionalIcon } from "../../utils/localization/useDirectionalIcon";
 import { useLanguage } from "../../utils/localization/useLanguage";
 import { useDriveClassName } from "../../utils/theme/useDriveClassName";
 import { zen } from "../../utils/zen";
-injectString("cs", "Scroll to start", "P\u0159ej\xEDt na za\u010D\xE1tek");
-injectString("da-DK", "Scroll to start", "Rul til start");
-injectString("de", "Scroll to start", "Zum Start scrollen");
-injectString("en", "Scroll to start", "Scroll to start");
-injectString("es", "Scroll to start", "Desplazarse al inicio");
-injectString("fi-FI", "Scroll to start", "Vierit\xE4 alkuun");
-injectString("fr", "Scroll to start", "D\xE9filement au d\xE9but");
-injectString("fr-FR", "Scroll to start", "Faites d\xE9filer pour d\xE9marrer");
-injectString("hu-HU", "Scroll to start", "G\xF6rget\xE9s az elej\xE9re");
-injectString("id", "Scroll to start", "Gulirkan untuk memulai");
-injectString("it", "Scroll to start", "Scorrere fino all'inizio");
-injectString("ja", "Scroll to start", "\u4E00\u756A\u4E0A\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
-injectString("ko-KR", "Scroll to start", "\uC2DC\uC791 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
-injectString("ms", "Scroll to start", "Tatal ke permulaan");
-injectString("nb-NO", "Scroll to start", "Rull til start");
-injectString("nl", "Scroll to start", "Scroll to start");
-injectString("pl", "Scroll to start", "Przewi\u0144 do pocz\u0105tku");
-injectString("pt-BR", "Scroll to start", "Scroll to start");
-injectString("pt-PT", "Scroll to start", "Scroll to start");
-injectString("sk-SK", "Scroll to start", "Posun\xFA\u0165 na za\u010Diatok");
-injectString("sv", "Scroll to start", "Scroll to start");
-injectString("th", "Scroll to start", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19");
-injectString("tr", "Scroll to start", "Ba\u015Flang\u0131ca kayd\u0131r");
-injectString("zh-Hans", "Scroll to start", "\u6EDA\u52A8\u81F3\u5F00\u5934");
-injectString("zh-TW", "Scroll to start", "\u6372\u52D5\u81F3\u958B\u59CB\u8655");
-injectString("ro-RO", "Scroll to start", "Derulare la \xEEnceput");
-injectString("cs", "Scroll to end", "P\u0159ej\xEDt na konec");
-injectString("da-DK", "Scroll to end", "Rul til slutning");
-injectString("de", "Scroll to end", "Zum Ende scrollen");
-injectString("en", "Scroll to end", "Scroll to end");
-injectString("es", "Scroll to end", "Desplazarse al final");
-injectString("fi-FI", "Scroll to end", "Vierit\xE4 loppuun");
-injectString("fr", "Scroll to end", "D\xE9filement \xE0 la fin");
-injectString("fr-FR", "Scroll to end", "Faites d\xE9filer jusqu\u2019\xE0 la fin");
-injectString("hu-HU", "Scroll to end", "G\xF6rget\xE9s a v\xE9g\xE9re");
-injectString("id", "Scroll to end", "Gulirkan ke akhir");
-injectString("it", "Scroll to end", "Scorrere fino alla fine");
-injectString("ja", "Scroll to end", "\u4E00\u756A\u4E0B\u307E\u3067\u30B9\u30AF\u30ED\u30FC\u30EB");
-injectString("ko-KR", "Scroll to end", "\uB9C8\uC9C0\uB9C9 \uC704\uCE58\uB85C \uC2A4\uD06C\uB864");
-injectString("ms", "Scroll to end", "Tatal ke penghujung");
-injectString("nb-NO", "Scroll to end", "Rull til slutt");
-injectString("nl", "Scroll to end", "Scroll to end");
-injectString("pl", "Scroll to end", "Przewi\u0144 do ko\u0144ca");
-injectString("pt-BR", "Scroll to end", "Scroll to end");
-injectString("pt-PT", "Scroll to end", "Scroll to end");
-injectString("sk-SK", "Scroll to end", "Posun\xFA\u0165 na koniec");
-injectString("sv", "Scroll to end", "Scroll to end");
-injectString("th", "Scroll to end", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E35\u0E48\u0E08\u0E38\u0E14\u0E2A\u0E34\u0E49\u0E19\u0E2A\u0E38\u0E14");
-injectString("tr", "Scroll to end", "Sona kayd\u0131r");
-injectString("zh-Hans", "Scroll to end", "\u6EDA\u52A8\u81F3\u672B\u5C3E");
-injectString("zh-TW", "Scroll to end", "\u6372\u52D5\u81F3\u7D50\u5C3E\u8655");
-injectString("ro-RO", "Scroll to end", "Derulare la sf\xE2r\u0219it");
+injectString("cs", "Scroll left", "P\u0159ej\xEDt doleva");
+injectString("da-DK", "Scroll left", "Rul til venstre");
+injectString("de", "Scroll left", "Nach links scrollen");
+injectString("en", "Scroll left", "Scroll left");
+injectString("es", "Scroll left", "Desplazarse a la izquierda");
+injectString("fi-FI", "Scroll left", "Selaa vasemmalle");
+injectString("fr", "Scroll left", "D\xE9filer vers la gauche");
+injectString("fr-FR", "Scroll left", "Faire d\xE9filer vers la gauche");
+injectString("hu-HU", "Scroll left", "Lapozz balra.");
+injectString("id", "Scroll left", "Gulir ke kiri");
+injectString("it", "Scroll left", "Scorrere verso sinistra");
+injectString("ja", "Scroll left", "\u5DE6\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll left", "\uC67C\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll left", "Skrol ke kiri");
+injectString("nb-NO", "Scroll left", "Rull til venstre");
+injectString("nl", "Scroll left", "Blader naar links");
+injectString("pl", "Scroll left", "Przewi\u0144 w lewo");
+injectString("pt-BR", "Scroll left", "Rolar para a esquerda");
+injectString("pt-PT", "Scroll left", "Deslizar para a esquerda");
+injectString("sk-SK", "Scroll left", "Posu\u0148 do\u013Eava");
+injectString("sv", "Scroll left", "Bl\xE4ddra \xE5t v\xE4nster");
+injectString("th", "Scroll left", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E0B\u0E49\u0E32\u0E22");
+injectString("tr", "Scroll left", "Sola kayd\u0131r");
+injectString("zh-Hans", "Scroll left", "\u5411\u5DE6\u6EDA\u52A8");
+injectString("zh-TW", "Scroll left", "\u5411\u5DE6\u6372\u52D5");
+injectString("ro-RO", "Scroll left", "Derula\u021Bi la st\xE2nga");
+injectString("ar-SA", "Scroll left", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0633\u0627\u0631");
+injectString("cs", "Scroll right", "P\u0159ej\xEDt doprava");
+injectString("da-DK", "Scroll right", "Rul til h\xF8jre");
+injectString("de", "Scroll right", "Nach rechts scrollen");
+injectString("en", "Scroll right", "Scroll right");
+injectString("es", "Scroll right", "Desplazarse a la derecha");
+injectString("fi-FI", "Scroll right", "Selaa oikealle");
+injectString("fr", "Scroll right", "D\xE9filer vers la droite");
+injectString("fr-FR", "Scroll right", "Faire d\xE9filer vers la droite");
+injectString("hu-HU", "Scroll right", "Lapozz jobbra.");
+injectString("id", "Scroll right", "Gulir ke kanan");
+injectString("it", "Scroll right", "Scorrere verso destra");
+injectString("ja", "Scroll right", "\u53F3\u306B\u30B9\u30AF\u30ED\u30FC\u30EB");
+injectString("ko-KR", "Scroll right", "\uC624\uB978\uCABD\uC73C\uB85C \uC2A4\uD06C\uB864");
+injectString("ms", "Scroll right", "Skrol ke kanan");
+injectString("nb-NO", "Scroll right", "Rull til h\xF8yre");
+injectString("nl", "Scroll right", "Blader naar rechts");
+injectString("pl", "Scroll right", "Przewi\u0144 w prawo");
+injectString("pt-BR", "Scroll right", "Rolar para a direita");
+injectString("pt-PT", "Scroll right", "Deslizar para a direita");
+injectString("sk-SK", "Scroll right", "Posu\u0148 doprava");
+injectString("sv", "Scroll right", "Bl\xE4ddra \xE5t h\xF6ger");
+injectString("th", "Scroll right", "\u0E40\u0E25\u0E37\u0E48\u0E2D\u0E19\u0E44\u0E1B\u0E17\u0E32\u0E07\u0E02\u0E27\u0E32");
+injectString("tr", "Scroll right", "Sa\u011Fa Kayd\u0131r");
+injectString("zh-Hans", "Scroll right", "\u5411\u53F3\u6EDA\u52A8");
+injectString("zh-TW", "Scroll right", "\u5411\u53F3\u6372\u52D5");
+injectString("ro-RO", "Scroll right", "Derula\u021Bi la dreapta");
+injectString("ar-SA", "Scroll right", "\u0627\u0644\u062A\u0645\u0631\u064A\u0631 \u0644\u0644\u064A\u0645\u064A\u0646");
 const getScrollButtonType = element => {
   const scrollLeft = element.scrollLeft;
   const scrollWidth = element.scrollWidth;
@@ -85,8 +85,6 @@ export const FiltersContainer = ({
   const {
     translate
   } = useLanguage();
-  const ScrollStartIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
-  const ScrollEndIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const gradientClass = "zen-filters-toolbar__gradient";
   const scrollerClass = "zen-filters-toolbar__scroller";
   const driveClassNameScroller = useDriveClassName(scrollerClass);
@@ -197,11 +195,12 @@ export const FiltersContainer = ({
     children: [_jsx("div", {
       className: classNames([gradientClass, driveClassNameGradient || "", `${gradientClass}--left`, showLeft ? `${gradientClass}--visible` : "", isHiddenDisplay.left ? `${gradientClass}--hidden` : ""])
     }), _jsx(TextIconButton, {
-      title: translate("Scroll to start"),
+      title: translate("Scroll left"),
       className: classNames(["zen-filters-toolbar__scroller", driveClassNameScroller || "", "zen-filters-toolbar__start", showLeft ? `${scrollerClass}--visible` : "", isHiddenDisplay.left ? `${scrollerClass}--hidden` : ""]),
-      icon: ScrollStartIcon,
+      icon: IconChevronRight,
       iconPosition: ButtonIconPosition.Start,
-      onClick: handleScrollButtonClick(-scrollableStep)
+      onClick: handleScrollButtonClick(-scrollableStep),
+      iconClasses: "zen-filters-toolbar__start-icon"
     }), _jsx("div", {
       ref: scrollableRef,
       className: classNames(["zen-filters-toolbar__scrollable", !isHiddenDisplay.left ? "has-left-scroller" : "", !isHiddenDisplay.right ? "has-right-scroller" : ""]),
@@ -212,12 +211,12 @@ export const FiltersContainer = ({
     }), _jsx("div", {
       className: classNames([gradientClass, driveClassNameGradient || "", `${gradientClass}--right`, showRight ? `${gradientClass}--visible` : "", isHiddenDisplay.right ? `${gradientClass}--hidden` : ""])
     }), _jsx(TextIconButton, {
-      title: translate("Scroll to end"),
+      title: translate("Scroll right"),
       className: classNames([scrollerClass, driveClassNameScroller || "", "zen-filters-toolbar__end", showRight ? `${scrollerClass}--visible` : "", isHiddenDisplay.right ? `${scrollerClass}--hidden` : ""]),
-      icon: ScrollEndIcon,
+      icon: IconChevronRight,
       onClick: handleScrollButtonClick(scrollableStep),
       iconPosition: ButtonIconPosition.End
     })]
   }) : null;
 };
-export const TRANSLATIONS = ["Scroll to start", "Scroll to end"];
+export const TRANSLATIONS = ["Scroll left", "Scroll right"];

package/esm/formStepperButtons/formStepperButtons.js

@@ -3,8 +3,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { Button } from "../button/button";
 import { IconChevronLeft } from "../icons/iconChevronLeft";
-import { IconChevronRight } from "../icons/iconChevronRight";
-import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { TextIconButton } from "../textIconButton/textIconButton";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { STEPPER_LAST_STEP } from "../formStepper/formStepper";
@@ -133,7 +131,6 @@ export const FormStepperButtons = ({
     translate
   } = useLanguage();
   const isMobile = useMobile();
-  const BackChevronIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
   const onPreviousHandler = useCallback(() => {
     const currIndex = getCurrentIndex(steps, current);
     const prevStep = currIndex > 0 ? steps[currIndex - 1].id : null;
@@ -172,7 +169,7 @@ export const FormStepperButtons = ({
       className: "zen-form-step-buttons__left",
       children: !isFirstStep && _jsx(TextIconButton, {
         className: "zen-form-step-buttons__previous",
-        icon: BackChevronIcon,
+        icon: IconChevronLeft,
         type: "tertiary-black",
         onClick: onPreviousHandler,
         children: translate("Previous step")

package/esm/groupsFilterRaw/groupsFilterAdjustmentState.js

@@ -5,8 +5,6 @@ import { IconHouse } from "../icons/deprecated/iconHouse";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { IconArrowLeft } from "../icons/iconArrowLeft";
-import { IconArrowRight } from "../icons/iconArrowRight";
-import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
 injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
 injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
@@ -126,7 +124,6 @@ export const GroupsFilterAdjustmentState = ({
   const {
     translate
   } = useLanguage();
-  const BackArrowIcon = useDirectionalIcon(IconArrowLeft, IconArrowRight);
   const handleSelectAllClick = () => {
     onSelectAllClick(isAllSelected);
   };
@@ -150,7 +147,7 @@ export const GroupsFilterAdjustmentState = ({
     className: "zen-groups-filter-menu__content-adjustment",
     children: [_jsxs("div", {
       className: "zen-groups-filter-menu__item-wrapper",
-      children: [getActionButton(backButtonName ? backButtonName : translate("Back"), translate("Back"), BackArrowIcon, onBackButtonClick), _jsx("button", {
+      children: [getActionButton(backButtonName ? backButtonName : translate("Back"), translate("Back"), IconArrowLeft, onBackButtonClick), _jsx("button", {
         type: "button",
         onClick: onHomeButtonClick,
         className: "zen-groups-filter-menu__item zen-groups-filter-menu__item--interactive zen-groups-filter-menu__action-button zen-groups-filter-menu__item--end zen-groups-filter-menu__action-button-home",

package/esm/groupsFilterRaw/groupsFilterInitialState.js

@@ -5,8 +5,6 @@ import { GroupsFilterCurrentlySelectedLabel } from "./groupsFilterCommon";
 import { IconGlobe } from "../icons/deprecated/iconGlobe";
 import { IconOrgFilter } from "../icons/deprecated/iconOrgFilter";
 import { IconChevronRight } from "../icons/iconChevronRight";
-import { IconChevronLeft } from "../icons/iconChevronLeft";
-import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { ToggleButtonRaw } from "../toggleButtonRaw/toggleButtonRaw";
 import { Divider } from "../divider/divider";
@@ -239,7 +237,6 @@ export const GroupsFilterInitialState = ({
     translate
   } = useLanguage();
   const togglerId = useId();
-  const ChevronIcon = useDirectionalIcon(IconChevronRight, IconChevronLeft);
   const handleTogglerChange = newState => onSiteWideChange(newState);
   const currentlySelectedAriaLabel = translate("View currently selected filters").concat(". ").concat(count ? translate("Number of selected groups - {count}").replace("{count}", count.toString()) : translate("All groups selected"));
   return _jsxs("div", {
@@ -288,7 +285,7 @@ export const GroupsFilterInitialState = ({
       children: _jsxs(_Fragment, {
         children: [_jsx(GroupsFilterCurrentlySelectedLabel, {
           count: count
-        }), _jsx(ChevronIcon, {
+        }), _jsx(IconChevronRight, {
           size: "large"
         })]
       })

package/esm/header/headerBack.js

@@ -11,9 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronLeft } from "../icons/iconChevronLeft";
-import { IconChevronRight } from "../icons/iconChevronRight";
 import { useLanguage } from "../utils/localization/useLanguage";
-import { useDirectionalIcon } from "../utils/localization/useDirectionalIcon";
 injectString("cs", "Back", "Zp\u011Bt");
 injectString("da-DK", "Back", "Tilbage");
 injectString("de", "Back", "Zur\xFCck");
@@ -54,12 +52,11 @@ export const HeaderBack = _a => {
   const {
     translate
   } = useLanguage();
-  const BackChevronIcon = useDirectionalIcon(IconChevronLeft, IconChevronRight);
   const fullClassName = classNames(["zen-header-back", className || ""]);
   const props = Object.assign({}, restProps);
   return _jsx(TextIconButton, Object.assign({
     id: id,
-    icon: BackChevronIcon,
+    icon: IconChevronLeft,
     iconPosition: ButtonIconPosition.Start,
     type: "tertiary",
     className: fullClassName,

package/esm/icons/iconAlignLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useId } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconAlignLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconAlignLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 4.87a1 1 0 011-1h16a1 1 0 011 1v16a1 1 0 01-1 1H4a1 1 0 01-1-1v-16zm2 1v14h14v-14H5zm3 2a1 1 0 011 1v8a1 1 0 11-2 0v-8a1 1 0 011-1z" })] }));
 };

package/esm/icons/iconAlignmentLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useId } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconAlignmentLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconAlignmentLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 5.87a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm0 7a1 1 0 011-1h8a1 1 0 110 2H4a1 1 0 01-1-1zm0 7a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1z" })] }));
 };

package/esm/icons/iconAlignmentRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconAlignmentRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconAlignmentRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 5.87a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1zm8 7a1 1 0 011-1h8a1 1 0 110 2h-8a1 1 0 01-1-1zm-8 7a1 1 0 011-1h16a1 1 0 110 2H4a1 1 0 01-1-1z" })] }));
 };

package/esm/icons/iconArrowBottomLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowBottomLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowBottomLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16 18.87a1 1 0 01-1 1H6a1 1 0 01-1-1v-9a1 1 0 112 0v6.585l9.793-9.792a1 1 0 111.414 1.414L8.414 17.87H15a1 1 0 011 1z" })] }));
 };

package/esm/icons/iconArrowBottomRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowBottomRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowBottomRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18 8.87a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 110-2h6.586L5.793 8.077a1 1 0 011.414-1.414L17 16.455V9.87a1 1 0 011-1z" })] }));
 };

package/esm/icons/iconArrowLeftPath.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowLeftPath = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowLeftPath", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.413 4.959a1 1 0 01.587.91v3h10a1 1 0 011 1v6a1 1 0 01-1 1H11v3a1 1 0 01-1.659.753l-8-7a1 1 0 010-1.505l8-7a1 1 0 011.072-.158zm-6.894 7.91L9 17.667V15.87a1 1 0 011-1h10v-4H10a1 1 0 01-1-1V8.073L3.519 12.87z" })] }));
 };

package/esm/icons/iconArrowRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21 12.87a1 1 0 01-.293.707l-6 6a1 1 0 11-1.414-1.415l4.293-4.292H4a1 1 0 110-2h13.586l-4.293-4.293a1 1 0 011.414-1.414l6 6a1 1 0 01.293.707z" })] }));
 };

package/esm/icons/iconArrowRightCircle.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowRightCircle = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowRightCircle", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 12.87a8 8 0 10-16 0 8 8 0 0016 0zm-8-10c5.523 0 10 4.477 10 10 0 5.522-4.477 10-10 10s-10-4.478-10-10c0-5.523 4.477-10 10-10zm1.707 6.293l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.415l1.293-1.292H8a1 1 0 110-2h5.586l-1.293-1.293a1 1 0 011.414-1.414z" })] }));
 };

package/esm/icons/iconArrowRightPath.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowRightPath = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowRightPath", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.587 4.959a1 1 0 011.072.158l8 7a1 1 0 010 1.505l-8 7A1 1 0 0113 19.87v-3H3a1 1 0 01-1-1v-6a1 1 0 011-1h10v-3a1 1 0 01.587-.911zM15 8.073V9.87a1 1 0 01-1 1H4v4h10a1 1 0 011 1v1.796l5.481-4.796L15 8.073z" })] }));
 };

package/esm/icons/iconArrowTopLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowTopLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowTopLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6 16.87a1 1 0 01-1-1v-9a1 1 0 011-1h9a1 1 0 110 2H8.414l9.793 9.793a1 1 0 01-1.414 1.414L7 9.284v6.586a1 1 0 01-1 1z" })] }));
 };

package/esm/icons/iconArrowTopRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconArrowTopRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconArrowTopRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 6.87a1 1 0 011-1h9a1 1 0 011 1v9a1 1 0 11-2 0V9.284l-9.793 9.793a1 1 0 11-1.414-1.415l9.793-9.792H9a1 1 0 01-1-1z" })] }));
 };

package/esm/icons/iconChevronDoubleRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconChevronDoubleRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconChevronDoubleRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.293 8.163a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 11-1.414-1.415l3.293-3.292-3.293-3.293a1 1 0 010-1.414zm7 0a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 11-1.414-1.415l3.293-3.292-3.293-3.293a1 1 0 010-1.414z" })] }));
 };

package/esm/icons/iconChevronRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconChevronRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconChevronRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.293 4.163a1 1 0 011.414 0l8 8a1 1 0 010 1.414l-8 8a1 1 0 11-1.414-1.415l7.293-7.292-7.293-7.293a1 1 0 010-1.414z" })] }));
 };

package/esm/icons/iconChevronRightSmall.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconChevronRightSmall = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconChevronRightSmall", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.293 8.163a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 11-1.414-1.415l3.293-3.292-3.293-3.293a1 1 0 010-1.414z" })] }));
 };

package/esm/icons/iconCornerDownLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerDownLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerDownLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20 4.87a1 1 0 00-1 1v9H6.414l2.293-2.293a1 1 0 10-1.414-1.415l-4 4a1 1 0 000 1.415l4 4a1 1 0 101.414-1.415L6.414 16.87H20a1 1 0 001-1v-10a1 1 0 00-1-1z" })] }));
 };

package/esm/icons/iconCornerDownRight.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerDownRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerDownRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 4.87a1 1 0 011 1v9h12.586l-2.293-2.293a1 1 0 011.414-1.415l4 4a1 1 0 010 1.415l-4 4a1 1 0 11-1.414-1.415l2.293-2.292H4a1 1 0 01-1-1v-10a1 1 0 011-1z" })] }));
 };

package/esm/icons/iconCornerLeftDown.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerLeftDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerLeftDown", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M21 4.87a1 1 0 01-1 1H9v12.585l2.293-2.292a1 1 0 011.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.415L7 18.456V4.87a1 1 0 011-1h12a1 1 0 011 1z" })] }));
 };

package/esm/icons/iconCornerLeftUp.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerLeftUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerLeftUp", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.293 4.163a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L9 7.284V19.87h11a1 1 0 110 2H8a1 1 0 01-1-1V7.284L4.707 9.577a1 1 0 01-1.414-1.414l4-4z" })] }));
 };

package/esm/icons/iconCornerRightDown.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerRightDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerRightDown", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3 4.87a1 1 0 001 1h11v12.585l-2.293-2.292a1 1 0 00-1.414 1.414l4 4a1 1 0 001.414 0l4-4a1 1 0 00-1.414-1.415L17 18.456V4.87a1 1 0 00-1-1H4a1 1 0 00-1 1z" })] }));
 };

package/esm/icons/iconCornerRightUp.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerRightUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 25", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerRightUp", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.293 4.163a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L17 7.284V20.87a1 1 0 01-1 1H4a1 1 0 110-2h11V7.284l-2.293 2.293a1 1 0 11-1.414-1.414l4-4z" })] }));
 };

package/esm/icons/iconCornerUpLeft.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { useIsRTL } from "../utils/localization/useIsRTL";
 export const IconCornerUpLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = useId();
-    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = useIsRTL();
+    const classes = useMemo(() => classNames(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", focusable: focusable ? "true" : undefined, tabIndex: focusable ? 0 : undefined, role: focusable || title || description ? undefined : "presentation", className: classes, "aria-labelledby": title && focusable ? uniqueId : undefined, "data-name": "IconCornerUpLeft", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", d: "M20 20a1 1 0 0 1-1-1v-9H6.414l2.293 2.293a1 1 0 1 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L6.414 8H20a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1", clipRule: "evenodd" })] }));
 };