@redis-ui/components 41.3.7 → 41.11.0

package/dist/MidBar/MidBar.js

@@ -0,0 +1,30 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import Tabs from "../Tabs/Tabs.js";
+import MidBarHeader from "./components/Header/Header.js";
+const MidBar = Object.assign(({
+  tabs,
+  startGroup,
+  middleGroup,
+  endGroup,
+  ...composeProps
+}) => {
+  return jsxRuntimeExports.jsxs(MidBar.Compose, {
+    ...composeProps,
+    children: [jsxRuntimeExports.jsx(MidBar.Header, {
+      tabs,
+      startGroup,
+      middleGroup,
+      endGroup
+    }), !(tabs == null ? void 0 : tabs.length) ? null : jsxRuntimeExports.jsx(MidBar.ContentPane, {
+      tabs
+    })]
+  });
+}, {
+  Compose: Tabs.Compose,
+  ContentPane: Tabs.ContentPane,
+  Header: MidBarHeader
+});
+const MidBar$1 = MidBar;
+export {
+  MidBar$1 as default
+};

package/dist/MidBar/MidBar.types.d.ts

@@ -0,0 +1,6 @@
+import type { TabsComposeProps } from '../Tabs/components/Compose/Compose.types';
+import type { MidBarHeaderProps } from './components/Header/Header.types';
+import type { TabInfo } from '../Tabs/Tabs.types';
+export interface MidBarProps<TValue extends string = string, TTab extends TabInfo<TValue> = TabInfo<TValue>> extends TabsComposeProps<TValue>, Omit<MidBarHeaderProps<TValue>, 'tabs' | 'defaultValue' | 'onChange'> {
+    tabs?: TTab[];
+}

