@box/blueprint-web 9.2.1 → 9.3.0

package/lib-esm/combobox/combobox.js

@@ -22,6 +22,10 @@ const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => {
   const option = getOptionFromValue(optionValue, options);
   return displayValue && option ? displayValue(option) : optionValue;
 };
+const getDisplayAvatarFromOptionValue = (optionValue, options, displayAvatar) => {
+  const option = getOptionFromValue(optionValue, options);
+  return displayAvatar && option ? displayAvatar(option) : undefined;
+};
 const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => {
   const option = getOptionFromValue(optionValue, options);
   return displayTooltip && option ? displayTooltip(option) : undefined;
@@ -155,12 +159,6 @@ const RootInner = ({
     }
     return visibleOptions.filter(option => !selectedValue.includes(getOptionValue(option)));
   }, [filterFn, options, hideSelectedOptions, inputValue, selectedValue]);
-  const getDisplayAvatarFromOptionValue = useCallback(optionValue => {
-    const option = getOptionFromValue(optionValue, options);
-    return displayAvatar && option ? displayAvatar(option) : undefined;
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [displayAvatar]);
   const focusInput = useCallback(() => {
     inputRef.current?.focus();
   }, []);
@@ -265,7 +263,7 @@ const RootInner = ({
         }),
         children: [showChipsGroup && jsx(ChipsGroup, {
           children: selectedValue.map(selected => jsx(InputChip, {
-            avatar: getDisplayAvatarFromOptionValue(selected),
+            avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
             label: getDisplayValueFromOptionValue(selected, options, displayValue),
             onDelete: () => removeMultiSelectInputChip(selected),
             tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)

package/lib-esm/index.css

@@ -6797,30 +6797,57 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarRoot--b843f{
-  align-items:center;
+.bp_toolbar_module_toolbarRoot--eeb80{
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-4);
   box-shadow:var(--dropshadow-3);
+  padding:calc(var(--space-1) - var(--border-1));
+}
+
+.bp_toolbar_module_scrollButtonWrapper--eeb80,.bp_toolbar_module_toolbarRoot--eeb80{
+  align-items:center;
   display:flex;
   gap:var(--space-1);
+}
+.bp_toolbar_module_scrollButtonWrapper--eeb80.bp_toolbar_module_hidden--eeb80{
+  display:none;
+}
+
+.bp_toolbar_module_scrollableChildrenWrapper--eeb80{
+  -ms-overflow-style:none;
+  align-items:center;
+  display:flex;
+  flex-grow:1;
+  gap:var(--space-1);
+  overflow-x:auto;
   padding:calc(var(--space-1) - var(--border-1));
+  scroll-behavior:smooth;
+  scroll-padding:calc(var(--space-1) - var(--border-1));
+  scrollbar-width:none;
+  white-space:nowrap;
+}
+.bp_toolbar_module_scrollableChildrenWrapper--eeb80::-webkit-scrollbar{
+  display:none;
+}
+.bp_toolbar_module_scrollableChildrenWrapper--eeb80 > *{
+  flex-grow:0;
+  flex-shrink:0;
 }
 
-.bp_toolbar_module_separator--b843f{
+.bp_toolbar_module_separator--eeb80{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
   height:var(--size-6);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--b843f{
+.bp_toolbar_module_toggleGroup--eeb80{
   display:flex;
   gap:var(--space-1);
 }
 
-.bp_toolbar_module_toolbarItem--b843f{
+.bp_toolbar_module_toolbarItem--eeb80{
   --toolbar-item-hover-opacity:0.3;
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
@@ -6838,45 +6865,45 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--b843f[data-disabled]{
+.bp_toolbar_module_toolbarItem--eeb80[data-disabled]{
   background:var(--surface-toggle-surface);
   opacity:var(--toolbar-item-hover-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--b843f:not([data-disabled]):focus-visible{
+.bp_toolbar_module_toolbarItem--eeb80:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_toolbar_module_toolbarItem--b843f:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--eeb80:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
   border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
 }
 
-.bp_toolbar_module_toolbarToggle--b843f[data-state=on]{
+.bp_toolbar_module_toolbarToggle--eeb80[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.bp_toolbar_module_toolbarToggle--b843f[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--eeb80[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.bp_toolbar_module_toolbarToggle--b843f[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--eeb80[data-state=on]:not([data-disabled]):hover{
   background:var(--surface-toggle-surface-on-hover);
   border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
 }
 
-.bp_toolbar_module_dropdownIndicator--b843f.bp_toolbar_module_invertCaret--b843f{
+.bp_toolbar_module_dropdownIndicator--eeb80.bp_toolbar_module_invertCaret--eeb80{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--b843f{
+.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80{
   --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--b843f[data-state=on] .bp_toolbar_module_dropdownIndicator--b843f path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80[data-state=on] .bp_toolbar_module_dropdownIndicator--eeb80 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--b843f[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--eeb80[data-state=on]:hover{
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--b843f{
+.bp_toolbar_module_toolbarIcon--eeb80{
   align-items:center;
   display:flex;
   height:var(--size-5);
@@ -6884,7 +6911,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:var(--size-5);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--b843f{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80{
   border:var(--border-1) solid var(--border-toggletext-border-off);
   color:var(--text-text-on-light);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -6898,24 +6925,24 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-transform:none;
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--b843f:hover{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80:hover{
   background:var(--surface-toggle-surface-off-hover);
   border-color:var(--border-toggletext-border-off-hover);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b843f:active{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80:active{
   background:var(--surface-toggle-surface-off-pressed);
   border-color:var(--border-toggletext-border-off-pressed);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]{
   background:var(--surface-toggletext-surface-on);
   border:var(--border-1) solid var(--border-toggletext-border-on);
   color:var(--text-toggletext-text);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]:hover{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]:hover{
   background:var(--surface-toggletext-surface-on-hover);
   border-color:var(--border-toggletext-border-on-hover);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b843f[aria-checked=true]:active{
+.bp_toolbar_module_toolbarTextToggleItem--eeb80[aria-checked=true]:active{
   background:var(--surface-toggletext-surface-on-pressed);
   border-color:var(--border-toggletext-border-on-pressed);
 }

package/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -43,7 +43,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
   const shouldShowTooltip = !isButtonDisabled && !isWithLabel;
   const ariaLabel = !isWithLabel ? props['aria-label'] : props.label;
-  const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon']) : restProps;
+  const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon', 'dragging', 'label']) : restProps;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
   const button = jsx(CompositeItem, {
     render: jsxs(Button, {

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

@@ -23,7 +23,7 @@ export declare const Toolbar: {
     /**
      * Contains all parts of the toolbar component.
      */
-    Root: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toolbar").ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+    Root: import("react").ForwardRefExoticComponent<import("./types").ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Two-state button that can be toggled on or off.
      */

package/lib-esm/toolbar/toolbar-root.d.ts

@@ -1,2 +1,2 @@
-import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
-export declare const ToolbarRoot: import("react").ForwardRefExoticComponent<ToolbarPrimitive.ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
+import { type ToolbarProps } from './types';
+export declare const ToolbarRoot: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/toolbar/toolbar-root.js

@@ -2,14 +2,41 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { ToolbarScrollableContainer } from './toolbar-scrollable-container.js';
 import styles from './toolbar.module.js';
+import { HorizontalScrollProvider } from './utils/horizontal-scroll-context.js';
 
 const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     className,
+    scrollable,
     ...rest
   } = props;
+  if (scrollable) {
+    const {
+      ariaLabelNextButton,
+      ariaLabelPrevButton,
+      maxWidth,
+      scrollStep = 50
+    } = props;
+    return jsx(ToolbarPrimitive.Root, {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.toolbarRoot, className),
+      style: {
+        maxWidth
+      },
+      children: jsx(HorizontalScrollProvider, {
+        scrollStep: scrollStep,
+        children: jsx(ToolbarScrollableContainer, {
+          ariaLabelNextButton: ariaLabelNextButton,
+          ariaLabelPrevButton: ariaLabelPrevButton,
+          children: children
+        })
+      })
+    });
+  }
   return jsx(ToolbarPrimitive.Root, {
     ...rest,
     ref: forwardedRef,

package/lib-esm/toolbar/toolbar-scrollable-container.d.ts

@@ -0,0 +1,7 @@
+interface ScrollableContainerProps {
+    children: React.ReactNode;
+    ariaLabelPrevButton: string;
+    ariaLabelNextButton: string;
+}
+export declare const ToolbarScrollableContainer: import("react").ForwardRefExoticComponent<ScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib-esm/toolbar/toolbar-scrollable-container.js

@@ -0,0 +1,64 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { PointerChevronLeft, PointerChevronRight } from '@box/blueprint-web-assets/icons/Fill';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
+import { ToolbarSeparator } from './toolbar-separator.js';
+import styles from './toolbar.module.js';
+import { useScrollContext } from './utils/horizontal-scroll-context.js';
+
+const ScrollButton = ({
+  hidden,
+  ariaLabel,
+  onClick,
+  icon: Icon,
+  separatorPosition
+}) => jsxs("div", {
+  className: clsx(styles.scrollButtonWrapper, {
+    [styles.hidden]: hidden
+  }),
+  children: [separatorPosition === 'before' && jsx(ToolbarSeparator, {}), jsx(IconButton, {
+    "aria-label": ariaLabel,
+    icon: Icon,
+    onClick: onClick
+  }), separatorPosition === 'after' && jsx(ToolbarSeparator, {})]
+});
+const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ariaLabelPrevButton,
+    ariaLabelNextButton
+  } = props;
+  const {
+    scrollPosition,
+    scrollLeft,
+    scrollRight,
+    onAttach
+  } = useScrollContext();
+  const onMountRef = useRefWithEffectMemoized(forwardedRef, node => {
+    onAttach(node);
+  });
+  return jsxs(Fragment, {
+    children: [jsx(ScrollButton, {
+      ariaLabel: ariaLabelPrevButton,
+      hidden: scrollPosition === 'start' || scrollPosition === 'none',
+      icon: PointerChevronLeft,
+      onClick: scrollLeft,
+      separatorPosition: "after"
+    }), jsx("div", {
+      ref: onMountRef,
+      className: clsx(styles.scrollableChildrenWrapper),
+      "data-testid": "toolbar-scroll-container",
+      children: children
+    }), jsx(ScrollButton, {
+      ariaLabel: ariaLabelNextButton,
+      hidden: scrollPosition === 'end' || scrollPosition === 'none',
+      icon: PointerChevronRight,
+      onClick: scrollRight,
+      separatorPosition: "before"
+    })]
+  });
+});
+
+export { ToolbarScrollableContainer };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--b843f","separator":"bp_toolbar_module_separator--b843f","toggleGroup":"bp_toolbar_module_toggleGroup--b843f","toolbarItem":"bp_toolbar_module_toolbarItem--b843f","toolbarToggle":"bp_toolbar_module_toolbarToggle--b843f","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--b843f","invertCaret":"bp_toolbar_module_invertCaret--b843f","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--b843f","toolbarIcon":"bp_toolbar_module_toolbarIcon--b843f","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--b843f"};
+var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--eeb80","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--eeb80","hidden":"bp_toolbar_module_hidden--eeb80","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--eeb80","separator":"bp_toolbar_module_separator--eeb80","toggleGroup":"bp_toolbar_module_toggleGroup--eeb80","toolbarItem":"bp_toolbar_module_toolbarItem--eeb80","toolbarToggle":"bp_toolbar_module_toolbarToggle--eeb80","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--eeb80","invertCaret":"bp_toolbar_module_invertCaret--eeb80","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--eeb80","toolbarIcon":"bp_toolbar_module_toolbarIcon--eeb80","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--eeb80"};
 
 export { styles as default };

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

@@ -1,6 +1,24 @@
 import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
 import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
-export type ToolbarProps = ToolbarPrimitiveProps;
+interface ToolbarWithoutScrollProps {
+    scrollable?: false;
+}
+interface ToolbarWithScrollProps {
+    /** Prop to enable horizontal scrolling with control buttons. */
+    scrollable: true;
+    /** The maximum width of the toolbar. When this width is reached, horizontal scrolling with control buttons will be enabled. */
+    maxWidth: string;
+    /** Aria label for the previous control button. */
+    ariaLabelPrevButton: string;
+    /** Aria label for the next control button. */
+    ariaLabelNextButton: string;
+    /** Prop to configure scroll distance when control button is clicked.
+     * @default '50'
+     */
+    scrollStep?: number;
+}
+type ScrollProps = ToolbarWithoutScrollProps | ToolbarWithScrollProps;
+export type ToolbarProps = ToolbarPrimitiveProps & ScrollProps;
 export type ToolbarSeparatorProps = ToolbarPrimitiveSeparatorProps;
 export type ToolbarToggleGroupProps = ToolbarToggleGroupPrimitiveProps;
 interface ToolbarButtonCSS extends CSSProperties {

package/lib-esm/toolbar/utils/horizontal-scroll-context.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface HorizontalScrollContextType {
+    scrollPosition: 'start' | 'end' | 'intermediate' | 'none';
+    scrollLeft: () => void;
+    scrollRight: () => void;
+    onAttach: (node: HTMLDivElement | null) => void;
+}
+interface HorizontalScrollProviderProps {
+    children: React.ReactNode;
+    scrollStep?: number;
+}
+export declare const HorizontalScrollProvider: ({ children, scrollStep, }: HorizontalScrollProviderProps) => React.ReactElement;
+export declare const useScrollContext: () => HorizontalScrollContextType;
+export {};

package/lib-esm/toolbar/utils/horizontal-scroll-context.js

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import noop from 'lodash/noop';
+import { useState, useRef, useCallback, useEffect, useMemo, createContext, useContext } from 'react';
+
+const HorizontalScrollContext = /*#__PURE__*/createContext({
+  scrollPosition: 'none',
+  scrollLeft: noop,
+  scrollRight: noop,
+  onAttach: noop
+});
+const HorizontalScrollProvider = ({
+  children,
+  scrollStep = 50
+}) => {
+  const [scrollPosition, setScrollPosition] = useState('none');
+  const [scrollableElement, setScrollableElement] = useState(null);
+  const scrollAnimationFrame = useRef(null);
+  const updateScrollState = useCallback(() => {
+    if (scrollableElement) {
+      const {
+        scrollLeft,
+        scrollWidth,
+        clientWidth
+      } = scrollableElement;
+      if (scrollWidth <= clientWidth) {
+        setScrollPosition('none');
+      } else if (scrollLeft === 0) {
+        setScrollPosition('start');
+      } else if (scrollLeft + clientWidth >= scrollWidth) {
+        setScrollPosition('end');
+      } else {
+        setScrollPosition('intermediate');
+      }
+    }
+  }, [scrollableElement]);
+  const handleScroll = useCallback(() => {
+    if (scrollAnimationFrame.current !== null) {
+      cancelAnimationFrame(scrollAnimationFrame.current);
+    }
+    scrollAnimationFrame.current = requestAnimationFrame(updateScrollState);
+  }, [updateScrollState]);
+  const scrollLeft = useCallback(() => {
+    if (scrollableElement) {
+      scrollableElement.scrollBy({
+        left: -scrollStep,
+        behavior: 'smooth'
+      });
+    }
+  }, [scrollStep, scrollableElement]);
+  const scrollRight = useCallback(() => {
+    if (scrollableElement) {
+      scrollableElement.scrollBy({
+        left: scrollStep,
+        behavior: 'smooth'
+      });
+    }
+  }, [scrollStep, scrollableElement]);
+  const onAttach = useCallback(node => {
+    setScrollableElement(node);
+    if (node) {
+      updateScrollState();
+    }
+  }, [updateScrollState]);
+  useEffect(() => {
+    if (!scrollableElement) {
+      return noop;
+    }
+    const handleFocusIn = event => {
+      const target = event.target;
+      if (scrollableElement.contains(target)) {
+        target.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'nearest'
+        });
+      }
+    };
+    scrollableElement.addEventListener('focusin', handleFocusIn);
+    scrollableElement.addEventListener('scroll', handleScroll);
+    updateScrollState();
+    return () => {
+      scrollableElement.removeEventListener('focusin', handleFocusIn);
+      scrollableElement.removeEventListener('scroll', handleScroll);
+      if (scrollAnimationFrame.current !== null) {
+        cancelAnimationFrame(scrollAnimationFrame.current);
+      }
+    };
+  }, [scrollableElement, handleScroll, updateScrollState]);
+  const contextValue = useMemo(() => ({
+    scrollPosition,
+    scrollLeft,
+    scrollRight,
+    onAttach
+  }), [scrollPosition, scrollLeft, scrollRight, onAttach]);
+  return jsx(HorizontalScrollContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+};
+const useScrollContext = () => {
+  const context = useContext(HorizontalScrollContext);
+  if (!context) {
+    throw new Error('useScrollContext must be used within a HorizontalScrollProvider');
+  }
+  return context;
+};
+
+export { HorizontalScrollProvider, useScrollContext };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.2.1",
+    "version": "9.3.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -24,7 +24,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.14",
         "@ariakit/react-core": "0.4.14",
-        "@box/blueprint-web-assets": "^4.30.0",
+        "@box/blueprint-web-assets": "^4.30.1",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -55,7 +55,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.7.0",
+        "@box/storybook-utils": "^0.8.0",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "94a36651838769cd08fd62a9ab1b41e0b4cb5280",
+    "gitHead": "d9e9463682eab8c3cf54e738849001a2095220e8",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {