@redis-ui/components 41.11.0 → 42.7.0

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.cjs

@@ -6,6 +6,7 @@ const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const React = require("react");
 const SearchBar_context = require("../../../../../../SearchBar.context.cjs");
 const ToggleButton = require("../../../../../../../Button/ToggleButton/ToggleButton.cjs");
+const Button = require("../../../../../../../Button/Button.cjs");
 const FilterToggle = () => {
   const {
     filtersOpen,
@@ -19,8 +20,8 @@ const FilterToggle = () => {
     asChild: true,
     children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
       pressed: filtersOpen,
-      children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
-        customColor: "currentColor"
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+        icon: redisUiIcons.FilterIcon
       }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
         count: activeFiltersValueCount
       })]

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.js

@@ -4,6 +4,7 @@ import { FilterIcon } from "@redislabsdev/redis-ui-icons";
 import { useMemo } from "react";
 import { useSearchBarContext } from "../../../../../../SearchBar.context.js";
 import ToggleButton from "../../../../../../../Button/ToggleButton/ToggleButton.js";
+import Button from "../../../../../../../Button/Button.js";
 const FilterToggle = () => {
   const {
     filtersOpen,
@@ -17,8 +18,8 @@ const FilterToggle = () => {
     asChild: true,
     children: jsxRuntimeExports.jsxs(ToggleButton, {
       pressed: filtersOpen,
-      children: [jsxRuntimeExports.jsx(FilterIcon, {
-        customColor: "currentColor"
+      children: [jsxRuntimeExports.jsx(Button.Icon, {
+        icon: FilterIcon
       }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
         count: activeFiltersValueCount
       })]

package/dist/Section/Section.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionContextProps } from './Section.types';
 export declare const SectionContext: import("react").Context<SectionContextProps | null>;
 export declare const useSectionContext: () => SectionContextProps;

package/dist/Section/Section.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionProps } from './Section.types';
 declare const Section: (({ content, label, actions, summary, summaryAlwaysVisible, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ open: controlledOpen, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Body/Body.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as Collapsible from '@radix-ui/react-collapsible';
 export declare const SectionBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as Collapsible from '@radix-ui/react-collapsible';
 export declare const CollapsibleRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/Section/components/Header/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionHeaderProps } from './Header.types';
 export declare const Header: (({ label, actions }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<({ children, renderExtra, maxRows, minItems, expectedGap, estimatedItemsPerRow, ...restProps }: import("../../../../../Overflow").OverflowProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CategoryValueItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.style.d.ts

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

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CategoryValueChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     category: string;
     value: string;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const SectionCollapseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const SectionCollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/Label/Label.style.d.ts

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

package/dist/Section/components/SummaryBar/SummaryBar.style.d.ts

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

package/dist/Select/Select.d.ts

@@ -1,36 +1,25 @@
-/// <reference types="react" />
 import { SelectOption, SelectProps } from './Select.types';
 import { RestSelectTriggerComposeProps } from './components/Trigger/components/Compose/Compose.types';
-declare const Select: (<TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ options, disabled, defaultOpen, open, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, valueRender, searchable, placement, maxVisibleItems, placeholder, virtualized, contentWidth, ...restProps }: import("./components/Compose/Compose.types").SelectComposeProps<TValue, TOption> & Omit<import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption> & {
-    allowReset?: boolean | undefined;
-    loading?: boolean | undefined;
-} & Omit<import("./components/Content/Content.types").SelectContentProps<TOption>, "optionComponent" | "optionValueRender"> & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: <TValue_1 extends string = string, TOption_1 extends SelectOption<TValue_1> = SelectOption<TValue_1>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: import("./components/Compose/Compose.types").SelectComposeProps<TValue_1, TOption_1> & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (<TOption_2 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, allowReset, loading, ...props }: Omit<import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_2> & {
-        allowReset?: boolean | undefined;
-        loading?: boolean | undefined;
-    } & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ customContainer, id, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-        Value: <TOption_3 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_3> & import("./components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: (<TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ options, disabled, defaultOpen, open, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, valueRender, searchable, placement, maxVisibleItems, placeholder, virtualized, contentWidth, ...restProps }: SelectProps<TValue, TOption> & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ options, children, onOpenChange, defaultValue, value, onChange, customCompare, error, valid, disabled, ...restProps }: import("./components/Compose/Compose.types").SelectComposeProps<TValue, TOption> & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (<TOption extends SelectOption = SelectOption>({ placeholder, valueRender, allowReset, loading, ...props }: import("./components/Trigger/Trigger.types").SelectTriggerProps<TOption> & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ customContainer, id, "aria-describedby": ariaDescribedby, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+        Value: <TOption extends SelectOption = SelectOption>({ placeholder, valueRender, ...restProps }: import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption> & import("./components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
         ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
-        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;
         Arrow: ({ icon, ...restProps }: import("./components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
-        ErrorIcon: ({ 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;
+        ErrorIcon: ({ 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;
     };
-    Content: (<TOption_4 extends SelectOption<string> = SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
-        searchable?: boolean | undefined;
-    } & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Content: (<TOption extends SelectOption = SelectOption>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/Content.types").SelectContentProps<TOption> & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, placement, contentWidth, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps & import("..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-        OptionList: <TOption_5 extends SelectOption<string> = SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_5> & import("./components/Content/components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
+        OptionList: <TOption extends SelectOption = SelectOption>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption> & import("./components/Content/components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
         Search: 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("..").RestInputProps & import("react").RefAttributes<HTMLInputElement>>;
         Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
     };
-    Option: (<TOption_6 extends SelectOption<string> = SelectOption<string>>({ option, content, ...restProps }: import("./components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<TOption_6> & {
-        content?: import("react").ReactNode;
-    } & import("./components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: import("react").ForwardRefExoticComponent<import("./components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps<SelectOption<string>> & import("./components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps & import("..").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
-        Content: (props: import("..").ComposeChildrenProps & import("./components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
+    Option: (<TOption extends SelectOption = SelectOption>({ option, content, ...restProps }: import(".").SelectOptionProps<TOption> & import(".").RestSelectOptionProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: import("react").ForwardRefExoticComponent<import("./components/Content/components/Option/components/Compose/Compose.types").SelectOptionComposeProps & import("./components/Content/components/Option/components/Compose/Compose.types").RestSelectOptionComposeProps & import("..").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
+        Content: (props: import("./components/Content/components/Option/components/Content/Content.types").SelectOptionContentProps & import("./components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
         Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/Select/components/Content/Content.d.ts

@@ -1,12 +1,9 @@
-/// <reference types="react" />
 import { SelectContentProps } from './Content.types';
 import { RestSelectContentComposeProps } from './components/Compose/Compose.types';
 import { SelectOption } from '../../Select.types';
-declare const Content: (<TOption extends SelectOption<string> = SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Compose/Compose.types").SelectContentComposeProps & import("./components/OptionList/OptionList.types").OptionListProps<TOption> & {
-    searchable?: boolean | undefined;
-} & RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Content: (<TOption extends SelectOption = SelectOption>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: SelectContentProps<TOption> & RestSelectContentComposeProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, placement, contentWidth, ...restProps }: import("./components/Compose/Compose.types").SelectContentComposeProps & RestSelectContentComposeProps & import("../../..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    OptionList: <TOption_1 extends SelectOption<string> = SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/OptionList/OptionList.types").OptionListProps<TOption_1> & import("./components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
+    OptionList: <TOption extends SelectOption = SelectOption>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/OptionList/OptionList.types").OptionListProps<TOption> & import("./components/OptionList/OptionList.types").RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
     Search: 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("../../..").RestInputProps & import("react").RefAttributes<HTMLInputElement>>;
     Footer: import("styled-components").StyledComponent<"div", any, {}, never>;
 };

package/dist/Select/components/Content/components/Compose/Compose.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixSelect from '@radix-ui/react-select';
 type ContainerProps = {
     $contentWidth?: string;

package/dist/Select/components/Content/components/Option/Option.d.ts

@@ -1,11 +1,8 @@
-/// <reference types="react" />
 import { RestSelectOptionProps, SelectOptionProps } from './Option.types';
 import { SelectOption } from '../../../../Select.types';
-declare const Option: (<TOption extends SelectOption<string> = SelectOption<string>>({ option, content, ...restProps }: import("./components/Compose/Compose.types").SelectOptionComposeProps<TOption> & {
-    content?: import("react").ReactNode;
-} & import("./components/Compose/Compose.types").RestSelectOptionComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: import("react").ForwardRefExoticComponent<import("./components/Compose/Compose.types").SelectOptionComposeProps<SelectOption<string>> & import("./components/Compose/Compose.types").RestSelectOptionComposeProps & import("../../../../..").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
-    Content: (props: import("../../../../..").ComposeChildrenProps & import("./components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const Option: (<TOption extends SelectOption = SelectOption>({ option, content, ...restProps }: SelectOptionProps<TOption> & RestSelectOptionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: import("react").ForwardRefExoticComponent<import("./components/Compose/Compose.types").SelectOptionComposeProps & import("./components/Compose/Compose.types").RestSelectOptionComposeProps & import("../../../../..").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: (props: import("./components/Content/Content.types").SelectOptionContentProps & import("./components/Content/Content.types").RestSelectOptionContentProps) => import("react/jsx-runtime").JSX.Element;
     Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Option;

package/dist/Select/components/Content/components/Option/components/Compose/Compose.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { RestSelectOptionComposeProps, SelectOptionComposeProps } from './Compose.types';
 import { ComposeChildrenProps } from '../../../../../../../Helpers/common.types';
-import { SelectOption } from '../../../../../../Select.types';
-declare const Compose: React.ForwardRefExoticComponent<SelectOptionComposeProps<SelectOption<string>> & RestSelectOptionComposeProps & ComposeChildrenProps & React.RefAttributes<HTMLDivElement>>;
+declare const Compose: React.ForwardRefExoticComponent<SelectOptionComposeProps & RestSelectOptionComposeProps & ComposeChildrenProps & React.RefAttributes<HTMLDivElement>>;
 export default Compose;

package/dist/Select/components/Content/components/Option/components/Compose/Compose.style.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import * as RadixSelect from '@radix-ui/react-select';
 export declare const SelectOptionContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {
-    $hidden?: boolean | undefined;
+    $hidden?: boolean;
 }, never>;

package/dist/Select/components/Content/components/Option/components/OptionSelectionIndicator/OptionSelectionIndicator.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadixSelect from '@radix-ui/react-select';
 export declare const OptionSelectionIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/Select/components/Content/components/OptionList/OptionList.d.ts

@@ -1,4 +1,4 @@
 import { OptionListProps, RestOptionListProps } from './OptionList.types';
 import { SelectOption } from '../../../../Select.types';
-declare const OptionList: <TOption extends SelectOption<string> = SelectOption<string>>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: OptionListProps<TOption> & RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
+declare const OptionList: <TOption extends SelectOption = SelectOption>({ optionValueRender, optionComponent: OptionComponent, maxVisibleItems, virtualized, ...restProps }: OptionListProps<TOption> & RestOptionListProps) => import("react/jsx-runtime").JSX.Element;
 export default OptionList;

package/dist/Select/components/Content/components/OptionList/OptionList.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixSelect from '@radix-ui/react-select';
 export declare const OptionList: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>, any, {
     $maxHeight: number;

package/dist/Select/components/Content/components/OptionList/Virtual.d.ts

@@ -6,5 +6,5 @@ type VirtualProps<TOption extends SelectOption = SelectOption> = {
     validOptions: TOption[];
     onHideContainer: (hidden: boolean) => void;
 };
-export declare const Virtual: <TOption extends SelectOption<string> = SelectOption<string>>({ children, viewport, validOptions, onHideContainer }: VirtualProps<TOption>) => import("react/jsx-runtime").JSX.Element;
+export declare const Virtual: <TOption extends SelectOption = SelectOption>({ children, viewport, validOptions, onHideContainer }: VirtualProps<TOption>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Select/components/Content/components/Search/SelectSearchInput.style.d.ts

@@ -1,12 +1,8 @@
-/// <reference types="react" />
 export declare const SelectSearchInput: 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("../../../../..").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/Select/components/Context/Context.cjs

@@ -14,10 +14,12 @@ const SelectContextProvider = ({
   children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
     children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldRequiredTransProvider, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
-        value: error ?? "",
-        children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
-          ...restProps
+      children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldAdditionTextIdTransProvider, {
+        children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.ErrorContentProvider, {
+          value: error ?? "",
+          children: jsxRuntime.jsxRuntimeExports.jsx(Context.Provider, {
+            ...restProps
+          })
         })
       })
     })

package/dist/Select/components/Context/Context.d.ts

@@ -1,6 +1,6 @@
 import { ProviderProps, ReactElement } from 'react';
 import { SelectOption, SelectContextType } from '../../Select.types';
-export declare const SelectContextProvider: <TOption extends SelectOption<string> = SelectOption<string>>({ error, valid, ...restProps }: ProviderProps<SelectContextType<TOption>> & {
+export declare const SelectContextProvider: <TOption extends SelectOption = SelectOption>({ error, valid, ...restProps }: ProviderProps<SelectContextType<TOption>> & {
     error: string | ReactElement | undefined;
     valid: boolean | undefined;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/Select/components/Context/Context.js

@@ -2,7 +2,7 @@ import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.
 import { createContext, useContext } from "react";
 import { ErrorContentProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { FieldStatusTransProvider, FieldRequiredTransProvider } from "../../../FormField/FormField.context.js";
+import { FieldStatusTransProvider, FieldRequiredTransProvider, FieldAdditionTextIdTransProvider } from "../../../FormField/FormField.context.js";
 const Context = createContext(null);
 const SelectContextProvider = ({
   error,
@@ -12,10 +12,12 @@ const SelectContextProvider = ({
   children: jsxRuntimeExports.jsx(FieldStatusTransProvider, {
     value: error && "error" || valid && "success" || "none",
     children: jsxRuntimeExports.jsx(FieldRequiredTransProvider, {
-      children: jsxRuntimeExports.jsx(ErrorContentProvider, {
-        value: error ?? "",
-        children: jsxRuntimeExports.jsx(Context.Provider, {
-          ...restProps
+      children: jsxRuntimeExports.jsx(FieldAdditionTextIdTransProvider, {
+        children: jsxRuntimeExports.jsx(ErrorContentProvider, {
+          value: error ?? "",
+          children: jsxRuntimeExports.jsx(Context.Provider, {
+            ...restProps
+          })
         })
       })
     })

package/dist/Select/components/Context/hooks/useSearch.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { SelectCompareHandler, SelectOption } from '../../../Select.types';
-export declare const useSearch: <TOption extends SelectOption<string> = SelectOption<string>>({ customCompare }: {
-    customCompare?: SelectCompareHandler<TOption> | undefined;
+export declare const useSearch: <TOption extends SelectOption = SelectOption>({ customCompare }: {
+    customCompare?: SelectCompareHandler<TOption>;
 }) => {
     readonly searchValue: string;
     readonly setSearchValue: import("react").Dispatch<import("react").SetStateAction<string>>;

package/dist/Select/components/Trigger/Trigger.d.ts

@@ -1,20 +1,16 @@
-/// <reference types="react" />
 import { SelectTriggerProps } from './Trigger.types';
 import { RestSelectTriggerComposeProps } from './components/Compose/Compose.types';
 import { SelectOption } from '../../Select.types';
-declare const Trigger: (<TOption extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, allowReset, loading, ...props }: Omit<import("./components/Compose/Compose.types").SelectTriggerComposeProps, "customContainer"> & import("./components/Value/Value.types").SelectTriggerValueProps<TOption> & {
-    allowReset?: boolean | undefined;
-    loading?: boolean | undefined;
-} & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ customContainer, id, ...restProps }: import("./components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("../../..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
-    Value: <TOption_1 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("./components/Value/Value.types").SelectTriggerValueProps<TOption_1> & import("./components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
+declare const Trigger: (<TOption extends SelectOption = SelectOption>({ placeholder, valueRender, allowReset, loading, ...props }: SelectTriggerProps<TOption> & RestSelectTriggerComposeProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: ({ customContainer, id, "aria-describedby": ariaDescribedby, ...restProps }: import("./components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("../../..").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+    Value: <TOption extends SelectOption = SelectOption>({ placeholder, valueRender, ...restProps }: import("./components/Value/Value.types").SelectTriggerValueProps<TOption> & import("./components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
     ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
-    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;
     Arrow: ({ icon, ...restProps }: import("./components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
     /**
      * @deprecated use StatusIndicator instead
      */
-    ErrorIcon: ({ 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;
+    ErrorIcon: ({ 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;
 };
 export default Trigger;

package/dist/Select/components/Trigger/components/Arrow/Arrow.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons';
 export declare const ArrowIconContainer: import("styled-components").StyledComponent<({ Component, ...componentProps }: {
     Component: import("react").ElementType<MonochromeIconProps, keyof import("react").JSX.IntrinsicElements>;

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

@@ -11,26 +11,30 @@ const FormField_context = require("../../../../../FormField/FormField.context.cj
 const Compose = ({
   customContainer,
   id,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }) => {
   const sharedId = SharedId_context.useSharedId(id);
   const status = FormField_context.useFieldStatus();
   const required = FormField_context.useFieldRequired();
+  const additionTextId = FormField_context.useFieldAdditionTextId();
   const errorContent = Field_context.useErrorContent();
   const errorId = index.useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
-    ...statusProps,
     ...requiredProps,
-    ...restProps
+    ...restProps,
+    ...statusProps
   };
   const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
     id: errorId,

package/dist/Select/components/Trigger/components/Compose/Compose.d.ts

@@ -1,4 +1,4 @@
 import { ComposeChildrenProps } from '../../../../../Helpers/common.types';
 import { RestSelectTriggerComposeProps, SelectTriggerComposeProps } from './Compose.types';
-declare const Compose: ({ customContainer, id, ...restProps }: SelectTriggerComposeProps & RestSelectTriggerComposeProps & ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
+declare const Compose: ({ customContainer, id, "aria-describedby": ariaDescribedby, ...restProps }: SelectTriggerComposeProps & RestSelectTriggerComposeProps & ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

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

@@ -5,30 +5,34 @@ import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visu
 import { TriggerContainer } from "./Compose.style.js";
 import { useErrorContent } from "../../../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../../../Helpers/contexts/SharedId.context.js";
-import { useFieldStatus, useFieldRequired } from "../../../../../FormField/FormField.context.js";
+import { useFieldStatus, useFieldRequired, useFieldAdditionTextId } from "../../../../../FormField/FormField.context.js";
 const Compose = ({
   customContainer,
   id,
+  "aria-describedby": ariaDescribedby,
   ...restProps
 }) => {
   const sharedId = useSharedId(id);
   const status = useFieldStatus();
   const required = useFieldRequired();
+  const additionTextId = useFieldAdditionTextId();
   const errorContent = useErrorContent();
   const errorId = useId();
   const statusProps = status === "error" ? {
     "aria-invalid": true,
-    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
-  } : null;
+    "aria-describedby": [errorId, additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  } : {
+    "aria-describedby": [additionTextId, ariaDescribedby].filter(Boolean).join(" ") || void 0
+  };
   const requiredProps = required ? {
     "aria-required": true
   } : null;
   const triggerProps = {
     id: sharedId,
     "data-status": status,
-    ...statusProps,
     ...requiredProps,
-    ...restProps
+    ...restProps,
+    ...statusProps
   };
   const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {
     id: errorId,

package/dist/Select/components/Trigger/components/Compose/Compose.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadixSelect from '@radix-ui/react-select';
 export declare const TriggerContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixSelect.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/Select/components/Trigger/components/Value/Value.d.ts

@@ -1,4 +1,4 @@
 import { RestSelectTriggerValueProps, SelectTriggerValueProps } from './Value.types';
 import { SelectOption } from '../../../../Select.types';
-declare const Value: <TOption extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: SelectTriggerValueProps<TOption> & RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
+declare const Value: <TOption extends SelectOption = SelectOption>({ placeholder, valueRender, ...restProps }: SelectTriggerValueProps<TOption> & RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
 export default Value;

package/dist/SideBar/SideBar.cjs

@@ -3,7 +3,6 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const index = require("../node_modules/@radix-ui/react-id/dist/index.cjs");
-const SideBar_style = require("./SideBar.style.cjs");
 const SideBar_context = require("./SideBar.context.cjs");
 const Provider = require("../Tooltip/Provider/Provider.cjs");
 const SideBarLogo = require("./components/SideBarLogo/SideBarLogo.cjs");
@@ -15,7 +14,8 @@ const Header = require("./components/Header/Header.cjs");
 const ScrollContainer = require("./components/ScrollContainer/ScrollContainer.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
 const SideBarThemeProvider = require("./SideBarThemeProvider.cjs");
-const Split = require("./components/Split/Split.cjs");
+const SideBar_style = require("./SideBar.style.cjs");
+const FlexSplit = require("../Layouts/FlexSplit/FlexSplit.cjs");
 const SideBar = Object.assign(({
   isExpanded,
   ...rest
@@ -26,7 +26,7 @@ const SideBar = Object.assign(({
     setTransitionEnd(end);
   };
   return jsxRuntime.jsxRuntimeExports.jsx(SideBarThemeProvider.SideBarThemeProvider, {
-    children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_context.SideBarContext.Provider, {
+    children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_context.SideBarContextProvider, {
       value: {
         transitionEnd,
         handleTransitionChange,
@@ -35,6 +35,9 @@ const SideBar = Object.assign(({
       },
       children: jsxRuntime.jsxRuntimeExports.jsx(Provider.default, {
         children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_style.SideBarContainer, {
+          component: "nav",
+          direction: "column",
+          gap: "0",
           id: sidebarId,
           onTransitionEnd: () => handleTransitionChange(true),
           "data-state": isExpanded ? "expanded" : "collapsed",
@@ -49,7 +52,7 @@ const SideBar = Object.assign(({
   SideBarLogo: SideBarLogo.default,
   ItemsContainer: ItemsContainer.default,
   ScrollContainer: ScrollContainer.default,
-  Split: Split.default,
+  Split: FlexSplit.FlexSplit,
   Divider: Divider.default,
   Item: Item.default,
   Button: Button.default,

package/dist/SideBar/SideBar.context.cjs

@@ -1,15 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const React__default = /* @__PURE__ */ _interopDefault(React);
-const SideBarContext = React__default.default.createContext(null);
-const useSideBarContext = () => {
-  const context = React__default.default.useContext(SideBarContext);
-  if (!context) {
-    throw new Error("useSideBarContext must be used within a SideBarProvider");
-  }
-  return context;
-};
-exports.SideBarContext = SideBarContext;
+const NullableContext = require("../Helpers/contexts/NullableContext.cjs");
+const [useSideBarContext, SideBarContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "SideBar"
+});
+exports.SideBarContextProvider = SideBarContextProvider;
 exports.useSideBarContext = useSideBarContext;

package/dist/SideBar/SideBar.context.d.ts

@@ -1,4 +1,2 @@
-import React from 'react';
 import { SideBarContextProps } from './SideBar.types';
-export declare const SideBarContext: React.Context<SideBarContextProps | null>;
-export declare const useSideBarContext: () => SideBarContextProps;
+export declare const useSideBarContext: () => SideBarContextProps, SideBarContextProvider: import("react").Provider<SideBarContextProps>;

package/dist/SideBar/SideBar.context.js

@@ -1,13 +1,8 @@
-import React__default from "react";
-const SideBarContext = React__default.createContext(null);
-const useSideBarContext = () => {
-  const context = React__default.useContext(SideBarContext);
-  if (!context) {
-    throw new Error("useSideBarContext must be used within a SideBarProvider");
-  }
-  return context;
-};
+import { createNullableContext } from "../Helpers/contexts/NullableContext.js";
+const [useSideBarContext, SideBarContextProvider] = createNullableContext({
+  forComponentName: "SideBar"
+});
 export {
-  SideBarContext,
+  SideBarContextProvider,
   useSideBarContext
 };