@redis-ui/components 39.12.0 → 41.3.2

package/dist/Section/components/Header/components/Compose/Compose.style.js

@@ -1,42 +1,9 @@
-import _styled, { css } from "styled-components";
-import { Trigger } from "../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
-import { useTheme, getFocusStyleProperties } from "@redislabsdev/redis-ui-styles";
-import { CollapseIcon } from "../CollapseIndicator/CollapseIndicator.style.js";
-import { UnstyledButtonTrigger } from "../../../../../Helpers/UnstyledButtonTrigger.js";
-const SectionHeader = _styled(Trigger).withConfig({
-  displayName: "Composestyle__SectionHeader",
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const SectionHeaderCompose = _styled.div.withConfig({
+  displayName: "Composestyle__SectionHeaderCompose",
   componentId: "RedisUI__sc-kgg5ny-0"
-})(["", ";display:block;outline:unset;&[type='button']{cursor:", ";}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], UnstyledButtonTrigger, ({
-  $collapsible
-}) => $collapsible ? "pointer" : "default", ({
-  $collapsible
-}) => (
-  // cannot do it on button itself because of border-radius conflicts with bottom shadow border
-  $collapsible ? css`
-          &:focus-visible {
-            &:before {
-              content: '';
-              pointer-events: none;
-              position: absolute;
-              inset: 0;
-              border-radius: ${() => useTheme().components.section.borderRadius};
-              ${getFocusStyleProperties(`-${useTheme().core.focus.size}`)};
-            }
-          }
-        ` : void 0
-), () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, CollapseIcon);
-const SectionHeaderContent = _styled.div.withConfig({
-  displayName: "Composestyle__SectionHeaderContent",
-  componentId: "RedisUI__sc-kgg5ny-1"
 })(["min-height:", ";padding:", ";background-color:", ";display:flex;align-items:center;justify-content:space-between;"], () => useTheme().components.section.header.minHeight, () => useTheme().components.section.header.padding, () => useTheme().components.section.header.backgroundColor);
-const CollapsedInfoBar = _styled.div.withConfig({
-  displayName: "Composestyle__CollapsedInfoBar",
-  componentId: "RedisUI__sc-kgg5ny-2"
-})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", "[data-state='open'] &{display:none;}"], ({
-  $collapsible
-}) => $collapsible ? useTheme().components.section.header.collapsedInfo.collapsableBackgroundColor : useTheme().components.section.header.collapsedInfo.backgroundColor, () => useTheme().components.section.header.collapsedInfo.minHeight, () => useTheme().components.section.header.collapsedInfo.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, SectionHeader);
 export {
-  CollapsedInfoBar,
-  SectionHeader,
-  SectionHeaderContent
+  SectionHeaderCompose
 };

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

@@ -1,5 +1,2 @@
-import { ReactNode } from 'react';
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
-export interface SectionHeaderComposeProps extends ComposeElementProps<HTMLButtonElement> {
-    collapsedInfo?: ReactNode;
-}
+import { ComposeElementProps } from '../../../../../Helpers';
+export type SectionHeaderComposeProps = ComposeElementProps;

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

@@ -1,2 +1,2 @@
-import { ComposeElementProps } from '../../../../../Helpers/common.types';
+import { ComposeElementProps } from '../../../../../Helpers';
 export type SectionHeaderGroupProps = ComposeElementProps;

package/dist/Section/components/Header/components/Label/Label.cjs

@@ -1,15 +1,26 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Section_context = require("../../../../Section.context.cjs");
 const Label_style = require("./Label.style.cjs");
 const Label = ({
   label,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Label_style.LabelText, {
-  size: "S",
-  ellipsis: true,
-  tooltipOnEllipsis: true,
-  ...restProps,
-  children: label
-});
+}) => {
+  const {
+    triggerId,
+    labelId
+  } = Section_context.useSectionContext();
+  return jsxRuntime.jsxRuntimeExports.jsx(Label_style.SectionHeaderLabelText, {
+    size: "S",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps,
+    id: labelId,
+    children: triggerId ? jsxRuntime.jsxRuntimeExports.jsx(Label_style.SectionHeaderLabel, {
+      htmlFor: triggerId,
+      children: label
+    }) : label
+  });
+};
 exports.Label = Label;