package/dist/MidBar/components/Header/Header.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Tabs = require("../../../Tabs/Tabs.cjs");
+const Group = require("./components/Group/Group.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const MidBarHeader = Object.assign(({
+  tabs,
+  startGroup,
+  middleGroup,
+  endGroup,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsxs(MidBarHeader.Compose, {
+  ...restProps,
+  children: [startGroup && jsxRuntime.jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "start",
+    children: startGroup
+  }), !(tabs == null ? void 0 : tabs.length) ? middleGroup && jsxRuntime.jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "middle",
+    children: middleGroup
+  }) : jsxRuntime.jsxRuntimeExports.jsx(MidBarHeader.TabBar, {
+    tabs
+  }), endGroup && jsxRuntime.jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "end",
+    children: endGroup
+  })]
+}), {
+  Group: Group.default,
+  Compose: Compose.default,
+  TabBar: Tabs.default.TabBar
+});
+exports.default = MidBarHeader;

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { MidBarHeaderProps } from './Header.types';
+declare const MidBarHeader: (({ tabs, startGroup, middleGroup, endGroup, ...restProps }: MidBarHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
+    Group: ({ position, ...restProps }: import("./components/Group/Group.types").MidBarHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("./components/Compose/Compose.types").MidBarHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+    TabBar: (({ tabs, ...restProps }: import("../../..").TabsBarProps & import("../../..").RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: ({ children, variant, ...restProps }: import("../../../Tabs/components/TabBar/components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+        Trigger: (({ value, children, ...restProps }: import("../../../Tabs/components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
+            Compose: ({ children, ...restProps }: import("../../../Tabs/components/TabBar/components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+            Tab: ({ children, ...restProps }: import("../../..").ComposeElementProps<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
+            Marker: (props: import("../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+        };
+    };
+};
+export default MidBarHeader;

package/dist/MidBar/components/Header/Header.js

@@ -0,0 +1,32 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import Tabs from "../../../Tabs/Tabs.js";
+import MidBarHeaderGroup from "./components/Group/Group.js";
+import Compose from "./components/Compose/Compose.js";
+const MidBarHeader = Object.assign(({
+  tabs,
+  startGroup,
+  middleGroup,
+  endGroup,
+  ...restProps
+}) => jsxRuntimeExports.jsxs(MidBarHeader.Compose, {
+  ...restProps,
+  children: [startGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "start",
+    children: startGroup
+  }), !(tabs == null ? void 0 : tabs.length) ? middleGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "middle",
+    children: middleGroup
+  }) : jsxRuntimeExports.jsx(MidBarHeader.TabBar, {
+    tabs
+  }), endGroup && jsxRuntimeExports.jsx(MidBarHeader.Group, {
+    position: "end",
+    children: endGroup
+  })]
+}), {
+  Group: MidBarHeaderGroup,
+  Compose,
+  TabBar: Tabs.TabBar
+});
+export {
+  MidBarHeader as default
+};

package/dist/MidBar/components/Header/Header.types.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { TabTriggerInfo } from '../../../Tabs/components/TabBar/TabBar.types';
+import { ChildFree } from '../../../Helpers';
+import { MidBarHeaderComposeProps } from './components/Compose/Compose.types';
+export interface OwnMidBarHeaderProps<TValue extends string = string> {
+    tabs?: TabTriggerInfo<TValue>[];
+    startGroup?: React.ReactNode;
+    middleGroup?: React.ReactNode;
+    endGroup?: React.ReactNode;
+}
+export type RestMidBarHeaderProps = ChildFree<MidBarHeaderComposeProps>;
+export interface MidBarHeaderProps<T extends string = string> extends OwnMidBarHeaderProps<T>, RestMidBarHeaderProps {
+}

package/dist/MidBar/components/Header/components/Compose/Compose.cjs

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

package/dist/MidBar/components/Header/components/Compose/Compose.d.ts

@@ -0,0 +1,3 @@
+import { MidBarHeaderComposeProps } from './Compose.types';
+declare const Compose: (props: MidBarHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
+export default Compose;

package/dist/MidBar/components/Header/components/Compose/Compose.js

@@ -0,0 +1,8 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { MidBarHeaderCompose } from "./Compose.style.js";
+const Compose = (props) => jsxRuntimeExports.jsx(MidBarHeaderCompose, {
+  ...props
+});
+export {
+  Compose as default
+};

package/dist/MidBar/components/Header/components/Compose/Compose.style.cjs

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Compose_style = require("../../../../../Tabs/components/TabBar/components/Compose/Compose.style.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const MidBarHeaderCompose = _styled__default.default.div.withConfig({
+  displayName: "Composestyle__MidBarHeaderCompose",
+  componentId: "RedisUI__sc-un4fa3-0"
+})(["display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:'start middle end';align-items:center;", ""], () => {
+  const tabsTheme = redisUiStyles.useTheme().components.tabs;
+  const midBarTheme = redisUiStyles.useTheme().components.midBar;
+  return _styled.css`
+      min-height: ${midBarTheme.header.height};
+      padding-inline: ${midBarTheme.header.paddingInline};
+      gap: ${midBarTheme.header.gap};
+      border-top: ${tabsTheme.variants.default.tabsLine.size} solid transparent;
+      border-bottom: ${tabsTheme.variants.default.tabsLine.size} solid
+        ${tabsTheme.variants.default.tabsLine.color};
+
+      & ${Compose_style.TabsBarCompose} {
+        width: auto;
+        border-bottom: none;
+        align-self: stretch;
+        grid-area: middle;
+        gap: ${midBarTheme.header.tabBar.gap};
+      }
+    `;
+});
+exports.MidBarHeaderCompose = MidBarHeaderCompose;

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

@@ -0,0 +1 @@
+export declare const MidBarHeaderCompose: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,29 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { TabsBarCompose } from "../../../../../Tabs/components/TabBar/components/Compose/Compose.style.js";
+const MidBarHeaderCompose = _styled.div.withConfig({
+  displayName: "Composestyle__MidBarHeaderCompose",
+  componentId: "RedisUI__sc-un4fa3-0"
+})(["display:grid;grid-template-columns:1fr auto 1fr;grid-template-areas:'start middle end';align-items:center;", ""], () => {
+  const tabsTheme = useTheme().components.tabs;
+  const midBarTheme = useTheme().components.midBar;
+  return css`
+      min-height: ${midBarTheme.header.height};
+      padding-inline: ${midBarTheme.header.paddingInline};
+      gap: ${midBarTheme.header.gap};
+      border-top: ${tabsTheme.variants.default.tabsLine.size} solid transparent;
+      border-bottom: ${tabsTheme.variants.default.tabsLine.size} solid
+        ${tabsTheme.variants.default.tabsLine.color};
+
+      & ${TabsBarCompose} {
+        width: auto;
+        border-bottom: none;
+        align-self: stretch;
+        grid-area: middle;
+        gap: ${midBarTheme.header.tabBar.gap};
+      }
+    `;
+});
+export {
+  MidBarHeaderCompose
+};

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

@@ -0,0 +1,2 @@
+import { ComposeElementProps } from '../../../../../Helpers';
+export type MidBarHeaderComposeProps = ComposeElementProps;

package/dist/MidBar/components/Header/components/Group/Group.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
+const Group_style = require("./Group.style.cjs");
+const MidBarHeaderGroup = ({
+  position,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(Group_style.MidBarHeaderGroup, {
+  "$position": position,
+  ...restProps
+});
+exports.default = MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.d.ts

@@ -0,0 +1,3 @@
+import type { MidBarHeaderGroupProps } from './Group.types';
+declare const MidBarHeaderGroup: ({ position, ...restProps }: MidBarHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { MidBarHeaderGroup as MidBarHeaderGroup$1 } from "./Group.style.js";
+const MidBarHeaderGroup = ({
+  position,
+  ...restProps
+}) => jsxRuntimeExports.jsx(MidBarHeaderGroup$1, {
+  "$position": position,
+  ...restProps
+});
+export {
+  MidBarHeaderGroup as default
+};

package/dist/MidBar/components/Header/components/Group/Group.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 _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const MidBarHeaderGroup = _styled__default.default.div.withConfig({
+  displayName: "Groupstyle__MidBarHeaderGroup",
+  componentId: "RedisUI__sc-ennaru-0"
+})(["display:flex;align-items:center;grid-area:", ";", " ", ""], ({
+  $position
+}) => $position, ({
+  $position
+}) => $position === "end" && _styled.css`
+      justify-content: flex-end;
+    `, () => {
+  const theme = redisUiStyles.useTheme().components.midBar;
+  return _styled.css`
+      gap: ${theme.header.group.gap};
+    `;
+});
+exports.MidBarHeaderGroup = MidBarHeaderGroup;

package/dist/MidBar/components/Header/components/Group/Group.style.d.ts

@@ -0,0 +1,4 @@
+import { MidBarHeaderGroupPosition } from './Group.types';
+export declare const MidBarHeaderGroup: import("styled-components").StyledComponent<"div", any, {
+    $position: MidBarHeaderGroupPosition;
+}, never>;

package/dist/MidBar/components/Header/components/Group/Group.style.js

@@ -0,0 +1,20 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const MidBarHeaderGroup = _styled.div.withConfig({
+  displayName: "Groupstyle__MidBarHeaderGroup",
+  componentId: "RedisUI__sc-ennaru-0"
+})(["display:flex;align-items:center;grid-area:", ";", " ", ""], ({
+  $position
+}) => $position, ({
+  $position
+}) => $position === "end" && css`
+      justify-content: flex-end;
+    `, () => {
+  const theme = useTheme().components.midBar;
+  return css`
+      gap: ${theme.header.group.gap};
+    `;
+});
+export {
+  MidBarHeaderGroup
+};

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

@@ -0,0 +1,5 @@
+import { ComposeElementProps } from '../../../../../Helpers';
+export type MidBarHeaderGroupPosition = 'start' | 'middle' | 'end';
+export interface MidBarHeaderGroupProps extends ComposeElementProps {
+    position: MidBarHeaderGroupPosition;
+}

package/dist/MidBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MidBar } from './MidBar';
+export * from './MidBar.types';

package/dist/Modal/components/Content/components/Body/components/Text/Text.style.d.ts

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

package/dist/Modal/components/Content/components/Description/components/Text/Text.style.d.ts

@@ -1 +1,2 @@
-export declare const Text: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Text: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Modal/components/Content/components/Header/components/Title/Title.style.d.ts

@@ -1 +1,2 @@
-export declare const Title: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Title: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/MoreInfoIcon/MoreInfoIcon.style.cjs

@@ -7,5 +7,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const TooltipTrigger = _styled__default.default.span.withConfig({
   displayName: "MoreInfoIconstyle__TooltipTrigger",
   componentId: "RedisUI__sc-1wx6c2q-0"
-})(["display:inline-flex;color:", ";"], () => redisUiStyles.useTheme().components.moreInfoIcon.iconColor);
+})(["display:inline-flex;color:", ";width:fit-content;"], () => redisUiStyles.useTheme().components.moreInfoIcon.iconColor);
 exports.TooltipTrigger = TooltipTrigger;

package/dist/MoreInfoIcon/MoreInfoIcon.style.js

@@ -3,7 +3,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const TooltipTrigger = _styled.span.withConfig({
   displayName: "MoreInfoIconstyle__TooltipTrigger",
   componentId: "RedisUI__sc-1wx6c2q-0"
-})(["display:inline-flex;color:", ";"], () => useTheme().components.moreInfoIcon.iconColor);
+})(["display:inline-flex;color:", ";width:fit-content;"], () => useTheme().components.moreInfoIcon.iconColor);
 export {
   TooltipTrigger
 };

package/dist/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Pagination: {
     Compose: ({ children, pageIndex, pageSize, pageCount, totalItemCount, visibleItemCount, getCanGoNextPage, getCanGoPrevPage, getCanSelectPage, getCanSelectPageSize, onPageSizeChange, onPageChange, onNextPage, onFirstPage, onPrevPage, onLastPage }: import("./components/Compose").PaginationComposeProps) => import("react/jsx-runtime").JSX.Element;
     NavigationButton: ({ navType, ...restProps }: import("./components/NavigationButton").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,10 +10,10 @@ export declare const Pagination: {
     InfoLabel: ({ renderer, ...restProps }: import("./components/InfoLabel").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element;
     PageSizeSelect: {
         ({ pageSizes, ...restProps }: import("./components/PageSizeSelect").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
-        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
     };
     PageSelect: {
         ({ ...restProps }: import("./components/PageSelect").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/Popover/Popover.d.ts

@@ -22,7 +22,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
     };
@@ -43,7 +43,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
         Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,7 +23,7 @@ declare const Content: (({ title, text, actionButtonText, actionButtonHandler, l
         Compose: (props: import("./components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("./components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
         Header: import("react").FC<import("./components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
 };

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.styles.d.ts

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

package/dist/Popover/components/Content/components/Header/components/HeaderTitle/HeaderTitle.styles.d.ts

@@ -1 +1,2 @@
-export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const HeaderTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Popover/components/Content/components/Text/Text.styles.d.ts

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

package/dist/Popover/components/Content/components/WindowBar/WindowBar.d.ts

@@ -4,7 +4,7 @@ declare const WindowBar: (({ title, variant, hideCloseButton, withIcon, icon, ..
     Compose: (props: import("./components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ children, icon, ...buttonProps }: import("../Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, variant, ...props }: import("../../../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-    Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
     Header: import("react").FC<import("./components/Header/Header.types").WindowBarHeaderProps>;
 };
 export default WindowBar;

package/dist/Popover/components/Content/components/WindowBar/WindowBar.style.d.ts

@@ -1 +1,2 @@
-export declare const WindowBarHeading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../../Typography").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const WindowBarHeading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Popover/components/PopoverCard/PopoverCard.d.ts

@@ -17,7 +17,7 @@ declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandle
         Compose: (props: import("../Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
         Header: import("react").FC<import("../Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
     Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBar/ProgressBar.styles.d.ts

@@ -12,4 +12,4 @@ export declare const Indicator: import("styled-components").StyledComponent<impo
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
     textPosition?: ProgressBarTextPosition | undefined;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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

@@ -24,13 +24,11 @@ const ColumnSelector = ({
       onChange,
       children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Trigger.Compose, {
         customContainer: true,
-        children: jsxRuntime.jsxRuntimeExports.jsx("span", {
-          children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
-            pressed: isOpen,
-            children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
-              icon: redisUiIcons.ColumnsIcon
-            }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
-          })
+        children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
+          pressed: isOpen,
+          children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+            icon: redisUiIcons.ColumnsIcon
+          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
         })
       }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Content, {})]
     })

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

@@ -22,13 +22,11 @@ const ColumnSelector = ({
       onChange,
       children: [jsxRuntimeExports.jsx(MultiSelect.Trigger.Compose, {
         customContainer: true,
-        children: jsxRuntimeExports.jsx("span", {
-          children: jsxRuntimeExports.jsxs(ToggleButton, {
-            pressed: isOpen,
-            children: [jsxRuntimeExports.jsx(Button.Icon, {
-              icon: ColumnsIcon
-            }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
-          })
+        children: jsxRuntimeExports.jsxs(ToggleButton, {
+          pressed: isOpen,
+          children: [jsxRuntimeExports.jsx(Button.Icon, {
+            icon: ColumnsIcon
+          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
         })
       }), jsxRuntimeExports.jsx(MultiSelect.Content, {})]
     })

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

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
+const index = require("../../../../../../../node_modules/@radix-ui/react-collapsible/dist/index.cjs");
 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 FilterToggle = () => {
   const {
-    setFiltersOpen,
     filtersOpen,
     activeFilters
   } = SearchBar_context.useSearchBarContext();
@@ -15,14 +15,16 @@ const FilterToggle = () => {
     var _a;
     return acc + (((_a = filter.selectedOptions) == null ? void 0 : _a.length) || 0);
   }, 0), [activeFilters]);
-  return jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
-    pressed: filtersOpen,
-    onClick: () => setFiltersOpen(!filtersOpen),
-    children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
-      customColor: "currentColor"
-    }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
-      count: activeFiltersValueCount
-    })]
+  return jsxRuntime.jsxRuntimeExports.jsx(index.Trigger, {
+    asChild: true,
+    children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
+      pressed: filtersOpen,
+      children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
+        customColor: "currentColor"
+      }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
+        count: activeFiltersValueCount
+      })]
+    })
   });
 };
 exports.default = FilterToggle;

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

@@ -1,11 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Trigger } from "../../../../../../../node_modules/@radix-ui/react-collapsible/dist/index.js";
 import { FilterIcon } from "@redislabsdev/redis-ui-icons";
 import { useMemo } from "react";
 import { useSearchBarContext } from "../../../../../../SearchBar.context.js";
 import ToggleButton from "../../../../../../../Button/ToggleButton/ToggleButton.js";
 const FilterToggle = () => {
   const {
-    setFiltersOpen,
     filtersOpen,
     activeFilters
   } = useSearchBarContext();
@@ -13,14 +13,16 @@ const FilterToggle = () => {
     var _a;
     return acc + (((_a = filter.selectedOptions) == null ? void 0 : _a.length) || 0);
   }, 0), [activeFilters]);
-  return jsxRuntimeExports.jsxs(ToggleButton, {
-    pressed: filtersOpen,
-    onClick: () => setFiltersOpen(!filtersOpen),
-    children: [jsxRuntimeExports.jsx(FilterIcon, {
-      customColor: "currentColor"
-    }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
-      count: activeFiltersValueCount
-    })]
+  return jsxRuntimeExports.jsx(Trigger, {
+    asChild: true,
+    children: jsxRuntimeExports.jsxs(ToggleButton, {
+      pressed: filtersOpen,
+      children: [jsxRuntimeExports.jsx(FilterIcon, {
+        customColor: "currentColor"
+      }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
+        count: activeFiltersValueCount
+      })]
+    })
   });
 };
 export {

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

@@ -1,4 +1,5 @@
+/// <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>;
-export declare const TextWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TextWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;