@redis-ui/components 39.12.0 → 41.3.2

package/dist/AppSelectionMenu/components/Icon/Icon.cjs

@@ -2,5 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
-const Icon = () => jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.MenuIcon, {});
+const Icon = () => jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.MenuIcon, {
+  customColor: "currentColor"
+});
 exports.Icon = Icon;

package/dist/AppSelectionMenu/components/Icon/Icon.js

@@ -1,6 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { MenuIcon } from "@redislabsdev/redis-ui-icons";
-const Icon = () => jsxRuntimeExports.jsx(MenuIcon, {});
+const Icon = () => jsxRuntimeExports.jsx(MenuIcon, {
+  customColor: "currentColor"
+});
 export {
   Icon
 };

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/AppSelectionMenu/components/Trigger/Trigger.styles.cjs

@@ -13,7 +13,7 @@ const getStyles = (theme) => _styled.css`
   width: ${theme.components.appSelectionMenu.trigger.width};
   padding: ${theme.components.appSelectionMenu.trigger.padding};
 `;
-const maps = [css_utils.tokenMaps.bgColor];
+const maps = [css_utils.tokenMaps.bgColor, css_utils.tokenMaps.textColor, css_utils.tokenMaps.borderColor];
 const getStateStyle = (theme, active) => {
   const state = active ? "on" : "off";
   const stateColors = theme.components.appSelectionMenu.trigger.toggleStates[state];

package/dist/AppSelectionMenu/components/Trigger/Trigger.styles.js

@@ -9,7 +9,7 @@ const getStyles = (theme) => css`
   width: ${theme.components.appSelectionMenu.trigger.width};
   padding: ${theme.components.appSelectionMenu.trigger.padding};
 `;
-const maps = [tokenMaps.bgColor];
+const maps = [tokenMaps.bgColor, tokenMaps.textColor, tokenMaps.borderColor];
 const getStateStyle = (theme, active) => {
   const state = active ? "on" : "off";
   const stateColors = theme.components.appSelectionMenu.trigger.toggleStates[state];

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<HTMLElement>, "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

@@ -5,11 +5,11 @@ declare const Banner: (({ show, onClose, actions, message, showIcon, showCloseBu
     Compose: ({ size, variant, layoutVariant, onClose, ...props }: import("./components/BannerSemanticComponents").SemanticContainerProps & {
         layoutVariant?: import("./Banner.types").BannerLayout | undefined;
         onClose?: VoidFunction | undefined;
-    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "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;
-    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;
+    Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps & ChildFree<ComposeElementProps<HTMLElement>>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Compose: (props: ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("./Banner.types").BannerActionType & {
             size?: "M" | "S" | undefined;
             variant?: import("./components/BannerSemanticComponents").SemanticOutlineVariant | undefined;

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

@@ -1,7 +1,7 @@
 import { ChildFree, ComposeElementProps } from '../../../Helpers/common.types';
 import type { ActionsProps } from './Actions.types';
 declare const Actions: (({ primary, secondary, ...props }: ActionsProps & ChildFree<ComposeElementProps>) => 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: outlineVariant, size, ...restProps }: import("../..").BannerActionType & {
         size?: "M" | "S" | undefined;
         variant?: import("../BannerSemanticComponents").SemanticOutlineVariant | undefined;

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<HTMLElement>, "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/BoxSelectionGroup/components/Item/components/Compose/Compose.types.d.ts

@@ -1,4 +1,4 @@
-import { TooltipContentProps } from 'src/Tooltip/components/Content/Content.types';
+import { TooltipContentProps } from '../../../../../Tooltip/components/Content/Content.types';
 import { BoxSelectionGroupBox } from '../../../../BoxSelectionGroup.types';
 import { ComposeElementProps } from '../../../../../Helpers/common.types';
 export type BoxSelectionGroupItemComposeProps = {

package/dist/Button/IconButton/IconButton.cjs

@@ -26,5 +26,5 @@ const IconButton = React__default.default.forwardRef(({
     })
   });
 });
-const IconButtonComponent = IconButton;
-exports.default = IconButtonComponent;
+const IconButton$1 = IconButton;
+exports.default = IconButton$1;

package/dist/Button/IconButton/IconButton.js

@@ -1,6 +1,6 @@
 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(({
@@ -10,7 +10,7 @@ const IconButton = React__default.forwardRef(({
 }, ref) => {
   return jsxRuntimeExports.jsx(ButtonContext.Provider, {
     value: "icon",
-    children: jsxRuntimeExports.jsx(IconButton$1, {
+    children: jsxRuntimeExports.jsx(IconButton$2, {
       type: "button",
       size,
       ref,
@@ -22,7 +22,7 @@ const IconButton = React__default.forwardRef(({
     })
   });
 });
-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/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/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.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Chip = require("../../Chip/Chip.cjs");
 const ExtraItem_style = require("./ExtraItem.style.cjs");
 const useScrollableTooltip = require("../../Tooltip/hooks/useScrollableTooltip.cjs");
@@ -19,6 +20,7 @@ const ExtraItem = ({
   chips,
   renderTooltip = defaultTooltip
 }) => {
+  const theme = redisUiStyles.useTheme();
   const {
     tooltipScrollContainerRef,
     onOpenChange,
@@ -32,6 +34,7 @@ const ExtraItem = ({
       disableInteractionHelper: true,
       withButton: true,
       placement: "right",
+      backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntime.jsxRuntimeExports.jsx(ExtraItem_style.ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content

package/dist/ChipList/Components/ExtraItem.js

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
 import Chip from "../../Chip/Chip.js";
 import { ExtraListContainer, ExtraListItem } from "./ExtraItem.style.js";
 import { useScrollableTooltip } from "../../Tooltip/hooks/useScrollableTooltip.js";
@@ -17,6 +18,7 @@ const ExtraItem = ({
   chips,
   renderTooltip = defaultTooltip
 }) => {
+  const theme = useTheme();
   const {
     tooltipScrollContainerRef,
     onOpenChange,
@@ -30,6 +32,7 @@ const ExtraItem = ({
       disableInteractionHelper: true,
       withButton: true,
       placement: "right",
+      backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntimeExports.jsx(ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content

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.d.ts

@@ -5,10 +5,10 @@ declare const Drawer: (({ children, persistent, open, onOpenChange, containerEle
         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("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
-        Text: (props: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").DrawerDescriptionProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "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;
+    Body: ({ focusableForScroll, ...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;
         Compose: (props: import("./components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Drawer/components/Body/Body.cjs

@@ -1,9 +1,23 @@
 "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 Body_style = require("./Body.style.cjs");
-const Body = (props) => jsxRuntime.jsxRuntimeExports.jsx(Body_style.DrawerBody, {
-  tabIndex: 0,
+const useScrollable = require("../../../Helpers/hooks/useScrollable.cjs");
+const Body = ({
+  focusableForScroll = true,
   ...props
-});
+}) => {
+  const ref = React.useRef(null);
+  const scrollable = useScrollable.useScrollable(ref);
+  return jsxRuntime.jsxRuntimeExports.jsx(Body_style.DrawerBody, {
+    ref: focusableForScroll ? ref : void 0,
+    ...scrollable && {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Drawer content"
+    },
+    ...props
+  });
+};
 exports.default = Body;

package/dist/Drawer/components/Body/Body.d.ts

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

package/dist/Drawer/components/Body/Body.js

@@ -1,9 +1,23 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useRef } from "react";
 import { DrawerBody } from "./Body.style.js";
-const Body = (props) => jsxRuntimeExports.jsx(DrawerBody, {
-  tabIndex: 0,
+import { useScrollable } from "../../../Helpers/hooks/useScrollable.js";
+const Body = ({
+  focusableForScroll = true,
   ...props
-});
+}) => {
+  const ref = useRef(null);
+  const scrollable = useScrollable(ref);
+  return jsxRuntimeExports.jsx(DrawerBody, {
+    ref: focusableForScroll ? ref : void 0,
+    ...scrollable && {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": "Drawer content"
+    },
+    ...props
+  });
+};
 export {
   Body as default
 };

package/dist/Drawer/components/Body/Body.types.d.ts

@@ -1,2 +1,4 @@
 import { HTMLAttributes } from 'react';
-export type DrawerBodyProps = HTMLAttributes<HTMLDivElement>;
+export type DrawerBodyProps = HTMLAttributes<HTMLDivElement> & {
+    focusableForScroll?: boolean;
+};

package/dist/Drawer/components/Description/Description.d.ts

@@ -1,5 +1,5 @@
 import { DrawerDescriptionProps, RestDrawerDescriptionProps } from './Description.types';
 declare const Description: (({ hidden, children, ...restProps }: DrawerDescriptionProps & RestDrawerDescriptionProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Text: (props: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Description;

package/dist/Drawer/components/Description/components/Text/Text.style.d.ts

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

package/dist/Drawer/components/Description/components/Text/Text.types.d.ts

@@ -1,2 +1,2 @@
-import { HeadingProps } from '../../../../../Typography/components/Heading/Heading.types';
-export type DrawerDescriptionTextProps = HeadingProps;
+import { TypographyHeadingProps } from '../../../../../Typography';
+export type DrawerDescriptionTextProps = TypographyHeadingProps;

package/dist/Drawer/components/Header/components/Compose/Compose.style.js

@@ -1,11 +1,11 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import IconButtonComponent from "../../../../../Button/IconButton/IconButton.js";
+import IconButton from "../../../../../Button/IconButton/IconButton.js";
 const Container = _styled.div.withConfig({
   displayName: "Composestyle__Container",
   componentId: "RedisUI__sc-1y8ap56-0"
 })(["display:flex;align-items:center;padding-inline:", ";padding-block:", ";"], () => useTheme().components.drawer.sidePadding, () => useTheme().components.drawer.header.blockPadding);
-const CloseIconButton = _styled(IconButtonComponent).withConfig({
+const CloseIconButton = _styled(IconButton).withConfig({
   displayName: "Composestyle__CloseIconButton",
   componentId: "RedisUI__sc-1y8ap56-1"
 })(["margin-left:auto;color:", ";"], () => useTheme().components.drawer.header.closeIconColor);

package/dist/Drawer/components/Header/components/Title/Title.style.d.ts

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

package/dist/Drawer/components/Header/components/Title/Title.types.d.ts

@@ -1,4 +1,4 @@
-import { HeadingProps } from '../../../../../Typography/components/Heading/Heading.types';
-export type DrawerContentTitleProps = HeadingProps & {
+import { TypographyHeadingProps } from '../../../../../Typography';
+export type DrawerContentTitleProps = TypographyHeadingProps & {
     hidden?: boolean;
 };

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.styles.d.ts

@@ -1,18 +1,18 @@
 /// <reference types="react" />
 export declare const MenuContent: 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<HTMLElement>, "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, {}, never>;
@@ -23,7 +23,7 @@ export declare const FilterToggleButton: import("styled-components").StyledCompo
 export declare const MenuOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuOption: import("styled-components").StyledComponent<({ isSelected, selected, onClick, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const OptionsSearch: 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("../../../Helpers/common.types").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/FormField/FormField.context.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { FieldStatus } from './FormField.types';
-export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element;
-export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<FieldStatus>> & {
+    passOnlyStateDown?: FieldStatus | ((state: FieldStatus) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
+    passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/FormField.d.ts

@@ -2,10 +2,8 @@
 import { FormFieldProps } from './FormField.types';
 import { ComposeElementProps } from '../Helpers/common.types';
 declare const FormField: (({ children, label, infoIconProps, required, optional, additionalText, ...restProps }: FormFieldProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element) & {
-    Nested: ({ id, children }: import("./components/Nested/Nested.types").FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
-    Compose: ({ layout, id, ...restProps }: import("./components/Nested/Nested.types").FormFieldNestedProps & {
-        layout?: import("./FormField.types").FormFieldLayout | undefined;
-    } & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Nested: ({ id, children, disabledState }: import("./components/Nested/Nested.types").FormFieldNestedProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ layout, id, ...restProps }: import("./components/Compose/Compose.types").FormFieldComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     AdditionalText: ({ size, children, forceStatus, ...restProps }: import("./components/AdditionalText/AdditionalText.types").AdditionalTextProps) => import("react/jsx-runtime").JSX.Element | null;
     Label: (({ label, infoIconProps, required, optional, readOnly, ...restProps }: import("../Label").LabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ children, readOnly, ...restProps }: import("../Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/components/AdditionalText/AdditionalText.style.d.ts

@@ -1,3 +1,3 @@
-export declare const AdditionalText: 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 AdditionalText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     $error: boolean;
 }, never>;

package/dist/FormField/components/AdditionalText/AdditionalText.types.d.ts

@@ -1,5 +1,5 @@
-import { BodyProps } from '../../../Typography/components/Body/Body.types';
+import { TypographyBodyProps } from '../../../Typography';
 import { FieldStatus } from '../../FormField.types';
-export type AdditionalTextProps = BodyProps & {
+export type AdditionalTextProps = TypographyBodyProps & {
     forceStatus?: FieldStatus;
 };

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

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

package/dist/FormField/components/Compose/Compose.types.d.ts

@@ -1,5 +1,5 @@
 import { FormFieldLayout } from '../../FormField.types';
-import { FormFieldNestedProps } from '../Nested/Nested.types';
-export type FormFieldComposeProps = FormFieldNestedProps & {
+export type FormFieldComposeProps = {
+    id?: string;
     layout?: FormFieldLayout;
 };