@redis-ui/components 42.0.0 → 42.8.0

package/dist/AppSelectionMenu/components/Trigger/Trigger.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const Trigger_styles = require("./Trigger.styles.cjs");
+const Trigger_style = require("./Trigger.style.cjs");
 const AppSelectionMenu_context = require("../../AppSelectionMenu.context.cjs");
 const Compose = require("./components/Compose/Compose.cjs");
 const Trigger = Object.assign(({
@@ -11,7 +11,7 @@ const Trigger = Object.assign(({
     open
   } = AppSelectionMenu_context.useAppSelectionMenuContext();
   return jsxRuntime.jsxRuntimeExports.jsx(Trigger.Compose, {
-    children: jsxRuntime.jsxRuntimeExports.jsx(Trigger_styles.Trigger, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(Trigger_style.Trigger, {
       active: open,
       children
     })

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

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { Trigger as Trigger$1 } from "./Trigger.styles.js";
+import { Trigger as Trigger$1 } from "./Trigger.style.js";
 import { useAppSelectionMenuContext } from "../../AppSelectionMenu.context.js";
 import { Compose } from "./components/Compose/Compose.js";
 const Trigger = Object.assign(({

package/dist/AppSelectionMenu/components/Trigger/{Trigger.styles.d.ts → Trigger.style.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Trigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").ToggleButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
     IndicatorCount: ({ count, ...restProps }: import("../../../Button/ToggleButton/components/IndicatorCount/IndicatorCount.types").IndicatorCountTypes) => import("react/jsx-runtime").JSX.Element;
 }, any, {

package/dist/AppSelectionMenu/components/Trigger/components/Compose/Compose.cjs

@@ -5,6 +5,7 @@ const Popover = require("../../../../../Popover/Popover.cjs");
 const Compose = ({
   children
 }) => jsxRuntime.jsxRuntimeExports.jsx(Popover.default.Trigger, {
+  "aria-label": "Menu",
   children
 });
 exports.Compose = Compose;

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

@@ -3,6 +3,7 @@ import Popover from "../../../../../Popover/Popover.js";
 const Compose = ({
   children
 }) => jsxRuntimeExports.jsx(Popover.Trigger, {
+  "aria-label": "Menu",
   children
 });
 export {

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

@@ -1,22 +1,21 @@
-/// <reference types="react" />
 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("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("../Menu/components/Content/components/Item/Components/Text/Text.types").TextProps) => 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("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        SubHead: (props: import("../Menu/components/Content/components/Item/Components/Text/Text.types").TextProps) => 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("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("../Menu/components/Content/components/Label/components/Text/Text.types").TextProps) => 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("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("../Menu/components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../Menu/components/Content/components/Label/components/Compose/Compose.types").RestMenuLabelComposeProps) => import("react/jsx-runtime").JSX.Element;
     };
     Separator: (props: import("../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {
-    $contentMaxHeight?: string | undefined;
+    $contentMaxHeight?: string;
 }, never>;
 export declare const TriggerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Badge/Badge.style.d.ts

@@ -2,6 +2,6 @@ import { Theme } from '@redislabsdev/redis-ui-styles';
 import { BadgeVariants } from './Badge.types';
 export declare const getVariantStyle: (theme: Theme, variant: BadgeVariants) => import("@redislabsdev/redis-ui-styles").BadgeVariantStyle;
 export declare const Badge: import("styled-components").StyledComponent<"div", any, {
-    $color?: string | undefined;
+    $color?: string;
     $variant: BadgeVariants;
 }, never>;

package/dist/Badge/Badge.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconType } from '@redislabsdev/redis-ui-icons';
 import { Theme } from '@redislabsdev/redis-ui-styles';
 export declare const badgeVariants: readonly ["white", "light", "default", "informative", "success", "notice", "danger", "attention", "disabled"];

package/dist/Badge/BadgeIcon.cjs

@@ -20,6 +20,7 @@ const BadgeIcon = ({
 }) => {
   const IconElement = icon || BADGE_ICON_RECORD[variant];
   return jsxRuntime.jsxRuntimeExports.jsx(IconElement, {
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Badge/BadgeIcon.js

@@ -18,6 +18,7 @@ const BadgeIcon = ({
 }) => {
   const IconElement = icon || BADGE_ICON_RECORD[variant];
   return jsxRuntimeExports.jsx(IconElement, {
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Banner/Banner.d.ts

@@ -1,22 +1,14 @@
-/// <reference types="react" />
 import { BannerProps } from './Banner.types';
 import { ChildFree, ComposeElementProps } from '../Helpers/common.types';
 declare const Banner: (({ show, onClose, actions, message, showIcon, showCloseButton, customIcon, ...props }: BannerProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element | null) & {
-    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<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ size, variant, layoutVariant, onClose, ...props }: import("./components/Compose/Compose.types").BannerComposeProps & ComposeElementProps) => 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("..").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;
-            disabled?: boolean | undefined;
-        } & import("./components/BannerSemanticComponents").RestSemanticButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Message: ({ children, ...restProps }: import("./components/Message/Message.types").MessageProps) => import("react/jsx-runtime").JSX.Element | null;
+    Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element | null) & {
+        Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
+        Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("./components/Actions/components/Action/Action.types").ActionProps & import("./components/BannerSemanticComponents").RestSemanticButtonProps) => import("react/jsx-runtime").JSX.Element;
     };
-    CloseButton: ({ variant, onClick: onClose, size, ...props }: import("./components/BannerSemanticComponents").SemanticCloseButtonProps & import("./components/BannerSemanticComponents").RestSemanticCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    CloseButton: ({ variant, onClick: onClose, size, ...props }: import("./components/CloseButton/CloseButton.types").CloseButtonProps & import("./components/BannerSemanticComponents").RestSemanticCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     Split: ({ minWidth, ...props }: import("./components/Split/Split.types").SplitProps & import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Banner;

package/dist/Banner/bannerContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BannerContextParams } from './Banner.types';
 export declare const BannerContext: import("react").Context<BannerContextParams>;
 export declare const useBannerParams: (customParams?: Partial<BannerContextParams>) => BannerContextParams;

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

@@ -1,11 +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<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;
-        disabled?: boolean | undefined;
-    } & import("../BannerSemanticComponents").RestSemanticButtonProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
+    Action: ({ label, onClick, closes, icon, variant: outlineVariant, size, ...restProps }: import("./components/Action/Action.types").ActionProps & import("../BannerSemanticComponents").RestSemanticButtonProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Actions;

package/dist/Banner/components/BannerSemanticComponents/SemanticButton/SemanticButton.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SemanticButtonProps, SemanticButtonSize } from './SemanticButton.types';
 export declare const SemanticButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
     Icon: ({ icon, customSize, title }: import("../../../../Button/components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Banner/components/BannerSemanticComponents/SemanticCloseButton/SemanticCloseButton.cjs

@@ -16,11 +16,13 @@ const SemanticCloseButton = ({
     onClick == null ? void 0 : onClick(e);
   },
   size: "small",
+  "aria-label": "Close",
+  title: "Close",
   ...props,
   children: children || jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.CancelIcon, {
     size,
     customColor: "currentColor",
-    title: "Close"
+    "aria-hidden": true
   })
 });
 exports.default = SemanticCloseButton;

package/dist/Banner/components/BannerSemanticComponents/SemanticCloseButton/SemanticCloseButton.js

@@ -14,11 +14,13 @@ const SemanticCloseButton = ({
     onClick == null ? void 0 : onClick(e);
   },
   size: "small",
+  "aria-label": "Close",
+  title: "Close",
   ...props,
   children: children || jsxRuntimeExports.jsx(CancelIcon, {
     size,
     customColor: "currentColor",
-    title: "Close"
+    "aria-hidden": true
   })
 });
 export {

package/dist/Banner/components/BannerSemanticComponents/SemanticCloseButton/SemanticCloseButton.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const SemanticCloseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../Button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> & {
     Icon: ({ icon, customSize, title }: import("../../../../Button/components/Icon/Icon.types").ButtonIconProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;

package/dist/Banner/components/BannerSemanticComponents/SemanticIcon/SemanticIcon.cjs

@@ -13,6 +13,7 @@ const SemanticIcon = ({
   const Icon = customIcon || SemanticIcon_helpers.getIcon(variant);
   return jsxRuntime.jsxRuntimeExports.jsx(Icon, {
     customColor: props.color ? void 0 : variantStyle.iconColor,
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Banner/components/BannerSemanticComponents/SemanticIcon/SemanticIcon.js

@@ -11,6 +11,7 @@ const SemanticIcon = ({
   const Icon = customIcon || getIcon(variant);
   return jsxRuntimeExports.jsx(Icon, {
     customColor: props.color ? void 0 : variantStyle.iconColor,
+    "aria-hidden": true,
     ...props
   });
 };

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

@@ -1,2 +1 @@
-/// <reference types="react" />
-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>;
+export declare const BannerContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeElementProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const Message: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -1,3 +1,3 @@
 export declare const Split: import("styled-components").StyledComponent<"div", any, {
-    $minWidth?: string | number | undefined;
+    $minWidth?: number | string;
 }, never>;

package/dist/BoxSelectionGroup/BoxSelectionGroup.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxSelectionGroupContextProps } from './BoxSelectionGroup.types';
 export declare const BoxSelectionGroupContext: import("react").Context<BoxSelectionGroupContextProps | null>;
 export declare const useBoxSelectionGroupContext: () => BoxSelectionGroupContextProps;

package/dist/BoxSelectionGroup/BoxSelectionGroup.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { BoxSelectionGroupBox, BoxSelectionGroupProps } from './BoxSelectionGroup.types';
 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("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Compose: <TValue extends string = string>({ defaultValue, value, onChange, ...restProps }: import(".").BoxSelectionGroupComposeProps<TValue> & import(".").RestBoxSelectionGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Item: (({ box, ...restProps }: import(".").BoxSelectionGroupItemProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "children" | "content"> & 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;
@@ -14,7 +13,7 @@ declare const BoxSelectionGroup: (<TValue extends string = string, TBox extends
                 tabIndex: number;
                 disabled: boolean;
             }) => import("react").ReactNode;
-            noninteractive?: boolean | undefined;
+            noninteractive?: boolean;
         }) => import("react/jsx-runtime").JSX.Element | null;
         useItemContext: () => import("./components/Item/Item.context").BoxSelectionGroupItemContextProps;
         ItemContextConsumer: import("react").Consumer<import("./components/Item/Item.context").BoxSelectionGroupItemContextProps | null>;

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

@@ -1,6 +1,5 @@
-/// <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("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BoxSelectionGroupItem: import("styled-components").StyledComponent<(({ box, ...restProps }: import(".").BoxSelectionGroupItemProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "children" | "content"> & 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;
@@ -11,7 +10,7 @@ export declare const BoxSelectionGroupItem: import("styled-components").StyledCo
             tabIndex: number;
             disabled: boolean;
         }) => import("react").ReactNode;
-        noninteractive?: boolean | undefined;
+        noninteractive?: boolean;
     }) => import("react/jsx-runtime").JSX.Element | null;
     useItemContext: () => import("./components/Item/Item.context").BoxSelectionGroupItemContextProps;
     ItemContextConsumer: import("react").Consumer<import("./components/Item/Item.context").BoxSelectionGroupItemContextProps | null>;

package/dist/BoxSelectionGroup/MultiBoxSelectionGroup.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { BoxSelectionGroupBox, MultiBoxSelectionGroupProps } from './BoxSelectionGroup.types';
 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("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Compose: <TValue extends string = string>({ onChange, ...restProps }: import(".").MultiBoxSelectionGroupComposeProps<TValue> & import(".").RestBoxSelectionGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Item: (({ box, ...restProps }: import(".").BoxSelectionGroupItemProps & import(".").RestBoxSelectionGroupItemProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: import("react").ForwardRefExoticComponent<import(".").BoxSelectionGroupItemComposeProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "children" | "content"> & 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;
@@ -14,7 +13,7 @@ declare const MultiBoxSelectionGroup: (<TValue extends string = string, TBox ext
                 tabIndex: number;
                 disabled: boolean;
             }) => import("react").ReactNode;
-            noninteractive?: boolean | undefined;
+            noninteractive?: boolean;
         }) => import("react/jsx-runtime").JSX.Element | null;
         useItemContext: () => import("./components/Item/Item.context").BoxSelectionGroupItemContextProps;
         ItemContextConsumer: import("react").Consumer<import("./components/Item/Item.context").BoxSelectionGroupItemContextProps | null>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BoxSelectionGroupBox } from '../../BoxSelectionGroup.types';
 export interface BoxSelectionGroupItemContextProps {
     isSelected: boolean;

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

@@ -1,7 +1,6 @@
-/// <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("../../..").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>, "children" | "content"> & 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;
@@ -12,7 +11,7 @@ declare const Item: (({ box, ...restProps }: BoxSelectionGroupItemProps & RestBo
             tabIndex: number;
             disabled: boolean;
         }) => import("react").ReactNode;
-        noninteractive?: boolean | undefined;
+        noninteractive?: boolean;
     }) => import("react/jsx-runtime").JSX.Element | null;
     useItemContext: () => import("./Item.context").BoxSelectionGroupItemContextProps;
     ItemContextConsumer: import("react").Consumer<import("./Item.context").BoxSelectionGroupItemContextProps | null>;

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("../../../../..").ComposeChildrenProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "content" | "children"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Compose: React.ForwardRefExoticComponent<BoxSelectionGroupItemComposeProps & import("../../../../..").ComposeChildrenProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "content"> & React.RefAttributes<HTMLButtonElement>>;
 export default Compose;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { Theme } from '@redislabsdev/redis-ui-styles';
 import * as RadixToggle from '@radix-ui/react-toggle';
 export declare const BottomActiveBorder: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BoxSelectionGroupItemCompose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixToggle.ToggleProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const BoxSelectionGroupItemCompose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixToggle.ToggleProps & import("react").RefAttributes<HTMLButtonElement>>, any, import("styled-components").ThemeProps<Theme>, never>;

package/dist/Breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1,51 @@
+"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 Compose = require("./components/Compose/Compose.cjs");
+const List = require("./components/List/List.cjs");
+const Item = require("./components/Item/Item.cjs");
+const Link = require("./components/Link/Link.cjs");
+const Separator = require("./components/Separator/Separator.cjs");
+const Current = require("./components/Current/Current.cjs");
+const Breadcrumbs = Object.assign(({
+  items,
+  separator = "/",
+  "aria-label": ariaLabel,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Compose, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children: jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.List, {
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        jsxRuntime.jsxRuntimeExports.jsxs(React.Fragment, {
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: isLast ? jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Current, {
+              children: item.label
+            }) : jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Link, {
+              href: item.href,
+              onClick: item.onClick,
+              children: item.label
+            })
+          }), !isLast && jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: jsxRuntime.jsxRuntimeExports.jsx(Breadcrumbs.Separator, {
+              children: separator
+            })
+          })]
+        }, `${index}-${item.href ?? ""}`)
+      );
+    })
+  })
+}), {
+  Compose: Compose.default,
+  List: List.default,
+  Item: Item.default,
+  Link: Link.default,
+  Separator: Separator.default,
+  Current: Current.default
+});
+const Breadcrumbs$1 = Breadcrumbs;
+exports.default = Breadcrumbs$1;

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,10 @@
+import { BreadcrumbsProps } from './Breadcrumbs.types';
+declare const Breadcrumbs: (({ items, separator, "aria-label": ariaLabel, ...restProps }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ "aria-label": ariaLabel, children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsComposeProps & import("./Breadcrumbs.types").RestBreadcrumbsComposeProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsListProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ children, ...restProps }: import("./Breadcrumbs.types").BreadcrumbsItemProps) => import("react/jsx-runtime").JSX.Element;
+    Link: import("react").ForwardRefExoticComponent<import(".").BreadcrumbsLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+    Separator: ({ children, ...restProps }: import(".").BreadcrumbsSeparatorProps) => import("react/jsx-runtime").JSX.Element;
+    Current: ({ children, ...restProps }: import(".").BreadcrumbsCurrentProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Breadcrumbs;

package/dist/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,51 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { Fragment } from "react";
+import Compose from "./components/Compose/Compose.js";
+import List from "./components/List/List.js";
+import Item from "./components/Item/Item.js";
+import Link from "./components/Link/Link.js";
+import Separator from "./components/Separator/Separator.js";
+import Current from "./components/Current/Current.js";
+const Breadcrumbs = Object.assign(({
+  items,
+  separator = "/",
+  "aria-label": ariaLabel,
+  ...restProps
+}) => jsxRuntimeExports.jsx(Breadcrumbs.Compose, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children: jsxRuntimeExports.jsx(Breadcrumbs.List, {
+    children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return (
+        // eslint-disable-next-line react/no-array-index-key
+        jsxRuntimeExports.jsxs(Fragment, {
+          children: [jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: isLast ? jsxRuntimeExports.jsx(Breadcrumbs.Current, {
+              children: item.label
+            }) : jsxRuntimeExports.jsx(Breadcrumbs.Link, {
+              href: item.href,
+              onClick: item.onClick,
+              children: item.label
+            })
+          }), !isLast && jsxRuntimeExports.jsx(Breadcrumbs.Item, {
+            children: jsxRuntimeExports.jsx(Breadcrumbs.Separator, {
+              children: separator
+            })
+          })]
+        }, `${index}-${item.href ?? ""}`)
+      );
+    })
+  })
+}), {
+  Compose,
+  List,
+  Item,
+  Link,
+  Separator,
+  Current
+});
+const Breadcrumbs$1 = Breadcrumbs;
+export {
+  Breadcrumbs$1 as default
+};

