@itwin/itwinui-react 3.0.0-dev.6 → 3.0.0-dev.8

package/cjs/core/utils/components/Portal.js

@@ -0,0 +1,43 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.Portal = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const ReactDOM = tslib_1.__importStar(require('react-dom'));
+const ThemeContext_js_1 = require('../../ThemeProvider/ThemeContext.js');
+const dom_js_1 = require('../functions/dom.js');
+const useIsClient_js_1 = require('../hooks/useIsClient.js');
+// ----------------------------------------------------------------------------
+/**
+ * Helper component that portals children according to the following conditions:
+ *   - renders null on server
+ *   - if `portal` is set to true, renders into nearest ThemeContext.portalContainer
+ *   - if `portal` is set to false, renders as-is without portal
+ *   - otherwise renders into `portal.to` (can be an element or a function)
+ *
+ * @private
+ */
+const Portal = (props) => {
+  const { portal = true, children } = props;
+  const isClient = (0, useIsClient_js_1.useIsClient)();
+  const portalTo = usePortalTo(portal);
+  if (!isClient) {
+    return null;
+  }
+  return portalTo ? ReactDOM.createPortal(children, portalTo) : children;
+};
+exports.Portal = Portal;
+// ----------------------------------------------------------------------------
+const usePortalTo = (portal) => {
+  const themeInfo = React.useContext(ThemeContext_js_1.ThemeContext);
+  if (typeof portal === 'boolean') {
+    return portal
+      ? themeInfo?.portalContainer ?? (0, dom_js_1.getDocument)()?.body
+      : null;
+  }
+  return typeof portal.to === 'function' ? portal.to() : portal.to;
+};

package/cjs/core/utils/components/VirtualScroll.js

@@ -36,8 +36,8 @@ const getElementHeightWithMargins = (element) => {
     return undefined;
   }
   const margin =
-    parseFloat(getElementStyle(element, 'margin-top')) +
-    parseFloat(getElementStyle(element, 'margin-bottom'));
+    parseFloat(getElementStyle(element, 'margin-block-start')) +
+    parseFloat(getElementStyle(element, 'margin-block-end'));
   return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
 };
 const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
