@box/blueprint-web 5.31.3

package/lib-esm/branding-styles/utils/variables.d.ts

@@ -0,0 +1,117 @@
+export declare const white = "#fff";
+export declare const black = "#000";
+export declare const countBadgeBackground = "#e9163c";
+export declare const bdlBoxBlue = "#0061d5";
+export declare const bdlBoxBlue80 = "#3381dd";
+export declare const bdlBoxBlue50 = "#7fb0ea";
+export declare const bdlBoxBlue40 = "#99c0ee";
+export declare const bdlBoxBlue30 = "#b2cff2";
+export declare const bdlBoxBlue20 = "#ccdff7";
+export declare const bdlBoxBlue10 = "#e5effa";
+export declare const bdlBoxBlue05 = "#f2f7fd";
+export declare const bdlBoxBlue02 = "#fafcfe";
+export declare const bdlGray = "#222";
+export declare const bdlGray80 = "#4e4e4e";
+export declare const bdlGray65 = "#6f6f6f";
+export declare const bdlGray62 = "#767676";
+export declare const bdlGray50 = "#909090";
+export declare const bdlGray40 = "#a7a7a7";
+export declare const bdlGray30 = "#bcbcbc";
+export declare const bdlGray20 = "#d3d3d3";
+export declare const bdlGray10 = "#e8e8e8";
+export declare const bdlGray05 = "#f4f4f4";
+export declare const bdlGray02 = "#fbfbfb";
+export declare const bdlDarkBlue = "#003c84";
+export declare const bdlDarkBlue50 = "#7f9dc1";
+export declare const bdlDarkBlue20 = "#ccd8e6";
+export declare const bdlDarkBlue10 = "#e5ebf2";
+export declare const bdlDarkBlue05 = "#f2f5f9";
+export declare const bdlDarkBlue02 = "#fafbfd";
+export declare const bdlLightBlue = "#2486fc";
+export declare const bdlLightBlue50 = "#91c2fd";
+export declare const bdlLightBlue20 = "#d3e7fe";
+export declare const bdlLightBlue10 = "#e9f2fe";
+export declare const bdlLightBlue05 = "#f4f9ff";
+export declare const bdlLightBlue02 = "#fbfdff";
+export declare const bdlYellorange = "#f5b31b";
+export declare const bdlYellorange50 = "#fad98d";
+export declare const bdlYellorange20 = "#fdf0d1";
+export declare const bdlYellorange10 = "#fef7e8";
+export declare const bdlYellorange05 = "#fefbf3";
+export declare const bdlYellorange02 = "#fffefb";
+export declare const bdlYellow = "#ffd700";
+export declare const bdlYellow50 = "#ffeb7f";
+export declare const bdlYellow20 = "#fff7cc";
+export declare const bdlYellow10 = "#fffbe5";
+export declare const bdlYellow05 = "#fffdf2";
+export declare const bdlYellow02 = "#fffefa";
+export declare const bdlGreenLight = "#26c281";
+export declare const bdlGreenLight50 = "#92e0c0";
+export declare const bdlGreenLight20 = "#d4f3e6";
+export declare const bdlGreenLight10 = "#e9f8f2";
+export declare const bdlGreenLight05 = "#f4fcf8";
+export declare const bdlGreenLight02 = "#fbfefd";
+export declare const bdlGrimace = "#4826c2";
+export declare const bdlGrimace50 = "#a392e0";
+export declare const bdlGrimace20 = "#dad4f3";
+export declare const bdlGrimace10 = "#ece9f8";
+export declare const bdlGrimace05 = "#f6f4fc";
+export declare const bdlGrimace02 = "#fbfbfe";
+export declare const bdlOrange = "#f1811a";
+export declare const bdlOrange50 = "#f8c08c";
+export declare const bdlOrange20 = "#fce6d1";
+export declare const bdlOrange10 = "#fdf2e8";
+export declare const bdlOrange05 = "#fef8f3";
+export declare const bdlOrange02 = "#fffdfb";
+export declare const bdlPurpleRain = "#9f3fed";
+export declare const bdlPurpleRain50 = "#cf9ff6";
+export declare const bdlPurpleRain20 = "#ecd9fb";
+export declare const bdlPurpleRain10 = "#f5ebfd";
+export declare const bdlPurpleRain05 = "#faf5fe";
+export declare const bdlPurpleRain02 = "#fdfbff";
+export declare const bdlWatermelonRed = "#ed3757";
+export declare const bdlWatermelonRed50 = "#f69bab";
+export declare const bdlWatermelonRed20 = "#fbd7dd";
+export declare const bdlWatermelonRed10 = "#fdebee";
+export declare const bdlWatermelonRed05 = "#fef5f6";
+export declare const bdlWatermelonRed02 = "#fffbfc";
+export declare const bdlLineHeight = "20px";
+export declare const bdlFontSize = "13px";
+export declare const bdlFontSizeMinimum = "11px";
+export declare const bdlFontSizeDejaBlue = "14px";
+export declare const avatarColors: string[];
+export declare const modalDialogZIndex = "160";
+export declare const menuZIndex = "170";
+export declare const submenuZIndex = "171";
+export declare const overlayZIndex = "190";
+export declare const tooltipZIndex = "190";
+export declare const notificationsWrapperZIndex = "200";
+export declare const bdlBorderRadiusSize = "4px";
+export declare const bdlBorderRadiusSizeMed = "6px";
+export declare const bdlBorderRadiusSizeLarge = "8px";
+export declare const bdlBorderRadiusSizeXlarge = "12px";
+export declare const bdlHeaderBoxShadow: string[];
+export declare const bdlGridUnit = "4px";
+export declare const bdlGridUnitPx = "4";
+export declare const bdlHeaderHeight = "64px";
+export declare const bdlBtnBorderWidth = "1px";
+export declare const bdlBtnHeight = "32px";
+export declare const bdlBtnHeightLarge = "40px";
+export declare const bdlBtnIconSize = "20px";
+export declare const bdlBtnTextIconSize = "16px";
+export declare const bdlBtnPaddingHorizontal = "16px";
+export declare const bdlTransitionDurationBase = "0.15s";
+export declare const bdlTimingFunction: string[];
+export declare const sizeSmallMediumMin = "375px";
+export declare const sizeMediumMin = "461px";
+export declare const sizeLargeMin = "768px";
+export declare const sizeSmallMax = "374px";
+export declare const sizeSmallMediumMax = "460px";
+export declare const sizeMediumMax = "767px";
+export declare const sizeLargeMax = "1023px";
+export declare const sizeXlargeMax = "1219px";
+export declare const smallScreen = "(max-width: 374px)";
+export declare const smallMediumScreen = "(max-width: 460px)";
+export declare const mediumScreen = "(max-width: 767px)";
+export declare const largeScreen = "(max-width: 1023px)";
+export declare const xlargeScreen = "(max-width: 1219px)";

package/lib-esm/branding-styles/utils/variables.js

@@ -0,0 +1,18 @@
+// Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
+/* File auto-generated */
+/* eslint-disable */
+const white = '#fff'; // white
+const black = '#000'; // black
+const bdlBoxBlue = '#0061d5'; // bdl-box-blue
+const bdlGray = '#222'; // bdl-gray
+const bdlGray80 = '#4e4e4e'; // bdl-gray-80
+const bdlGray65 = '#6f6f6f'; // bdl-gray-65
+const bdlGray50 = '#909090'; // bdl-gray-50
+const bdlGray40 = '#a7a7a7'; // bdl-gray-40
+const bdlGray30 = '#bcbcbc'; // bdl-gray-30
+const bdlGray10 = '#e8e8e8'; // bdl-gray-10
+const bdlGray05 = '#f4f4f4'; // bdl-gray-05
+const bdlGridUnitPx = '4'; // bdl-grid-unit-px
+ // xlarge-screen
+
+export { bdlBoxBlue, bdlGray, bdlGray05, bdlGray10, bdlGray30, bdlGray40, bdlGray50, bdlGray65, bdlGray80, bdlGridUnitPx, black, white };

package/lib-esm/card/card.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type CardProps } from './types';
+/**
+ * The Card component is the background for content that can take many forms.
+ */
+export declare const Card: import("react").ForwardRefExoticComponent<Omit<CardProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/card/card.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './card.module.js';
+
+/**
+ * The Card component is the background for content that can take many forms.
+ */
+const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    elevation: elevationToken,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.card, elevationToken && styles[elevationToken], className),
+    children: children
+  });
+});
+
+export { Card };

