@itwin/itwinui-react 3.0.4 → 3.0.6

package/cjs/core/Overlay/Overlay.d.ts

@@ -2,55 +2,51 @@ import React from 'react';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 type OverlayComponentProps = {
     /**
-     * The sub-component elements of Overlay.
+     * Page elements that are blurred by the Overlay. Will become blurred and inert.
      */
     children?: React.ReactNode;
     /**
-     * Placeholder for Progress Indicator in Overlay
+     * Content shown inside the Overlay, on top of the blurred content.
+     *
+     * Can be used to show a loading indicator.
      */
     content?: React.ReactNode;
 };
 /**
+ * The Overlay component can be used to hide some UI while its content is loading or revalidating,
+ * and display a loading indicator on top of it.
  *
- * This is an Overlay Component.
- *
+ * The hidden content gets blurred and becomes inert so it cannot be interacted with.
  *
  * @example
- * <Overlay content="loading">
- * content beneath the overlay... (text, img, etc.)
+ * <Overlay content="loading…">
+ *   content beneath the overlay… (text, img, etc.)
  * </Overlay>
  *
- *
- * This is an Overlay Component using subcomponents.
- *
- *
  * @example
  * <Overlay.Wrapper>
- *  <Overlay.Overlay>
- *    loading...
- *  <Overlay.Overlay>
- *  <Overlay.HiddenContent>
- *    content beneath the overlay... (text, img, etc.)
- *  <Overlay.HiddenContent />
+ *   <Overlay.Overlay>
+ *     loading…
+ *   <Overlay.Overlay>
+ *   <Overlay.HiddenContent>
+ *     content beneath the overlay… (text, img, etc.)
+ *   <Overlay.HiddenContent />
  * </Overlay.Wrapper>
- *
- *
  */
 export declare const Overlay: PolymorphicForwardRefComponent<"div", OverlayComponentProps> & {
     /**
-     *
      * The main component is a wrapper to hold the
-     * Overlay HiddenContent and Overlay Message.
+     * `Overlay.HiddenContent` and `Overlay.Overlay`.
      */
     Wrapper: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
     /**
-     * HiddenContent houses page elements that are blurred by the
-     * Overlay.
+     * `Overlay.HiddenContent` houses page elements that are blurred by the
+     * Overlay. These elements will become inert when the overlay is active.
      */
     HiddenContent: PolymorphicForwardRefComponent<"div", {}>;
     /**
-     *  Message contains the progress indicator and loading message
-     *  for the Overlay. It sits on top of the HiddenContent.
+     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
+     * any arbitrary content like a progress indicator and loading message.
      */
     Overlay: PolymorphicForwardRefComponent<NonNullable<keyof JSX.IntrinsicElements>, {}>;
 };

package/cjs/core/Overlay/Overlay.js

@@ -1,96 +1,82 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Overlay = void 0;
-const tslib_1 = require('tslib');
+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_1 = tslib_1.__importDefault(require('react'));
-const index_js_1 = require('../utils/index.js');
+const react_1 = tslib_1.__importDefault(require("react"));
+const index_js_1 = require("../utils/index.js");
 // --------------------------------------------------------------------------------
 const OverlayComponent = react_1.default.forwardRef((props, forwardedRef) => {
-  const { content, children, ...rest } = props;
-  return react_1.default.createElement(
-    OverlayWrapper,
-    { ref: forwardedRef, ...rest },
-    react_1.default.createElement(OverlayMessage, null, content),
-    react_1.default.createElement(OverlayHiddenContent, null, children),
-  );
+    const { content, children, ...rest } = props;
+    return (react_1.default.createElement(OverlayWrapper, { ref: forwardedRef, ...rest },
+        react_1.default.createElement(OverlayOverlay, null, content),
+        react_1.default.createElement(OverlayHiddenContent, null, children)));
 });
 OverlayComponent.displayName = 'Overlay';
 // --------------------------------------------------------------------------------
 const OverlayHiddenContent = react_1.default.forwardRef((props, ref) => {
-  const { children, ...rest } = props;
-  useInertPolyfill();
-  return react_1.default.createElement(
-    index_js_1.Box,
-    { inert: '', ref: ref, ...rest },
-    children,
-  );
+    const { children, ...rest } = props;
+    useInertPolyfill();
+    return (react_1.default.createElement(index_js_1.Box, { inert: '', ref: ref, ...rest }, children));
 });
 OverlayHiddenContent.displayName = 'Overlay.HiddenContent';
 // --------------------------------------------------------------------------------
