@geotab/zenith 3.9.1 → 3.10.0-beta.0

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/mobileSheet/mobileSheet.js

@@ -51,10 +51,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -65,13 +65,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const MobileSheet = ({
   /* eslint-enable @typescript-eslint/naming-convention */

package/esm/modal/modal.js

@@ -27,10 +27,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -41,13 +41,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const Modal = ({
   isOpen,

package/esm/nav/nav.d.ts

@@ -1,5 +1,7 @@
 import { IZenComponentProps } from "../commonHelpers/zenComponent";
 import "./nav.less";
+import { FC } from "react";
+import { NavEmpty } from "./navEmpty/navEmpty";
 export interface INav extends IZenComponentProps {
     mobileBarContainer: HTMLElement | null;
     collapsed?: boolean;
@@ -8,8 +10,12 @@ export interface INav extends IZenComponentProps {
     isMobileMenuOpen?: boolean;
     onIsMobileMenuOpenToggle?: (isOpen: boolean) => void;
     onEditModeToggle?: (isEdit: boolean) => void;
+    showEmptyState?: boolean;
+    showSectionDividers?: boolean;
 }
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export declare const Nav: ({ children, className, collapsed, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen, onIsMobileMenuOpenToggle, onEditModeToggle }: INav) => import("react/jsx-runtime").JSX.Element;
+export declare const Nav: FC<INav> & {
+    Empty: typeof NavEmpty;
+};

package/esm/nav/nav.js

@@ -10,6 +10,8 @@ import { NavMobileBar } from "./navMobileBar/navMobileBar";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
 import { zen } from "../utils/zen";
+import { EmptyState } from "../emptyState/emptyState";
+import { NavEmpty } from "./navEmpty/navEmpty";
 const NavContent = ({ children }) => {
     const { isEditState } = useNavContext();
     const contentRef = useRef(null);
@@ -51,7 +53,8 @@ const NavContent = ({ children }) => {
 /**
  * @beta This component is not fully ready yet and may change in future releases.
  */
-export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const Nav = ({ children, className, collapsed = false, onCollapseToggle, onMenuVisibilityToggle, mobileBarContainer, isMobileMenuOpen = false, onIsMobileMenuOpenToggle, onEditModeToggle, showEmptyState = false, showSectionDividers = true
 // eslint-disable-next-line complexity
  }) => {
     const menuRef = useRef(null);
@@ -88,8 +91,11 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
     const secondaryFooter = footer && filterPrimaryNavItems(footer, true);
     const primaryFooter = footer && filterPrimaryNavItems(footer, false);
     const footerToRender = isEditState ? editFooter : isMobile ? secondaryFooter : footer;
+    const isCollapsedEmptyState = !isEditState && showEmptyState && collapsed && !isMobile;
+    const shouldRenderEmptyState = !isEditState && showEmptyState && !isCollapsedEmptyState;
     const primaryItems = [...primarySections, ...(primaryFooter ? [primaryFooter] : [])].flatMap(e => collectNavItems(e));
     const editListItems = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEditSection"; });
+    const navEmptyChild = childrenArray.find(child => { var _a; return ((_a = child.type) === null || _a === void 0 ? void 0 : _a.displayName) === "NavEmpty"; });
     const onSearchOpen = useCallback((isOpen) => {
         isOpen && onCollapseToggle && onCollapseToggle(false);
         setIsSearchOpen(isOpen || isMobile);
@@ -151,9 +157,8 @@ export const Nav = ({ children, className, collapsed = false, onCollapseToggle,
                     className || ""
                 ]), children: [header
                         ? cloneElement(header, Object.assign(Object.assign({}, header.props), { className: classNames(["zen-nav__header", header.props.className || ""]) }))
-                        : null, _jsx(NavContent, { children: isEditState
-                            ? editListItems
-                            : sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
-                                        className: classNames(["zen-nav__section", section.props.className || ""])
-                                    }), isMobile || index < sectionsToRender.length - 1 ? _jsx(NavDivider, {}) : null] }, index))) }), footerToRender] })) : null, mobileBarContainer && isMobile && navMobileBarPortal] }));
+                        : null, _jsx(NavContent, { children: isEditState ? (editListItems) : isCollapsedEmptyState ? null : shouldRenderEmptyState ? (_jsx("div", { className: "zen-nav__empty-state", children: _jsx(EmptyState, { description: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.description, image: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.image, children: navEmptyChild === null || navEmptyChild === void 0 ? void 0 : navEmptyChild.props.children }) })) : (sectionsToRender.map((section, index) => (_jsxs(Fragment, { children: [cloneElement(section, {
+                                    className: classNames(["zen-nav__section", section.props.className || ""])
+                                }), showSectionDividers && (isMobile || index < sectionsToRender.length - 1) ? _jsx(NavDivider, {}) : null] }, index)))) }), footerToRender] })) : null, mobileBarContainer && isMobile && navMobileBarPortal] }));
 };