package/dist/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+import type { ChildFree } from '../Helpers/common.types';
+import type { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps } from './components/Compose/Compose.types';
+import type { BreadcrumbsListProps } from './components/List/List.types';
+import type { BreadcrumbsItemProps } from './components/Item/Item.types';
+export type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+    onClick?: () => void;
+};
+export interface BreadcrumbsProps extends BreadcrumbsComposeProps, ChildFree<RestBreadcrumbsComposeProps> {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+}
+export type { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps };
+export type { BreadcrumbsListProps };
+export type { BreadcrumbsItemProps };

package/dist/Breadcrumbs/components/Compose/Compose.cjs

@@ -0,0 +1,14 @@
+"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 Compose = ({
+  "aria-label": ariaLabel = "Breadcrumb",
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.BreadcrumbsNav, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children
+});
+exports.default = Compose;

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

@@ -0,0 +1,3 @@
+import { BreadcrumbsComposeProps, RestBreadcrumbsComposeProps } from './Compose.types';
+declare const Compose: ({ "aria-label": ariaLabel, children, ...restProps }: BreadcrumbsComposeProps & RestBreadcrumbsComposeProps) => import("react/jsx-runtime").JSX.Element;
+export default Compose;

package/dist/Breadcrumbs/components/Compose/Compose.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { BreadcrumbsNav } from "./Compose.style.js";
+const Compose = ({
+  "aria-label": ariaLabel = "Breadcrumb",
+  children,
+  ...restProps
+}) => jsxRuntimeExports.jsx(BreadcrumbsNav, {
+  "aria-label": ariaLabel,
+  ...restProps,
+  children
+});
+export {
+  Compose as default
+};

