@box/blueprint-web 12.90.1 → 12.92.0

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionItem":"bp_accordion_module_accordionItem--48d95","accordionContent":"bp_accordion_module_accordionContent--48d95","slideDown":"bp_accordion_module_slideDown--48d95","slideUp":"bp_accordion_module_slideUp--48d95","accordion":"bp_accordion_module_accordion--48d95","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--48d95","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--48d95","accordionFixedContent":"bp_accordion_module_accordionFixedContent--48d95","accordionHeader":"bp_accordion_module_accordionHeader--48d95","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--48d95","accordionStatus":"bp_accordion_module_accordionStatus--48d95","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--48d95","bgOnly":"bp_accordion_module_bgOnly--48d95","withIcon":"bp_accordion_module_withIcon--48d95","accordionTrigger":"bp_accordion_module_accordionTrigger--48d95","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--48d95"};
+var styles = {"accordionItem":"bp_accordion_module_accordionItem--4ccff","accordionContent":"bp_accordion_module_accordionContent--4ccff","slideDown":"bp_accordion_module_slideDown--4ccff","slideUp":"bp_accordion_module_slideUp--4ccff","accordion":"bp_accordion_module_accordion--4ccff","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--4ccff","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--4ccff","accordionFixedContent":"bp_accordion_module_accordionFixedContent--4ccff","accordionHeader":"bp_accordion_module_accordionHeader--4ccff","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--4ccff","accordionStatus":"bp_accordion_module_accordionStatus--4ccff","accordionIconWrapper":"bp_accordion_module_accordionIconWrapper--4ccff","bgOnly":"bp_accordion_module_bgOnly--4ccff","withIcon":"bp_accordion_module_withIcon--4ccff","accordionTrigger":"bp_accordion_module_accordionTrigger--4ccff","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--4ccff"};
 
 export { styles as default };

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

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './ghost.module.js';
 
 /**
@@ -20,18 +21,24 @@ const Ghost = ({
   borderRadius,
   style = {},
   ...rest
-}) => jsx("span", {
-  className: clsx(className, styles.ghost, {
-    [styles[variant]]: !!variant
-  }),
-  style: {
-    height,
-    width,
-    borderRadius,
-    ...style
-  },
-  ...rest
-});
+}) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsx("span", {
+    className: clsx(className, styles.ghost, {
+      [styles[variant]]: !!variant
+    }),
+    "data-modern": enableModernizedComponents,
+    style: {
+      height,
+      width,
+      borderRadius,
+      ...style
+    },
+    ...rest
+  });
+};
 Ghost.displayName = 'Ghost';
 
 export { Ghost };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"ghost":"bp_ghost_module_ghost--a5a05","ghost-keyframes":"bp_ghost_module_ghost-keyframes--a5a05","circle":"bp_ghost_module_circle--a5a05","pill":"bp_ghost_module_pill--a5a05","rectangle":"bp_ghost_module_rectangle--a5a05"};
+var styles = {"ghost":"bp_ghost_module_ghost--d6cc7","ghost-keyframes":"bp_ghost_module_ghost-keyframes--d6cc7","circle":"bp_ghost_module_circle--d6cc7","pill":"bp_ghost_module_pill--d6cc7","rectangle":"bp_ghost_module_rectangle--d6cc7"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1,34 +1,52 @@
-.bp_ghost_module_ghost--a5a05{
-  animation:bp_ghost_module_ghost-keyframes--a5a05 1.2s ease-in-out infinite;
-  background-color:var(--surface-surface-hover);
-  border-radius:var(--radius-1);
+.bp_ghost_module_ghost--d6cc7[data-modern=false]{
+  --ghost-background-color:var(--surface-surface-hover);
+  --ghost-background-color-secondary:var(--surface-surface-secondary);
+  --ghost-border-radius:var(--radius-1);
+  --ghost-border-radius-half:var(--radius-half);
+  --ghost-space-5:var(--space-5);
+  --ghost-space-6:var(--space-6);
+}
+
+.bp_ghost_module_ghost--d6cc7[data-modern=true]{
+  --ghost-background-color:var(--bp-surface-ghost-surface);
+  --ghost-background-color-secondary:var(--bp-surface-ghost-surface-secondary);
+  --ghost-border-radius:var(--bp-radius-02);
+  --ghost-border-radius-half:var(--bp-radius-16);
+  --ghost-space-5:var(--bp-space-050);
+  --ghost-space-6:var(--bp-space-060);
+}
+
+.bp_ghost_module_ghost--d6cc7{
+  animation:bp_ghost_module_ghost-keyframes--d6cc7 1.2s ease-in-out infinite;
+  background-color:var(--ghost-background-color);
+  border-radius:var(--ghost-border-radius);
   display:inline-block;
 }
-.bp_ghost_module_ghost--a5a05.bp_ghost_module_circle--a5a05{
+.bp_ghost_module_ghost--d6cc7.bp_ghost_module_circle--d6cc7{
   border-radius:50%;
-  min-height:var(--space-6);
-  min-width:var(--space-6);
+  min-height:var(--ghost-space-6);
+  min-width:var(--ghost-space-6);
 }
-.bp_ghost_module_ghost--a5a05.bp_ghost_module_pill--a5a05{
-  border-radius:var(--radius-half);
-  height:var(--space-5);
+.bp_ghost_module_ghost--d6cc7.bp_ghost_module_pill--d6cc7{
+  border-radius:var(--ghost-border-radius-half);
+  height:var(--ghost-space-5);
   width:100%;
 }
-.bp_ghost_module_ghost--a5a05.bp_ghost_module_rectangle--a5a05{
-  border-radius:var(--radius-1);
-  height:var(--space-5);
+.bp_ghost_module_ghost--d6cc7.bp_ghost_module_rectangle--d6cc7{
+  border-radius:var(--ghost-border-radius);
+  height:var(--ghost-space-5);
   width:100%;
 }
 
-@keyframes bp_ghost_module_ghost-keyframes--a5a05{
+@keyframes bp_ghost_module_ghost-keyframes--d6cc7{
   0%{
-    background-color:var(--surface-surface-hover);
+    background-color:var(--ghost-background-color);
   }
   50%{
-    background-color:var(--surface-surface-secondary);
+    background-color:var(--ghost-background-color-secondary);
   }
   100%{
-    background-color:var(--surface-surface-hover);
+    background-color:var(--ghost-background-color);
   }
 }
 .bp_base_inline_notice_module_noticeWrapper--1c117[data-modern=false]{
@@ -1122,7 +1140,7 @@
   background-color:var(--status-interactive-background-green-focus);
 }
 
-.bp_accordion_module_accordionItem--48d95[data-modern=false]{
+.bp_accordion_module_accordionItem--4ccff[data-modern=false]{
   --accordion-min-width:320px;
   --accordion-item-radius:none;
   --accordion-item-radius-expanded:none;
@@ -1163,7 +1181,7 @@
   --accordion-item-header-min-height:unset;
 }
 
-.bp_accordion_module_accordionItem--48d95[data-modern=true]{
+.bp_accordion_module_accordionItem--4ccff[data-modern=true]{
   --accordion-min-width:320px;
   --accordion-item-radius:var(--bp-radius-08);
   --accordion-item-radius-expanded:var(--bp-radius-10);
@@ -1204,19 +1222,19 @@
   --accordion-item-header-min-height:var(--bp-size-080);
 }
 
-.bp_accordion_module_accordionContent--48d95[data-state=open]{
-  animation:bp_accordion_module_slideDown--48d95 .15s ease-out;
+.bp_accordion_module_accordionContent--4ccff[data-state=open]{
+  animation:bp_accordion_module_slideDown--4ccff .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--48d95[data-state=closed]{
-  animation:bp_accordion_module_slideUp--48d95 .15s ease-out;
+.bp_accordion_module_accordionContent--4ccff[data-state=closed]{
+  animation:bp_accordion_module_slideUp--4ccff .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--48d95{
+.bp_accordion_module_accordionContent--4ccff{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--48d95{
+@keyframes bp_accordion_module_slideDown--4ccff{
   from{
     height:0;
   }
@@ -1224,7 +1242,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--48d95{
+@keyframes bp_accordion_module_slideUp--4ccff{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -1232,14 +1250,14 @@
     height:0;
   }
 }
-.bp_accordion_module_accordion--48d95{
+.bp_accordion_module_accordion--4ccff{
   display:flex;
   flex-direction:column;
   gap:var(--bp-space-030);
   padding:var(--bp-space-030);
 }
 
-.bp_accordion_module_accordionContentWrapper--48d95{
+.bp_accordion_module_accordionContentWrapper--4ccff{
   display:flex;
   flex-direction:column;
   gap:var(--accordion-content-gap);
@@ -1248,25 +1266,26 @@
   padding-inline:var(--accordion-content-padding-inline);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--48d95{
+.bp_accordion_module_accordionInlineErrorWrapper--4ccff{
   padding-block-start:var(--accordion-error-padding-block-start);
   padding-inline:var(--accordion-error-padding-inline);
 }
 
-.bp_accordion_module_accordionItem--48d95{
+.bp_accordion_module_accordionItem--4ccff{
   -webkit-tap-highlight-color:transparent;
   background:none;
   border-bottom:var(--accordion-item-border);
   border-radius:var(--accordion-item-radius);
   min-width:var(--accordion-min-width);
 }
-.bp_accordion_module_accordionItem--48d95[data-state=open]{
+.bp_accordion_module_accordionItem--4ccff[data-state=open]{
+  background-color:var(--accordion-item-background-expanded);
   border:var(--accordion-item-border-expanded);
   border-bottom:var(--accordion-item-border-bottom-expanded);
   border-radius:var(--accordion-item-radius-expanded);
 }
 
-.bp_accordion_module_accordionFixedContent--48d95{
+.bp_accordion_module_accordionFixedContent--4ccff{
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
   border-radius:var(--accordion-item-radius);
@@ -1277,7 +1296,7 @@
   padding-inline:var(--accordion-fixed-content-padding-inline);
 }
 
-.bp_accordion_module_accordionHeader--48d95{
+.bp_accordion_module_accordionHeader--4ccff{
   align-items:center;
   display:flex;
   justify-content:space-between;
@@ -1287,7 +1306,7 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionItem--48d95[data-modern=false] .bp_accordion_module_accordionHeader--48d95{
+.bp_accordion_module_accordionItem--4ccff[data-modern=false] .bp_accordion_module_accordionHeader--4ccff{
   color:var(--accordion-header-text-color);
   font-family:var(--title-small-font-family);
   font-size:var(--title-small-font-size);
@@ -1299,27 +1318,26 @@
   text-transform:var(--title-small-text-case);
 }
 
-.bp_accordion_module_accordionItem--48d95[data-modern=true] .bp_accordion_module_accordionHeader--48d95{
+.bp_accordion_module_accordionItem--4ccff[data-modern=true] .bp_accordion_module_accordionHeader--4ccff{
   color:var(--accordion-header-text-color);
   font-family:var(--bp-font-font-family);
-  font-size:var(--bp-font-size-08);
+  font-size:var(--bp-font-size-06);
   font-style:normal;
   font-weight:var(--bp-font-weight-bold);
   letter-spacing:var(--bp-font-letter-spacing-01);
-  line-height:var(--bp-font-line-height-05);
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_accordion_module_accordionHeaderTrigger--48d95{
+.bp_accordion_module_accordionHeaderTrigger--4ccff{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionStatus--48d95{
+.bp_accordion_module_accordionStatus--4ccff{
   margin-inline-start:var(--accordion-status-margin);
 }
 
-.bp_accordion_module_accordionIconWrapper--48d95{
+.bp_accordion_module_accordionIconWrapper--4ccff{
   align-items:center;
   border-radius:var(--accordion-icon-radius);
   display:flex;
@@ -1328,16 +1346,16 @@
   margin-inline-start:var(--accordion-icon-margin);
   width:var(--accordion-icon-size);
 }
-.bp_accordion_module_accordionIconWrapper--48d95.bp_accordion_module_bgOnly--48d95{
+.bp_accordion_module_accordionIconWrapper--4ccff.bp_accordion_module_bgOnly--4ccff{
   height:var(--accordion-bg-only-status-size);
   width:var(--accordion-bg-only-status-size);
 }
-.bp_accordion_module_accordionIconWrapper--48d95.bp_accordion_module_withIcon--48d95{
+.bp_accordion_module_accordionIconWrapper--4ccff.bp_accordion_module_withIcon--4ccff{
   height:var(--accordion-icon-size);
   width:var(--accordion-icon-size);
 }
 
-.bp_accordion_module_accordionTrigger--48d95{
+.bp_accordion_module_accordionTrigger--4ccff{
   align-items:center;
   background-color:var(--accordion-item-background-collapsed);
   border:var(--accordion-trigger-border);
@@ -1348,22 +1366,22 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--48d95:disabled{
+.bp_accordion_module_accordionTrigger--4ccff:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--48d95:focus-visible{
+.bp_accordion_module_accordionTrigger--4ccff:focus-visible{
   background-color:var(--accordion-trigger-collapsed-background-focus);
   border:var(--accordion-trigger-border-hover);
   box-shadow:var(--accordion-trigger-box-shadow);
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--48d95:hover:not(:disabled){
+.bp_accordion_module_accordionTrigger--4ccff:hover:not(:disabled){
   background-color:var(--accordion-trigger-collapsed-background-hover);
   border:var(--accordion-trigger-border-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--48d95[data-state=open]{
+.bp_accordion_module_accordionTrigger--4ccff[data-state=open]{
   background-color:var(--accordion-item-background-expanded);
   border:var(--accordion-trigger-expanded-border);
   border-bottom-left-radius:0;
@@ -1371,20 +1389,20 @@
   border-top-left-radius:var(--accordion-item-radius-expanded);
   border-top-right-radius:var(--accordion-item-radius-expanded);
 }
-.bp_accordion_module_accordionTrigger--48d95[data-state=open]:focus-visible{
+.bp_accordion_module_accordionTrigger--4ccff[data-state=open]:focus-visible{
   background-color:var(--accordion-trigger-expanded-background-focus);
   border:var(--accordion-trigger-expanded-border);
 }
-.bp_accordion_module_accordionTrigger--48d95[data-state=open]:hover:not(:disabled){
+.bp_accordion_module_accordionTrigger--4ccff[data-state=open]:hover:not(:disabled){
   background-color:var(--accordion-trigger-expanded-background-hover);
   border:var(--accordion-trigger-expanded-border);
 }
-.bp_accordion_module_accordionTrigger--48d95 .bp_accordion_module_accordionTriggerIcon--48d95{
+.bp_accordion_module_accordionTrigger--4ccff .bp_accordion_module_accordionTriggerIcon--4ccff{
   flex-shrink:0;
   margin-inline-start:var(--accordion-chevron-margin-inline-start);
   transform:var(--accordion-trigger-icon-transform-collapsed);
 }
-.bp_accordion_module_accordionTrigger--48d95[data-state=open] .bp_accordion_module_accordionTriggerIcon--48d95{
+.bp_accordion_module_accordionTrigger--4ccff[data-state=open] .bp_accordion_module_accordionTriggerIcon--4ccff{
   transform:var(--accordion-trigger-icon-transform-expanded);
 }
 .bp_avatar_module_avatar--9f017[data-modern=false]{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.90.1",
+    "version": "12.92.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.75.0",
+        "@box/blueprint-web-assets": "^4.76.0",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.14.11",
+        "@box/storybook-utils": "^0.14.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",