@itwin/itwinui-react 3.0.0-dev.3 → 3.0.0-dev.4

package/esm/core/Tooltip/Tooltip.d.ts

@@ -1,6 +1,49 @@
 import * as React from 'react';
-import type { CommonProps, PopoverProps } from '../utils/index.js';
-export declare type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+import type { PolymorphicForwardRefComponent } from '../utils/index.js';
+declare type TooltipOptions = {
+    /**
+     * Placement of the Tooltip
+     * @default 'top'
+     */
+    placement?: Placement;
+    /**
+     * Property for manual visibility control
+     */
+    visible?: boolean;
+    /**
+     * autoUpdate options that recalculates position
+     * to ensure the floating element remains anchored
+     * to its reference element, such as when scrolling
+     * and resizing the screen
+     *
+     * https://floating-ui.com/docs/autoUpdate#options
+     */
+    autoUpdateOptions?: {
+        ancestorScroll?: boolean;
+        ancestorResize?: boolean;
+        elementResize?: boolean;
+        /**
+         * Use this if you want Tooltip to follow moving trigger element
+         */
+        animationFrame?: boolean;
+        layoutShift?: boolean;
+    };
+    /**
+     * Tooltip middleware options.
+     * https://floating-ui.com/docs/offset
+     */
+    middleware?: {
+        offset?: number;
+        flip?: boolean;
+        shift?: boolean;
+        size?: boolean;
+        autoPlacement?: boolean;
+        hide?: boolean;
+        inline?: boolean;
+    };
+};
+declare type TooltipOwnProps = {
     /**
      * Content of the tooltip.
      */
@@ -9,18 +52,35 @@ export declare type TooltipProps = {
      * Element to have tooltip on. Has to be a valid JSX element and needs to forward its ref.
      * If not specified, the `reference` prop should be used instead.
      */
-    children?: JSX.Element;
-} & Omit<PopoverProps, 'className'> & Omit<CommonProps, 'title'>;
+    children?: React.ReactNode;
+    /**
+     * Element to portal tooltip to.
+     * Portals to ThemeProvider portalContainerRef by default.
+     * @default true;
+     */
+    portal?: boolean | {
+        to: HTMLElement;
+    };
+    /**
+     * Sets reference point to user provided element.
+     * @example
+     * const buttonRef = React.useRef();
+     * ...
+     * <Button ref={buttonRef} />
+     * <Tooltip content='tooltip text' reference={buttonRef} />
+     */
+    reference?: React.RefObject<HTMLElement>;
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const Tooltip: PolymorphicForwardRefComponent<"div", TooltipOwnProps & TooltipOptions>;
 export default Tooltip;

package/esm/core/Tooltip/Tooltip.js

@@ -4,20 +4,110 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import cx from 'classnames';
-import { Popover, Box } from '../utils/index.js';
+import { useFloating, autoUpdate, offset, flip, shift, useClick, useHover, useFocus, useDismiss, useRole, useInteractions, safePolygon, size, autoPlacement, hide, inline, } from '@floating-ui/react';
+import { Box, getDocument, mergeRefs, useGlobals, useMergedRefs, } from '../utils/index.js';
+import ReactDOM from 'react-dom';
+const useTooltip = (options = {}) => {
+    const { placement, visible: controlledOpen, middleware = {
+        flip: true,
+        shift: true,
+    }, autoUpdateOptions = {}, } = options;
+    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+    const open = controlledOpen ?? uncontrolledOpen;
+    const data = useFloating({
+        placement,
+        open,
+        onOpenChange: setUncontrolledOpen,
+        whileElementsMounted: (referenceEl, floatingEl, update) => autoUpdate(referenceEl, floatingEl, update, {
+            animationFrame: autoUpdateOptions.animationFrame,
+            ancestorScroll: autoUpdateOptions.ancestorScroll,
+            ancestorResize: autoUpdateOptions.ancestorResize,
+            elementResize: autoUpdateOptions.elementResize,
+            layoutShift: autoUpdateOptions.layoutShift,
+        }),
+        middleware: [
+            middleware.offset !== undefined ? offset(middleware.offset) : offset(4),
+            middleware.flip && flip(),
+            middleware.shift && shift(),
+            middleware.size && size(),
+            middleware.autoPlacement && autoPlacement(),
+            middleware.inline && inline(),
+            middleware.hide && hide(),
+        ].filter(Boolean),
+    });
+    const context = data.context;
+    const hover = useHover(context, {
+        enabled: controlledOpen == null,
+        delay: {
+            open: 50,
+            close: 250,
+        },
+        handleClose: safePolygon({ buffer: -Infinity }),
+    });
+    const focus = useFocus(context, {
+        enabled: controlledOpen == null,
+    });
+    const click = useClick(context, {
+        enabled: controlledOpen == null,
+    });
+    const dismiss = useDismiss(context, {
+        enabled: controlledOpen == null,
+    });
+    const role = useRole(context, { role: 'tooltip' });
+    const interactions = useInteractions([click, hover, focus, dismiss, role]);
+    return React.useMemo(() => ({
+        open,
+        setUncontrolledOpen,
+        ...interactions,
+        ...data,
+    }), [open, interactions, data]);
+};
 /**
  * Basic tooltip component to display informative content when an element is hovered or focused.
- * Uses the {@link Popover} component, which is a wrapper around [tippy.js](https://atomiks.github.io/tippyjs).
+ * Uses [FloatingUI](https://floating-ui.com/).
  * @example
- * <Tooltip content='tooltip text' placement='top'><div>Hover here</div></Tooltip>
+ * <Tooltip content='tooltip text' placement='top'>Hover here</Tooltip>
  * @example
  * const buttonRef = React.useRef();
  * ...
  * <Button ref={buttonRef} />
  * <Tooltip content='tooltip text' reference={buttonRef} />
  */
-export const Tooltip = (props) => {
-    const { content, children, className, style, visible, ref, id, ...rest } = props;
-    return (React.createElement(Popover, { visible: visible, interactive: false, content: React.createElement(Box, { className: cx('iui-tooltip', className), style: style, role: 'tooltip', id: id }, content), offset: [0, 4], ref: ref, ...rest }, children && React.cloneElement(children, { title: undefined })));
-};
+export const Tooltip = React.forwardRef((props, forwardRef) => {
+    const { content, children, portal = true, placement = 'top', autoUpdateOptions, middleware, style, className, visible, reference, ...rest } = props;
+    const tooltip = useTooltip({
+        placement,
+        visible,
+        autoUpdateOptions,
+        middleware,
+    });
+    const context = useGlobals();
+    React.useEffect(() => {
+        if (reference) {
+            tooltip.refs.setReference(reference.current);
+        }
+    }, [reference, tooltip.refs]);
+    const portalTo = typeof portal !== 'boolean'
+        ? portal.to
+        : portal
+            ? context?.portalContainerRef?.current ?? getDocument()?.body
+            : null;
+    const contentBox = (React.createElement(Box, { className: cx('iui-tooltip', className), ref: useMergedRefs(tooltip.refs.setFloating, forwardRef), style: { ...tooltip.floatingStyles, ...style }, ...tooltip.getFloatingProps(), ...rest }, content));
+    const childrenRef = React.isValidElement(children) &&
+        mergeRefs(tooltip.refs.setReference, 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children.ref);
+    return (React.createElement(React.Fragment, null,
+        React.isValidElement(children)
+            ? React.cloneElement(children, tooltip.getReferenceProps({
+                ref: childrenRef,
+                ...children.props,
+            }))
+            : null,
+        tooltip.open
+            ? portalTo
+                ? ReactDOM.createPortal(contentBox, portalTo)
+                : contentBox
+            : null));
+});
 export default Tooltip;

package/esm/core/index.d.ts

@@ -1,6 +1,6 @@
 export { Alert } from './Alert/index.js';
-export { Avatar, UserIcon } from './Avatar/index.js';
-export { AvatarGroup, UserIconGroup } from './AvatarGroup/index.js';
+export { Avatar } from './Avatar/index.js';
+export { AvatarGroup } from './AvatarGroup/index.js';
 export { Backdrop } from './Backdrop/index.js';
 export { Badge } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
@@ -23,7 +23,7 @@ export type { FooterElement, TitleTranslations } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
 export { TransferList } from './TransferList/index.js';
-export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
+export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
 export { Label } from './Label/index.js';
@@ -59,7 +59,7 @@ export { Tooltip } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
 export type { NodeData, NodeRenderProps } from './Tree/index.js';
 export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
-export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
-export type { StepProperties, WizardType, WizardLocalization, StepperLocalization, } from './Stepper/index.js';
+export { Stepper, WorkflowDiagram } from './Stepper/index.js';
+export type { StepProperties, StepperLocalization } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
 export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';

package/esm/core/index.js

@@ -3,8 +3,8 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { Alert } from './Alert/index.js';
-export { Avatar, UserIcon } from './Avatar/index.js';
-export { AvatarGroup, UserIconGroup } from './AvatarGroup/index.js';
+export { Avatar } from './Avatar/index.js';
+export { AvatarGroup } from './AvatarGroup/index.js';
 export { Backdrop } from './Backdrop/index.js';
 export { Badge } from './Badge/index.js';
 export { Breadcrumbs } from './Breadcrumbs/index.js';
@@ -25,7 +25,7 @@ export { Footer, defaultFooterElements } from './Footer/index.js';
 export { Header, HeaderBreadcrumbs, HeaderButton, HeaderLogo, } from './Header/index.js';
 export { List, ListItem } from './List/index.js';
 export { TransferList } from './TransferList/index.js';
-export { VerticalTabs, Tabs, Tab, HorizontalTabs } from './Tabs/index.js';
+export { Tabs, Tab } from './Tabs/index.js';
 export { InformationPanel, InformationPanelWrapper, InformationPanelHeader, InformationPanelBody, InformationPanelContent, } from './InformationPanel/index.js';
 export { Input } from './Input/index.js';
 export { Label } from './Label/index.js';
@@ -56,6 +56,6 @@ export { ToggleSwitch } from './ToggleSwitch/index.js';
 export { Tooltip } from './Tooltip/index.js';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree/index.js';
 export { Anchor, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography/index.js';
-export { Wizard, Stepper, WorkflowDiagram } from './Stepper/index.js';
+export { Stepper, WorkflowDiagram } from './Stepper/index.js';
 export { SearchBox } from './SearchBox/index.js';
 export { getUserColor, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, VisuallyHidden, Divider, } from './utils/index.js';

package/esm/styles.js

@@ -243,11 +243,7 @@ const styles = {
   "iui-indeterminate": "_iui3-indeterminate",
   "iui-progress-indicator-linear-animate-indeterminate": "_iui3-progress-indicator-linear-animate-indeterminate",
   "iui-progress-indicator-radial": "_iui3-progress-indicator-radial",
-  "iui-radial": "_iui3-radial",
-  "iui-inner-content": "_iui3-inner-content",
-  "iui-x-small": "_iui3-x-small",
   "rotate-indeterminate": "_iui3-rotate-indeterminate",
-  "dash-indeterminate": "_iui3-dash-indeterminate",
   "iui-progress-indicator-overlay": "_iui3-progress-indicator-overlay",
   "iui-overlay-exiting": "_iui3-overlay-exiting",
   closeAnimation,
@@ -376,9 +372,9 @@ const styles = {
   "iui-tile": "_iui3-tile",
   "iui-folder": "_iui3-folder",
   "iui-tile-thumbnail": "_iui3-tile-thumbnail",
+  "iui-tile-name": "_iui3-tile-name",
   "iui-tile-more-options": "_iui3-tile-more-options",
   "iui-tile-metadata": "_iui3-tile-metadata",
-  "iui-tile-name": "_iui3-tile-name",
   "iui-tile-description": "_iui3-tile-description",
   "iui-thumbnail-icon": "_iui3-thumbnail-icon",
   "iui-tile-thumbnail-picture": "_iui3-tile-thumbnail-picture",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.0.0-dev.3",
+  "version": "3.0.0-dev.4",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -75,6 +75,7 @@
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/react-table": "^7.0.18",
+    "@floating-ui/react": "^0.24.3",
     "classnames": "^2.2.6",
     "react-table": "^7.1.0",
     "react-transition-group": "^4.4.2",
@@ -82,8 +83,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@itwin/itwinui-css": "^2.0.0-dev.3",
-    "@itwin/itwinui-variables": "2.1.0-dev.0",
+    "@itwin/itwinui-css": "^2.0.0-dev.4",
+    "@itwin/itwinui-variables": "3.0.0-dev.1",
     "@swc/cli": "^0.1.57",
     "@swc/core": "^1.3.21",
     "@testing-library/jest-dom": "^5.16.4",

package/styles.css

@@ -2,7 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-:where(._iui3-root) {
+:where([data-iui-theme]) {
+  color-scheme: light dark;
   --iui-size-3xs: 0.125rem;
   --iui-size-2xs: 0.25rem;
   --iui-size-xs: 0.5rem;
@@ -53,8 +54,8 @@
   --iui-color-background-oak: #ceb5a1;
   --iui-color-white: white;
 }
-:where(._iui3-root,
-._iui3-root[data-iui-theme=light]) {
+:where([data-iui-theme=light]) {
+  color-scheme: light;
   --iui-opacity-1: 1;
   --iui-opacity-2: 0.8;
   --iui-opacity-3: 0.6;
@@ -125,8 +126,7 @@
   --iui-color-warning-hsl: 33deg 90% 33%;
   --iui-color-negative-hsl: 0deg 98% 60%;
 }
-:where(._iui3-root,
-._iui3-root[data-iui-theme=light]):where([data-iui-contrast=high]) {
+:where([data-iui-theme=light]):where([data-iui-contrast=high]) {
   --iui-opacity-1: 1;
   --iui-opacity-2: 0.8;
   --iui-opacity-3: 0.6;
@@ -197,7 +197,8 @@
   --iui-color-warning-hsl: 33deg 91% 24%;
   --iui-color-negative-hsl: 0deg 92% 39%;
 }
-:where(._iui3-root[data-iui-theme=dark]) {
+:where([data-iui-theme=dark]) {
+  color-scheme: dark;
   --iui-opacity-1: 1;
   --iui-opacity-2: 0.85;
   --iui-opacity-3: 0.65;
@@ -268,7 +269,7 @@
   --iui-color-warning-hsl: 27deg 89% 65%;
   --iui-color-negative-hsl: 0deg 87% 78%;
 }
-:where(._iui3-root[data-iui-theme=dark]):where([data-iui-contrast=high]) {
+:where([data-iui-theme=dark]):where([data-iui-contrast=high]) {
   --iui-opacity-1: 1;
   --iui-opacity-2: 0.85;
   --iui-opacity-3: 0.65;
@@ -353,6 +354,7 @@
 :where(._iui3-root,._iui3-root *)::-webkit-scrollbar-thumb:hover{background-color:hsl(var(--iui-color-foreground-hsl)/var(--iui-opacity-3))}
 :where(._iui3-root,._iui3-root *)::-webkit-scrollbar-track,:where(._iui3-root,._iui3-root *)::-webkit-scrollbar-corner{background-color:#0000}
 :where(._iui3-root,._iui3-root *),:where(._iui3-root,._iui3-root *):before,:where(._iui3-root,._iui3-root *):after{box-sizing:border-box}
+:where(._iui3-root,._iui3-root *):where(:focus-visible){outline:2px solid var(--iui-color-border-accent)}
 ._iui3-alert{vertical-align:baseline;--_iui-alert-border-color:var(--iui-color-border);border-radius:var(--iui-border-radius-1);color:var(--iui-color-text);background-color:var(--iui-color-background);border:none;border:1px solid var(--_iui-alert-border-color);box-shadow:inset var(--iui-size-2xs)0 0 var(--_iui-alert-border-color);padding:0;align-items:center;margin:0;padding-inline-start:var(--iui-size-m);padding-inline-end:var(--iui-size-xs);display:flex}
 ._iui3-alert:where([data-iui-status=informational]){--_iui-alert-border-color:var(--iui-color-border-informational);--_iui-alert-icon-color:var(--iui-color-icon-informational)}
 ._iui3-alert:where([data-iui-status=informational])::selection,._iui3-alert:where([data-iui-status=informational]) ::selection{background-color:hsl(var(--iui-color-informational-hsl)/var(--iui-opacity-5))}
@@ -753,7 +755,7 @@
 ._iui3-dialog-title-bar-filled:active{cursor:grabbing}
 ._iui3-dialog-content{margin:0 calc(0px - var(--iui-size-m));padding:0 var(--iui-size-m);overflow-y:auto;overflow-y:overlay;flex-grow:2}
 ._iui3-dialog-button-bar{margin-top:var(--iui-size-s);justify-content:flex-end;align-items:center;gap:var(--iui-size-xs);display:flex}
-._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);width:100%;border-radius:var(--iui-border-radius-1);flex-direction:column;display:flex}
+._iui3-expandable-block{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon);--_iui-expandable-block-expander-icon-transform:none;--_iui-expandable-block-border:1px solid var(--_iui-expandable-block-border-color);--_iui-expandable-block-border-color:var(--iui-color-border);--_iui-expandable-block-background-color:var(--iui-color-background);--_iui-expandable-block-content-padding:var(--iui-size-s);--_iui-expandable-block-header-background-color-disabled:var(--iui-color-background-disabled);--_iui-expandable-block-header-background-color-hover:var(--iui-color-background-hover);--_iui-expandable-block-header-focus-offset:-2px;--_iui-expandable-block-header-focus-thickness:2px;--_iui-expandable-block-expander-icon-size:var(--iui-size-m);--_iui-expandable-block-header-gap:var(--iui-size-s);--_iui-expandable-block-header-padding:var(--iui-size-s);width:100%;border-radius:var(--iui-border-radius-1);flex-direction:column;display:flex}
 ._iui3-expandable-block:where(._iui3-expanded){--_iui-expandable-block-header-bottom-border-radius:0}
 ._iui3-expandable-block:where(._iui3-expanded){--_iui-expandable-block-expander-icon-transform:rotate(90deg)}
 ._iui3-expandable-block>._iui3-header{vertical-align:baseline;gap:var(--_iui-expandable-block-header-gap);padding:0;padding:var(--_iui-expandable-block-header-padding);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--iui-color-text);text-align:left;background-color:var(--_iui-expandable-block-background-color);border:none;border:var(--_iui-expandable-block-border);border-radius:inherit;border-bottom-left-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);border-bottom-right-radius:var(--_iui-expandable-block-header-bottom-border-radius,inherit);transition:background-color var(--iui-duration-1)ease-out;align-items:center;margin:0;font-family:inherit;display:flex}
@@ -764,7 +766,7 @@
 @media (forced-colors:active){._iui3-expandable-block>._iui3-header:where(:hover){--_iui-expandable-block-expander-icon-fill:Highlight;--_iui-expandable-block-header-caption-color:Highlight;--_iui-expandable-block-header-label-color:Highlight;border-color:Highlight}}
 ._iui3-expandable-block>._iui3-header[disabled],._iui3-expandable-block>._iui3-header:disabled,._iui3-expandable-block>._iui3-header[aria-disabled=true]{--_iui-expandable-block-expander-icon-fill:var(--iui-color-icon-disabled);--_iui-expandable-block-header-caption-color:var(--iui-color-text-disabled);--_iui-expandable-block-header-label-color:var(--iui-color-text-disabled);cursor:not-allowed;background-color:var(--_iui-expandable-block-header-background-color-disabled);border-color:var(--iui-color-border-disabled)}
 @media (forced-colors:active){._iui3-expandable-block>._iui3-header[disabled],._iui3-expandable-block>._iui3-header:disabled,._iui3-expandable-block>._iui3-header[aria-disabled=true]{--_iui-expandable-block-expander-icon-fill:GrayText;--_iui-expandable-block-header-caption-color:GrayText;--_iui-expandable-block-header-label-color:GrayText;border-color:GrayText}}
-._iui3-expandable-block>._iui3-header>._iui3-icon{width:var(--iui-size-m);height:var(--iui-size-m);width:var(--_iui-expandable-block-expander-icon-size);height:var(--_iui-expandable-block-expander-icon-size);fill:var(--_iui-expandable-block-expander-icon-fill);transform:var(--_iui-expandable-block-expander-icon-transform,none);transition:fill var(--iui-duration-1)ease-out;flex-shrink:0;display:flex}
+._iui3-expandable-block>._iui3-header>._iui3-icon{width:var(--iui-size-m);height:var(--iui-size-m);width:var(--_iui-expandable-block-expander-icon-size);height:var(--_iui-expandable-block-expander-icon-size);fill:var(--_iui-expandable-block-expander-icon-fill);transform:var(--_iui-expandable-block-expander-icon-transform);transition:fill var(--iui-duration-1)ease-out;flex-shrink:0;display:flex}
 @media (prefers-reduced-motion:no-preference){._iui3-expandable-block>._iui3-header>._iui3-icon{transition:fill var(--iui-duration-1)ease-out,transform var(--iui-duration-1)ease-out}}
 ._iui3-expandable-block>._iui3-header>._iui3-status-icon{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}
 ._iui3-expandable-block ._iui3-expandable-content{background-color:var(--_iui-expandable-block-background-color);border-bottom:var(--_iui-expandable-block-border);border-right:var(--_iui-expandable-block-border);border-left:var(--_iui-expandable-block-border);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;overflow:hidden}
@@ -1132,31 +1134,29 @@
 ._iui3-progress-indicator-linear>._iui3-track>._iui3-determinate{transition:width 2s ease-in-out}
 ._iui3-progress-indicator-linear:not(._iui3-negative):not(._iui3-positive)>._iui3-track>._iui3-indeterminate{width:100%;animation:1.5s linear infinite _iui3-progress-indicator-linear-animate-indeterminate}
 @keyframes _iui3-progress-indicator-linear-animate-indeterminate{0%{transform:translate(-60%)scaleX(0)}40%{transform:translate(-40%)scaleX(.4)}to{transform:translate(100%)scaleX(.5)}}
-._iui3-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);width:var(--_iui-progress-indicator-radial-size);height:var(--_iui-progress-indicator-radial-size);display:inline-block;position:relative}
-._iui3-progress-indicator-radial>._iui3-radial{height:100%;width:100%}
-._iui3-progress-indicator-radial>._iui3-radial>circle._iui3-fill{stroke:var(--iui-color-border-accent);fill:none;stroke-width:var(--iui-size-2xs)}
-._iui3-progress-indicator-radial>._iui3-radial>circle._iui3-track{stroke:var(--iui-color-border);fill:none;stroke-width:var(--iui-size-2xs)}
-._iui3-progress-indicator-radial ._iui3-inner-content{width:calc(100% - var(--iui-size-xs));height:calc(100% - var(--iui-size-xs));font-size:var(--iui-font-size-0);-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;left:50%;overflow:hidden;transform:translate(-50%,-50%)}
-._iui3-progress-indicator-radial ._iui3-inner-content svg,._iui3-progress-indicator-radial ._iui3-inner-content img{width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}
-._iui3-progress-indicator-radial ._iui3-inner-content svg:hover,._iui3-progress-indicator-radial ._iui3-inner-content img:hover{fill:var(--iui-color-icon-hover)}
-._iui3-progress-indicator-radial._iui3-positive{color:var(--iui-color-text-positive)}
-._iui3-progress-indicator-radial._iui3-positive svg._iui3-radial circle._iui3-fill,._iui3-progress-indicator-radial._iui3-positive svg._iui3-radial circle._iui3-track{stroke:var(--iui-color-border-positive)}
-._iui3-progress-indicator-radial._iui3-positive ._iui3-inner-content svg{fill:var(--iui-color-icon-positive)}
-._iui3-progress-indicator-radial._iui3-negative{color:var(--iui-color-text-negative)}
-._iui3-progress-indicator-radial._iui3-negative svg._iui3-radial circle._iui3-fill{stroke:var(--iui-color-border-negative)}
-._iui3-progress-indicator-radial._iui3-negative ._iui3-inner-content svg{fill:var(--iui-color-icon-negative)}
-._iui3-progress-indicator-radial._iui3-x-small{--_iui-progress-indicator-radial-size:var(--iui-size-m)}
-._iui3-progress-indicator-radial._iui3-x-small ._iui3-inner-content{display:none}
-._iui3-progress-indicator-radial._iui3-small{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}
-._iui3-progress-indicator-radial._iui3-large{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m))}
-._iui3-progress-indicator-radial._iui3-large ._iui3-inner-content{font-size:var(--iui-font-size-2)}
-._iui3-progress-indicator-radial._iui3-large ._iui3-inner-content svg,._iui3-progress-indicator-radial._iui3-large ._iui3-inner-content img{width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}
-._iui3-progress-indicator-radial._iui3-determinate:not(._iui3-positive) svg._iui3-radial{transform:rotate(-90deg)}
-._iui3-progress-indicator-radial._iui3-determinate:not(._iui3-positive) svg._iui3-radial circle._iui3-fill{stroke-dasharray:88;transition:stroke-dashoffset .5s ease-in-out}
-._iui3-progress-indicator-radial._iui3-indeterminate:not(._iui3-negative):not(._iui3-positive) svg._iui3-radial{animation:2s linear infinite _iui3-rotate-indeterminate}
-._iui3-progress-indicator-radial._iui3-indeterminate:not(._iui3-negative):not(._iui3-positive) svg._iui3-radial circle._iui3-fill{animation:1.5s ease-in-out infinite _iui3-dash-indeterminate}
+._iui3-progress-indicator-radial{--_iui-progress-indicator-radial-size:var(--iui-size-xl);vertical-align:middle;width:var(--_iui-progress-indicator-radial-size);height:var(--_iui-progress-indicator-radial-size);border-radius:var(--iui-border-radius-round);font-size:var(--iui-font-size-0);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex;position:relative}
+._iui3-progress-indicator-radial:before,._iui3-progress-indicator-radial:after{content:"";border:var(--iui-size-2xs)solid transparent;forced-color-adjust:none;border-radius:50%;position:absolute;top:0;bottom:0;left:0;right:0}
+._iui3-progress-indicator-radial:before{border-color:var(--iui-color-border)}
+._iui3-progress-indicator-radial:after{background-color:var(--iui-color-border-accent);-webkit-mask-clip:border-box,content-box;mask-clip:border-box,content-box;-webkit-mask-composite:source-out;mask-composite:subtract}
+@media (forced-colors:active){._iui3-progress-indicator-radial:after{background-color:CanvasText}._iui3-progress-indicator-radial:before,._iui3-progress-indicator-radial:after{border-color:#0000}}
+._iui3-progress-indicator-radial :is(svg,img){width:var(--iui-size-m);height:var(--iui-size-m);fill:var(--iui-color-icon);flex-shrink:0;display:flex}
+._iui3-progress-indicator-radial[data-iui-status=positive]{color:var(--iui-color-text-positive)}
+._iui3-progress-indicator-radial[data-iui-status=positive]:after{background-color:var(--iui-color-border-positive)}
+._iui3-progress-indicator-radial[data-iui-status=positive] :is(svg,img){fill:var(--iui-color-border-positive)}
+._iui3-progress-indicator-radial[data-iui-status=negative]{color:var(--iui-color-text-negative)}
+._iui3-progress-indicator-radial[data-iui-status=negative]:after{background-color:var(--iui-color-border-negative)}
+._iui3-progress-indicator-radial[data-iui-status=negative] :is(svg,img){fill:var(--iui-color-border-negative)}
+._iui3-progress-indicator-radial[data-iui-size=x-small]{--_iui-progress-indicator-radial-size:var(--iui-size-m)}
+._iui3-progress-indicator-radial[data-iui-size=x-small]:before,._iui3-progress-indicator-radial[data-iui-size=x-small]:after{border-width:var(--iui-size-3xs)}
+._iui3-progress-indicator-radial[data-iui-size=x-small]>*{display:none}
+._iui3-progress-indicator-radial[data-iui-size=small]{--_iui-progress-indicator-radial-size:calc(1.5*var(--iui-size-m))}
+._iui3-progress-indicator-radial[data-iui-size=small]:before,._iui3-progress-indicator-radial[data-iui-size=small]:after{border-width:calc(var(--iui-size-3xs)*1.5)}
+._iui3-progress-indicator-radial[data-iui-size=large]{--_iui-progress-indicator-radial-size:calc(3*var(--iui-size-m));font-size:var(--iui-font-size-2)}
+._iui3-progress-indicator-radial[data-iui-size=large]:before,._iui3-progress-indicator-radial[data-iui-size=large]:after{border-width:calc(var(--iui-size-2xs)*1.5)}
+._iui3-progress-indicator-radial[data-iui-size=large] :is(svg,img){width:calc(1.5*var(--iui-size-m));height:calc(1.5*var(--iui-size-m));flex-shrink:0;display:flex}
+._iui3-progress-indicator-radial._iui3-determinate:after{-webkit-mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0);mask-image:conic-gradient(#000 var(--iui-progress-percentage,100%),#0000 var(--iui-progress-percentage,100%)),linear-gradient(#000 0 0)}
+._iui3-progress-indicator-radial._iui3-indeterminate:after{animation:.8s cubic-bezier(.6,.4,.4,.6) infinite _iui3-rotate-indeterminate;-webkit-mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0);mask-image:conic-gradient(#0000,#000),linear-gradient(#000 0 0)}
 @keyframes _iui3-rotate-indeterminate{to{transform:rotate(360deg)}}
-@keyframes _iui3-dash-indeterminate{0%{stroke-dasharray:1 88}50%{stroke-dasharray:88 88;stroke-dashoffset:-22px}to{stroke-dasharray:88 88;stroke-dashoffset:-88px}}
 ._iui3-progress-indicator-overlay{width:100%;height:100%;z-index:10000;background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-2));justify-content:center;align-items:center;display:flex;position:absolute;top:0;left:0}
 @supports (backdrop-filter: blur(5px)){._iui3-progress-indicator-overlay{background-color:Hsl(var(--iui-color-background-hsl)/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}
 ._iui3-progress-indicator-overlay ._iui3-progress-indicator-linear{width:50%;max-width:33vw}
@@ -1385,10 +1385,10 @@
 ._iui3-surface-body[data-iui-padded=true]{scrollbar-gutter:stable both-edges;padding:var(--iui-size-2xs)}
 ._iui3-table{vertical-align:baseline;isolation:isolate;--_iui-table-header-size:calc(var(--iui-size-s)*5);--_iui-table-row-size:calc(var(--iui-size-s)*5 + 2px);border:none;flex-direction:column;margin:0;padding:0;display:flex}
 ._iui3-table ._iui3-table-cell-end-icon,._iui3-table ._iui3-table-cell-start-icon{fill:var(--_iui-table-cell-icon-fill);flex-shrink:0;justify-content:center;align-items:center;display:flex}
-._iui3-table ._iui3-table-cell-end-icon svg:not(._iui3-radial),._iui3-table ._iui3-table-cell-start-icon svg:not(._iui3-radial){width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}
+._iui3-table ._iui3-table-cell-end-icon svg,._iui3-table ._iui3-table-cell-start-icon svg{width:var(--iui-size-m);height:var(--iui-size-m);flex-shrink:0;display:flex}
 ._iui3-table ._iui3-table-cell-start-icon{margin-right:var(--iui-size-xs)}
 ._iui3-table ._iui3-table-cell-end-icon{width:var(--iui-size-l);height:var(--iui-size-l);margin-right:var(--iui-size-s);margin-left:auto}
-._iui3-table ._iui3-table-cell-end-icon :where(svg:not(._iui3-radial)){fill:var(--_iui-table-cell-icon-fill)}
+._iui3-table ._iui3-table-cell-end-icon :where(svg){fill:var(--_iui-table-cell-icon-fill)}
 ._iui3-table[data-iui-size=condensed]{--_iui-table-header-size:calc(var(--iui-size-s)*4);--_iui-table-row-size:calc(var(--iui-size-s)*4 + 2px)}
 ._iui3-table[data-iui-size=extra-condensed]{--_iui-table-header-size:calc(var(--iui-size-s)*3);--_iui-table-row-size:calc(var(--iui-size-s)*3 + 2px)}
 ._iui3-table[data-iui-size=extra-condensed] ._iui3-table-header ._iui3-table-cell{padding-block:calc(var(--iui-size-s)*.25)}
@@ -1446,7 +1446,7 @@
 ._iui3-table-body ._iui3-table-row._iui3-new{font-weight:var(--iui-font-weight-semibold)}
 ._iui3-table-body ._iui3-table-row._iui3-new>._iui3-main-column:before{content:"•";font-size:var(--iui-font-size-4);color:var(--iui-color-icon-positive);position:absolute;left:0}
 ._iui3-table-body ._iui3-table-row._iui3-loading,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true],._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true]{--_iui-table-cell-icon-fill:var(--iui-color-icon-muted);--_iui-table-cell-image-filter:grayscale(100%);color:var(--iui-color-text-disabled)}
-._iui3-table-body ._iui3-table-row._iui3-loading img,._iui3-table-body ._iui3-table-row._iui3-loading svg:not(._iui3-radial),._iui3-table-body ._iui3-table-row._iui3-loading ._iui3-avatar,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] img,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] svg:not(._iui3-radial),._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] ._iui3-avatar,._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] img,._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] svg:not(._iui3-radial),._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] ._iui3-avatar{filter:var(--_iui-table-cell-image-filter)}
+._iui3-table-body ._iui3-table-row._iui3-loading img,._iui3-table-body ._iui3-table-row._iui3-loading svg,._iui3-table-body ._iui3-table-row._iui3-loading ._iui3-avatar,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] img,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] svg,._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true] ._iui3-avatar,._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] img,._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] svg,._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true] ._iui3-avatar{filter:var(--_iui-table-cell-image-filter)}
 ._iui3-table-body ._iui3-table-row._iui3-loading{font-style:italic}
 ._iui3-table-body ._iui3-table-row._iui3-loading,._iui3-table-body ._iui3-table-row._iui3-loading ._iui3-checkbox{cursor:progress}
 ._iui3-table-body ._iui3-table-row ._iui3-table-cell[aria-disabled=true],._iui3-table-body ._iui3-table-row._iui3-table-expanded-content[aria-disabled=true]{cursor:not-allowed}
