@redis-ui/components 42.0.0 → 42.7.0

package/dist/Chip/Chip.d.ts

@@ -1,10 +1,7 @@
-/// <reference types="react" />
 import { ChipProps } from './Chip.types';
 declare const Chip: (({ text, onClose, closeButtonTitle, ...restProps }: ChipProps) => 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;
+    Compose: ({ size, variant, disabled, tooltip, ...restProps }: import("./components/Compose/Compose.types").RestChipComposeProps & 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, title, ...restProps }: Pick<import("react").HTMLAttributes<HTMLElement>, "style" | "title" | "className"> & {
-        icon?: import("@redislabsdev/redis-ui-icons/monochrome").IconType | undefined;
-    } & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    CloseButton: ({ onClose, icon: Icon, title, ...restProps }: import("./components/CloseButton/CloseButton.types").RestChipCloseButtonProps & import("./components/CloseButton/CloseButton.types").ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Chip;

package/dist/Chip/components/CloseButton/CloseButton.style.d.ts

@@ -1,5 +1,5 @@
 import { ChipContextType } from '../../Chip.types';
 export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {
-    $size: ChipContextType['size'];
-    $variant: ChipContextType['variant'];
+    $size: ChipContextType["size"];
+    $variant: ChipContextType["variant"];
 }, never>;

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

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const ExtraListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ExtraListItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
-    $disabled?: boolean | undefined;
+    $disabled?: boolean;
 }, never>;

package/dist/CountryFlag/CountryFlag.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CountryFlagProps extends React.HTMLAttributes<HTMLImageElement> {
     countryCode: string;
 }

package/dist/DatePicker/DatePicker.style.d.ts

@@ -1,3 +1,3 @@
 import * as DayPicker from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
-export declare const DatePicker: import("styled-components").StyledComponent<typeof DayPicker.DayPicker, any, DayPicker.DayPickerDefaultProps | DayPicker.DayPickerSingleProps | DayPicker.DayPickerMultipleProps | DayPicker.DayPickerRangeProps, never>;
+export declare const DatePicker: import("styled-components").StyledComponent<typeof DayPicker.DayPicker, any, DayPicker.DayPickerProps, never>;

package/dist/Drawer/Drawer.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DrawerContextProps } from './Drawer.types';
 export declare const DrawerContext: import("react").Context<DrawerContextProps | null>;
 export declare const useDrawerContext: () => DrawerContextProps;

package/dist/Drawer/Drawer.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import { DrawerProps } from './Drawer.types';
 declare const Drawer: (({ children, persistent, open, onOpenChange, containerElement, zIndex, onDrawerWillOpen, onDrawerDidOpen, onDrawerWillClose, onDrawerDidClose, ...props }: DrawerProps) => import("react/jsx-runtime").JSX.Element) & {
     Header: (({ title, titleHidden, ...restProps }: import("./components/Header/Header.types").DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...props }: import("./components/Header/components/Compose/Compose.types").DrawerHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ hidden, children, ...restProps }: import("./components/Header/components/Title/Title.types").DrawerContentTitleProps) => import("react/jsx-runtime").JSX.Element;
     };
