@geotab/zenith 3.10.0 → 3.11.0-beta.0

package/README.md

@@ -47,6 +47,35 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.11.0
+
+- Convert charts, summary, and analytics components to rem units
+- Convert pills, chips, and badges to rem units
+- Convert date, time, and calendar inputs to rem units
+- Convert form structure and stepper components to rem units
+- Convert modal, overlays, and popups to rem units
+- Convert navigation and menus to rem units
+- Convert filters, search, and column selector to rem units
+- Fix prop in nested row
+- Update typography CSS class names to avoid overlap with legacy classes
+- Fix dialog content scroll issue
+- Fix missing FileUploader drop zone translations in 25 locales
+- Fix mobile view table content showing double line
+- Fix calendar range showing incorrect edge
+- Fix `Toggle` ScreenReader not announcing label on hover
+- Fix `SideNav` nested `NavItem` keyboard navigation inside `NavSection`
+- Fix `TimePicker` showing incorrect time
+- Fix date range separator from hyphen to en dash
+- Fix table column truncation with minWidth/maxWidth support
+- Fix `SortControl` accessibility — remove redundant aria-label, add visually hidden sort direction text
+- Fix RTL popup alignment across components
+- Fix `RadioGroup` radio button misalignment for long option text
+- Fix `Dropdown` loading state persisting when static dataItems and isLoading change simultaneously
+- Restore `Select All` behavior for tables and cross-page selections
+- Fix `Nav` content gap
+- Fix keyboard accessibility in `SelectList` flexible columns popup — skip disabled items
+- Fix RTL directional icons to use counterpart icons instead of CSS flip
+
 ### 3.10.0
 
 - Add `wrap` and `vertical` props to `ListItem`

package/dist/calendar/calendar.js

@@ -823,6 +823,7 @@ const dateUtils_1 = require("./dateUtils");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRightSmall_1 = require("../icons/iconChevronRightSmall");
 const iconChevronLeftSmall_1 = require("../icons/iconChevronLeftSmall");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const parallelSelection_1 = require("../parallelSelection/parallelSelection");
 const calendarUtils_1 = require("./calendarUtils");
 const useLanguage_1 = require("../utils/localization/useLanguage");
@@ -853,6 +854,8 @@ const Calendar = ({
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
+  const PrevMonthIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeftSmall_1.IconChevronLeftSmall, iconChevronRightSmall_1.IconChevronRightSmall);
+  const NextMonthIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRightSmall_1.IconChevronRightSmall, iconChevronLeftSmall_1.IconChevronLeftSmall);
   const fromDate = (0, react_1.useMemo)(() => value.from ? (0, dateUtils_1.toDayStart)(value.from) : undefined, [value.from]);
   const toDate = (0, react_1.useMemo)(() => value.to ? (0, dateUtils_1.toDayStart)(value.to) : undefined, [value.to]);
   const driveClassName = (0, useDriveClassName_1.useDriveClassName)("zen-calendar");
@@ -1106,7 +1109,7 @@ const Calendar = ({
       children: [isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
         className: "zen-calendar__btn",
         type: "tertiary-black",
-        icon: iconChevronLeftSmall_1.IconChevronLeftSmall,
+        icon: PrevMonthIcon,
         title: translate("Previous month"),
         onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)),
         iconPosition: textIconButton_2.ButtonIconPosition.Start
@@ -1140,14 +1143,14 @@ const Calendar = ({
         children: [(0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           className: "zen-calendar__btn",
           type: "tertiary-black",
-          icon: iconChevronLeftSmall_1.IconChevronLeftSmall,
+          icon: PrevMonthIcon,
           title: translate("Previous month"),
           onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, -1)),
           iconPosition: textIconButton_2.ButtonIconPosition.Start
         }), (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
           className: "zen-calendar__btn",
           type: "tertiary-black",
-          icon: iconChevronRightSmall_1.IconChevronRightSmall,
+          icon: NextMonthIcon,
           title: translate("Next month"),
           onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)),
           iconPosition: textIconButton_2.ButtonIconPosition.Start
