@box/blueprint-web 14.21.1 → 14.23.0

package/dist/lib-esm/index.css

@@ -10536,7 +10536,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   fill:currentcolor;
 }
 
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverMainContent--a0d71,.bp_popover_module_popoverContentContainer--a0d71.bp_popover_module_accessibilitySmallBreakpoint--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverScrollContainer--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverMainContent--5379f,.bp_popover_module_popoverContentContainer--5379f.bp_popover_module_accessibilitySmallBreakpoint--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverScrollContainer--5379f{
   margin-inline-end:var(--scroll-mask-margin-inline-end);
   mask-image:var(--scroll-mask-mask-image);
   mask-position:var(--scroll-mask-mask-position);
@@ -10546,7 +10546,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transition:var(--scroll-mask-transition);
 }
 
-.bp_popover_module_popoverContentContainer--a0d71[data-modern=false]{
+.bp_popover_module_popoverContentContainer--5379f[data-modern=false]{
   --scroll-mask-padding-right:var(--space-4);
   --scroll-mask-overflow:auto;
   --scroll-mask-transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
@@ -10559,12 +10559,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --popover-content-text-color:var(--text-text-on-light);
   --popover-main-content-inner-container-padding:var(--space-3);
   --popover-scroll-container-small-breakpoint-max-height:min(
-          var(
-              --blueprint-web-popover-content-max-height,
-              calc(var(--radix-popover-content-available-height) - var(--space-12))
-          ),
+      var(
+          --blueprint-web-popover-content-max-height,
           calc(var(--radix-popover-content-available-height) - var(--space-12))
-      );
+      ),
+      calc(var(--radix-popover-content-available-height) - var(--space-12))
+  );
   --popover-scroll-container-small-breakpoint-padding-block:var(--space-1);
   --popover-footer-padding-block-start:var(--space-4);
   --popover-footer-margin-inline:calc(var(--space-4)*-1);
@@ -10572,7 +10572,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --popover-footer-border-top:var(--border-1) solid var(--border-card-border);
 }
 
-.bp_popover_module_popoverContentContainer--a0d71[data-modern=true]{
+.bp_popover_module_popoverContentContainer--5379f[data-modern=true]{
   --bp-dropshadow-3:var(--dropshadow-3);
   --bp-animation-duration-3:var(--animation-duration-3);
   --scroll-mask-padding-right:var(--bp-space-040);
@@ -10587,12 +10587,12 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --popover-content-text-color:var(--bp-text-text-on-light);
   --popover-main-content-inner-container-padding:var(--bp-space-030);
   --popover-scroll-container-small-breakpoint-max-height:min(
-          var(
-              --blueprint-web-popover-content-max-height,
-              calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
-          ),
+      var(
+          --blueprint-web-popover-content-max-height,
           calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
-      );
+      ),
+      calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
+  );
   --popover-scroll-container-small-breakpoint-padding-block:var(--bp-space-010);
   --popover-footer-padding-block-start:var(--bp-space-040);
   --popover-footer-margin-inline:calc(var(--bp-space-040)*-1);
@@ -10600,48 +10600,258 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --popover-footer-border-top:var(--bp-border-01) solid var(--bp-border-card-border);
 }
 
-.bp_popover_module_popoverContentContainer--a0d71{
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=open]{
+  animation-duration:var(--bp-duration-medium);
+  animation-timing-function:var(--bp-curve-medium-on);
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=open][data-side=top]{
+  animation-name:bp_popover_module_bpPopoverMediumTopSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=open][data-side=bottom]{
+  animation-name:bp_popover_module_bpPopoverMediumBottomSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=open][data-side=left]{
+  animation-name:bp_popover_module_bpPopoverMediumLeftSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=open][data-side=right]{
+  animation-name:bp_popover_module_bpPopoverMediumRightSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=closed]{
+  animation-duration:var(--bp-duration-short);
+  animation-timing-function:var(--bp-curve-medium-off);
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=closed][data-side=top]{
+  animation-name:bp_popover_module_bpPopoverMediumTopSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=closed][data-side=bottom]{
+  animation-name:bp_popover_module_bpPopoverMediumBottomSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=closed][data-side=left]{
+  animation-name:bp_popover_module_bpPopoverMediumLeftSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true]:not([data-large=true])[data-state=closed][data-side=right]{
+  animation-name:bp_popover_module_bpPopoverMediumRightSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=open]{
+  animation-duration:var(--bp-duration-long);
+  animation-timing-function:var(--bp-curve-large-on);
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=open][data-side=top]{
+  animation-name:bp_popover_module_bpPopoverLargeTopSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=open][data-side=bottom]{
+  animation-name:bp_popover_module_bpPopoverLargeBottomSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=open][data-side=left]{
+  animation-name:bp_popover_module_bpPopoverLargeLeftSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=open][data-side=right]{
+  animation-name:bp_popover_module_bpPopoverLargeRightSlideEnter--5379f, bp_popover_module_bpPopoverFadeIn--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=closed]{
+  animation-duration:var(--bp-duration-medium);
+  animation-timing-function:var(--bp-curve-large-off);
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=closed][data-side=top]{
+  animation-name:bp_popover_module_bpPopoverLargeTopSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=closed][data-side=bottom]{
+  animation-name:bp_popover_module_bpPopoverLargeBottomSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=closed][data-side=left]{
+  animation-name:bp_popover_module_bpPopoverLargeLeftSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+.bp_popover_module_popoverContentContainer--5379f[data-bp-animated=true][data-large=true][data-state=closed][data-side=right]{
+  animation-name:bp_popover_module_bpPopoverLargeRightSlideExit--5379f, bp_popover_module_bpPopoverFadeOut--5379f;
+}
+
+.bp_popover_module_popoverContentContainer--5379f{
   max-width:320px;
   z-index:var(--z-index-popover);
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f{
   box-shadow:var(--popover-card-box-shadow);
   margin-block:var(--popover-card-margin-block);
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverMainContent--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverMainContent--5379f{
   color:var(--popover-content-text-color);
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverMainContent--a0d71:hover{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverMainContent--5379f:hover{
   mask-position:left top;
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverMainContent--a0d71 .bp_popover_module_popoverMainContentOuterContainer--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverMainContent--5379f .bp_popover_module_popoverMainContentOuterContainer--5379f{
   max-height:inherit;
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverMainContent--a0d71 .bp_popover_module_popoverMainContentOuterContainer--a0d71 .bp_popover_module_popoverMainContentInnerContainerPadding--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverMainContent--5379f .bp_popover_module_popoverMainContentOuterContainer--5379f .bp_popover_module_popoverMainContentInnerContainerPadding--5379f{
   padding-block-end:var(--popover-main-content-inner-container-padding);
 }
-.bp_popover_module_popoverContentContainer--a0d71.bp_popover_module_accessibilitySmallBreakpoint--a0d71{
+.bp_popover_module_popoverContentContainer--5379f.bp_popover_module_accessibilitySmallBreakpoint--5379f{
   max-height:var(--radix-popover-content-available-height);
 }
-.bp_popover_module_popoverContentContainer--a0d71.bp_popover_module_accessibilitySmallBreakpoint--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverScrollContainer--a0d71{
+.bp_popover_module_popoverContentContainer--5379f.bp_popover_module_accessibilitySmallBreakpoint--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverScrollContainer--5379f{
   color:var(--popover-content-text-color);
   max-height:var(--popover-scroll-container-small-breakpoint-max-height);
   padding-block:var(--popover-scroll-container-small-breakpoint-padding-block);
 }
-.bp_popover_module_popoverContentContainer--a0d71.bp_popover_module_accessibilitySmallBreakpoint--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverScrollContainer--a0d71:hover{
+.bp_popover_module_popoverContentContainer--5379f.bp_popover_module_accessibilitySmallBreakpoint--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverScrollContainer--5379f:hover{
   mask-position:left top;
 }
-.bp_popover_module_popoverContentContainer--a0d71.bp_popover_module_accessibilitySmallBreakpoint--a0d71 .bp_popover_module_popoverCard--a0d71 .bp_popover_module_popoverScrollContainer--a0d71 .bp_popover_module_popoverMainContent--a0d71{
+.bp_popover_module_popoverContentContainer--5379f.bp_popover_module_accessibilitySmallBreakpoint--5379f .bp_popover_module_popoverCard--5379f .bp_popover_module_popoverScrollContainer--5379f .bp_popover_module_popoverMainContent--5379f{
   max-height:fit-content;
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverFooter--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverFooter--5379f{
   margin-inline:var(--popover-footer-margin-inline);
   padding-block-start:var(--popover-footer-padding-block-start);
   padding-inline:var(--popover-footer-padding-inline);
 }
-.bp_popover_module_popoverContentContainer--a0d71 .bp_popover_module_popoverFooter--a0d71.bp_popover_module_popoverFooterTopBorder--a0d71{
+.bp_popover_module_popoverContentContainer--5379f .bp_popover_module_popoverFooter--5379f.bp_popover_module_popoverFooterTopBorder--5379f{
   border-top:var(--popover-footer-border-top);
 }
+
+@keyframes bp_popover_module_bpPopoverFadeIn--5379f{
+  from{
+    opacity:var(--bp-opacity-hidden);
+  }
+  to{
+    opacity:var(--bp-opacity-visible);
+  }
+}
+@keyframes bp_popover_module_bpPopoverFadeOut--5379f{
+  from{
+    opacity:var(--bp-opacity-visible);
+  }
+  to{
+    opacity:var(--bp-opacity-hidden);
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumTopSlideEnter--5379f{
+  from{
+    transform:translateY(var(--bp-space-020));
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumTopSlideExit--5379f{
+  from{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(var(--bp-space-020));
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumBottomSlideEnter--5379f{
+  from{
+    transform:translateY(calc(var(--bp-space-020)*-1));
+  }
+  to{
+    transform:translateY(0);
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumBottomSlideExit--5379f{
+  from{
+    transform:translateY(0);
+  }
+  to{
+    transform:translateY(calc(var(--bp-space-020)*-1));
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumLeftSlideEnter--5379f{
+  from{
+    transform:translateX(calc(var(--bp-space-020)*-1));
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumLeftSlideExit--5379f{
+  from{
+    transform:translateX(0);
+  }
+  to{
+    transform:translateX(calc(var(--bp-space-020)*-1));
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumRightSlideEnter--5379f{
+  from{
+    transform:translateX(var(--bp-space-020));
+  }
+  to{
+    transform:translateX(0);
+  }
+}
+@keyframes bp_popover_module_bpPopoverMediumRightSlideExit--5379f{
+  from{
+    transform:translateX(0);
+  }
+  to{
+    transform:translateX(var(--bp-space-020));
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeTopSlideEnter--5379f{
+  from{
+    transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
+  }
+  to{
+    transform:translateY(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeTopSlideExit--5379f{
+  from{
+    transform:translateY(0) var(--bp-scale-default);
+  }
+  to{
+    transform:translateY(var(--bp-space-040)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeBottomSlideEnter--5379f{
+  from{
+    transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+  to{
+    transform:translateY(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeBottomSlideExit--5379f{
+  from{
+    transform:translateY(0) var(--bp-scale-default);
+  }
+  to{
+    transform:translateY(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeLeftSlideEnter--5379f{
+  from{
+    transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+  to{
+    transform:translateX(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeLeftSlideExit--5379f{
+  from{
+    transform:translateX(0) var(--bp-scale-default);
+  }
+  to{
+    transform:translateX(calc(var(--bp-space-040)*-1)) var(--bp-scale-small);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeRightSlideEnter--5379f{
+  from{
+    transform:translateX(var(--bp-space-040)) var(--bp-scale-small);
+  }
+  to{
+    transform:translateX(0) var(--bp-scale-default);
+  }
+}
+@keyframes bp_popover_module_bpPopoverLargeRightSlideExit--5379f{
+  from{
+    transform:translateX(0) var(--bp-scale-default);
+  }
+  to{
+    transform:translateX(var(--bp-space-040)) var(--bp-scale-small);
+  }
+}
 .bp_select_menu_grid_module_grid--6e766{
   display:flex;
   flex-direction:column;
@@ -12106,7 +12316,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_trigger_button_module_triggerButton--b9e51.bp_trigger_button_module_large--b9e51.bp_trigger_button_module_startIcon--b9e51{
   padding-left:.625rem;
 }
-.bp_styles_module_splitButton--b9938[data-modern=false]{
+.bp_styles_module_splitButton--a3588[data-modern=false]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -12124,7 +12334,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-element-secondary-backdrop-filter:none;
 }
 
-.bp_styles_module_splitButton--b9938[data-modern=true]{
+.bp_styles_module_splitButton--a3588[data-modern=true]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--bp-space-005)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -12140,67 +12350,75 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-element-secondary-backdrop-filter:blur(16px);
 }
 
-.bp_styles_module_dropdown--b9938[data-modern=false],.bp_styles_module_dropdown--b9938[data-modern=true]{
+.bp_styles_module_dropdown--a3588[data-modern=false],.bp_styles_module_dropdown--a3588[data-modern=true]{
   --split-button-dropdown-min-width:160px;
 }
 
-.bp_styles_module_splitButton--b9938{
+.bp_styles_module_splitButton--a3588{
   display:inline-flex;
   position:relative;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588{
   border-bottom-right-radius:0;
   border-top-right-radius:0;
   padding:var(--split-button-left-element-padding);
   width:var(--split-button-left-width);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_gap--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_gap--a3588{
   margin-inline-end:var(--split-button-left-gap-margin-inline-end);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_skipRightBorder--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_skipRightBorder--a3588{
   border-inline-end-color:var(--split-button-left-skip-right-border-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_skipRightBorder--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_skipRightBorder--a3588:focus-visible{
   border-inline-end-color:var(--split-button-left-skip-right-border-focus-visible-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_loadingButton--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_loadingButton--a3588{
   width:100%;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588{
   border-end-start-radius:0;
   border-start-start-radius:0;
   padding:var(--split-button-right-element-padding) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938 svg{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588 svg{
   height:var(--split-button-right-svg-height);
   width:var(--split-button-right-svg-width);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588{
   backdrop-filter:var(--split-button-right-element-secondary-backdrop-filter);
   background:var(--split-button-right-element-secondary-background);
   border-color:var(--split-button-right-element-border-color);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:focus-visible,.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:hover{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:focus-visible,.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:hover{
   background:var(--split-button-right-element-secondary-focus-or-hover-background);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:active{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:active{
   background:var(--split-button-right-element-secondary-active-background);
 }
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588[data-bp-animated=true] svg{
+  transition-duration:var(--bp-duration-short);
+  transition-property:transform;
+  transition-timing-function:var(--bp-curve-small-on);
+}
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588[data-bp-animated=true]:not(:disabled):hover svg{
+  transform:translateY(2px);
+}
 
-.bp_styles_module_invisible--b9938{
+.bp_styles_module_invisible--a3588{
   left:0;
   position:absolute;
   top:0;
   visibility:hidden;
 }
 
-.bp_styles_module_dropdown--b9938{
+.bp_styles_module_dropdown--a3588{
   min-width:var(--split-button-dropdown-min-width);
 }
 .bp_switch_module_option--e6150[data-modern=false]{

package/dist/lib-esm/primitives/popover/popover-content-container.js

@@ -3,15 +3,20 @@ import { Space4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useContext, useState, useMemo, useCallback } from 'react';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Card } from '../../card/card.js';
 import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
+import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
+import { useForkRef } from '../../utils/useForkRef.js';
 import { focusRadioGroupFirstIfExists } from './popover-focus-utils.js';
 import styles from './popover.module.js';
 import { PopoverModalityContext } from './utils/popover-modality-context.js';
 import { PopoverOverflowContext } from './utils/popover-overflow-context.js';
 
 const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
+// defined by the figma design specs
+const LARGE_CONTENT_ANIMATION_THRESHOLD = 360;
 /**
  * Based on Radix-UI Popover Content
  * @see https://www.radix-ui.com/primitives/docs/components/popover#content
@@ -33,6 +38,11 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('Popover');
+  const sizeObserverRef = useContentSizeObserver(LARGE_CONTENT_ANIMATION_THRESHOLD, LARGE_CONTENT_ANIMATION_THRESHOLD);
   const accessibilitySmallBreakpoint = smallBreakpoint && isInteractionDisabled;
   const [isContentOverflowing, setIsContentOverflowing] = useState(false);
   const providerValue = useMemo(() => ({
@@ -51,17 +61,18 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     // TODO(DSYS-440): Unify all Portals (Tooltip, Select, Popover, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(RadixPopover.Portal, {
       container: container,
-      children: jsx(PopoverOverflowContext.Provider, {
-        value: providerValue,
-        children: jsx(RadixPopover.Content, {
-          ...rest,
-          ref: forwardedRef,
-          className: clsx(styles.popoverContentContainer, {
-            [styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
-          }, className),
-          collisionPadding: collisionPadding,
-          "data-modern": enableModernizedComponents ? 'true' : 'false',
-          onOpenAutoFocus: handleOpenAutoFocus,
+      children: jsx(RadixPopover.Content, {
+        ...rest,
+        ref: useForkRef(forwardedRef, sizeObserverRef),
+        className: clsx(styles.popoverContentContainer, {
+          [styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
+        }, className),
+        collisionPadding: collisionPadding,
+        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+        onOpenAutoFocus: handleOpenAutoFocus,
+        children: jsx(PopoverOverflowContext.Provider, {
+          value: providerValue,
           children: jsx(Card, {
             className: styles.popoverCard,
             children: jsx("div", {

package/dist/lib-esm/primitives/popover/popover.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--a0d71","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--a0d71","popoverCard":"bp_popover_module_popoverCard--a0d71","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--a0d71","popoverMainContent":"bp_popover_module_popoverMainContent--a0d71","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--a0d71","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--a0d71","popoverFooter":"bp_popover_module_popoverFooter--a0d71","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--a0d71"};
+var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--5379f","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--5379f","popoverCard":"bp_popover_module_popoverCard--5379f","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--5379f","popoverMainContent":"bp_popover_module_popoverMainContent--5379f","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--5379f","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--5379f","popoverFooter":"bp_popover_module_popoverFooter--5379f","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--5379f"};
 
 export { styles as default };

package/dist/lib-esm/split-button/SplitTriggerButton.d.ts

@@ -1,6 +1,5 @@
 interface SplitTriggerButtonProps {
     ariaLabel: string;
-    isOpened: boolean;
     disabled: boolean;
     size: 'small' | 'large';
     variant: 'primary' | 'secondary';

package/dist/lib-esm/split-button/SplitTriggerButton.js

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { TriggerButton } from '../trigger-button/trigger-button.js';
 import styles from './styles.module.js';
 
@@ -8,16 +10,16 @@ const SplitTriggerButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     isInvisible,
     ariaLabel: dropdownTriggerAriaLabel,
-    isOpened,
     disabled,
     size,
     variant,
     ...rest
   } = props;
+  const isAnimationEnabled = useBlueprintConfiguration().componentsWithAnimationEnabled.includes('SplitButton');
   return jsx(TriggerButton, {
     ref: ref,
     "aria-label": dropdownTriggerAriaLabel,
-    caretDirection: isOpened ? 'up' : 'down',
+    caretDirection: "down",
     className: clsx(styles.splitButtonRight, styles[`${variant}`], {
       [styles.invisible]: isInvisible,
       [styles.gap]: variant === 'primary'
@@ -25,6 +27,7 @@ const SplitTriggerButton = /*#__PURE__*/forwardRef((props, ref) => {
     disabled: disabled,
     size: size,
     variant: variant,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     ...rest
   });
 });

package/dist/lib-esm/split-button/split-button.js

@@ -109,7 +109,6 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           "data-resin-target": splitTriggerResinTarget,
           disabled: !!disabled,
           isInvisible: loading,
-          isOpened: open,
           size: size,
           variant: variant
         })

package/dist/lib-esm/split-button/styles.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"splitButton":"bp_styles_module_splitButton--b9938","dropdown":"bp_styles_module_dropdown--b9938","splitButtonLeft":"bp_styles_module_splitButtonLeft--b9938","gap":"bp_styles_module_gap--b9938","skipRightBorder":"bp_styles_module_skipRightBorder--b9938","loadingButton":"bp_styles_module_loadingButton--b9938","splitButtonRight":"bp_styles_module_splitButtonRight--b9938","secondary":"bp_styles_module_secondary--b9938","invisible":"bp_styles_module_invisible--b9938"};
+var styles = {"splitButton":"bp_styles_module_splitButton--a3588","dropdown":"bp_styles_module_dropdown--a3588","splitButtonLeft":"bp_styles_module_splitButtonLeft--a3588","gap":"bp_styles_module_gap--a3588","skipRightBorder":"bp_styles_module_skipRightBorder--a3588","loadingButton":"bp_styles_module_loadingButton--a3588","splitButtonRight":"bp_styles_module_splitButtonRight--a3588","secondary":"bp_styles_module_secondary--a3588","invisible":"bp_styles_module_invisible--a3588"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.21.1",
+    "version": "14.23.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.115.8",
+        "@box/blueprint-web-assets": "^4.115.10",
         "@internationalized/date": "^3.12.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.18.8",
+        "@box/storybook-utils": "^0.18.10",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",