package/lib-esm/card/card.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"card":"card-module_card__xvhvq","dropshadow-1":"card-module_dropshadow-1__4NoXG","dropshadow-3":"card-module_dropshadow-3__Jr5fH"};
+
+export { styles as default };

package/lib-esm/card/index.d.ts

@@ -0,0 +1,2 @@
+export { Card } from './card';
+export { type CardProps } from './types';

package/lib-esm/card/types.d.ts

@@ -0,0 +1,10 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+export interface CardProps extends ComponentPropsWithRef<'div'> {
+    /** Contents of the card */
+    children?: ReactNode;
+    /**
+     * Specifies the boxShadow that should be applied to default state of the card.
+     * @default undefined
+     */
+    elevation?: 'dropshadow-1' | 'dropshadow-3';
+}

package/lib-esm/card-tooltip/card-tooltip.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { type CardTooltipProps } from './types';
+/**
+ * Temporary component that displays Card styled tooltip.
+ *
+ * You must only pass non-interactive content inside `content` prop.
+ *
+ * **IMPORTANT (1)**: Must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ * **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement,  HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
+ *
+ */
+export declare const CardTooltip: (props: CardTooltipProps) => JSX.Element;

package/lib-esm/card-tooltip/card-tooltip.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import clsx from 'clsx';
+import React__default, { useContext } from 'react';
+import { Card } from '../card/card.js';
+import { ContainerContext, TooltipTrigger } from '../tooltip/tooltip.js';
+import styles from './card-tooltip.module.js';
+
+/**
+ * Temporary component that displays Card styled tooltip.
+ *
+ * You must only pass non-interactive content inside `content` prop.
+ *
+ * **IMPORTANT (1)**: Must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ * **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement,  HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
+ *
+ */
+const CardTooltip = props => {
+  const {
+    children,
+    content,
+    onOpenChange,
+    open,
+    defaultOpen,
+    forceMount,
+    ...contentProps
+  } = props;
+  const container = useContext(ContainerContext);
+  return jsxs(RadixTooltip.Root, {
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    open: open,
+    children: [jsx(TooltipTrigger, {
+      open: open,
+      children: children
+    }), jsx(RadixTooltip.Portal, {
+      container: container,
+      forceMount: forceMount,
+      children: jsx(Content, {
+        ...contentProps,
+        children: content
+      })
+    })]
+  });
+};
+const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, ref) {
+  const {
+    children,
+    className,
+    elevation = 'dropshadow-3',
+    ...rest
+  } = props;
+  return jsx(RadixTooltip.Content, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.content, styles.card, className),
+    sideOffset: 4,
+    children: jsx(Card, {
+      elevation: elevation,
+      children: children
+    })
+  });
+});
+
+export { CardTooltip };

package/lib-esm/card-tooltip/card-tooltip.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"content":"card-tooltip-module_content__FXRpt","card":"card-tooltip-module_card__FLjq-","slideDownAndFade":"card-tooltip-module_slideDownAndFade__9wAy3","slideLeftAndFade":"card-tooltip-module_slideLeftAndFade__9IWkp","slideUpAndFade":"card-tooltip-module_slideUpAndFade__TKCY7","slideRightAndFade":"card-tooltip-module_slideRightAndFade__aema5"};
+
+export { styles as default };

package/lib-esm/card-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { CardTooltip } from './card-tooltip';
+export { type CardTooltipProps } from './types';

package/lib-esm/card-tooltip/types.d.ts

