@redis-ui/components 38.1.4 → 39.0.0

package/dist/AutoCompleteSelect/AutoCompleteSelect.cjs

@@ -81,7 +81,7 @@ const AutoCompleteSelect = React__default.default.forwardRef(({
       onInteractOutside: onClickOutside,
       ref: contentRef,
       children: [!isSuggestedOptionsEmpty && jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Content.Label, {
-        children: optionsLabel
+        text: optionsLabel
       }), suggestedOptions.map((item, index) => jsxRuntime.jsxRuntimeExports.jsx(AutoCompleteSelect_style.Item, {
         role: "button",
         onClick: () => onItemClick(item.value),

package/dist/AutoCompleteSelect/AutoCompleteSelect.js

@@ -77,7 +77,7 @@ const AutoCompleteSelect = React__default.forwardRef(({
       onInteractOutside: onClickOutside,
       ref: contentRef,
       children: [!isSuggestedOptionsEmpty && jsxRuntimeExports.jsx(Menu.Content.Label, {
-        children: optionsLabel
+        text: optionsLabel
       }), suggestedOptions.map((item, index) => jsxRuntimeExports.jsx(Item, {
         role: "button",
         onClick: () => onItemClick(item.value),

package/dist/AutoCompleteSelect/AutoCompleteSelect.style.d.ts

@@ -1,16 +1,20 @@
 /// <reference types="react" />
 export declare const Item: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Menu/components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: import("../Menu").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../Menu").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("../Menu/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("../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ isSelected, selected, onClick, ...restProps }: import("../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Check: ({ icon, ...restProps }: import("../Menu/components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("../Menu/components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
-    DropdownArrow: ({ ...restProps }: import("../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("../Menu/components/Content/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+    DropdownArrow: (props: import("../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Label: (({ children, text, icon, ...restProps }: import("../Menu").MenuLabelProps & import("../Menu").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("../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("../Menu/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("../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {
     $contentMaxHeight?: string | undefined;

package/dist/Badge/Badge.cjs

@@ -7,12 +7,14 @@ const Typography = require("../Typography/Typography.cjs");
 const Badge = ({
   label,
   variant = "default",
+  color,
   withIcon,
   icon,
   ...restBadgeProps
 }) => {
   return jsxRuntime.jsxRuntimeExports.jsxs(Badge_style.Badge, {
-    variant,
+    "$variant": variant,
+    "$color": color,
     ...restBadgeProps,
     children: [withIcon && jsxRuntime.jsxRuntimeExports.jsx(BadgeIcon.BadgeIcon, {
       variant,

package/dist/Badge/Badge.d.ts

@@ -1,3 +1,3 @@
 import { BadgeProps } from './Badge.types';
-declare const Badge: ({ label, variant, withIcon, icon, ...restBadgeProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ label, variant, color, withIcon, icon, ...restBadgeProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export default Badge;

package/dist/Badge/Badge.js

@@ -5,12 +5,14 @@ import Typography from "../Typography/Typography.js";
 const Badge = ({
   label,
   variant = "default",
+  color,
   withIcon,
   icon,
   ...restBadgeProps
 }) => {
   return jsxRuntimeExports.jsxs(Badge$2, {
-    variant,
+    "$variant": variant,
+    "$color": color,
     ...restBadgeProps,
     children: [withIcon && jsxRuntimeExports.jsx(BadgeIcon, {
       variant,

package/dist/Badge/Badge.style.cjs

@@ -25,21 +25,23 @@ const Badge = _styled__default.default.div.withConfig({
   displayName: "Badgestyle__Badge",
   componentId: "RedisUI__sc-1kmlncn-0"
 })(["", " ", ";"], () => getBaseBadgeStyle(redisUiStyles.useTheme()), ({
-  variant
+  $variant,
+  $color: badgeColor
 }) => {
   const {
     backgroundColor,
     color,
     borderColor,
     iconColor
-  } = getVariantStyle(redisUiStyles.useTheme(), variant);
+  } = getVariantStyle(redisUiStyles.useTheme(), $variant);
+  const contrastColor = badgeColor && redisUiStyles.withContrast(badgeColor);
   return _styled.css`
-      background-color: ${backgroundColor};
-      color: ${color};
-      border-color: ${borderColor};
+      background-color: ${badgeColor || backgroundColor};
+      color: ${contrastColor || color};
+      border-color: ${contrastColor || borderColor};
 
       svg {
-        color: ${iconColor};
+        color: ${contrastColor || iconColor};
       }
     `;
 });

package/dist/Badge/Badge.style.d.ts

@@ -1,4 +1,7 @@
 import { Theme } from '@redislabsdev/redis-ui-styles';
-import { BadgeProps, BadgeVariants } from './Badge.types';
+import { BadgeVariants } from './Badge.types';
 export declare const getVariantStyle: (theme: Theme, variant: BadgeVariants) => import("@redislabsdev/redis-ui-styles").BadgeVariantStyle;
-export declare const Badge: import("styled-components").StyledComponent<"div", any, Required<Pick<BadgeProps, "variant">>, never>;
+export declare const Badge: import("styled-components").StyledComponent<"div", any, {
+    $color?: string | undefined;
+    $variant: BadgeVariants;
+}, never>;

package/dist/Badge/Badge.style.js

@@ -1,5 +1,5 @@
 import _styled, { css } from "styled-components";
-import { useTheme } from "@redislabsdev/redis-ui-styles";
+import { useTheme, withContrast } from "@redislabsdev/redis-ui-styles";
 const getVariantStyle = (theme, variant) => theme.components.badge.variants[variant] || theme.components.badge.variants.default;
 const getBaseBadgeStyle = ({
   components: {
@@ -21,21 +21,23 @@ const Badge = _styled.div.withConfig({
   displayName: "Badgestyle__Badge",
   componentId: "RedisUI__sc-1kmlncn-0"
 })(["", " ", ";"], () => getBaseBadgeStyle(useTheme()), ({
-  variant
+  $variant,
+  $color: badgeColor
 }) => {
   const {
     backgroundColor,
     color,
     borderColor,
     iconColor
-  } = getVariantStyle(useTheme(), variant);
+  } = getVariantStyle(useTheme(), $variant);
+  const contrastColor = badgeColor && withContrast(badgeColor);
   return css`
-      background-color: ${backgroundColor};
-      color: ${color};
-      border-color: ${borderColor};
+      background-color: ${badgeColor || backgroundColor};
+      color: ${contrastColor || color};
+      border-color: ${contrastColor || borderColor};
 
       svg {
-        color: ${iconColor};
+        color: ${contrastColor || iconColor};
       }
     `;
 });

package/dist/Badge/Badge.types.d.ts

@@ -9,4 +9,5 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     withIcon?: boolean;
     theme?: Theme;
     icon?: IconType;
+    color?: string;
 }

package/dist/BoxSelectionGroup/BoxSelectionGroup.style.cjs

@@ -8,5 +8,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const BoxSelectionGroupItem = _styled__default.default(Item.default).withConfig({
   displayName: "BoxSelectionGroupstyle__BoxSelectionGroupItem",
   componentId: "RedisUI__sc-xvq1rx-0"
-})(["gap:", ";flex-direction:column;align-items:center;"], () => redisUiStyles.useTheme().components.boxSelectionGroup.defaultItem.gap);
+})(["gap:", ";display:flex;flex-direction:column;align-items:center;justify-content:center;"], () => redisUiStyles.useTheme().components.boxSelectionGroup.defaultItem.gap);
 exports.BoxSelectionGroupItem = BoxSelectionGroupItem;

package/dist/BoxSelectionGroup/BoxSelectionGroup.style.js

@@ -4,7 +4,7 @@ import Item from "./components/Item/Item.js";
 const BoxSelectionGroupItem = _styled(Item).withConfig({
   displayName: "BoxSelectionGroupstyle__BoxSelectionGroupItem",
   componentId: "RedisUI__sc-xvq1rx-0"
-})(["gap:", ";flex-direction:column;align-items:center;"], () => useTheme().components.boxSelectionGroup.defaultItem.gap);
+})(["gap:", ";display:flex;flex-direction:column;align-items:center;justify-content:center;"], () => useTheme().components.boxSelectionGroup.defaultItem.gap);
 export {
   BoxSelectionGroupItem
 };

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.cjs

@@ -11,6 +11,7 @@ const React__default = /* @__PURE__ */ _interopDefault(React);
 const Compose = React__default.default.forwardRef(({
   children,
   box,
+  tooltipProps,
   ...restProps
 }, ref) => {
   const {
@@ -28,8 +29,9 @@ const Compose = React__default.default.forwardRef(({
     value: itemContext,
     children: jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
       content: box.disabledMessage,
-      disabled: !box.disabledMessage,
+      disabled: !box.disabled,
       placement: "bottom",
+      ...tooltipProps,
       children: jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.BoxSelectionGroupItemCompose, {
         onPressedChange: () => toggleSelection(box),
         pressed: isChecked,

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.js

@@ -7,6 +7,7 @@ import Tooltip from "../../../../../Tooltip/Tooltip.js";
 const Compose = React__default.forwardRef(({
   children,
   box,
+  tooltipProps,
   ...restProps
 }, ref) => {
   const {
@@ -24,8 +25,9 @@ const Compose = React__default.forwardRef(({
     value: itemContext,
     children: jsxRuntimeExports.jsx(Tooltip, {
       content: box.disabledMessage,
-      disabled: !box.disabledMessage,
+      disabled: !box.disabled,
       placement: "bottom",
+      ...tooltipProps,
       children: jsxRuntimeExports.jsxs(BoxSelectionGroupItemCompose, {
         onPressedChange: () => toggleSelection(box),
         pressed: isChecked,

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.cjs

@@ -45,7 +45,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled__default.default(index.Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderRadius, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderWidth, () => redisUiStyles.useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.style.js

@@ -41,7 +41,7 @@ const getStateStyle = (theme, isChecked = false) => {
 const BoxSelectionGroupItemCompose = _styled(Root).withConfig({
   displayName: "Composestyle__BoxSelectionGroupItemCompose",
   componentId: "RedisUI__sc-17mo3lu-1"
-})(["align-items:unset;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
+})(["align-items:unset;justify-content:center;line-height:1.25;text-align:unset;position:relative;padding-inline:0;padding-block:0;flex:1;white-space:nowrap;cursor:", ";overflow:hidden;transition:all 0.1s;border-radius:", ";border-width:", ";border-style:", ";", ";", ";"], ({
   disabled
 }) => !disabled ? "pointer" : "not-allowed", () => useTheme().components.boxSelectionGroup.item.borderRadius, () => useTheme().components.boxSelectionGroup.item.borderWidth, () => useTheme().components.boxSelectionGroup.item.borderStyle, ({
   pressed

package/dist/BoxSelectionGroup/components/Item/components/Compose/Compose.types.d.ts

@@ -1,6 +1,8 @@
+import { TooltipContentProps } from 'src/Tooltip/components/Content/Content.types';
 import { BoxSelectionGroupBox } from '../../../../BoxSelectionGroup.types';
 import { ComposeElementProps } from '../../../../../Helpers/common.types';
 export type BoxSelectionGroupItemComposeProps = {
     box: BoxSelectionGroupBox;
+    tooltipProps?: Omit<TooltipContentProps, 'content'>;
 };
 export type RestBoxSelectionGroupItemComposeProps = ComposeElementProps<HTMLButtonElement>;

package/dist/Checkbox/components/Indicator/Indicator.style.cjs

@@ -9,7 +9,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const CheckboxIndicator = _styled__default.default(index.Root).withConfig({
   displayName: "Indicatorstyle__CheckboxIndicator",
   componentId: "RedisUI__sc-4xg31h-0"
-})(["flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:transparent;", ";", " ", ""], () => {
+})(["flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:transparent;", ";&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}", " ", ""], () => {
   const style = redisUiStyles.useTheme().components.checkbox;
   return _styled.css`
       width: ${style.width};

package/dist/Checkbox/components/Indicator/Indicator.style.js

@@ -5,7 +5,7 @@ import { getButtonStatesStyle, bgColorMap, borderColorMap } from "../../../Butto
 const CheckboxIndicator = _styled(Root).withConfig({
   displayName: "Indicatorstyle__CheckboxIndicator",
   componentId: "RedisUI__sc-4xg31h-0"
-})(["flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:transparent;", ";", " ", ""], () => {
+})(["flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:transparent;", ";&:not(:disabled){cursor:pointer;}&:disabled{cursor:not-allowed;}", " ", ""], () => {
   const style = useTheme().components.checkbox;
   return css`
       width: ${style.width};

package/dist/Chip/components/CloseButton/CloseButton.style.cjs

@@ -7,7 +7,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const CloseButton = _styled__default.default.button.withConfig({
   displayName: "CloseButtonstyle__CloseButton",
   componentId: "RedisUI__sc-1pnn9du-0"
-})(["", ";flex:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
+})(["", ";flex:none;border:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
   $size,
   $variant
 }) => {

package/dist/Chip/components/CloseButton/CloseButton.style.js

@@ -3,7 +3,7 @@ import { useTheme, getFocusStyle } from "@redislabsdev/redis-ui-styles";
 const CloseButton = _styled.button.withConfig({
   displayName: "CloseButtonstyle__CloseButton",
   componentId: "RedisUI__sc-1pnn9du-0"
-})(["", ";flex:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
+})(["", ";flex:none;border:none;cursor:pointer;background-color:transparent;display:flex;align-items:center;justify-content:center;padding:0;&:hover{background-color:transparent;}", ";"], ({
   $size,
   $variant
 }) => {

package/dist/Drawer/components/Content/Content.cjs

@@ -25,6 +25,14 @@ const Content = React.forwardRef(({
       e.preventDefault();
     }
   };
+  const [ready, setReady] = React.useState(false);
+  React.useEffect(() => {
+    setReady(true);
+  }, []);
+  const nonReadyStyle = !ready && {
+    position: "fixed",
+    opacity: 0
+  } || void 0;
   return jsxRuntime.jsxRuntimeExports.jsx(Content_style.PreventOverflow, {
     children: jsxRuntime.jsxRuntimeExports.jsx(Content_style.DrawerContent, {
       "$zIndex": zIndex,
@@ -33,6 +41,9 @@ const Content = React.forwardRef(({
       onEscapeKeyDown: handleEscapeKeyDown,
       "$isRenderedInsideContainer": isRenderedInsideContainer,
       ...props,
+      ...nonReadyStyle && {
+        style: nonReadyStyle
+      },
       children
     })
   });

package/dist/Drawer/components/Content/Content.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../node_modules/react/jsx-runtime.js";
-import { forwardRef } from "react";
+import { forwardRef, useState, useEffect } from "react";
 import { useDrawerContext } from "../../Drawer.context.js";
 import { PreventOverflow, DrawerContent } from "./Content.style.js";
 const Content = forwardRef(({
@@ -23,6 +23,14 @@ const Content = forwardRef(({
       e.preventDefault();
     }
   };
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    setReady(true);
+  }, []);
+  const nonReadyStyle = !ready && {
+    position: "fixed",
+    opacity: 0
+  } || void 0;
   return jsxRuntimeExports.jsx(PreventOverflow, {
     children: jsxRuntimeExports.jsx(DrawerContent, {
       "$zIndex": zIndex,
@@ -31,6 +39,9 @@ const Content = forwardRef(({
       onEscapeKeyDown: handleEscapeKeyDown,
       "$isRenderedInsideContainer": isRenderedInsideContainer,
       ...props,
+      ...nonReadyStyle && {
+        style: nonReadyStyle
+      },
       children
     })
   });

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

@@ -8,7 +8,7 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const PreventOverflow = _styled__default.default.div.withConfig({
   displayName: "Contentstyle__PreventOverflow",
   componentId: "RedisUI__sc-19kw0pf-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;"]);
+})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;"]);
 const slideIn = _styled.keyframes`
   from { transform: translateX(100%) };
   to { transform: translateX(0) };

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

@@ -4,7 +4,7 @@ import { useTheme } from "@redislabsdev/redis-ui-styles";
 const PreventOverflow = _styled.div.withConfig({
   displayName: "Contentstyle__PreventOverflow",
   componentId: "RedisUI__sc-19kw0pf-0"
-})(["position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;"]);
+})(["position:absolute;inset:0;width:100%;height:100%;overflow:hidden;"]);
 const slideIn = keyframes`
   from { transform: translateX(100%) };
   to { transform: translateX(0) };

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.styles.d.ts

@@ -1,15 +1,19 @@
 /// <reference types="react" />
 export declare const MenuContent: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Menu/components/Content/Content.types").MenuContentProps & import("react").RefAttributes<HTMLDivElement>> & {
-    Item: (({ text, icon, subHead, description, isSelected, variant, ...restProps }: import("../../../Menu").MenuItemProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: (({ text, icon, subHead, description, isSelected, selected, ...restProps }: import("../../../Menu").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("../../../Menu/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("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ isSelected, selected, onClick, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Check: ({ icon, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Check/Check.types").CheckProps) => import("react/jsx-runtime").JSX.Element;
         Split: ({ minWidth, ...props }: import("../../../Menu/components/Content/components/Item/Components/Split/Split.types").SplitProps) => import("react/jsx-runtime").JSX.Element;
     };
-    DropdownArrow: ({ ...restProps }: import("../../../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children, variant, tooltipOnEllipsis, ...restProps }: import("../../../Menu/components/Content/components/Label/Label.types").LabelProps) => import("react/jsx-runtime").JSX.Element;
+    DropdownArrow: (props: import("../../../Menu/components/Content/components/DropdownArrow/DropdownArrow.types").DropdownArrowProps) => import("react/jsx-runtime").JSX.Element;
+    Label: (({ children, text, icon, ...restProps }: import("../../../Menu").MenuLabelProps & import("../../../Menu").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("../../../Menu/components/Content/components/Item/Components/Icon/Icon.types").MenuIconProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: (props: import("../../../Menu/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("../../../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;
 export declare const MenuTriggerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -17,7 +21,7 @@ export declare const FilterToggleButton: import("styled-components").StyledCompo
     IndicatorCount: ({ count, ...restProps }: import("../../../Button/ToggleButton/components/IndicatorCount/IndicatorCount.types").IndicatorCountTypes) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;
 export declare const MenuOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuOption: import("styled-components").StyledComponent<({ isSelected, variant, onClick, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const MenuOption: import("styled-components").StyledComponent<({ isSelected, selected, onClick, ...restProps }: import("../../../Menu/components/Content/components/Item/Components/Compose/Compose.types").MenuItemComposeProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const OptionsSearch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("../../../Inputs/components/Compose/TextCompose.types").TextInputComposeProps, "readOnly" | "parser" | "formatter"> & import("../../../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps & import("../../../Inputs").RestInputProps & import("react").RefAttributes<HTMLInputElement>> & {
     Compose: ({ value, defaultValue, onChange, parser, formatter, ...restProps }: import("../../../Inputs/components/Compose/CommonCompose.types").CommonInputComposeProps & Omit<import("../../../Inputs/components/Context/InputValueProvider").InputValueProviderProps, "children"> & Omit<import("../../../Helpers/common.types").ComposeElementProps<HTMLDivElement>, "defaultValue" | "onChange"> & {
         readonlyRender?: import("../../../Inputs/components/ReadonlyRender/ReadonlyRender.types").ReadOnlyRenderComponent | undefined;

package/dist/Helpers/UnstyledButtonTrigger.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const UnstyledButtonTrigger = _styled.css(["padding:0;border:none;display:flex;align-items:center;cursor:pointer;line-height:unset;border-radius:unset;font-family:unset;font-size:unset;transition:unset;&,&:disabled,&:hover,&:active{background:none;color:inherit;}"]);
+exports.UnstyledButtonTrigger = UnstyledButtonTrigger;

package/dist/Helpers/UnstyledButtonTrigger.d.ts

@@ -0,0 +1 @@
+export declare const UnstyledButtonTrigger: import("styled-components").FlattenSimpleInterpolation;

package/dist/Helpers/UnstyledButtonTrigger.js

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+const UnstyledButtonTrigger = css(["padding:0;border:none;display:flex;align-items:center;cursor:pointer;line-height:unset;border-radius:unset;font-family:unset;font-size:unset;transition:unset;&,&:disabled,&:hover,&:active{background:none;color:inherit;}"]);
+export {
+  UnstyledButtonTrigger
+};

package/dist/Helpers/css.utils.cjs

@@ -115,11 +115,39 @@ const splitDimensionsX2 = (dimensions) => {
     end: split[1] || split[0]
   };
 };
+const splitDimensionsX4 = (dimensions) => {
+  const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
+  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (split.length > 4) {
+    console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 1-4, received', split.length);
+    return {};
+  }
+  const res = {};
+  if (split.length === 1) {
+    res.top = res.right = res.bottom = res.left = split[0];
+  } else if (split.length === 2) {
+    res.top = res.bottom = split[0];
+    res.right = res.left = split[1];
+  } else if (split.length === 3) {
+    res.top = split[0];
+    res.right = res.left = split[1];
+    res.bottom = split[2];
+  } else if (split.length === 4) {
+    res.top = split[0];
+    res.right = split[1];
+    res.bottom = split[2];
+    res.left = split[3];
+  }
+  res.block = `${res.top} ${res.bottom}`;
+  res.inline = `${res.left} ${res.right}`;
+  return res;
+};
 exports.calcSize = calcSize;
 exports.getRelatedStateSelector = getRelatedStateSelector;
 exports.numToUnit = numToUnit;
 exports.pxToRem = pxToRem;
 exports.splitDimensionsX2 = splitDimensionsX2;
+exports.splitDimensionsX4 = splitDimensionsX4;
 exports.styleFromTokens = styleFromTokens;
 exports.tokenMapMod = tokenMapMod;
 exports.tokenMaps = tokenMaps;

package/dist/Helpers/css.utils.js

@@ -113,12 +113,40 @@ const splitDimensionsX2 = (dimensions) => {
     end: split[1] || split[0]
   };
 };
+const splitDimensionsX4 = (dimensions) => {
+  const split = dimensions == null ? void 0 : dimensions.trim().split(/\s+/g);
+  if (!(split == null ? void 0 : split.length) || !split[0]) return {};
+  if (split.length > 4) {
+    console.warn('Error: splitting dimensions "', dimensions, '" contains incorrect number of entries. Expecting 1-4, received', split.length);
+    return {};
+  }
+  const res = {};
+  if (split.length === 1) {
+    res.top = res.right = res.bottom = res.left = split[0];
+  } else if (split.length === 2) {
+    res.top = res.bottom = split[0];
+    res.right = res.left = split[1];
+  } else if (split.length === 3) {
+    res.top = split[0];
+    res.right = res.left = split[1];
+    res.bottom = split[2];
+  } else if (split.length === 4) {
+    res.top = split[0];
+    res.right = split[1];
+    res.bottom = split[2];
+    res.left = split[3];
+  }
+  res.block = `${res.top} ${res.bottom}`;
+  res.inline = `${res.left} ${res.right}`;
+  return res;
+};
 export {
   calcSize,
   getRelatedStateSelector,
   numToUnit,
   pxToRem,
   splitDimensionsX2,
+  splitDimensionsX4,
   styleFromTokens,
   tokenMapMod,
   tokenMaps

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.style.cjs

@@ -6,21 +6,8 @@ const InputTag_style = require("../../../components/InputTag/InputTag.style.cjs"
 const Compose_style = require("../Compose/Compose.style.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const scrollbar = _styled.css`
-  @media (pointer: fine) {
-    scrollbar-width: auto;
-    @supports not (selector(::-webkit-scrollbar)) {
-      // firefox
-      scrollbar-width: thin;
-      scrollbar-color: ${() => redisUiStyles.useTheme().semantic.color.background.neutral300};
-    }
-    &::-webkit-scrollbar-track {
-      background: ${() => redisUiStyles.useTheme().semantic.color.background.neutral300};
-    }
-  }
-`;
 const TextAreaTag = _styled__default.default.textarea.withConfig({
   displayName: "TextAreaTagstyle__TextAreaTag",
   componentId: "RedisUI__sc-1iajgbb-0"
-})(["", ";height:100%;box-sizing:border-box;background-color:transparent;resize:none;cursor:auto;padding:", ";", ":is([data-status='error'],[data-status='success']) &{padding:", ";}", ";"], InputTag_style.InputStyle, () => redisUiStyles.useTheme().components.input.textarea.padding, Compose_style.TextAreaCompose, () => redisUiStyles.useTheme().components.input.textarea.statusPadding, scrollbar);
+})(["", ";height:100%;box-sizing:border-box;background-color:transparent;resize:none;cursor:auto;padding:", ";", ":is([data-status='error'],[data-status='success']) &{padding:", ";}"], InputTag_style.InputStyle, () => redisUiStyles.useTheme().components.input.textarea.padding, Compose_style.TextAreaCompose, () => redisUiStyles.useTheme().components.input.textarea.statusPadding);
 exports.TextAreaTag = TextAreaTag;

package/dist/Inputs/TextArea/components/TextAreaTag/TextAreaTag.style.js

@@ -1,24 +1,11 @@
-import _styled, { css } from "styled-components";
+import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { InputStyle } from "../../../components/InputTag/InputTag.style.js";
 import { TextAreaCompose } from "../Compose/Compose.style.js";
-const scrollbar = css`
-  @media (pointer: fine) {
-    scrollbar-width: auto;
-    @supports not (selector(::-webkit-scrollbar)) {
-      // firefox
-      scrollbar-width: thin;
-      scrollbar-color: ${() => useTheme().semantic.color.background.neutral300};
-    }
-    &::-webkit-scrollbar-track {
-      background: ${() => useTheme().semantic.color.background.neutral300};
-    }
-  }
-`;
 const TextAreaTag = _styled.textarea.withConfig({
   displayName: "TextAreaTagstyle__TextAreaTag",
   componentId: "RedisUI__sc-1iajgbb-0"
-})(["", ";height:100%;box-sizing:border-box;background-color:transparent;resize:none;cursor:auto;padding:", ";", ":is([data-status='error'],[data-status='success']) &{padding:", ";}", ";"], InputStyle, () => useTheme().components.input.textarea.padding, TextAreaCompose, () => useTheme().components.input.textarea.statusPadding, scrollbar);
+})(["", ";height:100%;box-sizing:border-box;background-color:transparent;resize:none;cursor:auto;padding:", ";", ":is([data-status='error'],[data-status='success']) &{padding:", ";}"], InputStyle, () => useTheme().components.input.textarea.padding, TextAreaCompose, () => useTheme().components.input.textarea.statusPadding);
 export {
   TextAreaTag
 };

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

@@ -28,6 +28,10 @@ const InputStyle = _styled.css`
     }
   }
 
+  &:disabled {
+    cursor: no-drop;
+  }
+
   /* remove background color for Chrome autocomplete */
   &:-webkit-autofill,
   &:-webkit-autofill:hover,

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

@@ -24,6 +24,10 @@ const InputStyle = css`
     }
   }
 
+  &:disabled {
+    cursor: no-drop;
+  }
+
   /* remove background color for Chrome autocomplete */
   &:-webkit-autofill,
   &:-webkit-autofill:hover,