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

package/README.md

@@ -56,7 +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
+- 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/absolute/absolute.d.ts

@@ -22,8 +22,14 @@ export interface IAbsolute extends IZenComponentProps {
     ariaLabelledby?: string;
     alignmentsFn?: IAlignment;
     recalculateOnScroll?: boolean;
+    /**
+     * When true, closes the popup on scroll instead of repositioning it.
+     * Mutually exclusive with `recalculateOnScroll` — setting both causes a
+     * wasted position recalculation before the popup closes.
+     */
+    closeOnScroll?: boolean;
     recalculateTrigger?: boolean;
     /** Whether to focus the first focusable element when popup opens. Default: true */
     focusOnOpen?: boolean;
 }
-export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;
+export declare const Absolute: ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger, shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger, focusOnOpen }: IAbsolute) => import("react/jsx-runtime").JSX.Element | "" | null;

package/dist/absolute/absolute.js

@@ -19,7 +19,7 @@ const useScroll_1 = require("../commonHelpers/hooks/useScroll");
 const getScrollableParent_1 = require("../utils/getScrollableParent");
 const useClientReady_1 = require("../commonHelpers/hooks/useClientReady");
 const zen_1 = require("../utils/zen");
-const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
+const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, triggerRef, alignment, inline, onOpenChange, useTrapFocusWithTrigger = "off", shouldHoldScroll, stateFullChilds, role, ariaLabel, ariaLabelledby, alignmentsFn, recalculateOnScroll, closeOnScroll, recalculateTrigger = true, focusOnOpen = true }) => {
     const popupRef = (0, react_1.useRef)(null);
     const prevScroll = (0, react_1.useRef)(0);
     const { dark } = (0, react_1.useContext)(themeContext_1.themeContext);
@@ -47,14 +47,18 @@ const Absolute = ({ isOpen, id, paddingX, paddingY, className, children, trigger
         return "";
     };
     const parent = (0, react_1.useMemo)(() => {
-        if (!isOpen || !recalculateOnScroll) {
+        if (!isOpen || (!recalculateOnScroll && !closeOnScroll)) {
             return null;
         }
         return (0, getScrollableParent_1.getScrollableParent)(triggerRef.current);
-    }, [triggerRef, isOpen, recalculateOnScroll]);
+    }, [triggerRef, isOpen, recalculateOnScroll, closeOnScroll]);
     const calculatePosition = (0, react_1.useCallback)(() => (0, calculatePosition_1.calculatePosition)(triggerRef, popupRef, paddingX, paddingY, inline, alignment, alignmentsFn, parent ? parent : undefined), [triggerRef, paddingX, paddingY, inline, alignment, alignmentsFn, popupRef, parent]);
+    const handleCloseOnScroll = (0, react_1.useCallback)(() => {
+        onOpenChange(false);
+    }, [onOpenChange]);
     (0, useResize_1.useResize)(calculatePosition, isOpen);
-    (0, useScroll_1.useScroll)(calculatePosition, isOpen, parent);
+    (0, useScroll_1.useScroll)(calculatePosition, isOpen && !!recalculateOnScroll, parent);
+    (0, useScroll_1.useScroll)(handleCloseOnScroll, isOpen && !!closeOnScroll, parent);
     (0, react_1.useLayoutEffect)(calculatePosition, [isOpen, children, recalculateTrigger, calculatePosition]);
     function handleEscape() {
         onOpenChange(false);

package/dist/betaPill/betaPill.d.ts

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

package/dist/betaPill/betaPill.js

@@ -124,11 +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
-}) => {
+const BetaPill = props => {
+  const {
+    className,
+    feedbackAction,
+    betaOptionAction,
+    name,
+    description
+  } = props;
   const {
     translate
   } = (0, useLanguage_1.useLanguage)();
@@ -147,8 +150,8 @@ const BetaPill = ({
     return (0, jsx_runtime_1.jsx)(pillExpandable_1.PillExpandable, {
       isBeta: true,
       icon: iconLab_1.IconLab,
-      description: translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
-      text: translate("Beta"),
+      description: description !== null && description !== void 0 ? description : translate("This feature is still in testing, and is not fully supported yet. Your feedback is valuable to help guide future enhancements."),
+      text: name !== null && name !== void 0 ? name : translate("Beta"),
       type: "info",
       className: pillClasses,
       mainAction: resolvedMainAction,
@@ -161,7 +164,7 @@ const BetaPill = ({
     type: "info",
     children: !isMobile && (0, jsx_runtime_1.jsx)("span", {
       className: "zen-caption__content",
-      children: translate("Beta")
+      children: name !== null && name !== void 0 ? name : translate("Beta")
     })
   });
 };

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

@@ -54,10 +54,10 @@ const Checkbox = (_a) => {
     const isMobile = (0, useMobile_1.useMobile)();
     const checkboxIconClasses = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(["zen-checkbox__icon", disabled ? "zen-checkbox__icon--disabled" : ""]), [disabled]);
     const checkbox = ((0, jsx_runtime_1.jsx)(triStateCheckbox_1.TriStateCheckbox, Object.assign({ className: "zen-checkbox__input", id: intId, checked: checked, indeterminate: indeterminate, disabled: disabled, "aria-label": title, "aria-describedby": describedBy }, rest)));
-    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
+    const iconAndLabel = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-checkbox__box", "aria-hidden": true, children: state === checkboxState_1.CheckboxState.Indeterminate ? ((0, jsx_runtime_1.jsx)(checkboxIconMinus_1.CheckboxIconMinus, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : state === checkboxState_1.CheckboxState.On ? ((0, jsx_runtime_1.jsx)(checkboxIconCheckmark_1.CheckboxIconCheckmark, { className: checkboxIconClasses, size: driveClasses ? "bigger" : "medium" })) : null }), children ? ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label-text", fullWidth ? "zen-checkbox__label-text--full-width" : ""]), children: children })) : null] }));
     if (wrapped) {
         return ((0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox", driveClasses || "", className]), title: title, children: [checkbox, (0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), children: iconAndLabel })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: [checkbox, (0, jsx_runtime_1.jsx)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), htmlFor: intId, title: title, children: iconAndLabel })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)(["zen-checkbox", isMobile && !driveClasses ? "zen-checkbox--mobile" : "", driveClasses || "", className]), children: (0, jsx_runtime_1.jsxs)("label", { className: (0, classNames_1.classNames)(["zen-checkbox__label", reverse ? "zen-checkbox__label--reverse" : ""]), title: title, children: [checkbox, iconAndLabel] }) }));
 };
 exports.Checkbox = Checkbox;

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;