@geotab/zenith 3.10.0-beta.1 → 3.10.0-beta.2

package/README.md

@@ -56,12 +56,15 @@ Zenith library provides components defined in Zenith Design System. It includes
 - Allow multiple columns to be disabled in `ColumnsList`
 - Flip icons for Arabic (RTL) language
 - `Dropdown` search and select-all improvements
-- Fix system font fallback in Storybook pages
-- [MYG-128651](https://geotab.atlassian.net/browse/MYG-128651): Update Zenith beta pill parameters to take optional custom text
-- Increase max height of zen popup
-- [MYG-128520](https://geotab.atlassian.net/browse/MYG-128520): Fix SidePanel not animating open due to RTL regression
-- [MYG-121631](https://geotab.atlassian.net/browse/MYG-121631): Add `closeOnScroll` prop to close `ContextMenu` on scroll
-- [MYG-123578](https://geotab.atlassian.net/browse/MYG-123578): Fix checkbox accessibility by moving input inside label wrapper
+- Fix `SidePanel` not animating open due to RTL regression
+- Add `closeOnScroll` prop to close `ContextMenu` on scroll
+- Fix checkbox accessibility by moving input inside label wrapper
+- Fix multi-page selection in `Table` selectable rows
+- Add `titleAs` prop to `Card` title to control heading tag (`h1`–`h6`)
+
+### 3.9.2
+
+- Fix `ControlledPopup` max-height
 
 ### 3.9.1
 

package/dist/betaPill/betaPill.d.ts

@@ -6,21 +6,26 @@ export interface IBetaPillActions {
     link?: string;
     linkOptions?: ILinkOptions;
 }
+/**
+ * @internal - temporary escape hatch
+ * @deprecated
+ */
+export interface IBetaPillBaseInternal {
+    name?: string;
+    description?: string;
+}
 interface IBetaPillBase {
     className?: string;
-    name?: string;
 }
 interface IBetaPillWithActions extends IBetaPillBase {
     feedbackAction?: IBetaPillActions;
     betaOptionAction?: IBetaPillActions;
-    description?: string;
 }
 interface IBetaPillWithoutActions extends IBetaPillBase {
     feedbackAction?: never;
     betaOptionAction?: never;
-    description?: never;
 }
 export type IBetaPill = IBetaPillWithActions | IBetaPillWithoutActions;
-export declare const BetaPill: ({ className, feedbackAction, betaOptionAction, name, description }: IBetaPill) => import("react/jsx-runtime").JSX.Element;
+export declare const BetaPill: (props: IBetaPill) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};

package/dist/betaPill/betaPill.js

@@ -124,13 +124,14 @@ injectString("zh-Hans", "Beta", "\u6D4B\u8BD5\u7248");
 injectString("zh-TW", "Beta", "\u6E2C\u8A66\u7248");
 injectString("ro-RO", "Beta", "Beta");
 injectString("ar-SA", "Beta", "\u062A\u062C\u0631\u064A\u0628\u064A");
-const BetaPill = ({
-  className,
-  feedbackAction,
-  betaOptionAction,
-  name,
-  description
-}) => {
+const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();

package/dist/card/card.d.ts

@@ -1,7 +1,7 @@
 import React, { FC, FunctionComponent, ReactNode } from "react";
 import { IAbsoluteSize, TContainerSize } from "../cardContainer/cardContainer";
 import { TCardStatus } from "./components/status";
-import { TIconType } from "./components/title";
+import { THeadingTag, TIconType } from "./components/title";
 import { IActions } from "./components/actions";
 import { IContent } from "./components/content";
 import "./card.less";
@@ -42,6 +42,7 @@ export interface ICard extends IZenComponentProps, IZenGridItem, IZenFormLayoutI
     scrollableContent?: boolean;
     autoHeight?: boolean;
     fullHeight?: boolean;
+    titleAs?: THeadingTag;
 }
 export declare const Card: FC<ICard> & {
     Actions: FC<IActions>;

package/dist/card/card.js

@@ -121,7 +121,8 @@ props => {
     fullWidth,
     scrollableContent = true,
     autoHeight = false,
-    fullHeight = false
+    fullHeight = false,
+    titleAs
   } = props;
   const {
     translate
@@ -281,7 +282,8 @@ props => {
           isMobile: isMobile,
           title: title,
           icon: titleIcon,
-          iconType: titleIconType
+          iconType: titleIconType,
+          titleAs: titleAs
         }), (0, jsx_runtime_1.jsxs)("div", {
           className: "zen-card__header-right",
           children: [!!headerActions.length && headerActions, date ? (0, jsx_runtime_1.jsx)("span", {

package/dist/card/components/title.d.ts

@@ -2,6 +2,7 @@ import { FunctionComponent } from "react";
 import "./title.less";
 import { IIcon } from "../../icons/icon";
 export type TIconType = "info" | "warning" | "error" | "success" | "default";
+export type THeadingTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 interface ITitle {
     isMobile: boolean;
     title: string;
@@ -12,6 +13,7 @@ interface ITitle {
     icon?: FunctionComponent<IIcon>;
     iconType?: TIconType;
     onClick?: () => void;
+    titleAs?: THeadingTag;
 }
-export declare const Title: ({ isMobile, link, target, title, id, icon, iconType, className, onClick }: ITitle) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: ({ isMobile, link, target, title, id, icon, iconType, className, onClick, titleAs }: ITitle) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/card/components/title.js

@@ -7,12 +7,13 @@ 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 Title = ({ isMobile, link, target, title, id, icon, iconType, className = "", onClick }) => {
+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");
     const isDrive = (0, useDrive_1.useDrive)();
     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)("div", { className: (0, classNames_1.classNames)(["zen-card-title__icon", iconClassName]), children: (0, react_1.createElement)(icon, { size: iconSize }) }) : null), [icon, iconSize, iconClassName]);
+    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 titleClasses = (0, classNames_1.classNames)(["zen-card-title", driveClassNames || "", onClick ? "zen-card-title__clickable" : ""]);
     if (onClick) {
@@ -21,6 +22,7 @@ const Title = ({ isMobile, link, target, title, id, icon, iconType, className =
     if (link) {
         return ((0, jsx_runtime_1.jsxs)("a", { id: id, className: titleClasses, href: link, target: target, children: [iconElement, (0, jsx_runtime_1.jsxs)("span", { title: title, className: (0, classNames_1.classNames)(["zen-card-title__link-text"]), children: [title, chevron] })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: titleClasses, children: [iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title })] }));
+    const tag = titleAs && VALID_HEADING_TAGS.has(titleAs) ? titleAs : "div";
+    return (0, react_1.createElement)(tag, { className: titleClasses }, iconElement, (0, jsx_runtime_1.jsx)("span", { title: title, id: id, className: (0, classNames_1.classNames)(["zen-card-title__text", isMobile && !isDrive ? "zen-card-title__text--mobile" : "", className]), children: title }, "text"));
 };
 exports.Title = Title;

package/dist/checkboxListWithAction/checkboxListWithAction.js

@@ -379,7 +379,8 @@ const CheckboxListWithAction = ({
       onClick: handleClick,
       title: title,
       className: classN,
-      tabIndex: -1
+      tabIndex: -1,
+      disabled: option.blocked
     }, otherArgs, {
       children: childEl
     })) : (0, jsx_runtime_1.jsx)("div", {

package/dist/commonStyles/colors/colorsConstant.d.ts

@@ -0,0 +1,44 @@
+export declare const Colors: {
+    Text: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Actions: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Backgrounds: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Borders: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Accents: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    DutyStatus: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+    Categorical: {
+        colorName: string;
+        text: string;
+        variable: string;
+        description: string;
+    }[];
+};

package/dist/commonStyles/colors/colorsConstant.js

@@ -0,0 +1,361 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Colors = void 0;
+exports.Colors = {
+    Text: [
+        {
+            colorName: "primary",
+            text: "Primary",
+            variable: "--text-primary",
+            description: "For primary text and icons"
+        },
+        {
+            colorName: "secondary",
+            text: "Secondary",
+            variable: "--text-secondary",
+            description: "For less prominent text and icon"
+        },
+        {
+            colorName: "placeholder",
+            text: "Placeholder",
+            variable: "--text-placeholder",
+            description: "For visual cues for input fields"
+        },
+        {
+            colorName: "hyperlink",
+            text: "Hyperlink",
+            variable: "--text-hyperlink",
+            description: "For distinguishing clickable links from regular text"
+        },
+        {
+            colorName: "nav-highlight",
+            variable: "--text-nav-highlight",
+            text: "Nav Highlight",
+            description: "For indication of currently selected or active menu item"
+        },
+        {
+            colorName: "error",
+            text: "Error Message",
+            variable: "--text-error-message",
+            description: "For highlighting critical information, such as validation errors or warnings"
+        },
+        {
+            colorName: "disabled",
+            text: "Text button disabled",
+            variable: "--text-button-disabled",
+            description: "For inactive or unavailable elements"
+        },
+        {
+            colorName: "reverse",
+            text: "Reverse - Primary",
+            variable: "--text-reverse-primary",
+            description: "For high-contrast readability on dark backgrounds"
+        }
+    ],
+    Actions: [
+        {
+            colorName: "action-primary",
+            text: "Primary",
+            variable: "--text-primary--default",
+            description: "For immediate attention to interactive elements"
+        },
+        {
+            colorName: "action-primary-hover",
+            text: "Primary - Hover",
+            variable: "--text-primary--hover",
+            description: "For indication when users hover over interactive elements"
+        },
+        {
+            colorName: "action-primary-active",
+            text: "Primary - Active",
+            variable: "--text-primary--active",
+            description: "For indication when an element is clicked or tapped"
+        },
+        {
+            colorName: "action-secondary",
+            text: "Secondary - Default",
+            variable: "--text-secondary--default",
+            description: "Primary text and icons colour for text and icons"
+        },
+        {
+            colorName: "action-secondary-hover",
+            text: "Secondary - Hover",
+            variable: "--text-secondary--hover",
+            description: "For indication when users hover over less prominent interactive elements"
+        },
+        {
+            colorName: "action-secondary-active",
+            text: "Secondary - Active",
+            variable: "--text-secondary--active",
+            description: "For indication when a secondary element is clicked or tapped"
+        },
+        {
+            colorName: "action-destructive",
+            text: "Destructive - Default",
+            variable: "--text-destructive--default",
+            description: "For highlighting actions or elements that carry significant consequences"
+        },
+        {
+            colorName: "action-destructive-hover",
+            text: "Destructive Hover",
+            variable: "--text-destructive--hover",
+            description: "For visual feedback when users hover over elements representing potentially irreversible actions"
+        },
+        {
+            colorName: "action-destructive-active",
+            text: "Destructive - Active",
+            variable: "--text-destructive--active",
+            description: "For when potentially irreversible actions are clicked"
+        },
+        {
+            colorName: "action-tertiary-hover",
+            text: "Tertiary hover",
+            variable: "--text-tertiary--hover",
+            description: "For subtle visual feedback when users hover over less prominent interactive elements"
+        },
+        {
+            colorName: "action-tertiary-active",
+            text: "Tertiary active",
+            variable: "--text-tertiary--active",
+            description: "For less prominent interactive elements, when they are clicked or tapped"
+        }
+    ],
+    Backgrounds: [
+        {
+            colorName: "backgrounds-main",
+            text: "Main",
+            variable: "--backgrounds-main",
+            description: "Default background for optimized readability"
+        },
+        {
+            colorName: "backgrounds-content-0",
+            text: "Content 0",
+            variable: "--backgrounds-content-0",
+            description: "For contrast above main background"
+        },
+        {
+            colorName: "backgrounds-content-1",
+            text: "Content 1",
+            variable: "--backgrounds-content-1",
+            description: "For additional contrast above main and content 0 background"
+        },
+        {
+            colorName: "backgrounds-content-2",
+            text: "Content 2",
+            variable: "--backgrounds-content-2",
+            description: "Providing contrast to distinguish components"
+        },
+        {
+            colorName: "backgrounds-generic-hover",
+            text: "Generic Hover",
+            variable: "--backgrounds-hover",
+            description: "For visual feedback when users hover over an interactive element with an background"
+        },
+        {
+            colorName: "backgrounds-disabled",
+            text: "Field Disabled",
+            variable: "--backgrounds-field-disabled",
+            description: "For the background of elements that are disabled"
+        },
+        {
+            colorName: "backgrounds-text-button-disabled",
+            text: "Text Button - Disabled",
+            variable: "--backgrounds-text-button-disabled",
+            description: "For the background of text Buttons that are disabled"
+        },
+        {
+            colorName: "backgrounds-primary-brand",
+            text: "Primary Brand",
+            variable: "--backgrounds-primary-brand",
+            description: "For Geotab Branding Background"
+        },
+        {
+            colorName: "backgrounds-reverse-0",
+            text: "Reverse 0",
+            variable: "--backgrounds-reverse-0",
+            description: "For contrast against light backgrounds"
+        },
+        {
+            colorName: "backgrounds-reverse-1",
+            text: "Reverse 1",
+            variable: "--backgrounds-reverse-1",
+            description: "For high contrast against light backgrounds"
+        },
+        {
+            colorName: "backgrounds-reverse-2",
+            text: "Reverse 2",
+            variable: "--backgrounds-reverse-2",
+            description: "For a light contrast background"
+        },
+        {
+            colorName: "backgrounds-overlay",
+            text: "Overlay",
+            variable: "--backgrounds-overlay",
+            description: "For Scrims and overlay"
+        }
+    ],
+    Borders: [
+        {
+            colorName: "borders-main",
+            text: "General",
+            variable: "--borders-general",
+            description: "For the default border to subtly visually separate elements"
+        },
+        {
+            colorName: "borders-secondary",
+            text: "Secondary",
+            variable: "--borders-secondary",
+            description: "For visually separating elements elements with higher contrast"
+        },
+        {
+            colorName: "borders-formfield-active",
+            text: "Formfield - Active",
+            variable: "--borders-form-field--active",
+            description: "For visual indication that an input field is active"
+        },
+        {
+            colorName: "borders-formfield-error",
+            text: "Formfield - Error",
+            variable: "--borders-form-field--error",
+            description: "For visual indication that an input field has an incorrect input"
+        },
+        {
+            colorName: "borders-formfield-reverse",
+            text: "Formfield - Reverse",
+            variable: "--borders-form-field--reverse",
+            description: "For a contrasting border against a darker background"
+        }
+    ],
+    Accents: [
+        {
+            colorName: "accents-warning--main",
+            text: "Warning - Main",
+            variable: "--accents-warning--main",
+            description: "Use for a background colour for an element with an accent to highlight a warning"
+        },
+        {
+            colorName: "accents-warning--detail",
+            text: "Warning - Detail",
+            variable: "--accents-warning--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight a warning"
+        },
+        {
+            colorName: "accents-error--main",
+            text: "Error - Main",
+            variable: "--accents-error--main",
+            description: "Use for a background colour for an element with an accent to highlight an error"
+        },
+        {
+            colorName: "accents-error--detail",
+            text: "Warning - Detail",
+            variable: "--accents-error--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight an error"
+        },
+        {
+            colorName: "accents-success--main",
+            text: "Success - Main",
+            variable: "--accents-success--main",
+            description: "Use for a  background colour for an element with an accent to highlight a success"
+        },
+        {
+            colorName: "accents-success--detail",
+            text: "Success - Detail",
+            variable: "--accents-success--detail",
+            description: "Use for a foreground colour for an element with an accent to highlight a success"
+        },
+        {
+            colorName: "accents-general--main",
+            text: "General - Main",
+            variable: "--accents-general--main",
+            description: "Use for a default background colour for an element with an accent  "
+        },
+        {
+            colorName: "accents-general--detail",
+            text: "General - Detail",
+            variable: "--accents-general--detail",
+            description: "Use for a default foreground colour for an element with an accent  "
+        }
+    ],
+    DutyStatus: [
+        {
+            colorName: "duty-status-workday",
+            text: "Workday",
+            variable: "--duty-status-workday",
+            description: "To indicate the driver is on duty"
+        },
+        {
+            colorName: "duty-status-cycle",
+            text: "Cycle",
+            variable: "--duty-status-cycle",
+            description: "To indicate off duty"
+        },
+        {
+            colorName: "duty-status-rest",
+            text: "Rest",
+            variable: "--duty-status-rest",
+            description: "To indicate driver is on rest"
+        },
+        {
+            colorName: "duty-status-drive",
+            text: "Drive",
+            variable: "--duty-status-drive",
+            description: "To indicate driver is driving"
+        },
+        {
+            colorName: "duty-status-exemption",
+            text: "Exemption",
+            variable: "--duty-status-exemption",
+            description: "To indicate an exemption "
+        }
+    ],
+    Categorical: [
+        {
+            colorName: "categorical-light-blue",
+            text: "Light blue",
+            variable: "--data--categorical-light-blue",
+            description: "This color is the first color in the categorical color set."
+        },
+        {
+            colorName: "categorical-blue",
+            text: "Blue",
+            variable: "--data--categorical-blue",
+            description: "This color is the second color in the categorical color set."
+        },
+        {
+            colorName: "categorical-purple",
+            text: "Purple",
+            variable: "--data--categorical-purple",
+            description: "This color is the third color in the categorical color set."
+        },
+        {
+            colorName: "categorical-green",
+            text: "Green",
+            variable: "--data--categorical-green",
+            description: "This color is the fourth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-orange",
+            text: "Orange",
+            variable: "--data--categorical-orange",
+            description: "This color is the fifth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-yellow",
+            text: "Yellow",
+            variable: "--data--categorical-yellow",
+            description: "This color is the sixth color in the categorical color set."
+        },
+        {
+            colorName: "categorical-red",
+            text: "Red",
+            variable: "--data--categorical-red",
+            description: "This color is the seventh color in the categorical color set."
+        },
+        {
+            colorName: "categorical-grey",
+            text: "Grey",
+            variable: "--data--categorical-grey",
+            description: "This color is the eighth color in the categorical color set."
+        }
+    ]
+};

package/dist/commonStyles/typography/components/typographyItem.d.ts

@@ -0,0 +1,8 @@
+import "./typographyItem.less";
+export declare const TypographyItem: ({ content, contentClassName, font, device, tag }: {
+    content?: string | undefined;
+    contentClassName?: string | undefined;
+    font?: string | undefined;
+    device?: string | undefined;
+    tag: any;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/commonStyles/typography/components/typographyItem.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classNames_1 = require("../../../commonHelpers/classNames/classNames");
+const useMobile_1 = require("../../../commonHelpers/hooks/useMobile");
+const useDrive_1 = require("../../../utils/theme/useDrive");
+const zen_1 = require("../../../utils/zen");
+const getFontWeightName = (value) => {
+    switch (value) {
+        case 300:
+            return "Light";
+        case 400:
+            return "Regular";
+        case 500:
+            return "Medium";
+        case 700:
+            return "Bold";
+        default:
+            return "Unknown";
+    }
+};
+const TypographyItem = ({ content = "The brown fox jumped over the lazy dog.", contentClassName = "", font = "Roboto", device = "", tag }) => {
+    const ref = (0, react_1.useRef)(null);
+    const [fontWeightState, setFontWeight] = (0, react_1.useState)("Unknown");
+    const [fontSizeState, setFontSize] = (0, react_1.useState)("Unknown");
+    const [lineHeightState, setLineHeight] = (0, react_1.useState)("Unknown");
+    const [letterSpacingState, setLetterSpacing] = (0, react_1.useState)("Unknown");
+    const isMobile = (0, useMobile_1.useMobile)();
+    const isDrive = (0, useDrive_1.useDrive)();
+    const bigScreenName = isDrive ? "Tablet" : "Desktop";
+    const deviceName = device || (isMobile ? "Mobile" : bigScreenName);
+    (0, react_1.useLayoutEffect)(() => {
+        if (ref.current && zen_1.zen.getComputedStyle) {
+            const { fontWeight, fontSize, lineHeight, letterSpacing } = zen_1.zen.getComputedStyle(ref.current);
+            setFontWeight(getFontWeightName(parseInt(fontWeight)));
+            setFontSize(fontSize);
+            setLineHeight(lineHeight);
+            setLetterSpacing(letterSpacing === "normal" ? "0px" : letterSpacing);
+        }
+    }, [isMobile]);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "story-typography-item", children: (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-wrapper", children: [(0, jsx_runtime_1.jsx)("p", { ref: ref, className: (0, classNames_1.classNames)(["story-typography-item__content", contentClassName]), children: content }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Font" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: font })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Weight" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: fontWeightState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Size" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: fontSizeState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Line Height" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: lineHeightState })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-column", children: [(0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Letter Spacing" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: letterSpacingState })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Device" }), (0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-value heading-04", children: deviceName })] }), (0, jsx_runtime_1.jsxs)("div", { className: "story-typography-item__content-description-item", children: [(0, jsx_runtime_1.jsx)("span", { className: "story-typography-item__content-description-name label-01-desktop", children: "Tag" }), (0, jsx_runtime_1.jsxs)("span", { className: "story-typography-item__content-description-value heading-04", children: ["<", tag, ">"] })] })] })] })] }) }));
+};
+exports.TypographyItem = TypographyItem;

package/dist/dropdown/dropdown.js

@@ -24,4 +24,4 @@ const Dropdown = (_a) => {
     return (0, jsx_runtime_1.jsx)(DropDownFormField, Object.assign({}, props));
 };
 exports.Dropdown = Dropdown;
-exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
+exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];

package/dist/dropdownRaw/dropdownList.d.ts

@@ -13,7 +13,9 @@ export interface IDropdownList extends IZenComponentProps {
     onSelect: (id: string) => void;
     onSingleSelect: (reset: boolean, selected?: string) => void;
     backButtonName?: string;
-    isAllSelected: boolean;
+    isAllSelected?: boolean;
+    isSelectAllActive?: boolean;
+    shouldBlockItems?: boolean;
     listData: ICheckboxListWithActionOption[] | ISelectListItem[];
     isWithFooter: boolean;
     width?: number;
@@ -39,6 +41,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
     hasError: boolean;
 }
 export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isSelectAllActive, shouldBlockItems, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
 export declare const TRANSLATIONS: string[];
 export {};