@redis-ui/components 37.0.0 → 38.0.0

package/dist/Popover/components/Content/Content.cjs

@@ -17,7 +17,6 @@ const Content = Object.assign(({
   link,
   linkText,
   windowBar,
-  textColor,
   content,
   ...contentOptions
 }) => {
@@ -30,7 +29,6 @@ const Content = Object.assign(({
           windowBar,
           title,
           text,
-          textColor,
           actionButtonText,
           actionButtonHandler,
           link,
@@ -42,8 +40,7 @@ const Content = Object.assign(({
   if (!content) return null;
   return jsxRuntime.jsxRuntimeExports.jsx(Content.Compose, {
     ...contentOptions,
-    children: typeof content === "string" || textColor ? jsxRuntime.jsxRuntimeExports.jsx(Content.Text, {
-      color: textColor,
+    children: typeof content === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Content.Text, {
       children: content
     }) : content
   });

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PopoverContentProps } from './Content.types';
-declare const Content: (({ title, text, actionButtonText, actionButtonHandler, link, linkText, windowBar, textColor, content, ...contentOptions }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
+declare const Content: (({ title, text, actionButtonText, actionButtonHandler, link, linkText, windowBar, content, ...contentOptions }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: ({ children, backgroundColor, placement, sideOffset, onClickOutside, persistent, align, maxWidth, portal, ...restProps }: import("./components/Compose/Compose.types").PopoverContentComposeProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     Close: ({ children, icon, ...buttonProps }: import("./components/Close/Close.types").PopoverCloseProps) => import("react/jsx-runtime").JSX.Element;
@@ -10,7 +10,7 @@ declare const Content: (({ title, text, actionButtonText, actionButtonHandler, l
         Title: ({ children, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
     };
     /** @deprecated use Popover.Card instead */
-    Body: (({ text, textColor, ...restProps }: import("./components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
+    Body: (({ text, ...restProps }: import("./components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./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;
     };
@@ -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, color, ellipsis, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
         Header: import("react").FC<import("./components/WindowBar/components/Header/Header.types").WindowBarHeaderProps>;
     };
 };

package/dist/Popover/components/Content/Content.js

@@ -15,7 +15,6 @@ const Content = Object.assign(({
   link,
   linkText,
   windowBar,
-  textColor,
   content,
   ...contentOptions
 }) => {
@@ -28,7 +27,6 @@ const Content = Object.assign(({
           windowBar,
           title,
           text,
-          textColor,
           actionButtonText,
           actionButtonHandler,
           link,
@@ -40,8 +38,7 @@ const Content = Object.assign(({
   if (!content) return null;
   return jsxRuntimeExports.jsx(Content.Compose, {
     ...contentOptions,
-    children: typeof content === "string" || textColor ? jsxRuntimeExports.jsx(Content.Text, {
-      color: textColor,
+    children: typeof content === "string" ? jsxRuntimeExports.jsx(Content.Text, {
       children: content
     }) : content
   });

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import { ContentHeaderProps } from './components/Header/Header.types';
 import { WindowBarProps } from './components/WindowBar/WindowBar.types';
 import { ContentBodyProps } from './components/Body/Body.types';
@@ -7,7 +6,6 @@ import { ContentFooterProps } from './components/Footer/Footer.types';
 import { PopoverContentComposeProps } from './components/Compose/Compose.types';
 export interface PopoverContentProps extends Omit<PopoverContentComposeProps, 'children' | 'title'> {
     content?: ReactNode;
-    textColor?: keyof Theme['semantic']['color']['text'];
     /** @deprecated use `Popover.Card` instead */
     windowBar?: WindowBarProps;
     /** @deprecated use `Popover.Card` instead */

package/dist/Popover/components/Content/components/Body/Body.cjs

@@ -5,13 +5,11 @@ const Compose = require("./components/Compose/Compose.cjs");
 const BodyText = require("./components/BodyText/BodyText.cjs");
 const Body = Object.assign(({
   text,
-  textColor,
   ...restProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsx(Body.Compose, {
     ...restProps,
     children: jsxRuntime.jsxRuntimeExports.jsx(Body.Text, {
-      color: textColor,
       children: text
     })
   });

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

@@ -1,5 +1,5 @@
 import { ContentBodyProps } from './Body.types';
-declare const Body: (({ text, textColor, ...restProps }: ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Body: (({ text, ...restProps }: ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./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;
 };

package/dist/Popover/components/Content/components/Body/Body.js

@@ -3,13 +3,11 @@ import Compose from "./components/Compose/Compose.js";
 import BodyText from "./components/BodyText/BodyText.js";
 const Body = Object.assign(({
   text,
-  textColor,
   ...restProps
 }) => {
   return jsxRuntimeExports.jsx(Body.Compose, {
     ...restProps,
     children: jsxRuntimeExports.jsx(Body.Text, {
-      color: textColor,
       children: text
     })
   });

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

@@ -1,6 +1,4 @@
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import { ContentBodyComposeProps } from './components/Compose/Compose.types';
 export interface ContentBodyProps extends ContentBodyComposeProps {
     text?: string;
-    textColor?: keyof Theme['semantic']['color']['text'];
 }

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.styles.cjs

@@ -8,10 +8,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const HeaderTitle = _styled__default.default(Typography.default.Body).withConfig({
   displayName: "BodyTextstyles__HeaderTitle",
   componentId: "RedisUI__sc-27g2ne-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = redisUiStyles.useTheme().components.popupCard.body;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => redisUiStyles.useTheme().components.popupCard.body.textColor);
 exports.HeaderTitle = HeaderTitle;

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

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

package/dist/Popover/components/Content/components/Body/components/BodyText/BodyText.styles.js

@@ -4,12 +4,7 @@ import Typography from "../../../../../../../Typography/Typography.js";
 const HeaderTitle = _styled(Typography.Body).withConfig({
   displayName: "BodyTextstyles__HeaderTitle",
   componentId: "RedisUI__sc-27g2ne-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = useTheme().components.popupCard.body;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => useTheme().components.popupCard.body.textColor);
 export {
   HeaderTitle
 };

package/dist/Popover/components/Content/components/Compose/Compose.cjs

@@ -25,8 +25,8 @@ const Compose = ({
   };
   const renderContent = jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.Content, {
     onInteractOutside: handleInteractOutside,
-    "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
+    "$backgroundColor": backgroundColor,
     sideOffset,
     side: placement,
     align,

package/dist/Popover/components/Content/components/Compose/Compose.js

@@ -23,8 +23,8 @@ const Compose = ({
   };
   const renderContent = jsxRuntimeExports.jsxs(Content, {
     onInteractOutside: handleInteractOutside,
-    "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
+    "$backgroundColor": backgroundColor,
     sideOffset,
     side: placement,
     align,

package/dist/Popover/components/Content/components/Compose/Compose.style.cjs

@@ -26,7 +26,7 @@ const Content = _styled__default.default(index.Content).withConfig({
 }) => {
   const theme = redisUiStyles.useTheme();
   const popoverTheme = theme.components.popover;
-  const bgColor = $backgroundColor && theme.semantic.color.background[$backgroundColor] || popoverTheme.bgColor;
+  const bgColor = $backgroundColor || popoverTheme.bgColor;
   return _styled.css`
       background-color: ${bgColor};
       ${Arrow} {

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

@@ -2,6 +2,6 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 export declare const Arrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixPopover.PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixPopover.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {
-    $backgroundColor?: "transparent" | "neutral100" | "neutral200" | "neutral300" | "neutral400" | "neutral500" | "neutral600" | "neutral700" | "neutral800" | "primary50" | "primary100" | "primary200" | "primary300" | "primary400" | "primary500" | "primary600" | "primary700" | "success100" | "success200" | "success300" | "success500" | "success600" | "success700" | "success800" | "notice100" | "notice200" | "notice300" | "notice500" | "notice600" | "notice700" | "notice800" | "informative50" | "informative100" | "informative200" | "informative300" | "informative400" | "informative500" | "informative600" | "informative700" | "attention100" | "attention200" | "attention300" | "attention500" | "attention600" | "attention700" | "attention800" | "danger100" | "danger200" | "danger300" | "danger500" | "danger600" | "danger700" | "danger800" | undefined;
+    $backgroundColor?: string | undefined;
     $maxWidth?: string | undefined;
 }, never>;

package/dist/Popover/components/Content/components/Compose/Compose.style.js

@@ -22,7 +22,7 @@ const Content = _styled(Content2).withConfig({
 }) => {
   const theme = useTheme();
   const popoverTheme = theme.components.popover;
-  const bgColor = $backgroundColor && theme.semantic.color.background[$backgroundColor] || popoverTheme.bgColor;
+  const bgColor = $backgroundColor || popoverTheme.bgColor;
   return css`
       background-color: ${bgColor};
       ${Arrow} {

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

@@ -1,10 +1,9 @@
 import * as RadixPopover from '@radix-ui/react-popover';
-import { Theme } from '@redislabsdev/redis-ui-styles';
 import { ComposeElementProps } from '../../../../../Helpers/common.types';
 export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
 export type PopoverAlign = 'start' | 'center' | 'end';
 export interface PopoverContentComposeProps extends ComposeElementProps {
-    backgroundColor?: keyof Theme['semantic']['color']['background'];
+    backgroundColor?: string;
     placement?: PopoverPlacement;
     sideOffset?: number;
     persistent?: boolean;

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

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

package/dist/Popover/components/Content/components/Text/Text.styles.cjs

@@ -8,10 +8,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Text = _styled__default.default(Typography.default.Body).withConfig({
   displayName: "Textstyles__Text",
   componentId: "RedisUI__sc-myum25-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = redisUiStyles.useTheme().components.tooltip;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => redisUiStyles.useTheme().components.tooltip.textColor);
 exports.Text = Text;

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

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

package/dist/Popover/components/Content/components/Text/Text.styles.js

@@ -4,12 +4,7 @@ import Typography from "../../../../../Typography/Typography.js";
 const Text = _styled(Typography.Body).withConfig({
   displayName: "Textstyles__Text",
   componentId: "RedisUI__sc-myum25-0"
-})(["color:", ";"], ({
-  color
-}) => {
-  const theme = useTheme().components.tooltip;
-  return color ? void 0 : theme.textColor;
-});
+})(["color:", ";"], () => useTheme().components.tooltip.textColor);
 export {
   Text
 };

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, color, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+    Heading: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, 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 @@
-export declare const WindowBarHeading: import("styled-components").StyledComponent<({ size, color, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const WindowBarHeading: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Popover/components/PopoverCard/PopoverCard.cjs

@@ -10,7 +10,6 @@ const Close = require("../Content/components/Close/Close.cjs");
 const PopoverCard = Object.assign(({
   text,
   title,
-  textColor,
   actionButtonText,
   actionButtonHandler,
   link,
@@ -26,8 +25,7 @@ const PopoverCard = Object.assign(({
     title,
     hideCloseButton: Boolean(windowBar || !persistent)
   }), jsxRuntime.jsxRuntimeExports.jsx(PopoverCard.Body, {
-    text,
-    textColor
+    text
   }), jsxRuntime.jsxRuntimeExports.jsx(PopoverCard.Footer, {
     ...{
       actionButtonText,

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { PopoverCardProps } from './PopoverCard.types';
-declare const PopoverCard: (({ text, title, textColor, actionButtonText, actionButtonHandler, link, linkText, windowBar, persistent, ...composeProps }: PopoverCardProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandler, link, linkText, windowBar, persistent, ...composeProps }: PopoverCardProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Header: (({ title, hideCloseButton, ...restProps }: import("../Content/components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../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;
     };
-    Body: (({ text, textColor, ...restProps }: import("../Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
+    Body: (({ text, ...restProps }: import("../Content/components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("../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;
     };
@@ -17,7 +17,7 @@ declare const PopoverCard: (({ text, title, textColor, actionButtonText, actionB
         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, color, ellipsis, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<({ size, ellipsis, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, 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/Popover/components/PopoverCard/PopoverCard.js

@@ -8,7 +8,6 @@ import Close from "../Content/components/Close/Close.js";
 const PopoverCard = Object.assign(({
   text,
   title,
-  textColor,
   actionButtonText,
   actionButtonHandler,
   link,
@@ -24,8 +23,7 @@ const PopoverCard = Object.assign(({
     title,
     hideCloseButton: Boolean(windowBar || !persistent)
   }), jsxRuntimeExports.jsx(PopoverCard.Body, {
-    text,
-    textColor
+    text
   }), jsxRuntimeExports.jsx(PopoverCard.Footer, {
     ...{
       actionButtonText,

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

@@ -3,7 +3,7 @@ import type { ContentHeaderProps } from '../Content/components/Header/Header.typ
 import type { ContentBodyProps } from '../Content/components/Body/Body.types';
 import type { ContentFooterProps } from '../Content/components/Footer/Footer.types';
 import { WindowBarProps } from '../Content/components/WindowBar/WindowBar.types';
-export interface PopoverCardProps extends Pick<ContentHeaderProps, 'title'>, Pick<ContentBodyProps, 'text' | 'textColor'>, Pick<ContentFooterProps, 'actionButtonText' | 'actionButtonHandler' | 'link' | 'linkText'>, Omit<ComposeProps, 'children' | 'title'> {
+export interface PopoverCardProps extends Pick<ContentHeaderProps, 'title'>, Pick<ContentBodyProps, 'text'>, Pick<ContentFooterProps, 'actionButtonText' | 'actionButtonHandler' | 'link' | 'linkText'>, Omit<ComposeProps, 'children' | 'title'> {
     windowBar?: WindowBarProps;
     persistent?: boolean;
 }

package/dist/ProgressBar/ProgressBar.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
 const ProgressBar_styles = require("./ProgressBar.styles.cjs");
-const Typography = require("../Typography/Typography.cjs");
 const ProgressBar = ({
   value,
   textIndicationPosition,
@@ -24,10 +23,9 @@ const ProgressBar = ({
         value: inRangeValue,
         variant
       })
-    }), textPosition && jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+    }), textPosition && jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_styles.TypographyBody, {
       size: "S",
       variant: "semiBold",
-      color: "neutral800",
       children: `${inRangeValue}%`
     })]
   });

package/dist/ProgressBar/ProgressBar.js

@@ -1,7 +1,6 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { ProgressBar as ProgressBar$1, Root, Indicator } from "./ProgressBar.styles.js";
-import Typography from "../Typography/Typography.js";
+import { ProgressBar as ProgressBar$1, Root, Indicator, TypographyBody } from "./ProgressBar.styles.js";
 const ProgressBar = ({
   value,
   textIndicationPosition,
@@ -22,10 +21,9 @@ const ProgressBar = ({
         value: inRangeValue,
         variant
       })
-    }), textPosition && jsxRuntimeExports.jsx(Typography.Body, {
+    }), textPosition && jsxRuntimeExports.jsx(TypographyBody, {
       size: "S",
       variant: "semiBold",
-      color: "neutral800",
       children: `${inRangeValue}%`
     })]
   });

package/dist/ProgressBar/ProgressBar.styles.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const index = require("../node_modules/@radix-ui/react-progress/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Root = _styled__default.default(index.Root).withConfig({
@@ -47,6 +48,11 @@ const ProgressBar = _styled__default.default.div.withConfig({
 }, Root, ({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
+const TypographyBody = _styled__default.default(Typography.default.Body).withConfig({
+  displayName: "ProgressBarstyles__TypographyBody",
+  componentId: "RedisUI__sc-caf7e3-3"
+})(["color:", ";"], () => redisUiStyles.useTheme().components.progressBar.text.color);
 exports.Indicator = Indicator;
 exports.ProgressBar = ProgressBar;
 exports.Root = Root;
+exports.TypographyBody = TypographyBody;

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

@@ -12,3 +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, component, ellipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/ProgressBar/ProgressBar.styles.js

@@ -1,6 +1,7 @@
 import _styled, { css } from "styled-components";
 import { Root as Root$1, Indicator as Indicator$1 } from "../node_modules/@radix-ui/react-progress/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import Typography from "../Typography/Typography.js";
 const Root = _styled(Root$1).withConfig({
   displayName: "ProgressBarstyles__Root",
   componentId: "RedisUI__sc-caf7e3-0"
@@ -43,8 +44,13 @@ const ProgressBar = _styled.div.withConfig({
 }, Root, ({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
+const TypographyBody = _styled(Typography.Body).withConfig({
+  displayName: "ProgressBarstyles__TypographyBody",
+  componentId: "RedisUI__sc-caf7e3-3"
+})(["color:", ";"], () => useTheme().components.progressBar.text.color);
 export {
   Indicator,
   ProgressBar,
-  Root
+  Root,
+  TypographyBody
 };

package/dist/RadioGroup/RadioGroup.d.ts

@@ -16,7 +16,7 @@ declare const RadioGroup: (({ label, required, optional, infoIconProps, initialV
      */
     Label: (({ label, infoIconProps, required, optional, readOnly, ...restProps }: import("../Label").LabelProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ children, readOnly, ...restProps }: import("../Label/components/Text/Text.types").TextProps) => import("react/jsx-runtime").JSX.Element;
-        InfoIcon: ({ size, iconColor, textColor, text, content, ...tooltipProps }: import("../Label/components/InfoIcon/InfoIcon.types").InfoIconProps) => import("react/jsx-runtime").JSX.Element | null;
+        InfoIcon: ({ size, text, content, ...tooltipProps }: import("../Label/components/InfoIcon/InfoIcon.types").InfoIconProps) => import("react/jsx-runtime").JSX.Element | null;
         Required: ({ children, show, size, ...restProps }: import("../Label/components/Required/Required.types").RequiredProps) => import("react/jsx-runtime").JSX.Element | null;
         Optional: ({ children, show, size, ...restProps }: import("../Label/components/Optional/Optional.types").OptionalProps) => import("react/jsx-runtime").JSX.Element | null;
         Compose: ({ htmlFor, show, ...props }: import("react").LabelHTMLAttributes<HTMLLabelElement> & {

package/dist/RadioGroup/components/Item/components/Label/Label.style.cjs

@@ -31,5 +31,5 @@ const getStateStyles = (tokens) => {
 const RadioGroupItemLabel = _styled__default.default.label.withConfig({
   displayName: "Labelstyle__RadioGroupItemLabel",
   componentId: "RedisUI__sc-rk4lgx-0"
-})(["display:flex;align-items:center;cursor:pointer;min-width:0;gap:", ";line-height:", ";margin-inline:calc(-1 * ", ");padding-inline:", ";", "}"], () => redisUiStyles.useTheme().components.radio.label.gap, () => redisUiStyles.useTheme().components.radio.label.lineHeight, () => redisUiStyles.useTheme().components.radio.gap, () => redisUiStyles.useTheme().components.radio.gap, () => getStateStyles(redisUiStyles.useTheme().components.radio.variants.primary));
+})(["display:flex;align-items:center;cursor:pointer;min-width:0;gap:", ";line-height:", ";margin-inline:calc(-1 * ", ");padding-inline:", ";", ""], () => redisUiStyles.useTheme().components.radio.label.gap, () => redisUiStyles.useTheme().components.radio.label.lineHeight, () => redisUiStyles.useTheme().components.radio.gap, () => redisUiStyles.useTheme().components.radio.gap, () => getStateStyles(redisUiStyles.useTheme().components.radio.variants.primary));
 exports.RadioGroupItemLabel = RadioGroupItemLabel;

package/dist/RadioGroup/components/Item/components/Label/Label.style.js

@@ -27,7 +27,7 @@ const getStateStyles = (tokens) => {
 const RadioGroupItemLabel = _styled.label.withConfig({
   displayName: "Labelstyle__RadioGroupItemLabel",
   componentId: "RedisUI__sc-rk4lgx-0"
-})(["display:flex;align-items:center;cursor:pointer;min-width:0;gap:", ";line-height:", ";margin-inline:calc(-1 * ", ");padding-inline:", ";", "}"], () => useTheme().components.radio.label.gap, () => useTheme().components.radio.label.lineHeight, () => useTheme().components.radio.gap, () => useTheme().components.radio.gap, () => getStateStyles(useTheme().components.radio.variants.primary));
+})(["display:flex;align-items:center;cursor:pointer;min-width:0;gap:", ";line-height:", ";margin-inline:calc(-1 * ", ");padding-inline:", ";", ""], () => useTheme().components.radio.label.gap, () => useTheme().components.radio.label.lineHeight, () => useTheme().components.radio.gap, () => useTheme().components.radio.gap, () => getStateStyles(useTheme().components.radio.variants.primary));
 export {
   RadioGroupItemLabel
 };

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.cjs

@@ -3,16 +3,14 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
 const CategoryValueChip = require("./components/CategoryValueChip/CategoryValueChip.cjs");
 const CategoryValueList_style = require("./CategoryValueList.style.cjs");
-const Typography = require("../../../../../Typography/Typography.cjs");
 const CategoryValueList = ({
   categoryValueList
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsx(CategoryValueList_style.Container, {
     minItems: 1,
     renderExtra: (visibleCount) => jsxRuntime.jsxRuntimeExports.jsxs(CategoryValueList_style.CategoryValueItemContainer, {
-      children: [jsxRuntime.jsxRuntimeExports.jsx(CategoryValueList_style.Separator, {}), jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
+      children: [jsxRuntime.jsxRuntimeExports.jsx(CategoryValueList_style.Separator, {}), jsxRuntime.jsxRuntimeExports.jsx(CategoryValueList_style.TextWrapper, {
         variant: "semiBold",
-        color: "neutral800",
         children: `+${categoryValueList.length - visibleCount}`
       })]
     }),

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.js

@@ -1,16 +1,14 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import CategoryValueChip from "./components/CategoryValueChip/CategoryValueChip.js";
-import { Container, CategoryValueItemContainer, Separator } from "./CategoryValueList.style.js";
-import Typography from "../../../../../Typography/Typography.js";
+import { Container, CategoryValueItemContainer, Separator, TextWrapper } from "./CategoryValueList.style.js";
 const CategoryValueList = ({
   categoryValueList
 }) => {
   return jsxRuntimeExports.jsx(Container, {
     minItems: 1,
     renderExtra: (visibleCount) => jsxRuntimeExports.jsxs(CategoryValueItemContainer, {
-      children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx(Typography.Body, {
+      children: [jsxRuntimeExports.jsx(Separator, {}), jsxRuntimeExports.jsx(TextWrapper, {
         variant: "semiBold",
-        color: "neutral800",
         children: `+${categoryValueList.length - visibleCount}`
       })]
     }),

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.style.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Typography = require("../../../../../Typography/Typography.cjs");
 const Overflow = require("../../../../../Overflow/Overflow.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
@@ -17,6 +18,11 @@ const CategoryValueItemContainer = _styled__default.default.div.withConfig({
   displayName: "CategoryValueListstyle__CategoryValueItemContainer",
   componentId: "RedisUI__sc-1esx0lb-2"
 })(["display:flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().components.section.header.categoryValueList.gap);
+const TextWrapper = _styled__default.default(Typography.default.Body).withConfig({
+  displayName: "CategoryValueListstyle__TextWrapper",
+  componentId: "RedisUI__sc-1esx0lb-3"
+})(["color:", ";"], () => redisUiStyles.useTheme().components.section.header.categoryValueList.counter.textColor);
 exports.CategoryValueItemContainer = CategoryValueItemContainer;
 exports.Container = Container;
 exports.Separator = Separator;
+exports.TextWrapper = TextWrapper;

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

@@ -1,3 +1,4 @@
 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, component, ellipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.style.js

@@ -1,5 +1,6 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
+import Typography from "../../../../../Typography/Typography.js";
 import { Overflow } from "../../../../../Overflow/Overflow.js";
 const Container = _styled(Overflow).withConfig({
   displayName: "CategoryValueListstyle__Container",
@@ -13,8 +14,13 @@ const CategoryValueItemContainer = _styled.div.withConfig({
   displayName: "CategoryValueListstyle__CategoryValueItemContainer",
   componentId: "RedisUI__sc-1esx0lb-2"
 })(["display:flex;align-items:center;gap:", ";"], () => useTheme().components.section.header.categoryValueList.gap);
+const TextWrapper = _styled(Typography.Body).withConfig({
+  displayName: "CategoryValueListstyle__TextWrapper",
+  componentId: "RedisUI__sc-1esx0lb-3"
+})(["color:", ";"], () => useTheme().components.section.header.categoryValueList.counter.textColor);
 export {
   CategoryValueItemContainer,
   Container,
-  Separator
+  Separator,
+  TextWrapper
 };

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.cjs

@@ -2,7 +2,6 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
 const CategoryValueChip_style = require("./CategoryValueChip.style.cjs");
-const Typography = require("../../../../../../../Typography/Typography.cjs");
 const CategoryValueChip = ({
   category,
   value,
@@ -11,10 +10,8 @@ const CategoryValueChip = ({
   ...restProps,
   children: [jsxRuntime.jsxRuntimeExports.jsx(CategoryValueChip_style.Category, {
     variant: "semiBold",
-    color: "neutral800",
     children: category
-  }), jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
-    color: "neutral700",
+  }), jsxRuntime.jsxRuntimeExports.jsx(CategoryValueChip_style.TypographyBody, {
     ellipsis: true,
     tooltipOnEllipsis: true,
     children: value