@redis-ui/components 38.0.0 → 38.6.0

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

@@ -1,9 +1,9 @@
-import { LinkButtonVariants } from './Link.types';
+import { LinkButtonVariants, LinkSize } from './Link.types';
 export declare const StyledLink: import("styled-components").StyledComponent<"a", any, {
-    variant: LinkButtonVariants;
+    $variant: LinkButtonVariants;
+    $size: LinkSize;
+    $allowWrap?: boolean | undefined;
     disabled?: boolean | undefined;
 }, never>;
-export declare const StyledLinkButton: import("styled-components").StyledComponent<"button", any, {
-    variant: LinkButtonVariants;
-}, never>;
-export declare const StyledLinkText: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const StyledLinkText: 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 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/Link/Link.style.js

@@ -1,59 +1,59 @@
 import _styled, { css } from "styled-components";
 import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
+import { ArrowDiagonalIcon } from "@redislabsdev/redis-ui-icons";
 import { getButtonStatesStyle } from "../Button/Button.style.utils.js";
 import { tokenMaps } from "../Helpers/css.utils.js";
 import Typography from "../Typography/Typography.js";
-const getVariantDetails = (variant) => {
-  const [size, layout = "block"] = variant.split("-");
-  return {
-    size,
-    layout
-  };
+const themeSizeMap = {
+  M: "regular",
+  S: "small"
 };
-const getVariantStyle = (theme, variant) => {
-  const {
-    size,
-    layout
-  } = getVariantDetails(variant);
-  const layoutStyle = theme.components.link.variants[layout];
-  const sizeStyle = layoutStyle.sizes[size];
+const themeLayoutMap = {
+  button: "block",
+  inline: "inline"
+};
+const getVariantStyle = (theme, variant, size) => {
+  const themeSize = themeSizeMap[size];
+  const themeLayout = themeLayoutMap[variant];
+  const layoutStyle = theme.components.link.variants[themeLayout];
+  const sizeStyle = layoutStyle.sizes[themeSize];
   return css`
     padding: ${sizeStyle.padding};
     border-radius: ${sizeStyle.borderRadius};
-    gap: ${sizeStyle.gap};
+    min-height: ${sizeStyle.minHeight};
 
     &:disabled,
     &[disabled] {
-      pointer-events: none;
+      cursor: not-allowed;
     }
 
-    ${getButtonStatesStyle(layoutStyle.states, [tokenMaps.bgColor, tokenMaps.textColor])};
+    ${getButtonStatesStyle(layoutStyle.states, [tokenMaps.bgColor, tokenMaps.textColor, tokenMaps.shadowBorder])};
 
     ${getFocusStyle()};
   `;
 };
-const linkStyles = css`
-  display: inline-flex;
-  text-decoration: none;
-`;
 const StyledLink = _styled.a.withConfig({
   displayName: "Linkstyle__StyledLink",
   componentId: "RedisUI__sc-1hmmpl3-0"
-})(["", ";", ";"], linkStyles, ({
-  variant
-}) => getVariantStyle(useTheme(), variant));
-const StyledLinkButton = _styled.button.withConfig({
-  displayName: "Linkstyle__StyledLinkButton",
-  componentId: "RedisUI__sc-1hmmpl3-1"
-})(["", ";border:none;background-color:transparent;cursor:pointer;user-select:none;", ";"], linkStyles, ({
-  variant
-}) => getVariantStyle(useTheme(), variant));
+})(["white-space:", ";display:", ";text-decoration:none;cursor:pointer;line-height:unset;align-items:center;> svg{vertical-align:text-bottom;flex:none;}", ";"], ({
+  $allowWrap
+}) => $allowWrap ? "wrap" : "nowrap", ({
+  $variant,
+  $allowWrap
+}) => $variant === "inline" && "inline" || ($allowWrap ? "inline-block" : "inline-flex"), ({
+  $variant,
+  $size
+}) => getVariantStyle(useTheme(), $variant, $size));
 const StyledLinkText = _styled(Typography.Body).withConfig({
   displayName: "Linkstyle__StyledLinkText",
+  componentId: "RedisUI__sc-1hmmpl3-1"
+})(["text-decoration:underline;white-space:inherit;min-width:0;flex:1;"]);
+const ExternalArrow = _styled(ArrowDiagonalIcon).withConfig({
+  displayName: "Linkstyle__ExternalArrow",
   componentId: "RedisUI__sc-1hmmpl3-2"
-})(["text-decoration:underline;"]);
+})(["&&{vertical-align:middle;}"]);
 export {
+  ExternalArrow,
   StyledLink,
-  StyledLinkButton,
   StyledLinkText
 };