package/dist/Section/components/Header/components/Label/Label.js

@@ -1,15 +1,26 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { LabelText } from "./Label.style.js";
+import { useSectionContext } from "../../../../Section.context.js";
+import { SectionHeaderLabelText, SectionHeaderLabel } from "./Label.style.js";
 const Label = ({
   label,
   ...restProps
-}) => jsxRuntimeExports.jsx(LabelText, {
-  size: "S",
-  ellipsis: true,
-  tooltipOnEllipsis: true,
-  ...restProps,
-  children: label
-});
+}) => {
+  const {
+    triggerId,
+    labelId
+  } = useSectionContext();
+  return jsxRuntimeExports.jsx(SectionHeaderLabelText, {
+    size: "S",
+    ellipsis: true,
+    tooltipOnEllipsis: true,
+    ...restProps,
+    id: labelId,
+    children: triggerId ? jsxRuntimeExports.jsx(SectionHeaderLabel, {
+      htmlFor: triggerId,
+      children: label
+    }) : label
+  });
+};
 export {
   Label
 };

package/dist/Section/components/Header/components/Label/Label.style.cjs

@@ -2,11 +2,24 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Section_context = require("../../../../Section.context.cjs");
 const Typography = require("../../../../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const LabelText = _styled__default.default(Typography.default.Heading).withConfig({
-  displayName: "Labelstyle__LabelText",
+const SectionHeaderLabelText = _styled__default.default(Typography.default.Heading).withConfig({
+  displayName: "Labelstyle__SectionHeaderLabelText",
   componentId: "RedisUI__sc-14ws5ga-0"
-})(["color:", ";"], () => redisUiStyles.useTheme().components.section.header.label.textColor);
-exports.LabelText = LabelText;
+})(["color:", ";cursor:", ";"], ({
+  color
+}) => {
+  const {
+    textColor
+  } = redisUiStyles.useTheme().components.section.header.label;
+  return color ? void 0 : textColor;
+}, () => Section_context.useSectionContext().triggerId ? "pointer" : void 0);
+const SectionHeaderLabel = _styled__default.default.label.withConfig({
+  displayName: "Labelstyle__SectionHeaderLabel",
+  componentId: "RedisUI__sc-14ws5ga-1"
+})(["all:unset;"]);
+exports.SectionHeaderLabel = SectionHeaderLabel;
+exports.SectionHeaderLabelText = SectionHeaderLabelText;

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

@@ -1 +1,2 @@
-export declare const LabelText: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SectionHeaderLabelText: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SectionHeaderLabel: import("styled-components").StyledComponent<"label", any, {}, never>;

package/dist/Section/components/Header/components/Label/Label.style.js

@@ -1,10 +1,23 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useSectionContext } from "../../../../Section.context.js";
 import Typography from "../../../../../Typography/Typography.js";
