@geotab/zenith 3.9.2 → 3.10.0-beta.1

package/esm/formGroup/components/reviewListToggle/reviewListToggle.js

@@ -5,11 +5,11 @@ import { IconCheckRadio } from "../../../icons/iconCheckRadio";
 import { IconCloseCircle } from "../../../icons/iconCloseCircle";
 import { Pill } from "../../../pill/pill";
 import { useLanguage } from "../../../utils/localization/useLanguage";
-injectString("cs", "On", "Zapnout");
-injectString("da-DK", "On", "P\xE5");
+injectString("cs", "On", "Zapnuto");
+injectString("da-DK", "On", "T\xE6ndt");
 injectString("de", "On", "Ein");
 injectString("en", "On", "On");
-injectString("es", "On", "Activar");
+injectString("es", "On", "Activado");
 injectString("fi-FI", "On", "P\xE4\xE4lle");
 injectString("fr", "On", "Activ\xE9");
 injectString("fr-FR", "On", "On");
@@ -17,26 +17,26 @@ injectString("hu-HU", "On", "Bekapcsolva");
 injectString("id", "On", "Aktif");
 injectString("it", "On", "On");
 injectString("ja", "On", "\u30AA\u30F3");
-injectString("ko-KR", "On", "~\uC5D0");
+injectString("ko-KR", "On", "\uCF1C\uC9D0");
 injectString("ms", "On", "Hidup");
 injectString("nb-NO", "On", "P\xE5");
 injectString("nl", "On", "Aan");
 injectString("pl", "On", "W\u0142.");
-injectString("pt-BR", "On", "Ativado");
-injectString("pt-PT", "On", "Ativado");
+injectString("pt-BR", "On", "Ativar");
+injectString("pt-PT", "On", "Ligado");
 injectString("sk-SK", "On", "Zapnut\xE9");
 injectString("sv", "On", "P\xE5");
 injectString("th", "On", "\u0E40\u0E1B\u0E34\u0E14");
 injectString("tr", "On", "A\xE7\u0131k");
 injectString("zh-Hans", "On", "\u5F00\u542F");
 injectString("zh-TW", "On", "\u958B\u555F");
-injectString("ro-RO", "On", "Activat");
+injectString("ro-RO", "On", "Pe");
 injectString("ar-SA", "On", "\u062A\u0634\u063A\u064A\u0644");
-injectString("cs", "Off", "Vypnout");
+injectString("cs", "Off", "Vypnuto");
 injectString("da-DK", "Off", "Slukket");
 injectString("de", "Off", "Aus");
 injectString("en", "Off", "Off");
-injectString("es", "Off", "Desactivar");
+injectString("es", "Off", "Deshabilitado");
 injectString("fi-FI", "Off", "Pois");
 injectString("fr", "Off", "D\xE9sactiv\xE9");
 injectString("fr-FR", "Off", "Off");
@@ -44,20 +44,20 @@ injectString("hu-HU", "Off", "Kikapcsolva");
 injectString("id", "Off", "Nonaktif");
 injectString("it", "Off", "Off");
 injectString("ja", "Off", "\u30AA\u30D5");
-injectString("ko-KR", "Off", "\uB044\uB2E4");
+injectString("ko-KR", "Off", "\uAEBC\uC9D0");
 injectString("ms", "Off", "Mati");
 injectString("nb-NO", "Off", "Av");
 injectString("nl", "Off", "Uit");
 injectString("pl", "Off", "Wy\u0142.");
