@redis-ui/components 42.0.0 → 42.7.0

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
 };

package/dist/SideBar/SideBar.d.ts

@@ -1,19 +1,18 @@
-/// <reference types="react" />
 import { SideBarProps } from './SideBar.types';
 declare const SideBar: (({ isExpanded, ...rest }: SideBarProps) => import("react/jsx-runtime").JSX.Element) & {
     SideBarLogo: ({ logoIcon: LogoIcon, ...restProps }: import("./components/SideBarLogo/SideBarLogo.types").SideBarLogoProps) => import("react/jsx-runtime").JSX.Element;
-    ItemsContainer: (props: import("./components/ItemsContainer/ItemsContainer.types").ItemsContainerProps) => import("react/jsx-runtime").JSX.Element;
-    ScrollContainer: (props: import("./components/ScrollContainer/ScrollContainer.types").ScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
-    Split: (props: import("./components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
+    ItemsContainer: (props: import("./components/ItemsContainer/ItemsContainer.types").SideBarItemsContainerProps) => import("react/jsx-runtime").JSX.Element;
+    ScrollContainer: (props: import("./components/ScrollContainer/ScrollContainer.types").SideBarScrollContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Split: ({ extraMinSpace }: import("../Layouts").FlexSplitProps) => import("react/jsx-runtime").JSX.Element;
     Divider: (props: import("./components/Divider/Divider.types").DividerProps) => import("react/jsx-runtime").JSX.Element;
     Item: (({ tooltipProps, isActive, onKeyDown, ...restProps }: import("./components/Item/Item.types").SideBarItemProps) => import("react/jsx-runtime").JSX.Element) & {
-        Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Item/components/Icon/Icon.types").ItemIconProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Icon: ({ icon: ItemIcon, ...restProps }: import("./components/Item/components/Icon/Icon.types").SideBarItemIconProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("./components/Item/components/Text/Text.types").SideBarItemTextProps) => import("react/jsx-runtime").JSX.Element;
         Button: import("react").ForwardRefExoticComponent<import("..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
     };
     Button: ({ tooltipProps: { text: tooltipText, placement, ...tooltipProps }, buttonExpandedContent, buttonCollapsedIcon: ButtonCollapsedIcon, ...rest }: import("./components/Button/Button.types").SideBarButtonProps) => import("react/jsx-runtime").JSX.Element;
     Header: ({ children, onToggle, ...rest }: import("./components/Header/Header.types").SideBarHeaderProps) => import("react/jsx-runtime").JSX.Element;
-    Footer: ((props: import("./components/Footer/Footer.types").FooterProps) => import("react/jsx-runtime").JSX.Element) & {
+    Footer: ((props: import("./components/Footer/Footer.types").SideBarFooterProps) => import("react/jsx-runtime").JSX.Element) & {
         MetaData: ({ children, ...rest }: import("./components/Footer/components/MetaData/MetaData.types").MetaDataProps) => import("react/jsx-runtime").JSX.Element;
         Link: ({ children, ...rest }: import("./components/Footer/components/Link/Link.types").LinkProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("./components/Footer/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/SideBar/SideBar.js

@@ -1,8 +1,7 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { useState } from "react";
 import { useId } from "../node_modules/@radix-ui/react-id/dist/index.js";
-import { SideBarContainer } from "./SideBar.style.js";
-import { SideBarContext } from "./SideBar.context.js";
+import { SideBarContextProvider } from "./SideBar.context.js";
 import TooltipProvider from "../Tooltip/Provider/Provider.js";
 import SideBarLogo from "./components/SideBarLogo/SideBarLogo.js";
 import SideBarItemsContainer from "./components/ItemsContainer/ItemsContainer.js";
@@ -13,7 +12,8 @@ import Header from "./components/Header/Header.js";
 import ScrollContainer from "./components/ScrollContainer/ScrollContainer.js";
 import Footer from "./components/Footer/Footer.js";
 import { SideBarThemeProvider } from "./SideBarThemeProvider.js";
-import Split from "./components/Split/Split.js";
+import { SideBarContainer } from "./SideBar.style.js";
+import { FlexSplit } from "../Layouts/FlexSplit/FlexSplit.js";
 const SideBar = Object.assign(({
   isExpanded,
   ...rest
@@ -24,7 +24,7 @@ const SideBar = Object.assign(({
     setTransitionEnd(end);
   };
   return jsxRuntimeExports.jsx(SideBarThemeProvider, {
-    children: jsxRuntimeExports.jsx(SideBarContext.Provider, {
+    children: jsxRuntimeExports.jsx(SideBarContextProvider, {
       value: {
         transitionEnd,
         handleTransitionChange,
@@ -33,6 +33,9 @@ const SideBar = Object.assign(({
       },
       children: jsxRuntimeExports.jsx(TooltipProvider, {
         children: jsxRuntimeExports.jsx(SideBarContainer, {
+          component: "nav",
+          direction: "column",
+          gap: "0",
           id: sidebarId,
           onTransitionEnd: () => handleTransitionChange(true),
           "data-state": isExpanded ? "expanded" : "collapsed",
@@ -47,7 +50,7 @@ const SideBar = Object.assign(({
   SideBarLogo,
   ItemsContainer: SideBarItemsContainer,
   ScrollContainer,
-  Split,
+  Split: FlexSplit,
   Divider,
   Item,
   Button,

package/dist/SideBar/SideBar.style.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const FlexGroup = require("../Layouts/FlexGroup/FlexGroup.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const useRootStateStyle = (getStyle) => {
@@ -18,10 +19,10 @@ const useRootStateStyle = (getStyle) => {
     }
   `;
 };
-const SideBarContainer = _styled__default.default.nav.withConfig({
+const SideBarContainer = _styled__default.default(FlexGroup.FlexGroup).withConfig({
   displayName: "SideBarstyle__SideBarContainer",
   componentId: "RedisUI__sc-suwica-0"
-})(["display:flex;position:relative;flex-direction:column;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => _styled.css`
+})(["position:relative;height:100%;transition:width 0.6s;", ""], () => useRootStateStyle((theme) => _styled.css`
         box-shadow: ${theme.shadow};
         background-color: ${theme.bgColor};
         width: ${theme.width};

package/dist/SideBar/SideBar.style.d.ts

@@ -1 +1,3 @@
-export declare const SideBarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
+import { ThemeProps } from 'styled-components/macro';
+import { Theme } from '@redislabsdev/redis-ui-styles';
+export declare const SideBarContainer: import("styled-components").StyledComponent<({ gap, direction, align, justify, wrap, ...restProps }: import("../Layouts").FlexGroupProps) => import("react/jsx-runtime").JSX.Element, any, ThemeProps<Theme>, never>;