@box/blueprint-web 6.0.3 → 6.1.0

package/lib-esm/data-table/cell/sticky-cell.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type CellProps } from '../../list-item/cell/cell';
+export type StickyCellProps = CellProps;
+export declare const StickyCell: import("react").ForwardRefExoticComponent<CellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/lib-esm/data-table/cell/sticky-cell.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Cell } from '../../list-item/index.js';
+import { useScrollContext } from '../../util-components/scrollable-container/scrollable-container.js';
+import styles from './sticky-cell.module.js';
+
+const StickyCell = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    isScrolledX
+  } = useScrollContext();
+  return jsxs(Cell, {
+    ref: ref,
+    className: clsx(styles.stickyCell, className),
+    ...rest,
+    children: [jsx("div", {
+      className: styles.stickyCellLeft
+    }), jsx("div", {
+      className: styles.childrenWrapper,
+      children: children
+    }), jsx("div", {
+      className: styles.stickyCellRight
+    }), jsx("div", {
+      className: clsx(styles.verticalBar, {
+        [styles.isScrolledX]: isScrolledX
+      })
+    })]
+  });
+});
+
+export { StickyCell };

package/lib-esm/data-table/cell/sticky-cell.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"stickyCell":"sticky-cell-module_stickyCell__-Rl0x","childrenWrapper":"sticky-cell-module_childrenWrapper__qjguw","verticalBar":"sticky-cell-module_verticalBar__AgXfU","isScrolledX":"sticky-cell-module_isScrolledX__xcMJ6","stickyCellLeft":"sticky-cell-module_stickyCellLeft__F3YAG","stickyCellRight":"sticky-cell-module_stickyCellRight__yQjUM"};
+
+export { styles as default };

package/lib-esm/data-table/data-table-wrapper.d.ts

@@ -1,6 +1,5 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
-interface TableWrapperProps extends HTMLAttributes<HTMLDivElement> {
+export interface DataTableWrapperProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-export declare const DataTableWrapper: import("react").ForwardRefExoticComponent<TableWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
-export {};
+export declare const DataTableWrapper: import("react").ForwardRefExoticComponent<DataTableWrapperProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/data-table/data-table-wrapper.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useRef } from 'react';
-import { useScroll } from '../util-components/scrollable-container/scrollable-container.js';
+import { useScroll, ScrollContext } from '../util-components/scrollable-container/scrollable-container.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import styles from './data-table.module.js';
 
@@ -14,23 +14,27 @@ const DataTableWrapper = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const localRef = useRef(null);
   const {
-    value: {
-      offsetTillEndX,
-      isScrolledX,
-      isScrolledY
-    },
+    value,
     onScrollThrottled
   } = useScroll(localRef);
-  return jsx("div", {
-    ref: useForkRef(localRef, forwardedRef),
-    className: clsx({
-      [styles.hideActionWrapperRight]: offsetTillEndX <= hideActionWrapperRightOffsetPx,
-      [styles.isScrolledY]: isScrolledY,
-      [styles.isScrolledX]: isScrolledX
-    }, styles.dataTableWrapper, className),
-    onScroll: onScrollThrottled,
-    ...rest,
-    children: children
+  const {
+    offsetTillEndX,
+    isScrolledX,
+    isScrolledY
+  } = value;
+  return jsx(ScrollContext.Provider, {
+    value: value,
+    children: jsx("div", {
+      ref: useForkRef(localRef, forwardedRef),
+      className: clsx({
+        [styles.hideActionWrapperRight]: offsetTillEndX <= hideActionWrapperRightOffsetPx,
+        [styles.isScrolledY]: isScrolledY,
+        [styles.isScrolledX]: isScrolledX
+      }, styles.dataTableWrapper, className),
+      onScroll: onScrollThrottled,
+      ...rest,
+      children: children
+    })
   });
 });
 

