@redis-ui/components 41.4.1 → 41.11.0

package/dist/Stepper/hooks/useStepperInteractive.d.ts

@@ -16,15 +16,14 @@ export declare function useStepperInteractive({ onStepChange, onKeyDown, getIsSt
         'aria-label': string;
     };
 };
-export declare function getInteractiveStepProps({ onClick, onKeyDown, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick' | 'onKeyDown'> & Pick<StepperContextType, 'onStepChange' | 'getIsStepInteractive'> & {
+export declare function getInteractiveStepProps({ onClick, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick'> & Pick<StepperContextType, 'onStepChange' | 'getIsStepInteractive'> & {
     stepIndex: number;
     state: StepperStepStateType;
 }): {
     readonly onClick: import("react").MouseEventHandler<HTMLElement> | undefined;
-    readonly onKeyDown: import("react").KeyboardEventHandler<HTMLElement> | undefined;
     readonly role: "listitem" | "tab";
     readonly 'aria-selected': boolean | undefined;
     readonly 'aria-current': "step" | undefined;
     readonly 'aria-disabled': true | undefined;
-    readonly tabIndex: 0 | -1;
+    readonly tabIndex: -1;
 };

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -16,31 +16,36 @@ function useStepperInteractive({
     }
     return stepIndex !== currentStep;
   }, [currentStep, getIsStepInteractive, isInteractive]);
-  const handleKeyDown = combineHandlers(isInteractive ? (event) => {
+  const handleKeyDown = isInteractive ? (event) => {
+    const findNextInteractive = (from, to = totalSteps || 0) => {
+      for (let i = from; i < to; i += 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const findPrevInteractive = (from, to = 0) => {
+      for (let i = from; i >= to; i -= 1) {
+        if (isStepInteractive(i)) return i;
+      }
+      return void 0;
+    };
+    const handleChange = (next) => {
+      event.preventDefault();
+      if (next !== void 0) onStepChange(next);
+    };
     const {
       key
     } = event;
-    if (key === "ArrowLeft" || key === "ArrowRight") {
-      event.preventDefault();
-      const direction = key === "ArrowRight" ? 1 : -1;
-      const newIndex = currentStep + direction;
-      if (direction > 0) {
-        for (let i = newIndex; i < totalSteps || 0; i += 1) {
-          if (isStepInteractive(i)) {
-            onStepChange(i);
-            break;
-          }
-        }
-      } else {
-        for (let i = newIndex; i >= 0; i -= 1) {
-          if (isStepInteractive(i)) {
-            onStepChange(i);
-            break;
-          }
-        }
-      }
+    if (key === "ArrowRight") {
+      handleChange(findNextInteractive(currentStep + 1));
+    } else if (key === "ArrowLeft") {
+      handleChange(findPrevInteractive(currentStep - 1));
+    } else if (key === "Home") {
+      handleChange(findNextInteractive(0, currentStep));
+    } else if (key === "End") {
+      handleChange(findPrevInteractive((totalSteps || 0) - 1, currentStep + 1));
     }
-  } : void 0, onKeyDown);
+  } : void 0;
   const role = isInteractive ? "tablist" : "list";
   const label = isInteractive ? "Step navigation" : "Progress steps";
   return {
@@ -49,7 +54,7 @@ function useStepperInteractive({
       onStepChange
     },
     props: {
-      onKeyDown: handleKeyDown,
+      onKeyDown: combineHandlers(handleKeyDown, onKeyDown),
       role,
       "aria-label": label
     }
@@ -57,7 +62,6 @@ function useStepperInteractive({
 }
 function getInteractiveStepProps({
   onClick,
-  onKeyDown,
   onStepChange,
   getIsStepInteractive,
   stepIndex,
@@ -65,29 +69,18 @@ function getInteractiveStepProps({
 }) {
   const isInteractive = !!onStepChange;
   const isClickable = isInteractive && getIsStepInteractive(stepIndex);
-  const handleClick = combineHandlers(isClickable ? () => onStepChange(stepIndex) : void 0, onClick);
-  const handleKeyDown = combineHandlers(isClickable ? (e) => {
-    const {
-      key
-    } = e;
-    if (key === "Enter" || key === " ") {
-      e.preventDefault();
-      onStepChange(stepIndex);
-    }
-  } : void 0, onKeyDown);
+  const handleClick = isClickable ? () => onStepChange(stepIndex) : void 0;
   const role = isInteractive ? "tab" : "listitem";
   const ariaSelected = isInteractive ? state === StepperStepState.FOCUSED : void 0;
   const ariaCurrent = !isInteractive && state === StepperStepState.FOCUSED ? "step" : void 0;
-  const tabIndex = isClickable ? 0 : -1;
   const ariaDisabled = isInteractive && !isClickable ? true : void 0;
   return {
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
+    onClick: combineHandlers(handleClick, onClick),
     role,
     "aria-selected": ariaSelected,
     "aria-current": ariaCurrent,
     "aria-disabled": ariaDisabled,
-    tabIndex
+    tabIndex: -1
   };
 }
 export {

package/dist/ThemeModeSwitch/ThemeModeSwitch.cjs

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const ThemeModeSwitch_style = require("./ThemeModeSwitch.style.cjs");
+const useThemeModeSwitch = require("./useThemeModeSwitch.cjs");
+const Menu = require("../Menu/Menu.cjs");
+const ThemeModeSwitch = ({
+  onThemeModeChange,
+  switchTimeoutMs = 300,
+  ...restProps
+}) => {
+  const {
+    allowSystemThemeMode,
+    themeMode,
+    setThemeMode,
+    toggleThemeMode
+  } = useThemeModeSwitch.useThemeModeSwitch({
+    onThemeModeChange,
+    switchTimeoutMs
+  });
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => setReady(true), []);
+  const modeSwitch = jsxRuntime.jsxRuntimeExports.jsx(ThemeModeSwitch_style.ThemeModeSwitch, {
+    "data-theme-mode": themeMode,
+    "aria-label": `Theme mode switch. Current theme mode is ${themeMode || "unknown"}`,
+    ...restProps,
+    onClick: toggleThemeMode,
+    "data-mounting": !ready ? "" : void 0,
+    "$durationMs": switchTimeoutMs,
+    onPointerDown: allowSystemThemeMode ? (e) => {
+      e.currentTarget.focus();
+      e.preventDefault();
+    } : void 0,
+    children: jsxRuntime.jsxRuntimeExports.jsx(ThemeModeSwitch_style.Knob, {
+      "data-theme-mode": themeMode
+    })
+  });
+  if (allowSystemThemeMode) {
+    return jsxRuntime.jsxRuntimeExports.jsxs(Menu.default, {
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
+        children: modeSwitch
+      }), jsxRuntime.jsxRuntimeExports.jsxs(Menu.default.Content, {
+        placement: "bottom",
+        align: "center",
+        children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Light theme",
+          selected: themeMode === "light",
+          onClick: () => setThemeMode("light")
+        }), jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Dark theme",
+          selected: themeMode === "dark",
+          onClick: () => setThemeMode("dark")
+        }), jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Item, {
+          text: "Browser theme",
+          selected: themeMode === "system",
+          onClick: () => setThemeMode("system")
+        })]
+      })]
+    });
+  }
+  return modeSwitch;
+};
+exports.ThemeModeSwitch = ThemeModeSwitch;

