@redis-ui/components 41.3.7 → 41.4.1

package/dist/AppSelectionMenu/components/Item/Item.styles.d.ts

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

package/dist/Banner/components/Message/Message.style.d.ts

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

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { CheckboxVariants, CheckedType } from '../Compose/Compose.types';
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", any, {
     $checked: CheckedType;
     $variant: CheckboxVariants;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/ChipList/Components/ExtraItem.style.d.ts

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

package/dist/Drawer/components/Description/components/Text/Text.style.d.ts

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

package/dist/Drawer/components/Header/components/Title/Title.style.d.ts

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

package/dist/FormField/components/AdditionalText/AdditionalText.style.d.ts

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

package/dist/Inputs/Input/Input.d.ts

@@ -8,7 +8,7 @@ declare const Input: import("react").ForwardRefExoticComponent<import("../compon
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/NumericInput/NumericInput.d.ts

@@ -10,7 +10,7 @@ declare const NumericInput: import("react").ForwardRefExoticComponent<import("..
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/QuantityCounter/QuantityCounter.d.ts

@@ -19,7 +19,7 @@ declare const QuantityCounter: import("react").ForwardRefExoticComponent<import(
         }, "aria-description" | "autoSize">;
         ValueLabel: ({ children }: import("./components/InputGroup/components/ValueLabel/ValueLabel.types").ValueLabelProps) => import("react/jsx-runtime").JSX.Element | null;
     };
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/QuantityCounter/components/InputGroup/components/ValueLabel/ValueLabel.style.d.ts

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

package/dist/Inputs/TextArea/TextArea.d.ts

@@ -13,7 +13,7 @@ declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import(".
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Tag: import("react").ForwardRefExoticComponent<import("./components/TextAreaTag/TextAreaTag").RestTextAreaTagProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/TextArea/components/Compose/Compose.style.d.ts

@@ -7,6 +7,6 @@ export declare const TextAreaCompose: import("styled-components").StyledComponen
 } & {
     readOnly?: boolean | undefined;
 }, never>;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
     readOnly: boolean;
 }, "readOnly">;

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

@@ -1,9 +1,10 @@
+/// <reference types="react" />
 import { InputVariant } from './CommonCompose.types';
 export declare const CommonInputCompose: import("styled-components").StyledComponent<"div", any, {
     'data-status': import("../../../FormField").FieldStatus | undefined;
 } & {
     $variant: InputVariant;
 }, "data-status">;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {
     readOnly: boolean;
 }, "readOnly">;

package/dist/Inputs/components/InputTag/InputTag.style.cjs