-const OverlayMessage = (0, index_js_1.polymorphic)('iui-overlay');
-OverlayMessage.displayName = 'Overlay.Overlay';
+const OverlayOverlay = (0, index_js_1.polymorphic)('iui-overlay');
+OverlayOverlay.displayName = 'Overlay.Overlay';
 // --------------------------------------------------------------------------------
 const OverlayWrapper = (0, index_js_1.polymorphic)('iui-overlay-wrapper');
 OverlayWrapper.displayName = 'Overlay.Wrapper';
 // --------------------------------------------------------------------------------
 /**
+ * The Overlay component can be used to hide some UI while its content is loading or revalidating,
+ * and display a loading indicator on top of it.
  *
- * This is an Overlay Component.
- *
+ * The hidden content gets blurred and becomes inert so it cannot be interacted with.
  *
  * @example
- * <Overlay content="loading">
- * content beneath the overlay... (text, img, etc.)
+ * <Overlay content="loading…">
+ *   content beneath the overlay… (text, img, etc.)
  * </Overlay>
  *
- *
- * This is an Overlay Component using subcomponents.
- *
- *
  * @example
  * <Overlay.Wrapper>
- *  <Overlay.Overlay>
- *    loading...
- *  <Overlay.Overlay>
- *  <Overlay.HiddenContent>
- *    content beneath the overlay... (text, img, etc.)
- *  <Overlay.HiddenContent />
+ *   <Overlay.Overlay>
+ *     loading…
+ *   <Overlay.Overlay>
+ *   <Overlay.HiddenContent>
+ *     content beneath the overlay… (text, img, etc.)
+ *   <Overlay.HiddenContent />
  * </Overlay.Wrapper>
- *
- *
  */
 exports.Overlay = Object.assign(OverlayComponent, {
-  /**
-   *
-   * The main component is a wrapper to hold the
-   * Overlay HiddenContent and Overlay Message.
-   */
-  Wrapper: OverlayWrapper,
-  /**
-   * HiddenContent houses page elements that are blurred by the
-   * Overlay.
-   */
-  HiddenContent: OverlayHiddenContent,
-  /**
-   *  Message contains the progress indicator and loading message
-   *  for the Overlay. It sits on top of the HiddenContent.
-   */
-  Overlay: OverlayMessage,
+    /**
+     * The main component is a wrapper to hold the
+     * `Overlay.HiddenContent` and `Overlay.Overlay`.
+     */
+    Wrapper: OverlayWrapper,
+    /**
+     * `Overlay.HiddenContent` houses page elements that are blurred by the
+     * Overlay. These elements will become inert when the overlay is active.
+     */
+    HiddenContent: OverlayHiddenContent,
+    /**
+     * `Overlay.Overlay` sits on top of the HiddenContent, and can show
+     * any arbitrary content like a progress indicator and loading message.
+     */
+    Overlay: OverlayOverlay,
 });
 const useInertPolyfill = () => {
-  const loaded = react_1.default.useRef(false);
-  const modulePath =
-    'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
-  react_1.default.useEffect(() => {
-    async () => {
-      if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
-        await (0, index_js_1.dynamicImport)(modulePath);
-        loaded.current = true;
-      }
-    };
-  }, []);
+    const loaded = react_1.default.useRef(false);
+    const modulePath = 'https://cdn.jsdelivr.net/npm/wicg-inert@3.1.2/dist/inert.min.js';
+    react_1.default.useEffect(() => {
+        (async () => {
+            if (!HTMLElement.prototype.hasOwnProperty('inert') && !loaded.current) {
+                await (0, index_js_1.dynamicImport)(modulePath);
+                loaded.current = true;
+            }
+        })();
+    }, []);
 };

