@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.0

package/esm/checkboxListWithAction/checkboxListWithAction.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useId } from "react";
 import { Checkbox } from "../checkbox/checkbox";
@@ -5,73 +6,222 @@ import { classNames } from "../commonHelpers/classNames/classNames";
 import { IconChevronRight } from "../icons/iconChevronRight";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
-export const CheckboxListWithAction = ({ label, options, onChange, onClick, search = [], className }) => {
-    const { translate } = useLanguage();
-    const driveComponentClass = useDriveClassName("zen-checkbox-list-with-action");
-    const listId = useId();
-    const checkboxId = `${listId}_check_list-item_`;
-    const handleChange = (e) => {
-        const evtTarget = e.target;
-        const elId = evtTarget.getAttribute("id").replace(checkboxId, "");
-        onChange({ id: elId, state: evtTarget.checked, partial: e.target.dataset.indeterminate === "true" });
+injectString("cs", "Number of selected child groups - {count}", "Po\u010Det vybran\xFDch pod\u0159\xEDzen\xFDch skupin\xA0\u2013 {count}");
+injectString("da-DK", "Number of selected child groups - {count}", "Antal valgte underordnede grupper - {count}");
+injectString("de", "Number of selected child groups - {count}", "Anzahl ausgew\xE4hlter Untergruppen \u2013 {count}");
+injectString("en", "Number of selected child groups - {count}", "Number of selected child groups - {count}");
+injectString("es", "Number of selected child groups - {count}", "Cantidad de grupos secundarios seleccionados: {count}");
+injectString("fi-FI", "Number of selected child groups - {count}", "Valittujen alaryhmien m\xE4\xE4r\xE4 - {count}");
+injectString("fr", "Number of selected child groups - {count}", "Nombre de groupes enfants s\xE9lectionn\xE9s\xA0\u2013 {count}");
+injectString("fr-FR", "Number of selected child groups - {count}", "Nombre de groupes enfants s\xE9lectionn\xE9s - {count}");
+injectString("hu-HU", "Number of selected child groups - {count}", "Kiv\xE1lasztott gyermekcsoportok sz\xE1ma: {count}.");
+injectString("id", "Number of selected child groups - {count}", "Jumlah kelompok anak yang dipilih - {count}");
+injectString("it", "Number of selected child groups - {count}", "Numero di gruppi secondari selezionati: {count}");
+injectString("ja", "Number of selected child groups - {count}", "\u9078\u629E\u3057\u305F\u5B50\u30B0\u30EB\u30FC\u30D7\u306E\u6570 - {count}");
+injectString("ko-KR", "Number of selected child groups - {count}", "\uC120\uD0DD\uD55C \uD558\uC704 \uADF8\uB8F9 \uC218 - {count}");
+injectString("ms", "Number of selected child groups - {count}", "Bilangan kumpulan anak yang dipilih - {count}");
+injectString("nb-NO", "Number of selected child groups - {count}", "Antall utvalgte barnegrupper - {telling}");
+injectString("nl", "Number of selected child groups - {count}", "Aantal geselecteerde onderliggende groepen - {count}");
+injectString("pl", "Number of selected child groups - {count}", "Liczba wybranych grup podrz\u0119dnych: {count}");
+injectString("pt-BR", "Number of selected child groups - {count}", "N\xFAmero de subgrupos selecionados - \u200B{count}");
+injectString("sk-SK", "Number of selected child groups - {count}", "Po\u010Det vybran\xFDch podskup\xEDn - {count}");
+injectString("sv", "Number of selected child groups - {count}", "Antal valda underordnade grupper: {count}");
+injectString("th", "Number of selected child groups - {count}", "\u0E08\u0E33\u0E19\u0E27\u0E19\u0E01\u0E25\u0E38\u0E48\u0E21\u0E22\u0E48\u0E2D\u0E22\u0E17\u0E35\u0E48\u0E40\u0E25\u0E37\u0E2D\u0E01 - {count}");
+injectString("tr", "Number of selected child groups - {count}", "Se\xE7ilen alt grup say\u0131s\u0131 - {count}");
+injectString("zh-Hans", "Number of selected child groups - {count}", "\u9009\u4E2D\u7684\u5B50\u7EC4\u6570\u91CF - {count}");
+injectString("zh-TW", "Number of selected child groups - {count}", "\u6240\u9078\u5B50\u7FA4\u7D44\u7684\u6578\u76EE - {count}");
+injectString("cs", "View {groupName} children", "Zobrazit pod\u0159\xEDzen\xE9 pro {groupName}");
+injectString("da-DK", "View {groupName} children", "Se {groupName} b\xF8rn");
+injectString("de", "View {groupName} children", "Untergruppen von {groupName} ansehen");
+injectString("en", "View {groupName} children", "View {groupName} children");
+injectString("es", "View {groupName} children", "Ver subgrupos de {groupName}");
+injectString("fi-FI", "View {groupName} children", "N\xE4yt\xE4 {groupName} alaryhm\xE4t");
+injectString("fr", "View {groupName} children", "Afficher les enfants de {groupName}");
+injectString("fr-FR", "View {groupName} children", "Voir les enfants de {groupName}");
+injectString("hu-HU", "View {groupName} children", "N\xE9zd meg a {groupName} gyermekcsoportokat.");
+injectString("id", "View {groupName} children", "Lihat turunan {groupName}");
+injectString("it", "View {groupName} children", "Visualizzare i sottogruppi di {groupName}");
+injectString("ja", "View {groupName} children", "{groupName} \u306E\u5B50\u3092\u8868\u793A");
+injectString("ko-KR", "View {groupName} children", "{groupName} \uD558\uC704 \uD56D\uBAA9 \uBCF4\uAE30");
+injectString("ms", "View {groupName} children", "Lihat anak {groupName}");
+injectString("nb-NO", "View {groupName} children", "Vis {groupName} barn");
+injectString("nl", "View {groupName} children", "Subgroepen voor {groupName} weergeven");
+injectString("pl", "View {groupName} children", "Wy\u015Bwietl podgrupy {groupName}");
+injectString("pt-BR", "View {groupName} children", "Visualizar subgrupos de {groupName}");
+injectString("sk-SK", "View {groupName} children", "Zobraz podskupiny {groupName}.");
+injectString("sv", "View {groupName} children", "Visa {groupName} barn");
+injectString("th", "View {groupName} children", "\u0E14\u0E39\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23\u0E22\u0E48\u0E2D\u0E22\u0E02\u0E2D\u0E07 {groupName}");
+injectString("tr", "View {groupName} children", "{groupName} alt \xF6\u011Felerini g\xF6r\xFCnt\xFCle");
+injectString("zh-Hans", "View {groupName} children", "\u67E5\u770B {groupName} \u5B50\u7EC4");
+injectString("zh-TW", "View {groupName} children", "\u6AA2\u8996\u300C{groupName}\u300D\u5B50\u7FA4\u7D44");
+injectString("cs", "Toggle {groupName} filter", "P\u0159epnout filtr pro {groupName}");
+injectString("da-DK", "Toggle {groupName} filter", "Sl\xE5 {groupName} filter til og fra");
+injectString("de", "Toggle {groupName} filter", "Filter f\xFCr {groupName} ein-/ausschalten");
+injectString("en", "Toggle {groupName} filter", "Toggle {groupName} filter");
+injectString("es", "Toggle {groupName} filter", "Alternar filtro {groupName}");
+injectString("fi-FI", "Toggle {groupName} filter", "Vaihda {groupName} suodatinta");
+injectString("fr", "Toggle {groupName} filter", "Basculer le filtre {groupName}");
+injectString("fr-FR", "Toggle {groupName} filter", "Activer le filtre {groupName}");
+injectString("hu-HU", "Toggle {groupName} filter", "Kapcsold be/ki a {groupName} sz\u0171r\u0151t.");
+injectString("id", "Toggle {groupName} filter", "Aktifkan/nonaktifkan filter {groupName}");
+injectString("it", "Toggle {groupName} filter", "Attivare/disattivare filtro {groupName}");
+injectString("ja", "Toggle {groupName} filter", "{groupName} \u30D5\u30A3\u30EB\u30BF\u30FC\u3092\u5207\u308A\u66FF\u3048\u308B");
+injectString("ko-KR", "Toggle {groupName} filter", "{groupName} \uD544\uD130 \uC804\uD658");
+injectString("ms", "Toggle {groupName} filter", "Togol penyaring {groupName}");
+injectString("nb-NO", "Toggle {groupName} filter", "Sl\xE5 av/p\xE5 {groupName}-filter");
+injectString("nl", "Toggle {groupName} filter", "Filter {groupName} in- of uitschakelen");
+injectString("pl", "Toggle {groupName} filter", "Prze\u0142\u0105cz filtr {groupName}");
+injectString("pt-BR", "Toggle {groupName} filter", "Alternar filtro {groupName}");
+injectString("sk-SK", "Toggle {groupName} filter", "Prepn\xFA\u0165 filter {groupName}");
+injectString("sv", "Toggle {groupName} filter", "V\xE4xla {groupName}-filter");
+injectString("th", "Toggle {groupName} filter", "\u0E2A\u0E25\u0E31\u0E1A\u0E15\u0E31\u0E27\u0E01\u0E23\u0E2D\u0E07 {groupName}");
+injectString("tr", "Toggle {groupName} filter", "{groupName} filtresini de\u011Fi\u015Ftir");
+injectString("zh-Hans", "Toggle {groupName} filter", "\u5207\u6362 {groupName} \u7B5B\u9009\u5668");
+injectString("zh-TW", "Toggle {groupName} filter", "\u5207\u63DB\u300C{groupName}\u300D\u7BE9\u9078\u689D\u4EF6");
+export const CheckboxListWithAction = ({
+  label,
+  options,
+  onChange,
+  onClick,
+  search = [],
+  className
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const driveComponentClass = useDriveClassName("zen-checkbox-list-with-action");
+  const listId = useId();
+  const checkboxId = `${listId}_check_list-item_`;
+  const handleChange = e => {
+    const evtTarget = e.target;
+    const elId = evtTarget.getAttribute("id").replace(checkboxId, "");
+    onChange({
+      id: elId,
+      state: evtTarget.checked,
+      partial: e.target.dataset.indeterminate === "true"
+    });
+  };
+  const handleClick = e => {
+    var _a;
+    const evtTarget = e.target;
+    const elId = evtTarget.getAttribute("data-btn") || ((_a = evtTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("data-btn")) || "";
+    onClick(elId);
+  };
+  const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
+    if (!color) {
+      return null;
+    }
+    const colorAlpha = Math.round(color.a * 100 / 255) / 100;
+    const opacityValue = colorAlpha < 0.1 ? 0.1 : colorAlpha;
+    const colorString = `rgba(${color.r},${color.g},${color.b},${opacityValue})`;
+    return _jsx("div", Object.assign({}, extraArgs, {
+      className: classNames(["zen-checkbox-list-with-action__color-info", withRightPadding ? "zen-checkbox-list-with-action__color-info--right-indent" : "", isHidden ? "zen-checkbox-list-with-action__color-info--hidden" : ""]),
+      style: {
+        backgroundColor: colorString
+      }
+    }));
+  };
+  const getLabelCountSelectedChild = (countSelectedChild, extraArgs) => {
+    if (!countSelectedChild) {
+      return null;
+    }
+    return _jsx("div", Object.assign({}, extraArgs, {
+      "aria-hidden": "true",
+      className: "zen-checkbox-list-with-action__label-count",
+      children: _jsx("div", {
+        className: "zen-checkbox-list-with-action__counter",
+        children: _jsx("span", {
+          children: countSelectedChild
+        })
+      })
+    }));
+  };
+  const renderLabel = (option, lbl, ttl) => {
+    const additionalTitle = option.countSelectedChild && option.isWithAction ? translate("Number of selected child groups - {count}").replace("{count}", option.countSelectedChild.toString()) : "";
+    const title = option.isWithAction ? translate("View {groupName} children").replace("{groupName}", ttl).concat(additionalTitle ? `${". "}${additionalTitle}` : "") : translate("Toggle {groupName} filter").replace("{groupName}", ttl);
+    const classN = classNames(["zen-checkbox-list-with-action__label", "zen-ellipsis", option.isWithAction ? "zen-checkbox-list-with-action__label--action" : ""]);
+    const otherArgs = option.isWithAction ? {
+      "data-btn": option.property
+    } : {};
+    const childEl = _jsxs(_Fragment, {
+      children: [_jsxs("div", Object.assign({
+        className: "zen-checkbox-list-with-action__label-text zen-ellipsis"
+      }, otherArgs, {
+        children: [_jsx("span", Object.assign({
+          className: "zen-ellipsis"
+        }, otherArgs, {
+          children: lbl
+        })), getLabelCountSelectedChild(option.countSelectedChild, otherArgs)]
+      })), _jsxs("div", Object.assign({
+        className: "zen-checkbox-list-with-action__label-info"
+      }, otherArgs, {
+        children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(IconChevronRight, {
+          size: "large"
+        })]
+      }))]
+    });
+    return option.isWithAction ? _jsx("button", Object.assign({
+      type: "button",
+      onClick: handleClick,
+      title: title,
+      className: classN
+    }, otherArgs, {
+      children: childEl
+    })) : _jsx("div", {
+      className: classN,
+      title: title,
+      children: childEl
+    });
+  };
+  const build = optionsArr => {
+    const selectSearchTerm = wholeString => {
+      if (!search.length) {
+        return wholeString;
+      }
+      let selectedString = wholeString;
+      search.forEach(searchPart => {
+        const strArr = selectedString.split(searchPart);
+        selectedString = strArr.map((str, ind) => _jsxs(Fragment, {
+          children: [ind ? _jsx("span", {
+            className: "zen-checkbox-list-with-action__singled",
+            children: searchPart
+          }, `searchTerm_${ind}_search`) : null, _jsx("span", {
+            children: str
+          }, `searchTerm_${ind}`)]
+        }, ind));
+      });
+      return selectedString;
     };
-    const handleClick = (e) => {
-        var _a;
-        const evtTarget = e.target;
-        const elId = evtTarget.getAttribute("data-btn") || ((_a = evtTarget.parentElement) === null || _a === void 0 ? void 0 : _a.getAttribute("data-btn")) || "";
-        onClick(elId);
-    };
-    const getLabelColorInfo = (color, withRightPadding, isHidden, extraArgs) => {
-        if (!color) {
-            return null;
-        }
-        const colorAlpha = Math.round(color.a * 100 / 255) / 100;
-        const opacityValue = colorAlpha < 0.1 ? 0.1 : colorAlpha;
-        const colorString = `rgba(${color.r},${color.g},${color.b},${opacityValue})`;
-        return _jsx("div", Object.assign({}, extraArgs, { className: classNames(["zen-checkbox-list-with-action__color-info", withRightPadding ? "zen-checkbox-list-with-action__color-info--right-indent" : "",
-                isHidden ? "zen-checkbox-list-with-action__color-info--hidden" : ""]), style: { backgroundColor: colorString } }));
-    };
-    const getLabelCountSelectedChild = (countSelectedChild, extraArgs) => {
-        if (!countSelectedChild) {
-            return null;
-        }
-        return _jsx("div", Object.assign({}, extraArgs, { "aria-hidden": "true", className: "zen-checkbox-list-with-action__label-count", children: _jsx("div", { className: "zen-checkbox-list-with-action__counter", children: _jsx("span", { children: countSelectedChild }) }) }));
-    };
-    const renderLabel = (option, lbl, ttl) => {
-        const additionalTitle = option.countSelectedChild && option.isWithAction ?
-            translate("Number of selected child groups - {count}").replace("{count}", option.countSelectedChild.toString()) : "";
-        const title = option.isWithAction ? translate("View {groupName} children").replace("{groupName}", ttl).concat(additionalTitle ? `${". "}${additionalTitle}` : "")
-            : translate("Toggle {groupName} filter").replace("{groupName}", ttl);
-        const classN = classNames(["zen-checkbox-list-with-action__label", "zen-ellipsis",
-            option.isWithAction ? "zen-checkbox-list-with-action__label--action" : ""]);
-        const otherArgs = option.isWithAction ? { "data-btn": option.property } : {};
-        const childEl = _jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: "zen-checkbox-list-with-action__label-text zen-ellipsis" }, otherArgs, { children: [_jsx("span", Object.assign({ className: "zen-ellipsis" }, otherArgs, { children: lbl })), getLabelCountSelectedChild(option.countSelectedChild, otherArgs)] })), _jsxs("div", Object.assign({ className: "zen-checkbox-list-with-action__label-info" }, otherArgs, { children: [getLabelColorInfo(option.color, option.isWithAction, option.partialChecked, otherArgs), option.isWithAction && _jsx(IconChevronRight, { size: "large" })] }))] });
-        return option.isWithAction ? _jsx("button", Object.assign({ type: "button", onClick: handleClick, title: title, className: classN }, otherArgs, { children: childEl })) : _jsx("div", { className: classN, title: title, children: childEl });
-    };
-    const build = (optionsArr) => {
-        const selectSearchTerm = (wholeString) => {
-            if (!search.length) {
-                return wholeString;
-            }
-            let selectedString = wholeString;
-            search.forEach(searchPart => {
-                const strArr = selectedString.split(searchPart);
-                selectedString = strArr.map((str, ind) => _jsxs(Fragment, { children: [ind ? _jsx("span", { className: "zen-checkbox-list-with-action__singled", children: searchPart }, `searchTerm_${ind}_search`) : null, _jsx("span", { children: str }, `searchTerm_${ind}`)] }, ind));
-            });
-            return selectedString;
-        };
-        return optionsArr ? _jsx("ul", { className: "zen-checkbox-list-with-action__list", children: optionsArr.map((opt, ind) => {
-                const titleForRender = opt.title || opt.label;
-                const labelForRender = selectSearchTerm(opt.label);
-                const labelElement = renderLabel(opt, labelForRender, titleForRender);
-                return _jsxs("li", { className: classNames(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]), "data-item": opt.property, children: [_jsx(Checkbox, { id: `${checkboxId}${opt.property}`, onChange: handleChange, className: classNames(["zen-checkbox-list-with-action__list-item zen-checkbox-list-with-action__action-checkbox",
-                                opt.isWithAction ? "" : "zen-checkbox-list-with-action__action-checkbox--full-width"]), indeterminate: opt.partialChecked, checked: opt.checked, disabled: opt.blocked, title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender), "data-indeterminate": opt.partialChecked, children: opt.isWithAction ? null : labelElement }), opt.isWithAction && labelElement] }, `li_${ind}_${opt.property}`);
-            }) }) : null;
-    };
-    return _jsxs("div", { className: classNames(["zen-checkbox-list-with-action", driveComponentClass || "", className || ""]), children: [label ? _jsx("div", { className: "zen-checkbox-list-with-action__title", children: label }) : null, build(options)] });
+    return optionsArr ? _jsx("ul", {
+      className: "zen-checkbox-list-with-action__list",
+      children: optionsArr.map((opt, ind) => {
+        const titleForRender = opt.title || opt.label;
+        const labelForRender = selectSearchTerm(opt.label);
+        const labelElement = renderLabel(opt, labelForRender, titleForRender);
+        return _jsxs("li", {
+          className: classNames(["zen-checkbox-list-with-action__action-item", opt.isWithAction ? "zen-checkbox-list-with-action__action-item--action" : ""]),
+          "data-item": opt.property,
+          children: [_jsx(Checkbox, {
+            id: `${checkboxId}${opt.property}`,
+            onChange: handleChange,
+            className: classNames(["zen-checkbox-list-with-action__list-item zen-checkbox-list-with-action__action-checkbox", opt.isWithAction ? "" : "zen-checkbox-list-with-action__action-checkbox--full-width"]),
+            indeterminate: opt.partialChecked,
+            checked: opt.checked,
+            disabled: opt.blocked,
+            title: translate("Toggle {groupName} filter").replace("{groupName}", titleForRender),
+            "data-indeterminate": opt.partialChecked,
+            children: opt.isWithAction ? null : labelElement
+          }), opt.isWithAction && labelElement]
+        }, `li_${ind}_${opt.property}`);
+      })
+    }) : null;
+  };
+  return _jsxs("div", {
+    className: classNames(["zen-checkbox-list-with-action", driveComponentClass || "", className || ""]),
+    children: [label ? _jsx("div", {
+      className: "zen-checkbox-list-with-action__title",
+      children: label
+    }) : null, build(options)]
+  });
 };