-const LabelText = _styled(Typography.Heading).withConfig({
-  displayName: "Labelstyle__LabelText",
+const SectionHeaderLabelText = _styled(Typography.Heading).withConfig({
+  displayName: "Labelstyle__SectionHeaderLabelText",
   componentId: "RedisUI__sc-14ws5ga-0"
-})(["color:", ";"], () => useTheme().components.section.header.label.textColor);
+})(["color:", ";cursor:", ";"], ({
+  color
+}) => {
+  const {
+    textColor
+  } = useTheme().components.section.header.label;
+  return color ? void 0 : textColor;
+}, () => useSectionContext().triggerId ? "pointer" : void 0);
+const SectionHeaderLabel = _styled.label.withConfig({
+  displayName: "Labelstyle__SectionHeaderLabel",
+  componentId: "RedisUI__sc-14ws5ga-1"
+})(["all:unset;"]);
 export {
-  LabelText
+  SectionHeaderLabel,
+  SectionHeaderLabelText
 };

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from 'react';
-export interface SectionHeaderLabelProps extends Omit<HTMLAttributes<HTMLHeadingElement>, 'children' | 'color'> {
+import { TypographyHeadingProps } from '../../../../../Typography';
+export interface SectionHeaderLabelProps extends Omit<TypographyHeadingProps, 'children' | 'id'> {
     label: string;
 }

package/dist/Section/components/SummaryBar/SummaryBar.cjs

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const SummaryBar_style = require("./SummaryBar.style.cjs");
+const SummaryBar = ({
+  children,
+  alwaysVisible,
+  ...restProps
+}) => children ? jsxRuntime.jsxRuntimeExports.jsx(SummaryBar_style.SummaryBar, {
+  ...restProps,
+  "$alwaysVisible": alwaysVisible,
+  children
+}) : null;
+exports.SummaryBar = SummaryBar;

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

@@ -0,0 +1,2 @@
+import { SummaryBarProps } from './SummaryBar.types';
+export declare const SummaryBar: ({ children, alwaysVisible, ...restProps }: SummaryBarProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Section/components/SummaryBar/SummaryBar.js

@@ -0,0 +1,14 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { SummaryBar as SummaryBar$1 } from "./SummaryBar.style.js";
+const SummaryBar = ({
+  children,
+  alwaysVisible,
+  ...restProps
+}) => children ? jsxRuntimeExports.jsx(SummaryBar$1, {
+  ...restProps,
+  "$alwaysVisible": alwaysVisible,
+  children
+}) : null;
+export {
+  SummaryBar
+};

package/dist/Section/components/SummaryBar/SummaryBar.style.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Section_context = require("../../Section.context.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const SummaryBar = _styled__default.default.div.withConfig({
+  displayName: "SummaryBarstyle__SummaryBar",
+  componentId: "RedisUI__sc-1ft55tj-0"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", ""], () => {
+  const theme = redisUiStyles.useTheme().components.section.header.summaryBar;
+  const {
+    collapsible
+  } = Section_context.useSectionContext();
+  return collapsible ? theme.collapsableBackgroundColor : theme.backgroundColor;
+}, () => redisUiStyles.useTheme().components.section.header.summaryBar.minHeight, () => redisUiStyles.useTheme().components.section.header.summaryBar.padding, () => redisUiStyles.useTheme().components.section.separator.width, () => redisUiStyles.useTheme().components.section.separator.color, ({
+  $alwaysVisible
+}) => Section_context.useSectionContext().open && !$alwaysVisible && _styled.css`
+      display: none;
+    `);
+exports.SummaryBar = SummaryBar;

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

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

package/dist/Section/components/SummaryBar/SummaryBar.style.js

@@ -0,0 +1,20 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useSectionContext } from "../../Section.context.js";
+const SummaryBar = _styled.div.withConfig({
+  displayName: "SummaryBarstyle__SummaryBar",
+  componentId: "RedisUI__sc-1ft55tj-0"
+})(["background-color:", ";min-height:", ";padding:", ";box-shadow:inset 0 ", " 0 0 ", ";", ""], () => {
+  const theme = useTheme().components.section.header.summaryBar;
+  const {
+    collapsible
+  } = useSectionContext();
+  return collapsible ? theme.collapsableBackgroundColor : theme.backgroundColor;
+}, () => useTheme().components.section.header.summaryBar.minHeight, () => useTheme().components.section.header.summaryBar.padding, () => useTheme().components.section.separator.width, () => useTheme().components.section.separator.color, ({
+  $alwaysVisible
+}) => useSectionContext().open && !$alwaysVisible && css`
+      display: none;
+    `);
+export {
+  SummaryBar
+};

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

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type SummaryBarProps = HTMLAttributes<HTMLElement> & {
+    alwaysVisible?: boolean;
+};

package/dist/Select/Select.cjs

