@redis-ui/components 38.0.0 → 38.6.0

package/dist/AppSelectionMenu/components/Item/Item.styles.d.ts

@@ -3,4 +3,4 @@ export declare const AppSelectorItem: import("styled-components").StyledComponen
 export declare const AppSelectionMenuItem: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const Label: 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 Label: 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/AutoCompleteSelect/AutoCompleteSelect.style.d.ts

@@ -9,7 +9,7 @@ export declare const ContentContainer: import("styled-components").StyledCompone
         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;
+    DropdownArrow: (props: 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;
     Separator: (props: import("../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {

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/Banner/components/Message/Message.style.d.ts

@@ -1 +1 @@
-export declare const Message: 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 Message: 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/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;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;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/Checkbox/components/Label/Label.style.d.ts

@@ -3,4 +3,4 @@ export declare const CheckboxLabel: import("styled-components").StyledComponent<
     $checked: CheckedType;
     $variant: CheckboxVariants;
 }, 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/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/ChipList/Components/ExtraItem.style.d.ts

@@ -1,4 +1,4 @@
 export declare const ExtraListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ExtraListItem: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ExtraListItem: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     $disabled?: boolean | undefined;
 }, never>;

package/dist/DatePicker/DatePicker.d.ts

@@ -1,3 +1,6 @@
 import { DatePickerProps } from './DatePicker.types';
+/**
+ * @deprecated This component will be removed in future versions
+ */
 declare const DatePicker: ({ fromYear, toYear, onSingleSelect, selectedDay, showSelected, ...restProps }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
 export default DatePicker;

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/Drawer/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/Filters/components/MultiSelectFilter/MultiSelectFilter.styles.d.ts

@@ -8,7 +8,7 @@ export declare const MenuContent: import("styled-components").StyledComponent<im
         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;
+    DropdownArrow: (props: 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;
     Separator: (props: import("../../../Menu/components/Content/components/Separator/Separator.types").SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;

package/dist/FormField/components/AdditionalText/AdditionalText.style.d.ts

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

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/Inputs/Input/Input.d.ts

@@ -10,7 +10,7 @@ declare const Input: import("react").ForwardRefExoticComponent<import("../compon
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/NumericInput/NumericInput.d.ts

@@ -12,7 +12,7 @@ declare const NumericInput: import("react").ForwardRefExoticComponent<import("..
     }) => import("react/jsx-runtime").JSX.Element;
     LoadingIndicator: ({ loading, ...restProps }: import("../components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../components/InputTag/InputTag.types").InputTagProps & import("../components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
         readOnly: boolean;
     }, "readOnly">;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../..").IconButtonProps> & import("../components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Inputs/QuantityCounter/QuantityCounter.d.ts

@@ -18,7 +18,7 @@ declare const QuantityCounter: import("react").ForwardRefExoticComponent<import(
         }, "autoSize">;
         ValueLabel: ({ children }: import("./components/InputGroup/components/ValueLabel/ValueLabel.types").ValueLabelProps) => import("react/jsx-runtime").JSX.Element | null;
     };
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/QuantityCounter/components/InputGroup/components/ValueLabel/ValueLabel.style.d.ts

@@ -1 +1 @@
-export declare const ValueLabel: 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 ValueLabel: 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/Inputs/TextArea/TextArea.d.ts

@@ -15,7 +15,7 @@ declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import(".
         readonlyProps?: import("react").HTMLAttributes<HTMLElement> | undefined;
     }) => import("react/jsx-runtime").JSX.Element;
     Tag: import("react").ForwardRefExoticComponent<import("./components/TextAreaTag/TextAreaTag").RestTextAreaTagProps & import("react").RefAttributes<HTMLTextAreaElement>>;
-    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+    ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
         readOnly: boolean;
     }, "readOnly">;
 };

package/dist/Inputs/TextArea/components/Compose/Compose.style.d.ts

@@ -7,6 +7,6 @@ export declare const TextAreaCompose: import("styled-components").StyledComponen
 } & {
     readOnly?: boolean | undefined;
 }, never>;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     readOnly: boolean;
 }, "readOnly">;

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/Compose/Compose.style.d.ts

@@ -4,6 +4,6 @@ export declare const CommonInputCompose: import("styled-components").StyledCompo
 } & {
     $variant: InputVariant;
 }, "data-status">;
-export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, component, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
+export declare const ReadonlyValue: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element, any, {
     readOnly: boolean;
 }, "readOnly">;

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,

package/dist/Label/components/Optional/Optional.style.d.ts

@@ -1 +1 @@
-export declare const Optional: 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 Optional: 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/Label/components/Required/Required.style.d.ts

@@ -1 +1 @@
-export declare const Required: 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 Required: 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/Label/components/Text/Text.style.d.ts

@@ -1,3 +1,3 @@
-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, {
+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, {
     $readonly?: boolean | undefined;
 }, never>;