package/lib-esm/data-table/data-table.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const DataTableWrapper: import("react").ForwardRefExoticComponent<import("./data-table-wrapper").DataTableWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const StickyCell: import("react").ForwardRefExoticComponent<import("../list-item/cell/cell").CellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/lib-esm/data-table/data-table.js

@@ -0,0 +1,7 @@
+import { DataTableWrapper as DataTableWrapper$1 } from './data-table-wrapper.js';
+import { StickyCell as StickyCell$1 } from './cell/sticky-cell.js';
+
+const DataTableWrapper = DataTableWrapper$1;
+const StickyCell = StickyCell$1;
+
+export { DataTableWrapper, StickyCell };

package/lib-esm/data-table/data-table.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dataTableWrapper":"data-table-module_dataTableWrapper__VYLJf","isScrolledX":"data-table-module_isScrolledX__72L-a","isScrolledY":"data-table-module_isScrolledY__arf4n","hideActionWrapperRight":"data-table-module_hideActionWrapperRight__jjb50"};
+var styles = {"dataTableWrapper":"data-table-module_dataTableWrapper__VYLJf","isScrolledX":"data-table-module_isScrolledX__72L-a","hideActionWrapperRight":"data-table-module_hideActionWrapperRight__jjb50"};
 
 export { styles as default };

package/lib-esm/data-table/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type DataTableWrapperProps } from './data-table-wrapper';
+import { type StickyCellProps } from './cell/sticky-cell';
+export declare const DataTableWrapper: import("react").ForwardRefExoticComponent<DataTableWrapperProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const StickyCell: import("react").ForwardRefExoticComponent<import("../list-item/cell/cell").CellProps & import("react").RefAttributes<HTMLTableCellElement>>;
+export type { StickyCellProps, DataTableWrapperProps };

package/lib-esm/index.css