@@ -54,7 +54,7 @@ const InputStyle = _styled.css`
 const InputTag = _styled__default.default.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"], InputStyle);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-size:", ";}"], InputStyle, () => redisUiStyles.useTheme().components.input.password.fontSize);
 const AutoSizeInputTag = _styled__default.default(AutoSizeInput.AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

package/dist/Inputs/components/InputTag/InputTag.style.js

@@ -50,7 +50,7 @@ const InputStyle = css`
 const InputTag = _styled.input.withConfig({
   displayName: "InputTagstyle__InputTag",
   componentId: "RedisUI__sc-15tql6o-0"
-})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"], InputStyle);
+})(["", ";align-self:stretch;padding:0;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}&[type='password']:not(:placeholder-shown){font-size:", ";}"], InputStyle, () => useTheme().components.input.password.fontSize);
 const AutoSizeInputTag = _styled(AutoSizeInput).withConfig({
   displayName: "InputTagstyle__AutoSizeInputTag",
   componentId: "RedisUI__sc-15tql6o-1"

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

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

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

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

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

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

package/dist/Link/Link.style.d.ts

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

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

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

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

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

package/dist/Modal/components/Content/components/Body/components/Text/Text.style.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/Modal/components/Content/components/Description/components/Text/Text.style.d.ts

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

package/dist/Modal/components/Content/components/Header/components/Title/Title.style.d.ts

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

package/dist/Pagination/Pagination.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Pagination: {
     Compose: ({ children, pageIndex, pageSize, pageCount, totalItemCount, visibleItemCount, getCanGoNextPage, getCanGoPrevPage, getCanSelectPage, getCanSelectPageSize, onPageSizeChange, onPageChange, onNextPage, onFirstPage, onPrevPage, onLastPage }: import("./components/Compose").PaginationComposeProps) => import("react/jsx-runtime").JSX.Element;
     NavigationButton: ({ navType, ...restProps }: import("./components/NavigationButton").PaginationNavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,10 +10,10 @@ export declare const Pagination: {
     InfoLabel: ({ renderer, ...restProps }: import("./components/InfoLabel").PaginationInfoLabelProps) => import("react/jsx-runtime").JSX.Element;
     PageSizeSelect: {
         ({ pageSizes, ...restProps }: import("./components/PageSizeSelect").PaginationPageSizeSelectProps): import("react/jsx-runtime").JSX.Element | null;
-        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element | null;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element | null;
     };
     PageSelect: {
         ({ ...restProps }: import("./components/PageSelect").PaginationPageSelectProps): import("react/jsx-runtime").JSX.Element;
-        Label: ({ children, ...restProps }: import("..").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element;
+        Label: ({ children, ...restProps }: import("..").TypographyBodyProps & import("react").RefAttributes<HTMLElement>) => import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/Popover/Popover.d.ts

@@ -22,7 +22,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
     };
@@ -43,7 +43,7 @@ declare const Popover: (({ children, defaultOpen, visible, onVisibilityChange, o
             Compose: (props: import("./components/Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, variant, ...props }: import("../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
             Header: import("react").FC<import("./components/Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
         };
         Close: ({ children, icon, ...buttonProps }: import("./components/Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -23,7 +23,7 @@ declare const Content: (({ title, text, actionButtonText, actionButtonHandler, l
         Compose: (props: import("./components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("./components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
         Header: import("react").FC<import("./components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
 };

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.styles.d.ts

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

package/dist/Popover/components/Content/components/Header/components/HeaderTitle/HeaderTitle.styles.d.ts

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

package/dist/Popover/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/Popover/components/Content/components/WindowBar/WindowBar.d.ts

@@ -4,7 +4,7 @@ declare const WindowBar: (({ title, variant, hideCloseButton, withIcon, icon, ..
     Compose: (props: import("./components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ children, icon, ...buttonProps }: import("../Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, variant, ...props }: import("../../../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-    Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
     Header: import("react").FC<import("./components/Header/Header.types").WindowBarHeaderProps>;
 };
 export default WindowBar;

package/dist/Popover/components/Content/components/WindowBar/WindowBar.style.d.ts

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

package/dist/Popover/components/PopoverCard/PopoverCard.d.ts

@@ -17,7 +17,7 @@ declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandle
         Compose: (props: import("../Content/components/WindowBar/components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, variant, ...props }: import("../../../Badge/BadgeIcon").BadgeIconProps) => import("react/jsx-runtime").JSX.Element;
-        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
         Header: import("react").FC<import("../Content/components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
     Close: ({ children, icon, ...buttonProps }: import("../Content/components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ProgressBar/ProgressBar.styles.d.ts

@@ -12,4 +12,4 @@ export declare const Indicator: import("styled-components").StyledComponent<impo
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
     textPosition?: ProgressBarTextPosition | undefined;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.style.d.ts

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<({ children, renderExtra, maxRows, minItems, expectedGap, estimatedItemsPerRow, ...restProps }: import("../../../../../Overflow").OverflowProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CategoryValueItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextWrapper: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TextWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.style.d.ts

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

package/dist/Section/components/Header/components/Label/Label.style.d.ts

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

package/dist/SideBar/components/Footer/components/Text/Text.style.d.ts

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

package/dist/SideBar/components/Item/components/Text/Text.style.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/Stepper/components/Step/components/Label/Label.style.d.ts

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

package/dist/Stepper/components/Step/components/Label/Label.types.d.ts

@@ -1,3 +1,2 @@
-import { ComponentProps } from 'react';
-import { Typography } from '../../../../../Typography';
-export type LabelProps = ComponentProps<typeof Typography.Body>;
+import { TypographyBodyProps } from '../../../../../Typography';
+export type LabelProps = TypographyBodyProps;

package/dist/Switch/components/Title/Title.style.d.ts

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

package/dist/Switch/components/Title/Title.types.d.ts

@@ -1,8 +1,8 @@
-import { ComponentProps, ReactNode } from 'react';
-import { ChildFree } from '../../../Helpers/common.types';
-import Typography from '../../../Typography/Typography';
+import { ReactNode } from 'react';
+import { ChildFree } from '../../../Helpers';
+import { TypographyBodyProps } from '../../../Typography';
 export interface SwitchTitleProps {
     titleOn?: ReactNode;
     titleOff?: ReactNode;
 }
-export type RestSwitchTitleProps = ChildFree<ComponentProps<typeof Typography.Body>>;
+export type RestSwitchTitleProps = ChildFree<TypographyBodyProps>;

package/dist/TableHeading/TableHeading.style.cjs

@@ -24,7 +24,7 @@ const EndContainer = _styled__default.default.div.withConfig({
 const TableSearchInput = _styled__default.default(SearchInput.default).withConfig({
   displayName: "TableHeadingstyle__TableSearchInput",
   componentId: "RedisUI__sc-ew9jwe-2"
-})(["width:", ";border-color:", ";&:where(:hover){border-color:", ";}"], () => redisUiStyles.useTheme().components.tableHeading.searchInput.width, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.hover.borderColor);
+})(["width:", ";border-color:", ";&:where(:hover,:has(input:not(:placeholder-shown))){border-color:", ";}"], () => redisUiStyles.useTheme().components.tableHeading.searchInput.width, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => redisUiStyles.useTheme().components.tableHeading.searchInput.states.hover.borderColor);
 exports.EndContainer = EndContainer;
 exports.TableHeadingContainer = TableHeadingContainer;
 exports.TableSearchInput = TableSearchInput;

package/dist/TableHeading/TableHeading.style.js

@@ -20,7 +20,7 @@ const EndContainer = _styled.div.withConfig({
 const TableSearchInput = _styled(SearchInput).withConfig({
   displayName: "TableHeadingstyle__TableSearchInput",
   componentId: "RedisUI__sc-ew9jwe-2"
-})(["width:", ";border-color:", ";&:where(:hover){border-color:", ";}"], () => useTheme().components.tableHeading.searchInput.width, () => useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => useTheme().components.tableHeading.searchInput.states.hover.borderColor);
+})(["width:", ";border-color:", ";&:where(:hover,:has(input:not(:placeholder-shown))){border-color:", ";}"], () => useTheme().components.tableHeading.searchInput.width, () => useTheme().components.tableHeading.searchInput.states.normal.borderColor, () => useTheme().components.tableHeading.searchInput.states.hover.borderColor);
 export {
   EndContainer,
   TableHeadingContainer,

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

@@ -5,7 +5,7 @@ export declare const useTabsVariantTheme: () => {
         size: string;
     };
     tab: {
-        states: Partial<Record<"disabled" | "focus" | "normal" | "hover" | "active", {
+        states: Partial<Record<"disabled" | "normal" | "hover" | "active" | "focus", {
             padding?: string | undefined;
             bgColor?: string | undefined;
             textColor?: string | undefined;
@@ -18,7 +18,7 @@ export declare const useTabsVariantTheme: () => {
         }>>;
     };
     tabMarker: {
-        states: Partial<Record<"disabled" | "focus" | "normal" | "hover" | "active", {
+        states: Partial<Record<"disabled" | "normal" | "hover" | "active" | "focus", {
             color?: string | undefined;
             size?: string | undefined;
             inset?: string | undefined;

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/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
+};