@@ -57,5 +57,5 @@ const Select = Object.assign(({
   Content: Content.default,
   Option: Option.default
 });
-const Select$1 = Select;
-exports.default = Select$1;
+const SelectComponent = Select;
+exports.default = SelectComponent;

package/dist/Select/Select.d.ts

@@ -5,12 +5,12 @@ declare const Select: (<TValue extends string = string, TOption extends SelectOp
     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("../Helpers/common.types").ComposeChildrenProps) => 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("../Helpers/common.types").ComposeChildrenProps) => 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;
         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;
@@ -21,7 +21,7 @@ declare const Select: (<TValue extends string = string, TOption extends SelectOp
     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) & {
-        Compose: ({ children, placement, contentWidth, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/Compose/Compose.types").RestSelectContentComposeProps & import("../Helpers/common.types").ComposeChildrenProps) => 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;
         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>;
@@ -29,8 +29,8 @@ declare const Select: (<TValue extends string = string, TOption extends SelectOp
     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("../Helpers/common.types").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
-        Content: (props: import("../Helpers/common.types").ComposeChildrenProps & import("./components/Content/components/Option/components/Content/Content.types").RestSelectOptionContentProps) => 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;
         Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/Select/Select.js

@@ -55,7 +55,7 @@ const Select = Object.assign(({
   Content,
   Option
 });
-const Select$1 = Select;
+const SelectComponent = Select;
 export {
-  Select$1 as default
+  SelectComponent as default
 };

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

@@ -5,7 +5,7 @@ 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) & {
-    Compose: ({ children, placement, contentWidth, ...restProps }: import("./components/Compose/Compose.types").SelectContentComposeProps & RestSelectContentComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps) => 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;
     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/Option/Option.d.ts

@@ -4,8 +4,8 @@ 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("../../../../../Helpers/common.types").ComposeChildrenProps & import("react").RefAttributes<HTMLDivElement>>;
-    Content: (props: import("../../../../../Helpers/common.types").ComposeChildrenProps & import("./components/Content/Content.types").RestSelectOptionContentProps) => 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;
     Indicator: ({ children, ...restProps }: import("@radix-ui/react-select").SelectItemIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Option;

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

@@ -1,6 +1,6 @@
 /// <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("../../../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    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;

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

@@ -1,6 +1,6 @@
 import type { SelectComposeProps } from '../../Compose/Compose.types';
 import type { SelectContextType, SelectOption } from '../../../Select.types';
 export declare function useSelectContextApi<TValue extends string = string, TOption extends SelectOption<TValue> = SelectOption<TValue>>({ value, defaultValue, onChange, customCompare, options }: Pick<SelectComposeProps<TValue, TOption>, 'value' | 'defaultValue' | 'onChange' | 'customCompare' | 'options'>): {
-    currentValue: import("../../../../Helpers/common.types").NoInfer<TValue> | undefined;
+    currentValue: import("../../../..").NoInfer<TValue> | undefined;
     context: SelectContextType<TOption>;
 };

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

@@ -6,7 +6,7 @@ declare const Trigger: (<TOption extends SelectOption<string> = SelectOption<str
     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("../../../Helpers/common.types").ComposeChildrenProps) => 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;
     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;

package/dist/SideBar/SideBar.cjs

@@ -2,6 +2,7 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 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");
@@ -20,20 +21,21 @@ const SideBar = Object.assign(({
   ...rest
 }) => {
   const [transitionEnd, setTransitionEnd] = React.useState(true);
+  const sidebarId = index.useId();
   const handleTransitionChange = (end) => {
     setTransitionEnd(end);
   };
   return jsxRuntime.jsxRuntimeExports.jsx(SideBarThemeProvider.SideBarThemeProvider, {
     children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_context.SideBarContext.Provider, {
       value: {
-        ...{
-          transitionEnd,
-          handleTransitionChange,
-          isExpanded
-        }
+        transitionEnd,
+        handleTransitionChange,
+        isExpanded,
+        sidebarId
       },
       children: jsxRuntime.jsxRuntimeExports.jsx(Provider.default, {
         children: jsxRuntime.jsxRuntimeExports.jsx(SideBar_style.SideBarContainer, {
+          id: sidebarId,
           onTransitionEnd: () => handleTransitionChange(true),
           "data-state": isExpanded ? "expanded" : "collapsed",
           "data-transition": transitionEnd ? "inactive" : "active",

package/dist/SideBar/SideBar.d.ts

@@ -8,7 +8,7 @@ declare const SideBar: (({ isExpanded, ...rest }: SideBarProps) => import("react
     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("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
         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;

package/dist/SideBar/SideBar.js

@@ -1,5 +1,6 @@
 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 TooltipProvider from "../Tooltip/Provider/Provider.js";
@@ -18,20 +19,21 @@ const SideBar = Object.assign(({
   ...rest
 }) => {
   const [transitionEnd, setTransitionEnd] = useState(true);
+  const sidebarId = useId();
   const handleTransitionChange = (end) => {
     setTransitionEnd(end);
   };
   return jsxRuntimeExports.jsx(SideBarThemeProvider, {
     children: jsxRuntimeExports.jsx(SideBarContext.Provider, {
       value: {
-        ...{
-          transitionEnd,
-          handleTransitionChange,
-          isExpanded
-        }
+        transitionEnd,
+        handleTransitionChange,
+        isExpanded,
+        sidebarId
       },
       children: jsxRuntimeExports.jsx(TooltipProvider, {
         children: jsxRuntimeExports.jsx(SideBarContainer, {
+          id: sidebarId,
           onTransitionEnd: () => handleTransitionChange(true),
           "data-state": isExpanded ? "expanded" : "collapsed",
           "data-transition": transitionEnd ? "inactive" : "active",

package/dist/SideBar/SideBar.types.d.ts

@@ -10,6 +10,7 @@ export interface SideBarContextProps {
     isExpanded: boolean;
     transitionEnd: boolean;
     handleTransitionChange: (end: boolean) => void;
+    sidebarId: string;
 }
 export type SideBarTooltipProps = Omit<TooltipContentProps, 'backgroundColor' | 'children' | 'content' | 'textColor'> & {
     text?: string;

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

@@ -4,4 +4,4 @@ export declare const SideBarButton: import("styled-components").StyledComponent<
 }, any, {}, never>;
 export declare const FadeInAnimationText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const FadeInAnimationSvg: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const TooltipContent: import("styled-components").StyledComponent<(props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TooltipContent: import("styled-components").StyledComponent<(props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/SideBar/components/Footer/Footer.style.cjs

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
+const SideBar_utils = require("../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SideBarFooter = _styled__default.default.div.withConfig({
   displayName: "Footerstyle__SideBarFooter",
   componentId: "RedisUI__sc-z12bz0-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;"]);
+})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
+        color: ${theme.footer.dividerColor};
+      `));
 exports.SideBarFooter = SideBarFooter;

package/dist/SideBar/components/Footer/Footer.style.js

@@ -1,8 +1,11 @@
-import _styled from "styled-components";
+import _styled, { css } from "styled-components";
+import { useStateStyle } from "../../SideBar.utils.js";
 const SideBarFooter = _styled.div.withConfig({
   displayName: "Footerstyle__SideBarFooter",
   componentId: "RedisUI__sc-z12bz0-0"
-})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;"]);
+})(["position:relative;display:flex;flex-direction:column;justify-content:flex-end;", ""], () => useStateStyle((theme) => css`
+        color: ${theme.footer.dividerColor};
+      `));
 export {
   SideBarFooter
 };

package/dist/SideBar/components/Footer/components/Text/Text.style.d.ts

@@ -1 +1 @@
-export declare const SmallFooterText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const SmallFooterText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/SideBar/components/Footer/components/Text/Text.types.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-export interface TextProps extends Omit<BodyProps, 'children'> {
+import { TypographyBodyProps } from '../../../../../Typography';
+export interface TextProps extends Omit<TypographyBodyProps, 'children'> {
     children: React.ReactNode;
 }