@@ -2848,7 +2848,7 @@
 
 .data-table-module_dataTableWrapper__VYLJf{
   --border-radius-datatable:0;
-  --outline-offset-focus-and-selected-row-datatable:-0.35rem;
+  --outline-offset-focus-and-selected-row-datatable:-6px;
   --outline-select-color-datatable:#0000;
   --sticky-element-z-index:2;
   height:100%;
@@ -2876,6 +2876,9 @@
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr{
+  --is-row-focused:0;
+}
 .data-table-module_dataTableWrapper__VYLJf table tbody > tr > td [data-actionswrapper]::after{
   background:inherit;
   content:"";
@@ -2886,243 +2889,34 @@
   width:100%;
   z-index:-1;
 }
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child{
-  background:inherit;
-  left:0;
-  position:sticky;
-  z-index:var(--sticky-element-z-index);
-}
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child[data-focus-visible]{
-  position:sticky;
-  z-index:var(--sticky-element-z-index);
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible]{
+  --outline-offset-focus-cell:var(--outline-offset-focus-row);
+  --is-row-focused:1;
 }
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child[data-focus-visible]::after{
-  display:none;
+.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible][aria-selected=true]{
+  --outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
 }
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child::before{
-  background:inherit;
-  border-radius:unset;
-  box-sizing:border-box;
-  content:"";
-  height:inherit;
-  height:100%;
-  left:0;
-  pointer-events:none;
-  position:absolute;
-  top:0;
-  width:var(--space-3);
-  width:calc(100% + var(--outline-offset-focus-row));
-  z-index:-1;
+
+.data-table-module_isScrolledX__72L-a table > thead > tr > th:first-child{
+  overflow:visible;
 }
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr > td:first-child::after{
+.data-table-module_isScrolledX__72L-a table > thead > tr > th:first-child::after{
   background:inherit;
-  border-radius:unset;
-  box-sizing:border-box;
+  border-right:1px solid var(--border-divider-border);
+  box-shadow:10px 0 7px -4px var(--item-background);
   content:"";
-  height:inherit;
-  height:calc(100% + var(--outline-offset)*2);
-  left:100%;
-  pointer-events:none;
+  height:1.5rem;
   position:absolute;
+  right:0;
   top:50%;
-  transform:translate(-100%, -50%);
+  transform:translateY(-50%);
   width:var(--space-3);
-}
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible]{
-  --outline-offset:var(--outline-offset-focus-row);
-}
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible][aria-selected=true]{
-  --outline-offset:var(--outline-offset-focus-and-selected-row);
-}
-.data-table-module_dataTableWrapper__VYLJf table tbody > tr[data-focus-visible] > td:first-child{
-  background-clip:content-box;
-  outline:var(--border-2) solid var(--outline-focus-on-light);
-  outline-offset:var(--outline-offset);
-}
-
-.data-table-module_isScrolledX__72L-a tr td:first-child,.data-table-module_isScrolledX__72L-a tr th:first-child{
-  border-right:1px solid var(--border-divider-border);
-  box-shadow:10px 0 7px -4px var(--item-background);
-}
-
-.data-table-module_isScrolledY__arf4n table > thead > tr{
-  box-shadow:0 4px 6px -2px rgba(0,0,0,.039);
+  z-index:-1;
 }
 
 .data-table-module_hideActionWrapperRight__jjb50 table tbody > tr > td [data-actionswrapper]::after{
   display:none;
 }
-
-.empty-state-module_emptyState__Qs2b2{
-  align-items:center;
-  display:flex;
-  flex-direction:column;
-  height:100%;
-  justify-content:center;
-  text-align:center;
-  width:100%;
-}
-.empty-state-module_emptyState__Qs2b2 .empty-state-module_illustration__Z63DC{
-  margin-block-end:var(--space-6);
-}
-.empty-state-module_emptyState__Qs2b2 .empty-state-module_body__JA15E{
-  max-width:22.5rem;
-}
-.empty-state-module_emptyState__Qs2b2 .empty-state-module_body__JA15E:not(:last-child){
-  margin-block-end:var(--space-6);
-}
-.empty-state-module_emptyState__Qs2b2 .empty-state-module_heading__rdgZb{
-  margin-block-end:var(--space-3);
-}
-.empty-state-module_emptyState__Qs2b2 .empty-state-module_button__w6EgO:not(:last-child){
-  margin-block-end:var(--space-6);
-}
-.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_illustration__Z63DC{
-  margin-block-end:var(--space-4);
-}
-.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_illustration__Z63DC svg{
-  height:var(--size-14);
-  width:var(--size-14);
-}
-.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_body__JA15E{
-  max-width:220px;
-}
-.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_body__JA15E:not(:last-child){
-  margin-block-end:var(--space-4);
-}
-
-.guided-tooltip-module_content__4P0jU{
-  background-color:var(--gray-white);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-4);
-  filter:drop-shadow(0 .25rem .75rem rgba(0, 0, 0, .1));
-  max-width:22.5rem;
-  padding-block-end:var(--space-6);
-  padding-block-start:var(--space-7);
-  padding-inline:var(--space-7);
-  z-index:10;
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_body__lf6-N.guided-tooltip-module_noTitle__C-rQU{
-  padding-inline-end:var(--space-6);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_title__WjhyT{
-  margin-block-end:var(--space-2);
-  padding-inline-end:var(--space-6);
-}
-.guided-tooltip-module_content__4P0jU * + .guided-tooltip-module_footer__dvCqt{
-  margin-block-start:var(--space-5);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_footer__dvCqt{
-  display:flex;
-  justify-content:flex-end;
-  width:100%;
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_actionButtons__JCj8T{
-  display:flex;
-  gap:var(--space-2);
-  justify-content:flex-end;
-  width:100%;
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_stepsIndicator__hkoGZ{
-  align-self:center;
-  color:var(--text-text-on-light-secondary);
-  width:100%;
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_closeButton__ZVZcg{
-  color:var(--gray-black);
-  position:absolute;
-  right:var(--space-3);
-  top:var(--space-3);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_arrow__JCGwC{
-  align-content:center;
-  display:flex !important;
-  height:var(--size-4);
-  justify-content:center;
-  visibility:visible;
-  width:var(--size-9);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_arrow__JCGwC::after{
-  background-color:var(--gray-white);
-  border-bottom-right-radius:var(--radius-1);
-  border-color:var(--border-card-border);
-  border-style:solid;
-  border-width:0 var(--border-1) var(--border-1) 0;
-  content:"";
-  height:var(--size-6);
-  transform:translateY(-50%) rotate(45deg);
-  width:var(--size-6);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_icon__FZnIm{
-  align-items:center;
-  background-color:var(--box-blue-10);
-  border-radius:var(--radius-2);
-  display:flex;
-  height:var(--size-7);
-  justify-content:center;
-  margin-block-end:var(--space-4);
-  width:var(--size-7);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_icon__FZnIm::after{
-  height:var(--size-4);
-  width:var(--size-4);
-}
-.guided-tooltip-module_content__4P0jU .guided-tooltip-module_illustration__CU2kK{
-  border-radius:var(--radius-4);
-  margin-block-start:var(--space-5);
-  width:100%;
-}
-table.inline-table-module_inlineTable__Se38I{
-  background:var(--gray-white);
-  border:var(--border-1) solid var(--gray-10);
-  border-collapse:initial;
-  border-color:var(--border-card-border);
-  border-radius:var(--radius-2);
-  border-spacing:0;
-}
-table.inline-table-module_inlineTable__Se38I.inline-table-module_borderHidden__nGEm4{
-  border:none;
-}
-table.inline-table-module_inlineTable__Se38I.inline-table-module_fullSpan__p2f2m{
-  width:100%;
-}
-table.inline-table-module_inlineTable__Se38I td{
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
-  font-weight:400;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  text-decoration:none;
-  text-transform:none;
-}
-table.inline-table-module_inlineTable__Se38I td.inline-table-module_actionCell__D-Lu2{
-  padding-block-end:var(--space-2);
-  padding-block-start:var(--space-2);
-}
-table.inline-table-module_inlineTable__Se38I th{
-  border-bottom:var(--border-1) solid var(--gray-10);
-  color:var(--text-text-on-light-secondary);
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.75rem;
-  font-weight:400;
-  letter-spacing:.01875rem;
-  line-height:.875rem;
-  text-decoration:none;
-  text-transform:none;
-  text-transform:uppercase;
-}
-table.inline-table-module_inlineTable__Se38I td,table.inline-table-module_inlineTable__Se38I th{
-  height:var(--size-12);
-}
-table.inline-table-module_inlineTable__Se38I td:first-child,table.inline-table-module_inlineTable__Se38I th:first-child{
-  padding-inline-start:var(--space-5);
-}
-table.inline-table-module_inlineTable__Se38I td:last-child,table.inline-table-module_inlineTable__Se38I td:not(:only-child),table.inline-table-module_inlineTable__Se38I th:last-child,table.inline-table-module_inlineTable__Se38I th:not(:only-child){
-  padding-inline-end:var(--space-5);
-}
-table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
-  border-block-end:var(--border-1) solid var(--gray-10);
-}
 @layer baseTable{
   .main-module_resizableTableContainer__Mf8-Q{
     min-width:0;
@@ -3360,6 +3154,237 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
   transform:translateZ(0);
 }
 
+.sticky-cell-module_stickyCell__-Rl0x{
+  background:inherit;
+  background-clip:content-box;
+  left:0;
+  outline:calc(var(--is-row-focused)*var(--border-2)) solid var(--outline-focus-color);
+  outline-offset:var(--outline-offset-focus-cell);
+  overflow:visible;
+  position:sticky;
+  z-index:var(--sticky-element-z-index);
+}
+.sticky-cell-module_stickyCell__-Rl0x[data-focus-visible]{
+  outline:var(--border-2) solid var(--outline-focus-color);
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_childrenWrapper__qjguw{
+  overflow:hidden;
+  text-align:start;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_verticalBar__AgXfU{
+  background:inherit;
+  border-right:1px solid var(--border-divider-border);
+  box-shadow:10px 0 7px -4px var(--item-background);
+  display:none;
+  height:1.5rem;
+  position:absolute;
+  right:0;
+  top:50%;
+  transform:translateY(-50%);
+  width:var(--space-3);
+  z-index:calc(var(--is-row-focused)*2 - 1);
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_verticalBar__AgXfU.sticky-cell-module_isScrolledX__xcMJ6{
+  display:block;
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellLeft__F3YAG{
+  background:inherit;
+  border-radius:unset;
+  box-sizing:border-box;
+  height:100%;
+  left:0;
+  pointer-events:none;
+  position:absolute;
+  top:0;
+  width:calc(100% + var(--outline-offset-focus-row));
+  z-index:-1;
+}
+.sticky-cell-module_stickyCell__-Rl0x .sticky-cell-module_stickyCellRight__yQjUM{
+  background:inherit;
+  border-radius:unset;
+  box-sizing:border-box;
+  height:calc(var(--is-row-focused)*(100% + var(--outline-offset-focus-cell)*2));
+  left:100%;
+  pointer-events:none;
+  position:absolute;
+  top:50%;
+  transform:translate(-100%, -50%);
+  width:var(--space-3);
+}
+
+.empty-state-module_emptyState__Qs2b2{
+  align-items:center;
+  display:flex;
+  flex-direction:column;
+  height:100%;
+  justify-content:center;
+  text-align:center;
+  width:100%;
+}
+.empty-state-module_emptyState__Qs2b2 .empty-state-module_illustration__Z63DC{
+  margin-block-end:var(--space-6);
+}
+.empty-state-module_emptyState__Qs2b2 .empty-state-module_body__JA15E{
+  max-width:22.5rem;
+}
+.empty-state-module_emptyState__Qs2b2 .empty-state-module_body__JA15E:not(:last-child){
+  margin-block-end:var(--space-6);
+}
+.empty-state-module_emptyState__Qs2b2 .empty-state-module_heading__rdgZb{
+  margin-block-end:var(--space-3);
+}
+.empty-state-module_emptyState__Qs2b2 .empty-state-module_button__w6EgO:not(:last-child){
+  margin-block-end:var(--space-6);
+}
+.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_illustration__Z63DC{
+  margin-block-end:var(--space-4);
+}
+.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_illustration__Z63DC svg{
+  height:var(--size-14);
+  width:var(--size-14);
+}
+.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_body__JA15E{
+  max-width:220px;
+}
+.empty-state-module_emptyState__Qs2b2.empty-state-module_small__q9iTq .empty-state-module_body__JA15E:not(:last-child){
+  margin-block-end:var(--space-4);
+}
+
+.guided-tooltip-module_content__4P0jU{
+  background-color:var(--gray-white);
+  border:var(--border-1) solid var(--border-card-border);
+  border-radius:var(--radius-4);
+  filter:drop-shadow(0 .25rem .75rem rgba(0, 0, 0, .1));
+  max-width:22.5rem;
+  padding-block-end:var(--space-6);
+  padding-block-start:var(--space-7);
+  padding-inline:var(--space-7);
+  z-index:10;
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_body__lf6-N.guided-tooltip-module_noTitle__C-rQU{
+  padding-inline-end:var(--space-6);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_title__WjhyT{
+  margin-block-end:var(--space-2);
+  padding-inline-end:var(--space-6);
+}
+.guided-tooltip-module_content__4P0jU * + .guided-tooltip-module_footer__dvCqt{
+  margin-block-start:var(--space-5);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_footer__dvCqt{
+  display:flex;
+  justify-content:flex-end;
+  width:100%;
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_actionButtons__JCj8T{
+  display:flex;
+  gap:var(--space-2);
+  justify-content:flex-end;
+  width:100%;
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_stepsIndicator__hkoGZ{
+  align-self:center;
+  color:var(--text-text-on-light-secondary);
+  width:100%;
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_closeButton__ZVZcg{
+  color:var(--gray-black);
+  position:absolute;
+  right:var(--space-3);
+  top:var(--space-3);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_arrow__JCGwC{
+  align-content:center;
+  display:flex !important;
+  height:var(--size-4);
+  justify-content:center;
+  visibility:visible;
+  width:var(--size-9);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_arrow__JCGwC::after{
+  background-color:var(--gray-white);
+  border-bottom-right-radius:var(--radius-1);
+  border-color:var(--border-card-border);
+  border-style:solid;
+  border-width:0 var(--border-1) var(--border-1) 0;
+  content:"";
+  height:var(--size-6);
+  transform:translateY(-50%) rotate(45deg);
+  width:var(--size-6);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_icon__FZnIm{
+  align-items:center;
+  background-color:var(--box-blue-10);
+  border-radius:var(--radius-2);
+  display:flex;
+  height:var(--size-7);
+  justify-content:center;
+  margin-block-end:var(--space-4);
+  width:var(--size-7);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_icon__FZnIm::after{
+  height:var(--size-4);
+  width:var(--size-4);
+}
+.guided-tooltip-module_content__4P0jU .guided-tooltip-module_illustration__CU2kK{
+  border-radius:var(--radius-4);
+  margin-block-start:var(--space-5);
+  width:100%;
+}
+table.inline-table-module_inlineTable__Se38I{
+  background:var(--gray-white);
+  border:var(--border-1) solid var(--gray-10);
+  border-collapse:initial;
+  border-color:var(--border-card-border);
+  border-radius:var(--radius-2);
+  border-spacing:0;
+}
+table.inline-table-module_inlineTable__Se38I.inline-table-module_borderHidden__nGEm4{
+  border:none;
+}
+table.inline-table-module_inlineTable__Se38I.inline-table-module_fullSpan__p2f2m{
+  width:100%;
+}
+table.inline-table-module_inlineTable__Se38I td{
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  text-decoration:none;
+  text-transform:none;
+}
+table.inline-table-module_inlineTable__Se38I td.inline-table-module_actionCell__D-Lu2{
+  padding-block-end:var(--space-2);
+  padding-block-start:var(--space-2);
+}
+table.inline-table-module_inlineTable__Se38I th{
+  border-bottom:var(--border-1) solid var(--gray-10);
+  color:var(--text-text-on-light-secondary);
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.75rem;
+  font-weight:400;
+  letter-spacing:.01875rem;
+  line-height:.875rem;
+  text-decoration:none;
+  text-transform:none;
+  text-transform:uppercase;
+}
+table.inline-table-module_inlineTable__Se38I td,table.inline-table-module_inlineTable__Se38I th{
+  height:var(--size-12);
+}
+table.inline-table-module_inlineTable__Se38I td:first-child,table.inline-table-module_inlineTable__Se38I th:first-child{
+  padding-inline-start:var(--space-5);
+}
+table.inline-table-module_inlineTable__Se38I td:last-child,table.inline-table-module_inlineTable__Se38I td:not(:only-child),table.inline-table-module_inlineTable__Se38I th:last-child,table.inline-table-module_inlineTable__Se38I th:not(:only-child){
+  padding-inline-end:var(--space-5);
+}
+table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
+  border-block-end:var(--border-1) solid var(--gray-10);
+}
+
 .modal-module_overlay__OIKwn{
   background-color:var(--black-opacity-80);
   bottom:0;

package/lib-esm/index.d.ts

@@ -7,7 +7,7 @@ export * from './basics/collapsible';
 
 
 export * from './basics/navigation-menu';
-
+export * from './basics/small-list-item';
 export * from './basics/text-input';
 export * from './branding-styles';
 export * from './card';
@@ -16,14 +16,14 @@ export * from './checkbox';
 export * from './combobox';
 export * from './content-card';
 export * from './content-field';
-export * from './data-table/data-table-wrapper';
+export * from './data-table/data-table';
 export * from './empty-state';
 export * from './ghost';
 export * from './guided-tooltip';
 export * from './inline-notice/inline-notice';
 export * from './inline-table/inline-table';
 export * from './input-chip';
-
+export * from './list-item/list-item';
 export * from './loading-indicator/loading-indicator';
 export * from './modal';
 

package/lib-esm/index.js

@@ -7,7 +7,7 @@ export { CollapsibleSection } from './basics/collapsible/collapsible-section.js'
 
 
 export { NavigationMenu } from './basics/navigation-menu/index.js';
-
+export { SmallList } from './basics/small-list-item/index.js';
 export { TextInput } from './basics/text-input/text-input.js';
 export { BrandingStyles } from './branding-styles/branding-styles.js';
 export { useCustomBranding } from './branding-styles/useCustomBranding.js';
@@ -17,7 +17,7 @@ export { Checkbox } from './checkbox/index.js';
 export { Combobox, Root } from './combobox/combobox.js';
 export { ContentCard } from './content-card/content-card.js';
 export { ContentField } from './content-field/content-field.js';
-export { DataTableWrapper } from './data-table/data-table-wrapper.js';
+export { DataTableWrapper, StickyCell } from './data-table/data-table.js';
 export { EmptyState } from './empty-state/empty-state.js';
 export { Ghost } from './ghost/ghost.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';
@@ -25,7 +25,7 @@ export { GuidedTooltipContext } from './guided-tooltip/utils/guided-tooltip-cont
 export { InlineNotice } from './inline-notice/inline-notice.js';
 export { InlineTable } from './inline-table/inline-table.js';
 export { InputChip } from './input-chip/input-chip.js';
-
+export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHeader } from './list-item/list-item.js';
 export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
 export { Modal } from './modal/modal.js';
 
@@ -57,7 +57,7 @@ export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';
-export { ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';
+export { ScrollContext, ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';
 export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
 export { useNotification } from './primitives/notification/notification-provider.js';
 export { useTabs } from './primitives/tabs/use-tabs.js';

package/lib-esm/list-item/index.js

@@ -0,0 +1,13 @@
+import 'react/jsx-runtime';
+import 'react';
+import 'react-aria-components';
+import '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/tokens/tokens';
+import 'clsx';
+import { Cell as Cell$1 } from './cell/cell.js';
+import 'lodash/noop';
+import '@radix-ui/react-visually-hidden';
+
+const Cell = Cell$1;
+
+export { Cell };

package/lib-esm/util-components/scrollable-container/scrollable-container.d.ts

@@ -12,6 +12,7 @@ export type ScrollContextType = {
     isScrolledToEndX: boolean;
     isScrolledToEndY: boolean;
 };
+export declare const ScrollContext: import("react").Context<ScrollContextType | undefined>;
 export declare const ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<ScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export declare function useScrollContext(): ScrollContextType;
 export declare const useScroll: (forwardedRef: RefObject<HTMLDivElement>, scrollThrottleDelay?: number) => {

package/lib-esm/util-components/scrollable-container/scrollable-container.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import throttle from 'lodash/throttle';
-import { forwardRef, useRef, useContext, useState, useMemo, createContext } from 'react';
+import { createContext, forwardRef, useRef, useContext, useState, useMemo } from 'react';
 import { useForkRef } from '../../utils/useForkRef.js';
 import styles from './scrollable-container.module.js';
 
@@ -62,4 +62,4 @@ const useScroll = (forwardedRef, scrollThrottleDelay = 100) => {
   };
 };
 
-export { ScrollableContainer, useScroll, useScrollContext };
+export { ScrollContext, ScrollableContainer, useScroll, useScrollContext };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.0.3",
+    "version": "6.1.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.2"
     },
-    "gitHead": "25bf0462d7a597e6fc664d339d30b7b7093ce091",
+    "gitHead": "6ec61e3619eeb3d216d05e67f5114b8b7646d63b",
     "module": "lib-esm/index.js",
     "type": "module",
     "main": "lib-esm/index.js",