@@ -0,0 +1,30 @@
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type React from 'react';
+import { type CardProps } from '../card/types';
+export interface CardTooltipContentProps extends RadixTooltip.TooltipContentProps {
+    /** The elevation of the Card inside.
+     * @default dropshadow-3
+     */
+    elevation?: CardProps['elevation'];
+}
+export interface PropsOnlyChildren {
+    children?: React.ReactNode;
+}
+export interface CardTooltipProps extends Omit<React.ComponentPropsWithRef<typeof RadixTooltip.TooltipContent>, 'content'> {
+    /** The anchor for the tooltip. */
+    children: React.ReactNode;
+    /** The content of the tooltip. */
+    content: React.ReactNode;
+    /** The elevation of the Card inside.
+     * @default dropshadow-3
+     */
+    elevation: CardProps['elevation'];
+    /** Event handler called when the open state of the tooltip changes. */
+    onOpenChange?: RadixTooltip.TooltipProps['onOpenChange'];
+    /** The controlled open state of the tooltip. Must be used in conjunction with onOpenChange. */
+    open?: RadixTooltip.TooltipProps['open'];
+    /** The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. */
+    defaultOpen?: RadixTooltip.TooltipProps['defaultOpen'];
+    /** Used to force mounting when more control is needed. */
+    forceMount?: RadixTooltip.TooltipPortalProps['forceMount'];
+}

package/lib-esm/checkbox/checkbox-item.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type CheckboxItemProps } from './types';
+/** Checkbox.Item needs to be wrapped with TooltipProvider -
+    or ideally you should have your App wrapped with it. */
+export declare const CheckboxItem: import("react").ForwardRefExoticComponent<CheckboxItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default CheckboxItem;

package/lib-esm/checkbox/checkbox-item.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Checkmark, Minus } from '@box/blueprint-web-assets/icons/Fill';
+import { IconIconOnDark, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import * as RadixCheckbox from '@radix-ui/react-checkbox';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
+import { useUniqueId } from '../utils/useUniqueId.js';
+import styles from './checkbox.module.js';
+
+/** Checkbox.Item needs to be wrapped with TooltipProvider -
+    or ideally you should have your App wrapped with it. */
+const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    checked,
+    className,
+    description,
+    descriptionInfoText,
+    descriptionInfoBadgeAriaLabel,
+    disabled,
+    label,
+    labelInfoText,
+    labelInfoBadgeAriaLabel,
+    onCheckedChange,
+    value,
+    ...rest
+  } = props;
+  const descriptionId = useUniqueId('description-', !!description);
+  return jsxs("div", {
+    className: clsx([styles.option], {
+      [styles.disabled]: disabled
+    }, className),
+    children: [jsxs("label", {
+      className: styles.label,
+      children: [jsx(RadixCheckbox.Root, {
+        ...rest,
+        ref: ref,
+        "aria-describedby": descriptionId,
+        checked: checked,
+        className: styles.checkbox,
+        disabled: disabled,
+        onCheckedChange: onCheckedChange,
+        value: value,
+        children: jsxs(RadixCheckbox.Indicator, {
+          className: styles.indicator,
+          forceMount: true,
+          children: [checked === true && jsx(Checkmark, {
+            color: IconIconOnDark,
+            height: Size3,
+            role: "presentation",
+            width: Size3
+          }), checked === 'indeterminate' && jsx(Minus, {
+            color: IconIconOnDark,
+            height: Size3,
+            role: "presentation",
+            width: Size3
+          })]
+        })
+      }), jsx(TextWithInfoBadge, {
+        infoBadgeAriaLabel: labelInfoBadgeAriaLabel,
+        infoText: labelInfoText,
+        variant: disabled ? 'muted' : 'default',
+        children: label
+      })]
+    }), jsx("div", {
+      className: styles.description,
+      children: description ? jsx(TextWithInfoBadge, {
+        id: descriptionId,
+        infoBadgeAriaLabel: descriptionInfoBadgeAriaLabel,
+        infoText: descriptionInfoText,
+        variant: "muted",
+        children: description
+      }) : null
+    })]
+  });
+});
+
+export { CheckboxItem, CheckboxItem as default };