package/cjs/core/Popover/Popover.js

@@ -1,98 +1,74 @@
-'use strict';
+"use strict";
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-Object.defineProperty(exports, '__esModule', { value: true });
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Popover = exports.usePopover = void 0;
-const tslib_1 = require('tslib');
-const React = tslib_1.__importStar(require('react'));
-const classnames_1 = tslib_1.__importDefault(require('classnames'));
-const react_1 = require('@floating-ui/react');
-const index_js_1 = require('../utils/index.js');
-const Portal_js_1 = require('../utils/components/Portal.js');
-const ThemeProvider_js_1 = require('../ThemeProvider/ThemeProvider.js');
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("@floating-ui/react");
+const index_js_1 = require("../utils/index.js");
+const Portal_js_1 = require("../utils/components/Portal.js");
+const ThemeProvider_js_1 = require("../ThemeProvider/ThemeProvider.js");
 // ----------------------------------------------------------------------------
 const usePopover = (options) => {
-  const {
-    placement = 'bottom-start',
-    visible,
-    onVisibleChange,
-    closeOnOutsideClick,
-    autoUpdateOptions,
-    middleware = { flip: true, shift: true },
-    matchWidth,
-    trigger = { click: true, hover: false, focus: false },
-    role,
-  } = options;
-  const [open, onOpenChange] = (0, index_js_1.useControlledState)(
-    false,
-    visible,
-    onVisibleChange,
-  );
-  const floating = (0, react_1.useFloating)({
-    placement,
-    open,
-    onOpenChange,
-    whileElementsMounted: (...args) =>
-      (0, react_1.autoUpdate)(...args, autoUpdateOptions),
-    middleware: [
-      middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
-      middleware.flip && (0, react_1.flip)(),
-      middleware.shift && (0, react_1.shift)(),
-      matchWidth &&
-        (0, react_1.size)({
-          apply: ({ rects }) => {
-            setReferenceWidth(rects.reference.width);
-          },
+    const { placement = 'bottom-start', visible, onVisibleChange, closeOnOutsideClick, autoUpdateOptions, middleware = { flip: true, shift: true }, matchWidth, trigger = { click: true, hover: false, focus: false }, role, } = options;
+    const [open, onOpenChange] = (0, index_js_1.useControlledState)(false, visible, onVisibleChange);
+    const floating = (0, react_1.useFloating)({
+        placement,
+        open,
+        onOpenChange,
+        whileElementsMounted: (...args) => (0, react_1.autoUpdate)(...args, autoUpdateOptions),
+        middleware: [
+            middleware.offset !== undefined && (0, react_1.offset)(middleware.offset),
+            middleware.flip && (0, react_1.flip)(),
+            middleware.shift && (0, react_1.shift)(),
+            matchWidth &&
+                (0, react_1.size)({
+                    apply: ({ rects }) => {
+                        setReferenceWidth(rects.reference.width);
+                    },
+                }),
+            middleware.autoPlacement && (0, react_1.autoPlacement)(),
+            middleware.inline && (0, react_1.inline)(),
+            middleware.hide && (0, react_1.hide)(),
+        ].filter(Boolean),
+    });
+    const interactions = (0, react_1.useInteractions)([
+        (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
+        (0, react_1.useDismiss)(floating.context, { outsidePress: closeOnOutsideClick }),
+        (0, react_1.useHover)(floating.context, {
+            enabled: !!trigger.hover,
+            delay: 100,
+            handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
         }),
-      middleware.autoPlacement && (0, react_1.autoPlacement)(),
-      middleware.inline && (0, react_1.inline)(),
-      middleware.hide && (0, react_1.hide)(),
-    ].filter(Boolean),
-  });
-  const interactions = (0, react_1.useInteractions)([
-    (0, react_1.useClick)(floating.context, { enabled: !!trigger.click }),
-    (0, react_1.useDismiss)(floating.context, {
-      outsidePress: closeOnOutsideClick,
-    }),
-    (0, react_1.useHover)(floating.context, {
-      enabled: !!trigger.hover,
-      delay: 100,
-      handleClose: (0, react_1.safePolygon)({ buffer: 1 }),
-    }),
-    (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
-    (0, react_1.useRole)(floating.context, { role: 'dialog', enabled: !!role }),
-  ]);
-  const [referenceWidth, setReferenceWidth] = React.useState();
-  const getFloatingProps = React.useCallback(
-    (userProps) =>
-      interactions.getFloatingProps({
+        (0, react_1.useFocus)(floating.context, { enabled: !!trigger.focus }),
+        (0, react_1.useRole)(floating.context, { role: 'dialog', enabled: !!role }),
+    ]);
+    const [referenceWidth, setReferenceWidth] = React.useState();
+    const getFloatingProps = React.useCallback((userProps) => interactions.getFloatingProps({
         ...userProps,
         style: {
-          ...floating.floatingStyles,
-          zIndex: 9999,
-          ...(matchWidth && referenceWidth
-            ? {
-                minInlineSize: `${referenceWidth}px`,
-                maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
-              }
-            : {}),
-          ...userProps?.style,
+            ...floating.floatingStyles,
+            zIndex: 9999,
+            ...(matchWidth && referenceWidth
+                ? {
+                    minInlineSize: `${referenceWidth}px`,
+                    maxInlineSize: `min(${referenceWidth * 2}px, 90vw)`,
+                }
+                : {}),
+            ...userProps?.style,
         },
-      }),
-    [floating.floatingStyles, interactions, matchWidth, referenceWidth],
-  );
-  return React.useMemo(
-    () => ({
-      open,
-      onOpenChange,
-      ...interactions,
-      getFloatingProps,
-      ...floating,
-    }),
-    [open, onOpenChange, interactions, getFloatingProps, floating],
-  );
+    }), [floating.floatingStyles, interactions, matchWidth, referenceWidth]);
+    return React.useMemo(() => ({
+        open,
+        onOpenChange,
+        ...interactions,
+        getFloatingProps,
+        ...floating,
+    }), [open, onOpenChange, interactions, getFloatingProps, floating]);
 };
 exports.usePopover = usePopover;
 /**
@@ -107,82 +83,36 @@ exports.usePopover = usePopover;
  * </Popover>
  */
 exports.Popover = React.forwardRef((props, forwardedRef) => {
-  const {
-    portal = true,
+    const { portal = true, 
     //
     // popover options
-    visible,
-    placement = 'bottom-start',
-    onVisibleChange,
-    closeOnOutsideClick = true,
+    visible, placement = 'bottom-start', onVisibleChange, closeOnOutsideClick = true, 
     //
     // dom props
-    className,
-    children,
-    content,
-    applyBackground = false,
-    ...rest
-  } = props;
-  const popover = (0, exports.usePopover)({
-    visible,
-    placement,
-    onVisibleChange,
-    closeOnOutsideClick,
-    role: 'dialog',
-  });
-  const [popoverElement, setPopoverElement] = React.useState();
-  const popoverRef = (0, index_js_1.useMergedRefs)(
-    popover.refs.setFloating,
-    forwardedRef,
-    setPopoverElement,
-  );
-  const triggerId = `${(0, index_js_1.useId)()}-trigger`;
-  const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
-  return React.createElement(
-    React.Fragment,
-    null,
-    (0, index_js_1.cloneElementWithRef)(children, (children) => ({
-      id: children.props.id || triggerId,
-      ...popover.getReferenceProps(children.props),
-      ref: popover.refs.setReference,
-    })),
-    popover.open
-      ? React.createElement(
-          Portal_js_1.Portal,
-          { portal: portal },
-          React.createElement(
-            react_1.FloatingPortal,
-            null,
-            React.createElement(
-              ThemeProvider_js_1.ThemeProvider,
-              { portalContainer: popoverElement },
-              React.createElement(
-                react_1.FloatingFocusManager,
-                {
-                  context: popover.context,
-                  modal: false,
-                  initialFocus: popover.refs.floating,
-                },
-                React.createElement(
-                  index_js_1.Box,
-                  {
-                    className: (0, classnames_1.default)(
-                      { 'iui-popover-surface': applyBackground },
-                      className,
-                    ),
-                    'aria-labelledby': !hasAriaLabel
-                      ? popover.refs.domReference.current?.id
-                      : undefined,
-                    ...popover.getFloatingProps(rest),
-                    ref: popoverRef,
-                  },
-                  content,
-                ),
-              ),
-            ),
-          ),
-        )
-      : null,
-  );
+    className, children, content, applyBackground = false, ...rest } = props;
+    const popover = (0, exports.usePopover)({
+        visible,
+        placement,
+        onVisibleChange,
+        closeOnOutsideClick,
+        role: 'dialog',
+    });
+    const [popoverElement, setPopoverElement] = React.useState();
+    const popoverRef = (0, index_js_1.useMergedRefs)(popover.refs.setFloating, forwardedRef, setPopoverElement);
+    const triggerId = `${(0, index_js_1.useId)()}-trigger`;
+    const hasAriaLabel = !!props['aria-labelledby'] || !!props['aria-label'];
+    return (React.createElement(React.Fragment, null,
+        (0, index_js_1.cloneElementWithRef)(children, (children) => ({
+            id: children.props.id || triggerId,
+            ...popover.getReferenceProps(children.props),
+            ref: popover.refs.setReference,
+        })),
+        popover.open ? (React.createElement(Portal_js_1.Portal, { portal: portal },
+            React.createElement(react_1.FloatingPortal, null,
+                React.createElement(ThemeProvider_js_1.ThemeProvider, { portalContainer: popoverElement },
+                    React.createElement(react_1.FloatingFocusManager, { context: popover.context, modal: false, initialFocus: popover.refs.floating },
+                        React.createElement(index_js_1.Box, { className: (0, classnames_1.default)({ 'iui-popover-surface': applyBackground }, className), "aria-labelledby": !hasAriaLabel
+                                ? popover.refs.domReference.current?.id
+                                : undefined, ...popover.getFloatingProps(rest), ref: popoverRef }, content)))))) : null));
 });
 exports.default = exports.Popover;

package/cjs/core/ProgressIndicators/ProgressLinear.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressLinear = void 0;
-const tslib_1 = require('tslib');
+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 classnames_1 = tslib_1.__importDefault(require('classnames'));
-const index_js_1 = require('../utils/index.js');
+const React = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Shows progress on a linear bar
  * @example
@@ -25,48 +25,10 @@ const index_js_1 = require('../utils/index.js');
  * <ProgressLinear status='negative' />
  */
 exports.ProgressLinear = React.forwardRef((props, forwardedRef) => {
-  const {
-    value,
-    indeterminate = value === undefined,
-    labels = [],
-    isAnimated = false,
-    status,
-    className,
-    labelGroupProps,
-    ...rest
-  } = props;
-  const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-progress-indicator-linear',
-        className,
-      ),
-      ref: forwardedRef,
-      'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-      'data-iui-animated': isAnimated ? 'true' : undefined,
-      style: {
-        '--iui-progress-percentage': `${boundedValue}%`,
-      },
-      ...rest,
-    },
-    labels.length > 0 &&
-      React.createElement(
-        index_js_1.Box,
-        {
-          as: 'div',
-          ...labelGroupProps,
-          className: (0, classnames_1.default)(
-            'iui-progress-indicator-linear-label',
-            labelGroupProps?.className,
-          ),
-        },
-        labels.map((label, index) =>
-          React.createElement('span', { key: index }, label),
-        ),
-      ),
-  );
+    const { value, indeterminate = value === undefined, labels = [], isAnimated = false, status, className, labelGroupProps, ...rest } = props;
+    const boundedValue = (0, index_js_1.getBoundedValue)(value ?? 100, 0, 100);
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-linear', className), ref: forwardedRef, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, "data-iui-animated": isAnimated ? 'true' : undefined, style: {
+            '--iui-progress-percentage': `${boundedValue}%`,
+        }, ...rest }, labels.length > 0 && (React.createElement(index_js_1.Box, { as: 'div', ...labelGroupProps, className: (0, classnames_1.default)('iui-progress-indicator-linear-label', labelGroupProps?.className) }, labels.map((label, index) => (React.createElement("span", { key: index }, label)))))));
 });
 exports.default = exports.ProgressLinear;