@@ -1155,7 +1158,7 @@ const Calendar = ({
       }) : null, isMobileView ? null : (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
         className: "zen-calendar__btn",
         type: "tertiary-black",
-        icon: iconChevronRightSmall_1.IconChevronRightSmall,
+        icon: NextMonthIcon,
         title: translate("Next month"),
         onClick: () => changeView((0, dateUtils_1.addMonth)(viewDate, 1)),
         iconPosition: textIconButton_2.ButtonIconPosition.Start

package/dist/card/components/title.js

@@ -7,6 +7,8 @@ const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useDrive_1 = require("../../utils/theme/useDrive");
 const iconChevronRightSmall_1 = require("../../icons/iconChevronRightSmall");
+const iconChevronLeftSmall_1 = require("../../icons/iconChevronLeftSmall");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const VALID_HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
 const Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick, titleAs }) => {
     const driveClassNames = (0, useDriveClassName_1.useDriveClassName)("zen-card-title");
@@ -14,7 +16,8 @@ const Title = ({ isMobile, link, target, title, id, icon, iconType, className =
     const iconClassName = iconType ? `zen-card-title__icon--${iconType}` : "";
     const iconSize = (0, react_1.useMemo)(() => (isDrive ? "huge" : "large"), [isDrive]);
     const iconElement = (0, react_1.useMemo)(() => (icon ? (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
-    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(iconChevronRightSmall_1.IconChevronRightSmall, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [iconSize]);
+    const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRightSmall_1.IconChevronRightSmall, iconChevronLeftSmall_1.IconChevronLeftSmall);
+    const chevron = (0, react_1.useMemo)(() => ((0, jsx_runtime_1.jsx)("span", { className: "zen-card-title__link-chevron", children: (0, jsx_runtime_1.jsx)(ChevronIcon, { size: iconSize, className: "zen-card-title__chevron-icon" }) })), [ChevronIcon, iconSize]);
     const titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
     if (onClick) {
         return ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: titleClasses, onClick: onClick, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: [title, chevron] })] }));

package/dist/card/components/titleLink.js

@@ -5,6 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
 const textIconButton_1 = require("../../textIconButton/textIconButton");
 const iconArrowRight_1 = require("../../icons/iconArrowRight");
+const iconArrowLeft_1 = require("../../icons/iconArrowLeft");
+const useDirectionalIcon_1 = require("../../utils/localization/useDirectionalIcon");
 const useDriveClassName_1 = require("../../utils/theme/useDriveClassName");
 const useMobile_1 = require("../../commonHelpers/hooks/useMobile");
 const useDrive_1 = require("../../utils/theme/useDrive");