package/lib-esm/checkbox/checkbox.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"option":"checkbox-module_option__bKXIT","checkbox":"checkbox-module_checkbox__obRBR","indicator":"checkbox-module_indicator__bEKHY","label":"checkbox-module_label__OWFf4","description":"checkbox-module_description__HNmMT","disabled":"checkbox-module_disabled__nJSZ-"};
+
+export { styles as default };

package/lib-esm/checkbox/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Legend } from '../util-components/legend';
+export { type CheckboxItemProps, type CheckedState } from './types';
+export declare const Checkbox: {
+    Item: import("react").ForwardRefExoticComponent<import("./types").CheckboxItemProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Legend: typeof Legend;
+};
+export default Checkbox;

package/lib-esm/checkbox/index.js

@@ -0,0 +1,9 @@
+import { Legend } from '../util-components/legend/legend.js';
+import { CheckboxItem } from './checkbox-item.js';
+
+const Checkbox = {
+  Item: CheckboxItem,
+  Legend
+};
+
+export { Checkbox, Checkbox as default };

package/lib-esm/checkbox/types.d.ts

@@ -0,0 +1,32 @@
+import { type CheckboxProps } from '@radix-ui/react-checkbox';
+import { type ReactNode } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+import { type StyledText } from '../utils/commonTypes';
+type DescriptionInfo = {
+    /** Additional text to aid in use. It will appear inside info icon tooltip in the description. */
+    descriptionInfoText?: StyledText;
+    /** aria-label for the description badge button. */
+    descriptionInfoBadgeAriaLabel?: string;
+};
+type LabelInfo = {
+    /** Additional text to aid in use. It will appear inside info icon tooltip in the label. */
+    labelInfoText?: StyledText;
+    /** aria-label for the label badge button. */
+    labelInfoBadgeAriaLabel?: string;
+};
+export type CheckedState = NonNullable<CheckboxProps['checked']>;
+export type CheckboxItemProps = {
+    /** The checked state of the checkbox. */
+    checked: CheckedState;
+    /** The value given as data when submitted with a name. */
+    value: string;
+    /** The label for the checkbox button. */
+    label: ReactNode;
+    /** Additional text to aid in use. */
+    description?: StyledText;
+    /** When true, prevents the user from interacting with the checkbox item. */
+    disabled?: boolean;
+    /** Event handler called when the checked state of the checkbox changes. */
+    onCheckedChange: (checked: CheckedState) => void;
+} & Omit<CheckboxProps, 'onCheckedChange'> & RequireAllOrNone<LabelInfo, keyof LabelInfo> & RequireAllOrNone<DescriptionInfo, keyof DescriptionInfo>;
+export {};

package/lib-esm/combobox/chips-group.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ChipGroupProps } from './chips-group.types';
+export declare const ChipsGroup: (props: ChipGroupProps) => JSX.Element;

package/lib-esm/combobox/chips-group.js

