@geotab/zenith 3.9.0 → 3.9.1-nightly.20260508.59e6da4

package/README.md

@@ -47,6 +47,10 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.9.1
+
+- Fix `GroupsButton` styles
+
 ### 3.9.0
 
 - Added basic SSR (server-side rendering) support

package/dist/bookmark/bookmark.d.ts

@@ -3,6 +3,7 @@ import { IZenComponentProps } from "../commonHelpers/zenComponent";
 export interface IBookmark extends IZenComponentProps {
     bookmarked: boolean;
     onChange: (bookmarkState: boolean) => void;
+    dataAnalyticsId?: string;
 }
-export declare const Bookmark: ({ className, bookmarked, onChange }: IBookmark) => import("react/jsx-runtime").JSX.Element;
+export declare const Bookmark: ({ className, bookmarked, onChange, dataAnalyticsId }: IBookmark) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];

package/dist/bookmark/bookmark.js

@@ -75,7 +75,8 @@ const iconBookmarkSelectedHover_1 = require("../icons/iconBookmarkSelectedHover"
 const Bookmark = ({
   className,
   bookmarked,
-  onChange
+  onChange,
+  dataAnalyticsId
 }) => {
   const [isHovered, setIsHovered] = (0, react_1.useState)(false);
   const {
@@ -108,7 +109,8 @@ const Bookmark = ({
       iconSize: isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large",
       iconClasses: `zen-page-bookmark__icon zen-page-bookmark__icon${bookmarked ? "--active" : "--inactive"}`,
       "aria-label": title,
-      title: title
+      title: title,
+      dataAnalyticsId: dataAnalyticsId
     })
   });
 };

package/dist/dataFeed/hooks/useVisibleColumns.js

@@ -10,7 +10,7 @@ const useVisibleColumns = (columnsList, expanded, options) => {
         secondaryColumns = expanded ? columnsList.slice(visibleColumns) : [];
         return { mainColumns, secondaryColumns };
     }
-    mainColumns = columnsList.slice(0, columnsList.length - collapsedColumnsQty);
+    mainColumns = columnsList.slice(0, Math.max(1, columnsList.length - collapsedColumnsQty));
     secondaryColumns = expanded ? columnsList.slice(mainColumns.length) : [];
     return { mainColumns, secondaryColumns };
 };

package/dist/dataGrid/extensions/toBasicColumn.js

@@ -9,8 +9,9 @@ const DEFAULT_META = {
     visibleOnHover: false
 };
 const toBasicColumn = (column) => {
+    var _a;
     const defaultColumn = (0, defaultColumnComponent_1.defaultColumnComponent)(column.id);
     const columnComponent = column.columnComponent || defaultColumn;
-    return Object.assign(Object.assign({}, column), { name: column.name || column.id || "", meta: Object.assign(Object.assign({}, DEFAULT_META), (column.meta || {})), columnComponent: columnComponent, wrappers: column.wrappers || [], colspan: column.colspan || 1 });
+    return Object.assign(Object.assign({}, column), { name: column.name || column.id || "", meta: Object.assign(Object.assign({}, DEFAULT_META), (column.meta || {})), columnComponent: columnComponent, wrappers: column.wrappers || [], alwaysVisible: (_a = column.alwaysVisible) !== null && _a !== void 0 ? _a : false, colspan: column.colspan || 1 });
 };
 exports.toBasicColumn = toBasicColumn;

package/dist/dataGrid/listColumn.d.ts

@@ -17,6 +17,7 @@ export interface IListColumn<T, N = T> {
     meta?: IListColumnMeta<T, N>;
     columnComponent?: IColumnComponent<T, N>;
     wrappers?: IListColumnWrapper<T, N>[];
+    alwaysVisible?: boolean;
     colspan?: undefined | number | ((entity: T | N) => number | undefined);
 }
 export type TRenderResult = ReactNode | PromiseLike<ReactNode | undefined> | undefined;

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.d.ts

@@ -6,10 +6,10 @@ import { IRowEntity } from "../../row/row";
 interface IColumnSettingsList<T extends IRowEntity<T>> extends IZenComponentProps {
     columns: IListFlexibleColumnStrict<T, T>[];
     settings: Map<string, boolean>;
-    firstColumn: string;
+    disabledColumns?: string[];
     onChange?: (newState: Map<string, boolean>) => void;
     sortGroups?: (a: string, b: string) => number;
     sortColumns?: (a: string, b: string) => number;
 }
-export declare function ColumnSettingsList<T extends IRowEntity<T> & IColumnsGroup>({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }: IColumnSettingsList<T>): import("react/jsx-runtime").JSX.Element[];
+export declare function ColumnSettingsList<T extends IRowEntity<T> & IColumnsGroup>({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }: IColumnSettingsList<T>): import("react/jsx-runtime").JSX.Element[];
 export {};

