@redis-ui/components 42.0.0 → 42.7.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/Button/ActionIconButton/ActionIconButton.style.d.ts

@@ -1,2 +1,2 @@
 import { ActionIconButtonProps } from './ActionIconButton.types';
-export declare const ActionIconButton: import("styled-components").StyledComponent<"button", any, Required<Pick<ActionIconButtonProps, "variant" | "size">>, never>;
+export declare const ActionIconButton: import("styled-components").StyledComponent<"button", any, Required<Pick<ActionIconButtonProps, "size" | "variant">>, never>;

package/dist/Button/Button.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonContextType } from './Button.types';
 export declare const ButtonContext: import("react").Context<ButtonContextType | null>;
 export declare function useButtonContext(): ButtonContextType;

package/dist/Button/Button.style.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.types';
 export declare const baseButtonStyle: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<any>>;
-export declare const Button: import("styled-components").StyledComponent<"button", any, Required<Pick<ButtonProps, "theme" | "variant" | "size">>, never>;
+export declare const Button: import("styled-components").StyledComponent<"button", any, Required<Pick<ButtonProps, "theme" | "size" | "variant">>, never>;

package/dist/Button/Button.style.utils.d.ts

@@ -7,4 +7,4 @@ export declare const bgColorMap: TokenMap<string>;
 export declare const textColorMap: TokenMap<string>;
 export declare const shadowBorderMap: TokenMap<string>;
 export declare const borderColorMap: TokenMap<string>;
-export declare const getButtonStatesStyle: <T extends string>(theme: Partial<Record<ButtonState, Partial<Record<T, string>>>> | null | undefined, maps: TokenMap<T>[]) => FlattenInterpolation<ThemeProps<Theme>> | null;
+export declare const getButtonStatesStyle: <T extends string>(theme: ButtonStatesTheme<T> | undefined | null, maps: TokenMap<T>[]) => FlattenInterpolation<ThemeProps<Theme>> | null;

package/dist/Button/TextButton/TextButton.cjs

