@redis-ui/components 41.3.7 → 41.11.0

package/README.md

@@ -0,0 +1,330 @@
+# Creating New Components Guide
+
+This guide covers best practices, conventions, and patterns for creating new components in the `@redislabsdev/redis-ui-components` library.
+
+## Table of Contents
+
+- [Radix UI Foundation](#radix-ui-foundation)
+- [Component Structure](#component-structure)
+- [File Organization](#file-organization)
+- [Component Composition](#component-composition)
+- [Testing](#testing)
+
+## Radix UI Foundation
+
+This component library is built on top of [Radix UI](https://www.radix-ui.com/), a low-level UI component library that provides unstyled, accessible primitives for building high-quality design systems and web applications.
+
+> **Note:** Not all components need Radix. Simple presentational components (like Button, Badge, Card) can be built from scratch using styled-components.
+
+> **Note:** When using Radix, or any other external library for that matter, make sure you don't expose Radix types in public API. Always wrap them in our own types.
+
+## Component Structure
+
+### Basic Component Anatomy
+
+Every component should follow this folder structure:
+
+```
+src/ComponentName/
+├── ComponentName.tsx          # Main component implementation
+├── ComponentName.types.ts     # Types and interfaces
+├── ComponentName.style.ts     # Styles
+├── ComponentName.test.tsx     # Unit tests
+├── index.ts                   # Public exports
+└── components/                # Sub-components (if needed)
+    └── SubComponent/
+        ├── SubComponent.tsx
+        ├── SubComponent.types.ts
+        └── SubComponent.style.ts
+```
+
+The tree is recurisve, so you can have sub-components inside sub-components, etc.
+
+### Example: Simple Component
+
+```tsx
+// Card.tsx
+import * as S from './Card.style';
+import { CardProps } from './Card.types';
+
+const Card = (props: CardProps) => <S.Card {...props} />;
+
+export default Card;
+
+```
+
+---
+
+## File Organization
+
+### 1. Component File (`ComponentName.tsx`)
+
+**✅ DO:**
+- Use `React.forwardRef` when the component wraps a DOM element
+- Provide default props for optional parameters
+- Import styles as `* as S` for namespacing
+- Keep the main component focused and delegate to sub-components
+
+**❌ DON'T:**
+- Mix business logic with presentation
+- Hardcode theme values
+
+### 2. Types File (`ComponentName.types.ts`)
+
+**Conventions:**
+- Always use separate file for types
+- Extend HTML element attributes when wrapping native elements
+- Use generics for flexible, reusable components
+- If there are sub-components, create separate types file for each of them and compose the styles at the root level
+- Use fully qualified names for exported types
+
+```tsx
+// Button.types.ts
+import { ButtonHTMLAttributes } from 'react';
+
+export const buttonSizes = ['large', 'medium', 'small'] as const;
+export const buttonVariants = ['primary', 'destructive', 'secondary-fill'] as const;
+
+export type ButtonSizes = (typeof buttonSizes)[number];
+export type ButtonVariants = (typeof buttonVariants)[number];
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: ButtonSizes;
+  variant?: ButtonVariants;
+  disabled?: boolean;
+}
+```
+
+### 3. Style File (`ComponentName.style.ts`)
+
+**✅ DO:**
+- Access theme values via `useTheme().components.componentName`
+- Use token maps for consistent styling
+- Use fully qualified names for exported styled components
+
+```tsx
+// Button.style.ts
+import styled, { css } from 'styled-components/macro';
+import { getFocusStyle, useTheme } from '@redislabsdev/redis-ui-styles';
+import { ButtonProps } from './Button.types';
+
+export const baseButtonStyle = css`
+  border: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+
+  ${getFocusStyle()};
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export const Button = styled.button<Required<Pick<ButtonProps, 'size' | 'variant'>>>`
+  ${baseButtonStyle};
+  gap: ${() => useTheme().components.button.gap};
+  padding: ${({ size }) => useTheme().components.button.sizes[size].padding};
+  background-color: ${({ variant }) => useTheme().components.button.variants[variant].bgColor};
+`;
+```
+
+**❌ DON'T:**
+- Hardcode colors, spacing, or other design tokens
+- Use inline styles
+
+### 4. Index File (`index.ts`)
+
+**Conventions:**
+- Export the default component
+- Export all types using `export *`
+- Export styles as namespace if needed for external customization
+- Export utility hooks/functions if applicable
+
+## Component Composition
+
+> **Note:** It’s best to discuss whether composition is appropriate early on, ideally during the design phase. By the time a PR is under review, changing this decision will involve substantial changes. Feel free to reach out to FE Infra team for advice.
+
+### Object.assign Pattern
+
+For components with sub-components, use `Object.assign`:
+
+```tsx
+// Tabs.tsx
+import { TabsProps } from './Tabs.types';
+import ContentPane from './components/ContentPane/ContentPane';
+import TabBar from './components/TabBar/TabBar';
+import Compose from './components/Compose/Compose';
+
+const Tabs = Object.assign(
+  ({ tabs, variant, ...restProps }: TabsProps) => (
+    <Tabs.Compose {...restProps}>
+      <Tabs.TabBar tabs={tabs} variant={variant} />
+      <Tabs.ContentPane tabs={tabs} />
+    </Tabs.Compose>
+  ),
+  { Compose, TabBar, ContentPane }
+);
+
+export default Tabs;
+```
+
+**Benefits:**
+- Allows both simple and advanced usage patterns. Note that composed components should also provide simple props for non-advanced usage.
+- Provides flexibility for custom layouts
+- Maintains clean API surface
+
+### Context Pattern
+
+For sharing state between parent and children:
+
+```tsx
+// Component.context.ts
+import { createContext, useContext } from 'react';
+
+export const ComponentContext = createContext<ComponentContextParams>({
+  variant: 'default',
+  size: 'medium'
+});
+
+export const useComponentParams = (
+  customParams: Partial<ComponentContextParams> = {}
+): ComponentContextParams => {
+  const context = useContext(ComponentContext);
+  return customParams ? assignWith({}, context, customParams, skipUndefined) : context;
+};
+```
+
+**✅ DO:**
+- Use context for deeply nested component communication
+- Memoize context values to prevent unnecessary re-renders
+- Provide sensible defaults
+
+**❌ DON'T:**
+- Overuse context for simple prop drilling
+- Forget to memoize context values
+
+## Testing
+
+### Test File Structure
+
+```tsx
+// Component.test.tsx
+import { render, screen } from '@testing-library/react';
+import Component from './Component';
+
+describe('Component', () => {
+  describe('Basic rendering', () => {
+    it('should render with default props', () => {
+      render(<Component>Test content</Component>);
+      expect(screen.getByText('Test content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    it('should render primary variant', () => {
+      render(<Component variant="primary">Primary</Component>);
+      expect(screen.getByText('Primary')).toBeInTheDocument();
+    });
+  });
+
+  describe('Composition mode', () => {
+    it('should render with composition components', () => {
+      render(
+        <Component.Compose>
+          <Component.Header>Header</Component.Header>
+          <Component.Body>Body</Component.Body>
+        </Component.Compose>
+      );
+      expect(screen.getByText('Header')).toBeInTheDocument();
+    });
+  });
+});
+```
+
+### **Testing Library Queries**
+
+Prefer queries in this order:
+1. `getByRole` (most accessible)
+2. `getByLabelText`
+3. `getByPlaceholderText`
+4. `getByText`
+5. `getByTestId` (last resort)
+
+You can find more info in [Testing Library docs](https://testing-library.com/docs/queries/about/).
+
+## Tips & Tricks
+
+### 1. **Transient Props in Styled Components**
+
+Use `$` prefix for transient props:
+
+```tsx
+// ✅ Good - won't pass $variant to DOM
+const Button = styled.button<{ $variant: string }>`
+  color: ${({ $variant }) => $variant === 'primary' ? 'blue' : 'gray'};
+`;
+
+// ❌ Bad - will pass variant to DOM and cause warnings
+const Button = styled.button<{ variant: string }>`
+  color: ${({ variant }) => variant === 'primary' ? 'blue' : 'gray'};
+`;
+```
+
+### 2. **Theme Type Safety**
+
+Create theme types for your component in `packages/styles`:
+
+```tsx
+// packages/styles/src/themes/types/theme/components/myComponent.types.ts
+export type MyComponentTheme = {
+  padding: string;
+  gap: string;
+  variants: {
+    primary: { bgColor: string; textColor: string };
+    secondary: { bgColor: string; textColor: string };
+  };
+};
+```
+
+Then add to all theme files (light, dark, light2, dark2).
+
+### 3. **Composition Helpers**
+
+Use helper types from `Helpers`:
+
+```tsx
+import { ComposeElementProps, ChildFree } from '../Helpers';
+
+// ComposeElementProps: Standard props for composition components
+// ChildFree: Omits children from props
+type MyProps = ChildFree<ComposeElementProps>;
+```
+
+### 4. **Storybook Integration**
+
+Create stories in `docs/stories/ComponentName/`:
+
+```tsx
+// ComponentName.stories.tsx
+import { Meta, StoryObj } from '@storybook/react';
+import { ComponentName } from '@redislabsdev/redis-ui-components';
+
+const meta: Meta<typeof ComponentName> = {
+  component: ComponentName,
+  title: 'Components/ComponentName'
+};
+
+export default meta;
+type Story = StoryObj<typeof ComponentName>;
+
+export const Playground: Story = {
+  args: {
+    variant: 'primary',
+    size: 'medium'
+  }
+};
+```
+
+> **Note:** For composition components, create a separate `ComponentNameCompose.mdx` file.

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

@@ -3,4 +3,4 @@ export declare const AppSelectorItem: import("styled-components").StyledComponen
 export declare const AppSelectionMenuItem: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const Label: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Banner/components/Message/Message.style.d.ts

@@ -1 +1,2 @@
-export declare const Message: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Message: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Button/TextButton/TextButton.cjs

@@ -7,6 +7,7 @@ const Button_context = require("../Button.context.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const TextButton = React__default.default.forwardRef(({
+  size = "M",
   variant = "primary",
   children,
   ...restProps
@@ -16,6 +17,7 @@ const TextButton = React__default.default.forwardRef(({
     children: jsxRuntime.jsxRuntimeExports.jsx(TextButton_style.TextButton, {
       type: "button",
       variant,
+      size,
       ref,
       ...restProps,
       children

package/dist/Button/TextButton/TextButton.js

@@ -3,6 +3,7 @@ import React__default from "react";
 import { TextButton as TextButton$2 } from "./TextButton.style.js";
 import { ButtonContext } from "../Button.context.js";
 const TextButton = React__default.forwardRef(({
+  size = "M",
   variant = "primary",
   children,
   ...restProps
@@ -12,6 +13,7 @@ const TextButton = React__default.forwardRef(({
     children: jsxRuntimeExports.jsx(TextButton$2, {
       type: "button",
       variant,
+      size,
       ref,
       ...restProps,
       children

package/dist/Button/TextButton/TextButton.style.cjs

@@ -4,23 +4,29 @@ const _styled = require("styled-components");
 const redisUiStyles = require("@redislabsdev/redis-ui-styles");
 const Button_style = require("../Button.style.cjs");
 const Body_style = require("../../Typography/components/Body/Body.style.cjs");
+const css_utils = require("../../Helpers/css.utils.cjs");
 const Button_style_utils = require("../Button.style.utils.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const getVariantStyle = (variant) => (theme) => {
   const themeVariant = variant ? theme.components.textButton.variants[variant] : null;
   return themeVariant ? _styled.css`
-        padding: ${themeVariant.padding};
-        border-radius: ${themeVariant.borderRadius};
         border: 1px solid transparent;
         box-sizing: border-box;
         ${Button_style_utils.getButtonStatesStyle(themeVariant.states, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap])};
       ` : null;
 };
+const sizeTokenMaps = [css_utils.tokenMaps.borderRadius, css_utils.tokenMaps.padding, css_utils.tokenMaps.height, css_utils.tokenMaps.lineHeight, css_utils.tokenMaps.gap];
 const TextButton = _styled__default.default.button.withConfig({
   displayName: "TextButtonstyle__TextButton",
   componentId: "RedisUI__sc-1t8veic-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";", ";"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.textButton.height, () => redisUiStyles.useTheme().components.textButton.lineHeight, () => redisUiStyles.useTheme().components.textButton.gap, () => Body_style.useBodyStyles(), ({
+})(["", ";", ";", ";", ";vertical-align:unset;"], Button_style.baseButtonStyle, ({
+  size,
+  variant
+}) => {
+  const layout = variant.includes("inline") ? "inline" : "block";
+  return css_utils.styleFromTokens(sizeTokenMaps, redisUiStyles.useTheme().components.textButton.layouts[layout].sizes[size]);
+}, () => Body_style.useBodyStyles(), ({
   variant
 }) => getVariantStyle(variant)(redisUiStyles.useTheme()));
 exports.TextButton = TextButton;

package/dist/Button/TextButton/TextButton.style.d.ts

@@ -1,2 +1,2 @@
 import { TextButtonProps } from './TextButton.types';
-export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant">>, never>;
+export declare const TextButton: import("styled-components").StyledComponent<"button", any, Required<Pick<TextButtonProps, "variant" | "size">>, never>;

package/dist/Button/TextButton/TextButton.style.js

@@ -2,21 +2,27 @@ import _styled, { css } from "styled-components";
 import { useTheme } from "@redislabsdev/redis-ui-styles";
 import { baseButtonStyle } from "../Button.style.js";
 import { useBodyStyles } from "../../Typography/components/Body/Body.style.js";
+import { styleFromTokens, tokenMaps } from "../../Helpers/css.utils.js";
 import { getButtonStatesStyle, bgColorMap, textColorMap, borderColorMap } from "../Button.style.utils.js";
 const getVariantStyle = (variant) => (theme) => {
   const themeVariant = variant ? theme.components.textButton.variants[variant] : null;
   return themeVariant ? css`
-        padding: ${themeVariant.padding};
-        border-radius: ${themeVariant.borderRadius};
         border: 1px solid transparent;
         box-sizing: border-box;
         ${getButtonStatesStyle(themeVariant.states, [bgColorMap, textColorMap, borderColorMap])};
       ` : null;
 };
+const sizeTokenMaps = [tokenMaps.borderRadius, tokenMaps.padding, tokenMaps.height, tokenMaps.lineHeight, tokenMaps.gap];
 const TextButton = _styled.button.withConfig({
   displayName: "TextButtonstyle__TextButton",
   componentId: "RedisUI__sc-1t8veic-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";", ";"], baseButtonStyle, () => useTheme().components.textButton.height, () => useTheme().components.textButton.lineHeight, () => useTheme().components.textButton.gap, () => useBodyStyles(), ({
+})(["", ";", ";", ";", ";vertical-align:unset;"], baseButtonStyle, ({
+  size,
+  variant
+}) => {
+  const layout = variant.includes("inline") ? "inline" : "block";
+  return styleFromTokens(sizeTokenMaps, useTheme().components.textButton.layouts[layout].sizes[size]);
+}, () => useBodyStyles(), ({
   variant
 }) => getVariantStyle(variant)(useTheme()));
 export {

package/dist/Button/TextButton/TextButton.types.d.ts

@@ -1,6 +1,8 @@
 import { ButtonHTMLAttributes } from 'react';
+export type TextButtonSizes = 'M';
 export declare const textButtonVariants: readonly ["primary", "destructive", "primary-inline", "destructive-inline"];
 export type TextButtonVariants = (typeof textButtonVariants)[number];
 export interface TextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: TextButtonSizes;
     variant?: TextButtonVariants;
 }

package/dist/Button/ToggleButton/ToggleButton.style.cjs

@@ -11,5 +11,5 @@ const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 const ToggleButton = _styled__default.default.button.withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-state='on'])){", "}&:where([data-state='on']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], Button_style.baseButtonStyle, () => redisUiStyles.useTheme().components.toggleButton.height, () => redisUiStyles.useTheme().components.toggleButton.lineHeight, () => redisUiStyles.useTheme().components.toggleButton.gap, () => Body_style.useBodyStyles(), () => redisUiStyles.useTheme().components.toggleButton.padding, () => redisUiStyles.useTheme().components.toggleButton.borderRadius, () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.off, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), () => Button_style_utils.getButtonStatesStyle(redisUiStyles.useTheme().components.toggleButton.toggleStates.on, [Button_style_utils.bgColorMap, Button_style_utils.textColorMap, Button_style_utils.borderColorMap]), IndicatorCount_style.IndicatorCount, () => redisUiStyles.useTheme().components.toggleButton.counter.disabledOpacity);
 exports.ToggleButton = ToggleButton;

package/dist/Button/ToggleButton/ToggleButton.style.js

@@ -7,7 +7,7 @@ import { IndicatorCount } from "./components/IndicatorCount/IndicatorCount.style
 const ToggleButton = _styled.button.withConfig({
   displayName: "ToggleButtonstyle__ToggleButton",
   componentId: "RedisUI__sc-1o8wm2j-0"
-})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([data-state='on'])){", "}&:where([data-state='on']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
+})(["", ";height:", ";line-height:", ";gap:", ";", ";padding:", ";border-radius:", ";border:1px solid transparent;&:where(:not([aria-pressed='true'])){", "}&:where([aria-pressed='true']){", "}&:disabled ", "{opacity:", ";}"], baseButtonStyle, () => useTheme().components.toggleButton.height, () => useTheme().components.toggleButton.lineHeight, () => useTheme().components.toggleButton.gap, () => useBodyStyles(), () => useTheme().components.toggleButton.padding, () => useTheme().components.toggleButton.borderRadius, () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.off, [bgColorMap, textColorMap, borderColorMap]), () => getButtonStatesStyle(useTheme().components.toggleButton.toggleStates.on, [bgColorMap, textColorMap, borderColorMap]), IndicatorCount, () => useTheme().components.toggleButton.counter.disabledOpacity);
 export {
   ToggleButton
 };

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

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { CheckboxVariants, CheckedType } from '../Compose/Compose.types';
 export declare const CheckboxLabel: import("styled-components").StyledComponent<"label", any, {
     $checked: CheckedType;
     $variant: CheckboxVariants;
 }, never>;
-export declare const TypographyBody: import("styled-components").StyledComponent<({ size, variant, color, component, ellipsis, ...restProps }: import("../../../Typography").TypographyBodyProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+export declare const TypographyBody: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../Typography").TypographyBodyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/ChipList/Components/ExtraItem.cjs

@@ -31,19 +31,20 @@ const ExtraItem = ({
     children: jsxRuntime.jsxRuntimeExports.jsx(Tooltip.default, {
       onOpenChange,
       interactive,
-      disableInteractionHelper: true,
-      withButton: true,
       placement: "right",
       backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntime.jsxRuntimeExports.jsx(ExtraItem_style.ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content
       }),
-      children: jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
-        text: `+${chips.length}`,
-        disabled,
-        size,
-        variant
+      children: jsxRuntime.jsxRuntimeExports.jsx("span", {
+        tabIndex: 0,
+        children: jsxRuntime.jsxRuntimeExports.jsx(Chip.default, {
+          text: `+${chips.length}`,
+          disabled,
+          size,
+          variant
+        })
       })
     })
   });

package/dist/ChipList/Components/ExtraItem.js

@@ -29,19 +29,20 @@ const ExtraItem = ({
     children: jsxRuntimeExports.jsx(Tooltip, {
       onOpenChange,
       interactive,
-      disableInteractionHelper: true,
-      withButton: true,
       placement: "right",
       backgroundColor: theme.components.chipList.popupList.bgColor,
       content: content && jsxRuntimeExports.jsx(ExtraListContainer, {
         ref: tooltipScrollContainerRef,
         children: content
       }),
-      children: jsxRuntimeExports.jsx(Chip, {
-        text: `+${chips.length}`,
-        disabled,
-        size,
-        variant
+      children: jsxRuntimeExports.jsx("span", {
+        tabIndex: 0,
+        children: jsxRuntimeExports.jsx(Chip, {
+          text: `+${chips.length}`,
+          disabled,
+          size,
+          variant
+        })
       })
     })
   });

package/dist/ChipList/Components/ExtraItem.style.d.ts

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

package/dist/Drawer/components/Description/components/Text/Text.style.d.ts

@@ -1 +1,2 @@
-export declare const Text: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Text: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Drawer/components/Header/components/Title/Title.style.d.ts

@@ -1 +1,2 @@
-export declare const Title: import("styled-components").StyledComponent<({ size, ellipsis, color, variant, component, ...restProps }: import("../../../../..").TypographyHeadingProps) => import("react/jsx-runtime").JSX.Element, any, {}, never>;
+/// <reference types="react" />
+export declare const Title: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../../../../..").TypographyHeadingProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.cjs

@@ -32,8 +32,8 @@ const MultiSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
         children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {

package/dist/Filters/components/MultiSelectFilter/MultiSelectFilter.js

@@ -30,8 +30,8 @@ const MultiSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntimeExports.jsx(Menu.Trigger, {
-      children: jsxRuntimeExports.jsx(MenuTriggerContainer, {
+    children: [jsxRuntimeExports.jsx(MenuTriggerContainer, {
+      children: jsxRuntimeExports.jsx(Menu.Trigger, {
         children: jsxRuntimeExports.jsxs(FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.cjs

@@ -42,8 +42,8 @@ const MultiTreeSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
-      children: jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+    children: [jsxRuntime.jsxRuntimeExports.jsx(MultiSelectFilter_styles.MenuTriggerContainer, {
+      children: jsxRuntime.jsxRuntimeExports.jsx(Menu.default.Trigger, {
         children: jsxRuntime.jsxRuntimeExports.jsxs(MultiSelectFilter_styles.FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntime.jsxRuntimeExports.jsx(ToggleButton.default.IndicatorCount, {

package/dist/Filters/components/MultiTreeSelectFilter/MultiTreeSelectFilter.js

@@ -40,8 +40,8 @@ const MultiTreeSelectFilter = ({
     ...restProps,
     open: isMenuOpen,
     onOpenChange,
-    children: [jsxRuntimeExports.jsx(Menu.Trigger, {
-      children: jsxRuntimeExports.jsx(MenuTriggerContainer, {
+    children: [jsxRuntimeExports.jsx(MenuTriggerContainer, {
+      children: jsxRuntimeExports.jsx(Menu.Trigger, {
         children: jsxRuntimeExports.jsxs(FilterToggleButton, {
           pressed: isMenuOpen,
           children: [filter.label, activeOptionsNum > 0 && jsxRuntimeExports.jsx(ToggleButton.IndicatorCount, {

package/dist/FormField/FormField.context.cjs

@@ -2,10 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const PrimitiveContextState = require("../Helpers/contexts/PrimitiveContextState.cjs");
 const [useFieldStatus, FieldStatusProvider, FieldStatusTransProvider] = PrimitiveContextState.createPrimitiveContextState();
+const [useFieldRequired, FieldRequiredProvider, FieldRequiredTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 const [useFieldReadonly, FieldReadonlyProvider, FieldReadonlyTransProvider] = PrimitiveContextState.createPrimitiveContextState();
 exports.FieldReadonlyProvider = FieldReadonlyProvider;
 exports.FieldReadonlyTransProvider = FieldReadonlyTransProvider;
+exports.FieldRequiredProvider = FieldRequiredProvider;
+exports.FieldRequiredTransProvider = FieldRequiredTransProvider;
 exports.FieldStatusProvider = FieldStatusProvider;
 exports.FieldStatusTransProvider = FieldStatusTransProvider;
 exports.useFieldReadonly = useFieldReadonly;
+exports.useFieldRequired = useFieldRequired;
 exports.useFieldStatus = useFieldStatus;

package/dist/FormField/FormField.context.d.ts

@@ -3,6 +3,9 @@ import { FieldStatus } from './FormField.types';
 export declare const useFieldStatus: (value?: FieldStatus | undefined) => FieldStatus | undefined, FieldStatusProvider: ({ value, children }: Partial<import("react").ProviderProps<FieldStatus>>) => import("react/jsx-runtime").JSX.Element, FieldStatusTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<FieldStatus>> & {
     passOnlyStateDown?: FieldStatus | ((state: FieldStatus) => boolean) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
+export declare const useFieldRequired: (value?: boolean | undefined) => boolean | undefined, FieldRequiredProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldRequiredTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
+    passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useFieldReadonly: (value?: boolean | undefined) => boolean | undefined, FieldReadonlyProvider: ({ value, children }: Partial<import("react").ProviderProps<boolean>>) => import("react/jsx-runtime").JSX.Element, FieldReadonlyTransProvider: ({ value, passOnlyStateDown, children }: Partial<import("react").ProviderProps<boolean>> & {
     passOnlyStateDown?: boolean | ((state: boolean) => boolean) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;