package/dist/ThemeModeSwitch/ThemeModeSwitch.d.ts

@@ -0,0 +1,2 @@
+import { ThemeModeSwitchProps } from './ThemeModeSwitch.types';
+export declare const ThemeModeSwitch: ({ onThemeModeChange, switchTimeoutMs, ...restProps }: ThemeModeSwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ThemeModeSwitch/ThemeModeSwitch.js

@@ -0,0 +1,64 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { useState, useEffect } from "react";
+import { ThemeModeSwitch as ThemeModeSwitch$1, Knob } from "./ThemeModeSwitch.style.js";
+import { useThemeModeSwitch } from "./useThemeModeSwitch.js";
+import Menu from "../Menu/Menu.js";
+const ThemeModeSwitch = ({
+  onThemeModeChange,
+  switchTimeoutMs = 300,
+  ...restProps
+}) => {
+  const {
+    allowSystemThemeMode,
+    themeMode,
+    setThemeMode,
+    toggleThemeMode
+  } = useThemeModeSwitch({
+    onThemeModeChange,
+    switchTimeoutMs
+  });
+  const [ready, setReady] = useState(false);
+  useEffect(() => setReady(true), []);
+  const modeSwitch = jsxRuntimeExports.jsx(ThemeModeSwitch$1, {
+    "data-theme-mode": themeMode,
+    "aria-label": `Theme mode switch. Current theme mode is ${themeMode || "unknown"}`,
+    ...restProps,
+    onClick: toggleThemeMode,
+    "data-mounting": !ready ? "" : void 0,
+    "$durationMs": switchTimeoutMs,
+    onPointerDown: allowSystemThemeMode ? (e) => {
+      e.currentTarget.focus();
+      e.preventDefault();
+    } : void 0,
+    children: jsxRuntimeExports.jsx(Knob, {
+      "data-theme-mode": themeMode
+    })
+  });
+  if (allowSystemThemeMode) {
+    return jsxRuntimeExports.jsxs(Menu, {
+      children: [jsxRuntimeExports.jsx(Menu.Trigger, {
+        children: modeSwitch
+      }), jsxRuntimeExports.jsxs(Menu.Content, {
+        placement: "bottom",
+        align: "center",
+        children: [jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Light theme",
+          selected: themeMode === "light",
+          onClick: () => setThemeMode("light")
+        }), jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Dark theme",
+          selected: themeMode === "dark",
+          onClick: () => setThemeMode("dark")
+        }), jsxRuntimeExports.jsx(Menu.Content.Item, {
+          text: "Browser theme",
+          selected: themeMode === "system",
+          onClick: () => setThemeMode("system")
+        })]
+      })]
+    });
+  }
+  return modeSwitch;
+};
+export {
+  ThemeModeSwitch
+};

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.cjs

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const ThemeModeSwitch = _styled__default.default.button.withConfig({
+  displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
+  componentId: "RedisUI__sc-6b0pvc-0"
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+  $durationMs
+}) => $durationMs, () => {
+  const theme = redisUiStyles.useTheme().components.themeModeSwitch;
+  return _styled.css`
+      width: ${theme.width};
+      height: ${theme.height};
+      padding: ${theme.padding};
+
+      border-radius: ${theme.borderRadius};
+
+      border: ${theme.borderColor} solid ${theme.borderWidth};
+      background-color: ${theme.bgColor};
+    `;
+}, redisUiStyles.getFocusStyle());
+const Knob = _styled__default.default.div.withConfig({
+  displayName: "ThemeModeSwitchstyle__Knob",
+  componentId: "RedisUI__sc-6b0pvc-1"
+})(["height:100%;width:100%;background:none;transition:inherit;&[data-theme-mode='dark']{transform:translateX(100%);:before{transform:translateX(-100%);}}&[data-theme-mode='system']{transform:translateX(50%);:before{transform:translateX(-50%);}}:before{content:'';display:block;transition:inherit;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;", "}"], () => {
+  const theme = redisUiStyles.useTheme().components.themeModeSwitch.thumb;
+  return _styled.css`
+        border-radius: ${theme.borderRadius};
+        background-color: ${theme.bgColor};
+        background-image: ${theme.icon};
+        aspect-ratio: ${theme.iconAspectRatio};
+      `;
+});
+exports.Knob = Knob;
+exports.ThemeModeSwitch = ThemeModeSwitch;

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.d.ts

@@ -0,0 +1,4 @@
+export declare const ThemeModeSwitch: import("styled-components").StyledComponent<"button", any, {
+    $durationMs: number;
+}, never>;
+export declare const Knob: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/ThemeModeSwitch/ThemeModeSwitch.style.js

@@ -0,0 +1,36 @@
+import _styled, { css } from "styled-components";
+import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+const ThemeModeSwitch = _styled.button.withConfig({
+  displayName: "ThemeModeSwitchstyle__ThemeModeSwitch",
+  componentId: "RedisUI__sc-6b0pvc-0"
+})(["all:unset;cursor:pointer;box-sizing:border-box;transition:all ", "ms ease,outline 0ms,outline-offset 0ms;&[data-mounting]{transition:none;}", " ", ""], ({
+  $durationMs
+}) => $durationMs, () => {
+  const theme = useTheme().components.themeModeSwitch;
+  return css`
+      width: ${theme.width};
+      height: ${theme.height};
+      padding: ${theme.padding};
+
+      border-radius: ${theme.borderRadius};
+
+      border: ${theme.borderColor} solid ${theme.borderWidth};
+      background-color: ${theme.bgColor};
+    `;
+}, getFocusStyle());
+const Knob = _styled.div.withConfig({
+  displayName: "ThemeModeSwitchstyle__Knob",
+  componentId: "RedisUI__sc-6b0pvc-1"
+})(["height:100%;width:100%;background:none;transition:inherit;&[data-theme-mode='dark']{transform:translateX(100%);:before{transform:translateX(-100%);}}&[data-theme-mode='system']{transform:translateX(50%);:before{transform:translateX(-50%);}}:before{content:'';display:block;transition:inherit;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;", "}"], () => {
+  const theme = useTheme().components.themeModeSwitch.thumb;
+  return css`
+        border-radius: ${theme.borderRadius};
+        background-color: ${theme.bgColor};
+        background-image: ${theme.icon};
+        aspect-ratio: ${theme.iconAspectRatio};
+      `;
+});
+export {
+  Knob,
+  ThemeModeSwitch
+};