-export const TRANSLATIONS = [
-    "View {groupName} children",
-    "Toggle {groupName} filter",
-    "Number of selected child groups - {count}"
-];
+export const TRANSLATIONS = ["View {groupName} children", "Toggle {groupName} filter", "Number of selected child groups - {count}"];

package/esm/chip/chip.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement, useCallback, useId, useMemo } from "react";
 import { useDrive } from "../utils/theme/useDrive";
@@ -7,95 +8,193 @@ import { getChipStateClassName, getChipTriggerStateClassName } from "./utils/get
 import { IconClose } from "../icons/iconClose";
 import { useLanguage } from "../utils/localization/useLanguage";
 import { useChip } from "./utils/useChip";
+injectString("cs", "Close", "Zav\u0159\xEDt");
+injectString("da-DK", "Close", "Luk");
+injectString("de", "Close", "Schlie\xDFen");
+injectString("en", "Close", "Close");
+injectString("es", "Close", "Cerrar");
+injectString("fi-FI", "Close", "Sulje");
+injectString("fr", "Close", "Fermer");
+injectString("fr-FR", "Close", "Fermer");
+injectString("hu-HU", "Close", "Z\xE1rd be.");
+injectString("id", "Close", "Tutup");
+injectString("it", "Close", "Chiudere");
+injectString("ja", "Close", "\u9589\u3058\u308B");
+injectString("ko-KR", "Close", "\uB2EB\uAE30");
+injectString("ms", "Close", "Tutup");
+injectString("nb-NO", "Close", "Lukk");
+injectString("nl", "Close", "Sluiten");
+injectString("pl", "Close", "Zamknij");
+injectString("pt-BR", "Close", "Fechar");
+injectString("sk-SK", "Close", "Zatvor");
+injectString("sv", "Close", "St\xE4ng");
+injectString("th", "Close", "\u0E1B\u0E34\u0E14");
+injectString("tr", "Close", "Kapat");
+injectString("zh-Hans", "Close", "\u5173\u95ED");
+injectString("zh-TW", "Close", "\u95DC\u9589");
 function isChipTrigger(props) {
-    return "triggerRef" in props;
+  return "triggerRef" in props;
 }
