@redis-ui/components 39.0.0 → 39.18.0

package/dist/AppSelectionMenu/components/Item/Item.styles.d.ts

@@ -3,4 +3,4 @@ export declare const AppSelectorItem: import("styled-components").StyledComponen
 export declare const AppSelectionMenuItem: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/AutoCompleteSelect/AutoCompleteSelect.style.d.ts

@@ -2,18 +2,18 @@
 export declare const Item: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Menu/components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
     Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../Menu").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
-        Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        SubHead: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        SubHead: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Compose: ({ isSelected, selected, onClick, ...restProps }: import("../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Check: ({ icon, ...restProps }: import("../Menu/components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("../Menu/components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
     DropdownArrow: (props: import("../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
     Label: (({ children, text, icon, ...restProps }: import("../Menu").MenuLabelProps & import("../Menu").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
-        Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: (props: import("../Menu/components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("../Menu/components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     };
     Separator: (props: import("../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {

package/dist/Banner/Banner.d.ts

@@ -7,7 +7,7 @@ declare const Banner: (({ show, onClose, actions, message, showIcon, showCloseBu
         onClose?: VoidFunction | undefined;
     } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ customIcon, variant, ...props }: import("./components/Icon/Icon.types").BannerIconProps) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps & ChildFree<ComposeElementProps<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("./Banner.types").BannerActionType & {

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

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

package/dist/Banner/components/Message/Message.style.d.ts

@@ -1 +1 @@
-export declare const Message: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const Message: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Banner/components/Message/Message.types.d.ts

@@ -1,2 +1,2 @@
-import { BodyProps } from '../../../Typography/components/Body/Body.types';
-export type MessageProps = BodyProps;
+import { TypographyBodyProps } from '../../../Typography';
+export type MessageProps = TypographyBodyProps;

package/dist/BoxSelectionGroup/BoxSelectionGroup.d.ts

@@ -3,7 +3,7 @@ import { BoxSelectionGroupBox, BoxSelectionGroupProps } from './BoxSelectionGrou
 declare const BoxSelectionGroup: (<TValue extends string = string, TBox extends BoxSelectionGroupBox<TValue> = BoxSelectionGroupBox<TValue>>({ boxes, ...restProps }: BoxSelectionGroupProps<TValue, TBox>) => import("react/jsx-runtime").JSX.Element) & {
     Compose: <TValue_1 extends string = string>({ defaultValue, value, onChange, ...restProps }: import(".").BoxSelectionGroupComposeProps<TValue_1> & import(".").RestBoxSelectionGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
     Item: (({ box, ...restProps }: import(".").BoxSelectionGroupItemComposeProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
         Icon: ({ icon, ...restProps }: import("./components/Item/components/Icon/Icon.types").BoxSelectionGroupItemIconProps) => import("react/jsx-runtime").JSX.Element | null;
         Interactive: (props: {
             children: import("react").ReactNode;

package/dist/BoxSelectionGroup/BoxSelectionGroup.style.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export declare const BoxSelectionGroupItem: import("styled-components").StyledComponent<(({ box, ...restProps }: import(".").BoxSelectionGroupItemComposeProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
     Icon: ({ icon, ...restProps }: import("./components/Item/components/Icon/Icon.types").BoxSelectionGroupItemIconProps) => import("react/jsx-runtime").JSX.Element | null;
     Interactive: (props: {
         children: import("react").ReactNode;

package/dist/BoxSelectionGroup/MultiBoxSelectionGroup.d.ts

@@ -3,7 +3,7 @@ import { BoxSelectionGroupBox, MultiBoxSelectionGroupProps } from './BoxSelectio
 declare const MultiBoxSelectionGroup: (<TValue extends string = string, TBox extends BoxSelectionGroupBox<TValue> = BoxSelectionGroupBox<TValue>>({ boxes, ...restProps }: MultiBoxSelectionGroupProps<TValue, TBox>) => import("react/jsx-runtime").JSX.Element) & {
     Compose: <TValue_1 extends string = string>({ onChange, ...restProps }: import(".").MultiBoxSelectionGroupComposeProps<TValue_1> & import(".").RestBoxSelectionGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
     Item: (({ box, ...restProps }: import(".").BoxSelectionGroupItemComposeProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
         Icon: ({ icon, ...restProps }: import("./components/Item/components/Icon/Icon.types").BoxSelectionGroupItemIconProps) => import("react/jsx-runtime").JSX.Element | null;
         Interactive: (props: {
             children: import("react").ReactNode;

package/dist/BoxSelectionGroup/components/Item/Item.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BoxSelectionGroupItemProps, RestBoxSelectionGroupItemProps } from './Item.types';
 declare const Item: (({ box, ...restProps }: BoxSelectionGroupItemProps & RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: import("react").ForwardRefExoticComponent<import("../..").BoxSelectionGroupItemComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Compose: import("react").ForwardRefExoticComponent<import("../..").BoxSelectionGroupItemComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
     Icon: ({ icon, ...restProps }: import("./components/Icon/Icon.types").BoxSelectionGroupItemIconProps) => import("react/jsx-runtime").JSX.Element | null;
     Interactive: (props: {
         children: import("react").ReactNode;

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { BoxSelectionGroupItemComposeProps } from './Compose.types';
-declare const Compose: React.ForwardRefExoticComponent<BoxSelectionGroupItemComposeProps & import("../../../../../Helpers/common.types").ComposeChildrenProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "content" | "children"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Compose: React.ForwardRefExoticComponent<BoxSelectionGroupItemComposeProps & import("../../../../..").ComposeChildrenProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "content" | "children"> & React.RefAttributes<HTMLButtonElement>>;
 export default Compose;

package/dist/Button/ActionIconButton/ActionIconButton.cjs

@@ -12,7 +12,6 @@ const ActionIconButton = React__default.default.forwardRef(({
   variant = "primary",
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   const theme = redisUiStyles.useTheme().components.actionIconButton;
@@ -26,8 +25,7 @@ const ActionIconButton = React__default.default.forwardRef(({
       ...restProps,
       children: jsxRuntime.jsxRuntimeExports.jsx(Icon.default, {
         icon,
-        customSize: theme.sizes[size].iconSize,
-        title
+        customSize: theme.sizes[size].iconSize
       })
     })
   });

package/dist/Button/ActionIconButton/ActionIconButton.js

@@ -8,7 +8,6 @@ const ActionIconButton = React__default.forwardRef(({
   variant = "primary",
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   const theme = useTheme().components.actionIconButton;
@@ -22,8 +21,7 @@ const ActionIconButton = React__default.forwardRef(({
       ...restProps,
       children: jsxRuntimeExports.jsx(Icon, {
         icon,
-        customSize: theme.sizes[size].iconSize,
-        title
+        customSize: theme.sizes[size].iconSize
       })
     })
   });

package/dist/Button/IconButton/IconButton.cjs

@@ -10,7 +10,6 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
 const IconButton = React__default.default.forwardRef(({
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   return jsxRuntime.jsxRuntimeExports.jsx(Button_context.ButtonContext.Provider, {
@@ -22,11 +21,10 @@ const IconButton = React__default.default.forwardRef(({
       ...restProps,
       children: jsxRuntime.jsxRuntimeExports.jsx(Icon.default, {
         icon,
-        customSize: "100%",
-        title
+        customSize: "100%"
       })
     })
   });
 });
-const IconButtonComponent = IconButton;
-exports.default = IconButtonComponent;
+const IconButton$1 = IconButton;
+exports.default = IconButton$1;

package/dist/Button/IconButton/IconButton.js

@@ -1,30 +1,28 @@
 import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
 import React__default from "react";
-import { IconButton as IconButton$1 } from "./IconButton.style.js";
+import { IconButton as IconButton$2 } from "./IconButton.style.js";
 import Icon from "../components/Icon/Icon.js";
 import { ButtonContext } from "../Button.context.js";
 const IconButton = React__default.forwardRef(({
   icon,
   size = "M",
-  title,
   ...restProps
 }, ref) => {
   return jsxRuntimeExports.jsx(ButtonContext.Provider, {
     value: "icon",
-    children: jsxRuntimeExports.jsx(IconButton$1, {
+    children: jsxRuntimeExports.jsx(IconButton$2, {
       type: "button",
       size,
       ref,
       ...restProps,
       children: jsxRuntimeExports.jsx(Icon, {
         icon,
-        customSize: "100%",
-        title
+        customSize: "100%"
       })
     })
   });
 });
-const IconButtonComponent = IconButton;
+const IconButton$1 = IconButton;
 export {
-  IconButtonComponent as default
+  IconButton$1 as default
 };

package/dist/Button/ToggleButton/components/IndicatorCount/IndicatorCount.types.d.ts

@@ -1,4 +1,4 @@
-import { BodyProps } from '../../../../Typography/components/Body/Body.types';
-export interface IndicatorCountTypes extends Omit<BodyProps, 'children'> {
+import { TypographyBodyProps } from '../../../../Typography';
+export interface IndicatorCountTypes extends Omit<TypographyBodyProps, 'children'> {
     count: number;
 }

package/dist/Button/components/Icon/Icon.cjs

@@ -18,11 +18,13 @@ const Icon = ({
   const buttonContext = Button_context.useButtonContext();
   const IconElement = icon;
   return jsxRuntime.jsxRuntimeExports.jsx(Icon_style.ButtonIconContainer, {
+    title,
+    "aria-hidden": true,
     children: jsxRuntime.jsxRuntimeExports.jsx(IconElement, {
       customColor: "currentColor",
       size: ICON_SIZES[buttonContext],
       customSize,
-      title
+      "aria-hidden": true
     })
   });
 };

package/dist/Button/components/Icon/Icon.js

@@ -16,11 +16,13 @@ const Icon = ({
   const buttonContext = useButtonContext();
   const IconElement = icon;
   return jsxRuntimeExports.jsx(ButtonIconContainer, {
+    title,
+    "aria-hidden": true,
     children: jsxRuntimeExports.jsx(IconElement, {
       customColor: "currentColor",
       size: ICON_SIZES[buttonContext],
       customSize,
-      title
+      "aria-hidden": true
     })
   });
 };

package/dist/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import { CheckboxProps } from './Checkbox.types';
 declare const Checkbox: (({ label, defaultChecked, checked, onCheckedChange, required, disabled, id, variant, className, style, ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ defaultChecked, checked, onCheckedChange, required, disabled, id, variant, ...restProps }: import("./components/Compose/Compose.types").CheckboxComposeProps & import("./components/Compose/Compose.types").RestCheckboxComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: import("./components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ readOnly, ...restProps }: import("./components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("./components/Label/Label.types").CheckboxLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Checkbox;

package/dist/Checkbox/components/Indicator/Indicator.cjs

@@ -4,18 +4,34 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const Checkbox_context = require("../../Checkbox.context.cjs");
 const Indicator_style = require("./Indicator.style.cjs");
-const Indicator = (props) => {
+const Indicator = ({
+  readOnly = false,
+  ...restProps
+}) => {
   const checkboxRootProps = Checkbox_context.useCheckboxContext();
   const Icon = checkboxRootProps.checked === "indeterminate" ? redisUiIcons.MinusIcon : redisUiIcons.CheckBoldIcon;
-  return jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
-    ...props,
-    ...checkboxRootProps,
-    children: jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicatorCheckmark, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
-        customColor: "currentColor",
-        size: "S"
-      })
+  const checkmark = jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicatorCheckmark, {
+    "aria-hidden": true,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
+      customColor: "currentColor",
+      size: "S"
     })
   });
+  const indicatorProps = {
+    "aria-description": checkboxRootProps.checked ? "checked" : "unchecked",
+    ...restProps,
+    ...checkboxRootProps
+  };
+  return readOnly ? jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
+    asChild: true,
+    ...indicatorProps,
+    onCheckedChange: void 0,
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      children: checkmark
+    })
+  }) : jsxRuntime.jsxRuntimeExports.jsx(Indicator_style.CheckboxIndicator, {
+    ...indicatorProps,
+    children: checkmark
+  });
 };
 exports.default = Indicator;

package/dist/Checkbox/components/Indicator/Indicator.d.ts

@@ -1,3 +1,3 @@
 import { IndicatorProps } from './Indicator.types';
-declare const Indicator: (props: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const Indicator: ({ readOnly, ...restProps }: IndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default Indicator;

package/dist/Checkbox/components/Indicator/Indicator.js

@@ -1,20 +1,36 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { MinusIcon, CheckBoldIcon } from "@redislabsdev/redis-ui-icons";
 import { useCheckboxContext } from "../../Checkbox.context.js";
-import { CheckboxIndicator, CheckboxIndicatorCheckmark } from "./Indicator.style.js";
-const Indicator = (props) => {
+import { CheckboxIndicatorCheckmark, CheckboxIndicator } from "./Indicator.style.js";
+const Indicator = ({
+  readOnly = false,
+  ...restProps
+}) => {
   const checkboxRootProps = useCheckboxContext();
   const Icon = checkboxRootProps.checked === "indeterminate" ? MinusIcon : CheckBoldIcon;
-  return jsxRuntimeExports.jsx(CheckboxIndicator, {
-    ...props,
-    ...checkboxRootProps,
-    children: jsxRuntimeExports.jsx(CheckboxIndicatorCheckmark, {
-      children: jsxRuntimeExports.jsx(Icon, {
-        customColor: "currentColor",
-        size: "S"
-      })
+  const checkmark = jsxRuntimeExports.jsx(CheckboxIndicatorCheckmark, {
+    "aria-hidden": true,
+    children: jsxRuntimeExports.jsx(Icon, {
+      customColor: "currentColor",
+      size: "S"
     })
   });
+  const indicatorProps = {
+    "aria-description": checkboxRootProps.checked ? "checked" : "unchecked",
+    ...restProps,
+    ...checkboxRootProps
+  };
+  return readOnly ? jsxRuntimeExports.jsx(CheckboxIndicator, {
+    asChild: true,
+    ...indicatorProps,
+    onCheckedChange: void 0,
+    children: jsxRuntimeExports.jsx("div", {
+      children: checkmark
+    })
+  }) : jsxRuntimeExports.jsx(CheckboxIndicator, {
+    ...indicatorProps,
+    children: checkmark
+  });
 };
 export {
   Indicator as default

package/dist/Checkbox/components/Indicator/Indicator.types.d.ts

@@ -1,2 +1,4 @@
 import { HTMLAttributes } from 'react';
-export type IndicatorProps = Omit<HTMLAttributes<HTMLButtonElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'children' | 'color'>;
+export type IndicatorProps = Omit<HTMLAttributes<HTMLButtonElement>, 'checked' | 'defaultChecked' | 'defaultValue' | 'children' | 'color'> & {
+    readOnly?: boolean;
+};

package/dist/Checkbox/components/Label/Label.style.d.ts

@@ -3,4 +3,4 @@ export declare const CheckboxLabel: import("styled-components").StyledComponent<
     $checked: CheckedType;
     $variant: CheckboxVariants;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Chip/Chip.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { ChipProps } from './Chip.types';
 declare const Chip: (({ text, onClose, ...restProps }: ChipProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLSpanElement>, "content" | "children"> & import("./components/Compose/Compose.types").ChipComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Title: ({ size, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLSpanElement>, "content" | "children"> & import("./components/Compose/Compose.types").ChipComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ size, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     CloseButton: ({ onClose, icon: Icon, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "className"> & {
         icon?: import("@redislabsdev/redis-ui-icons/monochrome").IconType | undefined;
     } & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Chip/components/CloseButton/CloseButton.cjs

@@ -29,11 +29,12 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
+    title: "Remove",
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],
       customColor: "currentColor",
-      title: "Remove"
+      "aria-hidden": true
     })
   });
 };

package/dist/Chip/components/CloseButton/CloseButton.js

@@ -27,11 +27,12 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
+    title: "Remove",
     ...restProps,
     children: jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],
       customColor: "currentColor",
-      title: "Remove"
+      "aria-hidden": true
     })
   });
 };

package/dist/Chip/components/Title/Title.d.ts

@@ -1,2 +1,2 @@
-import { BodyProps } from '../../../Typography/components/Body/Body.types';
-export declare const Title: ({ size, ...restProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyBodyProps } from '../../../Typography';
+export declare const Title: ({ size, ...restProps }: TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ChipList/Components/ExtraItem.style.d.ts

@@ -1,4 +1,4 @@
 export declare const ExtraListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExtraListItem: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ExtraListItem: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     $disabled?: boolean | undefined;
 }, never>;

package/dist/Drawer/Drawer.cjs

@@ -9,6 +9,7 @@ const Content = require("./components/Content/Content.cjs");
 const Header = require("./components/Header/Header.cjs");
 const Body = require("./components/Body/Body.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
+const Description = require("./components/Description/Description.cjs");
 const Drawer = Object.assign(({
   children,
   persistent = false,
@@ -61,6 +62,7 @@ const Drawer = Object.assign(({
   });
 }, {
   Header: Header.default,
+  Description: Description.default,
   Body: Body.default,
   Footer: Footer.default
 });

package/dist/Drawer/Drawer.d.ts

@@ -1,9 +1,13 @@
+/// <reference types="react" />
 import { DrawerProps } from './Drawer.types';
 declare const Drawer: (({ children, persistent, open, onOpenChange, containerElement, zIndex, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Header: (({ title, titleHidden, ...restProps }: import("./components/Header/Header.types").DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...props }: import("./components/Header/components/Compose/Compose.types").DrawerHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ hidden, children, ...restProps }: import("./components/Header/components/Title/Title.types").DrawerContentTitleProps) => import("react/jsx-runtime").JSX.Element;
     };
+    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").DrawerDescriptionProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
+        Text: (props: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Body: (props: import("./components/Body/Body.types").DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
     Footer: (({ primaryButtonText, secondaryButtonText, tertiaryButtonText, tertiaryButtonIcon, primaryButtonDisabled, secondaryButtonDisabled, tertiaryButtonDisabled, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, ...restProps }: import("./components/Footer/Footer.types").DrawerFooterProps) => import("react/jsx-runtime").JSX.Element) & {
         ActionButtonsContainer: ({ children, ...props }: import("./components/Footer/components/ActionButtonsContainer/ActionButtonsContainer.types").ActionButtonsContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Drawer/Drawer.js

@@ -7,6 +7,7 @@ import Content from "./components/Content/Content.js";
 import Header from "./components/Header/Header.js";
 import Body from "./components/Body/Body.js";
 import Footer from "./components/Footer/Footer.js";
+import Description from "./components/Description/Description.js";
 const Drawer = Object.assign(({
   children,
   persistent = false,
@@ -59,6 +60,7 @@ const Drawer = Object.assign(({
   });
 }, {
   Header,
+  Description,
   Body,
   Footer
 });

package/dist/Drawer/components/Content/Content.cjs

@@ -2,8 +2,27 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
+const index = require("../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
 const Drawer_context = require("../../Drawer.context.cjs");
+const useJitterFix = require("./hooks/useJitterFix.cjs");
+const useFocusTrigger = require("./hooks/useFocusTrigger.cjs");
 const Content_style = require("./Content.style.cjs");
+const react_utils = require("../../../Helpers/react.utils.cjs");
+const handleAriaDescriptionRef = (el) => {
+  if (el) {
+    const id = el.getAttribute("aria-describedby");
+    if (id) {
+      if (!el.querySelector(`#${CSS.escape(id)}`)) {
+        el.removeAttribute("aria-describedby");
+      }
+    } else {
+      const descEl = el.querySelector(`[data-role=drawer-description]`);
+      if (descEl) {
+        el.setAttribute("aria-describedby", descEl.id);
+      }
+    }
+  }
+};
 const Content = React.forwardRef(({
   children,
   ...props
@@ -15,35 +34,24 @@ const Content = React.forwardRef(({
     isPersistent,
     isRenderedInsideContainer
   } = Drawer_context.useDrawerContext();
-  const handleInteractOutside = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const handleEscapeKeyDown = (e) => {
-    if (isPersistent) {
-      e.preventDefault();
-    }
-  };
-  const [ready, setReady] = React.useState(false);
-  React.useEffect(() => {
-    setReady(true);
-  }, []);
-  const nonReadyStyle = !ready && {
-    position: "fixed",
-    opacity: 0
-  } || void 0;
+  const jitterFixProps = useJitterFix.useJitterFix();
+  const comboRef = index.useComposedRefs(ref, handleAriaDescriptionRef);
+  const {
+    handleClickTarget,
+    refocus
+  } = useFocusTrigger.useFocusTrigger();
   return jsxRuntime.jsxRuntimeExports.jsx(Content_style.PreventOverflow, {
     children: jsxRuntime.jsxRuntimeExports.jsx(Content_style.DrawerContent, {
+      "data-role": "drawer",
       "$zIndex": zIndex,
-      ref,
-      onInteractOutside: handleInteractOutside,
-      onEscapeKeyDown: handleEscapeKeyDown,
+      ref: comboRef,
+      onInteractOutside: isPersistent ? react_utils.handlePreventDefault : void 0,
+      onEscapeKeyDown: isPersistent ? react_utils.handlePreventDefault : void 0,
       "$isRenderedInsideContainer": isRenderedInsideContainer,
       ...props,
-      ...nonReadyStyle && {
-        style: nonReadyStyle
-      },
+      ...jitterFixProps,
+      onCloseAutoFocus: refocus,
+      onPointerDownOutside: isPersistent ? void 0 : (e) => handleClickTarget(e.target),
       children
     })
   });