package/dist/ThemeModeSwitch/ThemeModeSwitch.types.d.ts

@@ -0,0 +1,7 @@
+import { UserThemeMode } from '@redislabsdev/redis-ui-styles';
+import { HTMLAttributes } from 'react';
+export type UseThemeModeSwitchParams = {
+    onThemeModeChange?: (newThemeMode: UserThemeMode) => void;
+    switchTimeoutMs?: number;
+};
+export type ThemeModeSwitchProps = Omit<HTMLAttributes<HTMLElement>, 'onClick' | 'onChange'> & UseThemeModeSwitchParams;

package/dist/ThemeModeSwitch/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeModeSwitch.types';
+export * from './ThemeModeSwitch';
+export * from './useThemeModeSwitch';

package/dist/ThemeModeSwitch/useThemeModeSwitch.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+function useThemeModeSwitch({
+  onThemeModeChange,
+  switchTimeoutMs
+}) {
+  const {
+    getNextThemeModeToToggle,
+    userThemeMode,
+    setUserThemeMode,
+    allowSystemThemeMode
+  } = redisUiStyles.useThemeModeSwitchingContext();
+  const [localThemeMode, setLocalThemeMode] = React.useState(userThemeMode);
+  React.useLayoutEffect(() => setLocalThemeMode(userThemeMode), [userThemeMode]);
+  const timerRef = React.useRef();
+  React.useEffect(() => () => clearTimeout(timerRef.current), []);
+  const applyThemeMode = (newThemeMode) => {
+    if (!newThemeMode) return;
+    clearTimeout(timerRef.current);
+    setLocalThemeMode(newThemeMode);
+    timerRef.current = setTimeout(() => {
+      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+    }, switchTimeoutMs);
+  };
+  const toggleThemeMode = () => {
+    applyThemeMode(getNextThemeModeToToggle(localThemeMode));
+  };
+  return {
+    allowSystemThemeMode,
+    themeMode: localThemeMode,
+    setThemeMode: applyThemeMode,
+    toggleThemeMode
+  };
+}
+exports.useThemeModeSwitch = useThemeModeSwitch;

package/dist/ThemeModeSwitch/useThemeModeSwitch.d.ts

@@ -0,0 +1,8 @@
+import { UserThemeMode } from '@redislabsdev/redis-ui-styles';
+import { UseThemeModeSwitchParams } from './ThemeModeSwitch.types';
+export declare function useThemeModeSwitch({ onThemeModeChange, switchTimeoutMs }: UseThemeModeSwitchParams): {
+    allowSystemThemeMode: boolean | undefined;
+    themeMode: "light" | "dark" | "system" | undefined;
+    setThemeMode: (newThemeMode: UserThemeMode | undefined) => void;
+    toggleThemeMode: () => void;
+};

package/dist/ThemeModeSwitch/useThemeModeSwitch.js

