@redis-ui/components 41.3.7 → 41.11.0

package/dist/Label/components/Required/Required.js

@@ -1,18 +1,18 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
 import { Required as Required$1 } from "./Required.style.js";
+import { useFieldRequired } from "../../../FormField/FormField.context.js";
 const Required = ({
   children = "*",
   show = true,
   size,
   ...restProps
-}) => {
-  return show ? jsxRuntimeExports.jsx(Required$1, {
-    component: "span",
-    size: size ?? "S",
-    ...restProps,
-    children
-  }) : null;
-};
+}) => useFieldRequired(show) ? jsxRuntimeExports.jsx(Required$1, {
+  component: "span",
+  size: size ?? "S",
+  "aria-hidden": true,
+  ...restProps,
+  children
+}) : null;
 export {
   Required as default
 };

package/dist/Label/components/Required/Required.style.d.ts

@@ -1 +1,2 @@
-export declare const Required: 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 Required: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Label/components/Text/Text.style.d.ts

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

package/dist/Layouts/FlexDivider/FlexDivider.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexDivider_style = require("./FlexDivider.style.cjs");
+const FlexDivider = ({
+  padding = "none",
+  spacing = "none",
+  orientation,
+  autoHide = true,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexDivider_style.FlexDivider, {
+  role: "separator",
+  ...restProps,
+  "$padding": padding,
+  "$spacing": spacing,
+  "$autoHide": autoHide,
+  ...orientation && {
+    "data-orientation": orientation,
+    "aria-orientation": orientation
+  }
+});
+exports.FlexDivider = FlexDivider;

package/dist/Layouts/FlexDivider/FlexDivider.d.ts

@@ -0,0 +1,2 @@
+import { FlexDividerProps } from './FlexDivider.types';
+export declare const FlexDivider: ({ padding, spacing, orientation, autoHide, ...restProps }: FlexDividerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexDivider/FlexDivider.js

@@ -0,0 +1,22 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexDivider as FlexDivider$1 } from "./FlexDivider.style.js";
+const FlexDivider = ({
+  padding = "none",
+  spacing = "none",
+  orientation,
+  autoHide = true,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexDivider$1, {
+  role: "separator",
+  ...restProps,
+  "$padding": padding,
+  "$spacing": spacing,
+  "$autoHide": autoHide,
+  ...orientation && {
+    "data-orientation": orientation,
+    "aria-orientation": orientation
+  }
+});
+export {
+  FlexDivider
+};

package/dist/Layouts/FlexDivider/FlexDivider.style.cjs

@@ -0,0 +1,46 @@
+"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 FlexDivider = _styled__default.default.div.withConfig({
+  displayName: "FlexDividerstyle__FlexDivider",
+  componentId: "RedisUI__sc-i92bia-0"
+})(["flex:none;align-self:stretch;", " ", ""], ({
+  $padding,
+  $spacing
+}) => {
+  const styles = redisUiStyles.useTheme().components.layouts.flexDivider;
+  const padding = styles.padding[$padding] ?? $padding;
+  const spacing = styles.spacing[$spacing] ?? $spacing;
+  return _styled.css`
+      background-color: ${styles.color};
+      [data-flex-direction='row'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='row-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='vertical'] {
+        width: ${styles.size};
+        margin-block: ${padding};
+        margin-inline: ${spacing};
+        display: inline-block;
+      }
+
+      [data-flex-direction='column'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='column-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='horizontal'] {
+        height: ${styles.size};
+        margin-inline: ${padding};
+        margin-block: ${spacing};
+        display: block;
+      }
+    `;
+}, ({
+  $autoHide
+}) => $autoHide && _styled.css`
+      &:first-child,
+      &:last-child,
+      & + & {
+        display: none;
+      }
+    `);
+exports.FlexDivider = FlexDivider;

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

@@ -0,0 +1,6 @@
+import { FlexDividerPaddingSize } from './FlexDivider.types';
+export declare const FlexDivider: import("styled-components").StyledComponent<"div", any, {
+    $padding: FlexDividerPaddingSize;
+    $spacing: FlexDividerPaddingSize;
+    $autoHide: boolean;
+}, never>;

package/dist/Layouts/FlexDivider/FlexDivider.style.js

@@ -0,0 +1,44 @@
+import _styled, { css } from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const FlexDivider = _styled.div.withConfig({
+  displayName: "FlexDividerstyle__FlexDivider",
+  componentId: "RedisUI__sc-i92bia-0"
+})(["flex:none;align-self:stretch;", " ", ""], ({
+  $padding,
+  $spacing
+}) => {
+  const styles = useTheme().components.layouts.flexDivider;
+  const padding = styles.padding[$padding] ?? $padding;
+  const spacing = styles.spacing[$spacing] ?? $spacing;
+  return css`
+      background-color: ${styles.color};
+      [data-flex-direction='row'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='row-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='vertical'] {
+        width: ${styles.size};
+        margin-block: ${padding};
+        margin-inline: ${spacing};
+        display: inline-block;
+      }
+
+      [data-flex-direction='column'] > :where(&&:not([data-orientation])),
+      [data-flex-direction='column-reverse'] > :where(&&:not([data-orientation])),
+      &[data-orientation='horizontal'] {
+        height: ${styles.size};
+        margin-inline: ${padding};
+        margin-block: ${spacing};
+        display: block;
+      }
+    `;
+}, ({
+  $autoHide
+}) => $autoHide && css`
+      &:first-child,
+      &:last-child,
+      & + & {
+        display: none;
+      }
+    `);
+export {
+  FlexDivider
+};

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

@@ -0,0 +1,15 @@
+import { AnyOtherString, ChildFree, ComposeElementProps } from '../../Helpers';
+type FlexDividerOrientation = 'horizontal' | 'vertical';
+export type FlexDividerPaddingSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | 'none' | AnyOtherString;
+export type OwnFlexDividerProps = {
+    /** Paddings from the edges of the container */
+    padding?: FlexDividerPaddingSize;
+    /** Additional margins between divider line and dividing elements. Gap of flex container is preferred. Default - none */
+    spacing?: FlexDividerPaddingSize;
+    /** The orientation of the divider line when used in a custom container. FlexGroup automatically defines its orientation. */
+    orientation?: FlexDividerOrientation;
+    /** Hide extra Dividers if there are multiple ones next to each other or if one is displayed as the first/last element. Defaults to true. */
+    autoHide?: boolean;
+};
+export type FlexDividerProps = OwnFlexDividerProps & ChildFree<ComposeElementProps>;
+export {};

package/dist/Layouts/FlexGroup/FlexGroup.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexGroup_style = require("./FlexGroup.style.cjs");
+const FlexGroup = ({
+  gap = "S",
+  direction = "row",
+  align = direction.includes("column") ? "stretch" : "center",
+  justify,
+  wrap,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexGroup_style.FlexGroup, {
+  ...restProps,
+  "$gap": gap,
+  "$align": align,
+  "$justify": justify,
+  "$wrap": wrap,
+  "data-flex-direction": direction
+});
+exports.FlexGroup = FlexGroup;

package/dist/Layouts/FlexGroup/FlexGroup.d.ts

@@ -0,0 +1,2 @@
+import { FlexGroupProps } from './FlexGroup.types';
+export declare const FlexGroup: ({ gap, direction, align, justify, wrap, ...restProps }: FlexGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexGroup/FlexGroup.js

@@ -0,0 +1,20 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexGroup as FlexGroup$1 } from "./FlexGroup.style.js";
+const FlexGroup = ({
+  gap = "S",
+  direction = "row",
+  align = direction.includes("column") ? "stretch" : "center",
+  justify,
+  wrap,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexGroup$1, {
+  ...restProps,
+  "$gap": gap,
+  "$align": align,
+  "$justify": justify,
+  "$wrap": wrap,
+  "data-flex-direction": direction
+});
+export {
+  FlexGroup
+};

package/dist/Layouts/FlexGroup/FlexGroup.style.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const FlexItem = require("../FlexItem/FlexItem.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const FlexGroup = _styled__default.default(FlexItem.FlexItem).withConfig({
+  displayName: "FlexGroupstyle__FlexGroup",
+  componentId: "RedisUI__sc-1t0rzwk-0"
+})(["display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";flex-direction:", ";gap:", ";"], ({
+  $wrap
+}) => $wrap ? "wrap" : "nowrap", ({
+  $align
+}) => $align, ({
+  $justify
+}) => $justify, (props) => props["data-flex-direction"], ({
+  $gap
+}) => redisUiStyles.useTheme().components.layouts.flexGroup.gap[$gap] ?? $gap);
+exports.FlexGroup = FlexGroup;

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