-    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").DrawerDescriptionProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
-        Text: (props: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").DrawerDescriptionProps & import("./components/Description/Description.types").RestDrawerDescriptionProps) => import("react/jsx-runtime").JSX.Element | null) & {
+        Text: (props: import("./components/Description/components/Text/Text.types").DrawerDescriptionTextProps) => 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) & {

package/dist/Drawer/components/Content/Content.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as Dialog from '@radix-ui/react-dialog';
 export declare const PreventOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DrawerContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Dialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {

package/dist/Drawer/components/Content/hooks/useJitterFix.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const useJitterFix: () => {
     style: import("react").CSSProperties;
 } | undefined;

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("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("./components/Text/Text.types").DrawerDescriptionTextProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Description;

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

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

package/dist/Drawer/components/Footer/components/Compose/Compose.types.d.ts

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

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CloseIconButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

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

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

package/dist/Filters/Filters.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FiltersContextProps } from './Filters.types';
 export declare const FiltersContext: import("react").Context<FiltersContextProps>;
 export declare const useFiltersContext: () => FiltersContextProps;

package/dist/Filters/components/Chips/Chips.d.ts

@@ -1,3 +1,3 @@
 import { ChipListProps } from '../../../ChipList';
-declare const _default: (props: Omit<ChipListProps, 'chips'>) => import("react/jsx-runtime").JSX.Element | null;
+declare const _default: (props: Omit<ChipListProps, "chips">) => import("react/jsx-runtime").JSX.Element | null;
 export default _default;

package/dist/Filters/components/Clear/Clear.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const Filters_context = require("../../Filters.context.cjs");
 const TextButton = require("../../../Button/TextButton/TextButton.cjs");
+const Button = require("../../../Button/Button.cjs");
 const ClearButton = (props) => {
   const {
     onChange,
@@ -14,8 +15,8 @@ const ClearButton = (props) => {
     onClick: () => onChange([]),
     variant: "primary",
     ...props,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.EraserIcon, {
-      customColor: "currentColor"
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+      icon: redisUiIcons.EraserIcon
     }), "Clear all"]
   });
 };

package/dist/Filters/components/Clear/Clear.js

@@ -2,6 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { EraserIcon } from "@redislabsdev/redis-ui-icons";
 import { useFiltersContext } from "../../Filters.context.js";
 import TextButton from "../../../Button/TextButton/TextButton.js";
