@trackunit/react-components 0.1.145 → 0.1.147

package/index.cjs.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
-var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var uiIcons = require('@trackunit/ui-icons');
 var ReactDOM = require('react-dom');
@@ -351,9 +350,13 @@ const cvaIconButtonContainer = cssClassVarianceUtilities.cvaMerge(["w-5", "h-5",
  */
 const Button$1 = React__namespace.forwardRef((_a, ref) => {
     var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest$1(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return (jsxRuntime.jsxs(StyledButton, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsxRuntime.jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })));
+    return React__namespace.createElement(renderAs, Object.assign({ ref,
+        title,
+        type,
+        role,
+        onClick,
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loading && jsxRuntime.jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
-const StyledButton = tailwindStyledComponents.tw.button ``;
 
 const IconButton = React__namespace.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
@@ -512,11 +515,11 @@ const cvaText = cssClassVarianceUtilities.cvaMerge(["m-0", "relative", "text-sm"
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
     const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return (jsxRuntime.jsx(StyledText, { "$as": type, className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children: children }));
+    return React__namespace.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
 };
-const StyledText = tailwindStyledComponents.tw.text ``;
 
 const cvaAlert = cssClassVarianceUtilities.cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
@@ -833,16 +836,16 @@ const cvaHeading = cssClassVarianceUtilities.cvaMerge(["m-0", "leading-normal",
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+const Heading = (_a) => {
+    var { variant = "primary", inverted = false, subtle = false, className, dataTestId } = _a, rest = __rest$1(_a, ["variant", "inverted", "subtle", "className", "dataTestId"]);
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return (jsxRuntime.jsx(StyledHeading, { "$as": semanticType[variant], className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId, children: children }));
+    return React__namespace.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
 };
-const StyledHeading = tailwindStyledComponents.tw.div ``;
 
 /**
  * Header for Cards and Modals.
@@ -18933,6 +18936,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsxRuntime.jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
+const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cssClassVarianceUtilities.cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cssClassVarianceUtilities.cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19033,7 +19067,7 @@ const cvaIndicatorIconBackground = cssClassVarianceUtilities.cvaMerge(["rounded-
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsxRuntime.jsx(Tooltip, { disabled: withLabel, label: label, children: jsxRuntime.jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxRuntime.jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsxRuntime.jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsxRuntime.jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cssClassVarianceUtilities.cvaMerge([
@@ -38832,37 +38866,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cssClassVarianceUtilities.cvaMerge("inline-flex");
-const cvaTooltipPopover = cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-cssClassVarianceUtilities.cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cssClassVarianceUtilities.cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsxRuntime.jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsxRuntime.jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cssClassVarianceUtilities.cvaMerge(["w-full"], {
     variants: {
         size: {

package/index.esm.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, createContext, forwardRef, useContext, isValidElement, cloneElement, memo, Children, useReducer, Component } from 'react';
-import { tw } from '@trackunit/tailwind-styled-components';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import * as ReactDOM from 'react-dom';
@@ -324,9 +323,13 @@ const cvaIconButtonContainer = cvaMerge(["w-5", "h-5", "flex", "justify-center",
  */
 const Button$1 = React.forwardRef((_a, ref) => {
     var { onClick, children, loading, disabled, className, fullWidth = false, prefix, suffix, color = "primary", variant = "filled", type = "button", size = "medium", square = false, dataTestId, title, role, tabIndex, renderAs = "button", circular } = _a, rest = __rest$1(_a, ["onClick", "children", "loading", "disabled", "className", "fullWidth", "prefix", "suffix", "color", "variant", "type", "size", "square", "dataTestId", "title", "role", "tabIndex", "renderAs", "circular"]);
-    return (jsxs(StyledButton, Object.assign({ "$as": renderAs, onClick: onClick, disabled: disabled || loading, type: type, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), title: title, "aria-label": title, role: role, tabIndex: tabIndex, "data-testid": dataTestId, ref: ref }, rest, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })));
+    return React.createElement(renderAs, Object.assign({ ref,
+        title,
+        type,
+        role,
+        onClick,
+        tabIndex, disabled: disabled || loading, className: cvaButton({ rounded: circular, disabled, size, square, color, variant, fullWidth, className }), "aria-label": title, "data-testid": dataTestId, children: (jsxs(Fragment, { children: [loading && jsx(Spinner, { className: cvaButtonSpinner(), centering: "vertically" }), prefix, children, suffix] })) }, rest));
 });
-const StyledButton = tw.button ``;
 
 const IconButton = React.forwardRef((_a, ref) => {
     var { icon, size = "small", square = true, loading, disabled } = _a, rest = __rest$1(_a, ["icon", "size", "square", "loading", "disabled"]);
@@ -485,11 +488,11 @@ const cvaText = cvaMerge(["m-0", "relative", "text-sm", "font-normal"], {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-const Text = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
+const Text = (_a) => {
+    var { children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId } = _a, rest = __rest$1(_a, ["children", "type", "size", "align", "weight", "underline", "inverted", "subtle", "italicize", "uppercase", "className", "dataTestId"]);
     const color = inverted && subtle ? "subtleInverted" : inverted ? "inverted" : subtle ? "subtle" : "default";
-    return (jsx(StyledText, { "$as": type, className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children: children }));
+    return React.createElement(type, Object.assign({ className: cvaText({ color, uppercase, align, italic: italicize, size, underline, weight, className }), "data-testid": dataTestId, children }, rest));
 };
-const StyledText = tw.text ``;
 
 const cvaAlert = cvaMerge(["flex", "relative", "p-4", "rounded"], {
     variants: {
@@ -806,16 +809,16 @@ const cvaHeading = cvaMerge(["m-0", "leading-normal", "text-black"], {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-const Heading = ({ children, variant = "primary", inverted = false, subtle = false, className, dataTestId, }) => {
+const Heading = (_a) => {
+    var { variant = "primary", inverted = false, subtle = false, className, dataTestId } = _a, rest = __rest$1(_a, ["variant", "inverted", "subtle", "className", "dataTestId"]);
     const semanticType = {
         primary: "h1",
         secondary: "h2",
         tertiary: "h3",
         subtitle: "h4",
     };
-    return (jsx(StyledHeading, { "$as": semanticType[variant], className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId, children: children }));
+    return React.createElement(semanticType[variant], Object.assign(Object.assign({}, rest), { className: cvaHeading({ subtle, inverted, size: variant, className }), "data-testid": dataTestId }));
 };
-const StyledHeading = tw.div ``;
 
 /**
  * Header for Cards and Modals.
@@ -18906,6 +18909,37 @@ const ExternalLink = ({ rel = "noreferrer", target = "_blank", href, className,
     return (jsx("a", { "data-testid": dataTestId, className: className, title: title, href: href, rel: rel, target: target, children: children }));
 };
 
+const cvaTooltipFlexContainer = cvaMerge("inline-flex");
+const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
+cvaMerge("pointer-events-none origin-center");
+const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
+    variants: {
+        color: {
+            light: "shadow-md bg-white",
+            dark: "text-white bg-neutral-800",
+        },
+    },
+    defaultVariants: {
+        color: "light",
+    },
+});
+
+/**
+ * The Tooltip component is used to show helpful tips or contextual information to the users.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+const Tooltip = (_a) => {
+    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
+    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
+    if (disabled) {
+        return wrappedChildren;
+    }
+    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
+};
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { "aria-label": typeof label === "string" ? label : undefined, className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
+
 const cvaIndicator = cvaMerge(["flex", "items-center"]);
 const cvaIndicatorIcon = cvaMerge(["mr-2"]);
 const cvaIndicatorLabel = cvaMerge(["pl-2", "pr-2", "font-medium", "capitalize", "text-sm", "xl:text-base"]);
@@ -19006,7 +19040,7 @@ const cvaIndicatorIconBackground = cvaMerge(["rounded-full", "items-center", "ju
  */
 const Indicator = (_a) => {
     var { dataTestId, icon, label, color = "unknown", withBackground = true, withLabel = true, ping = false, className } = _a, rest = __rest$1(_a, ["dataTestId", "icon", "label", "color", "withBackground", "withLabel", "ping", "className"]);
-    return (jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId }, rest, { title: !withLabel ? label : undefined, children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })));
+    return (jsx(Tooltip, { disabled: withLabel, label: label, children: jsxs("div", Object.assign({ className: cvaIndicator({ className }), "data-testid": dataTestId, "aria-label": label }, rest, { children: [jsxs("div", { className: cvaIndicatorIconBackground({ color, background: withBackground ? "visible" : "hidden" }), "data-testid": dataTestId ? `${dataTestId}-background` : "indicator-background", children: [ping && (jsx("div", { className: cvaIndicatorPing({ color }), "data-testid": dataTestId ? `${dataTestId}-ping` : "indicator-ping" })), icon] }), label !== undefined && withLabel && (jsx("div", { className: cvaIndicatorLabel(), "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label", children: label }))] })) }));
 };
 
 const cvaMenuItem = cvaMerge([
@@ -38805,37 +38839,6 @@ function defaultHeader(date, showTime) {
     })})`;
 }
 
-const cvaTooltipFlexContainer = cvaMerge("inline-flex");
-const cvaTooltipPopover = cvaMerge("pointer-events-none origin-center");
-cvaMerge("pointer-events-none origin-center");
-const cvaTooltipContent = cvaMerge("p-2 rounded max-w-sm", {
-    variants: {
-        color: {
-            light: "shadow-md bg-white",
-            dark: "text-white bg-neutral-800",
-        },
-    },
-    defaultVariants: {
-        color: "light",
-    },
-});
-
-/**
- * The Tooltip component is used to show helpful tips or contextual information to the users.
- *
- * @param {TooltipProps} props - The props for the Tooltip component
- * @returns {JSX.Element} Tooltip component
- */
-const Tooltip = (_a) => {
-    var { children, dataTestId, disabled, className } = _a, rest = __rest$1(_a, ["children", "dataTestId", "disabled", "className"]);
-    const wrappedChildren = (jsx("div", { className: cvaTooltipFlexContainer({ className }), "data-testid": dataTestId && `${dataTestId}-parent`, children: children }));
-    if (disabled) {
-        return wrappedChildren;
-    }
-    return (jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
-};
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxs(Popover, { className: cvaTooltipPopover(), placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", children: [jsx(PopoverTrigger, { children: children }), jsx(PopoverContent, { children: jsx("div", { className: cvaTooltipContent({ color: mode }), children: jsx(Text, { inverted: mode === "dark", type: contentTextType, children: label }) }) })] }));
-
 const cvaValueBar = cvaMerge(["w-full"], {
     variants: {
         size: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.145",
+  "version": "0.1.147",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -10,7 +10,6 @@
     "@floating-ui/react": "0.22.2",
     "@trackunit/css-class-variance-utilities": "0.0.11",
     "@trackunit/css-core": "0.0.92",
-    "@trackunit/tailwind-styled-components": "0.0.60",
     "@trackunit/ui-design-tokens": "0.0.75",
     "@trackunit/ui-icons": "0.0.73",
     "date-fns": "2.29.3",

package/src/components/Heading/Heading.d.ts

@@ -25,4 +25,4 @@ export interface HeadingProps extends CommonProps {
  * @param {HeadingProps} props - The props for the Heading component
  * @returns {JSX.Element} Heading component
  */
-export declare const Heading: ({ children, variant, inverted, subtle, className, dataTestId, }: HeadingProps) => JSX.Element;
+export declare const Heading: ({ variant, inverted, subtle, className, dataTestId, ...rest }: HeadingProps) => JSX.Element;

package/src/components/Text/Text.d.ts

@@ -55,4 +55,4 @@ export interface TextProps extends CommonProps {
  * @param {TextProps} props - The props for the Text component
  * @returns {JSX.Element} Text component
  */
-export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, ...rest }: TextProps) => JSX.Element;