@@ -0,0 +1,37 @@
+import { useState, useLayoutEffect, useRef, useEffect } from "react";
+import { useThemeModeSwitchingContext } from "@redislabsdev/redis-ui-styles";
+function useThemeModeSwitch({
+  onThemeModeChange,
+  switchTimeoutMs
+}) {
+  const {
+    getNextThemeModeToToggle,
+    userThemeMode,
+    setUserThemeMode,
+    allowSystemThemeMode
+  } = useThemeModeSwitchingContext();
+  const [localThemeMode, setLocalThemeMode] = useState(userThemeMode);
+  useLayoutEffect(() => setLocalThemeMode(userThemeMode), [userThemeMode]);
+  const timerRef = useRef();
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const applyThemeMode = (newThemeMode) => {
+    if (!newThemeMode) return;
+    clearTimeout(timerRef.current);
+    setLocalThemeMode(newThemeMode);
+    timerRef.current = setTimeout(() => {
+      if (setUserThemeMode(newThemeMode)) onThemeModeChange == null ? void 0 : onThemeModeChange(newThemeMode);
+    }, switchTimeoutMs);
+  };
+  const toggleThemeMode = () => {
+    applyThemeMode(getNextThemeModeToToggle(localThemeMode));
+  };
+  return {
+    allowSystemThemeMode,
+    themeMode: localThemeMode,
+    setThemeMode: applyThemeMode,
+    toggleThemeMode
+  };
+}
+export {
+  useThemeModeSwitch
+};

package/dist/Toast/Toaster.cjs

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
 const Toaster_style = require("./Toaster.style.cjs");
-const Toaster = ({
+const Toaster = React.forwardRef((props, ref) => jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
   ref,
   ...props
-}) => jsxRuntime.jsxRuntimeExports.jsx(Toaster_style.ToasterContainer, {
-  ref,
-  ...props,
-  enableMultiContainer: !!props.containerId
-});
+}));
+Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 exports.default = Toaster$1;