@@ -7,13 +7,13 @@ const Button_context = require("../Button.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const TextButton = React__default.default.forwardRef(({
-  size = "M",
+  size = "medium",
   variant = "primary",
   children,
   ...restProps
 }, ref) => {
   return jsxRuntime.jsxRuntimeExports.jsx(Button_context.ButtonContext.Provider, {
-    value: "text",
+    value: size,
     children: jsxRuntime.jsxRuntimeExports.jsx(TextButton_style.TextButton, {
       type: "button",
       variant,

package/dist/Button/TextButton/TextButton.js

@@ -3,13 +3,13 @@ import React__default from "react";
 import { TextButton as TextButton$2 } from "./TextButton.style.js";
 import { ButtonContext } from "../Button.context.js";
 const TextButton = React__default.forwardRef(({
-  size = "M",
+  size = "medium",
   variant = "primary",
   children,
   ...restProps
 }, ref) => {
   return jsxRuntimeExports.jsx(ButtonContext.Provider, {
-    value: "text",
+    value: size,
     children: jsxRuntimeExports.jsx(TextButton$2, {
       type: "button",
       variant,

package/dist/Button/TextButton/TextButton.style.cjs

@@ -26,7 +26,11 @@ const TextButton = _styled__default.default.button.withConfig({
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
   return css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]);
-}, () => Body_style.useBodyStyles(), ({
+}, ({
+  size
+}) => Body_style.useBodyStyles({
+  $size: size === "small" ? "S" : "M"
+}), ({
   variant
 }) => getVariantStyle(variant)(redisUiStyles.useTheme()));
 exports.TextButton = TextButton;

package/dist/Button/TextButton/TextButton.style.d.ts

@@ -1,2 +1,2 @@
 import { TextButtonProps } from './TextButton.types';
-export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant" | "size">>, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "size" | "variant">>, never>;

package/dist/Button/TextButton/TextButton.style.js

@@ -22,7 +22,11 @@ const TextButton = _styled.button.withConfig({
 }) => {
   const layout = variant.includes("inline") ? "inline" : "block";
   return styleFromTokens(sizeTokenMaps, useTheme().components.textButton.layouts[layout].sizes[size]);
-}, () => useBodyStyles(), ({
+}, ({
+  size
+}) => useBodyStyles({
+  $size: size === "small" ? "S" : "M"
+}), ({
   variant
 }) => getVariantStyle(variant)(useTheme()));
 export {

package/dist/Button/TextButton/TextButton.types.d.ts

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes } from 'react';
-export type TextButtonSizes = 'M';
+export type TextButtonSizes = 'medium' | 'small';
 export declare const textButtonVariants: readonly ["primary", "destructive", "primary-inline", "destructive-inline"];
 export type TextButtonVariants = (typeof textButtonVariants)[number];
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {

package/dist/Button/ToggleButton/ToggleButton.style.cjs

@@ -8,8 +8,14 @@ const Button_style_utils = require("../Button.style.utils.cjs");
 const IndicatorCount_style = require("./components/IndicatorCount/IndicatorCount.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const ToggleButton = _styled__default.default.button.withConfig({
+const ToggleButton = _styled__default.default.button.attrs(({
+  "aria-pressed": pressed,
+  role
+}) => ({
+  "data-pressed": pressed,
+  "aria-pressed": role && role !== "button" ? void 0 : pressed
+})).withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-pressed='true'])){", "}&:where([data-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
 exports.ToggleButton = ToggleButton;

package/dist/Button/ToggleButton/ToggleButton.style.d.ts

@@ -1 +1,4 @@
-export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const ToggleButton: import("styled-components").StyledComponent<"button", any, {
+    'data-pressed': boolean | "true" | "false" | "mixed" | undefined;
+    'aria-pressed': boolean | "true" | "false" | "mixed" | undefined;
+} & import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, "aria-pressed" | "data-pressed">;

package/dist/Button/ToggleButton/ToggleButton.style.js

@@ -4,10 +4,16 @@ import { baseButtonStyle } from "../Button.style.js";
 import { useBodyStyles } from "../../Typography/components/Body/Body.style.js";
 import { getButtonStatesStyle, bgColorMap, textColorMap, borderColorMap } from "../Button.style.utils.js";
 import { IndicatorCount } from "./components/IndicatorCount/IndicatorCount.style.js";
-const ToggleButton = _styled.button.withConfig({
+const ToggleButton = _styled.button.attrs(({
+  "aria-pressed": pressed,
+  role
+}) => ({
+  "data-pressed": pressed,
+  "aria-pressed": role && role !== "button" ? void 0 : pressed
+})).withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-pressed='true'])){", "}&:where([data-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
 export {
   ToggleButton
 };

package/dist/ButtonGroup/ButtonGroup.types.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement>;

package/dist/ButtonGroup/components/Button/Button.style.d.ts

@@ -1,3 +1,3 @@
 export declare const Button: import("styled-components").StyledComponent<"button", any, {
-    isSelected?: boolean | undefined;
+    isSelected?: boolean;
 }, never>;

package/dist/Card/Card.style.d.ts

@@ -1,4 +1,4 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {
-    width?: string | number | undefined;
-    height?: string | number | undefined;
+    width?: string | number;
+    height?: string | number;
 }, never>;

package/dist/Card/Card.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     width?: number | string;
     height?: number | string;

package/dist/Checkbox/Checkbox.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxContextType } from './components/Compose/Compose.types';
 export declare const CheckboxContext: import("react").Context<CheckboxContextType | null>;
 export declare function useCheckboxContext(): CheckboxContextType;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixCheckbox from '@radix-ui/react-checkbox';
 import { CheckboxContextType } from '../Compose/Compose.types';
 export declare const CheckboxIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixCheckbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, any, CheckboxContextType, never>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CheckboxVariants, CheckedType } from '../Compose/Compose.types';
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", any, {
     $checked: CheckedType;

package/dist/Chip/Chip.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ChipContextType } from './Chip.types';
 export declare const ChipContext: import("react").Context<ChipContextType | null>;
 export declare function useChipContext(): ChipContextType;