package/cjs/core/ProgressIndicators/ProgressRadial.js

@@ -1,14 +1,14 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProgressRadial = void 0;
-const tslib_1 = require('tslib');
+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 classnames_1 = tslib_1.__importDefault(require('classnames'));
-const React = tslib_1.__importStar(require('react'));
-const index_js_1 = require('../utils/index.js');
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const React = tslib_1.__importStar(require("react"));
+const index_js_1 = require("../utils/index.js");
 /**
  * Circular Progress Indicator
  * @example
@@ -25,50 +25,18 @@ const index_js_1 = require('../utils/index.js');
  * <ProgressRadial size={'small'} indeterminate/>
  */
 exports.ProgressRadial = React.forwardRef((props, forwardedRef) => {
-  const {
-    value,
-    indeterminate = value === undefined,
-    status,
-    size,
-    className,
-    style,
-    children,
-    ...rest
-  } = props;
-  const statusMap = {
-    negative: React.createElement(index_js_1.SvgImportantSmall, {
-      'aria-hidden': true,
-    }),
-    positive: React.createElement(index_js_1.SvgCheckmarkSmall, {
-      'aria-hidden': true,
-    }),
-  };
-  return React.createElement(
-    index_js_1.Box,
-    {
-      className: (0, classnames_1.default)(
-        'iui-progress-indicator-radial',
-        className,
-      ),
-      'data-iui-size': size,
-      'data-iui-status': status,
-      'data-iui-indeterminate': indeterminate ? 'true' : undefined,
-      ref: forwardedRef,
-      style: {
-        ...(value !== undefined && {
-          '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(
-            value,
-            0,
-            100,
-          )}%`,
-        }),
-        ...style,
-      },
-      ...rest,
-    },
-    size !== 'x-small'
-      ? children ?? (!!status ? statusMap[status] : null)
-      : null,
-  );
+    const { value, indeterminate = value === undefined, status, size, className, style, children, ...rest } = props;
+    const statusMap = {
+        negative: React.createElement(index_js_1.SvgImportantSmall, { "aria-hidden": true }),
+        positive: React.createElement(index_js_1.SvgCheckmarkSmall, { "aria-hidden": true }),
+    };
+    return (React.createElement(index_js_1.Box, { className: (0, classnames_1.default)('iui-progress-indicator-radial', className), "data-iui-size": size, "data-iui-status": status, "data-iui-indeterminate": indeterminate ? 'true' : undefined, ref: forwardedRef, style: {
+            ...(value !== undefined && {
+                '--iui-progress-percentage': `${(0, index_js_1.getBoundedValue)(value, 0, 100)}%`,
+            }),
+            ...style,
+        }, ...rest }, size !== 'x-small'
+        ? children ?? (!!status ? statusMap[status] : null)
+        : null));
 });
 exports.default = exports.ProgressRadial;