@box/blueprint-web 12.36.0 → 12.38.0

package/dist/lib-esm/avatar/avatar.d.ts

@@ -1,25 +1,30 @@
-export declare const Avatar: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+import React from 'react';
+export declare const Avatar: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref">) & import("react").RefAttributes<HTMLImageElement>>;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref">) & React.RefAttributes<HTMLImageElement>>;

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

@@ -2,9 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
 import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, useEffect } from 'react';
 import styles from './avatar.module.js';
-import { colors, anonymousAvatarIconSizes } from './consts.js';
+import { colors, iconSizes } from './consts.js';
 
 const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -13,6 +13,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     color,
     colorIndex,
+    icon,
     loading = 'lazy',
     onLoad,
     src,
@@ -27,13 +28,24 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     setImageHasError(false);
   }, [src]);
   const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
-  const anonymousAvatarIconSize = anonymousAvatarIconSizes[size];
-  const imageIsLoading = !!src && !imageIsLoaded;
-  const shouldShowText = !anonymous && text && !imageIsLoaded;
-  const shouldShowAnonymousAvatar = anonymous || imageIsLoading && !text;
+  const iconSize = iconSizes[size];
+  const imageIsLoading = !!src && !icon && !imageIsLoaded;
+  const shouldShowIcon = !anonymous && icon && (!src || !imageIsLoaded);
+  const shouldShowText = !anonymous && !icon && text && !imageIsLoaded;
+  const shouldShowAnonymousAvatar = anonymous || imageIsLoading && !text && !icon;
   const shouldShowImage = !anonymous && src && !imageHasError;
   const avatarContents = jsxs(Fragment, {
-    children: [shouldShowText && jsx("div", {
+    children: [shouldShowIcon && jsx("div", {
+      className: styles.iconContainer,
+      style: {
+        backgroundColor
+      },
+      children: /*#__PURE__*/React__default.cloneElement(icon, {
+        width: iconSize,
+        height: iconSize,
+        role: 'presentation'
+      })
+    }), shouldShowText && jsx("div", {
       className: clsx(styles.text, styles[`length-${text.length}`]),
       style: {
         backgroundColor
@@ -43,9 +55,9 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: styles.anonymousAvatar,
       children: jsx(Avatar$1, {
         color: GrayBlack,
-        height: anonymousAvatarIconSize,
+        height: iconSize,
         role: "presentation",
-        width: anonymousAvatarIconSize
+        width: iconSize
       })
     }), shouldShowImage && jsx("img", {
       ...rest,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--94734","text":"bp_avatar_module_text--94734","small":"bp_avatar_module_small--94734","length-1":"bp_avatar_module_length-1--94734","length-2":"bp_avatar_module_length-2--94734","medium":"bp_avatar_module_medium--94734","large":"bp_avatar_module_large--94734","length-3":"bp_avatar_module_length-3--94734","length-4":"bp_avatar_module_length-4--94734","xlarge":"bp_avatar_module_xlarge--94734","xxlarge":"bp_avatar_module_xxlarge--94734","badge":"bp_avatar_module_badge--94734","image":"bp_avatar_module_image--94734","loading":"bp_avatar_module_loading--94734","anonymousAvatar":"bp_avatar_module_anonymousAvatar--94734"};
+var styles = {"avatar":"bp_avatar_module_avatar--af6ca","text":"bp_avatar_module_text--af6ca","small":"bp_avatar_module_small--af6ca","length-1":"bp_avatar_module_length-1--af6ca","length-2":"bp_avatar_module_length-2--af6ca","medium":"bp_avatar_module_medium--af6ca","large":"bp_avatar_module_large--af6ca","length-3":"bp_avatar_module_length-3--af6ca","length-4":"bp_avatar_module_length-4--af6ca","xlarge":"bp_avatar_module_xlarge--af6ca","xxlarge":"bp_avatar_module_xxlarge--af6ca","badge":"bp_avatar_module_badge--af6ca","image":"bp_avatar_module_image--af6ca","loading":"bp_avatar_module_loading--af6ca","anonymousAvatar":"bp_avatar_module_anonymousAvatar--af6ca","iconContainer":"bp_avatar_module_iconContainer--af6ca"};
 
 export { styles as default };

package/dist/lib-esm/avatar/consts.d.ts

@@ -1,5 +1,5 @@
 import { type AvatarSize, type Color } from './types';
-export declare const anonymousAvatarIconSizes: Record<AvatarSize, string>;
+export declare const iconSizes: Record<AvatarSize, string>;
 export declare const AvatarSizes: readonly ["small", "medium", "large", "xlarge", "xxlarge"];
 export declare const colorsMap: Record<string, Color>;
 export declare const colors: string[];

package/dist/lib-esm/avatar/consts.js

@@ -1,6 +1,6 @@
 import { Size3, Size4, Size5, Size7, Size9, BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50 } from '@box/blueprint-web-assets/tokens/tokens';
 
-const anonymousAvatarIconSizes = {
+const iconSizes = {
   small: Size3,
   medium: Size4,
   large: Size5,
@@ -21,4 +21,4 @@ const colorsMap = {
 };
 const colors = Object.values(colorsMap);
 
-export { anonymousAvatarIconSizes, colors, colorsMap };
+export { colors, colorsMap, iconSizes };

package/dist/lib-esm/avatar/types.d.ts

@@ -1,20 +1,22 @@
 import { type BoxBlue50, type DarkBlue50, type GreenLight50, type Grimace50, type LightBlue50, type Orange50, type PurpleRain50, type WatermelonRed50, type Yellorange50, type Yellow50 } from '@box/blueprint-web-assets/tokens/tokens';
+import { type ReactElement, type SVGProps } from 'react';
 import { type RequireAllOrNone, type RequireExactlyOne } from 'type-fest';
 import { type AvatarSizes } from './consts';
 export type AvatarSize = (typeof AvatarSizes)[number];
 export type Color = typeof BoxBlue50 | typeof DarkBlue50 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
 export interface Image {
-    /** The image to display. When the image is loading or if it fails to load, the fallback is displayed.
-     * The fallback is the text. If the text is not provided, the fallback is the anonymous user image.
+    /** The image to display. When the image is loading or if it fails to load, fallbacks are displayed in order:
+     * icon (if provided) → text (if provided) → anonymous user image.
+     * The icon serves as the primary fallback while the image is loading.
      */
     src?: string;
     /** The alt text for the image */
     alt?: string;
 }
 export interface WithColor {
-    /** The color of the avatar background when displaying the letter or the number */
+    /** The color of the avatar background when displaying the icon, letter or the number */
     color?: Color;
-    /** The index of the color  of the avatar background when displaying the letter or the number.
+    /** The index of the color  of the avatar background when displaying the icon, letter or the number.
      * A convenience replacement for the color prop to facilitate providing a hash of the user data.
      * It is ignored when the color prop is provided. */
     colorIndex?: number;
@@ -28,4 +30,8 @@ export type AvatarProps = React.ComponentPropsWithRef<'img'> & {
      *  Numbers can be formatted with formatNumber() that is exposed along with the Avatar component.
      */
     text?: string;
+    /** The icon element to display. Will not be displayed if the src prop is provided and the image is successfully loaded.
+     * Example: <Avatar icon={<AvatarTwo />} />
+     */
+    icon?: ReactElement<SVGProps<SVGSVGElement>>;
 } & RequireAllOrNone<Image, keyof Image> & RequireExactlyOne<WithColor, keyof WithColor>;

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

@@ -18,18 +18,15 @@ import styles from './combobox.module.js';
 
 const getOptionValue = option => typeof option === 'string' ? option : option.value;
 const getOptionFromValue = (value, options) => options.find(option => typeof option === 'string' ? option === value : option.value === value);
-const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => {
+// Generic helper to apply a callback to an option looked up by value, with a fallback when callback is absent.
+const applyOptionCallback = (optionValue, options, callback, fallback) => {
   const option = getOptionFromValue(optionValue, options);
-  return displayValue && option ? displayValue(option) : optionValue;
-};
-const getDisplayAvatarFromOptionValue = (optionValue, options, displayAvatar) => {
-  const option = getOptionFromValue(optionValue, options);
-  return displayAvatar && option ? displayAvatar(option) : undefined;
-};
-const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => {
-  const option = getOptionFromValue(optionValue, options);
-  return displayTooltip && option ? displayTooltip(option) : undefined;
+  return callback && option ? callback(option) : fallback;
 };
+const getDisplayValueFromOptionValue = (optionValue, options, displayValue) => applyOptionCallback(optionValue, options, displayValue, optionValue);
+const getDisplayAvatarFromOptionValue = (optionValue, options, displayAvatar) => applyOptionCallback(optionValue, options, displayAvatar, undefined);
+const getTooltipValueFromOptionValue = (optionValue, options, displayTooltip) => applyOptionCallback(optionValue, options, displayTooltip, undefined);
+const getDisplayChipVariantFromOptionValue = (optionValue, options, displayChipVariant) => applyOptionCallback(optionValue, options, displayChipVariant, 'default');
 const RootInner = ({
   as = 'input',
   ...props
@@ -60,6 +57,7 @@ const RootInner = ({
     displayValue,
     displayAvatar,
     displayTooltip,
+    displayChipVariant,
     hideOnEscape,
     renderOption,
     options,
@@ -333,12 +331,14 @@ const RootInner = ({
             avatar: getDisplayAvatarFromOptionValue(selected, options, displayAvatar),
             label: getDisplayValueFromOptionValue(selected, options, displayValue),
             onDelete: () => removeMultiSelectInputChip(selected),
-            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip)
+            tooltip: getTooltipValueFromOptionValue(selected, options, displayTooltip),
+            variant: getDisplayChipVariantFromOptionValue(selected, options, displayChipVariant)
           }, selected))
         }), showSingleSelectChip && jsx(InputChip, {
           label: getDisplayValueFromOptionValue(selectedValue, options, displayValue),
           onDelete: showComboboxCancelButton ? undefined : removeSingleSelectInputChip,
-          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip)
+          tooltip: getTooltipValueFromOptionValue(selectedValue, options, displayTooltip),
+          variant: getDisplayChipVariantFromOptionValue(selectedValue, options, displayChipVariant)
         }), jsxs("div", {
           className: styles.textInputWrapper,
           children: [jsx(Combobox$1, {

package/dist/lib-esm/combobox/types.d.ts

@@ -1,6 +1,7 @@
 import { type ComboboxPopoverProps } from '@ariakit/react';
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
 import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
+import { type InputChipProps } from '../input-chip/types';
 import { type TextAreaProps } from '../text-area/types';
 import { type Labelable } from '../util-components/labelable/types';
 export type OptionValue = {
@@ -88,6 +89,11 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Return a string representation of a tooltip displayed on hover of an Input Chip in Combobox.
      */
     displayTooltip?: (option: T) => string;
+    /**
+     * Return the variant of the InputChip to display for a given option.
+     * Falls back to 'default' when not provided.
+     */
+    displayChipVariant?: (option: T) => InputChipProps['variant'];
     /**
      * Return a JSX representations of an option displayed in Combobox dropdown
      * If not provided `displayValue()` is used to render select option item with a checkmark.

package/dist/lib-esm/index.css

@@ -907,7 +907,7 @@
   transform:rotate(180deg);
 }
 
-.bp_avatar_module_avatar--94734{
+.bp_avatar_module_avatar--af6ca{
   all:unset;
   align-items:center;
   background-color:var(--gray-10);
@@ -925,7 +925,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_text--af6ca{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -933,14 +933,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_text--af6ca{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -950,11 +950,11 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca{
   height:var(--size-7);
   width:var(--size-7);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -964,17 +964,17 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_text--af6ca{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -984,10 +984,10 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-3--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-3--af6ca.bp_avatar_module_text--af6ca{
   font-size:.6875rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-4--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-4--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -997,14 +997,14 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca{
   height:var(--size-11);
   width:var(--size-11);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_text--af6ca{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--title-x-large-font-family);
   font-size:var(--title-x-large-font-size);
   font-weight:var(--title-x-large-font-weight);
@@ -1014,46 +1014,52 @@
           text-decoration:var(--title-x-large-text-decoration);
   text-transform:var(--title-x-large-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca{
   height:var(--size-20);
   width:var(--size-20);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_text--af6ca{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_badge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_badge--af6ca{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_image--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_image--af6ca{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_image--94734.bp_avatar_module_loading--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_image--af6ca.bp_avatar_module_loading--af6ca{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--94734{
+.bp_avatar_module_anonymousAvatar--af6ca,.bp_avatar_module_iconContainer--af6ca{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-[data-button-wrapper]:hover .bp_avatar_module_avatar--94734{
+.bp_avatar_module_iconContainer--af6ca{
+  border-radius:50%;
+  height:100%;
+  width:100%;
+}
+
+[data-button-wrapper]:hover .bp_avatar_module_avatar--af6ca{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
   cursor:pointer;
 }
 
-[data-button-wrapper]:active .bp_avatar_module_avatar--94734{
+[data-button-wrapper]:active .bp_avatar_module_avatar--af6ca{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
 }
 
-[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--94734{
+[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--af6ca{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
 }
 .bp_tooltip_module_content--5b8ee[data-modern=false]{
@@ -1839,7 +1845,10 @@
 .bp_chips_group_module_chipsGroup--61ede > [role=row]{
   max-width:100%;
 }
-.bp_input_chip_module_container--9f437{
+.bp_input_chip_module_container--7e728{
+  --surface-inputchip-surface-variable:var(--purple-rain-20);
+  --text-inputchip-text-variable:var(--purple-rain-120);
+  --icon-inputchip-deleteicon-variable:var(--purple-rain-120);
   align-items:center;
   background-color:var(--surface-inputchip-surface);
   border:none;
@@ -1863,33 +1872,24 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_avatarContainer--9f437{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_avatarContainer--7e728{
   padding-inline:var(--space-05);
 }
-.bp_input_chip_module_container--9f437:not(.bp_input_chip_module_avatarContainer--9f437).bp_input_chip_module_deleteButton--9f437{
+.bp_input_chip_module_container--7e728:not(.bp_input_chip_module_avatarContainer--7e728).bp_input_chip_module_deleteButton--7e728{
   padding-inline:var(--space-1) var(--space-05);
 }
-.bp_input_chip_module_container--9f437:not(.bp_input_chip_module_error--9f437):focus{
+.bp_input_chip_module_container--7e728:not(.bp_input_chip_module_error--7e728):focus{
   background-color:var(--surface-inputchip-surface-hover);
   box-shadow:0 0 0 var(--border-1) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-1)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_error--9f437{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728{
   background-color:var(--surface-inputchip-surface-error);
   outline:var(--border-1) solid var(--border-inputchip-border-error);
 }
-.bp_input_chip_module_container--9f437.bp_input_chip_module_error--9f437:focus{
+.bp_input_chip_module_container--7e728.bp_input_chip_module_error--7e728:focus{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-dark), 0 0 0 calc(var(--border-2) + var(--border-2)) var(--outline-focus-on-light);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_avatar--9f437{
-  flex-shrink:0;
-}
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_label--9f437{
-  overflow:hidden;
-  padding-inline:var(--space-2);
-  text-overflow:ellipsis;
-  white-space:nowrap;
-}
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border-radius:var(--radius-half);
@@ -1899,21 +1899,57 @@
   padding-block:var(--space-1);
   padding-inline:var(--space-1);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437 *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
   fill:var(--icon-cta-icon);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:hover{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:hover *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:active{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_input_chip_module_container--9f437 .bp_input_chip_module_deleteIcon--9f437:active *{
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
   fill:var(--icon-cta-icon-pressed);
 }
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_label--7e728{
+  overflow:hidden;
+  padding-inline:var(--space-2);
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728{
+  background-color:var(--surface-inputchip-surface-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_label--7e728{
+  color:var(--text-inputchip-text-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728:focus{
+  background-color:var(--surface-inputchip-surface-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728{
+  background:var(--surface-cta-surface-icon);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728 *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:hover *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active{
+  background:var(--surface-cta-surface-icon-pressed);
+}
+.bp_input_chip_module_container--7e728.bp_input_chip_module_variable--7e728 .bp_input_chip_module_deleteIcon--7e728:active *{
+  fill:var(--icon-inputchip-deleteicon-variable);
+}
+.bp_input_chip_module_container--7e728 .bp_input_chip_module_avatar--7e728{
+  flex-shrink:0;
+}
 .bp_inline_error_module_inlineError--9a67c{
   align-items:center;
   color:var(--text-text-error-on-light);
@@ -7261,7 +7297,45 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   min-width:var(--split-button-dropdown-min-width);
 }
 
-.bp_switch_module_option--06ec9{
+.bp_switch_module_option--d724c[data-modern=false]{
+  --switch-width:var(--size-10);
+  --switch-height:var(--size-5);
+  --switch-margin-left:var(--space-10);
+  --switch-margin-right:var(--space-3);
+  --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
+  --thumb-width:var(--size-5);
+  --thumb-height:var(--size-5);
+  --thumb-bg:var(--surface-switch-surface);
+  --thumb-border:var(--border-1) solid var(--border-switch-border);
+  --thumb-radius:var(--size-10);
+  --thumb-shadow:var(--dropshadow-3);
+  --switch-bg-off:var(--surface-switch-surface-off);
+  --switch-bg-on:var(--surface-switch-surface-on);
+  --switch-radius:var(--size-10);
+  --switch-outline:var(--outline-focus-on-light);
+  --switch-disabled-opacity:.5;
+}
+
+.bp_switch_module_option--d724c[data-modern=true]{
+  --switch-width:var(--bp-size-110);
+  --switch-height:var(--bp-size-060);
+  --switch-margin-left:var(--bp-space-100);
+  --switch-margin-right:var(--bp-space-030);
+  --description-margin:calc(var(--switch-margin-right) + var(--switch-width));
+  --thumb-width:var(--bp-size-060);
+  --thumb-height:var(--bp-size-060);
+  --thumb-bg:var(--bp-surface-switch-surface);
+  --thumb-border:var(--bp-border-01) solid var(--bp-border-switch-border);
+  --thumb-radius:var(--bp-size-100);
+  --thumb-shadow:var(--dropshadow-3);
+  --switch-bg-off:var(--bp-surface-switch-surface-off);
+  --switch-bg-on:var(--bp-surface-switch-surface-on);
+  --switch-radius:var(--bp-size-100);
+  --switch-outline:var(--bp-outline-focus-on-light);
+  --switch-disabled-opacity:.6;
+}
+
+.bp_switch_module_option--d724c{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -7273,69 +7347,69 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_label--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_label--d724c{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_label--06ec9.bp_switch_module_rightAlign--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_label--d724c.bp_switch_module_rightAlign--d724c{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_description--06ec9{
-  margin-left:calc(var(--space-3) + var(--size-10));
+.bp_switch_module_option--d724c .bp_switch_module_description--d724c{
+  margin-left:var(--description-margin);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_description--06ec9.bp_switch_module_rightAlign--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_description--d724c.bp_switch_module_rightAlign--d724c{
   margin-left:unset;
-  margin-right:calc(var(--space-3) + var(--size-10));
+  margin-right:var(--description-margin);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_thumb--06ec9{
-  background-color:var(--surface-switch-surface);
-  border:var(--border-1) solid var(--border-switch-border);
-  border-radius:var(--size-10);
-  box-shadow:var(--dropshadow-3);
+.bp_switch_module_option--d724c .bp_switch_module_thumb--d724c{
+  background-color:var(--thumb-bg);
+  border:var(--thumb-border);
+  border-radius:var(--thumb-radius);
+  box-shadow:var(--thumb-shadow);
   box-sizing:border-box;
   display:block;
-  height:var(--size-5);
+  height:var(--thumb-height);
   transition:transform .4s;
-  width:var(--size-5);
+  width:var(--thumb-width);
   will-change:transform;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9{
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c{
   all:unset;
   align-items:center;
-  background-color:var(--surface-switch-surface-off);
-  border-radius:var(--size-10);
+  background-color:var(--switch-bg-off);
+  border-radius:var(--switch-radius);
   display:flex;
   flex-shrink:0;
-  height:var(--size-5);
-  margin-right:var(--space-3);
+  height:var(--switch-height);
+  margin-right:var(--switch-margin-right);
   position:relative;
   transition:background-color .4s;
-  width:var(--size-10);
+  width:var(--switch-width);
   will-change:transition;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9.bp_switch_module_rightAlign--06ec9{
-  margin-left:var(--space-10);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c.bp_switch_module_rightAlign--d724c{
+  margin-left:var(--switch-margin-left);
   margin-right:unset;
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9:focus-visible{
-  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--switch-outline);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9[aria-checked=true]{
-  background-color:var(--surface-switch-surface-on);
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c[aria-checked=true]{
+  background-color:var(--switch-bg-on);
 }
-.bp_switch_module_option--06ec9 .bp_switch_module_switch--06ec9[aria-checked=true] .bp_switch_module_thumb--06ec9{
-  transform:translateX(calc(var(--size-10)/2));
+.bp_switch_module_option--d724c .bp_switch_module_switch--d724c[aria-checked=true] .bp_switch_module_thumb--d724c{
+  transform:translateX(calc(var(--switch-width)/2));
 }
-.bp_switch_module_option--06ec9.bp_switch_module_disabled--06ec9 .bp_switch_module_label--06ec9{
+.bp_switch_module_option--d724c.bp_switch_module_disabled--d724c .bp_switch_module_label--d724c{
   cursor:default;
 }
-.bp_switch_module_option--06ec9.bp_switch_module_disabled--06ec9 .bp_switch_module_switch--06ec9{
-  opacity:60%;
+.bp_switch_module_option--d724c.bp_switch_module_disabled--d724c .bp_switch_module_switch--d724c{
+  opacity:var(--switch-disabled-opacity);
 }
 
 .bp_text_button_module_textButton--84555[data-modern=false]{

package/dist/lib-esm/input-chip/input-chip.js

@@ -6,6 +6,15 @@ import React__default, { forwardRef } from 'react';
 import { Text } from '../text/text.js';
 import styles from './input-chip.module.js';
 
+const getVariantClass = variant => {
+  if (variant === 'error') {
+    return styles.error;
+  }
+  if (variant === 'variable') {
+    return styles.variable;
+  }
+  return undefined;
+};
 const DELETE_TRIGGER_KEYS = ['Backspace', 'Delete'];
 const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -44,11 +53,13 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     buttonProps.onKeyDown?.(event);
   };
   const hasError = variant === 'error';
+  const variantClass = getVariantClass(variant);
+  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className);
   return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
     ...buttonProps,
     ref: ref,
     "aria-invalid": hasError,
-    className: clsx(styles.container, hasError && styles.error, avatar && styles.avatarContainer, onDelete && styles.deleteButton, className),
+    className: containerClassName,
     onKeyDown: handleKeyDown,
     type: "button",
     children: [avatar, jsx(Text, {

package/dist/lib-esm/input-chip/input-chip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_input_chip_module_container--9f437","avatarContainer":"bp_input_chip_module_avatarContainer--9f437","deleteButton":"bp_input_chip_module_deleteButton--9f437","error":"bp_input_chip_module_error--9f437","avatar":"bp_input_chip_module_avatar--9f437","label":"bp_input_chip_module_label--9f437","deleteIcon":"bp_input_chip_module_deleteIcon--9f437"};
+var styles = {"container":"bp_input_chip_module_container--7e728","avatarContainer":"bp_input_chip_module_avatarContainer--7e728","deleteButton":"bp_input_chip_module_deleteButton--7e728","error":"bp_input_chip_module_error--7e728","deleteIcon":"bp_input_chip_module_deleteIcon--7e728","label":"bp_input_chip_module_label--7e728","variable":"bp_input_chip_module_variable--7e728","avatar":"bp_input_chip_module_avatar--7e728"};
 
 export { styles as default };

package/dist/lib-esm/input-chip/types.d.ts

@@ -17,7 +17,7 @@ export interface InputChipProps extends HTMLAttributes<HTMLElement> {
      *
      * @default "default"
      */
-    variant?: 'default' | 'error';
+    variant?: 'default' | 'error' | 'variable';
     /**
      * Callback fired when chip is deleted with X button click or keyboard interaction.
      */

package/dist/lib-esm/switch/switch-item.js

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import * as RadixSwitch from '@radix-ui/react-switch';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './switch.module.js';
@@ -24,10 +25,14 @@ const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const descriptionId = useUniqueId('description-', !!description);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     className: clsx([styles.option], {
       [styles.disabled]: disabled
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsxs("label", {
       className: clsx(styles.label, {
         [styles.rightAlign]: isRightAligned

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_switch_module_option--06ec9","label":"bp_switch_module_label--06ec9","rightAlign":"bp_switch_module_rightAlign--06ec9","description":"bp_switch_module_description--06ec9","thumb":"bp_switch_module_thumb--06ec9","switch":"bp_switch_module_switch--06ec9","disabled":"bp_switch_module_disabled--06ec9"};
+var styles = {"option":"bp_switch_module_option--d724c","label":"bp_switch_module_label--d724c","rightAlign":"bp_switch_module_rightAlign--d724c","description":"bp_switch_module_description--d724c","thumb":"bp_switch_module_thumb--d724c","switch":"bp_switch_module_switch--d724c","disabled":"bp_switch_module_disabled--d724c"};
 
 export { styles as default };

package/package.json

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