@@ -1653,6 +1653,7 @@ a._iui3-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent)
 ._iui3-tile:before{content:"";z-index:-1;position:absolute;top:0;bottom:0;left:0;right:0}
 ._iui3-tile:where(:not(._iui3-folder))>:where(._iui3-tile-thumbnail){border-top-left-radius:inherit;border-top-right-radius:inherit}
 ._iui3-tile:where(:not(._iui3-folder))>:where(:last-child){border-bottom-left-radius:inherit;border-bottom-right-radius:inherit}
+._iui3-tile:where(:not(._iui3-folder))>:where(._iui3-tile-name){margin-bottom:calc(var(--iui-size-s)*.5)}
 ._iui3-tile:not(:hover,:focus-within) ._iui3-tile-more-options:where(:not(._iui3-visible)){clip-path:inset(50%)!important;white-space:nowrap!important;height:1px!important;width:1px!important;position:absolute!important;overflow:hidden!important}
 ._iui3-tile:hover ._iui3-tile-metadata:not(:last-child),._iui3-tile:focus-within ._iui3-tile-metadata:not(:last-child){width:calc(100% - var(--iui-size-xl))}
 ._iui3-tile._iui3-new{--_iui-tile-status-icon-fill:var(--iui-color-icon-positive)}
@@ -1674,11 +1675,12 @@ a._iui3-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent)
 ._iui3-tile._iui3-selected{--_iui-tile-status-icon-fill:var(--iui-color-icon-accent);outline:solid 2px var(--iui-color-border-accent);background-color:var(--iui-color-background-accent-muted)}
 ._iui3-tile._iui3-selected:focus-visible{outline:var(--iui-size-2xs)solid var(--iui-color-border-accent);outline-offset:0}
 @supports not selector(*:focus-visible){._iui3-tile._iui3-selected:focus{outline:var(--iui-size-2xs)solid var(--iui-color-border-accent);outline-offset:0}}
