@redis-ui/components 41.3.7 → 41.11.0

package/dist/Toast/Toaster.style.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
-const reactToastify_esm = require("../node_modules/react-toastify/dist/react-toastify.esm.cjs");
-;/* empty css                                                      */
+const reactToastify_esm = require("../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
+;/* empty css                                                                          */
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);

package/dist/Toast/Toaster.style.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ToastContainer as RcToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 /**
  * Removes top level layout of toastify containers and allows using inner layout of the Toast component
  */
-export declare const ToasterContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-toastify").ToastContainerProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const ToasterContainer: import("styled-components").StyledComponent<typeof RcToastContainer, any, {}, never>;

package/dist/Toast/Toaster.style.js

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
-import { ToastContainer as k } from "../node_modules/react-toastify/dist/react-toastify.esm.js";
-/* empty css                                                    */
+import { ToastContainer as Q } from "../packages/components/node_modules/react-toastify/dist/react-toastify.esm.js";
+/* empty css                                                                        */
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const ToasterContainer = _styled(k).withConfig({
+const ToasterContainer = _styled(Q).withConfig({
   displayName: "Toasterstyle__ToasterContainer",
   componentId: "RedisUI__sc-zfvdgq-0"
 })(["--toastify-toast-min-height:auto;--toastify-toast-width:auto;--toastify-font-family:inherit;& .Toastify__toast,& .Toastify__toast-body{padding:0;margin-bottom:", ";overflow:visible;background:none;color:black;box-shadow:none;}& .Toastify__toast-body{margin:0;}& .Toastify__progress-bar{visibility:hidden !important;}& .Toastify__close-button{display:none;}"], () => useTheme().components.toast.toaster.gap);

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

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

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

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

package/dist/Toast/core/core.d.ts

@@ -17,9 +17,9 @@ export declare const toast: {
         readonly Danger: "danger";
     };
     update: (id: ToastId, content: ToastContent, options?: ToastOptions) => void;
-    dismiss: (id?: ToastId | undefined) => void;
-    isActive: (id: ToastId) => boolean;
-    addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
+    dismiss: (id?: ToastId | undefined, containerId?: ToastId | undefined) => void;
+    isActive: typeof import("react-toastify/dist/core/store").isToastActive;
+    addChangeListener: typeof import("react-toastify/dist/core/store").onChange;
     notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
     attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
     danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;

package/dist/Toast/core/mapping.helpers.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const reactToastify_esm = require("../../node_modules/react-toastify/dist/react-toastify.esm.cjs");
+const reactToastify_esm = require("../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.cjs");
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -25,8 +25,24 @@ const updateToast = (id, render, options) => reactToastify_esm.toast.update(id,
   render: (props) => render(extractContextProps(props)),
   ...cleanupOptions(options)
 });
+const dismiss = (id, containerId) => {
+  if (containerId !== void 0) {
+    if (id !== void 0) {
+      return reactToastify_esm.toast.dismiss({
+        id,
+        containerId
+      });
+    }
+    return reactToastify_esm.toast.dismiss({
+      containerId
+    });
+  }
+  if (id !== void 0) {
+    return reactToastify_esm.toast.dismiss(id);
+  }
+  return reactToastify_esm.toast.dismiss();
+};
 const {
-  dismiss,
   isActive
 } = reactToastify_esm.toast;
 const addChangeListener = reactToastify_esm.toast.onChange;

package/dist/Toast/core/mapping.helpers.d.ts

@@ -2,7 +2,7 @@
  * This file maps toastify api to redis-ui api
  */
 import { ReactElement } from 'react';
-import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions } from './mapping.types';
+import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions, ToastContainerId } from './mapping.types';
 /**
  * converts parameters to/from toastify and calls toastify toast
  */