-injectString("pt-BR", "Off", "Desativado");
-injectString("pt-PT", "Off", "Desativado");
+injectString("pt-BR", "Off", "Desativar");
+injectString("pt-PT", "Off", "Desligado");
 injectString("sk-SK", "Off", "Vypnut\xE9");
 injectString("sv", "Off", "Av");
 injectString("th", "Off", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Off", "Kapal\u0131");
 injectString("zh-Hans", "Off", "\u5173\u95ED");
 injectString("zh-TW", "Off", "\u95DC\u9589");
-injectString("ro-RO", "Off", "Dezactivat");
+injectString("ro-RO", "Off", "Off");
 injectString("ar-SA", "Off", "\u0625\u064A\u0642\u0627\u0641");
 export const ReviewListToggle = ({
   value,

package/esm/groupsFilterRaw/groupsFilterInitialState.js

@@ -210,7 +210,7 @@ injectString("id", "Results", "Hasil");
 injectString("it", "Results", "Risultati");
 injectString("ja", "Results", "\u7D50\u679C");
 injectString("ko-KR", "Results", "\uACB0\uACFC");
-injectString("ms", "Results", "Keputusan");
+injectString("ms", "Results", "Hasil");
 injectString("nb-NO", "Results", "Resultater");
 injectString("nl", "Results", "Resultaten");
 injectString("pl", "Results", "Wyniki");

package/esm/headerTitle/headerTitle.d.ts

@@ -3,14 +3,6 @@ import "./headerTitle.less";
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import { IBetaPillActions } from "../betaPill/betaPill";
 export declare const HeaderTitleDisplayName = "PageHeader";
-/**
- * @internal - temporary escape hatch
- * @deprecated DO NOT USE in external consumers
- */
-export interface IHeaderTitleInternal {
-    betaPillName?: string;
-    betaPillDescription?: string;
-}
 export interface IHeaderTitle extends IZenComponentProps {
     id?: string;
     pageName: string;
@@ -24,9 +16,11 @@ export interface IHeaderTitle extends IZenComponentProps {
     allowBookmarkWithBack?: boolean;
     feedBackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
+    betaPillName?: string;
+    betaPillDescription?: string;
 }
 export declare const HeaderTitle: {
-    (props: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
+    ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }: IHeaderTitle): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const TRANSLATIONS: string[];

package/esm/headerTitle/headerTitle.js

@@ -7,8 +7,7 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { HeaderBack } from "../header/headerBack";
 import { Bookmark } from "../bookmark/bookmark";
 export const HeaderTitleDisplayName = "PageHeader";
-export const HeaderTitle = (props) => {
-    const { id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription } = props;
+export const HeaderTitle = ({ id, children, className, pageName, subline, isBeta, isMobile: isMobileProp, allowBookmarkWithBack, feedBackAction, betaOptionAction, betaPillName, betaPillDescription }) => {
     const isMobile = useMobile();
     const driveMainLineClassName = useDriveClassName("zen-page-header__main-line");
     const drivePageNameClassName = useDriveClassName("zen-page-header__page-name");
@@ -31,7 +30,7 @@ export const HeaderTitle = (props) => {
         });
         return [b, b.length && !allowBookmarkWithBack ? o.filter(el => el.type !== Bookmark) : o];
     }, [children, allowBookmarkWithBack]);
-    return (_jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? (_jsx(BetaPill, Object.assign({ feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, className: "zen-page-header__beta" }, { name: betaPillName, description: betaPillDescription }))) : null, other.length ? other : null] }), subline || ""] }));
+    return (_jsxs("header", { id: id, className: clsNames, children: [_jsxs("div", { className: classNames(["zen-page-header__main-line", driveMainLineClassName || ""]), children: [back.length ? back : null, pageName ? _jsx("h1", { className: classNames(["zen-page-header__page-name", drivePageNameClassName || ""]), children: pageName }) : null, isBeta ? (_jsx(BetaPill, { feedbackAction: feedBackAction, betaOptionAction: betaOptionAction, name: betaPillName, description: betaPillDescription, className: "zen-page-header__beta" })) : null, other.length ? other : null] }), subline || ""] }));
 };
 HeaderTitle.displayName = HeaderTitleDisplayName;
 export const TRANSLATIONS = [...BetaPillTranslations];

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" })] }));
 };

package/esm/icons/iconCornerUpRight.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 IconCornerUpRight = ({ 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": "IconCornerUpRight", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4 20.87a1 1 0 001-1v-9h12.586l-2.293 2.293a1 1 0 001.414 1.414l4-4a1 1 0 000-1.414l-4-4a1 1 0 10-1.414 1.414l2.293 2.293H4a1 1 0 00-1 1v10a1 1 0 001 1z" })] }));
 };

package/esm/icons/iconLayoutSidebar.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 IconLayoutSidebar = ({ 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": "IconLayoutSidebar", 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 1H10 4a1 1 0 01-1-1v-16zm8 15h8v-6h-8v6zm0-8h8v-6h-8v6zm-2-6v14H5v-14h4z" })] }));
 };

package/esm/icons/iconPinFilled.d.ts

@@ -0,0 +1,3 @@
+import "./icon.less";
+import { IIcon } from "./icon";
+export declare const IconPinFilled: ({ className, size, title, description, focusable }: IIcon) => import("react/jsx-runtime").JSX.Element;

package/esm/icons/iconPinFilled.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { classNames } from "../commonHelpers/classNames/classNames";
+export const IconPinFilled = ({ 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]);
+    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": "IconPinFilled", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.5 3C6.5 2.44772 6.94772 2 7.5 2H16.5C17.0523 2 17.5 2.44772 17.5 3V6.99695C17.5 8.65455 18.1585 10.2443 19.3306 11.4164L19.7071 11.7929C19.8946 11.9804 20 12.2348 20 12.5V15C20 15.5523 19.5523 16 19 16H13V21C13 21.5523 12.5523 22 12 22C11.4477 22 11 21.5523 11 21V16H5C4.44772 16 4 15.5523 4 15V12.5C4 12.2348 4.10536 11.9804 4.29289 11.7929L4.66942 11.4164C5.84152 10.2443 6.5 8.65455 6.5 6.99695V3Z" })] }));
+};

package/esm/icons/iconSidebar.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 IconSidebar = ({ 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": "IconSidebar", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 5.87a1 1 0 011-1h18a1 1 0 011 1v14a1 1 0 01-1 1H3a1 1 0 01-1-1v-14zm2 1v12h6v-12H4zm8 0v12h8v-12h-8z" }), _jsx("path", { d: "M7 10.37a.5.5 0 110-1 .5.5 0 010 1zM7 13.37a.5.5 0 110-1 .5.5 0 010 1zM7 16.37a.5.5 0 110-1 .5.5 0 010 1z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 10.87a1 1 0 110-2 1 1 0 010 2zm0 3a1 1 0 110-2 1 1 0 010 2zm0 3a1 1 0 110-2 1 1 0 010 2zm0-6.5a.5.5 0 110-1 .5.5 0 010 1zm0 3a.5.5 0 110-1 .5.5 0 010 1zm-.5 2.5a.5.5 0 101 0 .5.5 0 00-1 0z" })] }));
 };

package/esm/icons/iconUndock.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 IconUndock = ({ 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": "IconUndock", children: [title ? _jsx("title", { id: uniqueId, children: title }) : null, description ? _jsx("desc", { children: description }) : null, _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.293 4.163A1 1 0 014 3.87h6a1 1 0 110 2H6.414l4.543 4.542a1 1 0 01-1.414 1.415L5 7.284v3.586a1 1 0 11-2 0v-6a1 1 0 01.293-.707zM13 7.87a1 1 0 011-1h7a1 1 0 011 1v14a1 1 0 01-1 1H7a1 1 0 01-1-1v-7a1 1 0 112 0v6h12v-12h-6a1 1 0 01-1-1z" })] }));
 };

package/esm/index.d.ts

@@ -556,6 +556,7 @@ export { IconPhone } from "./icons/iconPhone";
 export { IconPhoneMobile } from "./icons/iconPhoneMobile";
 export { IconPin } from "./icons/iconPin";
 export { IconPin2 } from "./icons/iconPin2";
+export { IconPinFilled } from "./icons/iconPinFilled";
 export { IconPinLocation } from "./icons/iconPinLocation";
 export { IconPinLocation2 } from "./icons/iconPinLocation2";
 export { IconPinLocation3 } from "./icons/iconPinLocation3";

package/esm/index.js

@@ -545,6 +545,7 @@ export { IconPhone } from "./icons/iconPhone";
 export { IconPhoneMobile } from "./icons/iconPhoneMobile";
 export { IconPin } from "./icons/iconPin";
 export { IconPin2 } from "./icons/iconPin2";
+export { IconPinFilled } from "./icons/iconPinFilled";
 export { IconPinLocation } from "./icons/iconPinLocation";
 export { IconPinLocation2 } from "./icons/iconPinLocation2";
 export { IconPinLocation3 } from "./icons/iconPinLocation3";

package/esm/list/listItem/listItem.d.ts

@@ -13,5 +13,7 @@ export interface IListItem extends IZenComponentProps {
     link?: string;
     target?: React.HTMLAttributeAnchorTarget;
     onDragStart?: (e: React.PointerEvent<HTMLElement>) => void;
+    wrap?: boolean;
+    vertical?: boolean;
 }
-export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart }: IListItem) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItem: ({ id, className, image, name, secondary, status, actions, onClick, link, target, onDragStart, wrap, vertical }: IListItem) => import("react/jsx-runtime").JSX.Element;

package/esm/list/listItem/listItem.js

@@ -79,7 +79,9 @@ export const ListItem = ({
   onClick,
   link,
   target,
-  onDragStart
+  onDragStart,
+  wrap,
+  vertical
 }) => {
   const isMobile = useMobile();
   const driveClassName = useDriveClassName("zen-list-item");
@@ -169,7 +171,7 @@ export const ListItem = ({
   const clickableClassName = useMemo(() => onClick || link ? "zen-list-item--clickable" : "", [link, onClick]);
   return _jsxs("li", {
     id: id,
-    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, className || ""]),
+    className: classNames(["zen-list-item", mobileClassName || driveClassName || "", clickableClassName, wrap ? "zen-list-item--wrap" : "", vertical ? "zen-list-item--vertical" : "", className || ""]),
     onClick: handleClick,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ref: itemRef,

package/esm/menu/controlledMenu.d.ts

@@ -17,6 +17,7 @@ export interface IControlledMenu extends IZenComponentProps {
     ariaLabel?: string;
     ariaLabelledby?: string;
     listClassName?: string;
+    closeOnScroll?: boolean;
 }
 type TControlledMenu = FC<IControlledMenu> & {
     Item: FC<IMenuControlledItem>;