+Nav.Empty = NavEmpty;

package/esm/nav/navEmpty/navEmpty.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export interface INavEmpty {
+    description?: string;
+    image?: ReactNode | React.FC;
+    children?: ReactNode;
+}
+export declare const NavEmpty: {
+    (_: INavEmpty): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/nav/navEmpty/navEmpty.js

@@ -0,0 +1,3 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const NavEmpty = (_) => _jsx(_Fragment, {});
+NavEmpty.displayName = "NavEmpty";

package/esm/notification/notification.js

@@ -16,10 +16,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -30,13 +30,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const Notification = ({
   id,

package/esm/notification/pushNotification/pushNotification.js

@@ -6,7 +6,7 @@ export const PushNotification = ({ children, isOpen }) => {
         if (!ref.current || !isOpen) {
             return;
         }
-        ref.current.animate([{ left: "120%" }, { left: "0%" }], {
+        ref.current.animate([{ insetInlineStart: "120%" }, { insetInlineStart: "0%" }], {
             duration: 150,
             iterations: 1,
             delay: 0

package/esm/pill/components/pillNonActionable/pillNonActionable.js

@@ -13,10 +13,10 @@ injectString("da-DK", "Close", "Luk");
 injectString("de", "Close", "Schlie\xDFen");
 injectString("en", "Close", "Close");
 injectString("es", "Close", "Cerrar");
-injectString("fi-FI", "Close", "Sulje");
+injectString("fi-FI", "Close", "Sulkea");
 injectString("fr", "Close", "Fermer");
 injectString("fr-FR", "Close", "Fermer");
-injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("hu-HU", "Close", "Bez\xE1r\xE1s");
 injectString("id", "Close", "Tutup");
 injectString("it", "Close", "Chiudere");
 injectString("ja", "Close", "\u9589\u3058\u308B");
@@ -27,13 +27,13 @@ injectString("nl", "Close", "Sluiten");
 injectString("pl", "Close", "Zamknij");
 injectString("pt-BR", "Close", "Fechar");
 injectString("pt-PT", "Close", "Fechar");
-injectString("sk-SK", "Close", "Zatvor");
+injectString("sk-SK", "Close", "Zatvori\u0165");
 injectString("sv", "Close", "St\xE4ng");
 injectString("th", "Close", "\u0E1B\u0E34\u0E14");
 injectString("tr", "Close", "Kapat");
 injectString("zh-Hans", "Close", "\u5173\u95ED");
 injectString("zh-TW", "Close", "\u95DC\u9589");
-injectString("ro-RO", "Close", "\xCEnchide\u021Bi");
+injectString("ro-RO", "Close", "\xCEnchide");
 injectString("ar-SA", "Close", "\u0625\u063A\u0644\u0627\u0642");
 export const NonActionablePill = ({
   icon,