@redis-ui/components 41.4.1 → 41.11.0

package/dist/Layouts/FlexSplit/FlexSplit.js

@@ -0,0 +1,10 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexSplit as FlexSplit$1 } from "./FlexSplit.style.js";
+const FlexSplit = ({
+  extraMinSpace
+}) => jsxRuntimeExports.jsx(FlexSplit$1, {
+  "$extraMinSpace": extraMinSpace
+});
+export {
+  FlexSplit
+};

package/dist/Layouts/FlexSplit/FlexSplit.style.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexSplit = _styled__default.default.div.withConfig({
+  displayName: "FlexSplitstyle__FlexSplit",
+  componentId: "RedisUI__sc-d6upci-0"
+})(["display:contents;&& + *{[data-flex-direction='row'] > &{margin-inline-start:auto;}[data-flex-direction='column'] > &{margin-block-start:auto;}[data-flex-direction='row-reverse'] > &{margin-inline-end:auto;}[data-flex-direction='column-reverse'] > &{margin-block-end:auto;}}", ""], ({
+  $extraMinSpace
+}) => $extraMinSpace && _styled.css`
+      *:has(+ :where(&&):not(:last-child)) {
+        [data-flex-direction='row'] > & {
+          margin-inline-end: ${$extraMinSpace};
+        }
+        [data-flex-direction='column'] > & {
+          margin-block-end: ${$extraMinSpace};
+        }
+        [data-flex-direction='row-reverse'] > & {
+          margin-inline-start: ${$extraMinSpace};
+        }
+        [data-flex-direction='column-reverse'] > & {
+          margin-block-start: ${$extraMinSpace};
+        }
+      }
+    `);
+exports.FlexSplit = FlexSplit;

package/dist/Layouts/FlexSplit/FlexSplit.style.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sets itself hidden (prevents double gap around)
+ * Sets left margin of next element to auto.
+ * If $extraMinSpace specified, sets right margin of prev component to $extraMinSpace
+ */
+export declare const FlexSplit: import("styled-components").StyledComponent<"div", any, {
+    $extraMinSpace?: string | undefined;
+}, never>;

package/dist/Layouts/FlexSplit/FlexSplit.style.js

@@ -0,0 +1,25 @@
+import _styled, { css } from "styled-components";
+const FlexSplit = _styled.div.withConfig({
+  displayName: "FlexSplitstyle__FlexSplit",
+  componentId: "RedisUI__sc-d6upci-0"
+})(["display:contents;&& + *{[data-flex-direction='row'] > &{margin-inline-start:auto;}[data-flex-direction='column'] > &{margin-block-start:auto;}[data-flex-direction='row-reverse'] > &{margin-inline-end:auto;}[data-flex-direction='column-reverse'] > &{margin-block-end:auto;}}", ""], ({
+  $extraMinSpace
+}) => $extraMinSpace && css`
+      *:has(+ :where(&&):not(:last-child)) {
+        [data-flex-direction='row'] > & {
+          margin-inline-end: ${$extraMinSpace};
+        }
+        [data-flex-direction='column'] > & {
+          margin-block-end: ${$extraMinSpace};
+        }
+        [data-flex-direction='row-reverse'] > & {
+          margin-inline-start: ${$extraMinSpace};
+        }
+        [data-flex-direction='column-reverse'] > & {
+          margin-block-start: ${$extraMinSpace};
+        }
+      }
+    `);
+export {
+  FlexSplit
+};

package/dist/Layouts/FlexSplit/FlexSplit.types.d.ts

@@ -0,0 +1,8 @@
+export type FlexSplitProps = {
+    /**
+     * Space adding to existing gap for current Split place.
+     * If no component before Split, or Split is last element - not applied.
+     * If a component before the Split has margin adjacent to the Split, that margin will be overridden.
+     */
+    extraMinSpace?: string;
+};

package/dist/Layouts/index.d.ts

@@ -0,0 +1,8 @@
+export * from './FlexItem/FlexItem';
+export * from './FlexItem/FlexItem.types';
+export * from './FlexGroup/FlexGroup';
+export * from './FlexGroup/FlexGroup.types';
+export * from './FlexSplit/FlexSplit';
+export * from './FlexSplit/FlexSplit.types';
+export * from './FlexDivider/FlexDivider';
+export * from './FlexDivider/FlexDivider.types';

package/dist/MidBar/MidBar.cjs

@@ -0,0 +1,30 @@
+"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 Header = require("./components/Header/Header.cjs");
+const MidBar = Object.assign(({
+  tabs,
+  startGroup,
+  middleGroup,
+  endGroup,
+  ...composeProps
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsxs(MidBar.Compose, {
+    ...composeProps,
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MidBar.Header, {
+      tabs,
+      startGroup,
+      middleGroup,
+      endGroup
+    }), !(tabs == null ? void 0 : tabs.length) ? null : jsxRuntime.jsxRuntimeExports.jsx(MidBar.ContentPane, {
+      tabs
+    })]
+  });
+}, {
+  Compose: Tabs.default.Compose,
+  ContentPane: Tabs.default.ContentPane,
+  Header: Header.default
+});
+const MidBar$1 = MidBar;
+exports.default = MidBar$1;

package/dist/MidBar/MidBar.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { MidBarProps } from './MidBar.types';
+declare const MidBar: (({ tabs, startGroup, middleGroup, endGroup, ...composeProps }: MidBarProps) => import("react/jsx-runtime").JSX.Element) & {
+    Compose: <TValue extends string = string>({ onChange, activateOnFocus, ...restProps }: import("../Tabs/components/Compose/Compose.types").TabsComposeProps<TValue> & import("../Tabs/components/Compose/Compose.types").RestTabsComposeProps) => import("react/jsx-runtime").JSX.Element;
+    ContentPane: (({ tabs, ...restProps }: import("..").TabsContentPaneProps & import("..").RestTabsContentPaneProps) => import("react/jsx-runtime").JSX.Element) & {
+        Compose: (props: import("../Tabs/components/ContentPane/components/Compose/Compose.types").RestTabsContentPaneComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Content: (props: import("../Tabs/components/ContentPane/components/Content/Content.types").TabsContentProps & import("..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    };
+    Header: (({ tabs, startGroup, middleGroup, endGroup, ...restProps }: import("./components/Header/Header.types").MidBarHeaderProps<string>) => import("react/jsx-runtime").JSX.Element) & {
+        Group: ({ position, ...restProps }: import("./components/Header/components/Group/Group.types").MidBarHeaderGroupProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("./components/Header/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 MidBar;

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/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/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 {