package/dist/{SideBar/components/Split/Split.style.cjs → Breadcrumbs/components/Compose/Compose.style.cjs}

@@ -3,8 +3,8 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const Split = _styled__default.default.div.withConfig({
-  displayName: "Splitstyle__Split",
-  componentId: "RedisUI__sc-1e341p8-0"
-})(["flex:1;"]);
-exports.Split = Split;
+const BreadcrumbsNav = _styled__default.default.nav.withConfig({
+  displayName: "Composestyle__BreadcrumbsNav",
+  componentId: "RedisUI__sc-ifaw7a-0"
+})(["display:flex;align-items:center;"]);
+exports.BreadcrumbsNav = BreadcrumbsNav;

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

@@ -0,0 +1 @@
+export declare const BreadcrumbsNav: import("styled-components").StyledComponent<"nav", any, {}, never>;

package/dist/Breadcrumbs/components/Compose/Compose.style.js

@@ -0,0 +1,8 @@
+import _styled from "styled-components";
+const BreadcrumbsNav = _styled.nav.withConfig({
+  displayName: "Composestyle__BreadcrumbsNav",
+  componentId: "RedisUI__sc-ifaw7a-0"
+})(["display:flex;align-items:center;"]);
+export {
+  BreadcrumbsNav
+};

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

@@ -0,0 +1,5 @@
+import { ComposeElementProps } from '../../../Helpers/common.types';
+export interface BreadcrumbsComposeProps {
+    'aria-label'?: string;
+}
+export type RestBreadcrumbsComposeProps = ComposeElementProps<HTMLElement>;

package/dist/Breadcrumbs/components/Current/Current.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Current_style = require("./Current.style.cjs");
+const Current = ({
+  children,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Current_style.BreadcrumbsCurrent, {
+  "aria-current": "page",
+  ...restProps,
+  children
+});
+exports.default = Current;

package/dist/Breadcrumbs/components/Current/Current.d.ts

@@ -0,0 +1,3 @@
+import { BreadcrumbsCurrentProps } from './Current.types';
+declare const Current: ({ children, ...restProps }: BreadcrumbsCurrentProps) => import("react/jsx-runtime").JSX.Element;
+export default Current;