-export const Chip = (props) => {
-    const { className, children, disabled, icon, id, status, quantity, onClose, title } = props;
-    const isTriggerMode = isChipTrigger(props);
-    const readonly = !isTriggerMode ? props.readonly : undefined;
-    const onChange = !isTriggerMode ? props.onChange : undefined;
-    const active = !isTriggerMode ? props.active : false;
-    const triggerRef = isTriggerMode ? props.triggerRef : undefined;
-    const closeAriaText = isTriggerMode ? props.closeAriaText : undefined;
-    const isOpen = isTriggerMode ? props.isOpen : false;
-    const onClick = isTriggerMode ? props.onClick : undefined;
-    const hasQuantity = typeof quantity === "number";
-    const chipId = useId();
-    const isDrive = useDrive();
-    const { translate } = useLanguage();
-    const driveTextClass = useDriveClassName("zen-chip-text-content");
-    const driveChipClass = useDriveClassName("zen-chip");
-    const hasIcon = !!icon;
-    const isClosable = !!onClose;
-    const hasContent = !!children;
-    const { ref, title: chipTitle } = useChip(title, isTriggerMode ? { triggerRef: triggerRef, children } : undefined);
-    const svgIcon = useMemo(() => hasIcon ? createElement(icon, {
-        className: "zen-chip__icon",
-        size: isDrive ? "huger" : "large"
-    }) : null, [hasIcon, icon, isDrive]);
-    const onChangeHandler = useCallback((e) => {
-        if (readonly || !onChange) {
-            return;
-        }
-        onChange(e.target.checked);
-    }, [onChange, readonly]);
-    const handleClick = useCallback(() => {
-        if (onClick) {
-            onClick(!isOpen);
-        }
-    }, [onClick, isOpen]);
-    const onKeyDownHandler = useCallback((e) => {
-        if (e.key === "Enter" && !disabled && !readonly && onChange) {
-            onChange(!active);
-            return;
-        }
-        if (e.key === " " && !disabled && !readonly && onChange) {
-            e.preventDefault();
-            onChange(!active);
-        }
-    }, [disabled, readonly, active, onChange]);
-    const chipTriggerKeyDownHandler = useCallback((e) => {
-        var _a;
-        if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-chip__close-button")) {
-            return;
-        }
-        if (e.key === "Enter" && !disabled && !readonly) {
-            e.preventDefault();
-            handleClick();
-            return;
-        }
-        if (e.key === " " && !disabled && !readonly) {
-            handleClick();
-        }
-    }, [disabled, readonly, handleClick]);
-    const onKeyUpHandler = useCallback((e) => {
-        var _a;
-        if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-chip--keyboard-nav");
-        }
-    }, [ref]);
-    const onBlurHandler = useCallback(() => {
-        var _a;
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove("zen-chip--keyboard-nav");
-    }, [ref]);
-    const handleClose = useCallback((e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        isClosable && onClose(id || chipId);
-    }, [isClosable, onClose, id, chipId]);
-    const memoizedClasses = useMemo(() => [
-        "zen-chip",
-        driveChipClass !== null && driveChipClass !== void 0 ? driveChipClass : "",
-        isTriggerMode ? getChipTriggerStateClassName(!!disabled, isOpen, status) : getChipStateClassName(!!disabled, !!readonly, active, status),
-        className !== null && className !== void 0 ? className : ""
-    ], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
-    const chipComponent = useMemo(() => _jsxs("label", { className: classNames(memoizedClasses), ref: ref, title: title || chipTitle, htmlFor: id || chipId, children: [_jsx("input", { checked: active, onBlur: onBlurHandler, onKeyUp: onKeyUpHandler, onKeyDown: onKeyDownHandler, onChange: onChangeHandler, id: id || chipId, className: "zen-chip__input", type: "checkbox", disabled: disabled, readOnly: readonly }), children ? _jsx("div", { className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && _jsx("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) })] }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly,
-        children, driveTextClass, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive]);
-    const chipTriggerComponent = useMemo(() => {
-        const extraAttributes = title ? { "aria-label": title } : chipTitle ? { "aria-label": chipTitle } : {};
-        return _jsx("div", Object.assign({ role: "button", tabIndex: 0 }, extraAttributes, { onClick: handleClick, onKeyDown: chipTriggerKeyDownHandler, className: classNames(memoizedClasses), "data-id": id || chipId, ref: triggerRef, children: _jsxs("div", { className: "zen-chip__content-wrapper", children: [hasContent ? _jsx("div", { className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]), children: children }) : null, svgIcon, isClosable && _jsx("button", { type: "button", className: "zen-chip__close-button", onClick: handleClose, title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huger" : "large", className: "zen-pill-non-actionable__close-icon" }) }), hasQuantity && quantity ? _jsx("div", { className: "zen-chip__quantity", children: quantity }) : null] }) }));
-    }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass,
-        children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, hasQuantity, quantity]);
-    return isTriggerMode ? chipTriggerComponent : chipComponent;
-};
+export const Chip = props => {
+  const {
+    className,
+    children,
+    disabled,
+    icon,
+    id,
+    status,
+    quantity,
+    onClose,
+    title
+  } = props;
+  const isTriggerMode = isChipTrigger(props);
+  const readonly = !isTriggerMode ? props.readonly : undefined;
+  const onChange = !isTriggerMode ? props.onChange : undefined;
+  const active = !isTriggerMode ? props.active : false;
+  const triggerRef = isTriggerMode ? props.triggerRef : undefined;
+  const closeAriaText = isTriggerMode ? props.closeAriaText : undefined;
+  const isOpen = isTriggerMode ? props.isOpen : false;
+  const onClick = isTriggerMode ? props.onClick : undefined;
+  const hasQuantity = typeof quantity === "number";
+  const chipId = useId();
+  const isDrive = useDrive();
+  const {
+    translate
+  } = useLanguage();
+  const driveTextClass = useDriveClassName("zen-chip-text-content");
+  const driveChipClass = useDriveClassName("zen-chip");
+  const hasIcon = !!icon;
+  const isClosable = !!onClose;
+  const hasContent = !!children;
+  const {
+    ref,
+    title: chipTitle
+  } = useChip(title, isTriggerMode ? {
+    triggerRef: triggerRef,
+    children
+  } : undefined);
+  const svgIcon = useMemo(() => hasIcon ? createElement(icon, {
+    className: "zen-chip__icon",
+    size: isDrive ? "huger" : "large"
+  }) : null, [hasIcon, icon, isDrive]);
+  const onChangeHandler = useCallback(e => {
+    if (readonly || !onChange) {
+      return;
+    }
+    onChange(e.target.checked);
+  }, [onChange, readonly]);
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick(!isOpen);
+    }
+  }, [onClick, isOpen]);
+  const onKeyDownHandler = useCallback(e => {
+    if (e.key === "Enter" && !disabled && !readonly && onChange) {
+      onChange(!active);
+      return;
+    }
+    if (e.key === " " && !disabled && !readonly && onChange) {
+      e.preventDefault();
+      onChange(!active);
+    }
+  }, [disabled, readonly, active, onChange]);
+  const chipTriggerKeyDownHandler = useCallback(e => {
+    var _a;
+    if ((_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.classList.contains("zen-chip__close-button")) {
+      return;
+    }
+    if (e.key === "Enter" && !disabled && !readonly) {
+      e.preventDefault();
+      handleClick();
+      return;
+    }
+    if (e.key === " " && !disabled && !readonly) {
+      handleClick();
+    }
+  }, [disabled, readonly, handleClick]);
+  const onKeyUpHandler = useCallback(e => {
+    var _a;
+    if (e.key === "Tab" || e.key === "Enter" || e.key === " ") {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add("zen-chip--keyboard-nav");
+    }
+  }, [ref]);
+  const onBlurHandler = useCallback(() => {
+    var _a;
+    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove("zen-chip--keyboard-nav");
+  }, [ref]);
+  const handleClose = useCallback(e => {
+    e.stopPropagation();
+    e.preventDefault();
+    isClosable && onClose(id || chipId);
+  }, [isClosable, onClose, id, chipId]);
+  const memoizedClasses = useMemo(() => ["zen-chip", driveChipClass !== null && driveChipClass !== void 0 ? driveChipClass : "", isTriggerMode ? getChipTriggerStateClassName(!!disabled, isOpen, status) : getChipStateClassName(!!disabled, !!readonly, active, status), className !== null && className !== void 0 ? className : ""], [driveChipClass, isTriggerMode, disabled, isOpen, status, readonly, active, className]);
+  const chipComponent = useMemo(() => _jsxs("label", {
+    className: classNames(memoizedClasses),
+    ref: ref,
+    title: title || chipTitle,
+    htmlFor: id || chipId,
+    children: [_jsx("input", {
+      checked: active,
+      onBlur: onBlurHandler,
+      onKeyUp: onKeyUpHandler,
+      onKeyDown: onKeyDownHandler,
+      onChange: onChangeHandler,
+      id: id || chipId,
+      className: "zen-chip__input",
+      type: "checkbox",
+      disabled: disabled,
+      readOnly: readonly
+    }), children ? _jsx("div", {
+      className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
+      children: children
+    }) : null, svgIcon, isClosable && _jsx("button", {
+      type: "button",
+      className: "zen-chip__close-button",
+      onClick: handleClose,
+      title: closeAriaText || translate("Close"),
+      "aria-label": closeAriaText || translate("Close"),
+      children: _jsx(IconClose, {
+        size: isDrive ? "huger" : "large",
+        className: "zen-pill-non-actionable__close-icon"
+      })
+    })]
+  }), [memoizedClasses, ref, title, chipTitle, id, chipId, active, onBlurHandler, onKeyUpHandler, onKeyDownHandler, onChangeHandler, disabled, readonly, children, driveTextClass, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive]);
+  const chipTriggerComponent = useMemo(() => {
+    const extraAttributes = title ? {
+      "aria-label": title
+    } : chipTitle ? {
+      "aria-label": chipTitle
+    } : {};
+    return _jsx("div", Object.assign({
+      role: "button",
+      tabIndex: 0
+    }, extraAttributes, {
+      onClick: handleClick,
+      onKeyDown: chipTriggerKeyDownHandler,
+      className: classNames(memoizedClasses),
+      "data-id": id || chipId,
+      ref: triggerRef,
+      children: _jsxs("div", {
+        className: "zen-chip__content-wrapper",
+        children: [hasContent ? _jsx("div", {
+          className: classNames(["zen-chip-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : ""]),
+          children: children
+        }) : null, svgIcon, isClosable && _jsx("button", {
+          type: "button",
+          className: "zen-chip__close-button",
+          onClick: handleClose,
+          title: closeAriaText || translate("Close"),
+          "aria-label": closeAriaText || translate("Close"),
+          children: _jsx(IconClose, {
+            size: isDrive ? "huger" : "large",
+            className: "zen-pill-non-actionable__close-icon"
+          })
+        }), hasQuantity && quantity ? _jsx("div", {
+          className: "zen-chip__quantity",
+          children: quantity
+        }) : null]
+      })
+    }));
+  }, [title, chipTitle, handleClick, chipTriggerKeyDownHandler, memoizedClasses, id, chipId, triggerRef, hasContent, driveTextClass, children, svgIcon, isClosable, handleClose, closeAriaText, translate, isDrive, hasQuantity, quantity]);
+  return isTriggerMode ? chipTriggerComponent : chipComponent;
+};