+import Button from "../../../Button/Button.js";
 const ClearButton = (props) => {
   const {
     onChange,
@@ -12,8 +13,8 @@ const ClearButton = (props) => {
     onClick: () => onChange([]),
     variant: "primary",
     ...props,
-    children: [jsxRuntimeExports.jsx(EraserIcon, {
-      customColor: "currentColor"
+    children: [jsxRuntimeExports.jsx(Button.Icon, {
+      icon: EraserIcon
     }), "Clear all"]
   });
 };

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FiltersProps } from '../../Filters.types';
 export interface FiltersComposeProps extends FiltersProps {
     children: React.ReactNode;

package/dist/Filters/components/FiltersContainer/FiltersContainer.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const FiltersContainer_styles = require("./FiltersContainer.styles.cjs");
-const FiltersContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(FiltersContainer_styles.FiltersContainer, {
+const FiltersContainer_style = require("./FiltersContainer.style.cjs");
+const FiltersContainer = (props) => jsxRuntime.jsxRuntimeExports.jsx(FiltersContainer_style.FiltersContainer, {
   ...props
 });
 exports.default = FiltersContainer;

package/dist/Filters/components/FiltersContainer/FiltersContainer.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { FiltersContainer as FiltersContainer$1 } from "./FiltersContainer.styles.js";
+import { FiltersContainer as FiltersContainer$1 } from "./FiltersContainer.style.js";
 const FiltersContainer = (props) => jsxRuntimeExports.jsx(FiltersContainer$1, {
   ...props
 });

package/dist/Filters/components/FiltersContainer/{FiltersContainer.styles.cjs → FiltersContainer.style.cjs}

@@ -4,7 +4,7 @@ const _styled = require("styled-components");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const FiltersContainer = _styled__default.default.div.withConfig({
-  displayName: "FiltersContainerstyles__FiltersContainer",
-  componentId: "RedisUI__sc-18a4uf6-0"
+  displayName: "FiltersContainerstyle__FiltersContainer",
+  componentId: "RedisUI__sc-se222k-0"
 })(["display:flex;flex:0 1 auto;flex-wrap:wrap;"]);
 exports.FiltersContainer = FiltersContainer;

package/dist/Filters/components/FiltersContainer/{FiltersContainer.styles.js → FiltersContainer.style.js}

@@ -1,7 +1,7 @@
 import _styled from "styled-components";
 const FiltersContainer = _styled.div.withConfig({
-  displayName: "FiltersContainerstyles__FiltersContainer",
-  componentId: "RedisUI__sc-18a4uf6-0"
+  displayName: "FiltersContainerstyle__FiltersContainer",
+  componentId: "RedisUI__sc-se222k-0"
 })(["display:flex;flex:0 1 auto;flex-wrap:wrap;"]);
 export {
   FiltersContainer

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.cjs

@@ -3,7 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const Filters_context = require("../../Filters.context.cjs");
-const MultiSelectFilter_styles = require("./MultiSelectFilter.styles.cjs");
+const MultiSelectFilter_style = require("./MultiSelectFilter.style.cjs");
 const Menu = require("../../../Menu/Menu.cjs");
 const ToggleButton = require("../../../Button/ToggleButton/ToggleButton.cjs");
 const Checkbox = require("../../../Checkbox/Checkbox.cjs");
@@ -32,9 +32,9 @@ const MultiSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.MenuTriggerContainer, {
       children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-        children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
+        children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_style.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
             count: activeOptionsNum
@@ -44,13 +44,13 @@ const MultiSelectFilter = ({
           })]
         })
       })
-    }), jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.MenuContent, {
+    }), jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_style.MenuContent, {
       align: "start",
       sideOffset: 8,
-      children: [renderSearch && jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.OptionsSearch, {
+      children: [renderSearch && jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.OptionsSearch, {
         onChange: onSearch
-      }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuOptionsContainer, {
-        children: visibleOptions.map((filterOption) => jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuOption, {
+      }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.MenuOptionsContainer, {
+        children: visibleOptions.map((filterOption) => jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.MenuOption, {
           onClick: (e) => {
             e.preventDefault();
             onFilterItemSelect(filter, filterOption);

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { useState } from "react";
 import { useFiltersContext } from "../../Filters.context.js";
-import { MenuTriggerContainer, FilterToggleButton, MenuContent, OptionsSearch, MenuOptionsContainer, MenuOption } from "./MultiSelectFilter.styles.js";
+import { MenuTriggerContainer, FilterToggleButton, MenuContent, OptionsSearch, MenuOptionsContainer, MenuOption } from "./MultiSelectFilter.style.js";
 import Menu from "../../../Menu/Menu.js";
 import ToggleButton from "../../../Button/ToggleButton/ToggleButton.js";
 import Checkbox from "../../../Checkbox/Checkbox.js";

package/dist/Filters/components/MultiSelectFilter/{MultiSelectFilter.styles.cjs → MultiSelectFilter.style.cjs}

@@ -8,28 +8,28 @@ const SearchInput = require("../../../Inputs/SearchInput/SearchInput.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const MenuContent = _styled__default.default(Menu.default.Content).withConfig({
-  displayName: "MultiSelectFilterstyles__MenuContent",
-  componentId: "RedisUI__sc-qwvtoe-0"
+  displayName: "MultiSelectFilterstyle__MenuContent",
+  componentId: "RedisUI__sc-1td8tf6-0"
 })(["overflow:hidden;padding:", ";max-height:min( ", ",var(--radix-dropdown-menu-content-available-height) );"], () => redisUiStyles.useTheme().components.filters.filterDropdown.padding, () => redisUiStyles.useTheme().components.filters.filterDropdown.maxHeight);
 const MenuTriggerContainer = _styled__default.default.div.withConfig({
-  displayName: "MultiSelectFilterstyles__MenuTriggerContainer",
-  componentId: "RedisUI__sc-qwvtoe-1"
+  displayName: "MultiSelectFilterstyle__MenuTriggerContainer",
+  componentId: "RedisUI__sc-1td8tf6-1"
 })(["border-right:", " solid ", ";padding:", ";"], () => redisUiStyles.useTheme().components.filters.filtersBar.separator.width, () => redisUiStyles.useTheme().components.filters.filtersBar.separator.color, () => redisUiStyles.useTheme().components.filters.filtersBar.trigger.margin);
 const FilterToggleButton = _styled__default.default(ToggleButton.default).withConfig({
-  displayName: "MultiSelectFilterstyles__FilterToggleButton",
-  componentId: "RedisUI__sc-qwvtoe-2"
+  displayName: "MultiSelectFilterstyle__FilterToggleButton",
+  componentId: "RedisUI__sc-1td8tf6-2"
 })(["gap:", ";color:", ";&[data-state='on']{color:", ";}"], () => redisUiStyles.useTheme().components.filters.filtersBar.trigger.gap, () => redisUiStyles.useTheme().components.filters.filtersBar.trigger.off.color, () => redisUiStyles.useTheme().components.filters.filtersBar.trigger.on.color);
 const MenuOptionsContainer = _styled__default.default.div.withConfig({
-  displayName: "MultiSelectFilterstyles__MenuOptionsContainer",
-  componentId: "RedisUI__sc-qwvtoe-3"
+  displayName: "MultiSelectFilterstyle__MenuOptionsContainer",
+  componentId: "RedisUI__sc-1td8tf6-3"
 })(["overflow-y:auto;overflow-x:hidden;flex:1;"]);
 const MenuOption = _styled__default.default(Menu.default.Content.Item.Compose).withConfig({
-  displayName: "MultiSelectFilterstyles__MenuOption",
-  componentId: "RedisUI__sc-qwvtoe-4"
+  displayName: "MultiSelectFilterstyle__MenuOption",
+  componentId: "RedisUI__sc-1td8tf6-4"
 })(["padding:", ";white-space:nowrap;"], () => redisUiStyles.useTheme().components.filters.filterDropdown.item.padding);
 const OptionsSearch = _styled__default.default(SearchInput.default).withConfig({
-  displayName: "MultiSelectFilterstyles__OptionsSearch",
-  componentId: "RedisUI__sc-qwvtoe-5"
+  displayName: "MultiSelectFilterstyle__OptionsSearch",
+  componentId: "RedisUI__sc-1td8tf6-5"
 })(["margin:", ";"], () => redisUiStyles.useTheme().components.filters.filterDropdown.searchBar.padding);
 exports.FilterToggleButton = FilterToggleButton;
 exports.MenuContent = MenuContent;

package/dist/Filters/components/MultiSelectFilter/{MultiSelectFilter.styles.d.ts → MultiSelectFilter.style.d.ts}

@@ -1,18 +1,17 @@
-/// <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("../../..").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, {}, never>;
@@ -23,13 +22,10 @@ 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("../../..").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;
-    ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../../../Button").IconButtonProps> & import("../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../Inputs/components/Compose/TextCompose.types").TextInputComposeProps & import("../../../Inputs/components/Compose/TextCompose.types").RestTextInputComposeProps) => import("react/jsx-runtime").JSX.Element;
+    ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: import("../../../Inputs/components/ResetButton/ResetButton.types").RestResetButtonProps & import("../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../../../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../../../Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
+    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "className" | "style">) => import("react/jsx-runtime").JSX.Element | null;
     LoadingIndicator: ({ loading, ...restProps }: import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     SearchIcon: () => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;

package/dist/Filters/components/MultiSelectFilter/{MultiSelectFilter.styles.js → MultiSelectFilter.style.js}

@@ -4,28 +4,28 @@ import Menu from "../../../Menu/Menu.js";
 import ToggleButton from "../../../Button/ToggleButton/ToggleButton.js";
 import SearchInput from "../../../Inputs/SearchInput/SearchInput.js";
 const MenuContent = _styled(Menu.Content).withConfig({
-  displayName: "MultiSelectFilterstyles__MenuContent",
-  componentId: "RedisUI__sc-qwvtoe-0"
+  displayName: "MultiSelectFilterstyle__MenuContent",
+  componentId: "RedisUI__sc-1td8tf6-0"
 })(["overflow:hidden;padding:", ";max-height:min( ", ",var(--radix-dropdown-menu-content-available-height) );"], () => useTheme().components.filters.filterDropdown.padding, () => useTheme().components.filters.filterDropdown.maxHeight);
 const MenuTriggerContainer = _styled.div.withConfig({
-  displayName: "MultiSelectFilterstyles__MenuTriggerContainer",
-  componentId: "RedisUI__sc-qwvtoe-1"
+  displayName: "MultiSelectFilterstyle__MenuTriggerContainer",
+  componentId: "RedisUI__sc-1td8tf6-1"
 })(["border-right:", " solid ", ";padding:", ";"], () => useTheme().components.filters.filtersBar.separator.width, () => useTheme().components.filters.filtersBar.separator.color, () => useTheme().components.filters.filtersBar.trigger.margin);
 const FilterToggleButton = _styled(ToggleButton).withConfig({
-  displayName: "MultiSelectFilterstyles__FilterToggleButton",
-  componentId: "RedisUI__sc-qwvtoe-2"
+  displayName: "MultiSelectFilterstyle__FilterToggleButton",
+  componentId: "RedisUI__sc-1td8tf6-2"
 })(["gap:", ";color:", ";&[data-state='on']{color:", ";}"], () => useTheme().components.filters.filtersBar.trigger.gap, () => useTheme().components.filters.filtersBar.trigger.off.color, () => useTheme().components.filters.filtersBar.trigger.on.color);
 const MenuOptionsContainer = _styled.div.withConfig({
-  displayName: "MultiSelectFilterstyles__MenuOptionsContainer",
-  componentId: "RedisUI__sc-qwvtoe-3"
+  displayName: "MultiSelectFilterstyle__MenuOptionsContainer",
+  componentId: "RedisUI__sc-1td8tf6-3"
 })(["overflow-y:auto;overflow-x:hidden;flex:1;"]);
 const MenuOption = _styled(Menu.Content.Item.Compose).withConfig({
-  displayName: "MultiSelectFilterstyles__MenuOption",
-  componentId: "RedisUI__sc-qwvtoe-4"
+  displayName: "MultiSelectFilterstyle__MenuOption",
+  componentId: "RedisUI__sc-1td8tf6-4"
 })(["padding:", ";white-space:nowrap;"], () => useTheme().components.filters.filterDropdown.item.padding);
 const OptionsSearch = _styled(SearchInput).withConfig({
-  displayName: "MultiSelectFilterstyles__OptionsSearch",
-  componentId: "RedisUI__sc-qwvtoe-5"
+  displayName: "MultiSelectFilterstyle__OptionsSearch",
+  componentId: "RedisUI__sc-1td8tf6-5"
 })(["margin:", ";"], () => useTheme().components.filters.filterDropdown.searchBar.padding);
 export {
   FilterToggleButton,

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const Filters_context = require("../../Filters.context.cjs");
 const Filters_utils = require("../../Filters.utils.cjs");
-const MultiSelectFilter_styles = require("../MultiSelectFilter/MultiSelectFilter.styles.cjs");
+const MultiSelectFilter_style = require("../MultiSelectFilter/MultiSelectFilter.style.cjs");
 const Menu = require("../../../Menu/Menu.cjs");
 const ToggleButton = require("../../../Button/ToggleButton/ToggleButton.cjs");
 const TreeView = require("../../../TreeView/TreeView.cjs");
@@ -42,9 +42,9 @@ const MultiTreeSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.MenuTriggerContainer, {
       children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-        children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
+        children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_style.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
             count: Math.floor(activeOptionsNum)
@@ -54,12 +54,12 @@ const MultiTreeSelectFilter = ({
           })]
         })
       })
-    }), jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.MenuContent, {
+    }), jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_style.MenuContent, {
       align: "start",
       sideOffset: 8,
-      children: [renderSearch && jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.OptionsSearch, {
+      children: [renderSearch && jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.OptionsSearch, {
         onChange: setSearchValue
-      }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuOptionsContainer, {
+      }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_style.MenuOptionsContainer, {
         children: jsxRuntime.jsxRuntimeExports.jsx(TreeView.default, {
           data: treeData,
           searchValue,

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.js

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { useState, useEffect } from "react";
 import { useFiltersContext } from "../../Filters.context.js";
 import { convertToTreeData, getTreeActiveOptionsNum, filterOptionsLengthFunc, findFilterOptionById } from "../../Filters.utils.js";
-import { MenuTriggerContainer, FilterToggleButton, MenuContent, OptionsSearch, MenuOptionsContainer } from "../MultiSelectFilter/MultiSelectFilter.styles.js";
+import { MenuTriggerContainer, FilterToggleButton, MenuContent, OptionsSearch, MenuOptionsContainer } from "../MultiSelectFilter/MultiSelectFilter.style.js";
 import Menu from "../../../Menu/Menu.js";
 import ToggleButton from "../../../Button/ToggleButton/ToggleButton.js";
 import TreeView from "../../../TreeView/TreeView.js";

package/dist/FormField/FormField.cjs

@@ -14,6 +14,7 @@ const FormField = Object.assign(({
   required,
   optional,
   additionalText,
+  additionalTextDescribesField,
   ...restProps
 }) => jsxRuntime.jsxRuntimeExports.jsxs(FormField.Compose, {
   ...restProps,
@@ -25,6 +26,7 @@ const FormField = Object.assign(({
   }), jsxRuntime.jsxRuntimeExports.jsx(FormField.InputContainer, {
     children
   }), jsxRuntime.jsxRuntimeExports.jsx(FormField.AdditionalText, {
+    describeField: additionalTextDescribesField,
     children: additionalText
   })]
 }), {

package/dist/FormField/FormField.context.cjs

@@ -4,12 +4,16 @@ const PrimitiveContextState = require("../Helpers/contexts/PrimitiveContextState
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = PrimitiveContextState.createPrimitiveContextState();
+const [useFieldAdditionTextId, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider] = PrimitiveContextState.createPrimitiveContextState();
+exports.FieldAdditionTextIdProvider = FieldAdditionTextIdProvider;
+exports.FieldAdditionTextIdTransProvider = FieldAdditionTextIdTransProvider;
 exports.FieldReadonlyProvider = FieldReadonlyProvider;
 exports.FieldReadonlyTransProvider = FieldReadonlyTransProvider;
 exports.FieldRequiredProvider = FieldRequiredProvider;
 exports.FieldRequiredTransProvider = FieldRequiredTransProvider;
 exports.FieldStatusProvider = FieldStatusProvider;
 exports.FieldStatusTransProvider = FieldStatusTransProvider;
+exports.useFieldAdditionTextId = useFieldAdditionTextId;
 exports.useFieldReadonly = useFieldReadonly;
 exports.useFieldRequired = useFieldRequired;
 exports.useFieldStatus = useFieldStatus;

package/dist/FormField/FormField.context.d.ts

@@ -1,4 +1,3 @@
-/// <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, passOnlyStateDown, children }: Partial<import("react").ProviderProps<FieldStatus>> & {
     passOnlyStateDown?: FieldStatus | ((state: FieldStatus) => boolean) | undefined;
@@ -9,3 +8,6 @@ export declare const useFieldRequired: (value?: boolean | undefined) => boolean
 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;
+export declare const useFieldAdditionTextId: (value?: string | undefined) => string | undefined, FieldAdditionTextIdProvider: ({ value, children }: Partial<import("react").ProviderProps<string>>) => import("react/jsx-runtime").JSX.Element, FieldAdditionTextIdTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<string>> & {
+    passOnlyStateDown?: string | ((state: string) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/FormField/FormField.context.js

@@ -2,13 +2,17 @@ import { createPrimitiveContextState } from "../Helpers/contexts/PrimitiveContex
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = createPrimitiveContextState();
 const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = createPrimitiveContextState();
+const [useFieldAdditionTextId, FieldAdditionTextIdProvider, FieldAdditionTextIdTransProvider] = createPrimitiveContextState();
 export {
+  FieldAdditionTextIdProvider,
+  FieldAdditionTextIdTransProvider,
   FieldReadonlyProvider,
   FieldReadonlyTransProvider,
   FieldRequiredProvider,
   FieldRequiredTransProvider,
   FieldStatusProvider,
   FieldStatusTransProvider,
+  useFieldAdditionTextId,
   useFieldReadonly,
   useFieldRequired,
   useFieldStatus

package/dist/FormField/FormField.d.ts

@@ -1,17 +1,16 @@
-/// <reference types="react" />
 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) & {
+declare const FormField: (({ children, label, infoIconProps, required, optional, additionalText, additionalTextDescribesField, ...restProps }: FormFieldProps & ComposeElementProps) => 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;
+    Compose: ({ layout, id, ...restProps }: import("./components/Compose/Compose.types").FormFieldComposeProps & ComposeElementProps) => import("react/jsx-runtime").JSX.Element;
+    AdditionalText: ({ size, children, forceStatus, id, describeField, ...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;
         InfoIcon: ({ size, text, content, ...tooltipProps }: import("../Label/components/InfoIcon/InfoIcon.types").InfoIconProps) => import("react/jsx-runtime").JSX.Element;
         Required: ({ children, show, size, ...restProps }: import("../Label/components/Required/Required.types").RequiredProps) => import("react/jsx-runtime").JSX.Element | null;
         Optional: ({ children, show, size, ...restProps }: import("../Label/components/Optional/Optional.types").OptionalProps) => import("react/jsx-runtime").JSX.Element | null;
         Compose: ({ htmlFor, show, ...props }: import("react").LabelHTMLAttributes<HTMLLabelElement> & {
-            show?: boolean | undefined;
+            show?: boolean;
         }) => import("react/jsx-runtime").JSX.Element | null;
     };
     InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FormField/FormField.js

@@ -12,6 +12,7 @@ const FormField = Object.assign(({
   required,
   optional,
   additionalText,
+  additionalTextDescribesField,
   ...restProps
 }) => jsxRuntimeExports.jsxs(FormField.Compose, {
   ...restProps,
@@ -23,6 +24,7 @@ const FormField = Object.assign(({
   }), jsxRuntimeExports.jsx(FormField.InputContainer, {
     children
   }), jsxRuntimeExports.jsx(FormField.AdditionalText, {
+    describeField: additionalTextDescribesField,
     children: additionalText
   })]
 }), {

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

@@ -4,5 +4,8 @@ import type { FormFieldComposeProps } from './components/Compose/Compose.types';
 export type FieldStatus = 'error' | 'success' | 'none';
 export type FormFieldLayout = 'vertical' | 'horizontal';
 export type FormFieldProps = FormFieldComposeProps & Pick<LabelProps, 'label' | 'infoIconProps' | 'required' | 'optional'> & {
+    /** Descriptive text providing additional information about the corresponding component */
     additionalText?: ReactNode;
+    /** Additional text will be used as part of the aria description in the corresponding field component, if possible */
+    additionalTextDescribesField?: boolean;
 };

package/dist/FormField/components/AdditionalText/AdditionalText.cjs

@@ -1,18 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../node_modules/@radix-ui/react-id/dist/index.cjs");
 const FormField_context = require("../../FormField.context.cjs");
 const AdditionalText_style = require("./AdditionalText.style.cjs");
 const AdditionalText = ({
   size = "S",
   children,
   forceStatus,
+  id,
+  describeField,
   ...restProps
 }) => {
   const fieldStatus = FormField_context.useFieldStatus();
+  const idGen = index.useId();
+  const addTextId = FormField_context.useFieldAdditionTextId(describeField && children ? id ?? idGen : "");
   return children ? jsxRuntime.jsxRuntimeExports.jsx(AdditionalText_style.AdditionalText, {
     size,
     "$error": (forceStatus ?? fieldStatus) === "error",
+    id: addTextId || void 0,
     ...restProps,
     children
   }) : null;