@@ -11,5 +11,6 @@ export declare const createToast: (render: (contextProps: ToastContextProps) =>
  * converts parameters to/from toastify and calls toastify update
  */
 export declare const updateToast: (id: ToastId, render: (contextProps: ToastContextProps) => ReactElement, options?: ToastUpdateOptions) => void;
-export declare const dismiss: (id?: ToastId | undefined) => void, isActive: (id: ToastId) => boolean;
-export declare const addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
+export declare const dismiss: (id?: ToastId, containerId?: ToastContainerId) => void;
+export declare const isActive: typeof import("react-toastify/dist/core/store").isToastActive;
+export declare const addChangeListener: typeof import("react-toastify/dist/core/store").onChange;

package/dist/Toast/core/mapping.helpers.js

@@ -1,4 +1,4 @@
-import { toast as Q } from "../../node_modules/react-toastify/dist/react-toastify.esm.js";
+import { toast as B } from "../../packages/components/node_modules/react-toastify/dist/react-toastify.esm.js";
 const extractContextProps = (props) => ({
   variant: "informative",
   liveRole: "alert",
@@ -18,16 +18,32 @@ const cleanupOptions = (options) => ({
   } : {}
   // save real role for inner container, only if specified
 });
-const createToast = (render, options) => Q((props) => render(extractContextProps(props)), cleanupOptions(options));
-const updateToast = (id, render, options) => Q.update(id, {
+const createToast = (render, options) => B((props) => render(extractContextProps(props)), cleanupOptions(options));
+const updateToast = (id, render, options) => B.update(id, {
   render: (props) => render(extractContextProps(props)),
   ...cleanupOptions(options)
 });
+const dismiss = (id, containerId) => {
+  if (containerId !== void 0) {
+    if (id !== void 0) {
+      return B.dismiss({
+        id,
+        containerId
+      });
+    }
+    return B.dismiss({
+      containerId
+    });
+  }
+  if (id !== void 0) {
+    return B.dismiss(id);
+  }
+  return B.dismiss();
+};
 const {
-  dismiss,
   isActive
-} = Q;
-const addChangeListener = Q.onChange;
+} = B;
+const addChangeListener = B.onChange;
 export {
   addChangeListener,
   createToast,

package/dist/Toast/core/mapping.types.d.ts

@@ -2,9 +2,9 @@
  * This file maps toastify types to redis-ui types
  */
 import { RefAttributes } from 'react';
-import { ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition } from 'react-toastify';
+import { Id, ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition, Id as ToastId } from 'react-toastify';
 import { SemanticVariant } from '../../Banner/components/BannerSemanticComponents';
-export type { Id as ToastId } from 'react-toastify';
+export type { ToastId };
 type PickCommonOptions = 'pauseOnHover' | 'closeOnClick' | 'autoClose' | 'position' | 'role' | 'rtl' | 'containerId' | 'transition';
 type PickToastOptions = PickCommonOptions | 'toastId' | 'delay' | 'onClose';
 type PickToastProps = PickToastOptions | 'closeToast';
@@ -22,3 +22,4 @@ export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'],
     liveRole: string;
 };
 export type ToastPosition = RcToastPosition;
+export type ToastContainerId = Id;

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

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

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 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").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TextEllipsis: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Typography/Typography.cjs

@@ -3,10 +3,12 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const Heading = require("./components/Heading/Heading.cjs");
 const Body = require("./components/Body/Body.cjs");
 const Code = require("./components/Code/Code.cjs");
+const Base = require("./components/Base/Base.cjs");
 const Typography = {
   Heading: Heading.default,
   Body: Body.default,
-  Code: Code.default
+  Code: Code.default,
+  Base: Base.default
 };
 const Typography$1 = Typography;
 exports.default = Typography$1;

package/dist/Typography/Typography.d.ts

@@ -1,6 +1,8 @@
+/// <reference types="react" />
 declare const Typography: {
-    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;
+    Heading: import("react").ForwardRefExoticComponent<import(".").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>;
+    Body: import("react").ForwardRefExoticComponent<import(".").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>;
+    Code: import("react").ForwardRefExoticComponent<import(".").TypographyCodeProps & import("react").RefAttributes<HTMLElement>>;
+    Base: import("react").ForwardRefExoticComponent<import(".").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>;
 };
 export default Typography;

package/dist/Typography/Typography.js

@@ -1,10 +1,12 @@
-import Heading from "./components/Heading/Heading.js";
-import Body from "./components/Body/Body.js";
-import Code from "./components/Code/Code.js";
+import TypographyHeading from "./components/Heading/Heading.js";
+import TypographyBody from "./components/Body/Body.js";
+import TypographyCode from "./components/Code/Code.js";
+import TypographyBase from "./components/Base/Base.js";
 const Typography = {
-  Heading,
-  Body,
-  Code
+  Heading: TypographyHeading,
+  Body: TypographyBody,
+  Code: TypographyCode,
+  Base: TypographyBase
 };
 const Typography$1 = Typography;
 export {

package/dist/Typography/components/Base/Base.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
+const useEllipsisTooltip = require("../../hooks/useEllipsisTooltip.cjs");
+const Base_style = require("./Base.style.cjs");
+const TypographyBase = React.forwardRef(({
+  component,
+  ellipsis = false,
+  ...restProps
+}, ref) => jsxRuntime.jsxRuntimeExports.jsx(Base_style.TypographyBase, {
+  as: component,
+  "$ellipsis": ellipsis,
+  ...restProps,
+  ...useEllipsisTooltip.useEllipsisTooltip(restProps, ref)
+}));
+TypographyBase.displayName = "TypographyBase";
+exports.default = TypographyBase;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TypographyBaseProps } from './Base.types';
+declare const TypographyBase: import("react").ForwardRefExoticComponent<TypographyBaseProps & import("react").RefAttributes<HTMLElement>>;
+export default TypographyBase;

package/dist/Typography/components/Base/Base.js

@@ -0,0 +1,18 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { forwardRef } from "react";
+import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
+import { TypographyBase as TypographyBase$1 } from "./Base.style.js";
+const TypographyBase = forwardRef(({
+  component,
+  ellipsis = false,
+  ...restProps
+}, ref) => jsxRuntimeExports.jsx(TypographyBase$1, {
+  as: component,
+  "$ellipsis": ellipsis,
+  ...restProps,
+  ...useEllipsisTooltip(restProps, ref)
+}));
+TypographyBase.displayName = "TypographyBase";
+export {
+  TypographyBase as default
+};

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

@@ -0,0 +1,16 @@
+"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 TypographyBase = _styled__default.default.span.withConfig({
+  displayName: "Basestyle__TypographyBase",
+  componentId: "RedisUI__sc-1tw1hj6-0"
+})(["margin-block:0;", ""], ({
+  $ellipsis
+}) => $ellipsis && _styled.css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `);
+exports.TypographyBase = TypographyBase;

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

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

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

@@ -0,0 +1,14 @@
+import _styled, { css } from "styled-components";
+const TypographyBase = _styled.span.withConfig({
+  displayName: "Basestyle__TypographyBase",
+  componentId: "RedisUI__sc-1tw1hj6-0"
+})(["margin-block:0;", ""], ({
+  $ellipsis
+}) => $ellipsis && css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `);
+export {
+  TypographyBase
+};

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

@@ -0,0 +1,7 @@
+import React, { ComponentType, HTMLAttributes } from 'react';
+import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
+export interface TypographyBaseProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
+    children: React.ReactNode;
+    component?: string | ComponentType;
+    ellipsis?: boolean;
+}

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

