@box/blueprint-web 12.60.1 → 12.62.0

package/dist/lib-esm/content-card/content-card.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Size1, Size14, Size6, Size4, Size5, Size18 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../ghost/ghost.js';
 import { ContentCardBody } from './content-card-body.js';
 import { ContentCardFooter } from './content-card-footer.js';
@@ -9,8 +10,12 @@ import { ContentCardTitle } from './content-card-title.js';
 import styles from './content-card.module.js';
 
 const GhostContentCard = () => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     className: styles.ghostCard,
+    "data-modern": enableModernizedComponents,
     "data-testid": "ghost-content-card",
     children: [jsx(Ghost, {
       borderRadius: Size1,
@@ -61,6 +66,9 @@ const ContentCardComponent = ({
   onSelect,
   ...rest
 }) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const handleKeyDown = event => {
     if (event.key === 'Enter') {
       onSelect(event);
@@ -72,6 +80,7 @@ const ContentCardComponent = ({
   return jsx("div", {
     ...rest,
     className: clsx(styles.card, className),
+    "data-modern": enableModernizedComponents,
     onClick: onSelect,
     onKeyDown: handleKeyDown,
     role: "link",

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_content_card_module_card--adb8d","cardContent":"bp_content_card_module_cardContent--adb8d","cardTitle":"bp_content_card_module_cardTitle--adb8d","cardTitleText":"bp_content_card_module_cardTitleText--adb8d","cardBody":"bp_content_card_module_cardBody--adb8d","cardBodyText":"bp_content_card_module_cardBodyText--adb8d","cardIcon":"bp_content_card_module_cardIcon--adb8d","cardBackground":"bp_content_card_module_cardBackground--adb8d","image":"bp_content_card_module_image--adb8d","ghostCard":"bp_content_card_module_ghostCard--adb8d","iconGhost":"bp_content_card_module_iconGhost--adb8d","titleGhost":"bp_content_card_module_titleGhost--adb8d","bodyGhost":"bp_content_card_module_bodyGhost--adb8d","pillGhostContainer":"bp_content_card_module_pillGhostContainer--adb8d","pillGhost":"bp_content_card_module_pillGhost--adb8d"};
+var styles = {"card":"bp_content_card_module_card--cb1ea","ghostCard":"bp_content_card_module_ghostCard--cb1ea","cardContent":"bp_content_card_module_cardContent--cb1ea","cardTitle":"bp_content_card_module_cardTitle--cb1ea","cardTitleText":"bp_content_card_module_cardTitleText--cb1ea","cardBody":"bp_content_card_module_cardBody--cb1ea","cardBodyText":"bp_content_card_module_cardBodyText--cb1ea","cardIcon":"bp_content_card_module_cardIcon--cb1ea","cardBackground":"bp_content_card_module_cardBackground--cb1ea","image":"bp_content_card_module_image--cb1ea","iconGhost":"bp_content_card_module_iconGhost--cb1ea","titleGhost":"bp_content_card_module_titleGhost--cb1ea","bodyGhost":"bp_content_card_module_bodyGhost--cb1ea","pillGhostContainer":"bp_content_card_module_pillGhostContainer--cb1ea","pillGhost":"bp_content_card_module_pillGhost--cb1ea"};
 
 export { styles as default };

package/dist/lib-esm/ellipsizable-text/ellipsizable-text.js

@@ -26,7 +26,9 @@ const EllipsizableText = /*#__PURE__*/forwardRef(({
         display: '-webkit-box',
         overflow: 'hidden',
         WebkitBoxOrient: 'vertical',
-        WebkitLineClamp: lineClamp.toString()
+        WebkitLineClamp: lineClamp.toString(),
+        whiteSpace: lineClamp === 1 ? 'nowrap' : 'normal',
+        textOverflow: 'ellipsis'
       },
       children: children
     })

package/dist/lib-esm/index.css

@@ -3275,80 +3275,124 @@
   margin-block:var(--select-content-viewport-option-separator-margin-block);
 }
 
-.bp_content_card_module_card--adb8d{
-  background-color:var(--surface-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--size-3);
+.bp_content_card_module_card--cb1ea[data-modern=false],.bp_content_card_module_ghostCard--cb1ea[data-modern=false]{
+  --content-card-background-color:var(--surface-surface);
+  --content-card-background-height:var(--size-15);
+  --content-card-border-radius:var(--size-3);
+  --content-card-border-size:var(--border-1);
+  --content-card-content-gap:var(--size-2);
+  --content-card-dropshadow:var(--dropshadow-3);
+  --content-card-focused-border-color:var(--outline-focus-on-light);
+  --content-card-focused-border-size:var(--border-2);
+  --content-card-icon-border-size:var(--size-1);
+  --content-card-icon-position:var(--size-3);
+  --content-card-icon-size:var(--size-14);
+  --content-card-max-width:27.8125rem;
+  --content-card-min-width:13.75rem;
+  --content-card-padding:var(--size-4);
+  --content-card-pressed-background-color:var(--surface-card-surface-pressed);
+  --content-card-text-height:var(--size-12);
+  --content-card-border:var(--border-1) solid var(--border-card-border);
+  --content-card-focused-border:var(--border-2) solid var(--outline-focus-on-light);
+  --content-card-pressed-border:var(--border-1) solid var(--border-card-border);
+}
+
+.bp_content_card_module_card--cb1ea[data-modern=true],.bp_content_card_module_ghostCard--cb1ea[data-modern=true]{
+  --content-card-background-color:var(--bp-surface-card-surface);
+  --content-card-background-height:var(--bp-size-150);
+  --content-card-border-radius:var(--bp-radius-10);
+  --content-card-border-size:var(--bp-border-01);
+  --content-card-content-gap:var(--bp-space-020);
+  --content-card-dropshadow:var(--dropshadow-3);
+  --content-card-focused-border-color:var(--bp-outline-focus-on-light);
+  --content-card-focused-border-size:var(--bp-border-02);
+  --content-card-icon-border-size:var(--bp-size-010);
+  --content-card-icon-position:var(--bp-size-030);
+  --content-card-icon-size:var(--bp-size-140);
+  --content-card-max-width:27.8125rem;
+  --content-card-min-width:13.75rem;
+  --content-card-padding:var(--bp-space-040);
+  --content-card-pressed-background-color:var(--bp-surface-card-surface-pressed);
+  --content-card-text-height:var(--bp-size-120);
+  --content-card-border:var(--bp-border-01) solid var(--bp-border-card-border);
+  --content-card-focused-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --content-card-pressed-border:var(--bp-border-01) solid var(--bp-border-card-border);
+}
+
+.bp_content_card_module_card--cb1ea{
+  background-color:var(--content-card-background-color);
+  border:var(--content-card-border);
+  border-radius:var(--content-card-border-radius);
   cursor:pointer;
-  max-width:calc(27.8125rem - var(--size-4) - var(--border-1));
-  min-width:calc(13.75rem - var(--size-4) - var(--border-1));
+  max-width:calc(var(--content-card-max-width) - var(--content-card-padding) - var(--content-card-border-size));
+  min-width:calc(var(--content-card-min-width) - var(--content-card-padding) - var(--content-card-border-size));
   overflow:hidden;
-  padding:var(--size-4);
+  padding:var(--content-card-padding);
   position:relative;
 }
-.bp_content_card_module_card--adb8d:hover{
-  box-shadow:var(--dropshadow-3);
+.bp_content_card_module_card--cb1ea:hover{
+  box-shadow:var(--content-card-dropshadow);
 }
-.bp_content_card_module_card--adb8d:focus-visible{
-  border:var(--border-2) solid var(--outline-focus-on-light);
-  box-shadow:var(--dropshadow-3);
+.bp_content_card_module_card--cb1ea:focus-visible{
+  border:var(--content-card-focused-border);
+  box-shadow:var(--content-card-dropshadow);
   outline:none;
 }
-.bp_content_card_module_card--adb8d:active{
-  background-color:var(--surface-card-surface-pressed);
-  border:var(--border-1) solid var(--border-card-border);
+.bp_content_card_module_card--cb1ea:active{
+  background-color:var(--content-card-pressed-background-color);
+  border:var(--content-card-pressed-border);
   box-shadow:none;
 }
 
-.bp_content_card_module_cardContent--adb8d{
+.bp_content_card_module_cardContent--cb1ea{
   display:flex;
   flex-direction:column;
-  gap:var(--size-2);
+  gap:var(--content-card-content-gap);
   height:100%;
   justify-content:space-between;
-  padding-block-start:calc(var(--size-14) + var(--size-2) + var(--size-1));
+  padding-block-start:calc(var(--content-card-icon-size) + var(--content-card-content-gap) + var(--content-card-icon-border-size));
 }
 
-.bp_content_card_module_cardTitle--adb8d{
+.bp_content_card_module_cardTitle--cb1ea{
   align-items:center;
   display:flex;
-  height:var(--size-12);
+  height:var(--content-card-text-height);
 }
 
-.bp_content_card_module_cardTitleText--adb8d{
+.bp_content_card_module_cardTitleText--cb1ea{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardBody--adb8d{
-  height:var(--size-12);
-  margin-block-end:var(--size-2);
+.bp_content_card_module_cardBody--cb1ea{
+  height:var(--content-card-text-height);
+  margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_cardBodyText--adb8d{
+.bp_content_card_module_cardBodyText--cb1ea{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   display:-webkit-inline-box;
   overflow:hidden;
 }
 
-.bp_content_card_module_cardIcon--adb8d{
-  background-color:var(--surface-surface);
-  border:var(--size-1) solid var(--surface-surface);
-  border-radius:var(--size-3);
-  height:var(--size-14);
-  left:var(--size-3);
+.bp_content_card_module_cardIcon--cb1ea{
+  background-color:var(--content-card-background-color);
+  border:var(--content-card-icon-border-size) solid var(--content-card-background-color);
+  border-radius:var(--content-card-border-radius);
+  height:var(--content-card-icon-size);
+  left:var(--content-card-icon-position);
   overflow:hidden;
   position:absolute;
-  top:var(--size-3);
-  width:var(--size-14);
+  top:var(--content-card-icon-position);
+  width:var(--content-card-icon-size);
   z-index:1;
 }
 
-.bp_content_card_module_cardBackground--adb8d{
-  height:var(--size-15);
+.bp_content_card_module_cardBackground--cb1ea{
+  height:var(--content-card-background-height);
   left:0;
   overflow:hidden;
   position:absolute;
@@ -3356,36 +3400,36 @@
   width:100%;
 }
 
-.bp_content_card_module_image--adb8d{
+.bp_content_card_module_image--cb1ea{
   height:100%;
   width:100%;
 }
 
-.bp_content_card_module_ghostCard--adb8d{
+.bp_content_card_module_ghostCard--cb1ea{
   display:flex;
   flex-direction:column;
-  max-width:calc(27.8125rem - var(--size-4));
-  min-width:calc(13.75rem - var(--size-4));
-  padding:var(--size-4);
+  max-width:calc(var(--content-card-max-width) - var(--content-card-padding));
+  min-width:calc(var(--content-card-min-width) - var(--content-card-padding));
+  padding:var(--content-card-padding);
   position:relative;
 }
 
-.bp_content_card_module_iconGhost--adb8d,.bp_content_card_module_titleGhost--adb8d{
-  margin-block-end:var(--size-4);
+.bp_content_card_module_iconGhost--cb1ea,.bp_content_card_module_titleGhost--cb1ea{
+  margin-block-end:var(--content-card-padding);
 }
 
-.bp_content_card_module_bodyGhost--adb8d{
-  margin-block-end:var(--size-2);
+.bp_content_card_module_bodyGhost--cb1ea{
+  margin-block-end:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_pillGhostContainer--adb8d{
+.bp_content_card_module_pillGhostContainer--cb1ea{
   display:flex;
-  margin-block-end:var(--size-4);
-  margin-block-start:var(--size-2);
+  margin-block-end:var(--content-card-padding);
+  margin-block-start:var(--content-card-content-gap);
 }
 
-.bp_content_card_module_pillGhost--adb8d{
-  margin-inline-end:var(--size-2);
+.bp_content_card_module_pillGhost--cb1ea{
+  margin-inline-end:var(--content-card-content-gap);
 }
 .bp_content_field_module_contentFieldWrapper--dabac{
   width:100%;
@@ -4796,41 +4840,89 @@
 .bp_link_module_link--fb308 .bp_link_module_icon--fb308 *{
   fill:currentColor;
 }
-.bp_base_grid_list_item_module_smallList--08322{
+.bp_base_grid_list_item_module_smallList--17ab9[data-modern=false]{
+  --small-list-gap:var(--space-2);
+  --small-list-padding:var(--space-1);
+  --small-list-item-background:var(--surface-item-small-surface);
+  --small-list-item-hover:var(--surface-item-small-surface-hover);
+  --small-list-item-border-radius:var(--radius-4);
+  --small-list-thumbnail-size:var(--size-9);
+  --small-list-actions-opacity:0;
+  --small-list-item-padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3);
+  --small-list-item-column-gap:var(--space-3);
+  --small-list-header-color:var(--text-text-on-light);
+  --small-list-subtitle-color:var(--text-text-on-light-secondary);
+  --small-list-actions-height:var(--space-6);
+  --small-list-selection-width:var(--space-8);
+  --small-list-selection-height:var(--space-8);
+  --small-list-selection-border-radius:var(--radius-2);
+  --small-list-selection-hover-background:var(--surface-cta-surface-icon-hover);
+  --small-list-inner-gap:var(--space-2);
+  --small-list-inner-border-radius:var(--radius-2);
+  --small-list-inner-margin-end:var(--space-2);
+  --small-list-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --small-list-focus-outline-offset:calc(var(--border-4)*-1);
+}
+
+.bp_base_grid_list_item_module_smallList--17ab9[data-modern=true]{
+  --small-list-gap:var(--bp-space-020);
+  --small-list-padding:var(--bp-space-010);
+  --small-list-item-background:var(--bp-surface-item-small-surface);
+  --small-list-item-hover:var(--bp-surface-item-small-surface-hover);
+  --small-list-item-border-radius:var(--bp-radius-08);
+  --small-list-thumbnail-size:var(--bp-size-090);
+  --small-list-actions-opacity:0;
+  --small-list-item-padding:var(--bp-space-020) var(--bp-space-030) var(--bp-space-020) var(--bp-space-030);
+  --small-list-item-column-gap:var(--bp-space-030);
+  --small-list-header-color:var(--bp-text-text-on-light);
+  --small-list-subtitle-color:var(--bp-text-text-on-light-secondary);
+  --small-list-actions-height:var(--bp-size-060);
+  --small-list-selection-width:var(--bp-size-080);
+  --small-list-selection-height:var(--bp-size-080);
+  --small-list-selection-border-radius:var(--bp-radius-03);
+  --small-list-selection-hover-background:var(--bp-surface-cta-surface-icon-hover);
+  --small-list-inner-gap:var(--bp-space-020);
+  --small-list-inner-border-radius:var(--bp-radius-03);
+  --small-list-inner-margin-end:var(--bp-space-020);
+  --small-list-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --small-list-focus-outline-offset:calc(var(--bp-border-04)*-1);
+}
+
+.bp_base_grid_list_item_module_smallList--17ab9{
   box-sizing:border-box;
   display:grid;
-  gap:var(--space-2);
+  gap:var(--small-list-gap);
   grid-auto-flow:row;
   height:inherit;
   outline:none;
   overflow:auto;
-  padding:var(--space-1);
+  padding:var(--small-list-padding);
   width:auto;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322{
-  --actions-opacity:0;
-  --thumbnail-size:var(--size-9);
-  --item-background:var(--surface-item-small-surface);
-  --item-hover:var(--surface-item-small-surface-hover);
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9{
+  --actions-opacity:var(--small-list-actions-opacity);
+  --thumbnail-size:var(--small-list-thumbnail-size);
+  --item-background:var(--small-list-item-background);
+  --item-hover:var(--small-list-item-hover);
   align-items:center;
   background:var(--item-background);
-  border-radius:var(--radius-4);
-  column-gap:var(--space-3);
+  border-radius:var(--small-list-item-border-radius);
+  column-gap:var(--small-list-item-column-gap);
   cursor:default;
   display:grid;
   grid-template-areas:"thumbnail head actions" "thumbnail subtitle actions";
   grid-template-columns:var(--thumbnail-size) auto auto;
   outline:none;
-  padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3);
+  padding:var(--small-list-item-padding);
   position:relative;
   transform:translateZ(0);
   width:auto;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   grid-template-columns:var(--thumbnail-size) auto 0;
   grid-template-rows:100% 0;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
   align-items:center;
   aspect-ratio:1;
   display:flex;
@@ -4839,14 +4931,14 @@
   overflow:hidden;
   z-index:1;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnailContent--08322 img,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_thumbnailContent--08322 svg{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 img,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_thumbnailContent--17ab9 svg{
   height:100%;
   object-fit:cover;
   object-position:left;
   width:100%;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322{
-  color:var(--text-text-on-light);
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
+  color:var(--small-list-header-color);
   font-family:var(--body-default-semibold-font-family);
   font-size:var(--body-default-semibold-font-size);
   font-weight:var(--body-default-semibold-font-weight);
@@ -4857,12 +4949,12 @@
           text-decoration:var(--body-default-semibold-text-decoration);
   text-transform:var(--body-default-semibold-text-case);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   align-items:center;
   display:flex;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
-  color:var(--text-text-on-light-secondary);
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
+  color:var(--small-list-subtitle-color);
   font-family:var(--caption-default-font-family);
   font-size:var(--caption-default-font-size);
   font-weight:var(--caption-default-font-weight);
@@ -4873,76 +4965,76 @@
           text-decoration:var(--caption-default-text-decoration);
   text-transform:var(--caption-default-text-case);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_header--08322,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
   display:inline-block;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:not(:has(.bp_base_grid_list_item_module_header--08322)),.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:not(:has(.bp_base_grid_list_item_module_subtitle--08322)){
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_header--17ab9)),.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:not(:has(.bp_base_grid_list_item_module_subtitle--17ab9)){
   grid-template-rows:100% 0;
   row-gap:0;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
   align-items:center;
   display:flex;
   grid-area:actions;
-  height:var(--space-6);
+  height:var(--small-list-actions-height);
   justify-content:flex-end;
   opacity:var(--actions-opacity);
   padding-right:0;
 }
 @media (pointer: coarse){
-  .bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+  .bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
     --actions-opacity:1;
   }
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
   align-items:center;
   background:var(--item-background);
-  border-radius:var(--radius-2);
+  border-radius:var(--small-list-selection-border-radius);
   display:flex;
-  height:var(--space-8);
+  height:var(--small-list-selection-height);
   justify-content:center;
-  width:var(--space-8);
+  width:var(--small-list-selection-width);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
-  background:var(--surface-cta-surface-icon-hover);
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
+  background:var(--small-list-selection-hover-background);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
   align-items:center;
-  border-radius:var(--radius-2);
+  border-radius:var(--small-list-inner-border-radius);
   display:flex;
-  gap:var(--space-2);
+  gap:var(--small-list-inner-gap);
   justify-content:flex-end;
-  margin-inline-end:var(--space-2);
+  margin-inline-end:var(--small-list-inner-margin-end);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322:last-child{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
   margin-inline-end:0;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_actionsCheckboxWrapper--08322{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
   background:var(--item-hover);
   display:flex;
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322:hover,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-active-item],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focused],.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-hovered]{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9:hover,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focused],.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-hovered]{
   --actions-opacity:1;
   background:var(--item-hover);
 }
-.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_smallList--08322 .bp_base_grid_list_item_module_smallListItem--08322[data-focus-visible]::before{
+.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_smallList--17ab9 .bp_base_grid_list_item_module_smallListItem--17ab9[data-focus-visible]::before{
   --actions-opacity:1;
   border-radius:.875rem;
   content:"";
   display:block;
   height:100%;
   left:0;
-  outline:var(--border-2) solid var(--outline-focus-on-light);
-  outline-offset:calc(var(--border-4)*-1);
+  outline:var(--small-list-focus-outline);
+  outline-offset:var(--small-list-focus-outline-offset);
   position:absolute;
   top:0;
   width:100%;
 }
 
-.bp_base_grid_list_item_module_largeList--08322{
+.bp_base_grid_list_item_module_largeList--17ab9{
   box-sizing:border-box;
   display:flex;
   flex-direction:column;
@@ -4952,7 +5044,7 @@
   overflow:auto;
   padding:var(--space-1);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
   --thumbnail-size:10rem;
   --actions-opacity:0;
   --item-background:var(--gray-white);
@@ -4969,18 +5061,18 @@
   position:relative;
   transform:translateZ(0);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   grid-template-rows:1fr 1fr 1fr;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322:focus-within{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:focus-within{
   --actions-opacity:1;
 }
 @media (max-width: 374px){
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322{
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9{
     --thumbnail-size:7.5rem;
   }
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
   aspect-ratio:4/3;
   border:var(--border-1) solid var(--gray-10);
   border-radius:var(--radius-3);
@@ -4988,24 +5080,24 @@
   overflow:hidden;
   z-index:1;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
   height:100%;
   object-fit:cover;
   object-position:left;
   width:100%;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   border:none;
 }
 @media (max-width: 374px){
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
     aspect-ratio:1/1;
   }
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
     object-fit:contain;
   }
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
   align-items:center;
   display:flex;
   height:var(--space-6);
@@ -5017,11 +5109,11 @@
   top:.875rem;
 }
 @media (pointer: coarse){
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
     --actions-opacity:1;
   }
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
   align-items:center;
   background:var(--item-background);
   border-radius:var(--radius-2);
@@ -5030,15 +5122,15 @@
   justify-content:center;
   width:var(--space-8);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_fade--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
   align-self:stretch;
   background:linear-gradient(270deg, #fff 0, #fff0 100%);
   width:var(--size-8);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
   align-items:center;
   background:var(--item-background);
   border-radius:var(--radius-2);
@@ -5047,14 +5139,14 @@
   justify-content:flex-end;
   margin-inline-end:var(--space-2);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322:last-child{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9:last-child{
   margin-inline-end:0;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_actionsCheckboxWrapper--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9{
   background:var(--item-background);
   display:flex;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_header--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
   align-items:center;
   color:var(--text-text-on-light);
   display:inline-flex;
@@ -5072,7 +5164,7 @@
   text-transform:var(--body-default-semibold-text-case);
   white-space:nowrap;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
   align-items:center;
   color:var(--text-text-on-light-secondary);
   display:flex;
@@ -5088,7 +5180,7 @@
   text-transform:var(--caption-default-text-case);
   white-space:nowrap;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_description--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_description--17ab9{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:3;
   color:var(--text-text-on-light);
@@ -5107,13 +5199,13 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_snippet--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9{
   grid-area:description;
   margin:0;
   margin-block-end:var(--space-1);
   margin-block-start:var(--space-3);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322 .bp_base_grid_list_item_module_snippet--08322 .bp_base_grid_list_item_module_snippetContent--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9 .bp_base_grid_list_item_module_snippet--17ab9 .bp_base_grid_list_item_module_snippetContent--17ab9{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   border:0 0 0 var(--space-05);
@@ -5133,12 +5225,12 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322:hover,.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-active-item],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focused],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-hovered]{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9:hover,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focused],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-hovered]{
   --actions-opacity:1;
   box-shadow:var(--dropshadow-2);
   outline:var(--border-1) solid var(--border-card-border);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[data-focus-visible]::before{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[data-focus-visible]::before{
   border-radius:.875rem;
   content:"";
   display:block;
@@ -5150,31 +5242,31 @@
   top:0;
   width:100%;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]{
   --actions-opacity:1;
   --item-background:var(--box-blue-05);
   outline:var(--border-2) solid var(--border-card-border-focus);
   z-index:2;
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_fade--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_fade--17ab9{
   background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
 }
-.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
+.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
   display:none;
 }
 @supports selector(:has(.foo)){
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--08322 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true]:has(+ [aria-selected=true]){
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true]:has(+ [aria-selected=true]){
     border-end-end-radius:0;
     border-end-start-radius:0;
   }
-  .bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--08322 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--08322 .bp_base_grid_list_item_module_largeListItem--08322[aria-selected=true] + [aria-selected=true]{
+  .bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9 + [aria-selected=true],.bp_base_grid_list_item_module_largeList--17ab9 .bp_base_grid_list_item_module_largeListItem--17ab9[aria-selected=true] + [aria-selected=true]{
     border-start-end-radius:0;
     border-start-start-radius:0;
     border-top:none;
   }
 }
 
-.bp_base_grid_list_item_module_gridList--08322[data-modern=false]{
+.bp_base_grid_list_item_module_gridList--17ab9[data-modern=false]{
   --grid-list-minimum-item-width:188px;
   --grid-list-gap:var(--space-4);
   --grid-list-padding:var(--space-1);
@@ -5215,7 +5307,7 @@
   --grid-list-item-coarse-row-gap:var(--space-1);
 }
 
-.bp_base_grid_list_item_module_gridList--08322[data-modern=true]{
+.bp_base_grid_list_item_module_gridList--17ab9[data-modern=true]{
   --grid-list-minimum-item-width:188px;
   --grid-list-gap:var(--bp-space-040);
   --grid-list-padding:var(--bp-space-010);
@@ -5256,7 +5348,7 @@
   --grid-list-item-coarse-row-gap:var(--bp-space-010);
 }
 
-.bp_base_grid_list_item_module_gridList--08322{
+.bp_base_grid_list_item_module_gridList--17ab9{
   box-sizing:border-box;
   display:grid;
   gap:var(--grid-list-gap);
@@ -5266,7 +5358,7 @@
   overflow:auto;
   padding:var(--grid-list-padding);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
   --actions-opacity:0;
   --item-background:var(--grid-list-item-background);
   --row-gap:var(--grid-list-item-row-gap);
@@ -5284,15 +5376,15 @@
   row-gap:var(--row-gap);
   transform:translateZ(0);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322:focus-within{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:focus-within{
   --actions-opacity:1;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_statusPin--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_statusPin--17ab9{
   left:var(--grid-list-item-status-pin-left);
   position:absolute;
   top:var(--grid-list-item-status-pin-top);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
   aspect-ratio:var(--grid-list-thumbnail-aspect-ratio);
   background:var(--grid-list-thumbnail-background);
   border:var(--grid-list-thumbnail-border);
@@ -5300,25 +5392,25 @@
   grid-area:thumbnail;
   overflow:hidden;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322 img{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9 img{
   height:100%;
   object-fit:contain;
   width:100%;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   border:none;
 }
 @media (pointer: coarse){
-  .bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_thumbnail--08322{
+  .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_thumbnail--17ab9{
     margin-block-end:var(--space-1);
   }
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
   grid-area:subtitle;
   margin-block-start:var(--grid-list-actions-margin-block-start);
   opacity:var(--actions-opacity);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9{
   align-items:center;
   border-radius:var(--grid-list-selection-border-radius);
   display:flex;
@@ -5329,10 +5421,10 @@
   top:var(--grid-list-selection-top);
   width:var(--grid-list-selection-width);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_selection--08322:hover{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_selection--17ab9:hover{
   background:var(--grid-list-selection-hover-background);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
   align-items:center;
   background:var(--item-background);
   border-radius:var(--grid-list-actions-inner-border-radius);
@@ -5341,12 +5433,12 @@
   justify-content:center;
 }
 @media (pointer: coarse){
-  .bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_actions--08322{
+  .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_actions--17ab9{
     grid-area:actions;
     margin-block-start:0;
   }
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_header--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9{
   -webkit-box-orient:vertical;
   -webkit-line-clamp:2;
   color:var(--grid-list-header-color);
@@ -5364,11 +5456,11 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_header--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_header--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   align-items:center;
   display:flex;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_subtitle--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9{
   color:var(--grid-list-subtitle-color);
   font-family:var(--caption-default-font-family);
   font-size:var(--caption-default-font-size);
@@ -5385,15 +5477,15 @@
   text-transform:var(--caption-default-text-case);
   white-space:nowrap;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322 .bp_base_grid_list_item_module_subtitle--08322.bp_base_grid_list_item_module_loading--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9 .bp_base_grid_list_item_module_subtitle--17ab9.bp_base_grid_list_item_module_loading--17ab9{
   height:var(--grid-list-subtitle-loading-height);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322.bp_base_grid_list_item_module_isItemInteracted--08322,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322:hover,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focused],.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-hovered]{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9.bp_base_grid_list_item_module_isItemInteracted--17ab9,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9:hover,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focused],.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-hovered]{
   --actions-opacity:1;
   box-shadow:var(--grid-list-item-hover-box-shadow);
   outline:var(--grid-list-item-hover-outline);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item]::before,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible]::before{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::before,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::before{
   border-radius:var(--grid-list-item-border-radius);
   content:"";
   display:block;
@@ -5405,7 +5497,7 @@
   top:0;
   width:100%;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-active-item]::after,.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[data-focus-visible]::after{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-active-item]::after,.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[data-focus-visible]::after{
   border-radius:var(--grid-list-item-border-radius);
   content:"";
   display:block;
@@ -5417,16 +5509,16 @@
   top:0;
   width:100%;
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[aria-selected=true]{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]{
   --actions-opacity:1;
   --item-background:var(--grid-list-item-selected-background);
   outline:var(--grid-list-item-selected-outline);
 }
-.bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--08322) .bp_base_grid_list_item_module_actions--08322 .bp_base_grid_list_item_module_inner--08322{
+.bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--17ab9) .bp_base_grid_list_item_module_actions--17ab9 .bp_base_grid_list_item_module_inner--17ab9{
   opacity:0;
 }
 @media (pointer: coarse){
-  .bp_base_grid_list_item_module_gridList--08322 .bp_base_grid_list_item_module_gridListItem--08322{
+  .bp_base_grid_list_item_module_gridList--17ab9 .bp_base_grid_list_item_module_gridListItem--17ab9{
     --row-gap:var(--grid-list-item-coarse-row-gap);
     --actions-opacity:1;
     grid-template-areas:"thumbnail" "head" "subtitle" "actions";
@@ -5434,7 +5526,7 @@
   }
 }
 
-.bp_base_grid_list_item_module_tooltipContent--08322{
+.bp_base_grid_list_item_module_tooltipContent--17ab9{
   background-color:var(--surface-tooltip-surface);
   border:var(--border-1) solid var(--surface-tooltip-surface);
   border-radius:var(--radius-1);
@@ -5453,28 +5545,28 @@
   word-break:break-word;
   z-index:2147483647;
 }
-.bp_base_grid_list_item_module_tooltipContent--08322 .bp_base_grid_list_item_module_tooltipArrow--08322 svg{
+.bp_base_grid_list_item_module_tooltipContent--17ab9 .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
   display:block;
   height:.5rem;
   width:1rem;
 }
-.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=top]{
+.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top]{
   margin-block-end:var(--space-2);
 }
-.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--08322 svg{
+.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--17ab9 svg{
   transform:rotate(180deg);
 }
-.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=bottom]{
+.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=bottom]{
   margin-block-start:var(--space-2);
 }
-.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=right]{
+.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=right]{
   margin-inline-start:var(--space-2);
 }
-.bp_base_grid_list_item_module_tooltipContent--08322[data-placement=left]{
+.bp_base_grid_list_item_module_tooltipContent--17ab9[data-placement=left]{
   margin-inline-end:var(--space-2);
 }
 
-.bp_base_grid_list_item_module_staticList--08322 .bp_base_grid_list_item_module_staticListItem--08322{
+.bp_base_grid_list_item_module_staticList--17ab9 .bp_base_grid_list_item_module_staticListItem--17ab9{
   display:contents;
 }
 .bp_guided_tooltip_module_content--47a15{

package/dist/lib-esm/small-list-item/small-list.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-list.js';
 
 const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef) {
@@ -7,9 +8,13 @@ const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
+    "data-modern": enableModernizedComponents,
     layoutStyle: "small-list",
     children: children
   });

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"smallList":"bp_base_grid_list_item_module_smallList--08322","smallListItem":"bp_base_grid_list_item_module_smallListItem--08322","loading":"bp_base_grid_list_item_module_loading--08322","thumbnail":"bp_base_grid_list_item_module_thumbnail--08322","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--08322","header":"bp_base_grid_list_item_module_header--08322","subtitle":"bp_base_grid_list_item_module_subtitle--08322","actions":"bp_base_grid_list_item_module_actions--08322","selection":"bp_base_grid_list_item_module_selection--08322","inner":"bp_base_grid_list_item_module_inner--08322","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--08322","largeList":"bp_base_grid_list_item_module_largeList--08322","largeListItem":"bp_base_grid_list_item_module_largeListItem--08322","fade":"bp_base_grid_list_item_module_fade--08322","description":"bp_base_grid_list_item_module_description--08322","snippet":"bp_base_grid_list_item_module_snippet--08322","snippetContent":"bp_base_grid_list_item_module_snippetContent--08322","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--08322","gridList":"bp_base_grid_list_item_module_gridList--08322","gridListItem":"bp_base_grid_list_item_module_gridListItem--08322","statusPin":"bp_base_grid_list_item_module_statusPin--08322","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--08322","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--08322","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--08322","staticList":"bp_base_grid_list_item_module_staticList--08322","staticListItem":"bp_base_grid_list_item_module_staticListItem--08322"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--17ab9","smallListItem":"bp_base_grid_list_item_module_smallListItem--17ab9","loading":"bp_base_grid_list_item_module_loading--17ab9","thumbnail":"bp_base_grid_list_item_module_thumbnail--17ab9","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--17ab9","header":"bp_base_grid_list_item_module_header--17ab9","subtitle":"bp_base_grid_list_item_module_subtitle--17ab9","actions":"bp_base_grid_list_item_module_actions--17ab9","selection":"bp_base_grid_list_item_module_selection--17ab9","inner":"bp_base_grid_list_item_module_inner--17ab9","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--17ab9","largeList":"bp_base_grid_list_item_module_largeList--17ab9","largeListItem":"bp_base_grid_list_item_module_largeListItem--17ab9","fade":"bp_base_grid_list_item_module_fade--17ab9","description":"bp_base_grid_list_item_module_description--17ab9","snippet":"bp_base_grid_list_item_module_snippet--17ab9","snippetContent":"bp_base_grid_list_item_module_snippetContent--17ab9","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--17ab9","gridList":"bp_base_grid_list_item_module_gridList--17ab9","gridListItem":"bp_base_grid_list_item_module_gridListItem--17ab9","statusPin":"bp_base_grid_list_item_module_statusPin--17ab9","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--17ab9","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--17ab9","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--17ab9","staticList":"bp_base_grid_list_item_module_staticList--17ab9","staticListItem":"bp_base_grid_list_item_module_staticListItem--17ab9"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.60.1",
+    "version": "12.62.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {