@box/blueprint-web 6.20.0 → 6.22.0

package/lib-esm/guided-tooltip/types.d.ts

@@ -1,5 +1,5 @@
 import type * as RadixPopover from '@radix-ui/react-popover';
-import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type JSX, type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {
     /** The preferred alignment against the anchor. May change when collisions occur.
      * "start" | "center" | "end"
@@ -58,7 +58,7 @@ export interface GuidedTooltipIconProps {
     /**
      * SVG Icon element to pass to GuidedTooltip Icon
      * */
-    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>> | ((props: SVGProps<SVGSVGElement>) => JSX.Element);
 }
 export interface GuidedTooltipTitleProps {
     /** Title content. */

package/lib-esm/index.css

@@ -236,7 +236,7 @@
   transform:rotate(180deg);
 }
 
-.bp_loading_indicator_module_crawler--f1f3a{
+.bp_loading_indicator_module_crawler--9cdc7{
   left:0;
   margin:0 auto;
   position:absolute;
@@ -244,35 +244,44 @@
   white-space:nowrap;
   width:.625rem;
 }
-.bp_loading_indicator_module_crawler--f1f3a .bp_loading_indicator_module_segment--f1f3a{
+.bp_loading_indicator_module_crawler--9cdc7 .bp_loading_indicator_module_segment--9cdc7{
   border-radius:.375rem;
   display:inline-block;
   height:.625rem;
   width:.125rem;
 }
-.bp_loading_indicator_module_crawler--f1f3a.bp_loading_indicator_module_default--f1f3a .bp_loading_indicator_module_segment--f1f3a{
-  animation:bp_loading_indicator_module_segment-transform--f1f3a .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--f1f3a .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_small--9cdc7{
+  transform:scale(.7);
 }
-.bp_loading_indicator_module_crawler--f1f3a.bp_loading_indicator_module_dark--f1f3a .bp_loading_indicator_module_segment--f1f3a{
-  animation:bp_loading_indicator_module_segment-transform--f1f3a .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--f1f3a .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_large--9cdc7{
+  transform:scale(1.5);
 }
-.bp_loading_indicator_module_crawler--f1f3a.bp_loading_indicator_module_light--f1f3a .bp_loading_indicator_module_segment--f1f3a{
-  animation:bp_loading_indicator_module_segment-transform--f1f3a .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--f1f3a .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_x-large--9cdc7{
+  transform:scale(2);
+}
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_default--9cdc7 .bp_loading_indicator_module_segment--9cdc7{
+  animation:bp_loading_indicator_module_segment-transform--9cdc7 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--9cdc7 .66s ease-in-out infinite;
+}
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_dark--9cdc7 .bp_loading_indicator_module_segment--9cdc7{
+  animation:bp_loading_indicator_module_segment-transform--9cdc7 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--9cdc7 .66s ease-in-out infinite;
+}
+.bp_loading_indicator_module_crawler--9cdc7.bp_loading_indicator_module_light--9cdc7 .bp_loading_indicator_module_segment--9cdc7{
+  animation:bp_loading_indicator_module_segment-transform--9cdc7 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--9cdc7 .66s ease-in-out infinite;
   background-color:var(--gray-white);
 }
 
-.bp_loading_indicator_module_crawler--f1f3a .bp_loading_indicator_module_segment--f1f3a:nth-child(2){
+.bp_loading_indicator_module_crawler--9cdc7 .bp_loading_indicator_module_segment--9cdc7:nth-child(2){
   animation-delay:.1s;
   margin-left:.125rem;
 }
 
-.bp_loading_indicator_module_crawler--f1f3a .bp_loading_indicator_module_segment--f1f3a:last-child{
+.bp_loading_indicator_module_crawler--9cdc7 .bp_loading_indicator_module_segment--9cdc7:last-child{
   animation-delay:.2s;
   left:.5rem;
   margin-left:.125rem;
 }
 
-@keyframes bp_loading_indicator_module_segment-transform--f1f3a{
+@keyframes bp_loading_indicator_module_segment-transform--9cdc7{
   0%,100%,80%{
     transform:scaleY(1.2);
   }
@@ -280,7 +289,7 @@
     transform:scaleY(1.6);
   }
 }
-@keyframes bp_loading_indicator_module_segment-dark--f1f3a{
+@keyframes bp_loading_indicator_module_segment-dark--9cdc7{
   0%,100%,80%{
     background-color:var(--gray-30);
   }
@@ -288,7 +297,7 @@
     background-color:var(--gray-black);
   }
 }
-@keyframes bp_loading_indicator_module_segment-default--f1f3a{
+@keyframes bp_loading_indicator_module_segment-default--9cdc7{
   0%,100%,80%{
     background-color:var(--box-blue-30);
   }
@@ -296,7 +305,7 @@
     background-color:var(--box-blue-100);
   }
 }
-@keyframes bp_loading_indicator_module_segment-light--f1f3a{
+@keyframes bp_loading_indicator_module_segment-light--9cdc7{
   0%,100%,80%{
     opacity:.3;
   }

package/lib-esm/loading-indicator/loading-indicator.d.ts

@@ -9,6 +9,8 @@ export interface LoadingIndicatorProps extends HTMLAttributes<HTMLDivElement> {
      * Default value is 'polite'.
      */
     'aria-live'?: 'assertive' | 'polite';
+    /** The size of the indicator. Defaults to medium */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
     /** The color scheme of the indicator */
     variant?: 'default' | 'dark' | 'light';
 }

package/lib-esm/loading-indicator/loading-indicator.js

@@ -7,6 +7,7 @@ function LoadingIndicator(props) {
     'aria-label': ariaLabel,
     'aria-live': ariaLive = 'polite',
     variant = 'default',
+    size = 'medium',
     className = '',
     ...rest
   } = props;
@@ -14,7 +15,7 @@ function LoadingIndicator(props) {
     ...rest,
     "aria-label": ariaLabel,
     "aria-live": ariaLive,
-    className: clsx(styles.crawler, styles[variant], className),
+    className: clsx(styles.crawler, styles[variant], styles[size], className),
     role: "status",
     children: [jsx("div", {
       className: styles.segment

package/lib-esm/loading-indicator/loading-indicator.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"crawler":"bp_loading_indicator_module_crawler--f1f3a","segment":"bp_loading_indicator_module_segment--f1f3a","default":"bp_loading_indicator_module_default--f1f3a","segment-transform":"bp_loading_indicator_module_segment-transform--f1f3a","segment-default":"bp_loading_indicator_module_segment-default--f1f3a","dark":"bp_loading_indicator_module_dark--f1f3a","segment-dark":"bp_loading_indicator_module_segment-dark--f1f3a","light":"bp_loading_indicator_module_light--f1f3a","segment-light":"bp_loading_indicator_module_segment-light--f1f3a"};
+var styles = {"crawler":"bp_loading_indicator_module_crawler--9cdc7","segment":"bp_loading_indicator_module_segment--9cdc7","small":"bp_loading_indicator_module_small--9cdc7","large":"bp_loading_indicator_module_large--9cdc7","x-large":"bp_loading_indicator_module_x-large--9cdc7","default":"bp_loading_indicator_module_default--9cdc7","segment-transform":"bp_loading_indicator_module_segment-transform--9cdc7","segment-default":"bp_loading_indicator_module_segment-default--9cdc7","dark":"bp_loading_indicator_module_dark--9cdc7","segment-dark":"bp_loading_indicator_module_segment-dark--9cdc7","light":"bp_loading_indicator_module_light--9cdc7","segment-light":"bp_loading_indicator_module_segment-light--9cdc7"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.20.0",
+    "version": "6.22.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "6ebf1b36ed309d69fec3709c4e578c23989f2479",
+    "gitHead": "68bf69aae4808a58a628166dd1150a9684367916",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {