@redis-ui/components 39.0.0 → 39.12.0

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

@@ -15,6 +15,8 @@ const Close = ({
       children: jsxRuntime.jsxRuntimeExports.jsx(Close_style.IconButton, {
         size: "M",
         icon,
+        "aria-label": "close",
+        title: "Close",
         ...buttonProps
       })
     })

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

@@ -13,6 +13,8 @@ const Close = ({
       children: jsxRuntimeExports.jsx(IconButton, {
         size: "M",
         icon,
+        "aria-label": "close",
+        title: "Close",
         ...buttonProps
       })
     })

package/dist/RadioGroup/RadioGroup.d.ts

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

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

@@ -10,6 +10,7 @@ const CollapseIndicator = (props) => {
   if (collapsible) {
     return jsxRuntime.jsxRuntimeExports.jsx(CollapseIndicator_style.CollapseIcon, {
       size: "M",
+      "aria-hidden": true,
       ...props
     });
   }

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

@@ -8,6 +8,7 @@ const CollapseIndicator = (props) => {
   if (collapsible) {
     return jsxRuntimeExports.jsx(CollapseIcon, {
       size: "M",
+      "aria-hidden": true,
       ...props
     });
   }

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

@@ -11,9 +11,7 @@ const Compose = ({
   const {
     collapsible
   } = Section_context.useSectionContext();
-  return jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.SectionHeader, {
-    "$collapsible": collapsible,
-    ...props,
+  const sectionHeader = jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
     children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeaderContent, {
       children
     }), collapsedInfo && jsxRuntime.jsxRuntimeExports.jsx(Compose_style.CollapsedInfoBar, {
@@ -21,5 +19,18 @@ const Compose = ({
       children: collapsedInfo
     })]
   });
+  return collapsible ? jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeader, {
+    ...props,
+    "$collapsible": true,
+    children: sectionHeader
+  }) : jsxRuntime.jsxRuntimeExports.jsx(Compose_style.SectionHeader, {
+    ...props,
+    asChild: true,
+    "aria-expanded": void 0,
+    type: void 0,
+    children: jsxRuntime.jsxRuntimeExports.jsx("div", {
+      children: sectionHeader
+    })
+  });
 };
 exports.Compose = Compose;

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

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import { SectionHeader, SectionHeaderContent, CollapsedInfoBar } from "./Compose.style.js";
+import { SectionHeaderContent, CollapsedInfoBar, SectionHeader } from "./Compose.style.js";
 import { useSectionContext } from "../../../../Section.context.js";
 const Compose = ({
   children,
@@ -9,9 +9,7 @@ const Compose = ({
   const {
     collapsible
   } = useSectionContext();
-  return jsxRuntimeExports.jsxs(SectionHeader, {
-    "$collapsible": collapsible,
-    ...props,
+  const sectionHeader = jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
     children: [jsxRuntimeExports.jsx(SectionHeaderContent, {
       children
     }), collapsedInfo && jsxRuntimeExports.jsx(CollapsedInfoBar, {
@@ -19,6 +17,19 @@ const Compose = ({
       children: collapsedInfo
     })]
   });
+  return collapsible ? jsxRuntimeExports.jsx(SectionHeader, {
+    ...props,
+    "$collapsible": true,
+    children: sectionHeader
+  }) : jsxRuntimeExports.jsx(SectionHeader, {
+    ...props,
+    asChild: true,
+    "aria-expanded": void 0,
+    type: void 0,
+    children: jsxRuntimeExports.jsx("div", {
+      children: sectionHeader
+    })
+  });
 };
 export {
   Compose

package/dist/Select/Select.d.ts

@@ -13,10 +13,10 @@ declare const Select: (<TValue extends string = string, TOption extends SelectOp
         Compose: ({ customContainer, id, ...restProps }: import("./components/Trigger/components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("../Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
         Value: <TOption_3 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("./components/Trigger/components/Value/Value.types").SelectTriggerValueProps<TOption_3> & import("./components/Trigger/components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
         ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
-        StatusIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+        StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
         LoadingIndicator: ({ loading, ...restProps }: import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
         Arrow: ({ icon, ...restProps }: import("./components/Trigger/components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
-        ErrorIcon: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+        ErrorIcon: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
     };
     Content: (<TOption_4 extends SelectOption<string> = SelectOption<string>>({ searchable, optionValueRender, optionComponent, maxVisibleItems, virtualized, ...restProps }: import("./components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("./components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
         searchable?: boolean | undefined;

package/dist/Select/components/Content/components/Option/components/Compose/Compose.cjs

@@ -21,6 +21,7 @@ const Compose = React__default.default.forwardRef(({
     "aria-selected": String(isOptionSelected(option)),
     ref,
     "$hidden": option.hidden,
+    "aria-labelledby": void 0,
     children
   });
 });

package/dist/Select/components/Content/components/Option/components/Compose/Compose.js

@@ -17,6 +17,7 @@ const Compose = React__default.forwardRef(({
     "aria-selected": String(isOptionSelected(option)),
     ref,
     "$hidden": option.hidden,
+    "aria-labelledby": void 0,
     children
   });
 });

package/dist/Select/components/Content/components/Search/SelectSearchInput.cjs

@@ -20,6 +20,7 @@ const SelectSearchInput = React__default.default.forwardRef(({
         context.setSearchValue(newSearchValue);
         onChange == null ? void 0 : onChange(newSearchValue);
       },
+      "aria-label": "Search",
       ...restProps
     })
   });

package/dist/Select/components/Content/components/Search/SelectSearchInput.js

@@ -16,6 +16,7 @@ const SelectSearchInput = React__default.forwardRef(({
         context.setSearchValue(newSearchValue);
         onChange == null ? void 0 : onChange(newSearchValue);
       },
+      "aria-label": "Search",
       ...restProps
     })
   });

package/dist/Select/components/Content/components/Search/SelectSearchInput.style.d.ts

@@ -6,9 +6,7 @@ export declare const SelectSearchInput: import("styled-components").StyledCompon
     }) => import("react/jsx-runtime").JSX.Element;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("../../../../..").IconButtonProps> & import("../../../../../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../../../../../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../../../../../Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    StatusIndicator: ({ className, style, size, $customTitles, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className"> & {
-        $customTitles?: boolean | undefined;
-    }) => import("react/jsx-runtime").JSX.Element | null;
+    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
     LoadingIndicator: ({ loading, ...restProps }: import("../../../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     SearchIcon: () => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;

package/dist/Select/components/Trigger/Trigger.cjs

@@ -5,7 +5,7 @@ const Compose = require("./components/Compose/Compose.cjs");
 const Arrow = require("./components/Arrow/Arrow.cjs");
 const Value = require("./components/Value/Value.cjs");
 const LoadingIndicator = require("../../../Inputs/components/LoadingIndicator/LoadingIndicator.cjs");
-const StatusIndicator = require("./components/StatusIndicator/StatusIndicator.cjs");
+const StatusIndicator = require("../../../Inputs/components/StatusIndicator/StatusIndicator.cjs");
 const ResetButton = require("./components/ResetButton/ResetButton.cjs");
 const Trigger = Object.assign(({
   placeholder,

package/dist/Select/components/Trigger/Trigger.d.ts

@@ -9,12 +9,12 @@ declare const Trigger: (<TOption extends SelectOption<string> = SelectOption<str
     Compose: ({ customContainer, id, ...restProps }: import("./components/Compose/Compose.types").SelectTriggerComposeProps & RestSelectTriggerComposeProps & import("../../../Helpers/common.types").ComposeChildrenProps) => import("react/jsx-runtime").JSX.Element;
     Value: <TOption_1 extends SelectOption<string> = SelectOption<string>>({ placeholder, valueRender, ...restProps }: import("./components/Value/Value.types").SelectTriggerValueProps<TOption_1> & import("./components/Value/Value.types").RestSelectTriggerValueProps) => import("react/jsx-runtime").JSX.Element;
     ResetButton: ({ children, title, ...restProps }: import("react").HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element | null;
-    StatusIndicator: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
     LoadingIndicator: ({ loading, ...restProps }: import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../../../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     Arrow: ({ icon, ...restProps }: import("./components/Arrow/Arrow.types").TriggerArrowProps) => import("react/jsx-runtime").JSX.Element;
     /**
      * @deprecated use StatusIndicator instead
      */
-    ErrorIcon: (props: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element;
+    ErrorIcon: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
 };
 export default Trigger;

package/dist/Select/components/Trigger/Trigger.js

@@ -3,7 +3,7 @@ import Compose from "./components/Compose/Compose.js";
 import Arrow from "./components/Arrow/Arrow.js";
 import Value from "./components/Value/Value.js";
 import LoadingIndicator from "../../../Inputs/components/LoadingIndicator/LoadingIndicator.js";
-import StatusIndicator from "./components/StatusIndicator/StatusIndicator.js";
+import StatusIndicator from "../../../Inputs/components/StatusIndicator/StatusIndicator.js";
 import ResetButton from "./components/ResetButton/ResetButton.js";
 const Trigger = Object.assign(({
   placeholder,

package/dist/Select/components/Trigger/components/Arrow/Arrow.cjs

@@ -13,7 +13,7 @@ const Arrow = ({
     Component: icon,
     size: "S",
     customColor: restProps.color ? void 0 : theme.iconColor,
-    title: " ",
+    "aria-hidden": true,
     ...restProps
   });
 };

package/dist/Select/components/Trigger/components/Arrow/Arrow.js

@@ -11,7 +11,7 @@ const Arrow = ({
     Component: icon,
     size: "S",
     customColor: restProps.color ? void 0 : theme.iconColor,
-    title: " ",
+    "aria-hidden": true,
     ...restProps
   });
 };

package/dist/Select/components/Trigger/components/Compose/Compose.cjs

@@ -1,8 +1,11 @@
 "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-select/dist/index.cjs");
+const index$2 = require("../../../../../node_modules/@radix-ui/react-select/dist/index.cjs");
+const index = require("../../../../../node_modules/@radix-ui/react-id/dist/index.cjs");
+const index$1 = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
 const Compose_style = require("./Compose.style.cjs");
+const Field_context = require("../../../../../Inputs/components/Context/Field.context.cjs");
 const SharedId_context = require("../../../../../Helpers/contexts/SharedId.context.cjs");
 const FormField_context = require("../../../../../FormField/FormField.context.cjs");
 const Compose = ({
@@ -12,15 +15,31 @@ const Compose = ({
 }) => {
   const sharedId = SharedId_context.useSharedId(id);
   const status = FormField_context.useFieldStatus();
-  return customContainer ? jsxRuntime.jsxRuntimeExports.jsx(index.Trigger, {
-    ...restProps,
+  const errorContent = Field_context.useErrorContent();
+  const errorId = index.useId();
+  const statusProps = status === "error" ? {
+    "aria-invalid": true,
+    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
+  } : null;
+  const triggerProps = {
     id: sharedId,
     "data-status": status,
+    ...statusProps,
+    ...restProps
+  };
+  const errorAlert = status === "error" ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
+    id: errorId,
+    role: "alert",
+    children: errorContent
+  }) : null;
+  const trigger = customContainer ? jsxRuntime.jsxRuntimeExports.jsx(index$2.Trigger, {
+    ...triggerProps,
     asChild: true
   }) : jsxRuntime.jsxRuntimeExports.jsx(Compose_style.TriggerContainer, {
-    ...restProps,
-    id: sharedId,
-    "data-status": status
+    ...triggerProps
+  });
+  return jsxRuntime.jsxRuntimeExports.jsxs(jsxRuntime.jsxRuntimeExports.Fragment, {
+    children: [trigger, errorAlert]
   });
 };
 exports.default = Compose;

package/dist/Select/components/Trigger/components/Compose/Compose.js

@@ -1,6 +1,9 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { Trigger } from "../../../../../node_modules/@radix-ui/react-select/dist/index.js";
+import { useId } from "../../../../../node_modules/@radix-ui/react-id/dist/index.js";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
 import { TriggerContainer } from "./Compose.style.js";
+import { useErrorContent } from "../../../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../../../Helpers/contexts/SharedId.context.js";
 import { useFieldStatus } from "../../../../../FormField/FormField.context.js";
 const Compose = ({
@@ -10,15 +13,31 @@ const Compose = ({
 }) => {
   const sharedId = useSharedId(id);
   const status = useFieldStatus();
-  return customContainer ? jsxRuntimeExports.jsx(Trigger, {
-    ...restProps,
+  const errorContent = useErrorContent();
+  const errorId = useId();
+  const statusProps = status === "error" ? {
+    "aria-invalid": true,
+    "aria-describedby": `${errorId} ${restProps["aria-describedby"] || ""}`
+  } : null;
+  const triggerProps = {
     id: sharedId,
     "data-status": status,
+    ...statusProps,
+    ...restProps
+  };
+  const errorAlert = status === "error" ? jsxRuntimeExports.jsx(VisuallyHidden, {
+    id: errorId,
+    role: "alert",
+    children: errorContent
+  }) : null;
+  const trigger = customContainer ? jsxRuntimeExports.jsx(Trigger, {
+    ...triggerProps,
     asChild: true
   }) : jsxRuntimeExports.jsx(TriggerContainer, {
-    ...restProps,
-    id: sharedId,
-    "data-status": status
+    ...triggerProps
+  });
+  return jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [trigger, errorAlert]
   });
 };
 export {

package/dist/Select/components/Trigger/components/ResetButton/ResetButton.cjs

@@ -21,10 +21,11 @@ const ResetButton = ({
     ...restProps,
     // prevent toggle popper
     onPointerDown: (e) => e.stopPropagation(),
+    title: title ?? "Clear All",
     children: children || jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.ToastCancelIcon, {
       size: "L",
       customColor: theme.iconColor,
-      title: title ?? "Clear All"
+      "aria-hidden": true
     })
   }) : null;
 };

package/dist/Select/components/Trigger/components/ResetButton/ResetButton.js

@@ -19,10 +19,11 @@ const ResetButton = ({
     ...restProps,
     // prevent toggle popper
     onPointerDown: (e) => e.stopPropagation(),
+    title: title ?? "Clear All",
     children: children || jsxRuntimeExports.jsx(ToastCancelIcon, {
       size: "L",
       customColor: theme.iconColor,
-      title: title ?? "Clear All"
+      "aria-hidden": true
     })
   }) : null;
 };

package/dist/Select/components/Trigger/components/StatusIndicator/StatusIndicator.cjs

@@ -1,11 +1,4 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../../../node_modules/react/jsx-runtime.cjs");
-const StatusIndicator$1 = require("../../../../../Inputs/components/StatusIndicator/StatusIndicator.cjs");
-const StatusIndicator = (props) => {
-  return jsxRuntime.jsxRuntimeExports.jsx(StatusIndicator$1.default, {
-    ...props,
-    "$customTitles": true
-  });
-};
-exports.default = StatusIndicator;
+const StatusIndicator = require("../../../../../Inputs/components/StatusIndicator/StatusIndicator.cjs");
+exports.default = StatusIndicator.default;

package/dist/Select/components/Trigger/components/StatusIndicator/StatusIndicator.d.ts

@@ -1,4 +1,2 @@
-import { HTMLAttributes } from 'react';
-import { MonochromeIconProps } from '@redislabsdev/redis-ui-icons';
-declare const StatusIndicator: (props: MonochromeIconProps & Pick<HTMLAttributes<unknown>, 'className' | 'style'>) => import("react/jsx-runtime").JSX.Element;
+import StatusIndicator from '../../../../../Inputs/components/StatusIndicator/StatusIndicator';
 export default StatusIndicator;

package/dist/Select/components/Trigger/components/StatusIndicator/StatusIndicator.js

@@ -1,11 +1,4 @@
-import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
-import StatusIndicator$1 from "../../../../../Inputs/components/StatusIndicator/StatusIndicator.js";
-const StatusIndicator = (props) => {
-  return jsxRuntimeExports.jsx(StatusIndicator$1, {
-    ...props,
-    "$customTitles": true
-  });
-};
+import StatusIndicator from "../../../../../Inputs/components/StatusIndicator/StatusIndicator.js";
 export {
   StatusIndicator as default
 };

package/dist/SideBar/components/Item/components/Button/Button.cjs

@@ -13,7 +13,7 @@ const Button = React__default.default.forwardRef(({
   const {
     isExpanded
   } = SideBar_context.useSideBarContext();
-  return isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.PlusButton, {
+  return isExpanded ? jsxRuntime.jsxRuntimeExports.jsx(Button_style.ItemButton, {
     size,
     ref,
     ...props

package/dist/SideBar/components/Item/components/Button/Button.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import React__default from "react";
 import { useSideBarContext } from "../../../../SideBar.context.js";
-import { PlusButton } from "./Button.style.js";
+import { ItemButton } from "./Button.style.js";
 const Button = React__default.forwardRef(({
   size = "M",
   ...props
@@ -9,7 +9,7 @@ const Button = React__default.forwardRef(({
   const {
     isExpanded
   } = useSideBarContext();
-  return isExpanded ? jsxRuntimeExports.jsx(PlusButton, {
+  return isExpanded ? jsxRuntimeExports.jsx(ItemButton, {
     size,
     ref,
     ...props

package/dist/SideBar/components/Item/components/Button/Button.style.cjs

@@ -5,8 +5,8 @@ const ActionIconButton = require("../../../../../Button/ActionIconButton/ActionI
 const SideBar_utils = require("../../../../SideBar.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const PlusButton = _styled__default.default(ActionIconButton.default).withConfig({
-  displayName: "Buttonstyle__PlusButton",
+const ItemButton = _styled__default.default(ActionIconButton.default).withConfig({
+  displayName: "Buttonstyle__ItemButton",
   componentId: "RedisUI__sc-13x3wha-0"
 })(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => SideBar_utils.useStateStyle((theme) => _styled.css`
           background-color: ${theme.item.button.bgColor};
@@ -15,4 +15,4 @@ const PlusButton = _styled__default.default(ActionIconButton.default).withConfig
           color: ${theme.item.button.textColor};
           border-style: solid;
         `));
-exports.PlusButton = PlusButton;
+exports.ItemButton = ItemButton;

package/dist/SideBar/components/Item/components/Button/Button.style.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const PlusButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const ItemButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").ActionIconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/SideBar/components/Item/components/Button/Button.style.js

@@ -1,8 +1,8 @@
 import _styled, { css } from "styled-components";
 import ActionIconButton from "../../../../../Button/ActionIconButton/ActionIconButton.js";
 import { useStateStyle } from "../../../../SideBar.utils.js";
-const PlusButton = _styled(ActionIconButton).withConfig({
-  displayName: "Buttonstyle__PlusButton",
+const ItemButton = _styled(ActionIconButton).withConfig({
+  displayName: "Buttonstyle__ItemButton",
   componentId: "RedisUI__sc-13x3wha-0"
 })(["position:absolute;padding:0;right:0;transform:translateX(50%);", ""], () => useStateStyle((theme) => css`
           background-color: ${theme.item.button.bgColor};
@@ -12,5 +12,5 @@ const PlusButton = _styled(ActionIconButton).withConfig({
           border-style: solid;
         `));
 export {
-  PlusButton
+  ItemButton
 };

package/dist/TableHeading/TableHeading.d.ts

@@ -9,9 +9,7 @@ declare const TableHeading: ((props: TableHeadingProps) => import("react/jsx-run
         }) => import("react/jsx-runtime").JSX.Element;
         ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("..").IconButtonProps> & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
         Tag: import("react").ForwardRefExoticComponent<import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-        StatusIndicator: ({ className, style, size, $customTitles, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className"> & {
-            $customTitles?: boolean | undefined;
-        }) => import("react/jsx-runtime").JSX.Element | null;
+        StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
         LoadingIndicator: ({ loading, ...restProps }: import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
         SearchIcon: () => import("react/jsx-runtime").JSX.Element;
     }, any, {}, never>;

package/dist/TableHeading/TableHeading.style.d.ts

@@ -9,9 +9,7 @@ export declare const TableSearchInput: import("styled-components").StyledCompone
     }) => import("react/jsx-runtime").JSX.Element;
     ResetButton: ({ size, icon, allowReset, onClick, onMouseDown, ...restProps }: Partial<import("..").IconButtonProps> & import("../Inputs/components/ResetButton/ResetButton.types").ResetButtonProps) => import("react/jsx-runtime").JSX.Element | null;
     Tag: import("react").ForwardRefExoticComponent<import("../Inputs/components/InputTag/InputTag.types").InputTagProps & import("../Inputs/components/InputTag/InputTag.types").RestInputTagProps & import("react").RefAttributes<HTMLInputElement>>;
-    StatusIndicator: ({ className, style, size, $customTitles, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className"> & {
-        $customTitles?: boolean | undefined;
-    }) => import("react/jsx-runtime").JSX.Element | null;
+    StatusIndicator: ({ className, style, size, ...restProps }: import("@redislabsdev/redis-ui-icons/monochrome").MonochromeIconProps & Pick<import("react").HTMLAttributes<unknown>, "style" | "className">) => import("react/jsx-runtime").JSX.Element | null;
     LoadingIndicator: ({ loading, ...restProps }: import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").LoadingIndicatorProps & import("../Inputs/components/LoadingIndicator/LoadingIndicator.types").RestLoadingIndicatorProps) => import("react/jsx-runtime").JSX.Element | null;
     SearchIcon: () => import("react/jsx-runtime").JSX.Element;
 }, any, {}, never>;

package/dist/Tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import { TooltipProps } from './Tooltip.types';
 declare const Tooltip: (({ children, openDelayDuration, open, onOpenChange, defaultOpen, withButton, disabled, interactive, ...restProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, openDelayDuration, open, disabled, onOpenChange, defaultOpen, interactive }: import("./components/Compose/Compose.types").TooltipComposeProps) => import("react/jsx-runtime").JSX.Element;
     Content: (({ content, ...composeProps }: import("./components/Content/Content.types").TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
-        Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+        Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: import("./components/Content/components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
         Text: (props: import("../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
     };
     Trigger: ({ withButton, ...restProps }: import("./components/Trigger/Trigger.types").TooltipTriggerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import { TooltipContentProps } from './Content.types';
 declare const Content: (({ content, ...composeProps }: TooltipContentProps) => import("react/jsx-runtime").JSX.Element | null) & {
-    Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;
     Text: (props: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default Content;

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

@@ -11,7 +11,6 @@ const Compose = ({
   maxWidth,
   placement = "top",
   sideOffset = 5,
-  disableInteractionHelper,
   portal = document.body,
   ...restProps
 }) => {
@@ -19,7 +18,6 @@ const Compose = ({
   const {
     interactive
   } = TooltipInfoContext.useTooltipInfo();
-  const showInteractionHelper = disableInteractionHelper === true ? false : interactive;
   const renderContent = jsxRuntime.jsxRuntimeExports.jsxs(Compose_style.Content, {
     "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
@@ -29,9 +27,7 @@ const Compose = ({
     hideWhenDetached: popperContext.collisionBoundary || restProps.collisionBoundary ? true : void 0,
     ...popperContext,
     ...restProps,
-    children: [showInteractionHelper && jsxRuntime.jsxRuntimeExports.jsx(Compose_style.InteractionHelper, {
-      "data-testid": "redisui-interaction-helper"
-    }), jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Arrow, {}), children]
+    children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Arrow, {}), children]
   });
   if (portal) {
     return jsxRuntime.jsxRuntimeExports.jsx(index.Portal, {

package/dist/Tooltip/components/Content/components/Compose/Compose.d.ts

@@ -1,3 +1,3 @@
 import { ComposeProps } from './Compose.types';
-declare const Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, disableInteractionHelper, portal, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Compose: ({ children, backgroundColor, maxWidth, placement, sideOffset, portal, ...restProps }: ComposeProps) => import("react/jsx-runtime").JSX.Element;
 export default Compose;

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

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
 import { Portal } from "../../../../../node_modules/@radix-ui/react-tooltip/dist/index.js";
 import { useTooltipInfo } from "../../../../Context/TooltipInfoContext.js";
-import { Content, InteractionHelper, Arrow } from "./Compose.style.js";
+import { Content, Arrow } from "./Compose.style.js";
 import { usePopperContext } from "../../../../../Helpers/contexts/Popper/Popper.context.js";
 const Compose = ({
   children,
@@ -9,7 +9,6 @@ const Compose = ({
   maxWidth,
   placement = "top",
   sideOffset = 5,
-  disableInteractionHelper,
   portal = document.body,
   ...restProps
 }) => {
@@ -17,7 +16,6 @@ const Compose = ({
   const {
     interactive
   } = useTooltipInfo();
-  const showInteractionHelper = disableInteractionHelper === true ? false : interactive;
   const renderContent = jsxRuntimeExports.jsxs(Content, {
     "$backgroundColor": backgroundColor,
     "$maxWidth": maxWidth,
@@ -27,9 +25,7 @@ const Compose = ({
     hideWhenDetached: popperContext.collisionBoundary || restProps.collisionBoundary ? true : void 0,
     ...popperContext,
     ...restProps,
-    children: [showInteractionHelper && jsxRuntimeExports.jsx(InteractionHelper, {
-      "data-testid": "redisui-interaction-helper"
-    }), jsxRuntimeExports.jsx(Arrow, {}), children]
+    children: [jsxRuntimeExports.jsx(Arrow, {}), children]
   });
   if (portal) {
     return jsxRuntimeExports.jsx(Portal, {