@box/blueprint-web 7.2.1 → 7.2.3

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-/**
- * Based on Ariakit [Separator](https://ariakit.org/components/separator)
- */
-export declare const Divider: () => JSX.Element;
+export declare const Divider: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").SeparatorOptions<"hr"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    ref?: ((instance: HTMLHRElement | null) => void) | import("react").RefObject<HTMLHRElement> | null | undefined;
+}, keyof import("@ariakit/react").SeparatorOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+}, "ref"> & import("react").RefAttributes<HTMLHRElement>>;

package/lib-esm/divider/divider.js

@@ -1,15 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
 import { Separator } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
 import styles from './divider.module.js';
 
-/**
- * Based on Ariakit [Separator](https://ariakit.org/components/separator)
- */
-const Divider = () => {
+const Divider = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
   return jsx(Separator, {
-    className: styles.divider,
-    orientation: "horizontal"
+    ref: forwardedRef,
+    className: clsx(styles.divider, className),
+    orientation: "horizontal",
+    ...rest
   });
-};
+});
 
 export { Divider };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"divider":"bp_divider_module_divider--79368"};
+var styles = {"divider":"bp_divider_module_divider--fa24f"};
 
 export { styles as default };

package/lib-esm/index.css

@@ -1276,12 +1276,12 @@
   }
 }
 