@@ -0,0 +1,9 @@
+import { FlexAlign } from '../FlexItem/FlexItem.types';
+import { FlexDirection, FlexGroupGapSize, FlexJustify } from './FlexGroup.types';
+export declare const FlexGroup: import("styled-components").StyledComponent<({ flex, selfAlign, component, ...restProps }: import("../FlexItem/FlexItem.types").FlexItemProps) => import("react/jsx-runtime").JSX.Element, any, {
+    $gap: FlexGroupGapSize;
+    $align: FlexAlign;
+    $justify?: FlexJustify | undefined;
+    $wrap?: boolean | undefined;
+    'data-flex-direction': FlexDirection;
+}, never>;

package/dist/Layouts/FlexGroup/FlexGroup.style.js

@@ -0,0 +1,18 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { FlexItem } from "../FlexItem/FlexItem.js";
+const FlexGroup = _styled(FlexItem).withConfig({
+  displayName: "FlexGroupstyle__FlexGroup",
+  componentId: "RedisUI__sc-1t0rzwk-0"
+})(["display:flex;flex-wrap:", ";align-items:", ";justify-content:", ";flex-direction:", ";gap:", ";"], ({
+  $wrap
+}) => $wrap ? "wrap" : "nowrap", ({
+  $align
+}) => $align, ({
+  $justify
+}) => $justify, (props) => props["data-flex-direction"], ({
+  $gap
+}) => useTheme().components.layouts.flexGroup.gap[$gap] ?? $gap);
+export {
+  FlexGroup
+};

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

@@ -0,0 +1,19 @@
+import { AnyOtherString } from '../../Helpers';
+import { FlexAlign, OwnFlexItemProps, RestFlexItemProps } from '../FlexItem/FlexItem.types';
+export type FlexGroupGapSize = 'XXS' | 'XS' | 'S' | 'M' | 'L' | 'XL' | 'XXL' | AnyOtherString;
+export type FlexDirection = 'column' | 'row' | 'column-reverse' | 'row-reverse';
+export type FlexJustify = 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+export type OwnFlexGroupProps = OwnFlexItemProps & {
+    /** Gap size between items. Supports predefined T-Shirt sizes and free text for applying values from theme */
+    gap?: FlexGroupGapSize;
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Align items along the cross axis */
+    align?: FlexAlign;
+    /** Justify content along the main axis */
+    justify?: FlexJustify;
+    /** Whether items should wrap to new lines */
+    wrap?: boolean;
+};
+export type RestFlexGroupProps = RestFlexItemProps;
+export type FlexGroupProps = OwnFlexGroupProps & RestFlexGroupProps;

