@box/blueprint-web 12.14.0 → 12.15.0

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

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './card.module.js';
 
 /**
@@ -13,10 +14,14 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     elevation: elevationToken,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.card, elevationToken && styles[elevationToken], className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--558da","dropshadow-1":"bp_card_module_dropshadow-1--558da","dropshadow-3":"bp_card_module_dropshadow-3--558da"};
+var styles = {"card":"bp_card_module_card--c61ad","dropshadow-1":"bp_card_module_dropshadow-1--c61ad","dropshadow-3":"bp_card_module_dropshadow-3--c61ad"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1101,17 +1101,37 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--558da{
-  background:var(--surface-card-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-4);
-  padding:var(--space-4);
+.bp_card_module_card--c61ad[data-modern=true]{
+  --bp-card-dropshadow-1:var(--dropshadow-1);
+  --bp-card-dropshadow-3:var(--dropshadow-3);
+  --card-radius:var(--bp-radius-10);
+  --card-padding:var(--bp-space-060);
+  --card-background:var(--bp-surface-card-surface);
+  --card-border:var(--bp-border-01) solid var(--bp-border-card-border);
+  --card-dropshadow-1:var(--bp-card-dropshadow-1);
+  --card-dropshadow-3:var(--bp-card-dropshadow-3);
 }
-.bp_card_module_card--558da.bp_card_module_dropshadow-1--558da{
-  box-shadow:var(--dropshadow-1);
+
+.bp_card_module_card--c61ad[data-modern=false]{
+  --card-padding:var(--space-4);
+  --card-background:var(--surface-card-surface);
+  --card-border:var(--border-1) solid var(--border-card-border);
+  --card-radius:var(--radius-4);
+  --card-dropshadow-1:var(--dropshadow-1);
+  --card-dropshadow-3:var(--dropshadow-3);
 }
-.bp_card_module_card--558da.bp_card_module_dropshadow-3--558da{
-  box-shadow:var(--dropshadow-3);
+
+.bp_card_module_card--c61ad{
+  background:var(--card-background);
+  border:var(--card-border);
+  border-radius:var(--card-radius);
+  padding:var(--card-padding);
+}
+.bp_card_module_card--c61ad.bp_card_module_dropshadow-1--c61ad{
+  box-shadow:var(--card-dropshadow-1);
+}
+.bp_card_module_card--c61ad.bp_card_module_dropshadow-3--c61ad{
+  box-shadow:var(--card-dropshadow-3);
 }
 
 .bp_card_tooltip_module_content--efa88{
@@ -1747,76 +1767,145 @@
   flex-grow:0;
   flex-shrink:0;
 }
+.bp_labelable_module_required--25dbc{
+  align-items:center;
+  display:inline-flex;
+  gap:var(--space-1);
+}
+.bp_labelable_module_required--25dbc::before{
+  color:var(--icon-icon-required-on-light);
+  content:"*";
+  font-family:monospace;
+  transform:scale(1.2);
+}
 
-.bp_text_area_autosize_module_textArea--d9d31{
-  background:var(--surface-input-surface);
+.bp_text_area_autosize_module_textArea--4fa6a[data-modern=false]{
+  --text-area-text-color:var(--text-text-on-light);
+  --text-area-inner-shadow:var(--innershadow-1);
+  --text-area-background-color:var(--surface-input-surface);
+  --text-area-padding-inline:var(--space-3);
+  --text-area-padding-block:0.625rem;
+  --text-area-placeholder-color:var(--text-text-on-light-secondary);
+  --text-area-error-background-color:var(--surface-input-surface-error);
+  --text-area-error-background-focus:var(--surface-input-surface-focus);
+  --text-area-error-background-hover:var(--surface-input-surface-hover);
+  --text-area-icon-padding:1.875rem;
+}
+
+.bp_text_area_autosize_module_textArea--4fa6a[data-modern=true]{
+  --text-area-inner-shadow:var(--innershadow-1);
+  --text-area-text-color:var(--bp-text-text-on-light);
+  --text-area-background-color:var(--bp-surface-input-surface);
+  --text-area-padding-inline:var(--bp-size-030);
+  --text-area-padding-block:0.625rem;
+  --text-area-placeholder-color:var(--bp-text-text-on-light-secondary);
+  --text-area-error-background-color:var(--bp-surface-input-surface-error);
+  --text-area-error-background-focus:var(--bp-surface-input-surface-focus);
+  --text-area-error-background-hover:var(--bp-surface-input-surface-hover);
+  --text-area-icon-padding:1.875rem;
+}
+
+.bp_text_area_autosize_module_textArea--4fa6a{
+  background:var(--text-area-background-color);
   border:none;
-  box-shadow:var(--innershadow-1);
-  color:var(--text-text-on-light);
+  box-shadow:var(--text-area-inner-shadow);
+  color:var(--text-area-text-color);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   margin:0;
-  padding-block:.625rem;
-  padding-inline:var(--space-3);
+  padding-block:var(--text-area-padding-block);
+  padding-inline:var(--text-area-padding-inline);
   resize:none;
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_text_area_autosize_module_textArea--d9d31::placeholder{
-  color:var(--text-text-on-light-secondary);
+.bp_text_area_autosize_module_textArea--4fa6a::placeholder{
+  color:var(--text-area-placeholder-color);
   opacity:1;
 }
-.bp_text_area_autosize_module_textArea--d9d31.bp_text_area_autosize_module_error--d9d31{
-  background:var(--surface-input-surface-error);
+.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_error--4fa6a{
+  background:var(--text-area-error-background-color);
   outline:0;
 }
-.bp_text_area_autosize_module_textArea--d9d31:focus{
+.bp_text_area_autosize_module_textArea--4fa6a:focus{
   border:none;
 }
-.bp_text_area_autosize_module_textArea--d9d31:hover{
-  box-shadow:var(--innershadow-1);
+.bp_text_area_autosize_module_textArea--4fa6a:hover{
+  box-shadow:var(--text-area-inner-shadow);
 }
-.bp_text_area_autosize_module_textArea--d9d31:focus-visible{
-  background:var(--surface-input-surface-focus);
+.bp_text_area_autosize_module_textArea--4fa6a:focus-visible{
+  background:var(--text-area-error-background-focus);
   outline:0;
 }
-.bp_text_area_autosize_module_textArea--d9d31:disabled{
-  background:var(--surface-input-surface);
+.bp_text_area_autosize_module_textArea--4fa6a:disabled{
+  background:var(--text-area-background-color);
   border:none;
-  box-shadow:var(--innershadow-1);
-  color:var(--text-text-on-light);
+  box-shadow:var(--text-area-inner-shadow);
+  color:var(--text-area-text-color);
 }
-.bp_text_area_autosize_module_textArea--d9d31:not(:disabled):not(:focus-visible):not(.bp_text_area_autosize_module_error--d9d31):hover{
-  background:var(--surface-input-surface-hover);
+.bp_text_area_autosize_module_textArea--4fa6a:not(:disabled):not(:focus-visible):not(.bp_text_area_autosize_module_error--4fa6a):hover{
+  background:var(--text-area-error-background-hover);
 }
-.bp_text_area_autosize_module_textArea--d9d31.bp_text_area_autosize_module_loading--d9d31{
-  padding-inline-end:1.875rem;
+.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_loading--4fa6a{
+  padding-inline-end:var(--text-area-icon-padding);
+}
+
+.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=false]{
+  --text-area-loading-indicator-width:var(--size-6);
+  --text-area-loading-indicator-height:var(--size-6);
 }
 
-.bp_text_area_autosize_module_loadingIndicator--d9d31{
+.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=true]{
+  --text-area-loading-indicator-width:var(--bp-size-060);
+  --text-area-loading-indicator-height:var(--bp-size-060);
+}
+
+.bp_text_area_autosize_module_loadingIndicator--4fa6a{
   bottom:.375rem;
   display:inline-block;
-  height:var(--size-6);
+  height:var(--text-area-loading-indicator-height);
   left:unset;
   position:absolute;
   right:0;
-  width:var(--size-6);
+  width:var(--text-area-loading-indicator-width);
 }
 
-.bp_text_area_autosize_module_border--d9d31{
-  border-radius:var(--radius-2);
-  box-shadow:0 0 0 var(--border-1) var(--border-input-border);
+.bp_text_area_autosize_module_border--4fa6a[data-modern=false]{
+  --text-area-radius:var(--radius-2);
+  --text-area-border-width:var(--border-1);
+  --text-area-shadow-color:var(--border-input-border);
+}
+
+.bp_text_area_autosize_module_border--4fa6a[data-modern=true]{
+  --text-area-radius:var(--bp-radius-06);
+  --text-area-border-width:var(--bp-border-01);
+  --text-area-shadow-color:var(--bp-border-input-border);
+}
+
+.bp_text_area_autosize_module_border--4fa6a{
+  border-radius:var(--text-area-radius);
+  box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-shadow-color);
   display:flex;
   overflow:hidden;
   transform:translateZ(0);
 }
 
-.bp_text_area_module_textAreaContainer--7227f{
+.bp_text_area_module_textAreaContainer--bf753[data-modern=false]{
+  --text-area-container-row-gap:var(--space-2);
+  --text-area-container-label-color:var(--text-text-on-light);
+}
+
+.bp_text_area_module_textAreaContainer--bf753[data-modern=true]{
+  --text-area-container-row-gap:var(--bp-size-020);
+  --text-area-container-label-color:var(--bp-text-text-on-light);
+}
+
+.bp_text_area_module_textAreaContainer--bf753{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -1829,8 +1918,8 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_label--7227f{
-  color:var(--text-text-on-light);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753{
+  color:var(--text-area-container-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -1843,25 +1932,14 @@
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_label--7227f:not(.bp_text_area_module_hidden--7227f){
-  margin-block-end:var(--space-2);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753:not(.bp_text_area_module_hidden--bf753){
+  margin-block-end:var(--text-area-container-row-gap);
 }
-.bp_text_area_module_textAreaContainer--7227f.bp_text_area_module_disabled--7227f{
+.bp_text_area_module_textAreaContainer--bf753.bp_text_area_module_disabled--bf753{
   opacity:60%;
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_inlineError--7227f{
-  margin-block-start:var(--space-2);
-}
-.bp_labelable_module_required--25dbc{
-  align-items:center;
-  display:inline-flex;
-  gap:var(--space-1);
-}
-.bp_labelable_module_required--25dbc::before{
-  color:var(--icon-icon-required-on-light);
-  content:"*";
-  font-family:monospace;
-  transform:scale(1.2);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_inlineError--bf753{
+  margin-block-start:var(--text-area-container-row-gap);
 }
 
 .bp_combobox_module_container--d598b{

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js

@@ -3,6 +3,7 @@ import { BorderInputBorderHover, Border1, BorderInputBorderFocus, Border2, Borde
 import clsx from 'clsx';
 import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import { flushSync } from 'react-dom';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
 import { debounce } from '../../utils/debounce.js';
 import { ownerWindow } from '../../utils/ownerWindow.js';
@@ -62,6 +63,9 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     onBlur,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const {
     current: isControlled
   } = useRef(value != null);
@@ -274,6 +278,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
   const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading);
   return jsxs("div", {
     className: styles.border,
+    "data-modern": enableModernizedComponents,
     onMouseEnter: handleHover,
     onMouseLeave: handleOnMouseOut,
     style: borderInlineStyle,
@@ -281,6 +286,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
       ...rest,
       ref: handleRef,
       className: classNames,
+      "data-modern": enableModernizedComponents,
       onBlur: handleBlur,
       onChange: handleChange,
       onFocus: handleFocus,
@@ -311,6 +317,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     }), isLoading && jsx(LoadingIndicator, {
       "aria-label": loadingAriaLabel,
       className: styles.loadingIndicator,
+      "data-modern": enableModernizedComponents,
       onClick: focusTextArea,
       style: !state.overflow ? {
         right: '0.75rem'

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textArea":"bp_text_area_autosize_module_textArea--d9d31","error":"bp_text_area_autosize_module_error--d9d31","loading":"bp_text_area_autosize_module_loading--d9d31","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--d9d31","border":"bp_text_area_autosize_module_border--d9d31"};
+var styles = {"textArea":"bp_text_area_autosize_module_textArea--4fa6a","error":"bp_text_area_autosize_module_error--4fa6a","loading":"bp_text_area_autosize_module_loading--4fa6a","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--4fa6a","border":"bp_text_area_autosize_module_border--4fa6a"};
 
 export { styles as default };

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

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { TextAreaAutosize } from './text-area-autosize/text-area-autosize.js';
 import styles from './text-area.module.js';
-import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -20,6 +21,9 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     maxRows,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const textAreaId = useUniqueId('text-area-');
   const inlineErrorId = useUniqueId('inline-error-');
   const hasError = !!error && !disabled;
@@ -32,6 +36,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.disabled]: disabled,
       [styles.error]: hasError
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel

package/dist/lib-esm/text-area/text-area.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--7227f","label":"bp_text_area_module_label--7227f","hidden":"bp_text_area_module_hidden--7227f","disabled":"bp_text_area_module_disabled--7227f","inlineError":"bp_text_area_module_inlineError--7227f"};
+var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--bf753","label":"bp_text_area_module_label--bf753","hidden":"bp_text_area_module_hidden--bf753","disabled":"bp_text_area_module_disabled--bf753","inlineError":"bp_text_area_module_inlineError--bf753"};
 
 export { styles as default };

package/package.json

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