@redis-ui/components 39.0.0 → 39.18.0

package/dist/Tabs/components/TabBar/TabBar.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 import { RestTabsBarProps, TabsBarProps } from './TabBar.types';
 declare const TabBar: (({ tabs, ...restProps }: TabsBarProps & RestTabsBarProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-    Trigger: (({ value, children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element) & {
-        Compose: ({ children, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-        Tab: ({ children, ...restProps }: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        Marker: (props: import("../../../Helpers/common.types").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, variant, ...restProps }: import("./components/Compose/Compose.types").TabsBarComposeProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    Trigger: (({ value, children, ...restProps }: import("./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("./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<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+        Marker: (props: import("../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
     };
 };
 export default TabBar;

package/dist/Tabs/components/TabBar/components/Trigger/Trigger.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { RestTabsBarTriggerProps, TabsBarTriggerProps } from './Trigger.types';
 declare const Trigger: (({ value, children, ...restProps }: TabsBarTriggerProps & RestTabsBarTriggerProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").TabsBarTriggerComposeProps & import("../../../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLButtonElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
-    Tab: ({ children, ...restProps }: import("../../../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Marker: (props: import("../../../../../Helpers/common.types").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, ...restProps }: import("./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<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Marker: (props: import("../../../../..").ChildFree<import("react").HTMLAttributes<HTMLDivElement>>) => import("react/jsx-runtime").JSX.Element;
 };
 export default Trigger;

package/dist/Toast/Toast.d.ts

@@ -4,8 +4,8 @@ import { ChildFree, ComposeElementProps } from '../Helpers/common.types';
 declare const Toast: (({ message, description, actions, customIcon, showIcon, showCloseButton, ...props }: ToastProps & ChildFree<ComposeElementProps>) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, size, ...props }: import("./components/Icon/Icon.types").ToastIconProps) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     Actions: (({ primary, secondary, ...props }: import("./components/Actions/Actions.types").ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
         Action: ({ label, onClick, closes, icon, variant, ...restProps }: import(".").ToastActionType & {
@@ -16,8 +16,8 @@ declare const Toast: (({ message, description, actions, customIcon, showIcon, sh
     CloseButton: ({ children, onClick, ...props }: import("../Banner/components/BannerSemanticComponents").SemanticCloseButtonProps & import("../Banner/components/BannerSemanticComponents").RestSemanticCloseButtonProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ message, description, ...restProps }: import("./components/Content/Content.types").ToastContentProps & import("./components/Content/Content.types").RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        Message: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-        Description: ({ children, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Message: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Description: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
     };
 };
 export default Toast;

package/dist/Toast/components/Actions/Actions.d.ts

@@ -1,6 +1,6 @@
 import type { ActionsProps } from './Actions.types';
 declare const Actions: (({ primary, secondary, ...props }: ActionsProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: (props: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
     Action: ({ label, onClick, closes, icon, variant, ...restProps }: import("../..").ToastActionType & {
         variant?: import("../../../Banner/components/BannerSemanticComponents").SemanticOutlineVariant | undefined;
         disabled?: boolean | undefined;

package/dist/Toast/components/Compose/Compose.style.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const ToastComposeContainer: import("styled-components").StyledComponent<({ variant, size, ...props }: import("../../../Banner/components/BannerSemanticComponents").SemanticContainerProps & import("../../..").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

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

@@ -1,7 +1,7 @@
 import { RestToastContentProps, ToastContentProps } from './Content.types';
 declare const Content: (({ message, description, ...restProps }: ToastContentProps & RestToastContentProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: (props: import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    Message: ({ children, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
-    Description: ({ children, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Compose: (props: import("../../..").ComposeElementProps<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+    Message: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+    Description: ({ children, ...restProps }: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Content;

package/dist/Toast/components/Content/components/Description/Description.style.d.ts

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

package/dist/Toast/components/Content/components/Description/Description.types.d.ts

@@ -1,2 +1,2 @@
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-export type DescriptionProps = BodyProps;
+import { TypographyBodyProps } from '../../../../../Typography';
+export type DescriptionProps = TypographyBodyProps;

package/dist/Toast/components/Content/components/Message/Message.style.d.ts

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

package/dist/Toast/components/Content/components/Message/Message.types.d.ts

@@ -1,2 +1,2 @@
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-export type MessageProps = BodyProps;
+import { TypographyBodyProps } from '../../../../../Typography';
+export type MessageProps = TypographyBodyProps;

package/dist/Tooltip/Tooltip.d.ts

@@ -2,19 +2,19 @@ import { TooltipProps } from './Tooltip.types';
 declare const Tooltip: (({ children, openDelayDuration, open, onOpenChange, defaultOpen, withButton, disabled, interactive, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, openDelayDuration, open, disabled, onOpenChange, defaultOpen, interactive }: import("./components/Compose/Compose.types").TooltipComposeProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ content, ...composeProps }: import("./components/Content/Content.types").TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
-        Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     Trigger: ({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;
     Card: (({ text, title, actionButtonText, actionButtonHandler, link, linkText, ...composeProps }: import("./components/TooltipCard").TooltipCardProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("./components/TooltipCard/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
         Header: ((props: import("../Popover/components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("../Popover/components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Title: ({ children, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+            Title: ({ children, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
         };
         Body: (({ text, ...restProps }: import("../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: (props: import("../Popover/components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-            Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+            Text: (props: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
         };
         Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("../Popover/components/Content/components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
             Compose: (props: import("../Popover/components/Content/components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { TooltipContentProps } from './Content.types';
 declare const Content: (({ content, ...composeProps }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Content;

package/dist/Tooltip/components/Content/components/Compose/Compose.cjs

@@ -11,7 +11,6 @@ const Compose = ({
   maxWidth,
   placement = "top",
   sideOffset = 5,
-  disableInteractionHelper,
   portal = document.body,
   ...restProps
 }) => {
@@ -19,7 +18,6 @@ const Compose = ({
   const {
     interactive
   } = TooltipInfoContext.useTooltipInfo();
-  const showInteractionHelper = disableInteractionHelper === true ? false : interactive;
   const renderContent = jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.Content, {
     "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
@@ -29,9 +27,7 @@ const Compose = ({
     hideWhenDetached: popperContext.collisionBoundary || restProps.collisionBoundary ? true : void 0,
     ...popperContext,
     ...restProps,
-    children: [showInteractionHelper && jsxRuntime.jsxRuntimeExports.jsx(Compose_style.InteractionHelper, {
-      "data-testid": "redisui-interaction-helper"
-    }), jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Arrow, {}), children]
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Arrow, {}), children]
   });
   if (portal) {
     return jsxRuntime.jsxRuntimeExports.jsx(index.Portal, {

package/dist/Tooltip/components/Content/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
 import { ComposeProps } from './Compose.types';
-declare const Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Tooltip/components/Content/components/Compose/Compose.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { Portal } from "../../../../../node_modules/@radix-ui/react-tooltip/dist/index.js";
 import { useTooltipInfo } from "../../../../Context/TooltipInfoContext.js";
-import { Content, InteractionHelper, Arrow } from "./Compose.style.js";
+import { Content, Arrow } from "./Compose.style.js";
 import { usePopperContext } from "../../../../../Helpers/contexts/Popper/Popper.context.js";
 const Compose = ({
   children,
@@ -9,7 +9,6 @@ const Compose = ({
   maxWidth,
   placement = "top",
   sideOffset = 5,
-  disableInteractionHelper,
   portal = document.body,
   ...restProps
 }) => {
@@ -17,7 +16,6 @@ const Compose = ({
   const {
     interactive
   } = useTooltipInfo();
-  const showInteractionHelper = disableInteractionHelper === true ? false : interactive;
   const renderContent = jsxRuntimeExports.jsxs(Content, {
     "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
@@ -27,9 +25,7 @@ const Compose = ({
     hideWhenDetached: popperContext.collisionBoundary || restProps.collisionBoundary ? true : void 0,
     ...popperContext,
     ...restProps,
-    children: [showInteractionHelper && jsxRuntimeExports.jsx(InteractionHelper, {
-      "data-testid": "redisui-interaction-helper"
-    }), jsxRuntimeExports.jsx(Arrow, {}), children]
+    children: [jsxRuntimeExports.jsx(Arrow, {}), children]
   });
   if (portal) {
     return jsxRuntimeExports.jsx(Portal, {

package/dist/Tooltip/components/Content/components/Compose/Compose.style.cjs

@@ -16,25 +16,17 @@ const Arrow = _styled__default.default(index.Arrow).withConfig({
       filter: drop-shadow(${theme.shadow});
     `;
 });
-const InteractionHelper = _styled__default.default.div.withConfig({
-  displayName: "Composestyle__InteractionHelper",
-  componentId: "RedisUI__sc-vf7r3m-1"
-})(["position:absolute;z-index:-1;"]);
 const Content = _styled__default.default(index.Content).withConfig({
   displayName: "Composestyle__Content",
-  componentId: "RedisUI__sc-vf7r3m-2"
+  componentId: "RedisUI__sc-vf7r3m-1"
 })(["", ""], ({
   $backgroundColor,
   $maxWidth,
-  sideOffset = 0,
   $interactive
 }) => {
   const theme = redisUiStyles.useTheme();
   const tooltipTheme = theme.components.tooltip;
   const bgColor = $backgroundColor || tooltipTheme.bgColor;
-  const triggerOffset = `(${tooltipTheme.arrow.height} + ${sideOffset}px)`;
-  const vertOffset = `calc(-1 * (var(--radix-tooltip-trigger-height) + ${triggerOffset}))`;
-  const horzOffset = `calc(-1 * (var(--radix-tooltip-trigger-width) + ${triggerOffset}))`;
   return _styled.css`
       background-color: ${bgColor};
       ${Arrow} {
@@ -49,22 +41,7 @@ const Content = _styled__default.default(index.Content).withConfig({
       white-space: pre-wrap;
       padding-block: ${tooltipTheme.blockPadding};
       padding-inline: ${tooltipTheme.inlinePadding};
-
-      // interaction helper layout
-      &[data-side='top'] ${InteractionHelper} {
-        inset: 0 0 ${vertOffset} 0;
-      }
-      &[data-side='bottom'] ${InteractionHelper} {
-        inset: ${vertOffset} 0 0 0;
-      }
-      &[data-side='left'] ${InteractionHelper} {
-        inset: 0 ${horzOffset} 0 0;
-      }
-      &[data-side='right'] ${InteractionHelper} {
-        inset: 0 0 0 ${horzOffset};
-      }
     `;
 });
 exports.Arrow = Arrow;
 exports.Content = Content;
-exports.InteractionHelper = InteractionHelper;

package/dist/Tooltip/components/Content/components/Compose/Compose.style.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import * as Tooltip from '@radix-ui/react-tooltip';
 export declare const Arrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tooltip.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
-export declare const InteractionHelper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Tooltip.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {
     $backgroundColor?: string | undefined;
     $maxWidth?: string | undefined;

package/dist/Tooltip/components/Content/components/Compose/Compose.style.js

@@ -12,25 +12,17 @@ const Arrow = _styled(Arrow2).withConfig({
       filter: drop-shadow(${theme.shadow});
     `;
 });
-const InteractionHelper = _styled.div.withConfig({
-  displayName: "Composestyle__InteractionHelper",
-  componentId: "RedisUI__sc-vf7r3m-1"
-})(["position:absolute;z-index:-1;"]);
 const Content = _styled(Content2).withConfig({
   displayName: "Composestyle__Content",
-  componentId: "RedisUI__sc-vf7r3m-2"
+  componentId: "RedisUI__sc-vf7r3m-1"
 })(["", ""], ({
   $backgroundColor,
   $maxWidth,
-  sideOffset = 0,
   $interactive
 }) => {
   const theme = useTheme();
   const tooltipTheme = theme.components.tooltip;
   const bgColor = $backgroundColor || tooltipTheme.bgColor;
-  const triggerOffset = `(${tooltipTheme.arrow.height} + ${sideOffset}px)`;
-  const vertOffset = `calc(-1 * (var(--radix-tooltip-trigger-height) + ${triggerOffset}))`;
-  const horzOffset = `calc(-1 * (var(--radix-tooltip-trigger-width) + ${triggerOffset}))`;
   return css`
       background-color: ${bgColor};
       ${Arrow} {
@@ -45,24 +37,9 @@ const Content = _styled(Content2).withConfig({
       white-space: pre-wrap;
       padding-block: ${tooltipTheme.blockPadding};
       padding-inline: ${tooltipTheme.inlinePadding};
-
-      // interaction helper layout
-      &[data-side='top'] ${InteractionHelper} {
-        inset: 0 0 ${vertOffset} 0;
-      }
-      &[data-side='bottom'] ${InteractionHelper} {
-        inset: ${vertOffset} 0 0 0;
-      }
-      &[data-side='left'] ${InteractionHelper} {
-        inset: 0 ${horzOffset} 0 0;
-      }
-      &[data-side='right'] ${InteractionHelper} {
-        inset: 0 0 0 ${horzOffset};
-      }
     `;
 });
 export {
   Arrow,
-  Content,
-  InteractionHelper
+  Content
 };

package/dist/Tooltip/components/Content/components/Compose/Compose.types.d.ts

@@ -8,6 +8,7 @@ export interface ComposeProps extends ComposeElementProps {
     maxWidth?: string;
     alignOffset?: number;
     align?: 'start' | 'center' | 'end';
+    /** @deprecated should be removed */
     disableInteractionHelper?: boolean;
     portal?: HTMLElement | null;
     collisionBoundary?: RadixTooltip.TooltipContentProps['collisionBoundary'];

package/dist/Tooltip/components/Content/components/Text/Text.d.ts

@@ -1,3 +1,3 @@
-import { BodyProps } from '../../../../../Typography/components/Body/Body.types';
-declare const Text: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyBodyProps } from '../../../../../Typography';
+declare const Text: (props: TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Text;

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

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

package/dist/Tooltip/components/TooltipCard/TooltipCard.d.ts

@@ -3,11 +3,11 @@ declare const TooltipCard: (({ text, title, actionButtonText, actionButtonHandle
     Compose: ({ children, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Header: ((props: import("../../../Popover/components/Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../../../Popover/components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Title: ({ children, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+        Title: ({ children, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
     Body: (({ text, ...restProps }: import("../../../Popover/components/Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../../../Popover/components/Content/components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
-        Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Text: (props: import("../../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     Footer: (({ actionButtonText, actionButtonHandler, link, linkText, ...restProps }: import("../../../Popover/components/Content/components/Footer/Footer.types").ContentFooterProps) => import("react/jsx-runtime").JSX.Element | null) & {
         Compose: (props: import("../../../Popover/components/Content/components/Footer/components/Compose/Compose.types").ContentFooterComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip/components/TooltipCard/components/Header/TooltipHeader.d.ts

@@ -1,6 +1,6 @@
 import { ContentHeaderProps } from '../../../../../Popover/components/Content/components/Header/Header.types';
 declare const TooltipHeader: ((props: ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("../../../../../Popover/components/Content/components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Title: ({ children, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Title: ({ children, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default TooltipHeader;

package/dist/TreeView/components/TreeItem/components/Checkbox/Checkbox.style.d.ts

@@ -1,3 +1,3 @@
 export declare const FullWidthCheckbox: import("styled-components").StyledComponent<({ defaultChecked, checked, onCheckedChange, required, disabled, id, variant, ...restProps }: import("../../../../../Checkbox/components/Compose/Compose.types").CheckboxComposeProps & import("../../../../../Checkbox/components/Compose/Compose.types").RestCheckboxComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const FullWidthCheckboxLabel: import("styled-components").StyledComponent<({ children, ...restProps }: import("../../../../../Checkbox/components/Label/Label.types").CheckboxLabelProps) => import("react/jsx-runtime").JSX.Element | null, any, {}, never>;
-export declare const TextEllipsis: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TextEllipsis: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/TreeView/components/TreeItem/components/ExpandButton/ExpandButton.cjs

@@ -14,6 +14,7 @@ const TreeItemExpandButton = () => {
   }
   return jsxRuntime.jsxRuntimeExports.jsx(ExpandButton_style.CustomIconButton, {
     icon: (treeItemContext == null ? void 0 : treeItemContext.isExpanded) ? redisUiIcons.CaretDownIcon : redisUiIcons.CaretRightIcon,
+    "aria-label": (treeItemContext == null ? void 0 : treeItemContext.isExpanded) ? "Expanded" : "Collapsed",
     size,
     onClick: () => treeItemContext == null ? void 0 : treeItemContext.setIsExpanded((currentIsExpanded) => !currentIsExpanded)
   });

package/dist/TreeView/components/TreeItem/components/ExpandButton/ExpandButton.js

@@ -12,6 +12,7 @@ const TreeItemExpandButton = () => {
   }
   return jsxRuntimeExports.jsx(CustomIconButton, {
     icon: (treeItemContext == null ? void 0 : treeItemContext.isExpanded) ? CaretDownIcon : CaretRightIcon,
+    "aria-label": (treeItemContext == null ? void 0 : treeItemContext.isExpanded) ? "Expanded" : "Collapsed",
     size,
     onClick: () => treeItemContext == null ? void 0 : treeItemContext.setIsExpanded((currentIsExpanded) => !currentIsExpanded)
   });

package/dist/TreeView/components/TreeItem/components/ExpandButton/ExpandButton.style.js

@@ -1,7 +1,7 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import IconButtonComponent from "../../../../../Button/IconButton/IconButton.js";
-const CustomIconButton = _styled(IconButtonComponent).withConfig({
+import IconButton from "../../../../../Button/IconButton/IconButton.js";
+const CustomIconButton = _styled(IconButton).withConfig({
   displayName: "ExpandButtonstyle__CustomIconButton",
   componentId: "RedisUI__sc-xgirc0-0"
 })(["color:", ";flex-shrink:0;"], () => useTheme().components.treeView.arrow.iconColor);

package/dist/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 declare const Typography: {
-    Heading: ({ size, ellipsis, color, ...restProps }: import("./components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
-    Body: ({ size, variant, color, component, ellipsis, ...restProps }: import("./components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
-    Code: ({ size, variant, color, ellipsis, ...restProps }: import("./components/Code/Code.types").CodeProps) => import("react/jsx-runtime").JSX.Element;
+    Heading: ({ size, ellipsis, color, variant, component, ...restProps }: import(".").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Body: ({ size, variant, color, component, ellipsis, ...restProps }: import(".").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Code: ({ size, variant, color, ellipsis, ...restProps }: import(".").TypographyCodeProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Typography;

package/dist/Typography/Typography.types.d.ts

@@ -0,0 +1 @@
+export type TypographyColor = 'primary' | 'secondary';

package/dist/Typography/components/Body/Body.d.ts

@@ -1,3 +1,3 @@
-import { BodyProps } from './Body.types';
-declare const Body: ({ size, variant, color, component, ellipsis, ...restProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyBodyProps } from './Body.types';
+declare const Body: ({ size, variant, color, component, ellipsis, ...restProps }: TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
 export default Body;

package/dist/Typography/components/Body/Body.style.cjs

@@ -12,20 +12,12 @@ const useBodyStyles = ({
 } = {}) => {
   const theme = redisUiStyles.useTheme();
   const bodyTheme = theme.components.typography.body;
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return _styled.css`
     font-family: ${bodyTheme.fontFamily};
-    font-size: ${bodyTheme.fontSizes[$size]};
+    font-size: ${$size === "auto" ? "inherit" : bodyTheme.fontSizes[$size]};
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
-    ${$color && _styled.css`
-      color: ${getColorValue($color)};
-    `}
+    color: ${$color && theme.components.typography.colors[$color] || "unset"};
     ${$ellipsis && _styled.css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Body/Body.style.d.ts

@@ -1,3 +1,10 @@
-import { MapProps } from './Body.types';
+import { HTMLAttributes } from 'react';
+import { TypographyBodyProps } from './Body.types';
+export interface MapProps extends HTMLAttributes<HTMLElement> {
+    $size?: TypographyBodyProps['size'];
+    $variant?: TypographyBodyProps['variant'];
+    $ellipsis?: boolean;
+    $color?: TypographyBodyProps['color'];
+}
 export declare const useBodyStyles: ({ $size, $variant, $ellipsis, $color }?: MapProps) => import("styled-components").FlattenSimpleInterpolation;
 export declare const Body: import("styled-components").StyledComponent<"span", any, MapProps, never>;

package/dist/Typography/components/Body/Body.style.js

@@ -8,20 +8,12 @@ const useBodyStyles = ({
 } = {}) => {
   const theme = useTheme();
   const bodyTheme = theme.components.typography.body;
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return css`
     font-family: ${bodyTheme.fontFamily};
-    font-size: ${bodyTheme.fontSizes[$size]};
+    font-size: ${$size === "auto" ? "inherit" : bodyTheme.fontSizes[$size]};
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
-    ${$color && css`
-      color: ${getColorValue($color)};
-    `}
+    color: ${$color && theme.components.typography.colors[$color] || "unset"};
     ${$ellipsis && css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Body/Body.types.d.ts

@@ -1,20 +1,14 @@
 import React, { HTMLAttributes } from 'react';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
-export type BodySizesType = 'XL' | 'L' | 'M' | 'S' | 'XS';
-export type VariantType = 'regular' | 'semiBold' | 'italic';
-export type ComponentType = 'p' | 'span' | 'div';
-export type ColorType = 'primary' | 'secondary';
-export interface BodyProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
+import { TypographyColor } from '../../Typography.types';
+export type TypographyBodySize = 'XL' | 'L' | 'M' | 'S' | 'XS' | 'auto';
+export type TypographyBodyVariant = 'regular' | 'semiBold' | 'italic';
+export type TypographyBodyComponent = 'p' | 'span' | 'div';
+export interface TypographyBodyProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
     children: React.ReactNode;
-    component?: ComponentType;
-    size?: BodySizesType;
-    variant?: VariantType;
+    component?: TypographyBodyComponent;
+    size?: TypographyBodySize;
+    variant?: TypographyBodyVariant;
     ellipsis?: boolean;
-    color?: ColorType;
-}
-export interface MapProps extends HTMLAttributes<HTMLElement> {
-    $size?: BodyProps['size'];
-    $variant?: BodyProps['variant'];
-    $ellipsis?: boolean;
-    $color?: BodyProps['color'];
+    color?: TypographyColor;
 }

package/dist/Typography/components/Code/Code.d.ts

@@ -1,3 +1,3 @@
-import { CodeProps } from './Code.types';
-declare const Code: ({ size, variant, color, ellipsis, ...restProps }: CodeProps) => import("react/jsx-runtime").JSX.Element;
+import { TypographyCodeProps } from './Code.types';
+declare const Code: ({ size, variant, color, ellipsis, ...restProps }: TypographyCodeProps) => import("react/jsx-runtime").JSX.Element;
 export default Code;

package/dist/Typography/components/Code/Code.style.cjs

@@ -12,19 +12,11 @@ const useCodeStyles = ({
 } = {}) => {
   const theme = redisUiStyles.useTheme();
   const codeTheme = theme.components.typography.code;
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return _styled.css`
     font-family: ${codeTheme.fontFamily};
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
-    ${$color && _styled.css`
-      color: ${getColorValue($color)};
-    `}
+    color: ${$color && theme.components.typography.colors[$color] || "unset"};
     ${$ellipsis && _styled.css`
       overflow: hidden;
       text-overflow: ellipsis;

package/dist/Typography/components/Code/Code.style.d.ts

@@ -1,2 +1,9 @@
-import { MapProps } from './Code.types';
+import { HTMLAttributes } from 'react';
+import { TypographyCodeProps } from './Code.types';
+export interface MapProps extends HTMLAttributes<HTMLElement> {
+    $size?: TypographyCodeProps['size'];
+    $variant?: TypographyCodeProps['variant'];
+    $ellipsis?: boolean;
+    $color?: TypographyCodeProps['color'];
+}
 export declare const Code: import("styled-components").StyledComponent<"code", any, MapProps, never>;

package/dist/Typography/components/Code/Code.style.js

@@ -8,19 +8,11 @@ const useCodeStyles = ({
 } = {}) => {
   const theme = useTheme();
   const codeTheme = theme.components.typography.code;
-  const getColorValue = (color) => {
-    if (!color) return "inherit";
-    if (color === "primary") return theme.components.typography.colors.primary;
-    if (color === "secondary") return theme.components.typography.colors.secondary;
-    return "inherit";
-  };
   return css`
     font-family: ${codeTheme.fontFamily};
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
-    ${$color && css`
-      color: ${getColorValue($color)};
-    `}
+    color: ${$color && theme.components.typography.colors[$color] || "unset"};
     ${$ellipsis && css`
       overflow: hidden;
       text-overflow: ellipsis;