@box/blueprint-web 12.60.0 → 12.61.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

@@ -2974,7 +2974,7 @@
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_select_module_container--9a5e8[data-modern=false]{
+.bp_select_module_container--e4f69[data-modern=false]{
   --select-gap:var(--space-2);
   --select-label-color:var(--text-text-on-light);
   --select-trigger-btn-gap:var(--space-2);
@@ -3004,7 +3004,7 @@
   --select-trigger-btn-pencil-height:var(--size-4);
 }
 
-.bp_select_module_container--9a5e8[data-modern=true]{
+.bp_select_module_container--e4f69[data-modern=true]{
   --select-gap:var(--bp-space-020);
   --select-label-color:var(--bp-text-text-on-light);
   --select-trigger-btn-gap:var(--bp-space-020);
@@ -3034,7 +3034,7 @@
   --select-trigger-btn-pencil-height:var(--bp-size-040);
 }
 
-.bp_select_module_container--9a5e8{
+.bp_select_module_container--e4f69{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -3047,10 +3047,10 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_select_module_container--9a5e8.bp_select_module_disabled--9a5e8{
+.bp_select_module_container--e4f69.bp_select_module_disabled--e4f69{
   opacity:60%;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_label--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_label--e4f69{
   color:var(--select-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -3063,7 +3063,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69{
   align-items:center;
   background-color:var(--select-trigger-btn-bg-color);
   border-bottom:var(--select-trigger-btn-border-bottom);
@@ -3092,58 +3092,58 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 span:first-child{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 span:first-child{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:disabled{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:disabled{
   cursor:default;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8.bp_select_module_readonly--9a5e8:not(:disabled){
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69.bp_select_module_readonly--e4f69:not(:disabled){
   background-color:var(--gray-02);
   box-shadow:none;
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled).bp_select_module_error--9a5e8,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled)[aria-invalid=true]{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled).bp_select_module_error--e4f69,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled)[aria-invalid=true]{
   background-color:var(----select-trigger-btn-error-bg-color);
   border-bottom:var(--select-trigger-btn-error-border-bottom);
   border-left:var(--select-trigger-btn-error-border-left);
   border-right:var(--select-trigger-btn-error-border-right);
   border-top:var(--select-trigger-btn-error-border-top);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):focus,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled).bp_select_module_error--9a5e8:focus,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled)[aria-invalid=true]:focus{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):focus,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled).bp_select_module_error--e4f69:focus,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled)[aria-invalid=true]:focus{
   background-color:var(--select-trigger-btn-focus-bg-color);
   border:var(--select-trigger-btn-focus-border);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled):not(:focus):not(.bp_select_module_error--9a5e8):not([aria-invalid]):hover{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled):not(:focus):not(.bp_select_module_error--e4f69):not([aria-invalid]):hover{
   background-color:var(--select-trigger-btn-hover-bg-color);
   border-color:var(--select-trigger-btn-hover-border-color);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconWrapper--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconWrapper--e4f69{
   flex-shrink:0;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconCaret--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconCaret--e4f69{
   display:block;
   height:var(--select-trigger-btn-caret-height);
   width:var(--select-trigger-btn-caret-width);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconCaret--9a5e8 path{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconCaret--e4f69 path{
   fill:var(--select-trigger-btn-caret-color);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconPencilCrossed--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconPencilCrossed--e4f69{
   display:block;
   height:var(--select-trigger-btn-pencil-height);
   width:var(--select-trigger-btn-pencil-width);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8[data-state=open] .bp_select_module_icon--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69[data-state=open] .bp_select_module_icon--e4f69{
   transform:rotate(180deg);
 }
 
-.bp_select_module_content--9a5e8[data-modern=false]{
+.bp_select_module_content--e4f69[data-modern=false]{
   --select-content-bg-color:var(--surface-menu-surface);
   --select-content-backdrop-filter:none;
   --select-content-border:var(--border-1) solid var(--border-card-border);
@@ -3169,7 +3169,7 @@
   --select-content-viewport-option-separator-margin-block:var(--space-2);
 }
 
-.bp_select_module_content--9a5e8[data-modern=true]{
+.bp_select_module_content--e4f69[data-modern=true]{
   --select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
   --select-content-backdrop-filter:blur(16px);
   --select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
@@ -3195,7 +3195,7 @@
   --select-content-viewport-option-separator-margin-block:var(--bp-space-020);
 }
 
-.bp_select_module_content--9a5e8{
+.bp_select_module_content--e4f69{
   backdrop-filter:var(--select-content-backdrop-filter);
   background-color:var(--select-content-bg-color);
   border:var(--select-content-border);
@@ -3215,11 +3215,11 @@
   text-transform:var(--body-default-text-case);
   z-index:380;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69{
   padding-block:var(--select-content-viewport-padding-block);
   padding-inline:var(--select-content-viewport-padding-inline);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69{
   border:var(--select-content-viewport-option-border);
   border-radius:var(--select-content-viewport-option-border-radius);
   cursor:pointer;
@@ -3234,29 +3234,29 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8[data-disabled]{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8[data-highlighted]{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69[data-highlighted]{
   background-color:var(--select-content-viewport-option-focus-bg-color);
   border:var(--select-content-viewport-option-focus-border);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8:active{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69:active{
   background-color:var(--select-content-viewport-option-active-bg-color);
   border:var(--select-content-viewport-option-active-border);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8:hover{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69:hover{
   background-color:var(--select-content-viewport-option-hover-bg-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 span:first-child{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 span:first-child{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_secondaryText--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_secondaryText--e4f69{
   color:var(--select-content-viewport-option-secondary-text-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_indicator--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_indicator--e4f69{
   align-items:center;
   display:flex;
   height:var(--select-content-viewport-option-indicator-height);
@@ -3265,90 +3265,134 @@
   position:absolute;
   top:0;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_indicator--9a5e8 path{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_indicator--e4f69 path{
   fill:var(--select-content-viewport-option-indicator-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_separator--9a5e8{
-  background-color:var(--select-content-bg-color-viewport-option-separator-bg-color);
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_separator--e4f69{
+  background-color:var(--select-content-viewport-option-separator-bg-color);
   flex-shrink:0;
-  height:var(--select-content-bg-color-viewport-option-separator-height);
-  margin-block:var(--select-content-bg-color-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);
+  height:var(--select-content-viewport-option-separator-height);
+  margin-block:var(--select-content-viewport-option-separator-margin-block);
+}
+
+.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%;

package/dist/lib-esm/select/select.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--9a5e8","disabled":"bp_select_module_disabled--9a5e8","label":"bp_select_module_label--9a5e8","triggerBtn":"bp_select_module_triggerBtn--9a5e8","readonly":"bp_select_module_readonly--9a5e8","error":"bp_select_module_error--9a5e8","iconWrapper":"bp_select_module_iconWrapper--9a5e8","iconCaret":"bp_select_module_iconCaret--9a5e8","iconPencilCrossed":"bp_select_module_iconPencilCrossed--9a5e8","icon":"bp_select_module_icon--9a5e8","content":"bp_select_module_content--9a5e8","viewport":"bp_select_module_viewport--9a5e8","option":"bp_select_module_option--9a5e8","secondaryText":"bp_select_module_secondaryText--9a5e8","indicator":"bp_select_module_indicator--9a5e8","separator":"bp_select_module_separator--9a5e8"};
+var styles = {"container":"bp_select_module_container--e4f69","disabled":"bp_select_module_disabled--e4f69","label":"bp_select_module_label--e4f69","triggerBtn":"bp_select_module_triggerBtn--e4f69","readonly":"bp_select_module_readonly--e4f69","error":"bp_select_module_error--e4f69","iconWrapper":"bp_select_module_iconWrapper--e4f69","iconCaret":"bp_select_module_iconCaret--e4f69","iconPencilCrossed":"bp_select_module_iconPencilCrossed--e4f69","icon":"bp_select_module_icon--e4f69","content":"bp_select_module_content--e4f69","viewport":"bp_select_module_viewport--e4f69","option":"bp_select_module_option--e4f69","secondaryText":"bp_select_module_secondaryText--e4f69","indicator":"bp_select_module_indicator--e4f69","separator":"bp_select_module_separator--e4f69"};
 
 export { styles as default };

package/package.json

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