@arc-ui/components 12.0.0-beta.6 → 12.0.0-beta.8

package/dist/_shared/esm/{ProgressStepper-e3e7b392.js → ProgressStepper-72b070a8.js}

@@ -1,62 +1,39 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default from 'react';
 import { c as classNames } from './index-2e73c2e9.js';
-import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
-import { I as Icon } from './Icon-428e8061.js';
+import { V as VisuallyHidden } from './VisuallyHidden-fee374a8.js';
+import { I as Icon } from './Icon-3e813b34.js';
 
 var Error = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { clipPath: "url(#a)" },
         React__default.createElement("path", { d: "m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z", fill: "currentColor" })),
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("defs", null,
         React__default.createElement("clipPath", { id: "a" },
             React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
 
 var Warning = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("path", { d: "M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z", fill: "currentColor", stroke: "currentColor", strokeWidth: ".3" }))); };
 
 var Complete = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
     React__default.createElement("g", { clipPath: "url(#a)" },
         React__default.createElement("path", { d: "m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z", fill: "currentColor" })),
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }),
     React__default.createElement("defs", null,
         React__default.createElement("clipPath", null,
             React__default.createElement("rect", { width: "24", height: "24", rx: "12" }))))); };
 
 var Current = function () { return (React__default.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-    React__default.createElement("rect", { x: "0.666667", y: "0.666667", width: "22.6667", height: "22.6667", rx: "11.3333", stroke: "url(#paint0_linear_1_1050)", strokeWidth: "1.33333" }),
     React__default.createElement("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
     React__default.createElement("defs", null,
         React__default.createElement("linearGradient", { id: "paint0_linear_1_1050", x1: "36.6036", y1: "-4.31391e-07", x2: "-12.6036", y2: "24", gradientUnits: "userSpaceOnUse" },
             React__default.createElement("stop", { stopColor: "#F200F5" }),
             React__default.createElement("stop", { offset: "1", stopColor: "#1EC8E6" }))))); };
 
-var Todo = function () { return (React__default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" },
-    React__default.createElement("rect", { x: ".667", y: ".667", width: "22.667", height: "22.667", rx: "11.333", stroke: "currentColor", strokeWidth: "1.333" }))); };
-
 // export current step as an icon
 var ProgressStepperItem = function (_a) {
-    // TODO: Revise icons missing in BT theme
-    // const statusIcons: Record<
-    //   Exclude<ProgressStatus, "todo">,
-    //   Extract<
-    //     ThemeIconNames,
-    //     | "progressStepperComplete"
-    //     | "progressStepperCurrent"
-    //     | "progressStepperWarning"
-    //     | "progressStepperError"
-    //   >
-    // > = {
-    //   completed: "progressStepperComplete",
-    //   current: "progressStepperCurrent",
-    //   warning: "progressStepperWarning",
-    //   error: "progressStepperError",
-    // };
     var _b;
     var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
     var statusIcons = {
-        todo: Todo,
+        todo: undefined,
         completed: Complete,
         current: Current,
         warning: Warning,
@@ -77,11 +54,10 @@ var ProgressStepperItem = function (_a) {
             _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
             _b)) }, filterDataAttrs(props)),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
-            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default.createElement("div", { style: {
-                    width: size === "small" ? "16px" : "24px",
-                    height: size === "small" ? "16px" : "24px"
-                } })) : (React__default.createElement("span", { className: "arc-ProgressStepperItem-statusIcon" },
-                React__default.createElement(Icon, { size: size === "small" ? 16 : 24, icon: statusIcons[status] }))))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
+                        "arc-ProgressStepperItem-statusIcon--small": size === "small"
+                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon, { icon: statusIcons[status] }))))),
         React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
                 title,

package/dist/_shared/esm/{RadioGroup-0d337240.js → RadioGroup-6e657cee.js}

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
-import { F as FormControl } from './FormControl-e0acdf7a.js';
+import { F as FormControl } from './FormControl-7ff0a178.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { C as Context } from './Surface-c425e5e6.js';
-import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
+import { C as Context } from './Surface-56d329b0.js';
+import { V as VisuallyHidden } from './VisuallyHidden-fee374a8.js';
 
 var RadioContext = createContext({});
 var Provider = RadioContext.Provider;

