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

package/dist/notification/notification.js

@@ -1,11 +1,43 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.Notification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+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");
 const pushNotification_1 = __importDefault(require("./pushNotification/pushNotification"));
 const classNames_1 = require("../commonHelpers/classNames/classNames");
 const iconCrossThin_1 = require("../icons/deprecated/iconCrossThin");
@@ -16,23 +48,94 @@ const iconHexonalWarning_1 = require("../icons/iconHexonalWarning");
 const iconCheckRadio_1 = require("../icons/iconCheckRadio");
 const iconDiamondWarning_1 = require("../icons/iconDiamondWarning");
 const useLanguage_1 = require("../utils/localization/useLanguage");
-const Notification = ({ id, isCollapsible = true, type, title, text, footerButtons, className, onClose, isOpen = true, ref }) => {
-    const getIcon = (0, react_1.useCallback)((t) => {
-        switch (t) {
-            case "error": return iconHexonalWarning_1.IconHexonalWarning;
-            case "success": return iconCheckRadio_1.IconCheckRadio;
-            case "warning": return iconDiamondWarning_1.IconDiamondWarning;
-            case "info":
-            default: return iconInfoCircle_1.IconInfoCircle;
-        }
-    }, []);
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)(pushNotification_1.default, { isOpen: isOpen, children: (0, jsx_runtime_1.jsxs)("div", { ref: ref, className: `zen-push zen-push--${type || "info"} ${className || ""}`, id: id, children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-push__content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-push__header", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-push__icon", children: (0, react_1.createElement)(getIcon(type || "info"), {
-                                        size: "huge",
-                                        className: `zen-push__icon--${type || "info"}`
-                                    }) }), (0, jsx_runtime_1.jsx)("div", { className: `zen-push__title zen-push__title--${type || "info"}`, children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "zen-push__body", children: [(0, jsx_runtime_1.jsx)("div", { className: "zen-push__text", children: text }), (0, jsx_runtime_1.jsx)("div", { className: "zen-push__body-buttons", children: footerButtons && (0, jsx_runtime_1.jsxs)("div", { className: "zen-push__body-buttons", children: [footerButtons.teritary && (0, jsx_runtime_1.jsx)(button_1.Button, { title: footerButtons.teritary.title, type: buttonType_1.ButtonType.Tertiary, className: `zen-push__button zen-push__tertiary-button zen-push__tertiary-button--${type || "info"}`, onClick: footerButtons.teritary.onClick, link: footerButtons.teritary.link, children: footerButtons.teritary.text }), footerButtons.primary && (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: footerButtons.primary.onClick, link: footerButtons.primary.link, className: "zen-push__button zen-push__primary-button zen-push__primary-button--" + (type || "info"), title: footerButtons.primary.title, type: buttonType_1.ButtonType.Primary, children: footerButtons.primary.text })] }) })] })] }), isCollapsible && (0, jsx_runtime_1.jsx)("div", { className: "zen-push__actions", children: (0, jsx_runtime_1.jsx)("button", { type: "button", className: (0, classNames_1.classNames)(["zen-push__close-button", `zen-push__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, {}) }) })] }) });
+const Notification = ({
+  id,
+  isCollapsible = true,
+  type,
+  title,
+  text,
+  footerButtons,
+  className,
+  onClose,
+  isOpen = true,
+  ref
+}) => {
+  const getIcon = (0, react_1.useCallback)(t => {
+    switch (t) {
+      case "error":
+        return iconHexonalWarning_1.IconHexonalWarning;
+      case "success":
+        return iconCheckRadio_1.IconCheckRadio;
+      case "warning":
+        return iconDiamondWarning_1.IconDiamondWarning;
+      case "info":
+      default:
+        return iconInfoCircle_1.IconInfoCircle;
+    }
+  }, []);
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)(pushNotification_1.default, {
+    isOpen: isOpen,
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      ref: ref,
+      className: `zen-push zen-push--${type || "info"} ${className || ""}`,
+      id: id,
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-push__content",
+        children: [(0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-push__header",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-push__icon",
+            children: (0, react_1.createElement)(getIcon(type || "info"), {
+              size: "huge",
+              className: `zen-push__icon--${type || "info"}`
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: `zen-push__title zen-push__title--${type || "info"}`,
+            children: title
+          })]
+        }), (0, jsx_runtime_1.jsxs)("div", {
+          className: "zen-push__body",
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: "zen-push__text",
+            children: text
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: "zen-push__body-buttons",
+            children: footerButtons && (0, jsx_runtime_1.jsxs)("div", {
+              className: "zen-push__body-buttons",
+              children: [footerButtons.teritary && (0, jsx_runtime_1.jsx)(button_1.Button, {
+                title: footerButtons.teritary.title,
+                type: buttonType_1.ButtonType.Tertiary,
+                className: `zen-push__button zen-push__tertiary-button zen-push__tertiary-button--${type || "info"}`,
+                onClick: footerButtons.teritary.onClick,
+                link: footerButtons.teritary.link,
+                children: footerButtons.teritary.text
+              }), footerButtons.primary && (0, jsx_runtime_1.jsx)(button_1.Button, {
+                onClick: footerButtons.primary.onClick,
+                link: footerButtons.primary.link,
+                className: "zen-push__button zen-push__primary-button zen-push__primary-button--" + (type || "info"),
+                title: footerButtons.primary.title,
+                type: buttonType_1.ButtonType.Primary,
+                children: footerButtons.primary.text
+              })]
+            })
+          })]
+        })]
+      }), isCollapsible && (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-push__actions",
+        children: (0, jsx_runtime_1.jsx)("button", {
+          type: "button",
+          className: (0, classNames_1.classNames)(["zen-push__close-button", `zen-push__close-button--${type || "info"}`]),
+          onClick: onClose,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          children: (0, jsx_runtime_1.jsx)(iconCrossThin_1.IconCrossThin, {})
+        })
+      })]
+    })
+  });
 };
 exports.Notification = Notification;
-exports.TRANSLATIONS = [
-    "Close"
-];
+exports.TRANSLATIONS = ["Close"];

package/dist/pagination/paginationArrow.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.PaginationArrow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
@@ -10,15 +16,79 @@ const buttonType_1 = require("../button/buttonType");
 const useLanguage_1 = require("../utils/localization/useLanguage");
 const iconChevronRight_1 = require("../icons/iconChevronRight");
 const iconArrowRight_1 = require("../icons/iconArrowRight");
-const PaginationArrow = ({ value, disabled, type = paginationType_1.PaginationType.Normal, arrowButtonHandler }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const previousButtonTitle = translate("Previous page");
-    const nextButtonTitle = translate("Next page");
-    const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
-    return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, { className: "zen-pagination__arrow-navigation-button", "data-page": value, "aria-label": buttonTitle, title: buttonTitle, disabled: disabled, onClick: arrowButtonHandler, type: type === paginationType_1.PaginationType.Compact ? buttonType_1.ButtonType.TertiaryBlack : buttonType_1.ButtonType.Secondary, icon: type === paginationType_1.PaginationType.Compact ? iconChevronRight_1.IconChevronRight : iconArrowRight_1.IconArrowRight, iconSize: type === paginationType_1.PaginationType.Compact ? svgIconSize_1.SvgIconSize.Big : svgIconSize_1.SvgIconSize.Large, iconPosition: textIconButton_1.ButtonIconPosition.Start, iconClasses: (0, classNames_1.classNames)(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""]) });
+injectString("cs", "Previous page", "P\u0159edchoz\xED str\xE1nka");
+injectString("da-DK", "Previous page", "Forrige side");
+injectString("de", "Previous page", "Vorherige Seite");
+injectString("en", "Previous page", "Previous page");
+injectString("es", "Previous page", "P\xE1gina anterior");
+injectString("fi-FI", "Previous page", "Edellinen sivu");
+injectString("fr", "Previous page", "Page pr\xE9c\xE9dente");
+injectString("fr-FR", "Previous page", "Page pr\xE9c\xE9dente");
+injectString("hu-HU", "Previous page", "El\u0151z\u0151 oldal");
+injectString("id", "Previous page", "Halaman sebelumnya");
+injectString("it", "Previous page", "Pagina precedente");
+injectString("ja", "Previous page", "\u524D\u306E\u30DA\u30FC\u30B8");
+injectString("ko-KR", "Previous page", "\uC774\uC804 \uD398\uC774\uC9C0");
+injectString("ms", "Previous page", "Halaman sebelumnya");
+injectString("nb-NO", "Previous page", "Forrige side");
+injectString("nl", "Previous page", "Vorige pagina");
+injectString("pl", "Previous page", "Poprzednia strona");
+injectString("pt-BR", "Previous page", "P\xE1gina anterior");
+injectString("sk-SK", "Previous page", "Predch\xE1dzaj\xFAca str\xE1nka");
+injectString("sv", "Previous page", "F\xF6reg\xE5ende sida");
+injectString("th", "Previous page", "\u0E2B\u0E19\u0E49\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E2B\u0E19\u0E49\u0E32");
+injectString("tr", "Previous page", "\xD6nceki sayfa");
+injectString("zh-Hans", "Previous page", "\u4E0A\u4E00\u9875");
+injectString("zh-TW", "Previous page", "\u4E0A\u4E00\u9801");
+injectString("cs", "Next page", "Dal\u0161\xED str\xE1nka");
+injectString("da-DK", "Next page", "N\xE6ste side");
+injectString("de", "Next page", "N\xE4chste Seite");
+injectString("en", "Next page", "Next page");
+injectString("es", "Next page", "Siguiente p\xE1gina");
+injectString("fi-FI", "Next page", "Seuraava sivu");
+injectString("fr", "Next page", "Page suivante");
+injectString("fr-FR", "Next page", "Page suivante");
+injectString("hu-HU", "Next page", "K\xF6vetkez\u0151 oldal");
+injectString("id", "Next page", "Halaman selanjutnya");
+injectString("it", "Next page", "Pagina successiva");
+injectString("ja", "Next page", "\u6B21\u306E\u30DA\u30FC\u30B8");
+injectString("ko-KR", "Next page", "\uB2E4\uC74C \uD398\uC774\uC9C0");
+injectString("ms", "Next page", "Halaman seterusnya");
+injectString("nb-NO", "Next page", "Neste side");
+injectString("nl", "Next page", "Volgende pagina");
+injectString("pl", "Next page", "Nast\u0119pna strona");
+injectString("pt-BR", "Next page", "Pr\xF3xima p\xE1gina");
+injectString("sk-SK", "Next page", "\u010Eal\u0161ia str\xE1nka");
+injectString("sv", "Next page", "N\xE4sta sida");
+injectString("th", "Next page", "\u0E2B\u0E19\u0E49\u0E32\u0E16\u0E31\u0E14\u0E44\u0E1B");
+injectString("tr", "Next page", "Sonraki sayfa");
+injectString("zh-Hans", "Next page", "\u4E0B\u4E00\u9875");
+injectString("zh-TW", "Next page", "\u4E0B\u4E00\u9801");
+const PaginationArrow = ({
+  value,
+  disabled,
+  type = paginationType_1.PaginationType.Normal,
+  arrowButtonHandler
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const previousButtonTitle = translate("Previous page");
+  const nextButtonTitle = translate("Next page");
+  const buttonTitle = value === "next" ? nextButtonTitle : previousButtonTitle;
+  return (0, jsx_runtime_1.jsx)(textIconButton_1.TextIconButton, {
+    className: "zen-pagination__arrow-navigation-button",
+    "data-page": value,
+    "aria-label": buttonTitle,
+    title: buttonTitle,
+    disabled: disabled,
+    onClick: arrowButtonHandler,
+    type: type === paginationType_1.PaginationType.Compact ? buttonType_1.ButtonType.TertiaryBlack : buttonType_1.ButtonType.Secondary,
+    icon: type === paginationType_1.PaginationType.Compact ? iconChevronRight_1.IconChevronRight : iconArrowRight_1.IconArrowRight,
+    iconSize: type === paginationType_1.PaginationType.Compact ? svgIconSize_1.SvgIconSize.Big : svgIconSize_1.SvgIconSize.Large,
+    iconPosition: textIconButton_1.ButtonIconPosition.Start,
+    iconClasses: (0, classNames_1.classNames)(["zen-pagination__arrow-navigation-button-icon", value === "previous" ? "zen-pagination__arrow-navigation-button-icon--rotate" : ""])
+  });
 };
 exports.PaginationArrow = PaginationArrow;
-exports.TRANSLATIONS = [
-    "Previous page",
-    "Next page"
-];
+exports.TRANSLATIONS = ["Previous page", "Next page"];

package/dist/pagination/paginationText/paginationText.js

@@ -1,17 +1,51 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.PaginationText = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-const PaginationText = ({ amount, from, to }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const children = translate("Showing {from} - {to} of {total}")
-        .replace("{from}", from.toString())
-        .replace("{to}", to.toString())
-        .replace("{total}", amount.toString());
-    return (0, jsx_runtime_1.jsx)("span", { className: "zen-pagination__text", children: children });
+injectString("cs", "Showing {from} - {to} of {total}", "Zobrazuji {from}\u2013{to} z\xA0{total}");
+injectString("da-DK", "Showing {from} - {to} of {total}", "Viser {fra} - {til} af {total}");
+injectString("de", "Showing {from} - {to} of {total}", "{from} - {to} von {total} werden angezeigt");
+injectString("en", "Showing {from} - {to} of {total}", "Showing {from} - {to} of {total}");
+injectString("es", "Showing {from} - {to} of {total}", "Mostrando {from} - {to} de {total}");
+injectString("fi-FI", "Showing {from} - {to} of {total}", "N\xE4ytet\xE4\xE4n {from} - {to} / {total}");
+injectString("fr", "Showing {from} - {to} of {total}", "Affichage de {from} \xE0 {to} sur {total}");
+injectString("fr-FR", "Showing {from} - {to} of {total}", "Affichage de {from} - {to} sur {total}");
+injectString("hu-HU", "Showing {from} - {to} of {total}", "L\xE1that\xF3: {from} - {to} a teljes {total} k\xF6z\xFCl.");
+injectString("id", "Showing {from} - {to} of {total}", "Menampilkan {from} - {to} dari {total}");
+injectString("it", "Showing {from} - {to} of {total}", "Mostra {from} - {to} di {total}");
+injectString("ja", "Showing {from} - {to} of {total}", "{total} \u306E {from} \u304B\u3089 {to} \u3092\u8868\u793A\u3057\u3066\u3044\u307E\u3059");
+injectString("ko-KR", "Showing {from} - {to} of {total}", "{total} \uC911 {from}~{to} \uD45C\uC2DC");
+injectString("ms", "Showing {from} - {to} of {total}", "Menunjukkan {from} - {to} daripada {total}");
+injectString("nb-NO", "Showing {from} - {to} of {total}", "Viser {from} - {to} av {total}");
+injectString("nl", "Showing {from} - {to} of {total}", "{from} - {to} van {total} worden weergegeven");
+injectString("pl", "Showing {from} - {to} of {total}", "Wy\u015Bwietlono pozycje {from}\u2013{to} z {total}");
+injectString("pt-BR", "Showing {from} - {to} of {total}", "Mostrando {from} - {to} de {total}");
+injectString("sk-SK", "Showing {from} - {to} of {total}", "Zobrazuje sa {from} - {to} z {total}.");
+injectString("sv", "Showing {from} - {to} of {total}", "Visar {from}\u2013{to} av {total}");
+injectString("th", "Showing {from} - {to} of {total}", "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E41\u0E2A\u0E14\u0E07 {from} - {to} \u0E08\u0E32\u0E01 {total}");
+injectString("tr", "Showing {from} - {to} of {total}", "{from} - {to} / {total} g\xF6steriliyor");
+injectString("zh-Hans", "Showing {from} - {to} of {total}", "\u663E\u793A {from} - {to} \u9875\uFF0C\u5171 {total} \u9875");
+injectString("zh-TW", "Showing {from} - {to} of {total}", "\u986F\u793A {from} - {to} (\u5171 {total})");
+const PaginationText = ({
+  amount,
+  from,
+  to
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const children = translate("Showing {from} - {to} of {total}").replace("{from}", from.toString()).replace("{to}", to.toString()).replace("{total}", amount.toString());
+  return (0, jsx_runtime_1.jsx)("span", {
+    className: "zen-pagination__text",
+    children: children
+  });
 };
 exports.PaginationText = PaginationText;
-exports.TRANSLATIONS = [
-    "Showing {from} - {to} of {total}"
-];
+exports.TRANSLATIONS = ["Showing {from} - {to} of {total}"];

package/dist/pill/components/pillNonActionable/pillNonActionable.js

@@ -1,5 +1,11 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.NonActionablePill = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -9,29 +15,92 @@ const usePillSize_1 = require("../../../commonHelpers/hooks/usePillSize");
 const getPillTypeClassName_1 = require("../../../utils/pillUtils/getPillTypeClassName");
 const useLanguage_1 = require("../../../utils/localization/useLanguage");
 const useDrive_1 = require("../../../utils/theme/useDrive");
+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");
 const useDriveClassName_1 = require("../../../utils/theme/useDriveClassName");
-const NonActionablePill = ({ icon, type = "default", size = "default", onClose, closeAriaText, children, className, id }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isDrive = (0, useDrive_1.useDrive)();
-    const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-text-content");
-    const drivePillClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-non-actionable");
-    const isClosable = !!onClose;
-    const hasIcon = !!icon;
-    const hasContent = !!children;
-    const { contentClasses, ref, title, isFixedSize, isTextContentHidden } = (0, usePillSize_1.usePillSize)({ size, iconPosition: icon ? "left" : undefined, onClose, hasContent });
-    const svgIcon = (0, react_1.useMemo)(() => hasIcon ? (0, react_1.createElement)(icon, {
-        className: "zen-pill-non-actionable__icon",
-        size: isDrive ? "large" : "big"
-    }) : null, [hasIcon, icon, isDrive]);
-    return (0, jsx_runtime_1.jsx)("div", { "data-id": id, ref: ref, className: (0, classNames_1.classNames)([
-            "zen-pill-non-actionable",
-            drivePillClass !== null && drivePillClass !== void 0 ? drivePillClass : "",
-            isClosable ? "zen-pill-non-actionable--closable" : "",
-            (0, getPillTypeClassName_1.getPillTypeClassName)(type),
-            className !== null && className !== void 0 ? className : ""
-        ]), style: { width: isFixedSize ? size : "" }, children: (0, jsx_runtime_1.jsxs)("div", { className: contentClasses, children: [svgIcon, hasContent ? (0, jsx_runtime_1.jsx)("div", { title: title, className: (0, classNames_1.classNames)(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : "", isTextContentHidden ? "zen-pill-text-content--hidden" : ""]), children: children }) : null, isClosable && (0, jsx_runtime_1.jsx)("button", { type: "button", className: "zen-pill-non-actionable__close-button", onClick: () => onClose(id || ""), title: closeAriaText || translate("Close"), "aria-label": closeAriaText || translate("Close"), children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, { size: isDrive ? "large" : "big", className: "zen-pill-non-actionable__close-icon" }) })] }) });
+const NonActionablePill = ({
+  icon,
+  type = "default",
+  size = "default",
+  onClose,
+  closeAriaText,
+  children,
+  className,
+  id
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isDrive = (0, useDrive_1.useDrive)();
+  const driveTextClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-text-content");
+  const drivePillClass = (0, useDriveClassName_1.useDriveClassName)("zen-pill-non-actionable");
+  const isClosable = !!onClose;
+  const hasIcon = !!icon;
+  const hasContent = !!children;
+  const {
+    contentClasses,
+    ref,
+    title,
+    isFixedSize,
+    isTextContentHidden
+  } = (0, usePillSize_1.usePillSize)({
+    size,
+    iconPosition: icon ? "left" : undefined,
+    onClose,
+    hasContent
+  });
+  const svgIcon = (0, react_1.useMemo)(() => hasIcon ? (0, react_1.createElement)(icon, {
+    className: "zen-pill-non-actionable__icon",
+    size: isDrive ? "large" : "big"
+  }) : null, [hasIcon, icon, isDrive]);
+  return (0, jsx_runtime_1.jsx)("div", {
+    "data-id": id,
+    ref: ref,
+    className: (0, classNames_1.classNames)(["zen-pill-non-actionable", drivePillClass !== null && drivePillClass !== void 0 ? drivePillClass : "", isClosable ? "zen-pill-non-actionable--closable" : "", (0, getPillTypeClassName_1.getPillTypeClassName)(type), className !== null && className !== void 0 ? className : ""]),
+    style: {
+      width: isFixedSize ? size : ""
+    },
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: contentClasses,
+      children: [svgIcon, hasContent ? (0, jsx_runtime_1.jsx)("div", {
+        title: title,
+        className: (0, classNames_1.classNames)(["zen-pill-text-content", driveTextClass !== null && driveTextClass !== void 0 ? driveTextClass : "", isTextContentHidden ? "zen-pill-text-content--hidden" : ""]),
+        children: children
+      }) : null, isClosable && (0, jsx_runtime_1.jsx)("button", {
+        type: "button",
+        className: "zen-pill-non-actionable__close-button",
+        onClick: () => onClose(id || ""),
+        title: closeAriaText || translate("Close"),
+        "aria-label": closeAriaText || translate("Close"),
+        children: (0, jsx_runtime_1.jsx)(iconClose_1.IconClose, {
+          size: isDrive ? "large" : "big",
+          className: "zen-pill-non-actionable__close-icon"
+        })
+      })]
+    })
+  });
 };
 exports.NonActionablePill = NonActionablePill;
-exports.TRANSLATIONS = [
-    "Close"
-];
+exports.TRANSLATIONS = ["Close"];

package/dist/pillBox/components/pillBoxItem.js

@@ -1,17 +1,60 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.PillBoxItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classNames_1 = require("../../commonHelpers/classNames/classNames");
+injectString("cs", "Remove selection", "Odebrat v\xFDb\u011Br");
+injectString("da-DK", "Remove selection", "Fjern markering");
+injectString("de", "Remove selection", "Auswahl entfernen");
+injectString("en", "Remove selection", "Remove selection");
+injectString("es", "Remove selection", "Eliminar selecci\xF3n");
+injectString("fi-FI", "Remove selection", "Poista valinta");
+injectString("fr", "Remove selection", "Supprimer la s\xE9lection");
+injectString("fr-FR", "Remove selection", "Supprimer s\xE9lection");
+injectString("hu-HU", "Remove selection", "T\xF6r\xF6ld a kijel\xF6l\xE9st.");
+injectString("id", "Remove selection", "Hapus pilihan");
+injectString("it", "Remove selection", "Rimuovere selezione");
+injectString("ja", "Remove selection", "\u9078\u629E\u3092\u524A\u9664");
+injectString("ko-KR", "Remove selection", "\uC120\uD0DD \uD56D\uBAA9 \uC81C\uAC70");
+injectString("ms", "Remove selection", "Alih keluar pilihan");
+injectString("nb-NO", "Remove selection", "Fjern valg");
+injectString("nl", "Remove selection", "Selectie verwijderen");
+injectString("pl", "Remove selection", "Usu\u0144 zaznaczenie");
+injectString("pt-BR", "Remove selection", "Remover sele\xE7\xE3o");
+injectString("sk-SK", "Remove selection", "Odstr\xE1ni\u0165 v\xFDber");
+injectString("sv", "Remove selection", "Ta bort markering");
+injectString("th", "Remove selection", "\u0E25\u0E1A\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01");
+injectString("tr", "Remove selection", "Se\xE7imi kald\u0131r");
+injectString("zh-Hans", "Remove selection", "\u5220\u9664\u6240\u9009\u5185\u5BB9");
+injectString("zh-TW", "Remove selection", "\u79FB\u9664\u9078\u53D6\u9805\u76EE");
 const pill_1 = require("../../pill/pill");
 const useLanguage_1 = require("../../utils/localization/useLanguage");
-exports.PillBoxItem = (0, react_1.memo)(function innerPillItem({ item, onRemove, className }) {
-    var _a;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    return (0, jsx_runtime_1.jsx)(pill_1.Pill, { id: item.id, closeAriaText: translate("Remove selection"), onClose: () => onRemove(item.id), className: (0, classNames_1.classNames)(["zen-pill-box-item zen-caption", (_a = item.className) !== null && _a !== void 0 ? _a : "", className]), children: (0, jsx_runtime_1.jsx)("span", { className: "zen-caption__content", children: item.name }) }, `${item.id}-${item.name}`);
+exports.PillBoxItem = (0, react_1.memo)(function innerPillItem({
+  item,
+  onRemove,
+  className
+}) {
+  var _a;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  return (0, jsx_runtime_1.jsx)(pill_1.Pill, {
+    id: item.id,
+    closeAriaText: translate("Remove selection"),
+    onClose: () => onRemove(item.id),
+    className: (0, classNames_1.classNames)(["zen-pill-box-item zen-caption", (_a = item.className) !== null && _a !== void 0 ? _a : "", className]),
+    children: (0, jsx_runtime_1.jsx)("span", {
+      className: "zen-caption__content",
+      children: item.name
+    })
+  }, `${item.id}-${item.name}`);
 });
-exports.TRANSLATIONS = [
-    "Remove selection"
-];
+exports.TRANSLATIONS = ["Remove selection"];