-._iui3-tile._iui3-folder{flex-flow:row;display:inline-flex}
+._iui3-tile._iui3-folder{grid-template:"thumbnail name""thumbnail content"1fr/1fr 2fr;display:grid}
 ._iui3-tile._iui3-folder>:where(:first-child){border-top-left-radius:inherit;border-bottom-left-radius:inherit}
 ._iui3-tile._iui3-folder>:where(:last-child){border-top-right-radius:inherit;border-bottom-right-radius:inherit}
-._iui3-tile._iui3-folder ._iui3-tile-thumbnail{height:calc(var(--iui-size-s)*10);border-bottom:none;border-right:1px solid var(--iui-color-border);flex:1;margin:0}
-._iui3-tile._iui3-folder ._iui3-tile-content{padding:var(--iui-size-s);flex:2}
+._iui3-tile._iui3-folder ._iui3-tile-thumbnail{height:calc(var(--iui-size-s)*10);border-bottom:none;border-right:1px solid var(--iui-color-border);flex:1;grid-area:thumbnail;margin:0}
+._iui3-tile._iui3-folder ._iui3-tile-name{margin-top:calc(var(--iui-size-xs));grid-area:name}
+._iui3-tile._iui3-folder ._iui3-tile-content{padding:var(--iui-size-s);grid-area:content;padding-top:0}
 ._iui3-tile._iui3-folder ._iui3-tile-content>*{padding:0}
 ._iui3-tile._iui3-folder ._iui3-tile-description{height:100%;max-height:3em;max-height:2lh;-webkit-line-clamp:2;margin-bottom:0}
 ._iui3-tile._iui3-positive{--_iui-tile-status-icon-fill:var(--iui-color-icon-positive);--_iui-tile-title-text-color:var(--iui-color-text-positive)}