package/dist/Link/Link.types.d.ts

@@ -1,16 +1,22 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, UIEventHandler } from 'react';
 import { IconType } from '@redislabsdev/redis-ui-icons';
-export declare const linkButtonVariants: readonly ["regular", "regular-inline", "small", "small-inline"];
-export type LinkButtonVariants = (typeof linkButtonVariants)[number];
-interface CommonLinkProps {
+/** @deprecated use `size` instead */
+export type ObsoleteLinkVariants = 'regular' | 'regular-inline' | 'small' | 'small-inline';
+export type LinkButtonVariants = 'button' | 'inline';
+export type LinkSize = 'M' | 'S';
+type OwnLinkProps = {
     icon?: IconType;
-    variant?: LinkButtonVariants;
-    isExternalLink?: boolean;
+    /** deprecated values: `regular`, `regular-inline`, `small`, `small-inline`. Use `size` prop instead */
+    variant?: LinkButtonVariants | ObsoleteLinkVariants;
+    allowWrap?: boolean;
+    size?: LinkSize;
+    external?: boolean;
     disabled?: boolean;
-}
-export type LinkProps = CommonLinkProps & (({
-    href: string;
-} & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>) | ({
-    href?: undefined;
-} & ButtonHTMLAttributes<HTMLButtonElement>));
+    href?: string;
+    onClick?: UIEventHandler;
+    /** @deprecated use `external` prop instead */
+    isExternalLink?: boolean;
+};
+type RestLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onKeyDown'>;
+export type LinkProps = RestLinkProps & OwnLinkProps;
 export {};

package/dist/Menu/Menu.d.ts

