@redis-ui/components 38.1.4 → 39.0.0

package/dist/Link/components/Content/Content.cjs

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../node_modules/react/jsx-runtime.cjs");
+const Link_style = require("../../Link.style.cjs");
+const linkSizeMap = {
+  M: "M",
+  S: "S"
+};
+const iconSizeMap = {
+  M: "L",
+  S: "M"
+};
+const linkIconSizeMap = {
+  M: "S",
+  S: "S"
+};
+const Content = ({
+  icon: Icon,
+  size,
+  children,
+  external
+}) => {
+  return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: [Icon && jsxRuntime.jsxRuntimeExports.jsx(Icon, {
+      size: iconSizeMap[size],
+      customColor: "currentColor"
+    }), typeof children === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Link_style.StyledLinkText, {
+      size: linkSizeMap[size],
+      component: "span",
+      ellipsis: true,
+      tooltipOnEllipsis: true,
+      children
+    }) : children, external && jsxRuntime.jsxRuntimeExports.jsx(Link_style.ExternalArrow, {
+      size: linkIconSizeMap[size],
+      customColor: "currentColor"
+    })]
+  });
+};
+exports.Content = Content;

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

@@ -0,0 +1,2 @@
+import { LinkContentProps } from './Content.types';
+export declare const Content: ({ icon: Icon, size, children, external }: LinkContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Link/components/Content/Content.js

@@ -0,0 +1,39 @@
+import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
+import { StyledLinkText, ExternalArrow } from "../../Link.style.js";
+const linkSizeMap = {
+  M: "M",
+  S: "S"
+};
+const iconSizeMap = {
+  M: "L",
+  S: "M"
+};
+const linkIconSizeMap = {
+  M: "S",
+  S: "S"
+};
+const Content = ({
+  icon: Icon,
+  size,
+  children,
+  external
+}) => {
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [Icon && jsxRuntimeExports.jsx(Icon, {
+      size: iconSizeMap[size],
+      customColor: "currentColor"
+    }), typeof children === "string" ? jsxRuntimeExports.jsx(StyledLinkText, {
+      size: linkSizeMap[size],
+      component: "span",
+      ellipsis: true,
+      tooltipOnEllipsis: true,
+      children
+    }) : children, external && jsxRuntimeExports.jsx(ExternalArrow, {
+      size: linkIconSizeMap[size],
+      customColor: "currentColor"
+    })]
+  });
+};
+export {
+  Content
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { IconType } from '@redislabsdev/redis-ui-icons/monochrome';
+import { LinkSize } from '../../Link.types';
+export type LinkContentProps = {
+    icon: IconType | undefined;
+    size: LinkSize;
+    external: boolean | undefined;
+    children: ReactNode;
+};

package/dist/Link/index.d.ts

@@ -1,2 +1,4 @@
 export { default as Link } from './Link';
 export * from './Link.types';
+export { LinkStyler } from './LinkStyler/LinkStyler';
+export * from './LinkStyler/LinkStyler.types';

package/dist/Menu/Menu.d.ts

@@ -5,16 +5,20 @@ declare const Menu: (({ disabled, ...restProps }: MenuProps) => import("react/js
         Arrow: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element;
     };
     Content: import("react").ForwardRefExoticComponent<import("./components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
-        Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: import(".").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+        Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import(".").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
             Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
             Icon: ({ icon, ...props }: import("./components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
             SubHead: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
-            Compose: ({ isSelected, variant, onClick, ...restProps }: import("./components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+            Compose: ({ isSelected, selected, onClick, ...restProps }: import("./components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
             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;
-        Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("./components/Content/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+        DropdownArrow: (props: import("./components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+        Label: (({ children, text, icon, ...restProps }: import(".").MenuLabelProps & import(".").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
+            Text: ({ tooltipOnEllipsis, ...restProps }: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+            Icon: ({ icon, ...props }: import("./components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
+            Compose: (props: import("./components/Content/components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => 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

@@ -1,16 +1,20 @@
 /// <reference types="react" />
 import { MenuContentProps } from './Content.types';
 declare const Content: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: import("../..").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../..").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
         Text: ({ tooltipOnEllipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
         Icon: ({ icon, ...props }: import("./components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
         SubHead: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
-        Compose: ({ isSelected, variant, onClick, ...restProps }: import("./components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ isSelected, selected, onClick, ...restProps }: import("./components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         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;
-    Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("./components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+    DropdownArrow: (props: import("./components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Label: (({ children, text, icon, ...restProps }: import("../..").MenuLabelProps & import("../..").RestMenuLabelProps) => import("react/jsx-runtime").JSX.Element) & {
+        Text: ({ tooltipOnEllipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
+        Icon: ({ icon, ...props }: import("./components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("./components/Label/components/Compose/Compose.types").MenuLabelComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element;
+    };
     Separator: (props: import("./components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Content;

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/Compose/Compose.cjs

@@ -3,16 +3,15 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
 const Compose_style = require("./Compose.style.cjs");
 const Compose = ({
-  isSelected = false,
-  variant = "primary",
+  isSelected,
+  selected = isSelected,
   onClick,
   ...restProps
 }) => jsxRuntime.jsxRuntimeExports.jsx(Compose_style.MenuItemContainer, {
-  variant,
   ...restProps,
-  "data-selected": isSelected ? "" : void 0,
-  onClick: isSelected || restProps.disabled ? void 0 : onClick,
-  ...isSelected && !restProps.disabled ? {
+  "data-selected": selected ? "" : void 0,
+  onClick: selected || restProps.disabled ? void 0 : onClick,
+  ...selected && !restProps.disabled ? {
     "data-disabled": void 0,
     disabled: true
   } : null

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
 import { MenuItemComposeProps } from './Compose.types';
-declare const Compose: ({ isSelected, variant, onClick, ...restProps }: MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Compose: ({ isSelected, selected, onClick, ...restProps }: MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.js

@@ -1,16 +1,15 @@
 import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
 import { MenuItemContainer } from "./Compose.style.js";
 const Compose = ({
-  isSelected = false,
-  variant = "primary",
+  isSelected,
+  selected = isSelected,
   onClick,
   ...restProps
 }) => jsxRuntimeExports.jsx(MenuItemContainer, {
-  variant,
   ...restProps,
-  "data-selected": isSelected ? "" : void 0,
-  onClick: isSelected || restProps.disabled ? void 0 : onClick,
-  ...isSelected && !restProps.disabled ? {
+  "data-selected": selected ? "" : void 0,
+  onClick: selected || restProps.disabled ? void 0 : onClick,
+  ...selected && !restProps.disabled ? {
     "data-disabled": void 0,
     disabled: true
   } : null

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.style.cjs

@@ -36,7 +36,8 @@ const getMenuItemStatesStyle = (stateStyles) => {
 };
 const getMenuItemContainerStyles = ({
   theme,
-  variant = "primary"
+  variant = "primary",
+  shift = 0
 }) => {
   const styles = theme.components.menu.item;
   return _styled.css`
@@ -51,8 +52,11 @@ const getMenuItemContainerStyles = ({
       cursor: default;
     }
 
-    padding: ${styles.padding};
     gap: ${styles.gap};
+    padding: ${styles.padding};
+    padding-inline-start: ${shift ? `calc(
+      ${css_utils.splitDimensionsX4(styles.padding || "0").left} +
+        (${typeof shift === "number" ? `${shift} * ${styles.levelOffset}` : shift}))` : void 0};
 
     ${getMenuItemStatesStyle(styles.variants[variant])}
   `;
@@ -61,10 +65,12 @@ const MenuItemContainer = _styled__default.default(index.Item).withConfig({
   displayName: "Composestyle__MenuItemContainer",
   componentId: "RedisUI__sc-j9uaqg-0"
 })(["", ";"], ({
-  variant
+  variant,
+  shift
 }) => getMenuItemContainerStyles({
   theme: redisUiStyles.useTheme(),
-  variant
+  variant,
+  shift
 }));
 exports.MenuItemContainer = MenuItemContainer;
 exports.getMenuItemContainerStyles = getMenuItemContainerStyles;

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

@@ -1,10 +1,14 @@
 /// <reference types="react" />
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { Theme } from '@redislabsdev/redis-ui-styles';
-import { MenuItemComposeProps, MenuItemComposeVariants } from './Compose.types';
+import { MenuItemVariants } from './Compose.types';
 export declare const getMenuItemStatesStyle: (stateStyles: Theme['components']['menu']['item']['variants']['primary']) => import("styled-components").FlattenSimpleInterpolation;
-export declare const getMenuItemContainerStyles: ({ theme, variant }: {
+export declare const getMenuItemContainerStyles: ({ theme, variant, shift }: {
     theme: Theme;
-    variant?: "primary" | "destructive" | undefined;
+    variant?: MenuItemVariants | undefined;
+    shift?: string | number | undefined;
 }) => import("styled-components").FlattenSimpleInterpolation;
-export declare const MenuItemContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, Required<Pick<MenuItemComposeProps, "variant">>, never>;
+export declare const MenuItemContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>, any, {
+    variant?: MenuItemVariants | undefined;
+    shift?: string | number | undefined;
+}, never>;

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.style.js

@@ -1,7 +1,7 @@
 import _styled, { css } from "styled-components";
 import { Item as Item2 } from "../../../../../../../node_modules/@radix-ui/react-dropdown-menu/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { styleFromTokens } from "../../../../../../../Helpers/css.utils.js";
+import { splitDimensionsX4, styleFromTokens } from "../../../../../../../Helpers/css.utils.js";
 import { bgColorMap, textColorMap } from "../../../../../../../Button/Button.style.utils.js";
 const getMenuItemStatesStyle = (stateStyles) => {
   var _a;
@@ -32,7 +32,8 @@ const getMenuItemStatesStyle = (stateStyles) => {
 };
 const getMenuItemContainerStyles = ({
   theme,
-  variant = "primary"
+  variant = "primary",
+  shift = 0
 }) => {
   const styles = theme.components.menu.item;
   return css`
@@ -47,8 +48,11 @@ const getMenuItemContainerStyles = ({
       cursor: default;
     }
 
-    padding: ${styles.padding};
     gap: ${styles.gap};
+    padding: ${styles.padding};
+    padding-inline-start: ${shift ? `calc(
+      ${splitDimensionsX4(styles.padding || "0").left} +
+        (${typeof shift === "number" ? `${shift} * ${styles.levelOffset}` : shift}))` : void 0};
 
     ${getMenuItemStatesStyle(styles.variants[variant])}
   `;
@@ -57,10 +61,12 @@ const MenuItemContainer = _styled(Item2).withConfig({
   displayName: "Composestyle__MenuItemContainer",
   componentId: "RedisUI__sc-j9uaqg-0"
 })(["", ";"], ({
-  variant
+  variant,
+  shift
 }) => getMenuItemContainerStyles({
   theme: useTheme(),
-  variant
+  variant,
+  shift
 }));
 export {
   MenuItemContainer,

package/dist/Menu/components/Content/components/Item/Components/Compose/Compose.types.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from 'react';
-export declare const menuItemComposeVariants: readonly ["primary", "destructive"];
-export type MenuItemComposeVariants = (typeof menuItemComposeVariants)[number];
+export type MenuItemVariants = 'primary' | 'destructive';
 export interface MenuItemComposeProps extends HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     disabled?: boolean;
     onSelect?: () => void;
+    /** @deprecated use `selected` */
     isSelected?: boolean;
-    variant?: MenuItemComposeVariants;
+    selected?: boolean;
+    variant?: MenuItemVariants;
+    shift?: number | string;
 }

package/dist/Menu/components/Content/components/Item/Components/Text/Text.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
-const Text_style = require("./Text.style.cjs");
+const Typography = require("../../../../../../../Typography/Typography.cjs");
 const Text = ({
   tooltipOnEllipsis = true,
   ...restProps
-}) => jsxRuntime.jsxRuntimeExports.jsx(Text_style.MenuItemText, {
+}) => jsxRuntime.jsxRuntimeExports.jsx(Typography.default.Body, {
   tooltipOnEllipsis,
+  ellipsis: true,
   ...restProps
 });
 exports.default = Text;

package/dist/Menu/components/Content/components/Item/Components/Text/Text.js

@@ -1,10 +1,11 @@
 import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { MenuItemText } from "./Text.style.js";
+import Typography from "../../../../../../../Typography/Typography.js";
 const Text = ({
   tooltipOnEllipsis = true,
   ...restProps
-}) => jsxRuntimeExports.jsx(MenuItemText, {
+}) => jsxRuntimeExports.jsx(Typography.Body, {
   tooltipOnEllipsis,
+  ellipsis: true,
   ...restProps
 });
 export {

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

@@ -12,8 +12,8 @@ const Item = Object.assign(({
   icon,
   subHead,
   description,
-  isSelected = false,
-  variant = "primary",
+  isSelected,
+  selected = isSelected,
   ...restProps
 }) => {
   const firstElement = subHead ? (
@@ -26,11 +26,10 @@ const Item = Object.assign(({
   });
   const lastElement = subHead ? icon && jsxRuntime.jsxRuntimeExports.jsx(Item.Icon, {
     icon
-  }) : isSelected && jsxRuntime.jsxRuntimeExports.jsx(Item.Check, {});
+  }) : selected && jsxRuntime.jsxRuntimeExports.jsx(Item.Check, {});
   const hasSplit = Boolean(subHead && icon || description);
   return jsxRuntime.jsxRuntimeExports.jsxs(Item.Compose, {
-    isSelected,
-    variant,
+    selected,
     ...restProps,
     children: [firstElement, text && jsxRuntime.jsxRuntimeExports.jsx(Item.Text, {
       children: text

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

@@ -1,9 +1,9 @@
 import { MenuItemProps } from './Item.types';
-declare const Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
     Text: ({ tooltipOnEllipsis, ...restProps }: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     Icon: ({ icon, ...props }: import("./Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
     SubHead: (props: import("../../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
-    Compose: ({ isSelected, variant, onClick, ...restProps }: import("./Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ isSelected, selected, onClick, ...restProps }: import("./Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
     Check: ({ icon, ...restProps }: import("./Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
     Split: ({ minWidth, ...props }: import("./Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -10,8 +10,8 @@ const Item = Object.assign(({
   icon,
   subHead,
   description,
-  isSelected = false,
-  variant = "primary",
+  isSelected,
+  selected = isSelected,
   ...restProps
 }) => {
   const firstElement = subHead ? (
@@ -24,11 +24,10 @@ const Item = Object.assign(({
   });
   const lastElement = subHead ? icon && jsxRuntimeExports.jsx(Item.Icon, {
     icon
-  }) : isSelected && jsxRuntimeExports.jsx(Item.Check, {});
+  }) : selected && jsxRuntimeExports.jsx(Item.Check, {});
   const hasSplit = Boolean(subHead && icon || description);
   return jsxRuntimeExports.jsxs(Item.Compose, {
-    isSelected,
-    variant,
+    selected,
     ...restProps,
     children: [firstElement, text && jsxRuntimeExports.jsx(Item.Text, {
       children: text

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

@@ -1,17 +1,20 @@
 import { ReactNode } from 'react';
 import { IconType } from '@redislabsdev/redis-ui-icons';
-import { MenuItemComposeProps, MenuItemComposeVariants } from './Components/Compose/Compose.types';
-export declare const menuItemVariants: readonly ["primary", "destructive"];
-export type MenuItemVariants = MenuItemComposeVariants;
-export type MenuItemProps = Omit<MenuItemComposeProps, 'children' | 'isSelected'> & {
+import { MenuItemComposeProps } from './Components/Compose/Compose.types';
+export type { MenuItemVariants } from './Components/Compose/Compose.types';
+export type MenuItemProps = Omit<MenuItemComposeProps, 'children' | 'isSelected' | 'selected'> & {
     icon?: IconType;
     description?: ReactNode;
 } & ({
     text: ReactNode;
+    /** @deprecated use `selected` */
     isSelected?: boolean;
+    selected?: boolean;
     subHead?: undefined;
 } | {
     text?: ReactNode;
+    /** @deprecated use `selected` */
     isSelected?: false;
+    selected?: false;
     subHead: ReactNode;
 });

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

@@ -1,18 +1,24 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const Label_style = require("./Label.style.cjs");
-const Label = ({
+const Text = require("./components/Text/Text.cjs");
+const Icon = require("../Item/Components/Icon/Icon.cjs");
+const Compose = require("./components/Compose/Compose.cjs");
+const Label = Object.assign(({
   children,
-  variant = "semiBold",
-  tooltipOnEllipsis = true,
+  text = children,
+  icon,
   ...restProps
-}) => {
-  return jsxRuntime.jsxRuntimeExports.jsx(Label_style.MenuContentLabel, {
-    variant,
-    tooltipOnEllipsis,
-    ...restProps,
-    children
-  });
-};
+}) => jsxRuntime.jsxRuntimeExports.jsxs(Label.Compose, {
+  ...restProps,
+  children: [icon && jsxRuntime.jsxRuntimeExports.jsx(Label.Icon, {
+    icon
+  }), typeof text === "string" && text ? jsxRuntime.jsxRuntimeExports.jsx(Label.Text, {
+    children: text
+  }) : text]
+}), {
+  Text: Text.default,
+  Icon: Icon.default,
+  Compose: Compose.default
+});
 exports.default = Label;