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

package/esm/alertRaw/alertRaw.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, useContext, useMemo } from "react";
 import AlertAnimation from "./components/alertAnimation";
@@ -14,57 +15,170 @@ import { IconException } from "../icons/iconException";
 import { themeContext } from "../utils/theme/themeContext";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
 import { Button } from "../button/button";
+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 typedIcons = {
-    error: IconException,
-    success: IconCheckRadio,
-    warning: IconWarning,
-    info: IconInfoCircle
+  error: IconException,
+  success: IconCheckRadio,
+  warning: IconWarning,
+  info: IconInfoCircle
 };
-const getIcon = (t) => typedIcons[t];
-export const AlertRaw = ({ id, type, header, text, buttons, className, onClose, animation, isOpen, ref }) => {
-    const { translate } = useLanguage();
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const { dark } = useContext(themeContext);
-    const alertClasses = classNames([
-        "zen-alert",
-        `zen-alert--${type || "info"}`,
-        isDrive ? "zen-alert--drive" : "",
-        isMobile ? "zen-alert--mobile" : "",
-        dark ? "zen-dark" : "",
-        header ? "zen-alert--with-header" : "",
-        className || ""
-    ]);
-    const onFooterPrimaryClick = useCallback(() => {
-        var _a, _b;
-        (_b = (_a = buttons.primary).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, [buttons, onClose]);
-    const onFooterTertiaryClick = useCallback(() => {
-        var _a, _b;
-        (_b = (_a = buttons.tertiary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
-        onClose();
-    }, [buttons, onClose]);
-    const primaryButton = useMemo(() => {
-        if (buttons.primary.icon) {
-            return _jsx(TextIconButton, { iconPosition: buttons.primary.iconPosition || ButtonIconPosition.Start, icon: buttons.primary.icon, onClick: onFooterPrimaryClick, link: buttons.primary.link, className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"), title: buttons.primary.title, type: ButtonType.Secondary, children: buttons.primary.text });
-        }
-        return _jsx(Button, { onClick: onFooterPrimaryClick, link: buttons.primary.link, className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"), title: buttons.primary.title, type: ButtonType.Secondary, children: buttons.primary.text });
-    }, [buttons.primary.icon, buttons.primary.iconPosition, buttons.primary.link, buttons.primary.text, buttons.primary.title, onFooterPrimaryClick, type]);
-    const tertiaryButton = useMemo(() => {
-        if (!buttons.tertiary) {
-            return null;
-        }
-        if (buttons.tertiary.icon) {
-            return _jsx(TextIconButton, { iconPosition: buttons.tertiary.iconPosition || ButtonIconPosition.Start, icon: buttons.tertiary.icon, title: buttons.tertiary.title, type: ButtonType.Tertiary, className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`, onClick: onFooterTertiaryClick, link: buttons.tertiary.link, children: buttons.tertiary.text });
-        }
-        return _jsx(Button, { title: buttons.tertiary.title, type: ButtonType.Tertiary, className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`, onClick: onFooterTertiaryClick, link: buttons.tertiary.link, children: buttons.tertiary.text });
-    }, [buttons.tertiary, onFooterTertiaryClick, type]);
-    return _jsx(AlertAnimation, { id: id, isOpen: isOpen, animation: animation, children: _jsx("div", { role: "status", "aria-atomic": "true", "aria-live": "polite", ref: ref, className: alertClasses, id: id, children: _jsxs("div", { className: "zen-alert__body-container", children: [_jsx("div", { className: "zen-alert__content", children: _jsx("div", { className: "zen-alert__header-container", children: _jsxs("div", { className: "zen-alert__header", children: [_jsx("div", { className: "zen-alert__icon", children: createElement(getIcon(type || "info"), {
-                                            size: isDrive ? "huge" : "large",
-                                            className: `zen-alert__icon--${type || "info"}`
-                                        }) }), _jsxs("div", { className: "zen-alert__body", children: [header && _jsx("div", { className: `zen-alert__title zen-alert__title--${type || "info"}`, children: header }), _jsx("div", { className: "zen-alert__text", children: text })] }), _jsx("div", { className: "zen-alert__actions", children: _jsx("button", { type: "button", className: classNames(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huge" : "large" }) }) })] }) }) }), _jsxs("div", { className: "zen-alert__body-actions", children: [tertiaryButton, primaryButton] })] }) }) });
+const getIcon = t => typedIcons[t];
+export const AlertRaw = ({
+  id,
+  type,
+  header,
+  text,
+  buttons,
+  className,
+  onClose,
+  animation,
+  isOpen,
+  ref
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const {
+    dark
+  } = useContext(themeContext);
+  const alertClasses = classNames(["zen-alert", `zen-alert--${type || "info"}`, isDrive ? "zen-alert--drive" : "", isMobile ? "zen-alert--mobile" : "", dark ? "zen-dark" : "", header ? "zen-alert--with-header" : "", className || ""]);
+  const onFooterPrimaryClick = useCallback(() => {
+    var _a, _b;
+    (_b = (_a = buttons.primary).onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+    onClose();
+  }, [buttons, onClose]);
+  const onFooterTertiaryClick = useCallback(() => {
+    var _a, _b;
+    (_b = (_a = buttons.tertiary) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+    onClose();
+  }, [buttons, onClose]);
+  const primaryButton = useMemo(() => {
+    if (buttons.primary.icon) {
+      return _jsx(TextIconButton, {
+        iconPosition: buttons.primary.iconPosition || ButtonIconPosition.Start,
+        icon: buttons.primary.icon,
+        onClick: onFooterPrimaryClick,
+        link: buttons.primary.link,
+        className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+        title: buttons.primary.title,
+        type: ButtonType.Secondary,
+        children: buttons.primary.text
+      });
+    }
+    return _jsx(Button, {
+      onClick: onFooterPrimaryClick,
+      link: buttons.primary.link,
+      className: "zen-alert__button zen-alert__primary-button zen-alert__primary-button--" + (type || "info"),
+      title: buttons.primary.title,
+      type: ButtonType.Secondary,
+      children: buttons.primary.text
+    });
+  }, [buttons.primary.icon, buttons.primary.iconPosition, buttons.primary.link, buttons.primary.text, buttons.primary.title, onFooterPrimaryClick, type]);
+  const tertiaryButton = useMemo(() => {
+    if (!buttons.tertiary) {
+      return null;
+    }
+    if (buttons.tertiary.icon) {
+      return _jsx(TextIconButton, {
+        iconPosition: buttons.tertiary.iconPosition || ButtonIconPosition.Start,
+        icon: buttons.tertiary.icon,
+        title: buttons.tertiary.title,
+        type: ButtonType.Tertiary,
+        className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+        onClick: onFooterTertiaryClick,
+        link: buttons.tertiary.link,
+        children: buttons.tertiary.text
+      });
+    }
+    return _jsx(Button, {
+      title: buttons.tertiary.title,
+      type: ButtonType.Tertiary,
+      className: `zen-alert__button zen-alert__tertiary-button zen-alert__tertiary-button--${type || "info"}`,
+      onClick: onFooterTertiaryClick,
+      link: buttons.tertiary.link,
+      children: buttons.tertiary.text
+    });
+  }, [buttons.tertiary, onFooterTertiaryClick, type]);
+  return _jsx(AlertAnimation, {
+    id: id,
+    isOpen: isOpen,
+    animation: animation,
+    children: _jsx("div", {
+      role: "status",
+      "aria-atomic": "true",
+      "aria-live": "polite",
+      ref: ref,
+      className: alertClasses,
+      id: id,
+      children: _jsxs("div", {
+        className: "zen-alert__body-container",
+        children: [_jsx("div", {
+          className: "zen-alert__content",
+          children: _jsx("div", {
+            className: "zen-alert__header-container",
+            children: _jsxs("div", {
+              className: "zen-alert__header",
+              children: [_jsx("div", {
+                className: "zen-alert__icon",
+                children: createElement(getIcon(type || "info"), {
+                  size: isDrive ? "huge" : "large",
+                  className: `zen-alert__icon--${type || "info"}`
+                })
+              }), _jsxs("div", {
+                className: "zen-alert__body",
+                children: [header && _jsx("div", {
+                  className: `zen-alert__title zen-alert__title--${type || "info"}`,
+                  children: header
+                }), _jsx("div", {
+                  className: "zen-alert__text",
+                  children: text
+                })]
+              }), _jsx("div", {
+                className: "zen-alert__actions",
+                children: _jsx("button", {
+                  type: "button",
+                  className: classNames(["zen-alert__close-button", `zen-alert__close-button--${type || "info"}`]),
+                  onClick: onClose,
+                  title: translate("Close"),
+                  "aria-label": translate("Close"),
+                  children: _jsx(IconClose, {
+                    size: isDrive ? "huge" : "large"
+                  })
+                })
+              })]
+            })
+          })
+        }), _jsxs("div", {
+          className: "zen-alert__body-actions",
+          children: [tertiaryButton, primaryButton]
+        })]
+      })
+    })
+  });
 };
-export const TRANSLATIONS = [
-    "Close"
-];
+export const TRANSLATIONS = ["Close"];

package/esm/banner/bannerMultipLine.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { DEFAULT_BANNER_SIZE, getBannerOptions } from "./bannerUtils";
@@ -9,23 +10,123 @@ import { Button } from "../button/button";
 import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useRef } from "react";
 import { useNodeText } from "../utils/useNodeText";
-export const BannerMultiline = ({ children, header, type = "warning", icon, action, onClose, role, ariaAtomic, ariaLive, size = DEFAULT_BANNER_SIZE, primaryAction, id, className = "" }) => {
-    const bannerOptions = getBannerOptions(type);
-    const { translate } = useLanguage();
-    const bannerBlockClassName = useDriveClassName("zen-banner__block");
-    const bannerHeaderClassName = useDriveClassName("zen-banner__header");
-    const bannerMessageClassName = useDriveClassName("zen-banner__message");
-    const closeButtonClassName = useDriveClassName("zen-banner__close-button");
-    const contentRef = useRef(null);
-    const text = useNodeText(contentRef);
-    const linkClasses = classNames(["zen-banner__link", "zen-banner__link--" + type]);
-    const blockClassNames = classNames([
-        "zen-banner",
-        "zen-banner__block",
-        bannerBlockClassName || "",
-        bannerOptions.blockClassName, className,
-        "zen-banner__block--multiline",
-        "zen-banner__block--" + size
-    ]);
-    return _jsx("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: _jsxs("div", { className: classNames(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]), children: [header && _jsxs("div", { className: "zen-banner__multiline-container", children: [_jsxs("div", { className: "zen-banner__header-container", children: [icon && header && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), _jsxs("div", { className: "zen-banner__message-container", children: [icon && !header && _jsx(TypeIcon, { className: "zen-banner__icon-block--top-gap", type: type }), _jsx("div", { ref: contentRef, title: text, className: classNames(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]), children: children }), onClose && !header && _jsx("button", { type: "button", className: "zen-banner__close-button zen-banner__close-button--top-gap", onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action zen-banner__action--multiline", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }) });
-};
+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");
+export const BannerMultiline = ({
+  children,
+  header,
+  type = "warning",
+  icon,
+  action,
+  onClose,
+  role,
+  ariaAtomic,
+  ariaLive,
+  size = DEFAULT_BANNER_SIZE,
+  primaryAction,
+  id,
+  className = ""
+}) => {
+  const bannerOptions = getBannerOptions(type);
+  const {
+    translate
+  } = useLanguage();
+  const bannerBlockClassName = useDriveClassName("zen-banner__block");
+  const bannerHeaderClassName = useDriveClassName("zen-banner__header");
+  const bannerMessageClassName = useDriveClassName("zen-banner__message");
+  const closeButtonClassName = useDriveClassName("zen-banner__close-button");
+  const contentRef = useRef(null);
+  const text = useNodeText(contentRef);
+  const linkClasses = classNames(["zen-banner__link", "zen-banner__link--" + type]);
+  const blockClassNames = classNames(["zen-banner", "zen-banner__block", bannerBlockClassName || "", bannerOptions.blockClassName, className, "zen-banner__block--multiline", "zen-banner__block--" + size]);
+  return _jsx("div", {
+    id: id,
+    className: blockClassNames,
+    role: role,
+    "aria-atomic": ariaAtomic,
+    "aria-live": ariaLive,
+    children: _jsxs("div", {
+      className: classNames(["zen-banner__content", "zen-banner__content--multiline", `zen-banner__content--${size}`]),
+      children: [header && _jsxs("div", {
+        className: "zen-banner__multiline-container",
+        children: [_jsxs("div", {
+          className: "zen-banner__header-container",
+          children: [icon && header && _jsx(TypeIcon, {
+            type: type
+          }), header && _jsx("div", {
+            className: classNames(["zen-banner__header", bannerHeaderClassName || ""]),
+            children: header
+          })]
+        }), onClose && _jsx("button", {
+          type: "button",
+          className: classNames(["zen-banner__close-button", closeButtonClassName || ""]),
+          onClick: onClose,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          children: _jsx(IconClose, {
+            size: bannerHeaderClassName ? "huge" : "large"
+          })
+        })]
+      }), _jsxs("div", {
+        className: "zen-banner__message-container",
+        children: [icon && !header && _jsx(TypeIcon, {
+          className: "zen-banner__icon-block--top-gap",
+          type: type
+        }), _jsx("div", {
+          ref: contentRef,
+          title: text,
+          className: classNames(["zen-banner__message", `zen-banner__message--${size}`, "zen-banner__message--multiline", bannerMessageClassName || ""]),
+          children: children
+        }), onClose && !header && _jsx("button", {
+          type: "button",
+          className: "zen-banner__close-button zen-banner__close-button--top-gap",
+          onClick: onClose,
+          title: translate("Close"),
+          "aria-label": translate("Close"),
+          children: _jsx(IconClose, {
+            size: bannerHeaderClassName ? "huge" : "large"
+          })
+        })]
+      }), (action || primaryAction) && _jsxs("div", {
+        className: "zen-banner__action zen-banner__action--multiline",
+        children: [action && _jsx(Button, {
+          className: linkClasses,
+          type: ButtonType.Tertiary,
+          link: action.link,
+          target: action.target,
+          onClick: action.onClick,
+          children: action.text
+        }), primaryAction && _jsx(Button, {
+          className: linkClasses,
+          type: ButtonType.Primary,
+          link: primaryAction.link,
+          target: primaryAction.target,
+          onClick: primaryAction.onClick,
+          children: primaryAction.text
+        })]
+      })]
+    })
+  });
+};

package/esm/banner/bannerSingleLine.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "../commonHelpers/classNames/classNames";
 import { Button } from "../button/button";
@@ -10,16 +11,102 @@ import { useDriveClassName } from "../utils/theme/useDriveClassName";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { useRef } from "react";
 import { useNodeText } from "../utils/useNodeText";
-export const BannerSingleLine = ({ children, header, type = "warning", icon, action, onClose, size = DEFAULT_BANNER_SIZE, role, ariaAtomic, ariaLive, className, primaryAction, id }) => {
-    const bannerOptions = getBannerOptions(type);
-    const { translate } = useLanguage();
-    const bannerHeaderClassName = useDriveClassName("zen-banner__header");
-    const bannerMessageClassName = useDriveClassName("zen-banner__message");
-    const closeButtonClassName = useDriveClassName("zen-banner__close-button");
-    const isMobile = useMobile();
-    const contentRef = useRef(null);
-    const text = useNodeText(contentRef);
-    const linkClasses = classNames(["zen-banner__link", "zen-banner__link--" + type]);
-    const blockClassNames = classNames(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
-    return _jsxs("div", { id: id, className: blockClassNames, role: role, "aria-atomic": ariaAtomic, "aria-live": ariaLive, children: [_jsxs("div", { className: classNames(["zen-banner__content", `zen-banner__content--${size}`]), children: [icon && _jsx(TypeIcon, { type: type }), header && _jsx("div", { className: classNames(["zen-banner__header", bannerHeaderClassName || ""]), children: header }), _jsx("div", { className: classNames(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]), ref: contentRef, title: text, children: children }), (action || primaryAction) && _jsxs("div", { className: "zen-banner__action", children: [action && _jsx(Button, { className: linkClasses, type: ButtonType.Tertiary, link: action.link, target: action.target, onClick: action.onClick, children: action.text }), primaryAction && _jsx(Button, { className: linkClasses, type: ButtonType.Primary, link: primaryAction.link, target: primaryAction.target, onClick: primaryAction.onClick, children: primaryAction.text })] })] }), onClose && _jsx("button", { type: "button", className: classNames(["zen-banner__close-button", closeButtonClassName || ""]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: bannerHeaderClassName ? "huge" : "large" }) })] });
-};
+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");
+export const BannerSingleLine = ({
+  children,
+  header,
+  type = "warning",
+  icon,
+  action,
+  onClose,
+  size = DEFAULT_BANNER_SIZE,
+  role,
+  ariaAtomic,
+  ariaLive,
+  className,
+  primaryAction,
+  id
+}) => {
+  const bannerOptions = getBannerOptions(type);
+  const {
+    translate
+  } = useLanguage();
+  const bannerHeaderClassName = useDriveClassName("zen-banner__header");
+  const bannerMessageClassName = useDriveClassName("zen-banner__message");
+  const closeButtonClassName = useDriveClassName("zen-banner__close-button");
+  const isMobile = useMobile();
+  const contentRef = useRef(null);
+  const text = useNodeText(contentRef);
+  const linkClasses = classNames(["zen-banner__link", "zen-banner__link--" + type]);
+  const blockClassNames = classNames(["zen-banner", "zen-banner__block", bannerOptions.blockClassName, className || "", "zen-banner__block--" + size]);
+  return _jsxs("div", {
+    id: id,
+    className: blockClassNames,
+    role: role,
+    "aria-atomic": ariaAtomic,
+    "aria-live": ariaLive,
+    children: [_jsxs("div", {
+      className: classNames(["zen-banner__content", `zen-banner__content--${size}`]),
+      children: [icon && _jsx(TypeIcon, {
+        type: type
+      }), header && _jsx("div", {
+        className: classNames(["zen-banner__header", bannerHeaderClassName || ""]),
+        children: header
+      }), _jsx("div", {
+        className: classNames(["zen-banner__message", bannerMessageClassName || "", isMobile ? "zen-banner__message--mobile" : ""]),
+        ref: contentRef,
+        title: text,
+        children: children
+      }), (action || primaryAction) && _jsxs("div", {
+        className: "zen-banner__action",
+        children: [action && _jsx(Button, {
+          className: linkClasses,
+          type: ButtonType.Tertiary,
+          link: action.link,
+          target: action.target,
+          onClick: action.onClick,
+          children: action.text
+        }), primaryAction && _jsx(Button, {
+          className: linkClasses,
+          type: ButtonType.Primary,
+          link: primaryAction.link,
+          target: primaryAction.target,
+          onClick: primaryAction.onClick,
+          children: primaryAction.text
+        })]
+      })]
+    }), onClose && _jsx("button", {
+      type: "button",
+      className: classNames(["zen-banner__close-button", closeButtonClassName || ""]),
+      onClick: onClose,
+      title: translate("Close"),
+      "aria-label": translate("Close"),
+      children: _jsx(IconClose, {
+        size: bannerHeaderClassName ? "huge" : "large"
+      })
+    })]
+  });
+};