package/dist/Layouts/FlexItem/FlexItem.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexItem_style = require("./FlexItem.style.cjs");
+const FlexItem = ({
+  flex,
+  selfAlign,
+  component,
+  ...restProps
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexItem_style.FlexItem, {
+  ...restProps,
+  "$flex": flex,
+  "$selfAlign": selfAlign,
+  as: component
+});
+exports.FlexItem = FlexItem;

package/dist/Layouts/FlexItem/FlexItem.d.ts

@@ -0,0 +1,2 @@
+import { FlexItemProps } from './FlexItem.types';
+export declare const FlexItem: ({ flex, selfAlign, component, ...restProps }: FlexItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Layouts/FlexItem/FlexItem.js

@@ -0,0 +1,16 @@
+import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
+import { FlexItem as FlexItem$1 } from "./FlexItem.style.js";
+const FlexItem = ({
+  flex,
+  selfAlign,
+  component,
+  ...restProps
+}) => jsxRuntimeExports.jsx(FlexItem$1, {
+  ...restProps,
+  "$flex": flex,
+  "$selfAlign": selfAlign,
+  as: component
+});
+export {
+  FlexItem
+};

package/dist/Layouts/FlexItem/FlexItem.style.cjs

@@ -0,0 +1,14 @@
+"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 FlexItem = _styled__default.default.div.withConfig({
+  displayName: "FlexItemstyle__FlexItem",
+  componentId: "RedisUI__sc-sfog54-0"
+})(["flex:", ";align-self:", ";"], ({
+  $flex
+}) => $flex, ({
+  $selfAlign
+}) => $selfAlign);
+exports.FlexItem = FlexItem;

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

@@ -0,0 +1,5 @@
+import { FlexAlign, FlexFlex } from './FlexItem.types';
+export declare const FlexItem: import("styled-components").StyledComponent<"div", any, {
+    $selfAlign?: FlexAlign | undefined;
+    $flex?: FlexFlex | undefined;
+}, never>;

package/dist/Layouts/FlexItem/FlexItem.style.js

@@ -0,0 +1,12 @@
+import _styled from "styled-components";
+const FlexItem = _styled.div.withConfig({
+  displayName: "FlexItemstyle__FlexItem",
+  componentId: "RedisUI__sc-sfog54-0"
+})(["flex:", ";align-self:", ";"], ({
+  $flex
+}) => $flex, ({
+  $selfAlign
+}) => $selfAlign);
+export {
+  FlexItem
+};

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

@@ -0,0 +1,14 @@
+import { ComponentType } from 'react';
+import { AnyOtherString, ComposeElementProps } from '../../Helpers';
+export type FlexAlign = 'start' | 'end' | 'center' | 'stretch';
+export type FlexFlex = 'auto' | 'none' | AnyOtherString;
+export type OwnFlexItemProps = {
+    /** Flex grow/shrink/basis value */
+    flex?: FlexFlex;
+    /** Align self in parent flex container along the cross axis of the parent flex */
+    selfAlign?: FlexAlign;
+    /** Use different component with Flex styling, default is `div` */
+    component?: string | ComponentType;
+};
+export type RestFlexItemProps = ComposeElementProps;
+export type FlexItemProps = OwnFlexItemProps & RestFlexItemProps;

package/dist/Layouts/FlexSplit/FlexSplit.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../node_modules/react/jsx-runtime.cjs");
+const FlexSplit_style = require("./FlexSplit.style.cjs");
+const FlexSplit = ({
+  extraMinSpace
+}) => jsxRuntime.jsxRuntimeExports.jsx(FlexSplit_style.FlexSplit, {
+  "$extraMinSpace": extraMinSpace
+});
+exports.FlexSplit = FlexSplit;

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

@@ -0,0 +1,2 @@
+import { FlexSplitProps } from './FlexSplit.types';
+export declare const FlexSplit: ({ extraMinSpace }: FlexSplitProps) => import("react/jsx-runtime").JSX.Element;

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/Link/Link.style.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { LinkButtonVariants, LinkSize } from './Link.types';
 export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
     $variant: LinkButtonVariants;
@@ -10,5 +11,5 @@ export declare const LinkStyler: import("styled-components").StyledComponent<"sp
     $size: LinkSize;
     $allowWrap?: boolean | undefined;
 }, never>;
-export declare const StyledLinkText: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledLinkText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const ExternalArrow: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Menu/components/Content/components/Item/Components/SubHead/SubHead.style.d.ts

@@ -1 +1,2 @@
-export declare const MenuItemSubHead: 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 MenuItemSubHead: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Menu/components/Content/components/Label/components/Text/Text.style.d.ts

@@ -1 +1,2 @@
-export declare const MenuItemText: 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 MenuItemText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

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;