package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const groupColumns_1 = require("../../extensions/groupColumns");
 const selectList_1 = require("../../../selectList/selectList");
 const checkboxState_1 = require("../../../checkbox/checkboxState");
-const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortColumns }) => {
+const SubColumnsList = ({ title, columns, settings, disabledColumns, onChange, sortColumns }) => {
     const id = (0, react_1.useId)();
     const sortColumnsInt = (0, react_1.useCallback)((a, b) => {
         if (sortColumns) {
@@ -17,10 +17,10 @@ const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortC
     const items = (0, react_1.useMemo)(() => columns.sort(sortColumnsInt).map(c => ({
         id: c.id,
         title: c.title,
-        disabled: c.name === firstColumn,
+        disabled: (disabledColumns === null || disabledColumns === void 0 ? void 0 : disabledColumns.includes(c.name)) || false,
         showCheckbox: true,
         children: c.title
-    })), [columns, firstColumn, sortColumnsInt]);
+    })), [columns, disabledColumns, sortColumnsInt]);
     const state = columns.reduce((res, c) => {
         res.set(c.id, settings.get(c.name) !== false ? checkboxState_1.CheckboxState.On : checkboxState_1.CheckboxState.Off);
         return res;
@@ -39,7 +39,7 @@ const SubColumnsList = ({ title, columns, settings, firstColumn, onChange, sortC
     }
     return ((0, jsx_runtime_1.jsxs)("div", { className: "zen-columns-list__sub-section", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-columns-list__title zen-ellipsis", children: title }), list] }));
 };
-function ColumnSettingsList({ columns, settings, firstColumn, onChange, sortGroups, sortColumns }) {
+function ColumnSettingsList({ columns, settings, disabledColumns, onChange, sortGroups, sortColumns }) {
     const groupped = (0, groupColumns_1.groupColumns)(columns);
     const sortGroupsInt = (0, react_1.useCallback)((a, b) => {
         if (sortGroups) {
@@ -49,6 +49,6 @@ function ColumnSettingsList({ columns, settings, firstColumn, onChange, sortGrou
     }, [sortGroups]);
     return Array.from(groupped.entries())
         .sort(sortGroupsInt)
-        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, firstColumn: firstColumn, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
+        .map(([title, cs]) => ((0, jsx_runtime_1.jsx)(SubColumnsList, { title: title, columns: cs, settings: settings, disabledColumns: disabledColumns, onChange: onChange, sortColumns: sortColumns }, cs.map(c => c.id).join("-"))));
 }
 exports.ColumnSettingsList = ColumnSettingsList;

package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js

@@ -13,6 +13,7 @@ const flexibleColumnWrapper_1 = require("./columns/flexibleColumnWrapper");
 const columnSettings_1 = require("./components/columnSettings");
 const columnSettingsList_1 = require("./components/columnSettingsList");
 const columnSettingsSidePanel_1 = require("./components/columnSettingsSidePanel");
+const emptySearchList_1 = require("../emptySearchList/emptySearchList");
 const zen_1 = require("../../utils/zen");
 // T - type of entity
 // P - props of wrapped component
@@ -25,6 +26,7 @@ const withFlexibleColumns = (DataGridComponent) => {
         const [isPanelOpen, setIsPanelOpen] = (0, react_1.useState)(false);
         const allColumns = (0, react_1.useMemo)(() => columns.map(column => (Object.assign(Object.assign({}, (0, toBasicColumn_1.toBasicColumn)(Object.assign({}, column))), { visible: column.visible !== false, group: column.group || "" }))), [columns]);
         const columnsSettings = (0, react_1.useMemo)(() => (0, flexibleColumnsStorage_1.mergeColumnsSettings)(allColumns, options.columnsSettings || settingsStore.getItem()), [allColumns, options.columnsSettings, settingsStore]);
+        const hasConfigurableColumns = (0, react_1.useMemo)(() => allColumns.filter(c => c.title).some(c => !c.alwaysVisible), [allColumns]);
         const visibleColumns = (0, react_1.useMemo)(() => {
             const visibleColumnsMap = new Map(allColumns.map(c => [c.name, c]));
             return columnsSettings
@@ -66,10 +68,12 @@ const withFlexibleColumns = (DataGridComponent) => {
             }, 0);
         }), [settingsStore]);
         const listOfColumns = (0, react_1.useMemo)(() => {
-            var _a;
-            const firstColumn = (((_a = visibleColumns[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
+            const configurableColumnNames = new Set(allColumns.filter(c => c.title).map(c => c.name));
+            const visibleConfigurableSettings = columnsSettings.filter(s => s.visible && configurableColumnNames.has(s.name));
+            const lastVisibleColumn = visibleConfigurableSettings.length === 1 ? [visibleConfigurableSettings[0].name] : [];
+            const disabledColumns = [...allColumns.filter(c => c.alwaysVisible).map(c => c.name), ...lastVisibleColumn];
             const columnSettingsMap = new Map(columnsSettings.map(s => [s.name, s.visible]));
-            return ((0, jsx_runtime_1.jsx)(columnSettingsList_1.ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, firstColumn: firstColumn, onChange: async (newSettings) => {
+            return ((0, jsx_runtime_1.jsx)(columnSettingsList_1.ColumnSettingsList, { columns: allColumns.filter(c => c.title), settings: columnSettingsMap, disabledColumns: disabledColumns, onChange: async (newSettings) => {
                     const settings = columnsSettings.map(s => {
                         const visible = newSettings.get(s.name) !== false;
                         return Object.assign(Object.assign({}, s), { visible });
@@ -77,7 +81,7 @@ const withFlexibleColumns = (DataGridComponent) => {
                     await saveSettingsToTheStore(settings);
                     onChangeSettings(settings);
                 }, sortGroups: sortGroups, sortColumns: sortColumns }));
-        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, visibleColumns, sortGroups, sortColumns]);
+        }, [columnsSettings, allColumns, saveSettingsToTheStore, onChangeSettings, sortGroups, sortColumns]);
         const onReorderListener = (0, react_1.useCallback)(async ([from, to]) => {
             if (from === to) {
                 return;
@@ -137,10 +141,15 @@ const withFlexibleColumns = (DataGridComponent) => {
             onResetSettings();
             setIsPanelOpen(false);
         }, [onResetSettings, saveSettingsToTheStore]);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && visibleColumns.length > 0 ? (options.isFeed ? ((0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : ((0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, (0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid")] }));
+        (0, react_1.useEffect)(() => {
+            if (popupTriggerRef === null || popupTriggerRef === void 0 ? void 0 : popupTriggerRef.current) {
+                popupTriggerRef.current.style.display = hasConfigurableColumns ? "" : "none";
+            }
+        }, [popupTriggerRef, hasConfigurableColumns]);
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [popupTriggerRef && hasConfigurableColumns ? (options.isFeed ? ((0, jsx_runtime_1.jsx)(columnSettingsSidePanel_1.ColumnSettingsSidePanel, { triggerRef: popupTriggerRef, isOpen: isPanelOpen, onOpen: () => setIsPanelOpen(true), onClose: () => setIsPanelOpen(false), onReset: onResetListener, children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, showFooter: false, children: listOfColumns }) })) : ((0, jsx_runtime_1.jsx)(popup_1.Popup, { triggerRef: popupTriggerRef, alignment: "bottom-right", children: (0, jsx_runtime_1.jsx)(columnSettings_1.ColumnSettings, { onReset: onResetListener, children: listOfColumns }) }, "flexible-popup"))) : null, visibleColumns.length === 0 && hasConfigurableColumns ? ((0, jsx_runtime_1.jsx)("div", { className: "zen-data-grid__empty", children: (0, jsx_runtime_1.jsx)(emptySearchList_1.EmptySearchList, {}) })) : ((0, jsx_runtime_1.jsx)(DataGridComponent, Object.assign({}, props, { columns: [...visibleColumns], ref: gridRef }), "grid"))] }));
     };
     FlexibleColumnsComponent.displayName = `withFlexibleColumns(${DataGridComponent.displayName || DataGridComponent.name || "Component"})`;
     return FlexibleColumnsComponent;
 };
 exports.withFlexibleColumns = withFlexibleColumns;
-exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations];
+exports.withFlexibleColumns.translations = [...columnSettings_1.ColumnSettings.translations, ...columnSettingsSidePanel_1.ColumnSettingsSidePanel.translations, ...emptySearchList_1.EmptySearchList.translations];

package/dist/icons/iconAlignLeft.js

@@ -4,9 +4,11 @@ exports.IconAlignLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconAlignLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconAlignLeft = IconAlignLeft;

package/dist/icons/iconAlignmentLeft.js

@@ -4,9 +4,11 @@ exports.IconAlignmentLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconAlignmentLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconAlignmentLeft = IconAlignmentLeft;

package/dist/icons/iconAlignmentRight.js

@@ -4,9 +4,11 @@ exports.IconAlignmentRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconAlignmentRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconAlignmentRight = IconAlignmentRight;

package/dist/icons/iconArrowBottomLeft.js

@@ -4,9 +4,11 @@ exports.IconArrowBottomLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowBottomLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowBottomLeft = IconArrowBottomLeft;

package/dist/icons/iconArrowBottomRight.js

@@ -4,9 +4,11 @@ exports.IconArrowBottomRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowBottomRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowBottomRight = IconArrowBottomRight;

package/dist/icons/iconArrowLeftPath.js

@@ -4,9 +4,11 @@ exports.IconArrowLeftPath = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowLeftPath = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowLeftPath = IconArrowLeftPath;

package/dist/icons/iconArrowRight.js

@@ -4,9 +4,11 @@ exports.IconArrowRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowRight = IconArrowRight;

package/dist/icons/iconArrowRightCircle.js

@@ -4,9 +4,11 @@ exports.IconArrowRightCircle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowRightCircle = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowRightCircle = IconArrowRightCircle;

package/dist/icons/iconArrowRightPath.js

@@ -4,9 +4,11 @@ exports.IconArrowRightPath = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowRightPath = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowRightPath = IconArrowRightPath;

package/dist/icons/iconArrowTopLeft.js

@@ -4,9 +4,11 @@ exports.IconArrowTopLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowTopLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowTopLeft = IconArrowTopLeft;

package/dist/icons/iconArrowTopRight.js

@@ -4,9 +4,11 @@ exports.IconArrowTopRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconArrowTopRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconArrowTopRight = IconArrowTopRight;

package/dist/icons/iconChevronDoubleRight.js

@@ -4,9 +4,11 @@ exports.IconChevronDoubleRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconChevronDoubleRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconChevronDoubleRight = IconChevronDoubleRight;

package/dist/icons/iconChevronRight.js

@@ -4,9 +4,11 @@ exports.IconChevronRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconChevronRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconChevronRight = IconChevronRight;

package/dist/icons/iconChevronRightSmall.js

@@ -4,9 +4,11 @@ exports.IconChevronRightSmall = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconChevronRightSmall = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconChevronRightSmall = IconChevronRightSmall;

package/dist/icons/iconCornerDownLeft.js

@@ -4,9 +4,11 @@ exports.IconCornerDownLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerDownLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerDownLeft = IconCornerDownLeft;

package/dist/icons/iconCornerDownRight.js

@@ -4,9 +4,11 @@ exports.IconCornerDownRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerDownRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerDownRight = IconCornerDownRight;

package/dist/icons/iconCornerLeftDown.js

@@ -4,9 +4,11 @@ exports.IconCornerLeftDown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerLeftDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerLeftDown = IconCornerLeftDown;

package/dist/icons/iconCornerLeftUp.js

@@ -4,9 +4,11 @@ exports.IconCornerLeftUp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerLeftUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerLeftUp = IconCornerLeftUp;

package/dist/icons/iconCornerRightDown.js

@@ -4,9 +4,11 @@ exports.IconCornerRightDown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerRightDown = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerRightDown = IconCornerRightDown;

package/dist/icons/iconCornerRightUp.js

@@ -4,9 +4,11 @@ exports.IconCornerRightUp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerRightUp = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerRightUp = IconCornerRightUp;

package/dist/icons/iconCornerUpLeft.js

@@ -4,9 +4,11 @@ exports.IconCornerUpLeft = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerUpLeft = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerUpLeft = IconCornerUpLeft;

package/dist/icons/iconCornerUpRight.js

@@ -4,9 +4,11 @@ exports.IconCornerUpRight = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconCornerUpRight = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconCornerUpRight = IconCornerUpRight;

package/dist/icons/iconLayoutSidebar.js

@@ -4,9 +4,11 @@ exports.IconLayoutSidebar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const IconLayoutSidebar = ({ className, size, title, description, focusable = false }) => {
     const uniqueId = (0, react_1.useId)();
-    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    const isRTL = (0, useIsRTL_1.useIsRTL)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", isRTL ? "zen-icon--rtl" : "", className !== null && className !== void 0 ? className : ""]), [size, isRTL, className]);
     return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
 };
 exports.IconLayoutSidebar = IconLayoutSidebar;

package/dist/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/dist/icons/iconPinFilled.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconPinFilled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../commonHelpers/classNames/classNames");
+const IconPinFilled = ({ className, size, title, description, focusable = false }) => {
+    const uniqueId = (0, react_1.useId)();
+    const classes = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-icon", size ? `zen-icon--${size}` : "", className !== null && className !== void 0 ? className : ""]), [size, className]);
+    return ((0, jsx_runtime_1.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 ? (0, jsx_runtime_1.jsx)("title", { id: uniqueId, children: title }) : null, description ? (0, jsx_runtime_1.jsx)("desc", { children: description }) : null, (0, jsx_runtime_1.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" })] }));
+};
+exports.IconPinFilled = IconPinFilled;