@@ -1728,7 +1730,7 @@ a._iui3-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent)
 ._iui3-tile-thumbnail-picture~._iui3-thumbnail-icon:hover,._iui3-tile-thumbnail-picture~._iui3-thumbnail-icon>svg:hover{fill:rgba(255,255,255,var(--iui-opacity-2))}
 ._iui3-tile-content{padding-bottom:var(--iui-size-s);min-width:0;flex-grow:2;grid-template-rows:auto 1fr auto;display:grid}
 ._iui3-tile-content>*{max-width:100%;margin-bottom:calc(var(--iui-size-s)*.5);padding-inline:var(--iui-size-s);grid-column:1}
-._iui3-tile-name{font-size:var(--iui-font-size-2);-webkit-user-select:all;user-select:all;color:var(--_iui-tile-title-text-color);padding-inline:var(--iui-size-s);margin-bottom:calc(var(--iui-size-s)*.5);flex-shrink:0;align-items:center;display:flex;overflow:hidden}
+._iui3-tile-name{font-size:var(--iui-font-size-2);-webkit-user-select:all;user-select:all;color:var(--_iui-tile-title-text-color);padding-inline:var(--iui-size-s);flex-shrink:0;align-items:center;display:flex}
 ._iui3-tile-name-label,._iui3-tile-name-label>._iui3-link-action{width:100%;z-index:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
 ._iui3-tile-description{margin-bottom:var(--iui-size-s);font-size:var(--iui-font-size-1);height:100%;max-height:4.5em;max-height:3lh;text-overflow:ellipsis;-webkit-line-clamp:3;color:var(--_iui-tile-body-text-color);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}
 ._iui3-tile-metadata{font-size:var(--iui-font-size-0);text-overflow:ellipsis;height:var(--iui-size-l);width:100%;color:var(--_iui-tile-body-text-color);flex-shrink:0;align-items:center;margin-top:auto;margin-bottom:0;display:flex;overflow:hidden}
@@ -1857,7 +1859,7 @@ a._iui3-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent)
 ._iui3-tooltip-container{width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content;position:relative}
 ._iui3-tooltip-container>._iui3-tooltip{visibility:hidden;-webkit-user-select:none;user-select:none;opacity:0;transition:visibility var(--iui-duration-0)linear var(--iui-duration-1),opacity var(--iui-duration-1)ease-out;position:absolute}
 ._iui3-tooltip-container>._iui3-tooltip._iui3-tooltip-visible,._iui3-tooltip-container:hover>._iui3-tooltip{visibility:visible;opacity:1}