@@ -1,22 +1,21 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const useEllipsisTooltip = require("../../hooks/useEllipsisTooltip.cjs");
+const React = require("react");
 const Body_style = require("./Body.style.cjs");
-const Body = ({
+const TypographyBody = React.forwardRef(({
   size,
   variant,
   color,
   component,
-  ellipsis = false,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Body_style.Body, {
-  as: component || "p",
-  "$size": size || "M",
+}, ref) => jsxRuntime.jsxRuntimeExports.jsx(Body_style.TypographyBody, {
+  ref,
+  component: component || "p",
+  "$size": size,
   "$color": color,
-  "$variant": variant || "regular",
-  "$ellipsis": ellipsis,
-  ...restProps,
-  ...useEllipsisTooltip.useEllipsisTooltip(restProps)
-});
-exports.default = Body;
+  "$variant": variant,
+  ...restProps
+}));
+TypographyBody.displayName = "TypographyBody";
+exports.default = TypographyBody;

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

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

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

@@ -1,22 +1,21 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
-import { Body as Body$1 } from "./Body.style.js";
-const Body = ({
+import { forwardRef } from "react";
+import { TypographyBody as TypographyBody$1 } from "./Body.style.js";
+const TypographyBody = forwardRef(({
   size,
   variant,
   color,
   component,
-  ellipsis = false,
   ...restProps
-}) => jsxRuntimeExports.jsx(Body$1, {
-  as: component || "p",
-  "$size": size || "M",
+}, ref) => jsxRuntimeExports.jsx(TypographyBody$1, {
+  ref,
+  component: component || "p",
+  "$size": size,
   "$color": color,
-  "$variant": variant || "regular",
-  "$ellipsis": ellipsis,
-  ...restProps,
-  ...useEllipsisTooltip(restProps)
-});
+  "$variant": variant,
+  ...restProps
+}));
+TypographyBody.displayName = "TypographyBody";
 export {
-  Body as default
+  TypographyBody as default
 };

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Base = require("../Base/Base.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const useBodyStyles = ({
   $size = "M",
   $variant = "regular",
-  $ellipsis,
   $color
 } = {}) => {
   const theme = redisUiStyles.useTheme();
@@ -18,16 +18,11 @@ const useBodyStyles = ({
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
     color: ${$color && theme.components.typography.colors[$color] || "unset"};
-    ${$ellipsis && _styled.css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
   `;
 };
-const Body = _styled__default.default.span.withConfig({
-  displayName: "Bodystyle__Body",
+const TypographyBody = _styled__default.default(Base.default).withConfig({
+  displayName: "Bodystyle__TypographyBody",
   componentId: "RedisUI__sc-1y8s1er-0"
-})(["margin-block:0;", ""], useBodyStyles);
-exports.Body = Body;
+})(["", ""], useBodyStyles);
+exports.TypographyBody = TypographyBody;
 exports.useBodyStyles = useBodyStyles;

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

@@ -3,8 +3,7 @@ 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>;
+export declare const useBodyStyles: ({ $size, $variant, $color }?: MapProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, MapProps, never>;

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

@@ -1,9 +1,9 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import TypographyBase from "../Base/Base.js";
 const useBodyStyles = ({
   $size = "M",
   $variant = "regular",
-  $ellipsis,
   $color
 } = {}) => {
   const theme = useTheme();
@@ -14,18 +14,13 @@ const useBodyStyles = ({
     font-weight: ${bodyTheme.fontWeight[$variant]};
     font-style: ${bodyTheme.fontStyle[$variant]};
     color: ${$color && theme.components.typography.colors[$color] || "unset"};
-    ${$ellipsis && css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
   `;
 };
-const Body = _styled.span.withConfig({
-  displayName: "Bodystyle__Body",
+const TypographyBody = _styled(TypographyBase).withConfig({
+  displayName: "Bodystyle__TypographyBody",
   componentId: "RedisUI__sc-1y8s1er-0"
-})(["margin-block:0;", ""], useBodyStyles);
+})(["", ""], useBodyStyles);
 export {
-  Body,
+  TypographyBody,
   useBodyStyles
 };

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

@@ -1,14 +1,11 @@
-import React, { HTMLAttributes } from 'react';
-import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 import { TypographyColor } from '../../Typography.types';
+import { TypographyBaseProps } from '../Base/Base.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;
+export interface TypographyBodyProps extends TypographyBaseProps {
     component?: TypographyBodyComponent;
     size?: TypographyBodySize;
     variant?: TypographyBodyVariant;
-    ellipsis?: boolean;
     color?: TypographyColor;
 }

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

@@ -1,20 +1,20 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
-const useEllipsisTooltip = require("../../hooks/useEllipsisTooltip.cjs");
+const React = require("react");
 const Code_style = require("./Code.style.cjs");
-const Code = ({
+const TypographyCode = React.forwardRef(({
   size,
   variant,
   color,
-  ellipsis = false,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Code_style.Code, {
-  "$size": size || "L",
-  "$variant": variant || "regular",
-  "$color": color,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntime.jsxRuntimeExports.jsx(Code_style.TypographyCode, {
+  ref,
   ...restProps,
-  ...useEllipsisTooltip.useEllipsisTooltip(restProps)
-});
-exports.default = Code;
+  "$size": size,
+  "$variant": variant,
+  "$color": color,
+  component: "code"
+}));
+TypographyCode.displayName = "TypographyCode";
+exports.default = TypographyCode;

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

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

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

@@ -1,20 +1,20 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
-import { Code as Code$1 } from "./Code.style.js";
-const Code = ({
+import { forwardRef } from "react";
+import { TypographyCode as TypographyCode$1 } from "./Code.style.js";
+const TypographyCode = forwardRef(({
   size,
   variant,
   color,
-  ellipsis = false,
   ...restProps
-}) => jsxRuntimeExports.jsx(Code$1, {
-  "$size": size || "L",
-  "$variant": variant || "regular",
-  "$color": color,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntimeExports.jsx(TypographyCode$1, {
+  ref,
   ...restProps,
-  ...useEllipsisTooltip(restProps)
-});
+  "$size": size,
+  "$variant": variant,
+  "$color": color,
+  component: "code"
+}));
+TypographyCode.displayName = "TypographyCode";
 export {
-  Code as default
+  TypographyCode as default
 };

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

@@ -2,12 +2,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Base = require("../Base/Base.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const useCodeStyles = ({
-  $size = "M",
+  $size = "L",
   $variant = "regular",
-  $ellipsis,
   $color
 } = {}) => {
   const theme = redisUiStyles.useTheme();
@@ -17,15 +17,10 @@ const useCodeStyles = ({
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
     color: ${$color && theme.components.typography.colors[$color] || "unset"};
-    ${$ellipsis && _styled.css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
   `;
 };
-const Code = _styled__default.default.code.withConfig({
-  displayName: "Codestyle__Code",
+const TypographyCode = _styled__default.default(Base.default).withConfig({
+  displayName: "Codestyle__TypographyCode",
   componentId: "RedisUI__sc-1babmep-0"
 })(["", ""], useCodeStyles);
-exports.Code = Code;
+exports.TypographyCode = TypographyCode;