@redis-ui/components 42.0.0 → 42.7.0

package/dist/{Tooltip/components/Content/components/Text/Text.styles.cjs → Popover/components/Content/components/Text/Text.style.cjs}

@@ -6,7 +6,7 @@ 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.Body).withConfig({
-  displayName: "Textstyles__Text",
-  componentId: "RedisUI__sc-2fcqih-0"
+  displayName: "Textstyle__Text",
+  componentId: "RedisUI__sc-6foh1z-0"
 })(["color:", ";"], () => redisUiStyles.useTheme().components.tooltip.textColor);
 exports.Text = Text;

package/dist/Popover/components/Content/components/Text/{Text.styles.d.ts → Text.style.d.ts}

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

package/dist/{Tooltip/components/Content/components/Text/Text.styles.js → Popover/components/Content/components/Text/Text.style.js}

@@ -2,8 +2,8 @@ import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import Typography from "../../../../../Typography/Typography.js";
 const Text = _styled(Typography.Body).withConfig({
-  displayName: "Textstyles__Text",
-  componentId: "RedisUI__sc-2fcqih-0"
+  displayName: "Textstyle__Text",
+  componentId: "RedisUI__sc-6foh1z-0"
 })(["color:", ";"], () => useTheme().components.tooltip.textColor);
 export {
   Text

package/dist/Popover/components/Content/components/WindowBar/WindowBar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { WindowBarProps } from './WindowBar.types';
 declare const WindowBar: (({ title, variant, hideCloseButton, withIcon, icon, ...restProps }: WindowBarProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Compose: (props: import("./components/Compose/Compose.types").WindowBarComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Popover/components/Content/components/WindowBar/WindowBar.style.d.ts

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

package/dist/Popover/components/Content/components/WindowBar/components/Compose/Compose.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BadgeVariants } from '../../../../../../../Badge';
 export interface WindowBarComposeProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: BadgeVariants;

package/dist/Popover/components/Content/components/WindowBar/components/Header/Header.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const jsxRuntime = require("../../../../../../../node_modules/react/jsx-runtime.cjs");
-const Header_styles = require("./Header.styles.cjs");
+const Header_style = require("./Header.style.cjs");
 const Header = ({
   children = null
 }) => {
-  return jsxRuntime.jsxRuntimeExports.jsx(Header_styles.Header, {
+  return jsxRuntime.jsxRuntimeExports.jsx(Header_style.Header, {
     children
   });
 };

package/dist/Popover/components/Content/components/WindowBar/components/Header/Header.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from "../../../../../../../node_modules/react/jsx-runtime.js";
-import { Header as Header$1 } from "./Header.styles.js";
+import { Header as Header$1 } from "./Header.style.js";
 const Header = ({
   children = null
 }) => {

package/dist/Popover/components/Content/components/WindowBar/components/Header/{Header.styles.cjs → Header.style.cjs}

@@ -5,7 +5,7 @@ const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Header = _styled__default.default.div.withConfig({
-  displayName: "Headerstyles__Header",
-  componentId: "RedisUI__sc-1q7a5zz-0"
+  displayName: "Headerstyle__Header",
+  componentId: "RedisUI__sc-1a4gj45-0"
 })(["display:flex;align-items:center;gap:", ";"], () => redisUiStyles.useTheme().components.windowBar.header.gap);
 exports.Header = Header;

package/dist/Popover/components/Content/components/WindowBar/components/Header/{Header.styles.js → Header.style.js}

@@ -1,8 +1,8 @@
 import _styled from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 const Header = _styled.div.withConfig({
-  displayName: "Headerstyles__Header",
-  componentId: "RedisUI__sc-1q7a5zz-0"
+  displayName: "Headerstyle__Header",
+  componentId: "RedisUI__sc-1a4gj45-0"
 })(["display:flex;align-items:center;gap:", ";"], () => useTheme().components.windowBar.header.gap);
 export {
   Header

package/dist/Popover/components/Content/components/WindowBar/components/Header/Header.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface WindowBarHeaderProps {
     children: React.ReactNode;
 }

package/dist/Popover/components/PopoverCard/PopoverCard.cjs

@@ -27,12 +27,10 @@ const PopoverCard = Object.assign(({
   }), jsxRuntime.jsxRuntimeExports.jsx(PopoverCard.Body, {
     text
   }), jsxRuntime.jsxRuntimeExports.jsx(PopoverCard.Footer, {
-    ...{
-      actionButtonText,
-      actionButtonHandler,
-      link,
-      linkText
-    }
+    actionButtonText,
+    actionButtonHandler,
+    link,
+    linkText
   })]
 }), {
   Compose: Compose.default,

package/dist/Popover/components/PopoverCard/PopoverCard.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { PopoverCardProps } from './PopoverCard.types';
 declare const PopoverCard: (({ text, title, actionButtonText, actionButtonHandler, link, linkText, windowBar, persistent, ...composeProps }: PopoverCardProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").ComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Popover/components/PopoverCard/PopoverCard.js

@@ -25,12 +25,10 @@ const PopoverCard = Object.assign(({
   }), jsxRuntimeExports.jsx(PopoverCard.Body, {
     text
   }), jsxRuntimeExports.jsx(PopoverCard.Footer, {
-    ...{
-      actionButtonText,
-      actionButtonHandler,
-      link,
-      linkText
-    }
+    actionButtonText,
+    actionButtonHandler,
+    link,
+    linkText
   })]
 }), {
   Compose,

package/dist/Popover/components/Trigger/Trigger.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadixPopover from '@radix-ui/react-popover';
 export declare const UnstyledTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixPopover.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;

package/dist/Popover/components/Trigger/Trigger.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PopoverTriggerProps {
     children: React.ReactNode;
     withButton?: boolean;

package/dist/ProgressBar/ProgressBar.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("../node_modules/react/jsx-runtime.cjs");
 const React = require("react");
-const ProgressBar_styles = require("./ProgressBar.styles.cjs");
+const ProgressBar_style = require("./ProgressBar.style.cjs");
 const ProgressBar = ({
   value,
   textIndicationPosition,
@@ -12,18 +12,18 @@ const ProgressBar = ({
   ...restProps
 }) => {
   const inRangeValue = React.useMemo(() => Number(Math.min(100, Math.max(0, value)).toFixed(1)), [value]);
-  return jsxRuntime.jsxRuntimeExports.jsxs(ProgressBar_styles.ProgressBar, {
+  return jsxRuntime.jsxRuntimeExports.jsxs(ProgressBar_style.ProgressBar, {
     textPosition,
     ...restProps,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_styles.Root, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_style.Root, {
       value: inRangeValue,
       size,
       variant,
-      children: jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_styles.Indicator, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_style.Indicator, {
         value: inRangeValue,
         variant
       })
-    }), textPosition && jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_styles.TypographyBody, {
+    }), textPosition && jsxRuntime.jsxRuntimeExports.jsx(ProgressBar_style.TypographyBody, {
       size: "S",
       variant: "semiBold",
       children: `${inRangeValue}%`

package/dist/ProgressBar/ProgressBar.js

@@ -1,6 +1,6 @@
 import { j as jsxRuntimeExports } from "../node_modules/react/jsx-runtime.js";
 import { useMemo } from "react";
-import { ProgressBar as ProgressBar$1, Root, Indicator, TypographyBody } from "./ProgressBar.styles.js";
+import { ProgressBar as ProgressBar$1, Root, Indicator, TypographyBody } from "./ProgressBar.style.js";
 const ProgressBar = ({
   value,
   textIndicationPosition,

package/dist/ProgressBar/{ProgressBar.styles.cjs → ProgressBar.style.cjs}

@@ -7,16 +7,16 @@ const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const Root = _styled__default.default(index.Root).withConfig({
-  displayName: "ProgressBarstyles__Root",
-  componentId: "RedisUI__sc-caf7e3-0"
+  displayName: "ProgressBarstyle__Root",
+  componentId: "RedisUI__sc-cdzix5-0"
 })(["overflow:hidden;width:100%;height:", ";background-color:", ";border-radius:", ";"], ({
   size
 }) => redisUiStyles.useTheme().components.progressBar.size[size].size, ({
   variant
 }) => redisUiStyles.useTheme().components.progressBar.variant[variant].color, () => redisUiStyles.useTheme().components.progressBar.borderRadius);
 const Indicator = _styled__default.default(index.Indicator).withConfig({
-  displayName: "ProgressBarstyles__Indicator",
-  componentId: "RedisUI__sc-caf7e3-1"
+  displayName: "ProgressBarstyle__Indicator",
+  componentId: "RedisUI__sc-cdzix5-1"
 })(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
   variant
 }) => redisUiStyles.useTheme().components.progressBar.indicator.variant[variant].color, ({
@@ -36,8 +36,8 @@ const getStyleByPosition = (position) => {
   `;
 };
 const ProgressBar = _styled__default.default.div.withConfig({
-  displayName: "ProgressBarstyles__ProgressBar",
-  componentId: "RedisUI__sc-caf7e3-2"
+  displayName: "ProgressBarstyle__ProgressBar",
+  componentId: "RedisUI__sc-cdzix5-2"
 })(["display:flex;", ";gap:", ";", "{order:", ";}"], ({
   textPosition
 }) => getStyleByPosition(textPosition), ({
@@ -49,8 +49,8 @@ const ProgressBar = _styled__default.default.div.withConfig({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
 const TypographyBody = _styled__default.default(Typography.default.Body).withConfig({
-  displayName: "ProgressBarstyles__TypographyBody",
-  componentId: "RedisUI__sc-caf7e3-3"
+  displayName: "ProgressBarstyle__TypographyBody",
+  componentId: "RedisUI__sc-cdzix5-3"
 })(["color:", ";"], () => redisUiStyles.useTheme().components.progressBar.text.color);
 exports.Indicator = Indicator;
 exports.ProgressBar = ProgressBar;

package/dist/ProgressBar/{ProgressBar.styles.d.ts → ProgressBar.style.d.ts}

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixProgressBar from '@radix-ui/react-progress';
 import { ProgressBarTextPosition, ProgressBarSize, ProgressBarVariant } from './ProgressBar.types';
 export declare const Root: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixProgressBar.ProgressProps & import("react").RefAttributes<HTMLDivElement>>, any, {
@@ -10,6 +9,6 @@ export declare const Indicator: import("styled-components").StyledComponent<impo
     variant: ProgressBarVariant;
 }, never>;
 export declare const ProgressBar: import("styled-components").StyledComponent<"div", any, {
-    textPosition?: ProgressBarTextPosition | undefined;
+    textPosition?: ProgressBarTextPosition;
 }, never>;
 export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/ProgressBar/{ProgressBar.styles.js → ProgressBar.style.js}

@@ -3,16 +3,16 @@ import { Root as Root$1, Indicator as Indicator$1 } from "../node_modules/@radix
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import Typography from "../Typography/Typography.js";
 const Root = _styled(Root$1).withConfig({
-  displayName: "ProgressBarstyles__Root",
-  componentId: "RedisUI__sc-caf7e3-0"
+  displayName: "ProgressBarstyle__Root",
+  componentId: "RedisUI__sc-cdzix5-0"
 })(["overflow:hidden;width:100%;height:", ";background-color:", ";border-radius:", ";"], ({
   size
 }) => useTheme().components.progressBar.size[size].size, ({
   variant
 }) => useTheme().components.progressBar.variant[variant].color, () => useTheme().components.progressBar.borderRadius);
 const Indicator = _styled(Indicator$1).withConfig({
-  displayName: "ProgressBarstyles__Indicator",
-  componentId: "RedisUI__sc-caf7e3-1"
+  displayName: "ProgressBarstyle__Indicator",
+  componentId: "RedisUI__sc-cdzix5-1"
 })(["width:100%;height:100%;background-color:", ";transform:", ";transition:transform 660ms cubic-bezier(0.65,0,0.35,1);"], ({
   variant
 }) => useTheme().components.progressBar.indicator.variant[variant].color, ({
@@ -32,8 +32,8 @@ const getStyleByPosition = (position) => {
   `;
 };
 const ProgressBar = _styled.div.withConfig({
-  displayName: "ProgressBarstyles__ProgressBar",
-  componentId: "RedisUI__sc-caf7e3-2"
+  displayName: "ProgressBarstyle__ProgressBar",
+  componentId: "RedisUI__sc-cdzix5-2"
 })(["display:flex;", ";gap:", ";", "{order:", ";}"], ({
   textPosition
 }) => getStyleByPosition(textPosition), ({
@@ -45,8 +45,8 @@ const ProgressBar = _styled.div.withConfig({
   textPosition: position
 }) => position === "top" || position === "left" ? 1 : 0);
 const TypographyBody = _styled(Typography.Body).withConfig({
-  displayName: "ProgressBarstyles__TypographyBody",
-  componentId: "RedisUI__sc-caf7e3-3"
+  displayName: "ProgressBarstyle__TypographyBody",
+  componentId: "RedisUI__sc-cdzix5-3"
 })(["color:", ";"], () => useTheme().components.progressBar.text.color);
 export {
   Indicator,

package/dist/RadioGroup/RadioGroup.d.ts

@@ -1,10 +1,6 @@
 import { RadioGroupProps, RestRadioGroupProps } from './RadioGroup.types';
 declare const RadioGroup: (({ items, ...restProps }: RestRadioGroupProps & RadioGroupProps) => import("react/jsx-runtime").JSX.Element) & {
-    Compose: ({ id, onChange, value: valueProp, defaultValue, disabled, layout, readOnly, ...restProps }: Pick<import("@radix-ui/react-radio-group").RadioGroupProps, "defaultValue" | "disabled" | "value"> & {
-        onChange?: ((value: string) => void) | undefined;
-        layout?: "horizontal" | "vertical" | undefined;
-        readOnly?: boolean | undefined;
-    } & import("./components/Compose/Compose.types").RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
+    Compose: ({ id, onChange, value: valueProp, defaultValue, disabled, layout, readOnly, ...restProps }: import("./components/Compose/Compose.types").RadioGroupComposeProps & import("./components/Compose/Compose.types").RestRadioGroupComposeProps) => import("react/jsx-runtime").JSX.Element;
     Item: (({ label, id, value, disabled, className, ...restProps }: import("./components/Item/Item.types").ItemProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, id, value, disabled, ...restProps }: import("./components/Item/components/Compose/Compose.types").RadioItemComposeProps) => import("react/jsx-runtime").JSX.Element;
         Indicator: ({ ...restProps }: import("./components/Item/components/Indicator/Indicator.types").IndicatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/RadioGroup/components/Compose/Compose.cjs

@@ -27,11 +27,13 @@ const Compose = ({
       value: readOnly,
       children: jsxRuntime.jsxRuntimeExports.jsx(Field_context.FieldDisabledTransProvider, {
         value: disabled,
-        children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.RadioGroupCompose, {
-          onValueChange: readOnly ? void 0 : setValue,
-          value,
-          orientation: layout,
-          ...restProps
+        children: jsxRuntime.jsxRuntimeExports.jsx(FormField_context.FieldAdditionTextIdTransProvider, {
+          children: jsxRuntime.jsxRuntimeExports.jsx(Compose_style.RadioGroupCompose, {
+            onValueChange: readOnly ? void 0 : setValue,
+            value,
+            orientation: layout,
+            ...restProps
+          })
         })
       })
     })

package/dist/RadioGroup/components/Compose/Compose.js

@@ -3,7 +3,7 @@ import { useControllableState } from "../../../node_modules/@radix-ui/react-use-
 import { RadioGroupCompose } from "./Compose.style.js";
 import { FieldDisabledTransProvider } from "../../../Inputs/components/Context/Field.context.js";
 import { SharedIdTransProvider } from "../../../Helpers/contexts/SharedId.context.js";
-import { FieldReadonlyTransProvider } from "../../../FormField/FormField.context.js";
+import { FieldReadonlyTransProvider, FieldAdditionTextIdTransProvider } from "../../../FormField/FormField.context.js";
 const Compose = ({
   id,
   onChange,
@@ -25,11 +25,13 @@ const Compose = ({
       value: readOnly,
       children: jsxRuntimeExports.jsx(FieldDisabledTransProvider, {
         value: disabled,
-        children: jsxRuntimeExports.jsx(RadioGroupCompose, {
-          onValueChange: readOnly ? void 0 : setValue,
-          value,
-          orientation: layout,
-          ...restProps
+        children: jsxRuntimeExports.jsx(FieldAdditionTextIdTransProvider, {
+          children: jsxRuntimeExports.jsx(RadioGroupCompose, {
+            onValueChange: readOnly ? void 0 : setValue,
+            value,
+            orientation: layout,
+            ...restProps
+          })
         })
       })
     })

package/dist/RadioGroup/components/Compose/Compose.style.cjs

@@ -8,12 +8,15 @@ const Field_context = require("../../../Inputs/components/Context/Field.context.
 const SharedId_context = require("../../../Helpers/contexts/SharedId.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
-const RadioGroupCompose = _styled__default.default(index.Root).attrs(() => ({
+const RadioGroupCompose = _styled__default.default(index.Root).attrs(({
+  "aria-describedby": ariaDescribedby
+}) => ({
   ...FormField_context.useFieldReadonly() ? {
     tabIndex: -1
   } : null,
   disabled: Field_context.useFieldDisabled() ? true : void 0,
-  id: SharedId_context.useSharedId()
+  id: SharedId_context.useSharedId(),
+  "aria-describedby": [FormField_context.useFieldAdditionTextId(), ariaDescribedby].filter(Boolean).join(" ") || void 0
 })).withConfig({
   displayName: "Composestyle__RadioGroupCompose",
   componentId: "RedisUI__sc-e1h84t-0"

package/dist/RadioGroup/components/Compose/Compose.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as RadioGroup from '@radix-ui/react-radio-group';
 export declare const RadioGroupCompose: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/RadioGroup/components/Compose/Compose.style.js

@@ -1,15 +1,18 @@
 import _styled, { css } from "styled-components";
 import { Root as Root2 } from "../../../node_modules/@radix-ui/react-radio-group/dist/index.js";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
-import { useFieldReadonly } from "../../../FormField/FormField.context.js";
+import { useFieldReadonly, useFieldAdditionTextId } from "../../../FormField/FormField.context.js";
 import { useFieldDisabled } from "../../../Inputs/components/Context/Field.context.js";
 import { useSharedId } from "../../../Helpers/contexts/SharedId.context.js";
-const RadioGroupCompose = _styled(Root2).attrs(() => ({
+const RadioGroupCompose = _styled(Root2).attrs(({
+  "aria-describedby": ariaDescribedby
+}) => ({
   ...useFieldReadonly() ? {
     tabIndex: -1
   } : null,
   disabled: useFieldDisabled() ? true : void 0,
-  id: useSharedId()
+  id: useSharedId(),
+  "aria-describedby": [useFieldAdditionTextId(), ariaDescribedby].filter(Boolean).join(" ") || void 0
 })).withConfig({
   displayName: "Composestyle__RadioGroupCompose",
   componentId: "RedisUI__sc-e1h84t-0"

package/dist/RadioGroup/components/Item/Item.context.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ItemContextType } from './components/Compose/Compose.types';
 export declare const useItemContext: () => ItemContextType, ItemContextProvider: import("react").Provider<ItemContextType>;

package/dist/RadioGroup/components/Item/components/Indicator/Indicator.style.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 import * as RadioGroup from '@radix-ui/react-radio-group';
 export type RadioStates = 'on' | 'off';
-export declare const RadioGroupItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
+export declare const RadioGroupItemIndicator: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, any, import("styled-components").ThemeProps<import("@redislabsdev/redis-ui-styles").Theme>, never>;
 export declare const RadioGroupItemIndicatorCheck: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

package/dist/SearchBar/SearchBar.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SearchBarContextProps } from './SearchBar.types';
 export declare const SearchBarContext: import("react").Context<SearchBarContextProps | null>;
 export declare const useSearchBarContext: () => SearchBarContextProps;

package/dist/SearchBar/SearchBar.d.ts

@@ -1,11 +1,10 @@
-/// <reference types="react" />
 import { SearchBarProps } from './SearchBar.types';
 declare const SearchBar: (({ onFiltersChange, availableFilters, activeFilters, searchValue, onSearchChange, availableColumns, activeColumns, onColumnsChange, ...restProps }: SearchBarProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, activeFilters }: import("./components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
     FiltersSection: ({ availableFilters, onFiltersChange }: import("./components/FiltersSection/FiltersSection.types").FiltersContainerProps) => import("react/jsx-runtime").JSX.Element;
     SearchSection: (({ onSearchChange, searchValue, ...restProps }: import("./components/SearchSection/SearchSection.types").SearchSectionProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-        SearchInput: ({ ...restProps }: import("..").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+        SearchInput: ({ ...restProps }: import("./components/SearchSection/components/SearchInput/SearchInput.types").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
         Actions: (({ availableColumns, activeColumns, onColumnsChange }: import("./components/SearchSection/components/Actions/Actions.types").ActionProps) => import("react/jsx-runtime").JSX.Element) & {
             Compose: ({ children, ...restProps }: import("./components/SearchSection/components/Actions/components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
             FilterToggle: () => import("react/jsx-runtime").JSX.Element;

package/dist/SearchBar/SearchBar.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { FilterActive, FilterItemConfig } from '../Filters';
 import { ColumnOption } from './components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.types';
 export interface SearchBarProps {

package/dist/SearchBar/components/FiltersSection/FiltersSection.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import * as RadixCollapsible from '@radix-ui/react-collapsible';
 export declare const FiltersContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CollapsedFiltersContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<RadixCollapsible.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/SearchBar/components/SearchSection/SearchSection.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { SearchSectionProps } from './SearchSection.types';
 declare const SearchSection: (({ onSearchChange, searchValue, ...restProps }: SearchSectionProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ children, ...restProps }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
-    SearchInput: ({ ...restProps }: import("../../..").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchInput: ({ ...restProps }: import("./components/SearchInput/SearchInput.types").SearchInputProps) => import("react/jsx-runtime").JSX.Element;
     Actions: (({ availableColumns, activeColumns, onColumnsChange }: import("./components/Actions/Actions.types").ActionProps) => import("react/jsx-runtime").JSX.Element) & {
         Compose: ({ children, ...restProps }: import("./components/Actions/components/Compose/Compose.types").SearchBarComposeProps) => import("react/jsx-runtime").JSX.Element;
         FilterToggle: () => import("react/jsx-runtime").JSX.Element;

package/dist/SearchBar/components/SearchSection/SearchSection.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ColumnOption } from './components/Actions/components/ColumnSelector/ColumnSelector.types';
 export interface SearchSectionProps {
     searchValue: string;

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.cjs

@@ -26,9 +26,12 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
           pressed: isOpen,
+          "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
             icon: redisUiIcons.ColumnsIcon
-          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterActiveIcon, {})]
+          }), "Columns", shouldShowFilterIndication && jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+            icon: redisUiIcons.FilterActiveIcon
+          })]
         })
       }), jsxRuntime.jsxRuntimeExports.jsx(MultiSelect.default.Content, {})]
     })

package/dist/SearchBar/components/SearchSection/components/Actions/components/ColumnSelector/ColumnSelector.js

@@ -24,9 +24,12 @@ const ColumnSelector = ({
         customContainer: true,
         children: jsxRuntimeExports.jsxs(ToggleButton, {
           pressed: isOpen,
+          "aria-description": shouldShowFilterIndication ? "Filter Active" : void 0,
           children: [jsxRuntimeExports.jsx(Button.Icon, {
             icon: ColumnsIcon
-          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(FilterActiveIcon, {})]
+          }), "Columns", shouldShowFilterIndication && jsxRuntimeExports.jsx(Button.Icon, {
+            icon: FilterActiveIcon
+          })]
         })
       }), jsxRuntimeExports.jsx(MultiSelect.Content, {})]
     })

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.cjs

@@ -6,6 +6,7 @@ const redisUiIcons = require("@redislabsdev/redis-ui-icons");
 const React = require("react");
 const SearchBar_context = require("../../../../../../SearchBar.context.cjs");
 const ToggleButton = require("../../../../../../../Button/ToggleButton/ToggleButton.cjs");
+const Button = require("../../../../../../../Button/Button.cjs");
 const FilterToggle = () => {
   const {
     filtersOpen,
@@ -19,8 +20,8 @@ const FilterToggle = () => {
     asChild: true,
     children: jsxRuntime.jsxRuntimeExports.jsxs(ToggleButton.default, {
       pressed: filtersOpen,
-      children: [jsxRuntime.jsxRuntimeExports.jsx(redisUiIcons.FilterIcon, {
-        customColor: "currentColor"
+      children: [jsxRuntime.jsxRuntimeExports.jsx(Button.default.Icon, {
+        icon: redisUiIcons.FilterIcon
       }), "Filter", activeFiltersValueCount > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {
         count: activeFiltersValueCount
       })]

package/dist/SearchBar/components/SearchSection/components/Actions/components/FiltersToggle/FiltersToggle.js

@@ -4,6 +4,7 @@ import { FilterIcon } from "@redislabsdev/redis-ui-icons";
 import { useMemo } from "react";
 import { useSearchBarContext } from "../../../../../../SearchBar.context.js";
 import ToggleButton from "../../../../../../../Button/ToggleButton/ToggleButton.js";
+import Button from "../../../../../../../Button/Button.js";
 const FilterToggle = () => {
   const {
     filtersOpen,
@@ -17,8 +18,8 @@ const FilterToggle = () => {
     asChild: true,
     children: jsxRuntimeExports.jsxs(ToggleButton, {
       pressed: filtersOpen,
-      children: [jsxRuntimeExports.jsx(FilterIcon, {
-        customColor: "currentColor"
+      children: [jsxRuntimeExports.jsx(Button.Icon, {
+        icon: FilterIcon
       }), "Filter", activeFiltersValueCount > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {
         count: activeFiltersValueCount
       })]

package/dist/Section/Section.context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionContextProps } from './Section.types';
 export declare const SectionContext: import("react").Context<SectionContextProps | null>;
 export declare const useSectionContext: () => SectionContextProps;

package/dist/Section/Section.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionProps } from './Section.types';
 declare const Section: (({ content, label, actions, summary, summaryAlwaysVisible, ...composeProps }: SectionProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: ({ open: controlledOpen, defaultOpen, disabled, onOpenChange, collapsible, children, ...props }: import("./components/Compose/Compose.types").SectionComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Body/Body.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as Collapsible from '@radix-ui/react-collapsible';
 export declare const SectionBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/Section/components/Compose/Compose.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import * as Collapsible from '@radix-ui/react-collapsible';
 export declare const CollapsibleRoot: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Collapsible.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

package/dist/Section/components/Header/Header.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SectionHeaderProps } from './Header.types';
 export declare const Header: (({ label, actions }: SectionHeaderProps) => import("react/jsx-runtime").JSX.Element) & {
     Compose: (props: import("./components/Compose/Compose.types").SectionHeaderComposeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Section/components/Header/components/CategoryValueList/CategoryValueList.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<({ children, renderExtra, maxRows, minItems, expectedGap, estimatedItemsPerRow, ...restProps }: import("../../../../../Overflow").OverflowProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
 export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CategoryValueItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Category: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Section/components/Header/components/CategoryValueList/components/CategoryValueChip/CategoryValueChip.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface CategoryValueChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
     category: string;
     value: string;

package/dist/Section/components/Header/components/CollapseButton/CollapseButton.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const SectionCollapseButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Button").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>, any, {}, never>;
 export declare const SectionCollapseIcon: import("styled-components").StyledComponent<({ size, customSize, color, customColor, title: titleProp, ...rest }: import("@redislabsdev/redis-ui-icons").MonochromeIconProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;

package/dist/Section/components/Header/components/Label/Label.style.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 export declare const SectionHeaderLabelText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../../Typography").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const SectionHeaderLabel: import("styled-components").StyledComponent<"label", any, {}, never>;