-._iui3-tooltip{vertical-align:baseline;text-align:center;border-radius:var(--iui-border-radius-1);font-size:var(--iui-font-size-0);max-width:400px;width:max-content;overflow-wrap:break-word;box-sizing:content-box;padding:0;padding:calc(var(--iui-size-s)*.33)var(--iui-size-xs);z-index:999;box-shadow:var(--iui-shadow-3);pointer-events:none;color:var(--iui-color-white);border:none;border:1px solid rgba(255,255,255,var(--iui-opacity-4));background-color:hsl(0 0% 0%/var(--iui-opacity-2));margin:0;display:block;overflow:hidden}
+._iui3-tooltip{vertical-align:baseline;text-align:center;border-radius:var(--iui-border-radius-1);font-size:var(--iui-font-size-0);max-width:400px;width:max-content;overflow-wrap:break-word;box-sizing:content-box;padding:0;padding:calc(var(--iui-size-s)*.33)var(--iui-size-xs);z-index:999;box-shadow:var(--iui-shadow-3);color:var(--iui-color-white);border:none;border:1px solid rgba(255,255,255,var(--iui-opacity-4));background-color:hsl(0 0% 0%/var(--iui-opacity-2));margin:0;display:block;overflow:hidden}
 @supports (backdrop-filter: blur(5px)){._iui3-tooltip{background-color:hsl(0 0% 0%/var(--iui-opacity-3));-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}
 ._iui3-transfer-list-wrapper{column-gap:var(--iui-size-xs);grid-template-rows:1fr auto;grid-template-columns:1fr auto 1fr;display:grid}
 ._iui3-transfer-list-listbox-label{font-weight:var(--iui-font-weight-semibold);margin-bottom:var(--iui-size-2xs);color:var(--_iui-input-label-color)}
@@ -1893,17 +1895,17 @@ a._iui3-tag-basic:focus-visible{outline:1px solid var(--iui-color-border-accent)
 ._iui3-tree-node._iui3-active{background-color:var(--iui-color-background-accent-muted);outline:thin solid var(--iui-color-border-accent);outline-offset:-1px}
 ._iui3-tree-node._iui3-disabled{cursor:not-allowed;background-color:#0000;outline:none}
 ._iui3-tree-node._iui3-disabled,._iui3-tree-node._iui3-disabled ._iui3-tree-node-content-caption{color:var(--iui-color-text-disabled)}
-._iui3-svg-icon,[data-iui-icon-color]{--_iui-svg-size:1rem;--_iui-svg-fill:var(--iui-color-icon-muted);flex-shrink:0;display:inline-flex}
-._iui3-svg-icon,._iui3-svg-icon svg,[data-iui-icon-color],[data-iui-icon-color] svg{width:var(--_iui-svg-size);height:var(--_iui-svg-size);fill:var(--_iui-svg-fill)}
-[data-iui-icon-size=s]{--_iui-svg-size:.75rem}
-[data-iui-icon-size=m]{--_iui-svg-size:1rem}
-[data-iui-icon-size=l]{--_iui-svg-size:1.5rem}
-[data-iui-icon-size=auto]{--_iui-svg-size:1.14286em}
-[data-iui-icon-color=informational]{--_iui-svg-fill:var(--iui-color-icon-informational)}
-[data-iui-icon-color=positive]{--_iui-svg-fill:var(--iui-color-icon-positive)}
-[data-iui-icon-color=warning]{--_iui-svg-fill:var(--iui-color-icon-warning)}
-[data-iui-icon-color=negative]{--_iui-svg-fill:var(--iui-color-icon-negative)}
-@media (forced-colors:active){._iui3-svg-icon:where(:not([data-iui-icon-color])),[data-iui-icon-color=default]{--_iui-svg-fill:CanvasText}}
+._iui3-svg-icon{flex-shrink:0;display:inline-flex}
+._iui3-svg-icon,._iui3-svg-icon svg{width:var(--iui-svg-size,var(--_iui-svg-size,1rem));height:var(--iui-svg-size,var(--_iui-svg-size,1rem));fill:var(--iui-svg-fill,var(--_iui-svg-fill,var(--iui-color-icon-muted)))}
+._iui3-svg-icon[data-iui-icon-size=s]{--_iui-svg-size:.75rem}
+._iui3-svg-icon[data-iui-icon-size=m]{--_iui-svg-size:1rem}
+._iui3-svg-icon[data-iui-icon-size=l]{--_iui-svg-size:1.5rem}
+._iui3-svg-icon[data-iui-icon-size=auto]{--_iui-svg-size:1.14286em}
+._iui3-svg-icon[data-iui-icon-color=informational]{--_iui-svg-fill:var(--iui-color-icon-informational)}
+._iui3-svg-icon[data-iui-icon-color=positive]{--_iui-svg-fill:var(--iui-color-icon-positive)}
+._iui3-svg-icon[data-iui-icon-color=warning]{--_iui-svg-fill:var(--iui-color-icon-warning)}
+._iui3-svg-icon[data-iui-icon-color=negative]{--_iui-svg-fill:var(--iui-color-icon-negative)}
+@media (forced-colors:active){._iui3-svg-icon:where(:not([data-iui-icon-color]),[data-iui-icon-color=default]){--_iui-svg-fill:CanvasText}}
 ._iui3-notification-marker{--_iui-notification-marker-color:var(--iui-color-icon-informational);position:relative}
 ._iui3-notification-marker:before{content:"";width:var(--iui-size-xs);height:var(--iui-size-xs);background-color:var(--_iui-notification-marker-color);border-radius:100%;position:absolute;top:0;right:0;transform:translate(50%,-50%)}
 @media (prefers-reduced-motion:no-preference){._iui3-notification-marker:before{transition:background-color var(--iui-duration-1)ease-out,border-color var(--iui-duration-1)ease-out}}

package/cjs/core/Stepper/Wizard.d.ts

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import type { StepperProps, StepperLocalization } from './Stepper.js';
-/**
- * @deprecated Since v2:
- *
- * - For `default` | `long`, use `StepperType` with `Stepper` instead
- * - For `workflow`, use `WorkflowDiagram` instead
- */
-export declare type WizardType = 'default' | 'long' | 'workflow';
-/**
- * @deprecated Since v2, use `StepperLocalization` with `Stepper`
- */
-export declare type WizardLocalization = StepperLocalization;
-/**
- * @deprecated Since v2, use `StepperProps` with `Stepper` or `WorkflowDiagramProps` with `WorkflowDiagram`
- */
-export declare type WizardProps = {
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType;
-} & Omit<StepperProps, 'type'>;
-/**
- * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
- *
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export declare const Wizard: React.ForwardRefExoticComponent<{
-    /**
-     *  The type of Wizard to display.
-     *  @default 'default'
-     */
-    type?: WizardType | undefined;
-} & Omit<StepperProps, "type"> & React.RefAttributes<HTMLDivElement>>;
-export default Wizard;