@redis-ui/components 39.0.0 → 39.12.0

package/dist/Modal/components/Content/Content.cjs

@@ -6,8 +6,11 @@ const Compose = require("./components/Compose/Compose.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
 const Body = require("./components/Body/Body.cjs");
 const Close = require("./components/Close/Close.cjs");
+const Description = require("./components/Description/Description.cjs");
 const Content = Object.assign(({
   title,
+  description,
+  descriptionHidden,
   onCancel,
   primaryButtonText,
   secondaryButtonText,
@@ -33,6 +36,9 @@ const Content = Object.assign(({
       persistent
     }), jsxRuntime.jsxRuntimeExports.jsx(Content.Header, {
       title
+    }), jsxRuntime.jsxRuntimeExports.jsx(Content.Description, {
+      hidden: descriptionHidden,
+      children: description
     }), jsxRuntime.jsxRuntimeExports.jsx(Content.Body, {
       content,
       width
@@ -54,6 +60,7 @@ const Content = Object.assign(({
 }, {
   Compose: Compose.default,
   Header: Header.default,
+  Description: Description.default,
   Body: Body.default,
   Footer: Footer.default,
   Close: Close.default

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

@@ -1,10 +1,14 @@
+/// <reference types="react" />
 import { ModalContentProps } from './Content.types';
-declare const Content: (({ title, onCancel, primaryButtonText, secondaryButtonText, tertiaryButtonText, tertiaryButtonIcon, primaryButtonDisabled, secondaryButtonDisabled, tertiaryButtonDisabled, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, content, width, persistent, ...restProps }: ModalContentProps) => import("react/jsx-runtime").JSX.Element) & {
+declare const Content: (({ title, description, descriptionHidden, onCancel, primaryButtonText, secondaryButtonText, tertiaryButtonText, tertiaryButtonIcon, primaryButtonDisabled, secondaryButtonDisabled, tertiaryButtonDisabled, onPrimaryButtonClick, onSecondaryButtonClick, onTertiaryButtonClick, content, width, persistent, ...restProps }: ModalContentProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ persistent, onCancel, ...props }: import("./components/Compose/Compose.types").ContentComposeProps) => import("react/jsx-runtime").JSX.Element;
     Header: (({ title, titleHidden, ...restProps }: import("./components/Header/Header.types").ContentHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/Header/components/Compose/Compose.types").ContentHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;
         Title: ({ hidden, children, ...restProps }: import("./components/Header/components/Title/Title.types").TitleProps) => import("react/jsx-runtime").JSX.Element;
     };
+    Description: (({ hidden, children, ...restProps }: import("./components/Description/Description.types").ModalDescriptionProps & import("../../../Helpers/common.types").ComposeChildrenProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, "content" | "children">) => import("react/jsx-runtime").JSX.Element | null) & {
+        Text: (props: import("../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+    };
     Body: (({ content, ...restProps }: import("./components/Body/Body.types").ContentBodyProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: (props: import("./components/Body/components/Compose/Compose.types").ContentBodyComposeProps) => import("react/jsx-runtime").JSX.Element;
         Text: ({ children, ...restProps }: import("../../../Typography/components/Body/Body.types").BodyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Modal/components/Content/Content.js

@@ -4,8 +4,11 @@ import Compose from "./components/Compose/Compose.js";
 import Footer from "./components/Footer/Footer.js";
 import Body from "./components/Body/Body.js";
 import Close from "./components/Close/Close.js";
+import Description from "./components/Description/Description.js";
 const Content = Object.assign(({
   title,
+  description,
+  descriptionHidden,
   onCancel,
   primaryButtonText,
   secondaryButtonText,
@@ -31,6 +34,9 @@ const Content = Object.assign(({
       persistent
     }), jsxRuntimeExports.jsx(Content.Header, {
       title
+    }), jsxRuntimeExports.jsx(Content.Description, {
+      hidden: descriptionHidden,
+      children: description
     }), jsxRuntimeExports.jsx(Content.Body, {
       content,
       width
@@ -52,6 +58,7 @@ const Content = Object.assign(({
 }, {
   Compose,
   Header,
+  Description,
   Body,
   Footer,
   Close

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

@@ -1,6 +1,10 @@
+import { ReactNode } from 'react';
 import { ContentBodyProps } from './components/Body/Body.types';
 import { ContentFooterProps } from './components/Footer/Footer.types';
 import { ContentHeaderProps } from './components/Header/Header.types';
 import { ContentComposeProps } from './components/Compose/Compose.types';
 import { ChildFree } from '../../../Helpers/common.types';
-export type ModalContentProps = Pick<ContentHeaderProps, 'title'> & Pick<ContentBodyProps, 'content' | 'width'> & Omit<ContentFooterProps & ChildFree<ContentComposeProps>, 'title'>;
+export type ModalContentProps = Pick<ContentHeaderProps, 'title'> & Pick<ContentBodyProps, 'content' | 'width'> & Omit<ContentFooterProps & ChildFree<ContentComposeProps>, 'title'> & {
+    description?: ReactNode;
+    descriptionHidden?: boolean;
+};

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

@@ -14,6 +14,7 @@ const Close = ({
   children: jsxRuntime.jsxRuntimeExports.jsx(Close_style.ModalCloseContainer, {
     children: jsxRuntime.jsxRuntimeExports.jsx(Close_style.IconButton, {
       "aria-label": "close",
+      title: "Close",
       onClick,
       size: "M",
       icon,

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

@@ -12,6 +12,7 @@ const Close = ({
   children: jsxRuntimeExports.jsx(ModalCloseContainer, {
     children: jsxRuntimeExports.jsx(IconButton, {
       "aria-label": "close",
+      title: "Close",
       onClick,
       size: "M",
       icon,

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

@@ -1,25 +1,59 @@
 "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-dialog/dist/index.cjs");
+const React = require("react");
+const index = require("../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.cjs");
+const index$1 = require("../../../../../node_modules/@radix-ui/react-dialog/dist/index.cjs");
 const Compose_style = require("./Compose.style.cjs");
-const handlePreventDefault = (e) => e.preventDefault();
-const handleStopPropagation = (e) => e.stopPropagation();
+const react_utils = require("../../../../../Helpers/react.utils.cjs");
+const handleAriaDescriptionRef = (el) => {
+  if (el) {
+    const id = el.getAttribute("aria-describedby");
+    if (id) {
+      if (!el.querySelector(`#${CSS.escape(id)}`)) {
+        el.removeAttribute("aria-describedby");
+      }
+    } else {
+      const descEl = el.querySelector(`[data-role=dialog-description]`);
+      if (descEl) {
+        el.setAttribute("aria-describedby", descEl.id);
+      }
+    }
+  }
+};
 const Compose = ({
   persistent,
   onCancel,
   ...props
 }) => {
-  return jsxRuntime.jsxRuntimeExports.jsxs(index.Portal, {
+  const focusedRef = React.useRef(null);
+  const dialogRef = React.useRef(null);
+  const comboRef = index.useComposedRefs(dialogRef, handleAriaDescriptionRef);
+  return jsxRuntime.jsxRuntimeExports.jsxs(index$1.Portal, {
     children: [jsxRuntime.jsxRuntimeExports.jsx(Compose_style.ModalOverlay, {
-      onClick: handleStopPropagation
+      "data-aria-hidden": "true",
+      "aria-hidden": "true",
+      onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = dialogRef.current) == null ? void 0 : _a.focus();
+      }
     }), jsxRuntime.jsxRuntimeExports.jsx(Compose_style.Container, {
+      ref: comboRef,
       "data-role": "dialog",
       ...props,
-      onPointerDownOutside: persistent ? handlePreventDefault : onCancel,
-      onEscapeKeyDown: persistent ? handlePreventDefault : onCancel,
-      "aria-describedby": void 0,
-      onClick: handleStopPropagation
+      onInteractOutside: persistent ? react_utils.handlePreventDefault : onCancel,
+      onEscapeKeyDown: persistent ? react_utils.handlePreventDefault : onCancel,
+      onClick: react_utils.handleStopPropagation,
+      onOpenAutoFocus: () => {
+        focusedRef.current = document.activeElement;
+      },
+      onCloseAutoFocus: (e) => {
+        var _a;
+        e.preventDefault();
+        if (!document.querySelector("div[role=dialog][data-role=dialog]")) (_a = focusedRef.current) == null ? void 0 : _a.focus();
+      }
     })]
   });
 };

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

@@ -1,23 +1,57 @@
 import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { useRef } from "react";
+import { useComposedRefs } from "../../../../../node_modules/@radix-ui/react-compose-refs/dist/index.js";
 import { Portal } from "../../../../../node_modules/@radix-ui/react-dialog/dist/index.js";
 import { ModalOverlay, Container } from "./Compose.style.js";
-const handlePreventDefault = (e) => e.preventDefault();
-const handleStopPropagation = (e) => e.stopPropagation();
+import { handlePreventDefault, handleStopPropagation } from "../../../../../Helpers/react.utils.js";
+const handleAriaDescriptionRef = (el) => {
+  if (el) {
+    const id = el.getAttribute("aria-describedby");
+    if (id) {
+      if (!el.querySelector(`#${CSS.escape(id)}`)) {
+        el.removeAttribute("aria-describedby");
+      }
+    } else {
+      const descEl = el.querySelector(`[data-role=dialog-description]`);
+      if (descEl) {
+        el.setAttribute("aria-describedby", descEl.id);
+      }
+    }
+  }
+};
 const Compose = ({
   persistent,
   onCancel,
   ...props
 }) => {
+  const focusedRef = useRef(null);
+  const dialogRef = useRef(null);
+  const comboRef = useComposedRefs(dialogRef, handleAriaDescriptionRef);
   return jsxRuntimeExports.jsxs(Portal, {
     children: [jsxRuntimeExports.jsx(ModalOverlay, {
-      onClick: handleStopPropagation
+      "data-aria-hidden": "true",
+      "aria-hidden": "true",
+      onClick: (e) => {
+        var _a;
+        e.stopPropagation();
+        e.preventDefault();
+        (_a = dialogRef.current) == null ? void 0 : _a.focus();
+      }
     }), jsxRuntimeExports.jsx(Container, {
+      ref: comboRef,
       "data-role": "dialog",
       ...props,
-      onPointerDownOutside: persistent ? handlePreventDefault : onCancel,
+      onInteractOutside: persistent ? handlePreventDefault : onCancel,
       onEscapeKeyDown: persistent ? handlePreventDefault : onCancel,
-      "aria-describedby": void 0,
-      onClick: handleStopPropagation
+      onClick: handleStopPropagation,
+      onOpenAutoFocus: () => {
+        focusedRef.current = document.activeElement;
+      },
+      onCloseAutoFocus: (e) => {
+        var _a;
+        e.preventDefault();
+        if (!document.querySelector("div[role=dialog][data-role=dialog]")) (_a = focusedRef.current) == null ? void 0 : _a.focus();
+      }
     })]
   });
 };

package/dist/Modal/components/Content/components/Description/Description.cjs

@@ -0,0 +1,34 @@
+"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-dialog/dist/index.cjs");
+const index$1 = require("../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.cjs");
+const Text = require("./components/Text/Text.cjs");
+const Description_style = require("./Description.style.cjs");
+const react_utils = require("../../../../../Helpers/react.utils.cjs");
+const Description = Object.assign(({
+  hidden,
+  children,
+  ...restProps
+}) => {
+  var _a;
+  const emptyContent = !((_a = react_utils.childrenToString(children)) == null ? void 0 : _a.trim());
+  if (emptyContent) return null;
+  const mainElement = jsxRuntime.jsxRuntimeExports.jsx(index.Description, {
+    asChild: true,
+    children: jsxRuntime.jsxRuntimeExports.jsx(Description_style.DescriptionContainer, {
+      "data-role": "dialog-description",
+      ...restProps,
+      children: typeof children === "string" ? jsxRuntime.jsxRuntimeExports.jsx(Description.Text, {
+        children
+      }) : children
+    })
+  });
+  return hidden ? jsxRuntime.jsxRuntimeExports.jsx(index$1.VisuallyHidden, {
+    asChild: true,
+    children: mainElement
+  }) : mainElement;
+}, {
+  Text: Text.default
+});
+exports.default = Description;

package/dist/Modal/components/Content/components/Description/Description.d.ts

@@ -0,0 +1,5 @@
+import { ModalDescriptionProps, RestModalDescriptionProps } from './Description.types';
+declare const Description: (({ hidden, children, ...restProps }: ModalDescriptionProps & RestModalDescriptionProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    Text: (props: import("../../../../../Typography/components/Heading/Heading.types").HeadingProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default Description;

package/dist/Modal/components/Content/components/Description/Description.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../../../../../node_modules/react/jsx-runtime.js";
+import { Description as Description$1 } from "../../../../../node_modules/@radix-ui/react-dialog/dist/index.js";
+import { VisuallyHidden } from "../../../../../node_modules/@radix-ui/react-visually-hidden/dist/index.js";
+import Text from "./components/Text/Text.js";
+import { DescriptionContainer } from "./Description.style.js";
+import { childrenToString } from "../../../../../Helpers/react.utils.js";
+const Description = Object.assign(({
+  hidden,
+  children,
+  ...restProps
+}) => {
+  var _a;
+  const emptyContent = !((_a = childrenToString(children)) == null ? void 0 : _a.trim());
+  if (emptyContent) return null;
+  const mainElement = jsxRuntimeExports.jsx(Description$1, {
+    asChild: true,
+    children: jsxRuntimeExports.jsx(DescriptionContainer, {
+      "data-role": "dialog-description",
+      ...restProps,
+      children: typeof children === "string" ? jsxRuntimeExports.jsx(Description.Text, {
+        children
+      }) : children
+    })
+  });
+  return hidden ? jsxRuntimeExports.jsx(VisuallyHidden, {
+    asChild: true,
+    children: mainElement
+  }) : mainElement;
+}, {
+  Text
+});
+export {
+  Description as default
+};

package/dist/Modal/components/Content/components/Description/Description.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const DescriptionContainer = _styled__default.default.div.withConfig({
+  displayName: "Descriptionstyle__DescriptionContainer",
+  componentId: "RedisUI__sc-11k2kx8-0"
+})(["display:flex;align-items:center;padding-inline:", ";padding-block:", ";"], () => redisUiStyles.useTheme().components.modal.inlinePadding, () => redisUiStyles.useTheme().components.modal.description.blockPadding);
+exports.DescriptionContainer = DescriptionContainer;

package/dist/Modal/components/Content/components/Description/Description.style.d.ts

@@ -0,0 +1 @@
+export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Modal/components/Content/components/Description/Description.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const DescriptionContainer = _styled.div.withConfig({
+  displayName: "Descriptionstyle__DescriptionContainer",
+  componentId: "RedisUI__sc-11k2kx8-0"
+})(["display:flex;align-items:center;padding-inline:", ";padding-block:", ";"], () => useTheme().components.modal.inlinePadding, () => useTheme().components.modal.description.blockPadding);
+export {
+  DescriptionContainer
+};

package/dist/Modal/components/Content/components/Description/Description.types.d.ts

@@ -0,0 +1,5 @@
+import { ComposeElementProps } from '../../../../../Helpers/common.types';
+export interface ModalDescriptionProps {
+    hidden?: boolean;
+}
+export type RestModalDescriptionProps = ComposeElementProps;

package/dist/Modal/components/Content/components/Description/components/Text/Text.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
+const Text_style = require("./Text.style.cjs");
+const Text = (props) => jsxRuntime.jsxRuntimeExports.jsx(Text_style.Text, {
+  size: "XS",
+  ...props
+});
+exports.default = Text;

package/dist/Modal/components/Content/components/Description/components/Text/Text.d.ts

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

package/dist/Modal/components/Content/components/Description/components/Text/Text.js

@@ -0,0 +1,9 @@
+import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
+import { Text as Text$1 } from "./Text.style.js";
+const Text = (props) => jsxRuntimeExports.jsx(Text$1, {
+  size: "XS",
+  ...props
+});
+export {
+  Text as default
+};

package/dist/Modal/components/Content/components/Description/components/Text/Text.style.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const Typography = require("../../../../../../../Typography/Typography.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const Text = _styled__default.default(Typography.default.Heading).withConfig({
+  displayName: "Textstyle__Text",
+  componentId: "RedisUI__sc-knpqfm-0"
+})(["color:", ";"], () => redisUiStyles.useTheme().components.modal.description.textColor);
+exports.Text = Text;

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

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

package/dist/Modal/components/Content/components/Description/components/Text/Text.style.js

@@ -0,0 +1,10 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+import Typography from "../../../../../../../Typography/Typography.js";
+const Text = _styled(Typography.Heading).withConfig({
+  displayName: "Textstyle__Text",
+  componentId: "RedisUI__sc-knpqfm-0"
+})(["color:", ";"], () => useTheme().components.modal.description.textColor);
+export {
+  Text
+};

package/dist/Modal/components/Content/components/Description/components/Text/Text.types.d.ts

@@ -0,0 +1,2 @@
+import { HeadingProps } from '../../../../../../../Typography/components/Heading/Heading.types';
+export type ModalDescriptionTextProps = HeadingProps;

package/dist/MoreInfoIcon/MoreInfoIcon.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
+const redisUiIcons = require("@redislabsdev/redis-ui-icons");
+const MoreInfoIcon_style = require("./MoreInfoIcon.style.cjs");
+const react_utils = require("../Helpers/react.utils.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const MoreInfoIcon = ({
+  tooltip,
+  size = "L",
+  customIcon: Icon = redisUiIcons.InfoIcon,
+  tooltipProps,
+  ...restProps
+}) => {
+  var _a;
+  return !((_a = react_utils.childrenToString(tooltip)) == null ? void 0 : _a.trim()) ? null : jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
+    ...tooltipProps,
+    content: tooltip,
+    children: jsxRuntime.jsxRuntimeExports.jsx(MoreInfoIcon_style.TooltipTrigger, {
+      role: "button",
+      "aria-label": "More information",
+      "aria-haspopup": "true",
+      tabIndex: 0,
+      ...restProps,
+      children: jsxRuntime.jsxRuntimeExports.jsx(Icon, {
+        size,
+        customColor: "currentColor",
+        "aria-hidden": "true"
+      })
+    })
+  });
+};
+const MoreInfoIconComponent = MoreInfoIcon;
+exports.default = MoreInfoIconComponent;

package/dist/MoreInfoIcon/MoreInfoIcon.d.ts

@@ -0,0 +1,3 @@
+import { MoreInfoIconProps } from './MoreInfoIcon.types';
+declare const MoreInfoIcon: ({ tooltip, size, customIcon: Icon, tooltipProps, ...restProps }: MoreInfoIconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MoreInfoIcon;

package/dist/MoreInfoIcon/MoreInfoIcon.js

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
+import { InfoIcon } from "@redislabsdev/redis-ui-icons";
+import { TooltipTrigger } from "./MoreInfoIcon.style.js";
+import { childrenToString } from "../Helpers/react.utils.js";
+import Tooltip from "../Tooltip/Tooltip.js";
+const MoreInfoIcon = ({
+  tooltip,
+  size = "L",
+  customIcon: Icon = InfoIcon,
+  tooltipProps,
+  ...restProps
+}) => {
+  var _a;
+  return !((_a = childrenToString(tooltip)) == null ? void 0 : _a.trim()) ? null : jsxRuntimeExports.jsx(Tooltip, {
+    ...tooltipProps,
+    content: tooltip,
+    children: jsxRuntimeExports.jsx(TooltipTrigger, {
+      role: "button",
+      "aria-label": "More information",
+      "aria-haspopup": "true",
+      tabIndex: 0,
+      ...restProps,
+      children: jsxRuntimeExports.jsx(Icon, {
+        size,
+        customColor: "currentColor",
+        "aria-hidden": "true"
+      })
+    })
+  });
+};
+const MoreInfoIconComponent = MoreInfoIcon;
+export {
+  MoreInfoIconComponent as default
+};

package/dist/MoreInfoIcon/MoreInfoIcon.style.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const _styled = require("styled-components");
+const redisUiStyles = require("@redislabsdev/redis-ui-styles");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
+const TooltipTrigger = _styled__default.default.span.withConfig({
+  displayName: "MoreInfoIconstyle__TooltipTrigger",
+  componentId: "RedisUI__sc-1wx6c2q-0"
+})(["display:inline-flex;color:", ";"], () => redisUiStyles.useTheme().components.moreInfoIcon.iconColor);
+exports.TooltipTrigger = TooltipTrigger;

package/dist/MoreInfoIcon/MoreInfoIcon.style.d.ts

@@ -0,0 +1 @@
+export declare const TooltipTrigger: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/MoreInfoIcon/MoreInfoIcon.style.js

@@ -0,0 +1,9 @@
+import _styled from "styled-components";
+import { useTheme } from "@redislabsdev/redis-ui-styles";
+const TooltipTrigger = _styled.span.withConfig({
+  displayName: "MoreInfoIconstyle__TooltipTrigger",
+  componentId: "RedisUI__sc-1wx6c2q-0"
+})(["display:inline-flex;color:", ";"], () => useTheme().components.moreInfoIcon.iconColor);
+export {
+  TooltipTrigger
+};

package/dist/MoreInfoIcon/MoreInfoIcon.types.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { IconSizeType } from '@redislabsdev/redis-ui-icons';
+import { IconType } from '@redislabsdev/redis-ui-icons/monochrome';
+import { TooltipProps } from '../Tooltip';
+export interface MoreInfoIconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content' | 'children' | 'size'> {
+    tooltip: ReactNode;
+    tooltipProps?: Omit<TooltipProps, 'children' | 'content' | 'text'>;
+    size?: IconSizeType;
+    customIcon?: IconType;
+}

package/dist/MoreInfoIcon/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MoreInfoIcon } from './MoreInfoIcon';
+export * from './MoreInfoIcon.types';

package/dist/MultiSelect/MultiSelect.d.ts

@@ -17,10 +17,10 @@ declare const MultiSelect: (<TValue extends string = string, TOption extends Sel
             allowRemove?: boolean | undefined;
         } & import("../Select/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("../Select/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, allowSelectAll, ...restProps }: import("../Select/components/Content/components/Compose/Compose.types").SelectContentComposeProps & import("../Select/components/Content/components/OptionList/OptionList.types").OptionListProps<TOption_4> & {
         searchable?: boolean | undefined;

package/dist/MultiSelect/components/Content/components/Option/components/OptionSelectionIndicator/OptionSelectionIndicator.cjs

@@ -11,6 +11,8 @@ const OptionSelectionIndicator = ({
     isOptionSelected
   } = Context.useSelectContext();
   return jsxRuntime.jsxRuntimeExports.jsx(OptionSelectionIndicator_style.CheckboxIndicator, {
+    readOnly: true,
+    "aria-hidden": true,
     ...restProps,
     checked: isOptionSelected(option),
     disabled: option.disabled,

package/dist/MultiSelect/components/Content/components/Option/components/OptionSelectionIndicator/OptionSelectionIndicator.js

@@ -9,6 +9,8 @@ const OptionSelectionIndicator = ({
     isOptionSelected
   } = useSelectContext();
   return jsxRuntimeExports.jsx(CheckboxIndicator, {
+    readOnly: true,
+    "aria-hidden": true,
     ...restProps,
     checked: isOptionSelected(option),
     disabled: option.disabled,

package/dist/MultiSelect/components/Content/components/Option/components/OptionSelectionIndicator/OptionSelectionIndicator.style.d.ts

@@ -1,5 +1,5 @@
 export declare const CheckboxIndicator: import("styled-components").StyledComponent<(({ label, defaultChecked, checked, onCheckedChange, required, disabled, id, variant, className, style, ...restProps }: import("../../../../../../..").CheckboxProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ defaultChecked, checked, onCheckedChange, required, disabled, id, variant, ...restProps }: import("../../../../../../../Checkbox/components/Compose/Compose.types").CheckboxComposeProps & import("../../../../../../../Checkbox/components/Compose/Compose.types").RestCheckboxComposeProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: (props: import("../../../../../../../Checkbox/components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
+    Indicator: ({ readOnly, ...restProps }: import("../../../../../../../Checkbox/components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;
     Label: ({ children, ...restProps }: import("../../../../../../../Checkbox/components/Label/Label.types").CheckboxLabelProps) => import("react/jsx-runtime").JSX.Element | null;
 }, any, {}, never>;

package/dist/MultiSelect/components/Trigger/Trigger.cjs

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

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

@@ -8,12 +8,12 @@ declare const Trigger: (<TOption extends SelectOption<string> = SelectOption<str
         allowRemove?: boolean | undefined;
     } & import("../../../Select/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("../../../Select/components/Trigger/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/MultiSelect/components/Trigger/Trigger.js

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