package/dist/Toast/Toaster.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ToasterProps } from './core/core.types';
-declare const Toaster: ({ ref, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toaster: import("react").ForwardRefExoticComponent<Omit<ToasterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export default Toaster;

package/dist/Toast/Toaster.js

@@ -1,13 +1,11 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
 import { ToasterContainer } from "./Toaster.style.js";
-const Toaster = ({
+const Toaster = forwardRef((props, ref) => jsxRuntimeExports.jsx(ToasterContainer, {
   ref,
   ...props
-}) => jsxRuntimeExports.jsx(ToasterContainer, {
-  ref,
-  ...props,
-  enableMultiContainer: !!props.containerId
-});
+}));
+Toaster.displayName = "Toaster";
 const Toaster$1 = Toaster;
 export {
   Toaster$1 as default

package/dist/Toast/Toaster.style.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const reactToastify_esm = require("../node_modules/react-toastify/dist/react-toastify.esm.cjs");
-;/* empty css                                                      */
+const reactToastify_esm = require("../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
+;/* empty css                                                                          */
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);

package/dist/Toast/Toaster.style.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ToastContainer as RcToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 /**
  * Removes top level layout of toastify containers and allows using inner layout of the Toast component
  */
-export declare const ToasterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ToasterContainer: import("styled-components").StyledComponent<typeof RcToastContainer, any, {}, never>;

package/dist/Toast/Toaster.style.js

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
-import { ToastContainer as k } from "../node_modules/react-toastify/dist/react-toastify.esm.js";
-/* empty css                                                    */
+import { ToastContainer as Q } from "../packages/components/node_modules/react-toastify/dist/react-toastify.esm.js";
+/* empty css                                                                        */
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const ToasterContainer = _styled(k).withConfig({
+const ToasterContainer = _styled(Q).withConfig({
   displayName: "Toasterstyle__ToasterContainer",
   componentId: "RedisUI__sc-zfvdgq-0"
 })(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => useTheme().components.toast.toaster.gap);

package/dist/Toast/core/core.d.ts

@@ -17,9 +17,9 @@ export declare const toast: {
         readonly Danger: "danger";
     };
     update: (id: ToastId, content: ToastContent, options?: ToastOptions) => void;
-    dismiss: (id?: ToastId | undefined) => void;
-    isActive: (id: ToastId) => boolean;
-    addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
+    dismiss: (id?: ToastId | undefined, containerId?: ToastId | undefined) => void;
+    isActive: typeof import("react-toastify/dist/core/store").isToastActive;
+    addChangeListener: typeof import("react-toastify/dist/core/store").onChange;
     notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
     attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
     danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;

package/dist/Toast/core/mapping.helpers.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const reactToastify_esm = require("../../node_modules/react-toastify/dist/react-toastify.esm.cjs");
+const reactToastify_esm = require("../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -25,8 +25,24 @@ const updateToast = (id, render, options) => reactToastify_esm.toast.update(id,
   render: (props) => render(extractContextProps(props)),
   ...cleanupOptions(options)
 });
+const dismiss = (id, containerId) => {
+  if (containerId !== void 0) {
+    if (id !== void 0) {
+      return reactToastify_esm.toast.dismiss({
+        id,
+        containerId
+      });
+    }
+    return reactToastify_esm.toast.dismiss({
+      containerId
+    });
+  }
+  if (id !== void 0) {
+    return reactToastify_esm.toast.dismiss(id);
+  }
+  return reactToastify_esm.toast.dismiss();
+};
 const {
-  dismiss,
   isActive
 } = reactToastify_esm.toast;
 const addChangeListener = reactToastify_esm.toast.onChange;

package/dist/Toast/core/mapping.helpers.d.ts

@@ -2,7 +2,7 @@
  * This file maps toastify api to redis-ui api
  */
 import { ReactElement } from 'react';
-import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions } from './mapping.types';
+import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions, ToastContainerId } from './mapping.types';
 /**
  * converts parameters to/from toastify and calls toastify toast
  */
@@ -11,5 +11,6 @@ export declare const createToast: (render: (contextProps: ToastContextProps) =>
  * converts parameters to/from toastify and calls toastify update
  */
 export declare const updateToast: (id: ToastId, render: (contextProps: ToastContextProps) => ReactElement, options?: ToastUpdateOptions) => void;
-export declare const dismiss: (id?: ToastId | undefined) => void, isActive: (id: ToastId) => boolean;
-export declare const addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
+export declare const dismiss: (id?: ToastId, containerId?: ToastContainerId) => void;
+export declare const isActive: typeof import("react-toastify/dist/core/store").isToastActive;
+export declare const addChangeListener: typeof import("react-toastify/dist/core/store").onChange;

package/dist/Toast/core/mapping.helpers.js

@@ -1,4 +1,4 @@
-import { toast as Q } from "../../node_modules/react-toastify/dist/react-toastify.esm.js";
+import { toast as B } from "../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.js";
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -18,16 +18,32 @@ const cleanupOptions = (options) => ({
   } : {}
   // save real role for inner container, only if specified
 });
-const createToast = (render, options) => Q((props) => render(extractContextProps(props)), cleanupOptions(options));
-const updateToast = (id, render, options) => Q.update(id, {
+const createToast = (render, options) => B((props) => render(extractContextProps(props)), cleanupOptions(options));
+const updateToast = (id, render, options) => B.update(id, {
   render: (props) => render(extractContextProps(props)),
   ...cleanupOptions(options)
 });
+const dismiss = (id, containerId) => {
+  if (containerId !== void 0) {
+    if (id !== void 0) {
+      return B.dismiss({
+        id,
+        containerId
+      });
+    }
+    return B.dismiss({
+      containerId
+    });
+  }
+  if (id !== void 0) {
+    return B.dismiss(id);
+  }
+  return B.dismiss();
+};
 const {
-  dismiss,
   isActive
-} = Q;
-const addChangeListener = Q.onChange;
+} = B;
+const addChangeListener = B.onChange;
 export {
   addChangeListener,
   createToast,

package/dist/Toast/core/mapping.types.d.ts

@@ -2,9 +2,9 @@
  * This file maps toastify types to redis-ui types
  */
 import { RefAttributes } from 'react';
-import { ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition } from 'react-toastify';
+import { Id, ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition, Id as ToastId } from 'react-toastify';
 import { SemanticVariant } from '../../Banner/components/BannerSemanticComponents';
-export type { Id as ToastId } from 'react-toastify';
+export type { ToastId };
 type PickCommonOptions = 'pauseOnHover' | 'closeOnClick' | 'autoClose' | 'position' | 'role' | 'rtl' | 'containerId' | 'transition';
 type PickToastOptions = PickCommonOptions | 'toastId' | 'delay' | 'onClose';
 type PickToastProps = PickToastOptions | 'closeToast';
@@ -22,3 +22,4 @@ export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'],
     liveRole: string;
 };
 export type ToastPosition = RcToastPosition;
+export type ToastContainerId = Id;