package/dist/_shared/esm/{Section-c1dc6e37.js → Section-b9caea45.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 

package/dist/_shared/esm/{SiteFooter-7e924fb4.js → SiteFooter-61b4ae63.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
-import { S as SemSizeBreakpointsM } from './index.es-974af4a2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
+import { S as SemSizeBreakpointsM } from './index.es-52a3bcff.js';
 import React__default, { useEffect, Fragment } from 'react';
-import { B as BrandLogo } from './BrandLogo-fb863b5b.js';
+import { B as BrandLogo } from './BrandLogo-3424eb79.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
-import { S as Section } from './Section-c1dc6e37.js';
-import { S as Surface } from './Surface-c425e5e6.js';
+import { S as Section } from './Section-b9caea45.js';
+import { S as Surface } from './Surface-56d329b0.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as ThemeIcon } from './ThemeIcon-810de4bc.js';
 
 /**
  * Use `SiteFooter` to display information at the bottom of a page.

package/dist/_shared/esm/{SiteHeaderV2-94b9a407.js → SiteHeaderV2-1fde7d20.js}

@@ -1,16 +1,17 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-5496ec12.js';
-import { b as SemSizeBreakpointsL } from './index.es-974af4a2.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-4921e8dd.js';
+import { b as SemSizeBreakpointsL } from './index.es-52a3bcff.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useEffect, Fragment, useRef, useState, createContext, useContext } from 'react';
-import { B as BrandLogo } from './BrandLogo-fb863b5b.js';
+import { B as BrandLogo } from './BrandLogo-3424eb79.js';
 import { u as useMediaQuery } from './use-media-query-d3622da8.js';
-import { S as Surface } from './Surface-c425e5e6.js';
-import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-4764708f.js';
+import { S as Surface } from './Surface-56d329b0.js';
+import { B as BtIconChevronRightMid } from './BtIconChevronRightMid.esm-f67f0ca3.js';
 import { C as ConditionalWrapper } from './ConditionalWrapper-b85979de.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
-import { B as ButtonV2 } from './ButtonV2-f9019e00.js';
-import { T as Text } from './Text-96d8a35f.js';
-import { I as Icon } from './Icon-428e8061.js';
+import { B as BtIconChevronLeft2Px, a as BtIconChevronRight2Px } from './BtIconChevronRight2Px.esm-84262845.js';
+import { B as ButtonV2 } from './ButtonV2-4dc8830e.js';
+import { T as Text } from './Text-98ad2e78.js';
+import { I as Icon } from './Icon-3e813b34.js';
 
 var Item = function (_a) {
     var _b;
@@ -67,23 +68,6 @@ var Column = function (_a) {
         React__default.createElement("ul", { className: "arc-SiteHeaderV2Column-items", role: "none" }, children)));
 };
 
-const BtIconChevronLeft2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 var BackButton = function (_a) {
     var setOpen = _a.setOpen, setOpenPanelOnFirstClick = _a.setOpenPanelOnFirstClick;
     return (React__default.createElement("button", { className: "arc-SiteHeaderV2BackButton", onClick: function () {
@@ -245,23 +229,6 @@ var ViewAll = function (_a) {
 };
 Panel.ViewAll = ViewAll;
 
-const BtIconChevronRight2Px = (props) =>
-  /*#__PURE__*/ React__default.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default.createElement("defs", null),
-    /*#__PURE__*/ React__default.createElement("path", {
-      d: "M9.5,29.99854A1.00025,1.00025,0,0,1,8.793,28.291l12.293-12.28467L8.793,3.7085A.99989.99989,0,0,1,10.207,2.29443l13.707,13.71289L10.207,29.70605A.99827.99827,0,0,1,9.5,29.99854Z",
-      fill: "currentColor",
-    }),
-  );
-
 var NavItem = function (_a) {
     var _b, _c, _d, _e, _f;
     var children = _a.children, href = _a.href, isCurrent = _a.isCurrent, onClick = _a.onClick, title = _a.title; _a.viewAllTitle; var isPrimary = _a.isPrimary, opensFirstWithPanel = _a.opensFirstWithPanel, subTitle = _a.subTitle, props = __rest(_a, ["children", "href", "isCurrent", "onClick", "title", "viewAllTitle", "isPrimary", "opensFirstWithPanel", "subTitle"]);

package/dist/_shared/esm/Spinner-9d28043d.js

@@ -0,0 +1,18 @@
+import { a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
+import React__default from 'react';
+import { c as classNames } from './index-2e73c2e9.js';
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color;
+    var props = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        props[_i - 1] = arguments[_i];
+    }
+    return (React__default.createElement("svg", __assign({ className: classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, filterDataAttrs(props)),
+        React__default.createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", "stroke-width": "4", "stroke-linecap": "round" })));
+};
+
+export { Spinner as S };

package/dist/_shared/esm/{Surface-c425e5e6.js → Surface-56d329b0.js}

@@ -1,4 +1,4 @@
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { createContext } from 'react';
 
@@ -126,7 +126,7 @@ var Provider = Context.Provider;
  */
 var Surface = function (_a) {
     var _b;
-    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
     var surface = "light";
     if (background === "dark-black" ||
         background === "dark-brand-01" ||
@@ -144,6 +144,7 @@ var Surface = function (_a) {
                 _b["arc-Surface--padding".concat(padding)] = padding,
                 _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
                 _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b["arc-Surface--isTransparent"] = isTransparent,
                 _b)) }, filterDataAttrs(props)), children)));
 };
 var backgroundsShared = [

package/dist/_shared/esm/Tabs-276a0836.js

@@ -0,0 +1,84 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs, s as suffixModifier } from './index.es-4921e8dd.js';
+import React__default, { useContext, useState, useRef, useEffect } from 'react';
+import { $ as $69cb30bb0017df05$export$41fb9f06171c75f4, a as $69cb30bb0017df05$export$7c6e2c02157bb7d2, b as $69cb30bb0017df05$export$54c2e3dc7acea9f5, c as $69cb30bb0017df05$export$be92b6f5f03c0fe9 } from './index-89a7c31c.js';
+import { I as Icon } from './Icon-3e813b34.js';
+import { C as Context } from './Surface-56d329b0.js';
+import { c as classNames } from './index-2e73c2e9.js';
+
+var Tab = function (_a) {
+    var label = _a.label, value = _a.value, icon = _a.icon, iconActive = _a.iconActive, props = __rest(_a, ["label", "value", "icon", "iconActive"]);
+    var surface = useContext(Context).surface;
+    return (React__default.createElement($69cb30bb0017df05$export$41fb9f06171c75f4, __assign({ className: classNames("arc-Tab-trigger", {
+            "arc-Tab-trigger--onDarkSurface": surface === "dark",
+            "arc-Tab-trigger--hasIcon": icon || iconActive
+        }), value: value }, filterDataAttrs(props)),
+        icon && (React__default.createElement("div", { className: "arc-Tab-triggerIcon", "data-testid": "arc-Tab-TriggerIcon" },
+            React__default.createElement(Icon, { icon: icon }))),
+        iconActive && (React__default.createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
+            React__default.createElement(Icon, { icon: iconActive }))),
+        React__default.createElement("span", { className: "arc-Tab-triggerText" }, label)));
+};
+
+var TabContent = function (_a) {
+    var children = _a.children, value = _a.value, props = __rest(_a, ["children", "value"]);
+    return (React__default.createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, __assign({ className: "arc-Tab-content", value: value }, filterDataAttrs(props)), children));
+};
+
+var TabsList = function (_a) {
+    var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel; _a.overflowGradient; var props = __rest(_a, ["children", "type", "isJustified", "ariaLabel", "overflowGradient"]);
+    var _b = useState(false), rightOverflow = _b[0], setRightOverflow = _b[1];
+    var _c = useState(false), leftOverflow = _c[0], setLeftOverflow = _c[1];
+    var surface = useContext(Context).surface;
+    var tabsRef = useRef(null);
+    var checkOverflow = function () {
+        if (tabsRef.current) {
+            setRightOverflow(tabsRef.current.scrollLeft + tabsRef.current.clientWidth <
+                tabsRef.current.scrollWidth);
+            setLeftOverflow(tabsRef.current.scrollLeft > 0);
+        }
+    };
+    var handleScroll = function () {
+        checkOverflow();
+    };
+    useEffect(function () {
+        var list = tabsRef.current;
+        checkOverflow();
+        if (list) {
+            list.addEventListener("scroll", handleScroll);
+        }
+        return function () {
+            if (list) {
+                list.removeEventListener("scroll", handleScroll);
+            }
+        };
+    });
+    var state = "";
+    if (type === "standard") {
+        if (leftOverflow && rightOverflow) {
+            state = "both";
+        }
+        else if (leftOverflow) {
+            state = "left";
+        }
+        else {
+            state = "right";
+        }
+    }
+    return (React__default.createElement("span", { className: "arc-TabsList-wrapper" },
+        React__default.createElement($69cb30bb0017df05$export$54c2e3dc7acea9f5, __assign({ className: classNames("arc-Tabs", suffixModifier("arc-TabsList--overflow", state), {
+                "arc-Tabs--contained": type === "contained",
+                "arc-Tabs--isJustified": isJustified,
+                "arc-Tabs--onDarkSurface": surface === "dark"
+            }), ref: tabsRef, "aria-label": ariaLabel }, filterDataAttrs(props)), children)));
+};
+
+/** Use `Tabs` to allow users to navigate between different sections of relevant content. */
+var Tabs = function (_a) {
+    var children = _a.children, defaultValue = _a.defaultValue, onValueChange = _a.onValueChange, activationMode = _a.activationMode, props = __rest(_a, ["children", "defaultValue", "onValueChange", "activationMode"]);
+    return (React__default.createElement($69cb30bb0017df05$export$be92b6f5f03c0fe9, __assign({ className: "arc-Tabs-root", defaultValue: defaultValue, onValueChange: onValueChange, activationMode: activationMode }, filterDataAttrs(props)), children));
+};
+Tabs.Tab = Tab;
+Tabs.List = TabsList;
+Tabs.Content = TabContent;
+
+export { Tabs as T };