@@ -350,13 +350,13 @@ const useVirtualization = (props) => {
   return {
     outerProps: {
       style: {
-        minHeight:
+        minBlockSize:
           itemsLength > 1
             ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
               childHeight.current.first +
               childHeight.current.last
             : childHeight.current.middle,
-        minWidth: '100%',
+        minInlineSize: '100%',
         ...style,
       },
       ...rest,

package/cjs/core/utils/components/index.d.ts

@@ -13,3 +13,5 @@ export * from './Divider.js';
 export * from './LinkAction.js';
 export * from './AutoclearingHiddenLiveRegion.js';
 export * from './Box.js';
+export * from './ButtonBase.js';
+export * from './Portal.js';

package/cjs/core/utils/components/index.js

@@ -20,3 +20,5 @@ tslib_1.__exportStar(require('./Divider.js'), exports);
 tslib_1.__exportStar(require('./LinkAction.js'), exports);
 tslib_1.__exportStar(require('./AutoclearingHiddenLiveRegion.js'), exports);
 tslib_1.__exportStar(require('./Box.js'), exports);
+tslib_1.__exportStar(require('./ButtonBase.js'), exports);
+tslib_1.__exportStar(require('./Portal.js'), exports);

package/cjs/core/utils/functions/colors.d.ts

@@ -17,4 +17,4 @@ export declare const isSoftBackground: (value: string) => value is "skyblue" | "
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.
  */
-export declare const getUserColor: (emailOrName: string) => string;
+export declare const getUserColor: (emailOrName: string) => "var(--iui-color-background-skyblue)" | "var(--iui-color-background-celery)" | "var(--iui-color-background-froly)" | "var(--iui-color-background-steelblue)" | "var(--iui-color-background-sunglow)" | "var(--iui-color-background-seabuckthorn)" | "var(--iui-color-background-montecarlo)" | "var(--iui-color-background-poloblue)" | "var(--iui-color-background-bouquet)" | "var(--iui-color-background-ash)" | "var(--iui-color-background-oak)";

package/cjs/core/utils/functions/colors.js

@@ -26,19 +26,7 @@ const isSoftBackground = (value) => {
   return Object.keys(exports.SoftBackgrounds).includes(value);
 };
 exports.isSoftBackground = isSoftBackground;
-const USER_COLORS = [
-  '#6AB9EC',
-  '#B1C854',
-  '#F7706C',
-  '#4585A5',
-  '#FFC335',
-  '#F7963E',
-  '#73C7C1',
-  '#85A9CF',
-  '#A3779F',
-  '#C8C2B4',
-  '#A47854',
-];
+const USER_COLORS = Object.values(exports.SoftBackgrounds);
 /**
  * Generate color from user name or email.
  * Recommended to use for `backgroundColor` in `Avatar` component.

package/cjs/core/utils/functions/index.d.ts

@@ -6,3 +6,4 @@ export * from './focusable.js';
 export * from './supports.js';
 export * from './polymorphic.js';
 export * from './import.js';
+export * from './react.js';

package/cjs/core/utils/functions/index.js

@@ -13,3 +13,4 @@ tslib_1.__exportStar(require('./focusable.js'), exports);
 tslib_1.__exportStar(require('./supports.js'), exports);
 tslib_1.__exportStar(require('./polymorphic.js'), exports);
 tslib_1.__exportStar(require('./import.js'), exports);
+tslib_1.__exportStar(require('./react.js'), exports);

package/cjs/core/utils/functions/react.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+export declare const cloneElementWithRef: (children: React.ReactNode, getProps: (children: JSX.Element) => Record<string, unknown>) => string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;

package/cjs/core/utils/functions/react.js

@@ -0,0 +1,40 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.cloneElementWithRef = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+const useMergedRefs_js_1 = require('../hooks/useMergedRefs.js');
+/**
+ * Wrapper over `cloneElement` that automatically checks for `isValidElement`
+ * and automatically merges `children.ref` with the ref passed in props.
+ *
+ * @private
+ */
+const cloneElementWithRef = (children, getProps) => {
+  if (!children) {
+    return null;
+  }
+  if (!React.isValidElement(children)) {
+    return children;
+  }
+  const props = getProps(children);
+  const ref = (0, useMergedRefs_js_1.mergeRefs)(
+    ...[
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      'ref' in children ? children.ref : null,
+      'ref' in props ? props.ref : null,
+    ].filter(Boolean),
+  );
+  return React.cloneElement(children, {
+    ...props,
+    // we already checked ref above and handled null, so ts-ignore is ok
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    ref,
+  });
+};
+exports.cloneElementWithRef = cloneElementWithRef;

package/cjs/core/utils/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './useLatestRef.js';
 export * from './useIsomorphicLayoutEffect.js';
 export * from './useIsClient.js';
 export * from './useId.js';
+export * from './useControlledState.js';

package/cjs/core/utils/hooks/index.js

@@ -18,3 +18,4 @@ tslib_1.__exportStar(require('./useLatestRef.js'), exports);
 tslib_1.__exportStar(require('./useIsomorphicLayoutEffect.js'), exports);
 tslib_1.__exportStar(require('./useIsClient.js'), exports);
 tslib_1.__exportStar(require('./useId.js'), exports);
+tslib_1.__exportStar(require('./useControlledState.js'), exports);

package/cjs/core/utils/hooks/useControlledState.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+export declare const useControlledState: <T>(initialValue: T, controlledState: T, setControlledState?: React.Dispatch<React.SetStateAction<T>> | undefined) => readonly [T, React.Dispatch<React.SetStateAction<T>>];

package/cjs/core/utils/hooks/useControlledState.js

@@ -0,0 +1,39 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+exports.useControlledState = void 0;
+const tslib_1 = require('tslib');
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+const React = tslib_1.__importStar(require('react'));
+/**
+ * Wrapper over `useState` that always gives preference to the
+ * controlled state (which often comes from a prop).
+ *
+ * This is helpful when a component needs to support both uncontrolled
+ * and controlled states. If controlled value/setter is not passed,
+ * then it will work just like a regular `useState`.
+ *
+ * @example
+ * const [state, setState] = useControlledState(null, props.value, props.onChange);
+ */
+const useControlledState = (
+  initialValue,
+  controlledState,
+  setControlledState,
+) => {
+  const [uncontrolledState, setUncontrolledState] =
+    React.useState(initialValue);
+  const state =
+    controlledState !== undefined ? controlledState : uncontrolledState;
+  const setState = React.useCallback(
+    (value) => {
+      setUncontrolledState(value);
+      setControlledState?.(value);
+    },
+    [setControlledState, setUncontrolledState],
+  );
+  return [state, setState];
+};
+exports.useControlledState = useControlledState;

package/cjs/core/utils/hooks/useGlobals.d.ts

@@ -9,7 +9,7 @@ import { ThemeContext } from '../../ThemeProvider/ThemeContext.js';
 export declare const useGlobals: () => {
     theme?: import("../../index.js").ThemeType | undefined;
     themeOptions?: import("../../ThemeProvider/ThemeProvider.js").ThemeOptions | undefined;
-    portalContainerRef?: React.RefObject<HTMLElement> | undefined;
+    portalContainer?: HTMLElement | null | undefined;
 } | undefined;
 /** Shows console error if ThemeProvider is not used */
 export declare const useThemeProviderWarning: (themeContext: React.ContextType<typeof ThemeContext>) => void;

package/cjs/styles.js

@@ -11,13 +11,6 @@ const styles = {
   'iui-anchor': '_iui3-anchor',
   'iui-anchor-external': '_iui3-anchor-external',
   'iui-avatar': '_iui3-avatar',
-  'iui-stroke': '_iui3-stroke',
-  'iui-initials': '_iui3-initials',
-  'iui-status': '_iui3-status',
-  'iui-online': '_iui3-online',
-  'iui-away': '_iui3-away',
-  'iui-busy': '_iui3-busy',
-  'iui-offline': '_iui3-offline',
   'iui-avatar-count': '_iui3-avatar-count',
   'iui-small': '_iui3-small',
   'iui-large': '_iui3-large',
@@ -41,8 +34,9 @@ const styles = {
   'iui-button-dropdown': '_iui3-button-dropdown',
   'iui-button-split': '_iui3-button-split',
   'iui-button-group': '_iui3-button-group',
-  'iui-input-container': '_iui3-input-container',
+  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-input': '_iui3-input',
+  'iui-input-grid': '_iui3-input-grid',
   'iui-disabled': '_iui3-disabled',
   'iui-button-group-vertical': '_iui3-button-group-vertical',
   'iui-button-group-overflow-x': '_iui3-button-group-overflow-x',
@@ -185,36 +179,18 @@ const styles = {
   'iui-information-body-content': '_iui3-information-body-content',
   'iui-input-label': '_iui3-input-label',
   'iui-inline': '_iui3-inline',
-  'iui-required': '_iui3-required',
   'iui-input-with-icon': '_iui3-input-with-icon',
   'iui-select-tag-container': '_iui3-select-tag-container',
   'iui-end-icon': '_iui3-end-icon',
-  'iui-actionable': '_iui3-actionable',
   'iui-open': '_iui3-open',
-  'iui-inline-icon': '_iui3-inline-icon',
-  'iui-with-message': '_iui3-with-message',
-  'iui-input-icon': '_iui3-input-icon',
+  'iui-required': '_iui3-required',
   'iui-input-group': '_iui3-input-group',
+  'iui-status-message': '_iui3-status-message',
+  'iui-select-button': '_iui3-select-button',
+  'iui-input-group-wrapper': '_iui3-input-group-wrapper',
   'iui-toggle-switch-wrapper': '_iui3-toggle-switch-wrapper',
   'iui-radio-wrapper': '_iui3-radio-wrapper',
-  'iui-inline-label': '_iui3-inline-label',
-  'iui-label': '_iui3-label',
-  'iui-message': '_iui3-message',
-  'iui-select-button': '_iui3-select-button',
-  'iui-input-flex-container': '_iui3-input-flex-container',
   'iui-keyboard': '_iui3-keyboard',
-  'iui-location-marker': '_iui3-location-marker',
-  'iui-location-marker-default': '_iui3-location-marker-default',
-  'iui-location-marker-default-pin': '_iui3-location-marker-default-pin',
-  'iui-location-marker-default-pin-dot':
-    '_iui3-location-marker-default-pin-dot',
-  'iui-location-marker-data-rich': '_iui3-location-marker-data-rich',
-  'iui-location-marker-data-rich-body': '_iui3-location-marker-data-rich-body',
-  'iui-location-marker-data-rich-icon': '_iui3-location-marker-data-rich-icon',
-  'iui-location-marker-data-rich-icon-monochrome':
-    '_iui3-location-marker-data-rich-icon-monochrome',
-  'iui-location-marker-me': '_iui3-location-marker-me',
-  'iui-location-marker-me-dot': '_iui3-location-marker-me-dot',
   'iui-list': '_iui3-list',
   'iui-menu': '_iui3-menu',
   'iui-header-menu-icon': '_iui3-header-menu-icon',
@@ -243,10 +219,10 @@ const styles = {
   'iui-overlay-exiting': '_iui3-overlay-exiting',
   closeAnimation,
   'iui-progress-indicator-radial': '_iui3-progress-indicator-radial',
-  'iui-ux8sxma': '_iui3-ux8sxma',
+  'iui-ubn95wp': '_iui3-ubn95wp',
   'iui-progress-indicator-linear-label':
     '_iui3-progress-indicator-linear-label',
-  'iui-ux8sxmt': '_iui3-ux8sxmt',
+  'iui-ubn95xj': '_iui3-ubn95xj',
   'iui-radio': '_iui3-radio',
   'iui-radio-tile': '_iui3-radio-tile',
   'iui-radio-tile-icon': '_iui3-radio-tile-icon',
@@ -313,6 +289,7 @@ const styles = {
   'iui-table-body': '_iui3-table-body',
   'iui-table-header-wrapper': '_iui3-table-header-wrapper',
   'iui-slot': '_iui3-slot',
+  'iui-actionable': '_iui3-actionable',
   'iui-table-filter-button': '_iui3-table-filter-button',
   'iui-table-resizer': '_iui3-table-resizer',
   'iui-table-resizer-bar': '_iui3-table-resizer-bar',
@@ -409,6 +386,7 @@ const styles = {
   'iui-placement-bottom-start': '_iui3-placement-bottom-start',
   'iui-placement-bottom-end': '_iui3-placement-bottom-end',
   'iui-status-area': '_iui3-status-area',
+  'iui-message': '_iui3-message',
   'iui-toast-anchor': '_iui3-toast-anchor',
   'iui-informational': '_iui3-informational',
   'iui-label-on-left': '_iui3-label-on-left',
@@ -416,11 +394,8 @@ const styles = {
   'iui-toggle-switch-icon': '_iui3-toggle-switch-icon',
   'iui-toggle-switch': '_iui3-toggle-switch',
   'iui-toggle-switch-label': '_iui3-toggle-switch-label',
-  'iui-tooltip-container': '_iui3-tooltip-container',
   'iui-tooltip': '_iui3-tooltip',
-  'iui-tooltip-visible': '_iui3-tooltip-visible',
   'iui-transfer-list-wrapper': '_iui3-transfer-list-wrapper',
-  'iui-transfer-list-listbox-label': '_iui3-transfer-list-listbox-label',
   'iui-transfer-list-listbox-wrapper': '_iui3-transfer-list-listbox-wrapper',
   'iui-transfer-list-listbox': '_iui3-transfer-list-listbox',
   'iui-transfer-list-toolbar': '_iui3-transfer-list-toolbar',
@@ -438,6 +413,7 @@ const styles = {
   'iui-tree-node-content-label': '_iui3-tree-node-content-label',
   'iui-tree-node-content-title': '_iui3-tree-node-content-title',
   'iui-tree-node-content-caption': '_iui3-tree-node-content-caption',
+  'iui-button-base': '_iui3-button-base',
   'iui-svg-icon': '_iui3-svg-icon',
   'iui-notification-marker': '_iui3-notification-marker',
   pulse,

package/esm/core/Alert/Alert.d.ts

@@ -12,20 +12,26 @@ type AlertOwnProps = {
      */
     isSticky?: boolean;
 };
+type AlertLegacyProps = {
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableText?: React.ReactNode;
+    /** @deprecated Use `Alert.Action` subcomponent. */
+    clickableTextProps?: React.ComponentPropsWithoutRef<'a'>;
+    /** @deprecated Use `Alert.CloseButton` subcomponent. */
+    onClose?: () => void;
+};
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -36,17 +42,22 @@ type AlertOwnProps = {
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
-export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps> & {
+export declare const Alert: PolymorphicForwardRefComponent<"div", AlertOwnProps & AlertLegacyProps> & {
+    /**
+     *  Alert wrapper subcomponent
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", AlertOwnProps>;
     /**
      * 	Alert icon subcomponent
      */
     Icon: PolymorphicForwardRefComponent<"span", Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement>> & {
+    }, "fill" | "as" | "key" | "size" | keyof React.HTMLAttributes<HTMLSpanElement> | "padded"> & {
         size?: "small" | "large" | "auto" | "medium" | import("../utils/types.js").AnyString | undefined;
         fill?: "default" | "informational" | "negative" | "positive" | "warning" | import("../utils/types.js").AnyString | undefined;
+        padded?: boolean | undefined;
     } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         as?: "span" | undefined;
     }>;

package/esm/core/Alert/Alert.js

@@ -11,10 +11,47 @@ import {
   StatusIconMap,
   SvgCloseSmall,
   Box,
+  ButtonBase,
 } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
 const AlertContext = React.createContext(undefined);
-const AlertComponent = React.forwardRef((props, ref) => {
+// ----------------------------------------------------------------------------
+// Alert component
+const AlertComponent = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    type = 'informational',
+    isSticky = false,
+    clickableText,
+    clickableTextProps,
+    onClose,
+    ...rest
+  } = props;
+  return React.createElement(
+    Alert.Wrapper,
+    { type: type, isSticky: isSticky, ref: forwardedRef, ...rest },
+    React.createElement(Alert.Icon, null),
+    React.createElement(
+      Alert.Message,
+      null,
+      children,
+      clickableText
+        ? React.createElement(
+            Alert.Action,
+            { ...clickableTextProps },
+            clickableText,
+          )
+        : null,
+    ),
+    onClose
+      ? React.createElement(Alert.CloseButton, { onClick: onClose })
+      : null,
+  );
+});
+AlertComponent.displayName = 'Alert';
+// ----------------------------------------------------------------------------
+// Alert.Wrapper component
+const AlertWrapper = React.forwardRef((props, ref) => {
   const {
     children,
     className,
@@ -34,7 +71,7 @@ const AlertComponent = React.forwardRef((props, ref) => {
     React.createElement(AlertContext.Provider, { value: { type } }, children),
   );
 });
-AlertComponent.displayName = 'Alert';
+AlertWrapper.displayName = 'Alert.Wrapper';
 // ----------------------------------------------------------------------------
 // Alert.Icon component
 const AlertIcon = React.forwardRef((props, ref) => {
@@ -57,7 +94,7 @@ AlertMessage.displayName = 'Alert.Message';
 const AlertAction = React.forwardRef((props, ref) => {
   const { children, className, ...rest } = props;
   return React.createElement(
-    Box,
+    ButtonBase,
     {
       as: !!props.href ? 'a' : 'button',
       className: cx('iui-alert-link', className),
@@ -88,17 +125,15 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
 /**
  * A small box to quickly grab user attention and communicate a brief message
  * @example
- * <Alert>
- *  <Alert.Message>This is an alert.</Alert.Message>
- * </Alert>
+ * <Alert>This is an alert.</Alert>
  * @example
- * <Alert type='informational'>
+ * <Alert.Wrapper type='informational'>
  *  <Alert.Icon />
  *  <Alert.Message>This is an informational alert.</Alert.Message>
  *  <Alert.CloseButton onClick={() => {}} />
- * </Alert>
+ * </Alert.Wrapper>
  * @example
- * <Alert type='positive'>
+ * <Alert.Wrapper type='positive'>
  *  <Alert.Icon>
  *    <SvgSmileyHappy />
  *  </Alert.Icon>
@@ -109,9 +144,13 @@ AlertCloseButton.displayName = 'Alert.CloseButton';
  *  <Alert.CloseButton onClick={() => {}}>
  *    <SvgCollapse />
  *  </Alert.CloseButton>
- * </Alert>
+ * </Alert.Wrapper>
  */
 export const Alert = Object.assign(AlertComponent, {
+  /**
+   *  Alert wrapper subcomponent
+   */
+  Wrapper: AlertWrapper,
   /**
    * 	Alert icon subcomponent
    */

package/esm/core/Avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+import { SoftBackgrounds } from '../utils/index.js';
+import type { AnyString, PolymorphicForwardRefComponent } from '../utils/index.js';
 export type AvatarStatus = 'online' | 'busy' | 'away' | 'offline';
 type StatusTitles = {
     [key in Exclude<AvatarStatus, ''>]: string;
@@ -29,7 +30,7 @@ type AvatarProps = {
     /**
      * Color of the icon. You can use `getUserColor` function to generate color from user name or email. If not provided, default background color from CSS styling will be used (hsl(72, 51%, 56%) / olive green).
      */
-    backgroundColor?: string;
+    backgroundColor?: keyof typeof SoftBackgrounds | AnyString;
     /**
      * Translated status messages shown on hover.
      */

package/esm/core/Avatar/Avatar.js

@@ -4,7 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 import cx from 'classnames';
 import * as React from 'react';
-import { Box } from '../utils/index.js';
+import {
+  Box,
+  VisuallyHidden,
+  SoftBackgrounds,
+  isSoftBackground,
+} from '../utils/index.js';
+/**
+ * Helper function that returns one of the preset badge color values.
+ */
+const getBackground = (color) => {
+  if (!color) {
+    return '';
+  }
+  return isSoftBackground(color) ? SoftBackgrounds[color] : color;
+};
 export const defaultStatusTitles = {
   away: 'Away',
   busy: 'Busy',
@@ -49,27 +63,17 @@ export const Avatar = React.forwardRef((props, ref) => {
         { [`iui-${size}`]: size !== 'medium' },
         className,
       ),
+      'data-iui-status': status,
       title: title,
-      style: { backgroundColor, ...style },
+      style: { backgroundColor: getBackground(backgroundColor), ...style },
       ref: ref,
       ...rest,
     },
-    !image &&
-      React.createElement(
-        Box,
-        { as: 'abbr', className: 'iui-initials' },
-        abbreviation?.substring(0, 2),
-      ),
+    !image ? abbreviation?.substring(0, 2) : null,
     image,
-    React.createElement(Box, { as: 'span', className: 'iui-stroke' }),
-    status &&
-      React.createElement(Box, {
-        as: 'span',
-        title: statusTitles[status],
-        className: cx('iui-status', {
-          [`iui-${status}`]: !!status,
-        }),
-      }),
+    status
+      ? React.createElement(VisuallyHidden, null, statusTitles[status])
+      : null,
   );
 });
 export default Avatar;

package/esm/core/AvatarGroup/AvatarGroup.js

@@ -85,14 +85,9 @@ export const AvatarGroup = React.forwardRef((props, ref) => {
               countIconProps?.className,
             ),
           },
-          React.createElement(
-            Box,
-            { as: 'abbr', className: 'iui-initials' },
-            childrenLength <= maxLength
-              ? `${childrenLength - maxIcons}`
-              : `${maxLength}+`,
-          ),
-          React.createElement(Box, { className: 'iui-stroke' }),
+          childrenLength <= maxLength
+            ? `${childrenLength - maxIcons}`
+            : `${maxLength}+`,
         ),
       ),
   );