@@ -14,9 +16,10 @@ const TitleLink = ({ titleIconClasses, ariaLabel, children, link, id, className
     const isMobile = (0, useMobile_1.useMobile)();
     const isDrive = (0, useDrive_1.useDrive)();
     const titleAriaLabel = ariaLabel || "";
+    const ArrowIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconArrowRight_1.IconArrowRight, iconArrowLeft_1.IconArrowLeft);
     if (!isMobile) {
-        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-link", "zen-title-link", className]), href: link, "aria-label": titleAriaLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }), (0, jsx_runtime_1.jsx)(iconArrowRight_1.IconArrowRight, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link__icon", titleIconClasses || ""]) })] }));
+        return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: (0, classNames_1.classNames)(["zen-link", "zen-title-link", className]), href: link, "aria-label": titleAriaLabel, children: [(0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }), (0, jsx_runtime_1.jsx)(ArrowIcon, { size: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link__icon", titleIconClasses || ""]) })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary", iconClasses: titleIconClasses, id: id, "aria-label": titleAriaLabel, link: link, iconPosition: textIconButton_1.ButtonIconPosition.End, icon: iconArrowRight_1.IconArrowRight, iconSize: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link", "zen-title-link__icon", titleLinkClasses || "", className || ""]), children: children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { type: "tertiary", iconClasses: titleIconClasses, id: id, "aria-label": titleAriaLabel, link: link, iconPosition: textIconButton_1.ButtonIconPosition.End, icon: ArrowIcon, iconSize: isDrive ? "huge" : "large", className: (0, classNames_1.classNames)(["zen-title-link", "zen-title-link__icon", titleLinkClasses || "", className || ""]), children: children && (0, jsx_runtime_1.jsx)("span", { className: (0, classNames_1.classNames)(["zen-title-link__text", titleLinkTextDriveClasses || ""]), children: children }) }));
 };
 exports.TitleLink = TitleLink;

package/dist/chart/barChart/getDefaultOptions.d.ts

@@ -1,5 +1,5 @@
 import { IYAxisMeta } from "../interfaces";
-export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string) => {
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boolean, isDark: boolean, translate: (s: string) => string, isRtl?: boolean) => {
     responsive: boolean;
     maintainAspectRatio: boolean;
     scales: {
@@ -10,6 +10,7 @@ export declare const getDefaultOptions: (yAxis: IYAxisMeta[], isTimedData: boole
             grid: {
                 display: boolean;
             };
+            reverse: boolean;
             type: string;
             ticks: {
                 source: string;

package/dist/chart/barChart/getDefaultOptions.js

@@ -10,8 +10,10 @@ const defaultGridBorderStyle = {
     display: false,
     dash: [2, 2]
 };
-const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
+const getDefaultOptions = (yAxis, isTimedData, isDark, translate, isRtl = false) => {
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const primaryYPosition = isRtl ? "right" : "left";
+    const secondaryYPosition = isRtl ? "left" : "right";
     const scales = {
         x: {
             title: {
@@ -20,6 +22,7 @@ const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "category",
             ticks: isTimedData
                 ? {
@@ -57,7 +60,7 @@ const getDefaultOptions = (yAxis, isTimedData, isDark, translate) => {
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/dist/chart/barChart.js

@@ -25,6 +25,7 @@ const classNames_1 = require("../commonHelpers/classNames/classNames");
 const legendPlugin_1 = require("./plugins/legend/legendPlugin");
 const chartAxis_1 = require("./chartAxis/chartAxis");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const isDateRange_1 = require("./utils/isDateRange");
 const getYAxisMeta_1 = require("./utils/getYAxisMeta");
 const getDefaultOptions_1 = require("./barChart/getDefaultOptions");
@@ -44,6 +45,7 @@ const BarChart = (_a) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const isMobile = (0, useMobile_1.useMobile)();
+    const isRtl = (0, useIsRTL_1.useIsRTL)();
     const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     (0, react_1.useEffect)(() => {
@@ -59,15 +61,15 @@ const BarChart = (_a) => {
     const isTimedData = (0, react_1.useMemo)(() => (0, isDateRange_1.isDateRange)(data, false), [data]);
     const isStacked = (0, react_1.useMemo)(() => { var _a, _b; return ((_b = (_a = options.scales) === null || _a === void 0 ? void 0 : _a.y) === null || _b === void 0 ? void 0 : _b.stacked) === true; }, [options]);
     const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(data, isStacked), [data, isStacked]);
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate), [yAxisMeta, isTimedData, dark, translate]);
+    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, isTimedData, dark, translate, isRtl), [yAxisMeta, isTimedData, dark, translate, isRtl]);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
     const chartData = (0, react_1.useMemo)(() => {
         const chData = (0, convertDates_1.convertDates)(data, toLocalDateTime);
         chData.datasets = chData.datasets.map((ds, i) => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds, i));
-        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i) })));
+        chData.datasets = chData.datasets.map((ds, i) => (Object.assign(Object.assign({}, ds), { hidden: isHidden(i), order: isRtl ? chData.datasets.length - 1 - i : i })));
         return chData;
-    }, [data, isHidden, toLocalDateTime]);
+    }, [data, isHidden, toLocalDateTime, isRtl]);
     const chartTooltip = (0, react_1.useMemo)(() => (0, tooltipPlugin_1.TooltipPlugin)(tooltipId, tooltip, "top", isHidden, dark), [tooltipId, tooltip, isHidden, dark]);
     const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, isHidden, legend, legendId, toggleHidden]);
     const chartPlugins = (0, react_1.useMemo)(() => [...(plugins || []), chartTooltip, chartLegend], [chartLegend, chartTooltip, plugins]);
@@ -75,6 +77,6 @@ const BarChart = (_a) => {
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
     const toggleMainData = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({ onToggle: toggleMainData, isEnabled: isMainHidden }, intSummary)) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Bar, Object.assign({ options: chartOptions, data: chartData, plugins: chartPlugins }, rest, { "aria-hidden": true })) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "bar", data: chartData, options: chartOptions })] }));
 };
 exports.BarChart = BarChart;

package/dist/chart/lineChart/getDefaultOptions.d.ts

@@ -1,5 +1,5 @@
 import { IXAxisMeta, IYAxisMeta } from "../interfaces";
-export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta, isTimedData: boolean, ticks: number, isDark: boolean, translate: (s: string) => string) => {
+export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta, isTimedData: boolean, ticks: number, isDark: boolean, translate: (s: string) => string, isRtl?: boolean) => {
     responsive: boolean;
     maintainAspectRatio: boolean;
     scales: {
@@ -10,6 +10,7 @@ export declare const getDefaultOptions: (yAxis: IYAxisMeta[], xAxis: IXAxisMeta,
             grid: {
                 display: boolean;
             };
+            reverse: boolean;
             type: string;
             time: {
                 unit: string;

package/dist/chart/lineChart/getDefaultOptions.js

@@ -47,9 +47,11 @@ const getFormatFromDateRange = (minDate, maxDate, ticks) => {
     }
     return { unit: "millisecond", format: "HH:mm:ss.l" };
 };
-const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate) => {
+const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate, isRtl = false) => {
     const time = getFormatFromDateRange(xAxis.minDate, xAxis.maxDate, ticks);
     const textColor = isDark ? "#C0CCD8" : "#4E677E";
+    const primaryYPosition = isRtl ? "right" : "left";
+    const secondaryYPosition = isRtl ? "left" : "right";
     const scales = {
         x: {
             title: {
@@ -58,6 +60,7 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate)
             grid: {
                 display: false
             },
+            reverse: isRtl,
             type: isTimedData ? "time" : "linear",
             time: isTimedData
                 ? {
@@ -104,7 +107,7 @@ const getDefaultOptions = (yAxis, xAxis, isTimedData, ticks, isDark, translate)
             border: defaultGridBorderStyle,
             min: yAxis[i].min,
             max: yAxis[i].max,
-            position: i === 0 ? "left" : "right"
+            position: i === 0 ? primaryYPosition : secondaryYPosition
         };
     }
     return {

package/dist/chart/lineChart.js

@@ -34,6 +34,7 @@ const getDefaultOptions_1 = require("./lineChart/getDefaultOptions");
 const useHidden_1 = require("./utils/useHidden");
 const linePlugin_1 = require("./plugins/linePlugin/linePlugin");
 const useLanguage_1 = require("../utils/localization/useLanguage");
+const useIsRTL_1 = require("../utils/localization/useIsRTL");
 const useChartTicks_1 = require("./lineChart/useChartTicks");
 const chartInsight_1 = require("./chartInsight/chartInsight");
 const getXAxisMeta_1 = require("./utils/getXAxisMeta");
@@ -46,6 +47,7 @@ const LineChart = (_a) => {
     const { translate } = (0, useLanguage_1.useLanguage)();
     const isDrive = (0, useDrive_1.useDrive)();
     const isMobile = (0, useMobile_1.useMobile)();
+    const isRtl = (0, useIsRTL_1.useIsRTL)();
     const fontSize = (0, react_1.useMemo)(() => (isDrive ? (isMobile ? 14 : 16) : 12), [isDrive, isMobile]);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
     (0, react_1.useEffect)(() => {
@@ -76,7 +78,7 @@ const LineChart = (_a) => {
     const yAxisMeta = (0, react_1.useMemo)(() => (0, getYAxisMeta_1.getYAxisMeta)(chartData), [chartData]);
     const xAxisMeta = (0, react_1.useMemo)(() => (0, getXAxisMeta_1.getXAxisMeta)(chartData, isTimedData), [chartData, isTimedData]);
     const { chartRef, ticks } = (0, useChartTicks_1.useChartTicks)();
-    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate]);
+    const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate, isRtl), [yAxisMeta, xAxisMeta, isTimedData, ticks, dark, translate, isRtl]);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
     const chartTooltip = (0, react_1.useMemo)(() => (0, linePlugin_1.LinePlugin)(tooltipId, tooltip, dark), [tooltip, tooltipId, dark]);
     const chartLegend = (0, react_1.useMemo)(() => (0, legendPlugin_1.legendPlugin)(legendId, legend, isDrive, isHidden, toggleHidden), [isDrive, legend, legendId, isHidden, toggleHidden]);
@@ -85,6 +87,6 @@ const LineChart = (_a) => {
     const intSummary = (0, useSummary_1.useSummary)(summary, chartData);
     const isMainHidden = (0, react_1.useMemo)(() => isHidden(0), [isHidden]);
     const toggleMainDataset = (0, react_1.useCallback)(() => toggleHidden(0), [toggleHidden]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? (0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels }) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-chart", className || ""]), ref: chartRef, children: [insight ? (0, jsx_runtime_1.jsx)(chartInsight_1.ChartInsight, Object.assign({}, insight)) : null, summary !== false ? (0, jsx_runtime_1.jsx)(summary_1.Summary, Object.assign({}, intSummary, { onToggle: toggleMainDataset, isEnabled: isMainHidden })) : null, (isDrive ? undefined : xLabels) || yLabels.length > 0 ? ((0, jsx_runtime_1.jsx)(chartAxis_1.ChartAxis, { xLabel: isDrive ? undefined : xLabels, yLabels: yLabels, yAxisPosition: isRtl ? "left" : "right" })) : null, (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__chart", children: (0, jsx_runtime_1.jsx)(typedCharts_1.Line, Object.assign({ width: 100, height: 100, options: chartOptions, data: chartData, plugins: chartPlugins, "aria-hidden": true }, rest)) }), (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__legend", id: legendId }), isDrive && xLabels ? (0, jsx_runtime_1.jsx)("div", { className: "zen-chart__x-axis", children: xLabels }) : null, (0, jsx_runtime_1.jsx)(accessibleChart_1.AccessibleChart, { type: "line", data: chartData, options: chartOptions })] }));
 };
 exports.LineChart = LineChart;

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -120,6 +120,8 @@ injectString("ar-SA", "Has additional actions. Use right arrow to access button,
 const checkbox_1 = require("../checkbox/checkbox");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
+const iconChevronLeft_1 = require("../icons/iconChevronLeft");
+const useDirectionalIcon_1 = require("../utils/localization/useDirectionalIcon");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const useDriveClassName_1 = require("../utils/theme/useDriveClassName");
 const CheckboxListWithAction = ({
@@ -135,6 +137,7 @@ const CheckboxListWithAction = ({
     translate
   } = (0, useLanguage_1.useLanguage)();
   const driveComponentClass = (0, useDriveClassName_1.useDriveClassName)("zen-checkbox-list-with-action");
+  const ChevronIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
   const listId = (0, react_1.useId)();
   const checkboxId = `${listId}_check_list-item_`;
   const navigationInstructionsId = `${listId}_navigation_instructions`;
@@ -369,7 +372,7 @@ const CheckboxListWithAction = ({
       })), (0, jsx_runtime_1.jsxs)("div", Object.assign({
         className: "zen-checkbox-list-with-action__label-info"
       }, otherArgs, {
-        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && (0, jsx_runtime_1.jsx)(ChevronIcon, {
           size: "large"
         })]
       }))]

package/dist/commonHelpers/arrowNavigation/components/arrowButton/arrowButton.js

@@ -7,10 +7,13 @@ const button_1 = require("../../../../button/button");
 const iconChevronLeft_1 = require("../../../../icons/iconChevronLeft");
 const iconChevronRight_1 = require("../../../../icons/iconChevronRight");
 const useDrive_1 = require("../../../../utils/theme/useDrive");
+const useDirectionalIcon_1 = require("../../../../utils/localization/useDirectionalIcon");
 const svgIconSize_1 = require("../../../../svgIcon/svgIconSize");
 const ArrowNavButton = ({ value, isHidden, disabled, className, arrowButtonHandler, onMouseDown, onMouseUp }) => {
     const isDrive = (0, useDrive_1.useDrive)();
     const iconSize = isDrive ? (0, svgIconSize_1.driveIconSize)("large") : "large";
-    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.classNames)(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? ((0, jsx_runtime_1.jsx)(iconChevronLeft_1.IconChevronLeft, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
+    const LeftIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronLeft_1.IconChevronLeft, iconChevronRight_1.IconChevronRight);
+    const RightIcon = (0, useDirectionalIcon_1.useDirectionalIcon)(iconChevronRight_1.IconChevronRight, iconChevronLeft_1.IconChevronLeft);
+    return ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "tertiary-black", className: (0, classNames_1.classNames)(["zen-arrow-nav-button", isHidden ? "zen-arrow-nav-button--invisible" : "", className !== null && className !== void 0 ? className : ""]), "aria-label": value, disabled: disabled, onClick: arrowButtonHandler, "data-action": value, onMouseDown: onMouseDown, onMouseUp: onMouseUp, children: value === "left" ? ((0, jsx_runtime_1.jsx)(LeftIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) : ((0, jsx_runtime_1.jsx)(RightIcon, { size: iconSize, className: "zen-arrow-nav-button__icon" })) }));
 };
 exports.ArrowNavButton = ArrowNavButton;

package/dist/commonStyles/pillStyles/pillContent.less

@@ -1,7 +1,6 @@
 @import "../common.less";
-@import "../typography/typography.less";
 
-@pill-min-width-default: 30px;
+@pill-min-width-default: (30 / @rem);
 @pill-max-width-default: 200px;
 
 // TODO: update to .zen-pill-content after old pill component removed remove
@@ -10,16 +9,16 @@
     @pill-height--drive: 34px;
     @pill-height--mobile: 34px;
 
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     align-items: center;
     justify-content: space-between;
-    border-radius: 30px;
+    border-radius: (30 / @rem);
     height: @pill-height;
     display: grid;
     grid-auto-flow: column;
 
-    gap: 8px;
+    gap: (8 / @rem);
 
     &--icon-left {
         grid-template-columns: 12px 1fr;
@@ -38,18 +37,18 @@
 
         &.zen-pill-new-content--empty {
             grid-template-columns: 12px 18px;
-            gap: 8px;
+            gap: (8 / @rem);
         }
     }
 
     &--hidden {
-        gap: 4px;
+        gap: (4 / @rem);
     }
     &.zen-pill-new-content--drive,
     &.zen-pill-new-content--drive-tablet {
         height: @pill-height--drive;
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -67,15 +66,15 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--mobile {
         height: @pill-height--mobile;
-        .body-m-400-short();
+        .zen-body-m-400-short();
         .zen-pill-non-actionable__icon {
-            min-width: 16px;
+            min-width: (16 / @rem);
             max-width: 16px;
             height: 16px;
         }
@@ -93,14 +92,14 @@
 
             &.zen-pill-new-content--empty {
                 grid-template-columns: 16px 22px;
-                gap: 8px;
+                gap: (8 / @rem);
             }
         }
     }
     &.zen-pill-new-content--drive {
-        .body-04-mobile-drive();
+        .zen-body-04-drive();
     }
     &.zen-pill-new-content--drive-tablet {
-        .body-04-tablet-drive();
+        .zen-body-04-drive();
     }
 }

package/dist/commonStyles/pillStyles/pillStyles.less

@@ -1,13 +1,12 @@
-@import "../typography/typography.less";
-@import "../colors/colors.less";
+@import "../common.less";
 
 .zen-pill-content {
-    .body-04();
+    .zen-body-s-400();
     display: flex;
     color: var(--text-primary);
     align-items: center;
     justify-content: space-between;
-    padding: 4px 12px 4px 12px;
-    border-radius: 30px;
+    padding: (4 / @rem) (12 / @rem) (4 / @rem) (12 / @rem);
+    border-radius: (30 / @rem);
     background: var(--backgrounds-content-1);
 }

package/dist/commonStyles/pillStyles/pillTextContent.less

@@ -12,9 +12,9 @@
         height: 20px;
     }
     &.zen-pill-text-content--drive {
-        .body-04-mobile-drive();
+        .zen-body-04-drive();
     }
     &.zen-pill-text-content--drive-tablet {
-        .body-04-tablet-drive();
+        .zen-body-04-drive();
     }
 }