@redis-ui/components 39.18.0 → 41.3.2

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

@@ -0,0 +1,5 @@
+/** Individual step registration and index retrieval */
+export declare const useStepRegistration: () => {
+    stepId: string;
+    stepIndex: number;
+};

package/dist/Stepper/hooks/useStepRegistration.js

@@ -0,0 +1,25 @@
+import { useLayoutEffect } from "react";
+import { useId } from "../../node_modules/@radix-ui/react-id/dist/index.js";
+import { useStepperContext } from "../Stepper.context.js";
+const useStepRegistration = () => {
+  const {
+    registerStep,
+    unregisterStep,
+    getStepIndex,
+    collectStepOrder
+  } = useStepperContext();
+  const stepId = useId();
+  useLayoutEffect(() => {
+    registerStep(stepId);
+    return () => unregisterStep(stepId);
+  }, [stepId, registerStep, unregisterStep]);
+  collectStepOrder(stepId);
+  const stepIndex = getStepIndex(stepId);
+  return {
+    stepId,
+    stepIndex
+  };
+};
+export {
+  useStepRegistration
+};

package/dist/Stepper/hooks/useStepperInteractive.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const Step_types = require("../components/Step/Step.types.cjs");
+const react_utils = require("../../Helpers/react.utils.cjs");
+function useStepperInteractive({
+  onStepChange,
+  onKeyDown,
+  getIsStepInteractive,
+  currentStep = -1,
+  totalSteps
+}) {
+  const isInteractive = !!onStepChange;
+  const isStepInteractive = React.useCallback((stepIndex) => {
+    if (!isInteractive) return false;
+    if (typeof getIsStepInteractive === "function") {
+      return getIsStepInteractive(stepIndex);
+    }
+    return stepIndex !== currentStep;
+  }, [currentStep, getIsStepInteractive, isInteractive]);
+  const handleKeyDown = react_utils.combineHandlers(isInteractive ? (event) => {
+    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;
+          }
+        }
+      }
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tablist" : "list";
+  const label = isInteractive ? "Step navigation" : "Progress steps";
+  return {
+    context: {
+      getIsStepInteractive: isStepInteractive,
+      onStepChange
+    },
+    props: {
+      onKeyDown: handleKeyDown,
+      role,
+      "aria-label": label
+    }
+  };
+}
+function getInteractiveStepProps({
+  onClick,
+  onKeyDown,
+  onStepChange,
+  getIsStepInteractive,
+  stepIndex,
+  state
+}) {
+  const isInteractive = !!onStepChange;
+  const isClickable = isInteractive && getIsStepInteractive(stepIndex);
+  const handleClick = react_utils.combineHandlers(isClickable ? () => onStepChange(stepIndex) : void 0, onClick);
+  const handleKeyDown = react_utils.combineHandlers(isClickable ? (e) => {
+    const {
+      key
+    } = e;
+    if (key === "Enter" || key === " ") {
+      e.preventDefault();
+      onStepChange(stepIndex);
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tab" : "listitem";
+  const ariaSelected = isInteractive ? state === Step_types.StepperStepState.FOCUSED : void 0;
+  const ariaCurrent = !isInteractive && state === Step_types.StepperStepState.FOCUSED ? "step" : void 0;
+  const tabIndex = isClickable ? 0 : -1;
+  const ariaDisabled = isInteractive && !isClickable ? true : void 0;
+  return {
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    role,
+    "aria-selected": ariaSelected,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    tabIndex
+  };
+}
+exports.getInteractiveStepProps = getInteractiveStepProps;
+exports.useStepperInteractive = useStepperInteractive;

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { StepperProps } from '../Stepper.types';
+import { ComposeProps } from '../components/Step/components/Compose/Compose.types';
+import { StepperContextType } from '../Stepper.context';
+import { StepperStepStateType } from '../components/Step/Step.types';
+export declare function useStepperInteractive({ onStepChange, onKeyDown, getIsStepInteractive, currentStep, totalSteps }: Pick<StepperProps, 'onStepChange' | 'getIsStepInteractive' | 'currentStep' | 'onKeyDown'> & {
+    totalSteps: number;
+}): {
+    context: {
+        getIsStepInteractive: (stepIndex: number) => boolean;
+        onStepChange: ((stepIndex: number) => void) | undefined;
+    };
+    props: {
+        onKeyDown: import("react").KeyboardEventHandler<HTMLElement> | undefined;
+        role: string;
+        'aria-label': string;
+    };
+};
+export declare function getInteractiveStepProps({ onClick, onKeyDown, onStepChange, getIsStepInteractive, stepIndex, state }: Pick<ComposeProps, 'onClick' | 'onKeyDown'> & 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;
+};

package/dist/Stepper/hooks/useStepperInteractive.js

@@ -0,0 +1,96 @@
+import { useCallback } from "react";
+import { StepperStepState } from "../components/Step/Step.types.js";
+import { combineHandlers } from "../../Helpers/react.utils.js";
+function useStepperInteractive({
+  onStepChange,
+  onKeyDown,
+  getIsStepInteractive,
+  currentStep = -1,
+  totalSteps
+}) {
+  const isInteractive = !!onStepChange;
+  const isStepInteractive = useCallback((stepIndex) => {
+    if (!isInteractive) return false;
+    if (typeof getIsStepInteractive === "function") {
+      return getIsStepInteractive(stepIndex);
+    }
+    return stepIndex !== currentStep;
+  }, [currentStep, getIsStepInteractive, isInteractive]);
+  const handleKeyDown = combineHandlers(isInteractive ? (event) => {
+    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;
+          }
+        }
+      }
+    }
+  } : void 0, onKeyDown);
+  const role = isInteractive ? "tablist" : "list";
+  const label = isInteractive ? "Step navigation" : "Progress steps";
+  return {
+    context: {
+      getIsStepInteractive: isStepInteractive,
+      onStepChange
+    },
+    props: {
+      onKeyDown: handleKeyDown,
+      role,
+      "aria-label": label
+    }
+  };
+}
+function getInteractiveStepProps({
+  onClick,
+  onKeyDown,
+  onStepChange,
+  getIsStepInteractive,
+  stepIndex,
+  state
+}) {
+  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 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,
+    role,
+    "aria-selected": ariaSelected,
+    "aria-current": ariaCurrent,
+    "aria-disabled": ariaDisabled,
+    tabIndex
+  };
+}
+export {
+  getInteractiveStepProps,
+  useStepperInteractive
+};

