@redis-ui/components 41.3.2 → 41.4.1

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;

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

@@ -3,7 +3,6 @@ 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>;
+export declare const TypographyCode: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, MapProps, never>;

package/dist/Typography/components/Code/Code.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 useCodeStyles = ({
-  $size = "M",
+  $size = "L",
   $variant = "regular",
-  $ellipsis,
   $color
 } = {}) => {
   const theme = useTheme();
@@ -13,17 +13,12 @@ const useCodeStyles = ({
     font-size: ${codeTheme.fontSizes[$size]};
     font-weight: ${codeTheme.fontWeight[$variant]};
     color: ${$color && theme.components.typography.colors[$color] || "unset"};
-    ${$ellipsis && css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
   `;
 };
-const Code = _styled.code.withConfig({
-  displayName: "Codestyle__Code",
+const TypographyCode = _styled(TypographyBase).withConfig({
+  displayName: "Codestyle__TypographyCode",
   componentId: "RedisUI__sc-1babmep-0"
 })(["", ""], useCodeStyles);
 export {
-  Code
+  TypographyCode
 };

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

@@ -1,12 +1,9 @@
-import React from 'react';
-import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
 import { TypographyColor } from '../../Typography.types';
+import { TypographyBaseProps } from '../Base/Base.types';
 export type TypographyCodeSize = 'S' | 'M' | 'L';
 export type TypographyCodeVariant = 'regular' | 'semiBold';
-export interface TypographyCodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
-    children: React.ReactNode;
+export interface TypographyCodeProps extends Omit<TypographyBaseProps, 'component'> {
     size?: TypographyCodeSize;
     variant?: TypographyCodeVariant;
-    ellipsis?: boolean;
     color?: TypographyColor;
 }

package/dist/Typography/components/Heading/Heading.cjs

@@ -1,33 +1,24 @@
 "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 Heading_utils = require("./Heading.utils.cjs");
 const Heading_style = require("./Heading.style.cjs");
-const level = {
-  XXL: "1",
-  XL: "2",
-  L: "3",
-  M: "4",
-  S: "5",
-  XS: "6"
-};
-const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
-const Heading = ({
+const TypographyHeading = React.forwardRef(({
   size = "XL",
-  ellipsis = false,
   color,
   variant,
   component = "div",
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Heading_style.Heading, {
-  as: component,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntime.jsxRuntimeExports.jsx(Heading_style.TypographyHeading, {
+  ref,
+  component,
   "$size": size,
   "$color": color,
   "$variant": variant,
   "data-role": "heading",
-  "data-heading-level": getHeadingLevel(size, component),
-  ...restProps,
-  ...useEllipsisTooltip.useEllipsisTooltip(restProps)
-});
-exports.default = Heading;
+  "data-heading-level": Heading_utils.getHeadingLevel(size, component),
+  ...restProps
+}));
+TypographyHeading.displayName = "TypographyHeading";
+exports.default = TypographyHeading;

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

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

package/dist/Typography/components/Heading/Heading.js

@@ -1,33 +1,24 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { useEllipsisTooltip } from "../../hooks/useEllipsisTooltip.js";
-import { Heading as Heading$1 } from "./Heading.style.js";
-const level = {
-  XXL: "1",
-  XL: "2",
-  L: "3",
-  M: "4",
-  S: "5",
-  XS: "6"
-};
-const getHeadingLevel = (size, component) => typeof component === "string" && !Number.isNaN(+component[1]) && +component[1] && component[1] || level[size];
-const Heading = ({
+import { forwardRef } from "react";
+import { getHeadingLevel } from "./Heading.utils.js";
+import { TypographyHeading as TypographyHeading$1 } from "./Heading.style.js";
+const TypographyHeading = forwardRef(({
   size = "XL",
-  ellipsis = false,
   color,
   variant,
   component = "div",
   ...restProps
-}) => jsxRuntimeExports.jsx(Heading$1, {
-  as: component,
-  "$ellipsis": ellipsis,
+}, ref) => jsxRuntimeExports.jsx(TypographyHeading$1, {
+  ref,
+  component,
   "$size": size,
   "$color": color,
   "$variant": variant,
   "data-role": "heading",
   "data-heading-level": getHeadingLevel(size, component),
-  ...restProps,
-  ...useEllipsisTooltip(restProps)
-});
+  ...restProps
+}));
+TypographyHeading.displayName = "TypographyHeading";
 export {
-  Heading as default
+  TypographyHeading as default
 };

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

@@ -2,14 +2,14 @@
 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 Heading = _styled__default.default.span.withConfig({
-  displayName: "Headingstyle__Heading",
+const TypographyHeading = _styled__default.default(Base.default).withConfig({
+  displayName: "Headingstyle__TypographyHeading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
-  $ellipsis,
   $color,
   $variant
 }) => {
@@ -22,12 +22,6 @@ const Heading = _styled__default.default.span.withConfig({
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
       color: ${$color && theme.components.typography.colors[$color] || "unset"};
-
-      ${$ellipsis && _styled.css`
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
     `;
 });
-exports.Heading = Heading;
+exports.TypographyHeading = TypographyHeading;

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

@@ -1,8 +1,8 @@
+/// <reference types="react" />
 import { TypographyHeadingSize, TypographyHeadingVariant } from './Heading.types';
 import { TypographyColor } from '../../Typography.types';
-export declare const Heading: import("styled-components").StyledComponent<"span", any, {
+export declare const TypographyHeading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBaseProps & import("react").RefAttributes<HTMLElement>>, any, {
     $size: TypographyHeadingSize;
-    $ellipsis: boolean;
     $color?: TypographyColor | undefined;
     $variant?: TypographyHeadingVariant | undefined;
 }, never>;

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

@@ -1,11 +1,11 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-const Heading = _styled.span.withConfig({
-  displayName: "Headingstyle__Heading",
+import TypographyBase from "../Base/Base.js";
+const TypographyHeading = _styled(TypographyBase).withConfig({
+  displayName: "Headingstyle__TypographyHeading",
   componentId: "RedisUI__sc-14rmj7o-0"
 })(["line-height:1.2;margin-block:0;", ""], ({
   $size,
-  $ellipsis,
   $color,
   $variant
 }) => {
@@ -18,14 +18,8 @@ const Heading = _styled.span.withConfig({
       font-family: ${headingTheme.fontFamily};
       margin: ${sizeTheme.margin || 0};
       color: ${$color && theme.components.typography.colors[$color] || "unset"};
-
-      ${$ellipsis && css`
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      `}
     `;
 });
 export {
-  Heading
+  TypographyHeading
 };