@@ -13,7 +13,7 @@ declare const Menu: (({ disabled, ...restProps }: MenuProps) => import("react/js
             Check: ({ icon, ...restProps }: import("./components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
             Split: ({ minWidth, ...props }: import("./components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
         };
-        DropdownArrow: ({ ...restProps }: import("./components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+        DropdownArrow: (props: import("./components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
         Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("./components/Content/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
         Separator: (props: import("./components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
     };

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

@@ -9,7 +9,7 @@ declare const Content: import("react").ForwardRefExoticComponent<MenuContentProp
         Check: ({ icon, ...restProps }: import("./components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("./components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
-    DropdownArrow: ({ ...restProps }: import("./components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+    DropdownArrow: (props: import("./components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
     Separator: (props: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/Menu/components/Content/Content.style.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const index = require("../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs");
+const DropdownArrow_style = require("./components/DropdownArrow/DropdownArrow.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Container = _styled__default.default(index.Content).withConfig({
@@ -17,6 +18,10 @@ const Container = _styled__default.default(index.Content).withConfig({
       background-color: ${style.bgColor};
       box-shadow: ${style.shadow};
       border-radius: ${style.borderRadius};
+
+      ${DropdownArrow_style.Arrow} {
+        color: ${style.bgColor};
+      }
     `;
 });
 const ContentWrapper = _styled__default.default.div.withConfig({

package/dist/Menu/components/Content/Content.style.js

@@ -1,6 +1,7 @@
 import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { Content as Content2 } from "../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
+import { Arrow } from "./components/DropdownArrow/DropdownArrow.style.js";
 const Container = _styled(Content2).withConfig({
   displayName: "Contentstyle__Container",
   componentId: "RedisUI__sc-1fn13ak-0"
@@ -13,6 +14,10 @@ const Container = _styled(Content2).withConfig({
       background-color: ${style.bgColor};
       box-shadow: ${style.shadow};
       border-radius: ${style.borderRadius};
+
+      ${Arrow} {
+        color: ${style.bgColor};
+      }
     `;
 });
 const ContentWrapper = _styled.div.withConfig({

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.cjs

@@ -1,19 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const index = require("../../../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs");
-const redisUiStyles = require("@redislabsdev/redis-ui-styles");
-const DropdownArrow = ({
-  ...restProps
-}) => {
-  const theme = redisUiStyles.useTheme();
-  const style = theme.components.menu.dropDown.arrow;
-  const fill = style.bgColor;
-  return jsxRuntime.jsxRuntimeExports.jsx(index.Arrow, {
-    width: style.width,
-    height: style.height,
-    fill,
-    ...restProps
-  });
-};
+const DropdownArrow_style = require("./DropdownArrow.style.cjs");
+const DropdownArrow = (props) => jsxRuntime.jsxRuntimeExports.jsx(DropdownArrow_style.Arrow, {
+  ...props
+});
 exports.default = DropdownArrow;

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.d.ts

@@ -1,3 +1,3 @@
 import { DropdownArrowProps } from './DropdownArrow.types';
-declare const DropdownArrow: ({ ...restProps }: DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownArrow: (props: DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
 export default DropdownArrow;

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.js

@@ -1,19 +1,8 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { Arrow as Arrow2 } from "../../../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
-const DropdownArrow = ({
-  ...restProps
-}) => {
-  const theme = useTheme();
-  const style = theme.components.menu.dropDown.arrow;
-  const fill = style.bgColor;
-  return jsxRuntimeExports.jsx(Arrow2, {
-    width: style.width,
-    height: style.height,
-    fill,
-    ...restProps
-  });
-};
+import { Arrow } from "./DropdownArrow.style.js";
+const DropdownArrow = (props) => jsxRuntimeExports.jsx(Arrow, {
+  ...props
+});
 export {
   DropdownArrow as default
 };

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.style.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const index = require("../../../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Arrow = _styled__default.default(index.Arrow).withConfig({
+  displayName: "DropdownArrowstyle__Arrow",
+  componentId: "RedisUI__sc-tg51wa-0"
+})(["&:not([fill]){fill:currentColor;}", ""], () => {
+  const theme = redisUiStyles.useTheme().components.menu.dropDown;
+  return _styled.css`
+      width: ${theme.arrow.width};
+      height: ${theme.arrow.height};
+      filter: drop-shadow(${theme.arrow.shadow});
+    `;
+});
+exports.Arrow = Arrow;

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.style.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import * as RadixMenu from '@radix-ui/react-dropdown-menu';
+export declare const Arrow: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixMenu.DropdownMenuArrowProps & import("react").RefAttributes<SVGSVGElement>>, any, {}, never>;

package/dist/Menu/components/Content/components/DropdownArrow/DropdownArrow.style.js

@@ -0,0 +1,17 @@
+import _styled, { css } from "styled-components";
+import { Arrow as Arrow2 } from "../../../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const Arrow = _styled(Arrow2).withConfig({
+  displayName: "DropdownArrowstyle__Arrow",
+  componentId: "RedisUI__sc-tg51wa-0"
+})(["&:not([fill]){fill:currentColor;}", ""], () => {
+  const theme = useTheme().components.menu.dropDown;
+  return css`
+      width: ${theme.arrow.width};
+      height: ${theme.arrow.height};
+      filter: drop-shadow(${theme.arrow.shadow});
+    `;
+});
+export {
+  Arrow
+};

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

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

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

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

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

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

package/dist/Menu/components/Trigger/Trigger.style.cjs

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const index = require("../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.cjs");
+const UnstyledButtonTrigger = require("../../../Helpers/UnstyledButtonTrigger.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const UnstyledTriggerContainer = _styled__default.default(index.Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTriggerContainer",
   componentId: "RedisUI__sc-gdzmol-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;border-radius:unset;font-family:inherit;font-size:inherit;transition:unset;&,&:disabled,&:hover,&:active{background-color:transparent;color:inherit;}"]);
+})(["", ""], UnstyledButtonTrigger.UnstyledButtonTrigger);
 exports.UnstyledTriggerContainer = UnstyledTriggerContainer;

package/dist/Menu/components/Trigger/Trigger.style.js

@@ -1,9 +1,10 @@
 import _styled from "styled-components";
 import { Trigger } from "../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
+import { UnstyledButtonTrigger } from "../../../Helpers/UnstyledButtonTrigger.js";
 const UnstyledTriggerContainer = _styled(Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTriggerContainer",
   componentId: "RedisUI__sc-gdzmol-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;border-radius:unset;font-family:inherit;font-size:inherit;transition:unset;&,&:disabled,&:hover,&:active{background-color:transparent;color:inherit;}"]);
+})(["", ""], UnstyledButtonTrigger);
 export {
   UnstyledTriggerContainer
 };

package/dist/Modal/components/Content/components/Body/components/Text/Text.style.d.ts

@@ -1 +1 @@
-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>;
+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>;

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

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

package/dist/Modal/components/Trigger/Trigger.style.cjs

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const index = require("../../../node_modules/@radix-ui/react-dialog/dist/index.cjs");
+const UnstyledButtonTrigger = require("../../../Helpers/UnstyledButtonTrigger.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const UnstyledTrigger = _styled__default.default(index.Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTrigger",
   componentId: "RedisUI__sc-mgqigz-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;"]);
+})(["", ""], UnstyledButtonTrigger.UnstyledButtonTrigger);
 exports.UnstyledTrigger = UnstyledTrigger;

package/dist/Modal/components/Trigger/Trigger.style.js

@@ -1,9 +1,10 @@
 import _styled from "styled-components";
 import { Trigger } from "../../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { UnstyledButtonTrigger } from "../../../Helpers/UnstyledButtonTrigger.js";
 const UnstyledTrigger = _styled(Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTrigger",
   componentId: "RedisUI__sc-mgqigz-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;"]);
+})(["", ""], UnstyledButtonTrigger);
 export {
   UnstyledTrigger
 };

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, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, 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, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+            Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...restProps }: import("../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, 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, ...restProps }: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+        Heading: import("styled-components").StyledComponent<({ size, ellipsis, color, ...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/components/Body/components/BodyText/BodyText.styles.d.ts

@@ -1 +1 @@
-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>;
+export declare const HeaderTitle: 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>;

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

@@ -15,8 +15,8 @@ const Footer = Object.assign(({
   return jsxRuntime.jsxRuntimeExports.jsxs(Footer.Compose, {
     ...restProps,
     children: [link ? jsxRuntime.jsxRuntimeExports.jsx(Link.default, {
-      variant: "regular-inline",
-      isExternalLink: true,
+      variant: "inline",
+      external: true,
       href: link,
       children: linkText
     }) : jsxRuntime.jsxRuntimeExports.jsx("div", {}), actionButtonHandler && jsxRuntime.jsxRuntimeExports.jsx(Button.default, {

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

@@ -13,8 +13,8 @@ const Footer = Object.assign(({
   return jsxRuntimeExports.jsxs(Footer.Compose, {
     ...restProps,
     children: [link ? jsxRuntimeExports.jsx(Link, {
-      variant: "regular-inline",
-      isExternalLink: true,
+      variant: "inline",
+      external: true,
       href: link,
       children: linkText
     }) : jsxRuntimeExports.jsx("div", {}), actionButtonHandler && jsxRuntimeExports.jsx(Button, {

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

@@ -1 +1 @@
-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>;
+export declare const HeaderTitle: import("styled-components").StyledComponent<({ size, ellipsis, color, ...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.d.ts

@@ -1 +1 @@
-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>;
+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>;

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

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const _styled = require("styled-components");
 const index = require("../../../node_modules/@radix-ui/react-popover/dist/index.cjs");
+const UnstyledButtonTrigger = require("../../../Helpers/UnstyledButtonTrigger.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const UnstyledTrigger = _styled__default.default(index.Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTrigger",
   componentId: "RedisUI__sc-1exaqco-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;line-height:unset;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;&:hover{background-color:transparent;}"]);
+})(["", ""], UnstyledButtonTrigger.UnstyledButtonTrigger);
 exports.UnstyledTrigger = UnstyledTrigger;

package/dist/Popover/components/Trigger/Trigger.style.js

@@ -1,9 +1,10 @@
 import _styled from "styled-components";
 import { Trigger } from "../../../node_modules/@radix-ui/react-popover/dist/index.js";
+import { UnstyledButtonTrigger } from "../../../Helpers/UnstyledButtonTrigger.js";
 const UnstyledTrigger = _styled(Trigger).withConfig({
   displayName: "Triggerstyle__UnstyledTrigger",
   componentId: "RedisUI__sc-1exaqco-0"
-})(["padding:0;border:none;display:flex;cursor:pointer;line-height:unset;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;&:hover{background-color:transparent;}"]);
+})(["", ""], UnstyledButtonTrigger);
 export {
   UnstyledTrigger
 };

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

package/dist/Section/components/Body/Body.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const React = require("react");
 const Section_context = require("../../Section.context.cjs");
 const Body_style = require("./Body.style.cjs");
 const Body = ({
@@ -10,7 +11,9 @@ const Body = ({
   const {
     setHasContent
   } = Section_context.useSectionContext();
-  setHasContent(!!content);
+  React.useLayoutEffect(() => {
+    setHasContent(!!content);
+  }, [setHasContent, content]);
   if (!content) {
     return null;
   }

package/dist/Section/components/Body/Body.js

@@ -1,4 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { useLayoutEffect } from "react";
 import { useSectionContext } from "../../Section.context.js";
 import { SectionBody } from "./Body.style.js";
 const Body = ({
@@ -8,7 +9,9 @@ const Body = ({
   const {
     setHasContent
   } = useSectionContext();
-  setHasContent(!!content);
+  useLayoutEffect(() => {
+    setHasContent(!!content);
+  }, [setHasContent, content]);
   if (!content) {
     return null;
   }

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

@@ -1,4 +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>;
+export declare const TextWrapper: 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>;

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

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

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

@@ -4,12 +4,13 @@ const _styled = require("styled-components");
 const index = require("../../../../../node_modules/@radix-ui/react-collapsible/dist/index.cjs");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const CollapseIndicator_style = require("../CollapseIndicator/CollapseIndicator.style.cjs");
+const UnstyledButtonTrigger = require("../../../../../Helpers/UnstyledButtonTrigger.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const SectionHeader = _styled__default.default(index.Trigger).withConfig({
   displayName: "Composestyle__SectionHeader",
   componentId: "RedisUI__sc-kgg5ny-0"
-})(["display:block;padding:0;&[type='button']{cursor:", ";}border:none;border-radius:unset;background-color:transparent;font-family:inherit;font-size:unset;transition:unset;outline:unset;&:hover{background-color:transparent;}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], ({
+})(["", ";display:block;outline:unset;&[type='button']{cursor:", ";}position:relative;", ";&[data-state='open']{box-shadow:0 ", " 0 0 ", ";", "{transform:rotate(180deg);}}"], UnstyledButtonTrigger.UnstyledButtonTrigger, ({
   $collapsible
 }) => $collapsible ? "pointer" : "default", ({
   $collapsible