@@ -0,0 +1,100 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import React__default, { useRef, useState } from 'react';
+import { InputChip } from '../input-chip/input-chip.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+import styles from './chips-group.module.js';
+
+const ChipsGroup = props => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const count = React__default.Children.count(children);
+  // Used to store each InputChip reference
+  const chipsRef = useRef([]);
+  // Used to keep track of the current focused InputChip child
+  const [focusIndex, setFocusIndex] = useState(0);
+  const setFocus = index => {
+    chipsRef.current?.[index]?.focus();
+  };
+  const handleKeyDown = event => {
+    const focusNextChip = () => setFocus(focusIndex + 1);
+    const focusPrevChip = () => setFocus(focusIndex - 1);
+    const focusFirstChip = () => setFocus(0);
+    const focusLastChip = () => setFocus(count - 1);
+    // Define the action for each supported keyboard code
+    const codeToActionMap = {
+      ArrowRight: focusNextChip,
+      ArrowDown: focusNextChip,
+      ArrowLeft: focusPrevChip,
+      ArrowUp: focusPrevChip,
+      Home: focusFirstChip,
+      End: focusLastChip
+    };
+    if (event.code in codeToActionMap) {
+      // Call corresponding action
+      codeToActionMap[event.code]();
+    }
+  };
+  const handleDelete = index => {
+    // Remove chip reference
+    chipsRef.current.splice(index, 1);
+    // Compute index of the next chip to focus
+    const hasDeletedLastChip = index === count - 1;
+    const newFocusIndex = hasDeletedLastChip ? index - 1 : index;
+    // Focus next chip
+    setFocus(newFocusIndex);
+    setFocusIndex(newFocusIndex);
+  };
+  return jsx("div", {
+    ...rest,
+    className: clsx(styles.chipsGroup, className),
+    role: "grid",
+    children: React__default.Children.map(children, (child, index) => {
+      if (! /*#__PURE__*/React__default.isValidElement(child)) {
+        throw Error(`Element ${child} is not a valid React element`);
+      }
+      if (child.type !== InputChip) {
+        throw Error(`Component of type ${child.type} is not allowed. The ChildGroup component only accepts InputChip as children.`);
+      }
+      const childElement = child;
+      return jsx("div", {
+        role: "row",
+        children: jsx("div", {
+          role: "gridcell",
+          children: jsx(Tooltip
+          // Hide tooltip from screen readers as content is same as InputChip text
+          , {
+            "aria-hidden": true,
+            content: childElement.props.label,
+            children: /*#__PURE__*/React__default.cloneElement(childElement, {
+              // Register the InputChip reference
+              ref: node => {
+                if (node) {
+                  chipsRef.current[index] = node;
+                }
+              },
+              // Unset value added by Tooltip so that screen readers don't read the label twice
+              'aria-describedby': undefined,
+              // Make sure to remove InputChip reference when removed + focus the next one
+              onDelete: () => {
+                childElement.props.onDelete();
+                handleDelete(index);
+              },
+              // Handle keyboard navigation
+              onKeyDown: handleKeyDown,
+              // Update internal state to keep track of the current focused InputChip
+              onFocus: () => setFocusIndex(index),
+              // Only one of the InputChip contained by the grid is included in the page tab sequence
+              tabIndex: focusIndex === index ? 0 : -1
+            })
+          })
+        })
+      });
+    })
+  });
+};
+
+export { ChipsGroup };

package/lib-esm/combobox/chips-group.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"chipsGroup":"chips-group-module_chipsGroup__6MnIk"};
+
+export { styles as default };

package/lib-esm/combobox/chips-group.types.d.ts

@@ -0,0 +1,5 @@
+import { type HTMLAttributes } from 'react';
+export type EventCode = 'ArrowRight' | 'ArrowDown' | 'ArrowLeft' | 'ArrowUp' | 'Home' | 'End';
+export interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}

package/lib-esm/combobox/combobox.d.ts

@@ -0,0 +1,14 @@
+import React, { type ForwardedRef } from 'react';
+import { type ComboboxOptionProps, type ComboboxProps, type OptionValue } from './types';
+declare const RootInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>({ as, ...props }: ComboboxProps<Multiple, FreeInput, T>, ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>) => JSX.Element;
+export declare const Root: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxProps<Multiple, FreeInput, T> & {
+    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+}) => ReturnType<typeof RootInner>;
+export declare const Combobox: (<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxProps<Multiple, FreeInput, T> & {
+    ref?: React.ForwardedRef<HTMLInputElement> | undefined;
+}) => ReturnType<typeof RootInner>) & {
+    Option: React.ForwardRefExoticComponent<ComboboxOptionProps & React.RefAttributes<HTMLDivElement>>;
+    OptionWithIndicator: React.ForwardRefExoticComponent<ComboboxOptionProps & React.RefAttributes<HTMLDivElement>>;
+    Indicator: React.ForwardRefExoticComponent<React.RefAttributes<HTMLSpanElement>>;
+};
+export {};