package/dist/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { SwitchProps } from './Switch.types';
 declare const Switch: (({ className, style, disabled, readOnly, checked, defaultChecked, onCheckedChange, titleOff, titleOn, ...restProps }: SwitchProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ disabled, readOnly, checked, defaultChecked, onCheckedChange, ...restProps }: import("./components/Compose/Compose.types").SwitchComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ disabled, readOnly, checked, defaultChecked, onCheckedChange, ...restProps }: import("./components/Compose/Compose.types").SwitchComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Switcher: (({ id, onPointerDown, onMouseLeave, onKeyDown, ...props }: import("./components/Switcher/Switcher.types").SwitcherProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-switch").SwitchProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
         Knob: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-switch").SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/TableHeading/TableHeading.d.ts

@@ -3,7 +3,7 @@ import { TableHeadingProps } from './TableHeading.types';
 declare const TableHeading: ((props: TableHeadingProps) => import("react/jsx-runtime").JSX.Element) & {
     Title: ({ className, children, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     SearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("..").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
-        Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+        Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
             readonlyRender?: import("../Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
             readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
         }) => import("react/jsx-runtime").JSX.Element;

package/dist/TableHeading/TableHeading.style.d.ts

@@ -3,7 +3,7 @@ export declare const separator: import("styled-components").FlattenInterpolation
 export declare const TableHeadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EndContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TableSearchInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("../Inputs").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
-    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("..").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("..").ComposeElementProps<HTMLElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs/Tabs.d.ts

@@ -3,16 +3,16 @@ import { TabsProps } from './Tabs.types';
 declare const Tabs: (({ tabs, variant, ...restProps }: TabsProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: <TValue extends string = string>({ onChange, activateOnFocus, ...restProps }: import("./components/Compose/Compose.types").TabsComposeProps<TValue> & import("./components/Compose/Compose.types").RestTabsComposeProps) => import("react/jsx-runtime").JSX.Element;
     TabBar: (({ tabs, ...restProps }: import(".").TabsBarProps & import(".").RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, variant, ...restProps }: import("./components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ children, variant, ...restProps }: import("./components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
         Trigger: (({ value, children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
             Compose: ({ children, ...restProps }: import("./components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-            Tab: ({ children, ...restProps }: import("..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+            Tab: ({ children, ...restProps }: import("..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
             Marker: (props: import("..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
         };
     };
     ContentPane: (({ tabs, ...restProps }: import(".").TabsContentPaneProps & import(".").RestTabsContentPaneProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/ContentPane/components/Compose/Compose.types").RestTabsContentPaneComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Content: (props: import("./components/ContentPane/components/Content/Content.types").TabsContentProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Content: (props: import("./components/ContentPane/components/Content/Content.types").TabsContentProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default Tabs;

package/dist/Tabs/components/ContentPane/ContentPane.d.ts

@@ -2,6 +2,6 @@
 import { RestTabsContentPaneProps, TabsContentPaneProps } from './ContentPane.types';
 declare const ContentPane: (({ tabs, ...restProps }: TabsContentPaneProps & RestTabsContentPaneProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").RestTabsContentPaneComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Content: (props: import("./components/Content/Content.types").TabsContentProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Content: (props: import("./components/Content/Content.types").TabsContentProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
 };
 export default ContentPane;

package/dist/Tabs/components/TabBar/TabBar.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { RestTabsBarProps, TabsBarProps } from './TabBar.types';
 declare const TabBar: (({ tabs, ...restProps }: TabsBarProps & RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Trigger: (({ value, children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-        Tab: ({ children, ...restProps }: import("../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Tab: ({ children, ...restProps }: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Marker: (props: import("../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/Tabs/components/TabBar/components/Trigger/Trigger.d.ts

@@ -2,7 +2,7 @@
 import { RestTabsBarTriggerProps, TabsBarTriggerProps } from './Trigger.types';
 declare const Trigger: (({ value, children, ...restProps }: TabsBarTriggerProps & RestTabsBarTriggerProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ children, ...restProps }: import("../../../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Tab: ({ children, ...restProps }: import("../../../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Marker: (props: import("../../../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Trigger;

package/dist/Toast/Toast.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
 import type { ToastProps } from './Toast.types';
-import { ChildFree, ComposeElementProps } from '../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../Helpers';
 declare const Toast: (({ message, description, actions, customIcon, showIcon, showCloseButton, ...props }: ToastProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: (props: import("../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../Helpers").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, size, ...props }: import("./components/Icon/Icon.types").ToastIconProps) => import("react/jsx-runtime").JSX.Element;
     Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
-        Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant, ...restProps }: import(".").ToastActionType & {
             variant?: import("../Banner/components/BannerSemanticComponents").SemanticOutlineVariant | undefined;
             disabled?: boolean | undefined;
@@ -15,7 +15,7 @@ declare const Toast: (({ message, description, actions, customIcon, showIcon, sh
     };
     CloseButton: ({ children, onClick, ...props }: import("../Banner/components/BannerSemanticComponents").SemanticCloseButtonProps & import("../Banner/components/BannerSemanticComponents").RestSemanticCloseButtonProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ message, description, ...restProps }: import("./components/Content/Content.types").ToastContentProps & import("./components/Content/Content.types").RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
         Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     };

package/dist/Toast/components/Actions/Actions.d.ts

@@ -1,6 +1,6 @@
 import type { ActionsProps } from './Actions.types';
 declare const Actions: (({ primary, secondary, ...props }: ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: (props: import("../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Action: ({ label, onClick, closes, icon, variant, ...restProps }: import("../..").ToastActionType & {
         variant?: import("../../../Banner/components/BannerSemanticComponents").SemanticOutlineVariant | undefined;
         disabled?: boolean | undefined;

package/dist/Toast/components/Actions/Actions.types.d.ts

@@ -1,5 +1,5 @@
 import { ToastActionType } from '../../core/core.types';
-import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../../../Helpers';
 export type ActionsProps = {
     primary?: ToastActionType;
     secondary?: ToastActionType;

package/dist/Toast/components/Actions/components/Action/Action.cjs

@@ -16,7 +16,7 @@ const Action = ({
     variant: semanticVariant
   } = context.useToastParams();
   return jsxRuntime.jsxRuntimeExports.jsxs(SemanticButton.default, {
-    "data-testid": "redisui-toast-action-button",
+    "data-role": "toast-action-button",
     semanticVariant,
     outlineVariant: variant,
     onClick: (e) => {

package/dist/Toast/components/Actions/components/Action/Action.js

@@ -14,7 +14,7 @@ const Action = ({
     variant: semanticVariant
   } = useToastParams();
   return jsxRuntimeExports.jsxs(SemanticButton, {
-    "data-testid": "redisui-toast-action-button",
+    "data-role": "toast-action-button",
     semanticVariant,
     outlineVariant: variant,
     onClick: (e) => {

package/dist/Toast/components/Actions/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
-import type { ComposeElementProps } from '../../../../../Helpers/common.types';
+import type { ComposeElementProps } from '../../../../../Helpers';
 declare const Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Compose/Compose.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const Compose_style = require("./Compose.style.cjs");
 const context = require("../../core/context.cjs");
+const Compose_style = require("./Compose.style.cjs");
 const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.ToastComposeContainer, {
-  "data-testid": "redisui-toast",
+  "data-role": "toast",
   variant: context.useToastParams().variant,
   size: "M",
   ...props

package/dist/Toast/components/Compose/Compose.d.ts

@@ -1,4 +1,4 @@
 import type { SemanticContainerProps } from '../../../Banner/components/BannerSemanticComponents';
-import { ComposeElementProps } from '../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../Helpers';
 declare const Compose: (props: SemanticContainerProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Compose/Compose.js

@@ -1,8 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { ToastComposeContainer } from "./Compose.style.js";
 import { useToastParams } from "../../core/context.js";
+import { ToastComposeContainer } from "./Compose.style.js";
 const Compose = (props) => jsxRuntimeExports.jsx(ToastComposeContainer, {
-  "data-testid": "redisui-toast",
+  "data-role": "toast",
   variant: useToastParams().variant,
   size: "M",
   ...props

package/dist/Toast/components/Compose/Compose.style.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Toast/components/Content/Content.d.ts

@@ -1,6 +1,6 @@
 import { RestToastContentProps, ToastContentProps } from './Content.types';
 declare const Content: (({ message, description, ...restProps }: ToastContentProps & RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: (props: import("../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     Message: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Description: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
 };

package/dist/Toast/components/Content/Content.types.d.ts

@@ -1,4 +1,4 @@
 import { ToastContentParams } from '../../core/core.types';
-import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
+import { ChildFree, ComposeElementProps } from '../../../Helpers';
 export type ToastContentProps = Pick<ToastContentParams, 'message' | 'description'>;
 export type RestToastContentProps = ChildFree<ComposeElementProps>;

package/dist/Toast/components/Content/components/Compose/Compose.cjs

@@ -1,8 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const context = require("../../../../core/context.cjs");
 const Compose_style = require("./Compose.style.cjs");
-const Compose = (props) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
-  ...props
-});
+const Compose = (props) => {
+  const {
+    liveRole
+  } = context.useToastParams();
+  const liveProps = liveRole === "alert" ? {} : {
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
+    role: liveRole,
+    ...liveProps,
+    ...props
+  });
+};
 exports.default = Compose;

package/dist/Toast/components/Content/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../../../Helpers';
 declare const Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Toast/components/Content/components/Compose/Compose.js

@@ -1,8 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useToastParams } from "../../../../core/context.js";
 import { Container } from "./Compose.style.js";
-const Compose = (props) => jsxRuntimeExports.jsx(Container, {
-  ...props
-});
+const Compose = (props) => {
+  const {
+    liveRole
+  } = useToastParams();
+  const liveProps = liveRole === "alert" ? {} : {
+    "aria-live": "polite",
+    "aria-atomic": true
+  };
+  return jsxRuntimeExports.jsx(Container, {
+    role: liveRole,
+    ...liveProps,
+    ...props
+  });
+};
 export {
   Compose as default
 };

package/dist/Toast/components/Content/components/Description/Description.cjs

@@ -6,7 +6,7 @@ const Description = ({
   children,
   ...restProps
 }) => children ? jsxRuntime.jsxRuntimeExports.jsx(Description_style.ToastDescription, {
-  "data-testid": "redisui-toast-description",
+  "data-role": "toast-description",
   ...restProps,
   children
 }) : null;

package/dist/Toast/components/Content/components/Description/Description.js

@@ -4,7 +4,7 @@ const Description = ({
   children,
   ...restProps
 }) => children ? jsxRuntimeExports.jsx(ToastDescription, {
-  "data-testid": "redisui-toast-description",
+  "data-role": "toast-description",
   ...restProps,
   children
 }) : null;

package/dist/Toast/components/Content/components/Message/Message.cjs

@@ -6,7 +6,7 @@ const Message = ({
   children,
   ...restProps
 }) => children ? jsxRuntime.jsxRuntimeExports.jsx(Message_style.ToastMessage, {
-  "data-testid": "redisui-toast-message",
+  "data-role": "toast-message",
   variant: "semiBold",
   ...restProps,
   children

package/dist/Toast/components/Content/components/Message/Message.js

@@ -4,7 +4,7 @@ const Message = ({
   children,
   ...restProps
 }) => children ? jsxRuntimeExports.jsx(ToastMessage, {
-  "data-testid": "redisui-toast-message",
+  "data-role": "toast-message",
   variant: "semiBold",
   ...restProps,
   children

package/dist/Toast/components/Icon/Icon.cjs

@@ -15,6 +15,7 @@ const Icon = ({
     customIcon: icon,
     variant,
     size,
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Toast/components/Icon/Icon.js

@@ -13,6 +13,7 @@ const Icon = ({
     customIcon: icon,
     variant,
     size,
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Toast/core/content.helper.cjs

@@ -13,7 +13,7 @@ const renderContent = (content) => {
     ...content
   });
 };
-const wrapInContextProvider = (contextProps, content) => jsxRuntime.jsxRuntimeExports.jsx(context.Context.Provider, {
+const wrapInContextProvider = (contextProps, content) => jsxRuntime.jsxRuntimeExports.jsx(context.ToastContextProvider, {
   value: contextProps,
   children: content
 });