package/dist/_shared/esm/{Text-96d8a35f.js → Text-98ad2e78.js}

@@ -1,16 +1,17 @@
-import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-56d329b0.js';
 
 /**
  * Use `Text` to display text.
  */
 var Text = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone"]);
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, id = _a.id, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, _h = _a.elementType, elementType = _h === void 0 ? "span" : _h, props = __rest(_a, ["align", "children", "id", "isInline", "isMeasured", "size", "tone", "elementType"]);
     var surface = useContext(Context).surface;
-    return (React__default.createElement("span", __assign({ id: id, className: classNames((_b = {
+    var Element = elementType;
+    return (React__default.createElement(Element, __assign({ id: id, className: classNames((_b = {
                 "arc-Text": true
             },
             _b[suffixModifier("arc-Text--align", align)] = align !== "left",

package/dist/_shared/esm/{TextInput-8e3b81bf.js → TextInput-eccd0140.js}

@@ -1,10 +1,10 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { forwardRef, useContext, useState } from 'react';
-import { u as useAriaDescribedby, F as FormControl } from './FormControl-e0acdf7a.js';
-import { C as Context } from './Surface-c425e5e6.js';
-import { V as VisuallyHidden } from './VisuallyHidden-cf45ac18.js';
-import { I as Icon } from './Icon-428e8061.js';
+import { u as useAriaDescribedby, F as FormControl } from './FormControl-7ff0a178.js';
+import { C as Context } from './Surface-56d329b0.js';
+import { V as VisuallyHidden } from './VisuallyHidden-fee374a8.js';
+import { T as ThemeIcon } from './ThemeIcon-810de4bc.js';
 
 /**
  * Infer the correct inputMode, pattern and type if specifying a `number` type.
@@ -77,7 +77,7 @@ var TextInputComponent = forwardRef(function (_a, ref) {
                             e.preventDefault();
                             iconButton.onClick();
                         } },
-                        React__default.createElement(Icon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
+                        React__default.createElement(ThemeIcon, { icon: iconButton.icon, size: buttonIconSize[inputSize] })))),
                 suffix && !showPassword ? (React__default.createElement("span", { className: "arc-TextInput-suffix", "aria-hidden": true }, suffix)) : null,
                 showPassword && (React__default.createElement("div", { className: "arc-TextInput-additionalControl" },
                     React__default.createElement("button", { className: "arc-TextInput-passwordToggle", onClick: function () { return setShowPasswordToggle(function (p) { return !p; }); }, type: "button" }, showPasswordToggle ? "Hide" : "Show"),

package/dist/_shared/esm/{ThemeIcon-9fac63d0.js → ThemeIcon-810de4bc.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, s as suffixModifier, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from './Surface-c425e5e6.js';
+import { C as Context } from './Surface-56d329b0.js';
 
 var ThemeIcon = function (_a) {
     var _b;

package/dist/_shared/esm/{Toast-ebe2cd97.js → Toast-62932e3b.js}

@@ -1,12 +1,12 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default, { forwardRef, useContext, useState, useEffect, createElement, useRef, createContext, useCallback, useMemo, Fragment } from 'react';
-import { $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, c as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, d as $8927f6f2acc4f386$export$6d1a0317bde7de7f, e as $c512c27ab02ef895$export$50c7b4e9d9f19c1, f as $9f79659886946c16$export$e5c5a5f917a5871c, g as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-3a2c1ceb.js';
+import { c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, a as $8927f6f2acc4f386$export$250ffa63cdc0d034, _ as _extends, b as $e42e1063c40fb3ef$export$b9ecd428b558ff10, e as $b1b2314f5f9a1d84$export$25bec8c6f54ee79a, h as $8927f6f2acc4f386$export$6d1a0317bde7de7f, $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, f as $9f79659886946c16$export$e5c5a5f917a5871c, d as $71cd76cc60e0454e$export$6f32135080cb4c3 } from './index-57d4cb34.js';
 import ReactDOM__default, { createPortal } from 'react-dom';
-import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-61497bd9.js';
-import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765, a as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-f6cc48d2.js';
-import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-d083425f.js';
+import { $ as $e02a7d9cb1dc128c$export$c74125a8e3af6bb2 } from './index-14c7f4da.js';
+import { $ as $addc16e1bbe58fd0$export$3a72a57244d6e765, a as $ea1ef594cf570d83$export$439d29a4e110a164 } from './index-e969452b.js';
+import { $ as $921a889cee6df7e8$export$99c2b779aa4e8b8b } from './index-f2ddcbe2.js';
 import { c as classNames } from './index-2e73c2e9.js';
-import { T as ThemeIcon } from './ThemeIcon-9fac63d0.js';
+import { T as ThemeIcon } from './ThemeIcon-810de4bc.js';
 
 const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
 const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';

package/dist/_shared/esm/{UniversalHeader-22ff848b.js → UniversalHeader-370d7fa4.js}

@@ -1,6 +1,6 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default from 'react';
-import { S as Surface } from './Surface-c425e5e6.js';
+import { S as Surface } from './Surface-56d329b0.js';
 
 /**
  * Use `UniversalHeader` to display a group-level page header.

package/dist/_shared/esm/{VerticalSpace-6a3533db.js → VerticalSpace-549fbdc8.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import { c as classNames } from './index-2e73c2e9.js';
 import React__default from 'react';
 

package/dist/_shared/esm/{VisuallyHidden-cf45ac18.js → VisuallyHidden-fee374a8.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index.es-4921e8dd.js';
 import React__default from 'react';
 
 /**

package/dist/_shared/esm/{component-3e60a45e.js → component-94b3dbfe.js}

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { a as __assign, _ as __rest } from './index.es-5496ec12.js';
+import { a as __assign, _ as __rest } from './index.es-4921e8dd.js';
 
 var useThemeElement = function () {
     var _a = useState(undefined), themeElement = _a[0], setElement = _a[1];

package/dist/_shared/esm/{index-61497bd9.js → index-14c7f4da.js}

@@ -1,5 +1,5 @@
 import React__default from 'react';
-import { e as $c512c27ab02ef895$export$50c7b4e9d9f19c1, $ as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, h as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-3a2c1ceb.js';
+import { $ as $c512c27ab02ef895$export$50c7b4e9d9f19c1, c as $6ed0406888f73fc4$export$c7b2cbe3552a0d05, g as $5e63c961fc1ce211$export$8c6ed5c666ac1360 } from './index-57d4cb34.js';
 
 // We have resorted to returning slots directly rather than exposing primitives that can then
 // be slotted like `<CollectionItem as={Slot}>…</CollectionItem>`.