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

package/dist/dropdownRaw/dropdownRaw.js

@@ -870,7 +870,7 @@ const DropdownRaw = props => {
         listData: currentListData,
         width: width || currentWidth === 180 ? undefined : currentWidth,
         minWidth: currentWidth,
-        hasSelectAllButton: selectAllButton && multiselect && !state.inputValue,
+        hasSelectAllButton: selectAllButton && multiselect,
         hasApplyButton: hasApplyButton,
         isApplyDisabled: memoizedIsApplyButtonDisabled,
         isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && (0, dropdownHelper_1.isAllItemsHasOneParent)(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),

package/dist/index.d.ts

@@ -774,8 +774,6 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
-export { directionContext } from "./utils/localization/directionContext";
-export type { TTextDirection } from "./utils/localization/getTextDirection";
 export { useDirection } from "./utils/localization/useDirection";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/dist/index.js

@@ -17,7 +17,7 @@ exports.IconShield3 = exports.IconShield2 = exports.IconShield = exports.IconSha
 exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = exports.IconVoice = exports.IconVisitPage = exports.IconVideoReplay = exports.IconVideo2 = exports.IconVideo = exports.IconUsbHub = exports.IconUsb = exports.IconUpload = exports.IconUnlocked = exports.IconUndock = exports.IconUndo2 = exports.IconUndo = exports.IconUnderline = exports.IconUmbrella = exports.IconTrailer = exports.IconThumbsUp = exports.IconThumbsDown = exports.IconThermometer = exports.IconThermograph = exports.IconTextSize = exports.IconTelevision2 = exports.IconTelevision = exports.IconTarget3 = exports.IconTarget2 = exports.IconTarget = exports.IconTachographTimeCard = exports.IconTachograph = exports.IconTable = exports.IconSupport = exports.IconSun = exports.IconStrikeThrough = exports.IconStore = exports.IconStorage = exports.IconStopwatch = exports.IconStarFilled = exports.IconStarAi = exports.IconStar = exports.IconSquare = exports.IconSpeaker = exports.IconSortVertical = exports.IconSortHorizontal = exports.IconSort2Vertical = exports.IconSort2Horizontal = exports.IconSmiley = exports.IconSign = exports.IconSidebar = exports.IconShield4 = void 0;
 exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = void 0;
 exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = void 0;
-exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.directionContext = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
+exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.useDirection = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
 /* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
@@ -1663,8 +1663,6 @@ Object.defineProperty(exports, "LanguageProvider", { enumerable: true, get: func
 var translationsDictionary_1 = require("./utils/localization/translationsDictionary");
 Object.defineProperty(exports, "dictionaries", { enumerable: true, get: function () { return translationsDictionary_1.dictionaries; } });
 Object.defineProperty(exports, "injectString", { enumerable: true, get: function () { return translationsDictionary_1.injectString; } });
-var directionContext_1 = require("./utils/localization/directionContext");
-Object.defineProperty(exports, "directionContext", { enumerable: true, get: function () { return directionContext_1.directionContext; } });
 var useDirection_1 = require("./utils/localization/useDirection");
 Object.defineProperty(exports, "useDirection", { enumerable: true, get: function () { return useDirection_1.useDirection; } });
 var useLanguage_1 = require("./utils/localization/useLanguage");

package/esm/dropdownRaw/dropdownRaw.js

@@ -862,7 +862,7 @@ export const DropdownRaw = props => {
         listData: currentListData,
         width: width || currentWidth === 180 ? undefined : currentWidth,
         minWidth: currentWidth,
-        hasSelectAllButton: selectAllButton && multiselect && !state.inputValue,
+        hasSelectAllButton: selectAllButton && multiselect,
         hasApplyButton: hasApplyButton,
         isApplyDisabled: memoizedIsApplyButtonDisabled,
         isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),

package/esm/index.d.ts

@@ -774,8 +774,6 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
-export { directionContext } from "./utils/localization/directionContext";
-export type { TTextDirection } from "./utils/localization/getTextDirection";
 export { useDirection } from "./utils/localization/useDirection";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/esm/index.js

@@ -758,7 +758,6 @@ export { HeaderButtonsProvider } from "./utils/headerButtons/headerButtonsProvid
 export { getNewFocusableItem, getFirstFocusableItem } from "./utils/keyboardHelpers";
 export { LanguageProvider } from "./utils/localization/languageProvider";
 export { dictionaries, injectString } from "./utils/localization/translationsDictionary";
-export { directionContext } from "./utils/localization/directionContext";
 export { useDirection } from "./utils/localization/useDirection";
 export { useLanguage } from "./utils/localization/useLanguage";
 export { ThemeDark } from "./utils/theme/themeDark";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.10.0-beta.2",
+    "version": "3.10.0-beta.3",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",

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

@@ -1,44 +0,0 @@
-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

@@ -1,361 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,45 +0,0 @@
-"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/testHelpers/fakeFetch.d.ts

@@ -1 +0,0 @@
-export declare const fetchData: () => Promise<string>;

package/dist/testHelpers/fakeFetch.js

@@ -1,14 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.fetchData = void 0;
-const zen_1 = require("../utils/zen");
-let loadTimeout = null;
-const fetchData = () => {
-    var _a;
-    loadTimeout && ((_a = zen_1.zen.clearTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, loadTimeout));
-    return new Promise((res, rej) => {
-        var _a;
-        loadTimeout = (_a = zen_1.zen.setTimeout) === null || _a === void 0 ? void 0 : _a.call(zen_1.zen, () => Math.random() > 0.5 ? res("Fetched Data") : rej(new Error("Error while fetching data")), 5000);
-    });
-};
-exports.fetchData = fetchData;

package/dist/testHelpers/geotab-axe/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference path="../../../testHelpers/geotab-axe/index.d.ts" />
-export {};

package/dist/testHelpers/geotab-axe/index.js

@@ -1,81 +0,0 @@
-"use strict";
-/// <reference path="./index.d.ts" />
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const axe_core_1 = __importDefault(require("axe-core"));
-const styled_output_1 = require("../styled-output");
-const domParser = new DOMParser();
-const lineBreak = "\n\n";
-const horizontalLine = "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500";
-const runAxe = (el) => new Promise(resolve => {
-    const parent = el.parentNode;
-    const sibling = el.nextSibling;
-    document === null || document === void 0 ? void 0 : document.body.appendChild(el);
-    axe_core_1.default.configure({
-        rules: [{
-                id: "target-size",
-                enabled: true
-            }],
-        checks: [
-            {
-                // color contrast checking doesnt work in a jsdom environment.
-                id: "color-contrast",
-                enabled: false
-            }
-        ]
-    });
-    axe_core_1.default.run(el, {}, (err, results) => {
-        if (err) {
-            throw err;
-        }
-        resolve(results);
-        parent ? parent.insertBefore(el, sibling) : document === null || document === void 0 ? void 0 : document.body.removeChild(el);
-    });
-});
-const toHtml = (str) => {
-    if (str.indexOf("<html") > -1) {
-        return domParser.parseFromString(str, "text/html").body;
-    }
-    const html = document === null || document === void 0 ? void 0 : document.createElement("template");
-    html.insertAdjacentHTML("afterbegin", str);
-    return html;
-};
-const formatViolations = (violations) => {
-    if (violations.length === 0) {
-        return [];
-    }
-    return violations.map(violation => {
-        const errorText = violation.nodes.map(node => {
-            const selector = node.target.join(", ");
-            const expectedText = `Availability violation for selector $('${selector}'):` + lineBreak;
-            return (expectedText +
-                (0, styled_output_1.stylize)(node.html, styled_output_1.Color.Gray) +
-                lineBreak +
-                (0, styled_output_1.stylize)(`---Explanation---`, styled_output_1.Color.Black, styled_output_1.BackgroundColor.White, styled_output_1.Style.Bold, styled_output_1.Style.Underline) +
-                lineBreak +
-                `${violation.help} (${violation.id})` +
-                lineBreak +
-                (0, styled_output_1.stylize)(node.failureSummary || "", styled_output_1.Color.Yellow) +
-                lineBreak + (violation.helpUrl
-                ? `You can find more about it here: \n${(0, styled_output_1.stylize)(violation.helpUrl, styled_output_1.Color.Blue)}`
-                : ""));
-        }).join(lineBreak);
-        return (errorText);
-    }).join(lineBreak + horizontalLine + lineBreak);
-};
-const toBeAccessible = async (element, errorMsg) => {
-    if (!element) {
-        return { pass: true, message: () => "ok" };
-    }
-    const html = element instanceof Node ? element : toHtml(element);
-    const results = await runAxe(html);
-    if (results.violations.length) {
-        const formatedViolations = formatViolations(results.violations);
-        const message = () => (errorMsg ? errorMsg + lineBreak : "") + formatedViolations;
-        return { pass: false, message };
-    }
-    return { pass: true, message: () => "ok" };
-};
-expect.extend({ toBeAccessible });

package/dist/testHelpers/jestRetry.js

@@ -1,2 +0,0 @@
-"use strict";
-jest.retryTimes(3, { logErrorsBeforeRetry: true });

package/dist/testHelpers/renderAsync.d.ts

@@ -1,2 +0,0 @@
-import { ReactNode } from "react";
-export declare const renderAsync: (component: ReactNode) => Promise<import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>>;

package/dist/testHelpers/renderAsync.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderAsync = void 0;
-const react_1 = require("react");
-const react_2 = require("@testing-library/react");
-const renderAsync = async (component) => (0, react_1.act)(async () => {
-    const result = (0, react_2.render)(component);
-    await Promise.resolve();
-    await Promise.resolve();
-    return result;
-});
-exports.renderAsync = renderAsync;

package/dist/testHelpers/setReadonlyHtmlProperty.d.ts

@@ -1 +0,0 @@
-export declare const setReadonlyHtmlProperty: (propName: keyof HTMLElement, values: Map<string, Required<HTMLElement>[keyof HTMLElement]>) => void;

package/dist/testHelpers/setReadonlyHtmlProperty.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setReadonlyHtmlProperty = void 0;
-const setReadonlyHtmlProperty = (propName, values) => {
-    jest.spyOn(HTMLElement.prototype, propName, "get").mockImplementation(function () {
-        var _a;
-        for (const [selector, value] of values) {
-            if (((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector(selector)) === this) {
-                return value;
-            }
-        }
-        return this[propName];
-    });
-};
-exports.setReadonlyHtmlProperty = setReadonlyHtmlProperty;

package/dist/testHelpers/styled-output.d.ts

@@ -1,30 +0,0 @@
-export declare enum Color {
-    No = 39,
-    Black = 30,
-    Red = 31,
-    Green = 32,
-    Yellow = 33,
-    Blue = 34,
-    Purple = 35,
-    Cyan = 36,
-    White = 37,
-    Gray = 90
-}
-export declare enum BackgroundColor {
-    No = 49,
-    Black = 40,
-    Red = 41,
-    Green = 42,
-    Yellow = 43,
-    Blue = 44,
-    Purple = 45,
-    Cyan = 46,
-    White = 47,
-    Gray = 100
-}
-export declare enum Style {
-    No = 0,
-    Bold = 1,
-    Underline = 4
-}
-export declare function stylize(text: string, ...styles: (Color | BackgroundColor | Style)[]): string;

package/dist/testHelpers/styled-output.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.stylize = exports.Style = exports.BackgroundColor = exports.Color = void 0;
-var Color;
-(function (Color) {
-    Color[Color["No"] = 39] = "No";
-    Color[Color["Black"] = 30] = "Black";
-    Color[Color["Red"] = 31] = "Red";
-    Color[Color["Green"] = 32] = "Green";
-    Color[Color["Yellow"] = 33] = "Yellow";
-    Color[Color["Blue"] = 34] = "Blue";
-    Color[Color["Purple"] = 35] = "Purple";
-    Color[Color["Cyan"] = 36] = "Cyan";
-    Color[Color["White"] = 37] = "White";
-    Color[Color["Gray"] = 90] = "Gray";
-})(Color || (exports.Color = Color = {}));
-var BackgroundColor;
-(function (BackgroundColor) {
-    BackgroundColor[BackgroundColor["No"] = 49] = "No";
-    BackgroundColor[BackgroundColor["Black"] = 40] = "Black";
-    BackgroundColor[BackgroundColor["Red"] = 41] = "Red";
-    BackgroundColor[BackgroundColor["Green"] = 42] = "Green";
-    BackgroundColor[BackgroundColor["Yellow"] = 43] = "Yellow";
-    BackgroundColor[BackgroundColor["Blue"] = 44] = "Blue";
-    BackgroundColor[BackgroundColor["Purple"] = 45] = "Purple";
-    BackgroundColor[BackgroundColor["Cyan"] = 46] = "Cyan";
-    BackgroundColor[BackgroundColor["White"] = 47] = "White";
-    BackgroundColor[BackgroundColor["Gray"] = 100] = "Gray";
-})(BackgroundColor || (exports.BackgroundColor = BackgroundColor = {}));
-var Style;
-(function (Style) {
-    Style[Style["No"] = 0] = "No";
-    Style[Style["Bold"] = 1] = "Bold";
-    Style[Style["Underline"] = 4] = "Underline";
-})(Style || (exports.Style = Style = {}));
-function stylize(text, ...styles) {
-    if (!styles.length) {
-        return text;
-    }
-    return styles.reduce((res, style) => `\x1b[${style}m${res}\x1b[0m`, text);
-}
-exports.stylize = stylize;