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

package/esm/timePickerRaw/timePickerRaw.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 { FilterButton } from "../filterButton/filterButton";
@@ -12,64 +13,278 @@ import { getSelectItemsForTimePicker } from "./timePickerUtils";
 import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { getAriaAttributes } from "../commonHelpers/getAriaAttributes";
 import { useFormFieldValues } from "../commonHelpers/hooks/useFormFieldValues/useFormFieldValues";
+injectString("cs", "Select hour", "Vybrat hodiny");
+injectString("da-DK", "Select hour", "V\xE6lg time");
+injectString("de", "Select hour", "Stunde ausw\xE4hlen");
+injectString("en", "Select hour", "Select hour");
+injectString("es", "Select hour", "Seleccionar hora");
+injectString("fi-FI", "Select hour", "Valitse tunti");
+injectString("fr", "Select hour", "S\xE9lectionner l\u2019heure");
+injectString("fr-FR", "Select hour", "S\xE9lectionner l\u2019heure");
+injectString("hu-HU", "Select hour", "V\xE1lassz \xF3r\xE1t.");
+injectString("id", "Select hour", "Pilih jam");
+injectString("it", "Select hour", "Seleziona ora");
+injectString("ja", "Select hour", "\u6642\u9593\u3092\u9078\u629E");
+injectString("ko-KR", "Select hour", "\uC2DC\uAC04 \uC120\uD0DD");
+injectString("ms", "Select hour", "Pilih jam");
+injectString("nb-NO", "Select hour", "Velg time");
+injectString("nl", "Select hour", "Uur selecteren");
+injectString("pl", "Select hour", "Wybierz godzin\u0119");
+injectString("pt-BR", "Select hour", "Selecionar hora");
+injectString("sk-SK", "Select hour", "Vyberte hodinu");
+injectString("sv", "Select hour", "V\xE4lj timme");
+injectString("th", "Select hour", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E0A\u0E31\u0E48\u0E27\u0E42\u0E21\u0E07");
+injectString("tr", "Select hour", "Saat se\xE7");
+injectString("zh-Hans", "Select hour", "\u9009\u62E9\u5C0F\u65F6");
+injectString("zh-TW", "Select hour", "\u9078\u53D6\u5C0F\u6642");
+injectString("da-DK", "Select minutes", "V\xE6lg minutter");
+injectString("en", "Select minutes", "Select minutes");
+injectString("fi-FI", "Select minutes", "Valitse minuutit");
+injectString("hu-HU", "Select minutes", "V\xE1lassz perceket.");
+injectString("ko-KR", "Select minutes", "\uBD84 \uC120\uD0DD");
+injectString("nb-NO", "Select minutes", "Velg minutter");
+injectString("sk-SK", "Select minutes", "Vyberte min\xFAty");
+injectString("zh-TW", "Select minutes", "\u9078\u53D6\u5206\u9418");
+injectString("cs", "Apply changes", "Pou\u017E\xEDt zm\u011Bny");
+injectString("da-DK", "Apply changes", "Anvend \xE6ndringer");
+injectString("de", "Apply changes", "\xC4nderungen anwenden");
+injectString("en", "Apply changes", "Apply changes");
+injectString("es", "Apply changes", "Aplicar cambios");
+injectString("fi-FI", "Apply changes", "Ota muutokset k\xE4ytt\xF6\xF6n");
+injectString("fr", "Apply changes", "Appliquer les modifications");
+injectString("fr-FR", "Apply changes", "Appliquer les modifications");
+injectString("hu-HU", "Apply changes", "V\xE1ltoztat\xE1sokat alkalmazd.");
+injectString("id", "Apply changes", "Terapkan perubahan");
+injectString("it", "Apply changes", "Applicare modifiche");
+injectString("ja", "Apply changes", "\u5909\u66F4\u3092\u9069\u7528");
+injectString("ko-KR", "Apply changes", "\uBCC0\uACBD \uC0AC\uD56D \uC801\uC6A9");
+injectString("ms", "Apply changes", "Buat perubahan");
+injectString("nb-NO", "Apply changes", "Bruk endringer");
+injectString("nl", "Apply changes", "Wijzigingen toepassen");
+injectString("pl", "Apply changes", "Zastosuj zmiany");
+injectString("pt-BR", "Apply changes", "Aplicar altera\xE7\xF5es");
+injectString("sk-SK", "Apply changes", "Uplatni\u0165 zmeny");
+injectString("sv", "Apply changes", "Verkst\xE4ll \xE4ndringar");
+injectString("th", "Apply changes", "\u0E43\u0E0A\u0E49\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07");
+injectString("tr", "Apply changes", "De\u011Fi\u015Fiklikleri uygula");
+injectString("zh-Hans", "Apply changes", "\u5E94\u7528\u66F4\u6539");
+injectString("zh-TW", "Apply changes", "\u5957\u7528\u8B8A\u66F4");
+injectString("cs", "Apply", "Pou\u017E\xEDt");
+injectString("da-DK", "Apply", "Anvend");
+injectString("de", "Apply", "Anwenden");
+injectString("en", "Apply", "Apply");
+injectString("es", "Apply", "Aplicar");
+injectString("fi-FI", "Apply", "K\xE4yt\xE4");
+injectString("fr", "Apply", "Appliquer");
+injectString("fr-FR", "Apply", "Appliquer");
+injectString("hu-HU", "Apply", "Alkalmazd.");
+injectString("id", "Apply", "Terapkan");
+injectString("it", "Apply", "Applicare");
+injectString("ja", "Apply", "\u9069\u7528");
+injectString("ko-KR", "Apply", "\uC801\uC6A9");
+injectString("ms", "Apply", "Gunakan");
+injectString("nb-NO", "Apply", "Bruk");
+injectString("nl", "Apply", "Toepassen");
+injectString("pl", "Apply", "Zastosuj");
+injectString("pt-BR", "Apply", "Aplicar");
+injectString("sk-SK", "Apply", "Pou\u017Ei");
+injectString("sv", "Apply", "Ans\xF6k");
+injectString("th", "Apply", "\u0E43\u0E0A\u0E49");
+injectString("tr", "Apply", "Uygula");
+injectString("zh-Hans", "Apply", "\u5E94\u7528");
+injectString("zh-TW", "Apply", "\u5957\u7528");
+injectString("cs", "Cancel changes", "Zru\u0161it zm\u011Bny");
+injectString("da-DK", "Cancel changes", "Annuller \xE6ndringer");
+injectString("de", "Cancel changes", "\xC4nderungen abbrechen");
+injectString("en", "Cancel changes", "Cancel changes");
+injectString("es", "Cancel changes", "Cancelar cambios");
+injectString("fi-FI", "Cancel changes", "Peruuta muutokset");
+injectString("fr", "Cancel changes", "Annuler les modifications");
+injectString("fr-FR", "Cancel changes", "Annuler les changements");
+injectString("hu-HU", "Cancel changes", "Vonjad vissza a m\xF3dos\xEDt\xE1sokat.");
+injectString("id", "Cancel changes", "Batalkan perubahan");
+injectString("it", "Cancel changes", "Annullare le modifiche");
+injectString("ja", "Cancel changes", "\u5909\u66F4\u3092\u30AD\u30E3\u30F3\u30BB\u30EB\u3059\u308B");
+injectString("ko-KR", "Cancel changes", "\uBCC0\uACBD \uCDE8\uC18C");
+injectString("ms", "Cancel changes", "Batalkan perubahan");
+injectString("nb-NO", "Cancel changes", "Avbryt endringer");
+injectString("nl", "Cancel changes", "Wijzigingen annuleren");
+injectString("pl", "Cancel changes", "Anuluj zmiany");
+injectString("pt-BR", "Cancel changes", "Cancelar altera\xE7\xF5es");
+injectString("sk-SK", "Cancel changes", "Zru\u0161i\u0165 zmeny");
+injectString("sv", "Cancel changes", "Avbryt \xE4ndringar");
+injectString("th", "Cancel changes", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07");
+injectString("tr", "Cancel changes", "De\u011Fi\u015Fiklikleri iptal et");
+injectString("zh-Hans", "Cancel changes", "\u53D6\u6D88\u66F4\u6539");
+injectString("zh-TW", "Cancel changes", "\u53D6\u6D88\u8B8A\u66F4");
+injectString("cs", "Cancel", "Zru\u0161it");
+injectString("da-DK", "Cancel", "Annuller");
+injectString("de", "Cancel", "Abbrechen");
+injectString("en", "Cancel", "Cancel");
+injectString("es", "Cancel", "Cancelar");
+injectString("fi-FI", "Cancel", "Peruuta");
+injectString("fr", "Cancel", "Annuler");
+injectString("fr-FR", "Cancel", "Annuler");
+injectString("hu-HU", "Cancel", "M\xE9gse");
+injectString("id", "Cancel", "Batalkan");
+injectString("it", "Cancel", "Annullare");
+injectString("ja", "Cancel", "\u30AD\u30E3\u30F3\u30BB\u30EB");
+injectString("ko-KR", "Cancel", "\uCDE8\uC18C");
+injectString("ms", "Cancel", "Batal");
+injectString("nb-NO", "Cancel", "Avbryt");
+injectString("nl", "Cancel", "Annuleren");
+injectString("pl", "Cancel", "Anuluj");
+injectString("pt-BR", "Cancel", "Cancelar");
+injectString("sk-SK", "Cancel", "Zru\u0161.");
+injectString("sv", "Cancel", "Avbryt");
+injectString("th", "Cancel", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01");
+injectString("tr", "Cancel", "\u0130ptal");
+injectString("zh-Hans", "Cancel", "\u53D6\u6D88");
+injectString("zh-TW", "Cancel", "\u53D6\u6D88");
 const hours = getSelectItemsForTimePicker(23);
 const minutes = getSelectItemsForTimePicker(59);
-export const TimePickerRaw = (props) => {
-    const { className, fullWidth, dataTimeId, isReadOnly, isError } = props;
-    const ariaAttributes = getAriaAttributes(props);
-    const { translate } = useLanguage();
-    const innerTriggerRef = useRef(null);
-    const [isOpen, setIsOpen] = useState(false);
-    const isMobile = useMobile();
-    const { value, disabled, onBlur, name, onChange } = useFormFieldValues(props.controller, props);
-    const classes = classNames(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
-    const hourValue = value ? value.getHours().toString().padStart(2, "0") : "";
-    const minutesValue = value ? value.getMinutes().toString().padStart(2, "0") : "";
-    const [timeValue, setTimeValue] = useState({ hour: hourValue, minutes: minutesValue });
-    const onCancelHandler = () => {
-        var _a;
-        setTimeValue({ hour: hourValue, minutes: minutesValue });
-        setIsOpen(false);
-        (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    };
-    const onApplyHandler = () => {
-        var _a, _b;
-        if (!timeValue.hour && !timeValue.minutes) {
-            setIsOpen(false);
-            (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            return;
-        }
-        setTimeValue(timeValue);
-        setIsOpen(false);
-        (_b = innerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        const copyDate = value ? new Date(value) : new Date();
-        copyDate.setHours(parseInt(timeValue.hour || "00"));
-        copyDate.setMinutes(parseInt(timeValue.minutes || "00"));
-        onChange === null || onChange === void 0 ? void 0 : onChange(copyDate);
-    };
-    useEffect(() => {
-        if (!isOpen) {
-            setTimeValue({ hour: hourValue, minutes: minutesValue });
-        }
-    }, [hourValue, isOpen, minutesValue]);
-    const triggerClassName = classNames(["zen-time-picker__trigger", fullWidth ? "zen-time-picker__trigger--full-width" : "", isError ? "zen-time-picker__trigger--error" : "", className || ""]);
-    const shownValue = `${hourValue || "24"}:${minutesValue || "00"}`;
-    if (isReadOnly) {
-        return _jsx(ReviewTextControl, { value: shownValue });
+export const TimePickerRaw = props => {
+  const {
+    className,
+    fullWidth,
+    dataTimeId,
+    isReadOnly,
+    isError
+  } = props;
+  const ariaAttributes = getAriaAttributes(props);
+  const {
+    translate
+  } = useLanguage();
+  const innerTriggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const isMobile = useMobile();
+  const {
+    value,
+    disabled,
+    onBlur,
+    name,
+    onChange
+  } = useFormFieldValues(props.controller, props);
+  const classes = classNames(["zen-time-picker", disabled ? "zen-time-picker--disabled" : "", className || ""]);
+  const hourValue = value ? value.getHours().toString().padStart(2, "0") : "";
+  const minutesValue = value ? value.getMinutes().toString().padStart(2, "0") : "";
+  const [timeValue, setTimeValue] = useState({
+    hour: hourValue,
+    minutes: minutesValue
+  });
+  const onCancelHandler = () => {
+    var _a;
+    setTimeValue({
+      hour: hourValue,
+      minutes: minutesValue
+    });
+    setIsOpen(false);
+    (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  };
+  const onApplyHandler = () => {
+    var _a, _b;
+    if (!timeValue.hour && !timeValue.minutes) {
+      setIsOpen(false);
+      (_a = innerTriggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      return;
     }
-    return _jsxs("div", { className: classes, children: [_jsx(FilterButton, Object.assign({ onBlur: onBlur, name: name, ref: innerTriggerRef, className: triggerClassName, onClick: () => {
-                    setIsOpen(!isOpen);
-                }, disabled: disabled, isActive: isOpen, fullWidth: fullWidth }, (dataTimeId ? { "data-time": dataTimeId } : {}), ariaAttributes, { children: shownValue })), _jsx(ControlledPopup, { useTrapFocusWithTrigger: "on", alignment: "bottom", onOpenChange: setIsOpen, isOpen: isOpen, triggerRef: innerTriggerRef, recalculateOnScroll: true, className: classNames(["zen-time-picker__popup", isMobile ? "zen-time-picker__popup--mobile" : ""]), children: _jsxs("div", { className: "zen-time-picker-select", children: [_jsxs("div", { className: "zen-time-picker-select__wrapper", children: [_jsx(TimeSelect, { title: translate("Select hour"), selected: timeValue.hour, items: hours, onSelect: (newHourValue) => {
-                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { hour: newHourValue }));
-                                    } }), _jsx("div", { className: "zen-time-picker-select__separator" }), _jsx(TimeSelect, { title: translate("Select minutes"), selected: timeValue.minutes, items: minutes, onSelect: (newMinutesValue) => {
-                                        setTimeValue(Object.assign(Object.assign({}, timeValue), { minutes: newMinutesValue }));
-                                    } })] }), _jsxs("div", { className: "zen-time-picker-select__footer", children: [isMobile ? _jsx(Button, { type: ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") }) : null, _jsx(Button, { type: ButtonType.Tertiary, onClick: onCancelHandler, title: translate("Cancel changes"), className: "zen-time-picker-select__footer-button", children: translate("Cancel") }), isMobile ? null : _jsx(Button, { type: ButtonType.Primary, onClick: onApplyHandler, title: translate("Apply changes"), className: "zen-time-picker-select__footer-button", children: translate("Apply") })] })] }) })] });
+    setTimeValue(timeValue);
+    setIsOpen(false);
+    (_b = innerTriggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+    const copyDate = value ? new Date(value) : new Date();
+    copyDate.setHours(parseInt(timeValue.hour || "00"));
+    copyDate.setMinutes(parseInt(timeValue.minutes || "00"));
+    onChange === null || onChange === void 0 ? void 0 : onChange(copyDate);
+  };
+  useEffect(() => {
+    if (!isOpen) {
+      setTimeValue({
+        hour: hourValue,
+        minutes: minutesValue
+      });
+    }
+  }, [hourValue, isOpen, minutesValue]);
+  const triggerClassName = classNames(["zen-time-picker__trigger", fullWidth ? "zen-time-picker__trigger--full-width" : "", isError ? "zen-time-picker__trigger--error" : "", className || ""]);
+  const shownValue = `${hourValue || "24"}:${minutesValue || "00"}`;
+  if (isReadOnly) {
+    return _jsx(ReviewTextControl, {
+      value: shownValue
+    });
+  }
+  return _jsxs("div", {
+    className: classes,
+    children: [_jsx(FilterButton, Object.assign({
+      onBlur: onBlur,
+      name: name,
+      ref: innerTriggerRef,
+      className: triggerClassName,
+      onClick: () => {
+        setIsOpen(!isOpen);
+      },
+      disabled: disabled,
+      isActive: isOpen,
+      fullWidth: fullWidth
+    }, dataTimeId ? {
+      "data-time": dataTimeId
+    } : {}, ariaAttributes, {
+      children: shownValue
+    })), _jsx(ControlledPopup, {
+      useTrapFocusWithTrigger: "on",
+      alignment: "bottom",
+      onOpenChange: setIsOpen,
+      isOpen: isOpen,
+      triggerRef: innerTriggerRef,
+      recalculateOnScroll: true,
+      className: classNames(["zen-time-picker__popup", isMobile ? "zen-time-picker__popup--mobile" : ""]),
+      children: _jsxs("div", {
+        className: "zen-time-picker-select",
+        children: [_jsxs("div", {
+          className: "zen-time-picker-select__wrapper",
+          children: [_jsx(TimeSelect, {
+            title: translate("Select hour"),
+            selected: timeValue.hour,
+            items: hours,
+            onSelect: newHourValue => {
+              setTimeValue(Object.assign(Object.assign({}, timeValue), {
+                hour: newHourValue
+              }));
+            }
+          }), _jsx("div", {
+            className: "zen-time-picker-select__separator"
+          }), _jsx(TimeSelect, {
+            title: translate("Select minutes"),
+            selected: timeValue.minutes,
+            items: minutes,
+            onSelect: newMinutesValue => {
+              setTimeValue(Object.assign(Object.assign({}, timeValue), {
+                minutes: newMinutesValue
+              }));
+            }
+          })]
+        }), _jsxs("div", {
+          className: "zen-time-picker-select__footer",
+          children: [isMobile ? _jsx(Button, {
+            type: ButtonType.Primary,
+            onClick: onApplyHandler,
+            title: translate("Apply changes"),
+            className: "zen-time-picker-select__footer-button",
+            children: translate("Apply")
+          }) : null, _jsx(Button, {
+            type: ButtonType.Tertiary,
+            onClick: onCancelHandler,
+            title: translate("Cancel changes"),
+            className: "zen-time-picker-select__footer-button",
+            children: translate("Cancel")
+          }), isMobile ? null : _jsx(Button, {
+            type: ButtonType.Primary,
+            onClick: onApplyHandler,
+            title: translate("Apply changes"),
+            className: "zen-time-picker-select__footer-button",
+            children: translate("Apply")
+          })]
+        })]
+      })
+    })]
+  });
 };
-export const TRANSLATIONS = [
-    "Select hour",
-    "Select minutes",
-    "Cancel",
-    "Apply",
-    "Cancel changes",
-    "Apply changes"
-];
+export const TRANSLATIONS = ["Select hour", "Select minutes", "Cancel", "Apply", "Cancel changes", "Apply changes"];

package/esm/toastRaw/toastRaw.js

@@ -1,3 +1,4 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ToastAnimation } from "./components/toastAnimation";
 import { IconCheckRadio } from "../icons/iconCheckRadio";
@@ -12,36 +13,136 @@ import { useMobile } from "../commonHelpers/hooks/useMobile";
 import { MIN_SECONDS_TO_SHOW, useProgress } from "./hooks/useProgress";
 import { themeContext } from "../utils/theme/themeContext";
 import { ButtonIconPosition, TextIconButton } from "../textIconButton/textIconButton";
+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 = {
-    success: IconCheckRadio,
-    info: IconInfoCircle
-};
-const getIcon = (t) => typedIcons[t];
-export const ToastRaw = ({ isOpen, onClose, animation, type, hasIcon = true, header, id, action, showSeconds = MIN_SECONDS_TO_SHOW, ref }) => {
-    const isDrive = useDrive();
-    const isMobile = useMobile();
-    const { dark } = useContext(themeContext);
-    const { translate } = useLanguage();
-    const { progress } = useProgress({ isOpen, onClose, showSeconds });
-    const toastClasses = classNames(["zen-toast", `zen-toast--${type || "info"}`, isMobile ? "zen-toast--mobile" : "", isDrive ? "zen-toast--drive" : "", dark ? "zen-dark" : ""]);
-    const contentStartClasses = useMemo(() => classNames(["zen-toast__content-start", hasIcon ? "zen-toast__content-start--icon" : ""]), [hasIcon]);
-    const contentEndClasses = classNames(["zen-toast__content-end", action ? "zen-toast__content-end--action" : ""]);
-    const onActionClick = useCallback(() => {
-        var _a;
-        (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
-        onClose();
-    }, [action, onClose]);
-    const actionButton = useMemo(() => {
-        if (!action) {
-            return null;
-        }
-        if (action.icon) {
-            return _jsx(TextIconButton, { className: "zen-toast__action", type: "tertiary", icon: action.icon, iconPosition: action.iconPosition || ButtonIconPosition.Start, onClick: onActionClick, link: action.link, title: action.title || action.text, children: action.text });
-        }
-        return _jsx(Button, { className: "zen-toast__action", type: "tertiary", link: action.link, onClick: onActionClick, title: action.title || action.text, children: action.text });
-    }, [action, onActionClick]);
-    return _jsx(ToastAnimation, { id: id, animation: animation, isOpen: isOpen, children: _jsxs("div", { id: id, ref: ref, className: toastClasses, role: "status", "aria-live": "polite", "aria-atomic": "true", children: [_jsx("div", { style: { width: `${progress}%` }, className: classNames(["zen-toast__progress", "progress", `zen-toast__progress--${type || "info"}`, progress !== 100 ? "zen-toast__progress--active" : ""]) }), _jsxs("div", { className: "zen-toast__content", children: [_jsxs("div", { className: contentStartClasses, children: [hasIcon && createElement(getIcon(type || "info"), {
-                                    size: isDrive ? "huge" : "large",
-                                    className: `zen-toast__icon--${type || "info"}`
-                                }), _jsx("div", { className: classNames(["zen-toast__header", `zen-toast__header--${type || "info"}`]), children: header })] }), _jsxs("div", { className: contentEndClasses, children: [actionButton, _jsx("button", { type: "button", className: classNames(["zen-toast__close-button", `zen-toast__close-button--${type || "info"}`]), onClick: onClose, title: translate("Close"), "aria-label": translate("Close"), children: _jsx(IconClose, { size: isDrive ? "huge" : "large" }) })] })] })] }) });
+  success: IconCheckRadio,
+  info: IconInfoCircle
 };
+const getIcon = t => typedIcons[t];
+export const ToastRaw = ({
+  isOpen,
+  onClose,
+  animation,
+  type,
+  hasIcon = true,
+  header,
+  id,
+  action,
+  showSeconds = MIN_SECONDS_TO_SHOW,
+  ref
+}) => {
+  const isDrive = useDrive();
+  const isMobile = useMobile();
+  const {
+    dark
+  } = useContext(themeContext);
+  const {
+    translate
+  } = useLanguage();
+  const {
+    progress
+  } = useProgress({
+    isOpen,
+    onClose,
+    showSeconds
+  });
+  const toastClasses = classNames(["zen-toast", `zen-toast--${type || "info"}`, isMobile ? "zen-toast--mobile" : "", isDrive ? "zen-toast--drive" : "", dark ? "zen-dark" : ""]);
+  const contentStartClasses = useMemo(() => classNames(["zen-toast__content-start", hasIcon ? "zen-toast__content-start--icon" : ""]), [hasIcon]);
+  const contentEndClasses = classNames(["zen-toast__content-end", action ? "zen-toast__content-end--action" : ""]);
+  const onActionClick = useCallback(() => {
+    var _a;
+    (_a = action === null || action === void 0 ? void 0 : action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+    onClose();
+  }, [action, onClose]);
+  const actionButton = useMemo(() => {
+    if (!action) {
+      return null;
+    }
+    if (action.icon) {
+      return _jsx(TextIconButton, {
+        className: "zen-toast__action",
+        type: "tertiary",
+        icon: action.icon,
+        iconPosition: action.iconPosition || ButtonIconPosition.Start,
+        onClick: onActionClick,
+        link: action.link,
+        title: action.title || action.text,
+        children: action.text
+      });
+    }
+    return _jsx(Button, {
+      className: "zen-toast__action",
+      type: "tertiary",
+      link: action.link,
+      onClick: onActionClick,
+      title: action.title || action.text,
+      children: action.text
+    });
+  }, [action, onActionClick]);
+  return _jsx(ToastAnimation, {
+    id: id,
+    animation: animation,
+    isOpen: isOpen,
+    children: _jsxs("div", {
+      id: id,
+      ref: ref,
+      className: toastClasses,
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: [_jsx("div", {
+        style: {
+          width: `${progress}%`
+        },
+        className: classNames(["zen-toast__progress", "progress", `zen-toast__progress--${type || "info"}`, progress !== 100 ? "zen-toast__progress--active" : ""])
+      }), _jsxs("div", {
+        className: "zen-toast__content",
+        children: [_jsxs("div", {
+          className: contentStartClasses,
+          children: [hasIcon && createElement(getIcon(type || "info"), {
+            size: isDrive ? "huge" : "large",
+            className: `zen-toast__icon--${type || "info"}`
+          }), _jsx("div", {
+            className: classNames(["zen-toast__header", `zen-toast__header--${type || "info"}`]),
+            children: header
+          })]
+        }), _jsxs("div", {
+          className: contentEndClasses,
+          children: [actionButton, _jsx("button", {
+            type: "button",
+            className: classNames(["zen-toast__close-button", `zen-toast__close-button--${type || "info"}`]),
+            onClick: onClose,
+            title: translate("Close"),
+            "aria-label": translate("Close"),
+            children: _jsx(IconClose, {
+              size: isDrive ? "huge" : "large"
+            })
+          })]
+        })]
+      })]
+    })
+  });
+};

package/esm/toggleButton/toggleButton.d.ts

@@ -1,7 +1,6 @@
 import { FC } from "react";
 import { TFormFieldComponentProps } from "../formField/formField";
 import { IToggleButtonRaw, TToggleButtonRaw } from "../toggleButtonRaw/types";
-import "./toggleButton.less";
 export interface IToggleButton extends IToggleButtonRaw {
 }
 type TFormFieldToggleButton = TFormFieldComponentProps<TToggleButtonRaw>;

package/esm/toggleButtonRaw/toggleButtonRaw.d.ts

@@ -1,3 +1,4 @@
 import React from "react";
 import { TToggleButtonRaw } from "./types";
+import "../toggleButton/toggleButton.less";
 export declare const ToggleButtonRaw: React.FC<TToggleButtonRaw>;