@redis-ui/components 41.11.0 → 42.7.0

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.cjs

@@ -7,6 +7,7 @@ const Title = require("./components/Title/Title.cjs");
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -14,7 +15,8 @@ const Chip = Object.assign(({
     children: [jsxRuntime.jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntime.jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

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;

package/dist/Chip/Chip.d.ts

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

@@ -5,6 +5,7 @@ import { Title } from "./components/Title/Title.js";
 const Chip = Object.assign(({
   text,
   onClose,
+  closeButtonTitle,
   ...restProps
 }) => {
   return jsxRuntimeExports.jsxs(Chip.Compose, {
@@ -12,7 +13,8 @@ const Chip = Object.assign(({
     children: [jsxRuntimeExports.jsx(Chip.Title, {
       children: text
     }), jsxRuntimeExports.jsx(Chip.CloseButton, {
-      onClose
+      onClose,
+      title: closeButtonTitle
     })]
   });
 }, {

package/dist/Chip/Chip.types.d.ts

@@ -1,8 +1,9 @@
 import type { ChipComposeProps, RestChipComposeProps } from './components/Compose/Compose.types';
 import type { ChipCloseButtonProps } from './components/CloseButton/CloseButton.types';
-import type { ChildFree } from '../Helpers/common.types';
+import type { ChildFree } from '../Helpers';
 export interface ChipProps extends ChipComposeProps, ChildFree<RestChipComposeProps>, ChipCloseButtonProps {
     text: string;
+    closeButtonTitle?: string;
 }
 export type ChipSizes = 'M' | 'S';
 export type ChipVariants = 'regular' | 'flat';

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

@@ -11,6 +11,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = redisUiIcons.ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -29,7 +30,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

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

@@ -1,2 +1,2 @@
 import { ChipCloseButtonProps, RestChipCloseButtonProps } from './CloseButton.types';
-export declare const CloseButton: ({ onClose, icon: Icon, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CloseButton: ({ onClose, icon: Icon, title, ...restProps }: RestChipCloseButtonProps & ChipCloseButtonProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -9,6 +9,7 @@ const sizeMapper = {
 const CloseButton = ({
   onClose,
   icon: Icon = ToastCancelIcon,
+  title = "Remove",
   ...restProps
 }) => {
   const {
@@ -27,7 +28,7 @@ const CloseButton = ({
     onClick: handleRemoveChip,
     "$size": size,
     "$variant": variant,
-    title: "Remove",
+    title,
     ...restProps,
     children: jsxRuntimeExports.jsx(Icon, {
       size: sizeMapper[size],

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/Chip/components/CloseButton/CloseButton.types.d.ts

@@ -3,6 +3,6 @@ import { IconType } from '@redislabsdev/redis-ui-icons';
 export type ChipCloseButtonProps = {
     onClose?: VoidFunction;
 };
-export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & {
+export type RestChipCloseButtonProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style' | 'title'> & {
     icon?: IconType;
 };

package/dist/ChipList/ChipList.cjs

@@ -7,6 +7,7 @@ const ChipList_style = require("./ChipList.style.cjs");
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -28,6 +29,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.d.ts

@@ -1,3 +1,3 @@
 import { ChipListProps } from './ChipList.types';
-declare const ChipList: ({ chips, onRemoveItem, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
+declare const ChipList: ({ chips, onRemoveItem, removeItemButtonTitle, maxRows, size, variant, disabled, renderExtraTooltip, ...restProps }: ChipListProps) => import("react/jsx-runtime").JSX.Element;
 export default ChipList;

package/dist/ChipList/ChipList.js

@@ -5,6 +5,7 @@ import { ChipListOverflow } from "./ChipList.style.js";
 const ChipList = ({
   chips,
   onRemoveItem,
+  removeItemButtonTitle,
   maxRows = 1,
   size = "M",
   variant,
@@ -26,6 +27,7 @@ const ChipList = ({
   children: chips.map((item) => jsxRuntimeExports.jsx(Chip, {
     text: item.label,
     onClose: onRemoveItem ? () => onRemoveItem(item.key) : void 0,
+    closeButtonTitle: removeItemButtonTitle,
     tooltip: item.tooltip,
     size,
     variant,

package/dist/ChipList/ChipList.types.d.ts

@@ -10,6 +10,7 @@ export interface ChipItem extends HTMLAttributes<HTMLSpanElement> {
 export interface ChipListProps {
     chips: ChipItem[];
     onRemoveItem?: (chip: string) => void;
+    removeItemButtonTitle?: string;
     maxRows?: number;
     size?: ChipSizes;
     variant?: ChipVariants;

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,