@redis-ui/components 39.12.0 → 41.3.2

package/dist/Toast/components/Icon/Icon.cjs

@@ -15,6 +15,7 @@ const Icon = ({
     customIcon: icon,
     variant,
     size,
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Toast/components/Icon/Icon.js

@@ -13,6 +13,7 @@ const Icon = ({
     customIcon: icon,
     variant,
     size,
+    "aria-hidden": true,
     ...props
   });
 };

package/dist/Toast/core/content.helper.cjs

@@ -13,7 +13,7 @@ const renderContent = (content) => {
     ...content
   });
 };
-const wrapInContextProvider = (contextProps, content) => jsxRuntime.jsxRuntimeExports.jsx(context.Context.Provider, {
+const wrapInContextProvider = (contextProps, content) => jsxRuntime.jsxRuntimeExports.jsx(context.ToastContextProvider, {
   value: contextProps,
   children: content
 });

package/dist/Toast/core/content.helper.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../node_modules/react/jsx-runtime.js";
 import { isValidElement } from "react";
 import Toast from "../Toast.js";
-import { Context } from "./context.js";
+import { ToastContextProvider } from "./context.js";
 const renderContent = (content) => {
   if (typeof content === "string" || !content) return jsxRuntimeExports.jsx(Toast, {
     message: content
@@ -11,7 +11,7 @@ const renderContent = (content) => {
     ...content
   });
 };
-const wrapInContextProvider = (contextProps, content) => jsxRuntimeExports.jsx(Context.Provider, {
+const wrapInContextProvider = (contextProps, content) => jsxRuntimeExports.jsx(ToastContextProvider, {
   value: contextProps,
   children: content
 });

package/dist/Toast/core/context.cjs

@@ -1,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const Context = React.createContext({
-  variant: "informative"
+const NullableContext = require("../../Helpers/contexts/NullableContext.cjs");
+const [useToastParams, ToastContextProvider] = NullableContext.createNullableContext({
+  forComponentName: "Toast"
 });
-const useToastParams = () => React.useContext(Context);
-exports.Context = Context;
+exports.ToastContextProvider = ToastContextProvider;
 exports.useToastParams = useToastParams;

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

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 import { ToastContextProps } from './core.types';
-export declare const Context: import("react").Context<ToastContextProps>;
-export declare const useToastParams: () => ToastContextProps;
+export declare const useToastParams: () => ToastContextProps, ToastContextProvider: import("react").Provider<ToastContextProps>;

package/dist/Toast/core/context.js

@@ -1,9 +1,8 @@
-import { createContext, useContext } from "react";
-const Context = createContext({
-  variant: "informative"
+import { createNullableContext } from "../../Helpers/contexts/NullableContext.js";
+const [useToastParams, ToastContextProvider] = createNullableContext({
+  forComponentName: "Toast"
 });
-const useToastParams = () => useContext(Context);
 export {
-  Context,
+  ToastContextProvider,
   useToastParams
 };

package/dist/Toast/core/core.cjs

@@ -18,8 +18,10 @@ const ToastPositions = {
   BottomRight: "bottom-right"
 };
 const toast = (content, options) => mapping_helpers.createToast((contextProps) => content_helper.wrapInContextProvider(contextProps, content_helper.renderContent(content)), options);
+const update = (id, content, options) => mapping_helpers.updateToast(id, (contextProps) => content_helper.wrapInContextProvider(contextProps, content_helper.renderContent(content)), options);
 toast.Position = ToastPositions;
 toast.Variant = ToastVariants;
+toast.update = update;
 toast.dismiss = mapping_helpers.dismiss;
 toast.isActive = mapping_helpers.isActive;
 toast.addChangeListener = mapping_helpers.addChangeListener;

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

@@ -1,6 +1,6 @@
-import type { ToastContent, ToastOptions } from './core.types';
+import { ToastContent, ToastId, ToastOptions } from './core.types';
 export declare const toast: {
-    (content: ToastContent, options?: ToastOptions): import("react-toastify").Id;
+    (content: ToastContent, options?: ToastOptions): ToastId;
     Position: {
         readonly TopLeft: "top-left";
         readonly TopCenter: "top-center";
@@ -16,11 +16,12 @@ export declare const toast: {
         readonly Attention: "attention";
         readonly Danger: "danger";
     };
-    dismiss: (id?: import("react-toastify").Id | undefined) => void;
-    isActive: (id: import("react-toastify").Id) => boolean;
+    update: (id: ToastId, content: ToastContent, options?: ToastOptions) => void;
+    dismiss: (id?: ToastId | undefined) => void;
+    isActive: (id: ToastId) => boolean;
     addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;
-    notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
-    attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
-    danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
-    success: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => import("react-toastify").Id;
+    notice: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
+    attention: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
+    danger: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
+    success: (content: ToastContent, options?: Omit<ToastOptions, 'variant'>) => ToastId;
 };

package/dist/Toast/core/core.js

@@ -1,5 +1,5 @@
 import { wrapInContextProvider, renderContent } from "./content.helper.js";
-import { createToast, dismiss, isActive, addChangeListener } from "./mapping.helpers.js";
+import { createToast, dismiss, isActive, addChangeListener, updateToast } from "./mapping.helpers.js";
 const ToastVariants = {
   Notice: "notice",
   Informative: "informative",
@@ -16,8 +16,10 @@ const ToastPositions = {
   BottomRight: "bottom-right"
 };
 const toast = (content, options) => createToast((contextProps) => wrapInContextProvider(contextProps, renderContent(content)), options);
+const update = (id, content, options) => updateToast(id, (contextProps) => wrapInContextProvider(contextProps, renderContent(content)), options);
 toast.Position = ToastPositions;
 toast.Variant = ToastVariants;
+toast.update = update;
 toast.dismiss = dismiss;
 toast.isActive = isActive;
 toast.addChangeListener = addChangeListener;

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

@@ -1,23 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const reactToastify_esm = require("../../node_modules/react-toastify/dist/react-toastify.esm.cjs");
-const extractContextProps = (props, options) => ({
-  ...props.toastProps,
-  variant: (options == null ? void 0 : options.variant) || "informative"
+const extractContextProps = (props) => ({
+  variant: "informative",
+  liveRole: "alert",
+  ...props.toastProps
+});
+const cleanupOptions = (options) => ({
+  ...options,
+  type: options == null ? void 0 : options.variant,
+  icon: false,
+  closeButton: false,
+  hideProgressBar: true,
+  draggable: false,
+  theme: "none",
+  role: "group",
+  ...(options == null ? void 0 : options.role) ? {
+    liveRole: options == null ? void 0 : options.role
+  } : {}
+  // save real role for inner container, only if specified
+});
+const createToast = (render, options) => reactToastify_esm.toast((props) => render(extractContextProps(props)), cleanupOptions(options));
+const updateToast = (id, render, options) => reactToastify_esm.toast.update(id, {
+  render: (props) => render(extractContextProps(props)),
+  ...cleanupOptions(options)
 });
-function cleanupOptions(options) {
-  return options && {
-    ...options,
-    type: options.variant,
-    icon: false,
-    closeButton: false,
-    hideProgressBar: true,
-    draggable: false,
-    theme: "none"
-    // use dummy theme (later custom themes can be used)
-  };
-}
-const createToast = (render, options) => reactToastify_esm.toast((props) => render(extractContextProps(props, options)), cleanupOptions(options));
 const {
   dismiss,
   isActive
@@ -27,3 +34,4 @@ exports.addChangeListener = addChangeListener;
 exports.createToast = createToast;
 exports.dismiss = dismiss;
 exports.isActive = isActive;
+exports.updateToast = updateToast;

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

@@ -1,13 +1,15 @@
 /**
  * This file maps toastify api to redis-ui api
  */
-/// <reference types="react" />
-import { ToastContextProps, ToastOptions } from './mapping.types';
+import { ReactElement } from 'react';
+import { ToastContextProps, ToastId, ToastOptions, ToastUpdateOptions } from './mapping.types';
 /**
  * converts parameters to/from toastify and calls toastify toast
- * @param render
- * @param options
  */
-export declare const createToast: (render: (contextProps: ToastContextProps) => JSX.Element, options?: ToastOptions) => import("react-toastify").Id;
-export declare const dismiss: (id?: import("react-toastify").Id | undefined) => void, isActive: (id: import("react-toastify").Id) => boolean;
+export declare const createToast: (render: (contextProps: ToastContextProps) => ReactElement, options?: ToastOptions) => ToastId;
+/**
+ * converts parameters to/from toastify and calls toastify update
+ */
+export declare const updateToast: (id: ToastId, render: (contextProps: ToastContextProps) => ReactElement, options?: ToastUpdateOptions) => void;
+export declare const dismiss: (id?: ToastId | undefined) => void, isActive: (id: ToastId) => boolean;
 export declare const addChangeListener: (callback: import("react-toastify/dist/core").OnChangeCallback) => () => void;

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

@@ -1,21 +1,28 @@
 import { toast as Q } from "../../node_modules/react-toastify/dist/react-toastify.esm.js";
-const extractContextProps = (props, options) => ({
-  ...props.toastProps,
-  variant: (options == null ? void 0 : options.variant) || "informative"
+const extractContextProps = (props) => ({
+  variant: "informative",
+  liveRole: "alert",
+  ...props.toastProps
+});
+const cleanupOptions = (options) => ({
+  ...options,
+  type: options == null ? void 0 : options.variant,
+  icon: false,
+  closeButton: false,
+  hideProgressBar: true,
+  draggable: false,
+  theme: "none",
+  role: "group",
+  ...(options == null ? void 0 : options.role) ? {
+    liveRole: options == null ? void 0 : options.role
+  } : {}
+  // save real role for inner container, only if specified
+});
+const createToast = (render, options) => Q((props) => render(extractContextProps(props)), cleanupOptions(options));
+const updateToast = (id, render, options) => Q.update(id, {
+  render: (props) => render(extractContextProps(props)),
+  ...cleanupOptions(options)
 });
-function cleanupOptions(options) {
-  return options && {
-    ...options,
-    type: options.variant,
-    icon: false,
-    closeButton: false,
-    hideProgressBar: true,
-    draggable: false,
-    theme: "none"
-    // use dummy theme (later custom themes can be used)
-  };
-}
-const createToast = (render, options) => Q((props) => render(extractContextProps(props, options)), cleanupOptions(options));
 const {
   dismiss,
   isActive
@@ -25,5 +32,6 @@ export {
   addChangeListener,
   createToast,
   dismiss,
-  isActive
+  isActive,
+  updateToast
 };

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

@@ -4,12 +4,11 @@
 import { RefAttributes } from 'react';
 import { ToastContainerProps as RcToastContainerProps, ToastContentProps as RcToastContentProps, ToastOptions as RcToastOptions, ToastPosition as RcToastPosition } from 'react-toastify';
 import { SemanticVariant } from '../../Banner/components/BannerSemanticComponents';
-declare const pickToastOptions: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "toastId", "delay", "onClose"];
-type PickToastOptions = (typeof pickToastOptions)[number];
-declare const pickToastProps: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "toastId", "delay", "onClose", "closeToast"];
-type PickToastProps = (typeof pickToastProps)[number];
-declare const pickToasterProps: readonly ["pauseOnHover", "closeOnClick", "autoClose", "position", "role", "rtl", "containerId", "transition", "newestOnTop", "limit", "style"];
-type PickToasterProps = (typeof pickToasterProps)[number];
+export type { Id as ToastId } from 'react-toastify';
+type PickCommonOptions = 'pauseOnHover' | 'closeOnClick' | 'autoClose' | 'position' | 'role' | 'rtl' | 'containerId' | 'transition';
+type PickToastOptions = PickCommonOptions | 'toastId' | 'delay' | 'onClose';
+type PickToastProps = PickToastOptions | 'closeToast';
+type PickToasterProps = PickCommonOptions | 'newestOnTop' | 'limit' | 'style';
 export type ToasterProps = Pick<RcToastContainerProps, PickToasterProps> & RefAttributes<HTMLDivElement> & {
     className?: string;
 };
@@ -18,6 +17,8 @@ type ToastOverriddenOptions = {
     variant: ToastVariant;
 };
 export type ToastOptions = Pick<RcToastOptions, PickToastOptions> & Partial<ToastOverriddenOptions>;
-export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'], PickToastProps>> & ToastOverriddenOptions;
+export type ToastUpdateOptions = ToastOptions;
+export type ToastContextProps = Partial<Pick<RcToastContentProps['toastProps'], PickToastProps>> & ToastOverriddenOptions & {
+    liveRole: string;
+};
 export type ToastPosition = RcToastPosition;
-export {};

package/dist/Tooltip/Tooltip.d.ts

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

package/dist/Tooltip/Tooltip.types.d.ts

@@ -1,5 +1,5 @@
 import { TooltipComposeProps } from './components/Compose/Compose.types';
 import { TooltipContentProps } from './components/Content/Content.types';
 import { TooltipTriggerProps } from './components/Trigger/Trigger.types';
-export interface TooltipProps extends Omit<TooltipContentProps, 'backgroundColor'>, Omit<TooltipComposeProps, 'children'>, TooltipTriggerProps {
+export interface TooltipProps extends TooltipContentProps, Omit<TooltipComposeProps, 'children'>, TooltipTriggerProps {
 }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/Typography/Typography.d.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,18 +1,12 @@
-import React, { HTMLAttributes } from 'react';
+import React from 'react';
 import { EllipsisTooltipParams } from '../../hooks/useEllipsisTooltip';
-export type CodeSizeType = 'S' | 'M' | 'L';
-export type CodeVariantType = 'regular' | 'semiBold';
-export type ColorType = 'primary' | 'secondary';
-export interface CodeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'color'>, Pick<EllipsisTooltipParams, 'tooltipOnEllipsis'> {
+import { TypographyColor } from '../../Typography.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;
-    size?: CodeSizeType;
-    variant?: CodeVariantType;
+    size?: TypographyCodeSize;
+    variant?: TypographyCodeVariant;
     ellipsis?: boolean;
-    color?: ColorType;
-}
-export interface MapProps extends HTMLAttributes<HTMLElement> {
-    $size?: CodeProps['size'];
-    $variant?: CodeProps['variant'];
-    $ellipsis?: boolean;
-    $color?: CodeProps['color'];
+    color?: TypographyColor;
 }