-.bp_divider_module_divider--79368{
+.bp_divider_module_divider--fa24f{
   background-color:var(--border-divider-border);
   border:none;
   flex-shrink:0;
   height:var(--border-1);
-  margin-block:var(--space-2);
+  margin-block:0;
 }
 .bp_base_grid_list_item_module_smallList--17725{
   box-sizing:border-box;
@@ -1979,7 +1979,7 @@
   display:inline;
 }
 
-.bp_dropdown_menu_module_content--d2a98{
+.bp_dropdown_menu_module_content--4f08e{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -2001,13 +2001,13 @@
   z-index:2147483647;
 }
 
-.bp_dropdown_menu_module_ellipsis--d2a98{
+.bp_dropdown_menu_module_ellipsis--4f08e{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--d2a98{
+.bp_dropdown_menu_module_checkmark--4f08e{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2015,7 +2015,7 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--d2a98,.bp_dropdown_menu_module_subMenuTrigger--d2a98{
+.bp_dropdown_menu_module_item--4f08e,.bp_dropdown_menu_module_subMenuTrigger--4f08e{
   align-items:center;
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
@@ -2027,25 +2027,22 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--d2a98[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--d2a98[data-disabled]{
+.bp_dropdown_menu_module_item--4f08e[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--4f08e[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--d2a98[data-highlighted]:not(:hover),.bp_dropdown_menu_module_subMenuTrigger--d2a98[data-highlighted]:not(:hover){
+.bp_dropdown_menu_module_item--4f08e[data-highlighted]:not(:hover),.bp_dropdown_menu_module_subMenuTrigger--4f08e[data-highlighted]:not(:hover){
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid var(--border-input-border-focus);
 }
-.bp_dropdown_menu_module_item--d2a98:hover,.bp_dropdown_menu_module_item--d2a98[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--d2a98:hover,.bp_dropdown_menu_module_subMenuTrigger--d2a98[data-state=open]{
+.bp_dropdown_menu_module_item--4f08e:hover,.bp_dropdown_menu_module_item--4f08e[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--4f08e:hover,.bp_dropdown_menu_module_subMenuTrigger--4f08e[data-state=open]{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_dropdown_menu_module_item--d2a98.bp_dropdown_menu_module_checkboxItem--d2a98,.bp_dropdown_menu_module_item--d2a98.bp_dropdown_menu_module_radioItem--d2a98,.bp_dropdown_menu_module_subMenuTrigger--d2a98.bp_dropdown_menu_module_checkboxItem--d2a98,.bp_dropdown_menu_module_subMenuTrigger--d2a98.bp_dropdown_menu_module_radioItem--d2a98{
+.bp_dropdown_menu_module_item--4f08e.bp_dropdown_menu_module_checkboxItem--4f08e,.bp_dropdown_menu_module_item--4f08e.bp_dropdown_menu_module_radioItem--4f08e,.bp_dropdown_menu_module_subMenuTrigger--4f08e.bp_dropdown_menu_module_checkboxItem--4f08e,.bp_dropdown_menu_module_subMenuTrigger--4f08e.bp_dropdown_menu_module_radioItem--4f08e{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
 
-.bp_dropdown_menu_module_dropdownMenuItemSeparator--d2a98{
-  background-color:var(--border-divider-border);
-  flex-shrink:0;
-  height:var(--border-1);
+.bp_dropdown_menu_module_dropdownMenuItemSeparator--4f08e{
   margin-block:var(--space-2);
 }
 
@@ -2129,7 +2126,7 @@
   text-decoration:none;
 }
 
-.bp_navigation_menu_module_link--ff82b{
+.bp_navigation_menu_module_link--79f80{
   color:var(--text-text-on-light);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -2139,15 +2136,19 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_navigation_menu_module_link--ff82b:hover{
+.bp_navigation_menu_module_link--79f80:hover{
   color:var(--text-text-on-light);
 }
-.bp_navigation_menu_module_link--ff82b.bp_navigation_menu_module_ellipsis--ff82b{
+.bp_navigation_menu_module_link--79f80.bp_navigation_menu_module_ellipsis--79f80{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
+.bp_navigation_menu_module_navigationMenuSeparator--79f80{
+  margin-block:var(--space-2);
+}
+
 .bp_text_input_module_textInputContainer--d93d3{
   display:flex;
   flex-direction:column;
@@ -3935,7 +3936,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   }
 }
 
-.bp_context_menu_module_menuBlock--b6840{
+.bp_context_menu_module_menuBlock--079e2{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -3946,14 +3947,11 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   min-width:var(--blueprint-web-context-menu-min-width, 160px);
   padding:var(--space-3);
 }
-.bp_context_menu_module_menuBlock--b6840 .bp_context_menu_module_menuItemsSeparator--b6840{
-  background-color:var(--border-divider-border);
-  flex-shrink:0;
-  height:var(--border-1);
+.bp_context_menu_module_menuBlock--079e2 .bp_context_menu_module_menuItemsSeparator--079e2{
   margin-block:var(--space-2);
   margin-inline:var(--space-2);
 }
-.bp_context_menu_module_menuBlock--b6840 .bp_context_menu_module_menuItem--b6840{
+.bp_context_menu_module_menuBlock--079e2 .bp_context_menu_module_menuItem--079e2{
   align-items:center;
   background-color:var(--surface-menu-surface);
   border:var(--border-2) solid #0000;
@@ -3966,15 +3964,15 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding-inline:var(--space-2);
   position:relative;
 }
-.bp_context_menu_module_menuBlock--b6840 .bp_context_menu_module_menuItem--b6840[data-disabled]{
+.bp_context_menu_module_menuBlock--079e2 .bp_context_menu_module_menuItem--079e2[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_context_menu_module_menuBlock--b6840 .bp_context_menu_module_menuItem--b6840[data-highlighted]:not(:hover){
+.bp_context_menu_module_menuBlock--079e2 .bp_context_menu_module_menuItem--079e2[data-highlighted]:not(:hover){
   background-color:var(--surface-menu-surface-focus);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_context_menu_module_menuBlock--b6840 .bp_context_menu_module_menuItem--b6840:hover{
+.bp_context_menu_module_menuBlock--079e2 .bp_context_menu_module_menuItem--079e2:hover{
   background-color:var(--surface-menu-surface-focus);
 }
 

package/lib-esm/navigation-menu/index.d.ts

@@ -8,7 +8,7 @@ export declare const NavigationMenu: {
     Content: import("react").ForwardRefExoticComponent<import("../..").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Link: import("react").ForwardRefExoticComponent<Omit<import("../primitives/link/types").LinkOwnProps<import("react").ElementType<any>> & Omit<any, keyof import("../primitives/link/types").LinkOwnProps<E>>, "ref"> & import("react").RefAttributes<unknown>>;
-    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
 };
 export { type NavigationMenuContentProps } from './navigation-menu-content';
 export { type NavigationMenuItemProps } from './navigation-menu-item';

package/lib-esm/navigation-menu/navigation-menu-separator.d.ts

@@ -1,2 +1,2 @@
 /// <reference types="react" />
-export declare const NavigationMenuSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+export declare const NavigationMenuSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;

package/lib-esm/navigation-menu/navigation-menu-separator.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
+import { Divider } from '../divider/divider.js';
+import styles from './navigation-menu.module.js';
 
 const NavigationMenuSeparator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
-  return jsx(DropdownMenu.Separator, {
-    ref: forwardedRef
+  return jsx(Divider, {
+    ref: forwardedRef,
+    className: styles.navigationMenuSeparator
   });
 });
 NavigationMenuSeparator.displayName = 'NavigationMenu.Separator';

package/lib-esm/navigation-menu/navigation-menu.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"link":"bp_navigation_menu_module_link--ff82b","ellipsis":"bp_navigation_menu_module_ellipsis--ff82b"};
+var styles = {"link":"bp_navigation_menu_module_link--79f80","ellipsis":"bp_navigation_menu_module_ellipsis--79f80","navigationMenuSeparator":"bp_navigation_menu_module_navigationMenuSeparator--79f80"};
 
 export { styles as default };

package/lib-esm/primitives/context-menu/context-menu-items-separator.js

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
-import { Separator } from '@radix-ui/react-context-menu';
 import { forwardRef } from 'react';
+import { Divider } from '../../divider/divider.js';
 import styles from './context-menu.module.js';
 
 /**
  * Used to visually separate items in the context menu.
  */
 const ItemsSeparator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
-  return jsx(Separator, {
+  return jsx(Divider, {
     ref: forwardedRef,
     className: styles.menuItemsSeparator
   });

package/lib-esm/primitives/context-menu/context-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuBlock":"bp_context_menu_module_menuBlock--b6840","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--b6840","menuItem":"bp_context_menu_module_menuItem--b6840"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--079e2","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--079e2","menuItem":"bp_context_menu_module_menuItem--079e2"};
 
 export { styles as default };

package/lib-esm/primitives/dropdown-menu/dropdown-menu-separator.d.ts

@@ -1,5 +1,2 @@
 /// <reference types="react" />
-/**
- * Based on Radix-UI [DropdownMenu Separator](https://www.radix-ui.com/docs/primitives/components/dropdown-menu#separator)
- */
-export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;

package/lib-esm/primitives/dropdown-menu/dropdown-menu-separator.js

@@ -1,13 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { forwardRef } from 'react';
 import styles from './dropdown-menu.module.js';
+import { Divider } from '../../divider/divider.js';
 
-/**
- * Based on Radix-UI [DropdownMenu Separator](https://www.radix-ui.com/docs/primitives/components/dropdown-menu#separator)
- */
 const DropdownMenuSeparator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
-  return jsx(DropdownMenuPrimitive.Separator, {
+  return jsx(Divider, {
     ref: forwardedRef,
     className: styles.dropdownMenuItemSeparator
   });

package/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--d2a98","ellipsis":"bp_dropdown_menu_module_ellipsis--d2a98","checkmark":"bp_dropdown_menu_module_checkmark--d2a98","item":"bp_dropdown_menu_module_item--d2a98","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--d2a98","radioItem":"bp_dropdown_menu_module_radioItem--d2a98","checkboxItem":"bp_dropdown_menu_module_checkboxItem--d2a98","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--d2a98"};
+var styles = {"content":"bp_dropdown_menu_module_content--4f08e","ellipsis":"bp_dropdown_menu_module_ellipsis--4f08e","checkmark":"bp_dropdown_menu_module_checkmark--4f08e","item":"bp_dropdown_menu_module_item--4f08e","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--4f08e","radioItem":"bp_dropdown_menu_module_radioItem--4f08e","checkboxItem":"bp_dropdown_menu_module_checkboxItem--4f08e","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--4f08e"};
 
 export { styles as default };

package/lib-esm/primitives/dropdown-menu/index.d.ts

@@ -10,7 +10,7 @@ export declare const DropdownMenu: {
     CheckboxItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<import("./dropdown-menu-content").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
     Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
-    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
+    Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
     SubMenuRoot: {
         (props: import("@radix-ui/react-dropdown-menu").DropdownMenuSubProps): JSX.Element;
         displayName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.2.1",
+    "version": "7.2.3",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -58,7 +58,7 @@
         "@box/storybook-utils": "^0.1.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "d6202fe0540a3a49df8e0c513094e968b14ad21b",
+    "gitHead": "07b80bd95765ef004d4970ca69d48be574fe6c18",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {