@arc-ui/components 11.13.0 → 12.0.0-alpha.0

package/dist/index.js

@@ -385,31 +385,14 @@ var backgroundsShared = [
 __spreadArray([], backgroundsShared, true);
 __spreadArray([], backgroundsShared, true);
 
-const ArcIconArc = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fill: "none",
-      d: "M3.472 11.69a6.5 6.5 0 012.321-6.839A6.5 6.5 0 0113 4.38",
-      stroke: "currentColor",
-    }),
-  );
-
 /**
  * Use `Icon` to display brand iconography.
  */
 var Icon = function (_a) {
     var _b;
-    var testId = _a.testId, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.icon, icon = _d === void 0 ? ArcIconArc : _d, _e = _a.isInline, isInline = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "color", "icon", "isInline", "label", "size"]);
+    var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, label = _a.label, size = _a.size, props = __rest(_a, ["testId", "icon", "color", "isInline", "label", "size"]);
     var surface = React.useContext(Context$3).surface;
-    var Icon = icon;
+    var Icon = icon || (function () { return React__default["default"].createElement(React__default["default"].Fragment, null); });
     return (React__default["default"].createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
             _b["arc-Icon"] = true,
             _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
@@ -422,167 +405,24 @@ var Icon = function (_a) {
         React__default["default"].createElement(Icon, null)));
 };
 
-/**
- * Use `Heading` to display heading text.
- */
-var Heading = function (_a) {
+var ThemeIcon = function (_a) {
     var _b;
-    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
+    var size = _a.size, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, props = __rest(_a, ["size", "icon", "color"]);
     var surface = React.useContext(Context$3).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React__default["default"].createElement(Element, __assign({ id: id, className: classNames((_b = {
-                "arc-Heading": true
-            },
-            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
-            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
-            _b["arc-Heading--casingNone"] = casing === "none",
-            _b["arc-Heading--colorBrand"] = color === "brand",
-            _b["arc-Heading--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
-};
-var HeadingProposition = function (_a) {
-    var children = _a.children;
-    return React__default["default"].createElement("span", { className: "arc-Heading-proposition" }, children);
-};
-Heading.Proposition = HeadingProposition;
-
-/**
- * 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 surface = React.useContext(Context$3).surface;
-    return (React__default["default"].createElement("span", __assign({ id: id, className: classNames((_b = {
-                "arc-Text": true
+    return (React__default["default"].createElement("span", __assign({ style: {
+            height: size,
+            width: size
+        }, className: classNames("arc-ThemeIcon", "arc-ThemeIcon--".concat(icon), (_b = {
+                "arc-ThemeIcon--onDarkSurface": surface === "dark"
             },
-            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
-            _b["arc-Text--inline"] = isInline,
-            _b["arc-Text--measured"] = isMeasured,
-            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b["arc-Text--".concat(tone)] = tone !== "default",
-            _b["arc-Text--onDarkSurface"] = surface === "dark",
-            _b)) }, filterDataAttrs(props)), children));
+            _b[suffixModifier("arc-ThemeIcon--color", color)] = color !== "auto",
+            _b)) }, filterDataAttrs(props))));
 };
 
-const BtIconCrossAlt2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M17.41406,16l3.793-3.793A.99989.99989,0,0,0,19.793,10.793L16,14.58594l-3.793-3.793A.99989.99989,0,0,0,10.793,12.207L14.58594,16l-3.793,3.793A.99989.99989,0,1,0,12.207,21.207L16,17.41406l3.793,3.793A.99989.99989,0,0,0,21.207,19.793Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconNotification = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M24.50977,21.98867,24,21.99014,23.99414,13.975a7.98466,7.98466,0,0,0-6.66046-7.86011,1.46733,1.46733,0,0,0,.15655-.65063,1.48633,1.48633,0,1,0-2.97265,0,1.46732,1.46732,0,0,0,.15826.65369,7.9849,7.9849,0,0,0-6.63971,7.857v8.0166l-.50781-.00293a1.50464,1.50464,0,1,0,0,3.00928h3.45679a1.997,1.997,0,0,0,3.99365,0h9.532a1.50464,1.50464,0,1,0-.001-3.00928ZM16.00391,4.97793a.48633.48633,0,1,1-.48633.48633A.48668.48668,0,0,1,16.00391,4.97793ZM12.98242,25.97158a.998.998,0,0,1-.99469-.97363h1.98841A.99785.99785,0,0,1,12.98242,25.97158ZM24.51074,23.998H7.52832a.50465.50465,0,0,1-.00488-1.00928l1.51269.00293V13.975a6.979,6.979,0,0,1,13.958.00049L23,22.99209l1.51074-.00342a.50464.50464,0,1,1,0,1.00928Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconAlertTriangle = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fill: "currentColor",
-      d: "M16 21.99335A1 1 0 1 0 16 23.99335 1 1 0 1 0 16 21.99335z",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.00488,20.00977a.49972.49972,0,0,0,.5-.5l.002-9.00977a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,20.00977Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M29.83691,26.21,17.041,4.5332A1.15617,1.15617,0,0,0,16.03711,3.959h-.001a1.159,1.159,0,0,0-1.00586.57373L2.23535,26.21045a1.16676,1.16676,0,0,0,1.00488,1.76074H28.83105A1.16843,1.16843,0,0,0,29.83691,26.21Zm-.86035.67725a.164.164,0,0,1-.14551.084H3.24023a.16737.16737,0,0,1-.14355-.25244L15.8916,5.0415a.167.167,0,0,1,.28809,0l12.7959,21.67627A.16531.16531,0,0,1,28.97656,26.88721Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconAlert = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fill: "currentColor",
-      d: "M16 20.99335A1 1 0 1 0 16 22.99335 1 1 0 1 0 16 20.99335z",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.00488,19.00977a.49972.49972,0,0,0,.5-.5L16.50684,9.5a.5.5,0,0,0-1,0l-.002,9.00977A.5.5,0,0,0,16.00488,19.00977Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconTick = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement(
-      "g",
-      {
-        "data-name": "Icons",
-      },
-      /*#__PURE__*/ React__default["default"].createElement("path", {
-        d: "M16,3A13,13,0,1,1,3,16,12.9741,12.9741,0,0,1,16,3m0-1A14,14,0,1,0,30,16,14.04116,14.04116,0,0,0,16,2Z",
-        fill: "currentColor",
-      }),
-      /*#__PURE__*/ React__default["default"].createElement("path", {
-        d: "M13.5,21.2,9.1,16.8a.495.495,0,1,1,.7-.7l3.6,3.6L22,11.1a.495.495,0,1,1,.7.7Z",
-        fill: "currentColor",
-      }),
-    ),
-  );
-
 /** use `Alert` to display persistent messages, either permanent or dismissible. */
 var Alert = function (_a) {
     var _b;
-    var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, type = _a.type, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable, headingLevel = _a.headingLevel, onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "type", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
+    var heading = _a.heading, description = _a.description, link = _a.link, linkText = _a.linkText, linkAriaLabel = _a.linkAriaLabel, _c = _a.status, status = _c === void 0 ? "general" : _c, isDismissable = _a.isDismissable; _a.headingLevel; var onDismiss = _a.onDismiss, onLinkClick = _a.onLinkClick, icon = _a.icon, props = __rest(_a, ["heading", "description", "link", "linkText", "linkAriaLabel", "status", "isDismissable", "headingLevel", "onDismiss", "onLinkClick", "icon"]);
     var surface = React.useContext(Context$3).surface;
     var _d = React.useState(false), isDismissed = _d[0], setIsDismissed = _d[1];
     var onDismissHandler = function () {
@@ -590,10 +430,10 @@ var Alert = function (_a) {
         onDismiss && onDismiss();
     };
     var statusIcons = {
-        general: BtIconNotification,
-        error: BtIconAlert,
-        warning: BtIconAlertTriangle,
-        success: BtIconTick
+        general: "alertGeneral",
+        error: "alertError",
+        warning: "alertWarning",
+        success: "alertSuccess"
     };
     var handleLinkClick = function (event) {
         event.preventDefault();
@@ -603,22 +443,19 @@ var Alert = function (_a) {
         return null;
     }
     return (React__default["default"].createElement("div", __assign({ className: classNames("arc-Alert", (_b = {
-                "arc-Alert--onDarkSurface": surface === "dark",
-                "arc-Alert--secondary": type === "secondary"
+                "arc-Alert--onDarkSurface": surface === "dark"
             },
             _b["arc-Alert--".concat(status)] = status !== "general",
             _b)), role: "alert" }, (status === "warning" && { "aria-live": "assertive" }), filterDataAttrs(props)),
-        React__default["default"].createElement("div", { className: "arc-Alert-icon" }, icon ? (React__default["default"].createElement(Icon, { size: 24, icon: icon })) : (React__default["default"].createElement(Icon, { size: 24, icon: statusIcons[status] }))),
+        React__default["default"].createElement("div", { className: "arc-Alert-icon" }, icon ? (React__default["default"].createElement(Icon, { size: 24, icon: icon })) : (React__default["default"].createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
         React__default["default"].createElement("div", { className: "arc-Alert-content" },
-            React__default["default"].createElement("div", { className: "arc-Alert-heading" },
-                React__default["default"].createElement(Heading, { size: "xs", level: headingLevel }, heading)),
-            description ? (React__default["default"].isValidElement(description) ? (description) : (React__default["default"].createElement(Text, { size: "s" }, description))) : null,
+            React__default["default"].createElement("div", { className: "arc-Alert-heading" }, heading),
+            description ? (React__default["default"].isValidElement(description) ? (description) : (React__default["default"].createElement("div", { className: "arc-Alert-description" }, description))) : null,
             link && (React__default["default"].createElement("div", { className: "arc-Alert-link" },
-                React__default["default"].createElement(Text, { size: "s" },
-                    React__default["default"].createElement("a", __assign({ href: link, "aria-label": linkAriaLabel }, (onLinkClick && { onClick: handleLinkClick })), linkText))))),
+                React__default["default"].createElement("a", __assign({ href: link, "aria-label": linkAriaLabel }, (onLinkClick && { onClick: handleLinkClick })), linkText)))),
         isDismissable && (React__default["default"].createElement(React__default["default"].Fragment, null,
             React__default["default"].createElement("button", { "aria-label": "dismiss alert", className: "arc-Alert-dismiss", onClick: onDismissHandler },
-                React__default["default"].createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
+                React__default["default"].createElement(ThemeIcon, { size: 24, icon: "alertDismiss" }))))));
 };
 
 /** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
@@ -638,8 +475,7 @@ var Badge = function (_a) {
                     "arc-Badge-text": true
                 },
                 _c[suffixModifier("arc-Badge--text", state)] = state !== "default",
-                _c)) },
-            React__default["default"].createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
+                _c)) }, children)));
 };
 
 var ArcRootElementContext = React.createContext(null);
@@ -1228,48 +1064,14 @@ function debounce(func, wait, options) {
 
 var debounce_1 = debounce;
 
-const BtIconChevronLeft2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["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",
-    }),
-  );
-
-const BtIconChevronRight2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["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 BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = __rest(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
     return (React__default["default"].createElement("li", __assign({ className: "arc-Breadcrumbs-item" }, filterDataAttrs(props)),
         spacerIconBefore && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React__default["default"].createElement(Icon, { icon: BtIconChevronLeft2Px }))),
+            React__default["default"].createElement(ThemeIcon, { icon: "breadcrumbLeft" }))),
         children,
         spacerIconAfter && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React__default["default"].createElement(Icon, { icon: BtIconChevronRight2Px })))));
+            React__default["default"].createElement(ThemeIcon, { icon: "breadcrumbRight" })))));
 };
 
 var handleLinkClick = function (_a) {
@@ -1363,44 +1165,6 @@ var Breadcrumbs = function (_a) {
 Breadcrumbs.Item = BreadcrumbsItem;
 Breadcrumbs.Link = BreadcrumbsLink;
 
-const BtIconChevronLeftMid = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M7.62107 8.00023L10.4697 10.8522C10.5957 10.9785 10.6665 11.1495 10.6665 11.3279C10.6665 11.5063 10.5957 11.6773 10.4697 11.8036C10.4074 11.866 10.3335 11.9155 10.252 11.9493C10.1706 11.983 10.0833 12.0004 9.99507 12.0004C9.9069 12.0004 9.81959 11.983 9.73814 11.9493C9.65669 11.9155 9.5827 11.866 9.52041 11.8036L6.19641 8.47556C6.07061 8.34935 5.99998 8.17842 5.99998 8.00023C5.99998 7.82203 6.07061 7.6511 6.19641 7.52489L9.52041 4.19689C9.5827 4.13449 9.65669 4.08498 9.73814 4.0512C9.81959 4.01741 9.9069 4.00003 9.99507 4.00003C10.0832 4.00003 10.1706 4.01741 10.252 4.0512C10.3335 4.08498 10.4074 4.13449 10.4697 4.19689C10.5957 4.32313 10.6665 4.4942 10.6665 4.67256C10.6665 4.85092 10.5957 5.02199 10.4697 5.14823L7.62107 8.00023Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconChevronRightMid = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 16 16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9.04543 8.0002L6.19676 5.1482C6.07077 5.02196 6 4.85089 6 4.67253C6 4.49418 6.07077 4.32311 6.19676 4.19687C6.25906 4.13446 6.33304 4.08495 6.41449 4.05117C6.49594 4.01739 6.58325 4 6.67143 4C6.75961 4 6.84692 4.01739 6.92837 4.05117C7.00982 4.08495 7.0838 4.13446 7.1461 4.19687L10.4701 7.52487C10.5959 7.65108 10.6665 7.82201 10.6665 8.0002C10.6665 8.1784 10.5959 8.34932 10.4701 8.47553L7.1461 11.8035C7.0838 11.8659 7.00982 11.9155 6.92837 11.9492C6.84692 11.983 6.75961 12.0004 6.67143 12.0004C6.58325 12.0004 6.49594 11.983 6.41449 11.9492C6.33304 11.9155 6.25906 11.8659 6.19676 11.8035C6.07077 11.6773 6 11.5062 6 11.3279C6 11.1495 6.07077 10.9784 6.19676 10.8522L9.04543 8.0002Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * Use `Button` to allow users to take actions with clicks and taps.
  */
@@ -1414,9 +1178,7 @@ var Button = React.forwardRef(function (_a, ref) {
         },
         _b[suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
         _b["arc-Button--fullWidth"] = isFullWidth,
-        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") &&
-            iconPosition &&
-            iconPosition !== "afterText",
+        _b[suffixModifier("arc-Button--icon", iconPosition.replace("icon", ""))] = (icon || fill === "flat") && iconPosition,
         _b["arc-Button--hasSupportingText"] = supportingText,
         _b["arc-Button--onDarkSurface"] = surface === "dark",
         _b["arc-Button--size".concat(size && size.toUpperCase())] = size && size !== "m",
@@ -1439,7 +1201,7 @@ var Button = React.forwardRef(function (_a, ref) {
 });
 var ButtonIcon = function (_a) {
     var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
-    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid : BtIconChevronRightMid })) : (React__default["default"].createElement(Icon, { icon: icon }))));
+    return (React__default["default"].createElement("span", { className: "arc-Button-icon" }, isChevron ? (React__default["default"].createElement(ThemeIcon, { icon: isBeforeText ? "buttonLeft" : "buttonRight" })) : (React__default["default"].createElement(Icon, { icon: icon }))));
 };
 
 /**
@@ -1474,6 +1236,33 @@ var ImageSource = function (_a) {
 };
 Image.Source = ImageSource;
 
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, id = _a.id, props = __rest(_a, ["align", "casing", "children", "color", "level", "size", "id"]);
+    var surface = React.useContext(Context$3).surface;
+    var Element = "span";
+    if (level) {
+        Element = "h".concat(level);
+    }
+    return (React__default["default"].createElement(Element, __assign({ id: id, className: classNames((_b = {
+                "arc-Heading": true
+            },
+            _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
+            _b["arc-Heading--casingNone"] = casing === "none",
+            _b["arc-Heading--colorBrand"] = color === "brand",
+            _b["arc-Heading--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
+var HeadingProposition = function (_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("span", { className: "arc-Heading-proposition" }, children);
+};
+Heading.Proposition = HeadingProposition;
+
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
  */
@@ -1665,42 +1454,27 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
         React__default["default"].createElement("span", { className: "arc-Card-linkText" }, children),
         isButton && (React__default["default"].createElement("span", { className: "arc-Card-linkIcon" },
-            React__default["default"].createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid, size: 24 })))));
+            React__default["default"].createElement(ThemeIcon, { "data-testid": "cardIcon", size: 24, icon: "cardButton" })))));
 };
 
-const BtIconTickAlt2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M13.49963,21.91418l-4.707-4.707a1.0014,1.0014,0,0,1,0-1.41406,1.02353,1.02353,0,0,1,1.41406,0l3.293,3.293,8.293-8.293a.99989.99989,0,1,1,1.41406,1.41406Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconChevronDown2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M15.99316,23.91406,2.294,10.207A.99989.99989,0,1,1,3.708,8.793l12.28515,12.293L28.292,8.793A.99989.99989,0,1,1,29.70605,10.207Z",
-      fill: "currentColor",
-    }),
-  );
+/**
+ * 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 surface = React.useContext(Context$3).surface;
+    return (React__default["default"].createElement("span", __assign({ id: id, className: classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, filterDataAttrs(props)), children));
+};
 
 /**
  * Use `DisclosureMini` to display content that is only visible when toggled into
@@ -1725,7 +1499,7 @@ var DisclosureMini = function (_a) {
             React__default["default"].createElement("div", { className: classNames("arc-DisclosureMini-summary-icon", {
                     "arc-DisclosureMini-summary-icon--small": size === "s"
                 }) },
-                React__default["default"].createElement(BtIconChevronDown2Px, null)),
+                React__default["default"].createElement(ThemeIcon, { icon: "disclosureMiniExpand" })),
             React__default["default"].createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
         React__default["default"].createElement("div", { className: "arc-DisclosureMini-details" },
             React__default["default"].createElement(Text, { size: size === "l" ? "m" : "s" },
@@ -1779,7 +1553,7 @@ var FormControl = function (_a) {
             React__default["default"].createElement("div", { className: "arc-FormControl-info" },
                 !helperUnderLabel && (React__default["default"].createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError },
                     React__default["default"].createElement("span", { className: "arc-FormControl-error--icon" },
-                        React__default["default"].createElement(BtIconAlert, null)),
+                        React__default["default"].createElement(ThemeIcon, { icon: "formControlAlert" })),
                     errorMessage)) : disclosureTitle ? (React__default["default"].createElement(React__default["default"].Fragment, null,
                     React__default["default"].createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
                 supplementaryInfo && (React__default["default"].createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
@@ -1819,7 +1593,7 @@ var Checkbox = React.forwardRef(function (_a, ref) {
             }) },
             React__default["default"].createElement("input", __assign({ "aria-describedby": ariaDescribedby, "aria-invalid": errorMessage ? "true" : "false", className: "arc-Checkbox-input" }, checkedProps, { disabled: isDisabled, id: id, name: name, onBlur: onBlur, onChange: onChange, ref: ref, required: isRequired, type: "checkbox", value: value }, filterDataAttrs(props))),
             React__default["default"].createElement("span", { className: "arc-Checkbox-box" },
-                React__default["default"].createElement(BtIconTickAlt2Px, null)),
+                React__default["default"].createElement(ThemeIcon, { icon: "checkboxChecked" })),
             React__default["default"].createElement("span", __assign({}, (checkboxAlignment === "top" && {
                 className: "arc-Checkbox-content--marginTop"
             })),
@@ -1828,7 +1602,7 @@ var Checkbox = React.forwardRef(function (_a, ref) {
                 helper && React__default["default"].createElement("span", { className: "arc-Checkbox-helper" }, helper))),
         errorMessage && (React__default["default"].createElement("div", { id: idError, className: "arc-Checkbox-error" },
             React__default["default"].createElement("span", { className: "arc-Checkbox-error--icon" },
-                React__default["default"].createElement(BtIconAlert, null)),
+                React__default["default"].createElement(ThemeIcon, { icon: "checkboxError" })),
             errorMessage))));
 });
 
@@ -1906,27 +1680,6 @@ var Col = function (_a) {
 };
 Columns.Col = Col;
 
-/**
-#### Deprecation Notice
-
-The `Curve` component is an outdated brand feature and is being deprecated from Arc as a standalone component or sub-component within other components. Do not use Curve for any new work, and prepare to update any design that features it to remove it.
-
-`Curve` will be removed from Arc in a subsequent release
- */
-var Curve = function (_a) {
-    var _b;
-    var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = __rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
-    return (React__default["default"].createElement("div", __assign({ className: classNames((_b = {
-                "arc-Curve": true
-            },
-            _b[suffixModifier("arc-Curve--from", from)] = from && from !== "top",
-            _b["arc-Curve--size".concat(size && size.toUpperCase())] = size && size !== "m",
-            _b[suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
-            _b[suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
-            _b["arc-Curve--inverted"] = isInverted,
-            _b)) }, filterDataAttrs(props))));
-};
-
 /**
  * Use `Disclosure` to display content that is only visible when toggled into
  * an "open" state.
@@ -1941,7 +1694,7 @@ var Disclosure = function (_a) {
         }), open: isOpen }, filterDataAttrs(props)),
         React__default["default"].createElement("summary", { className: "arc-Disclosure-summary" },
             React__default["default"].createElement("span", { className: "arc-Disclosure-summary-icon" },
-                React__default["default"].createElement(BtIconChevronDown2Px, null)),
+                React__default["default"].createElement(ThemeIcon, { icon: "disclosureExpand" })),
             React__default["default"].createElement(Heading, { level: headingLevel, size: "s" }, summary)),
         React__default["default"].createElement("div", { className: "arc-Disclosure-details" }, children)));
 };
@@ -35112,7 +34865,7 @@ var Modal = function (_a) {
                             React__default["default"].createElement(Button, __assign({ isFullWidth: true }, props)))); })))),
                     canShowClose && (React__default["default"].createElement("div", { className: "arc-Modal-iconContainer" },
                         React__default["default"].createElement("button", { "aria-label": "close", onClick: closeModal, className: "arc-Modal-closeButton" },
-                            React__default["default"].createElement(Icon, { size: 32, icon: BtIconCrossAlt2Px })))))))));
+                            React__default["default"].createElement(ThemeIcon, { size: 32, icon: "modalClose" })))))))));
 };
 
 var usePagination = function (pageCount, selectedPage) {
@@ -35171,7 +34924,7 @@ var Pagination = function (_a) {
                 "arc-Pagination-navigationButton--hidden": selectedPage === 1
             }), onClick: handlePagechange(selectedPage - 1) },
             React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
-                React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid }))),
+                React__default["default"].createElement(ThemeIcon, { size: 32, icon: "paginationPrevious" }))),
         React__default["default"].createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
             return isPageNumber(rangeValue) ? (React__default["default"].createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: classNames("arc-Pagination-value arc-Pagination-value--number", {
                     "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
@@ -35181,7 +34934,7 @@ var Pagination = function (_a) {
                 "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
             }), onClick: handlePagechange(selectedPage + 1) },
             React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
-                React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))));
+                React__default["default"].createElement(ThemeIcon, { size: 32, icon: "paginationNext" })))));
 };
 
 /**
@@ -35201,7 +34954,7 @@ var PaginationSimple = function (_a) {
                 onPrevPage();
             } },
             React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
-                React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid })),
+                React__default["default"].createElement(ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
             React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
         React__default["default"].createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
                 "arc-PaginationSimple-navigationButton--hidden": hideNext
@@ -35210,7 +34963,7 @@ var PaginationSimple = function (_a) {
             } },
             React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
             React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
-                React__default["default"].createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid })))));
+                React__default["default"].createElement(ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))));
 };
 
 var PosterImage = function (_a) {
@@ -35229,7 +34982,7 @@ var PosterVideo = function (_a) {
 };
 
 /**
- * Use `Poster` to compose content on an image or video background.
+ * Use `Poster` to compose content on an image or video background. BT Brand Only.
  */
 var Poster = function (_a) {
     var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);
@@ -35245,31 +34998,10 @@ var Poster = function (_a) {
 Poster.Image = PosterImage;
 Poster.Video = PosterVideo;
 
-const BtIconRefresh = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M13.41077,21.99951a.5005.5005,0,0,0-.35743.8501l2.04609,2.08716A8.98732,8.98732,0,0,1,13.15332,7.46631a.50028.50028,0,1,0-.31641-.94922A9.98437,9.98437,0,0,0,15.127,25.93823l.00159.02881c.0011.01.02008.00128.03015.002L13.026,28.16846a.50036.50036,0,0,0,.71875.69629l3.28418-3.38819-3.26074-3.32715A.50106.50106,0,0,0,13.41077,21.99951Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.79028,6.04633,16.79,6.04077c-.0011-.01-.02008-.00128-.03015-.00195l2.13275-2.19946a.50036.50036,0,0,0-.71875-.69629L14.88965,6.53125,18.15039,9.8584a.50106.50106,0,0,0,.35742.1499.5005.5005,0,0,0,.35742-.8501L16.7951,7.04657a8.98484,8.98484,0,0,1,2.05646,17.47589.49982.49982,0,1,0,.31641.94824A9.98244,9.98244,0,0,0,16.79028,6.04633Z",
-      fill: "currentColor",
-    }),
-  );
-
 var PROGRESS_BAR_ICON_MAP = {
-    refresh: BtIconRefresh,
-    tick: BtIconTickAlt2Px,
-    cross: BtIconCrossAlt2Px
+    refresh: "progressBarRefresh",
+    tick: "progressBarSuccess",
+    cross: "progressBarError"
 };
 
 var getProgressBarProps = function (isIndeterminate, progressValue, ariaLabel) {
@@ -35311,62 +35043,9 @@ var ProgressBar = function (_a) {
                     React__default["default"].createElement("div", { className: "arc-ProgressBar-actionContainer" },
                         React__default["default"].createElement(Text, null, action.text),
                         action.icon && (React__default["default"].createElement("div", { className: "arc-ProgressBar-actionIcon" },
-                            React__default["default"].createElement(Icon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
+                            React__default["default"].createElement(ThemeIcon, { icon: PROGRESS_BAR_ICON_MAP[action.icon], size: 24 }))))))))));
 };
 
-const BtIconTickVariant = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M13.5,21.207,9.14648,16.85352a.5.5,0,0,1,.707-.707L13.5,19.793l8.64648-8.64649a.5.5,0,0,1,.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossAlt = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16.70709,16.02l4.48236-4.49365a.4996.4996,0,1,0-.707-.70606l-4.481,4.49225-4.481-4.49225a.4996.4996,0,1,0-.707.70606L15.29584,16.02l-4.48236,4.49365a.4996.4996,0,1,0,.707.70606l4.481-4.49225,4.481,4.49225a.4996.4996,0,1,0,.707-.70606Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCircle = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 32 32",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M9 16C9 19.87 12.13 23 16 23C19.87 23 23 19.87 23 16C23 12.13 19.87 9 16 9C12.13 9 9 12.13 9 16ZM16 7C11.03 7 7 11.03 7 16C7 20.97 11.03 25 16 25C20.97 25 25 20.97 25 16C25 11.03 20.97 7 16 7Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * Provides text for screen readers that is visually hidden.
  */
@@ -35380,10 +35059,10 @@ var ProgressStepperItem = function (_a) {
     var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _e = _a.direction, direction = _e === void 0 ? "horizontal" : _e, _f = _a.status, status = _f === void 0 ? "todo" : _f, _g = _a.size, size = _g === void 0 ? "large" : _g, _h = _a.position, position = _h === void 0 ? "middle" : _h, isFluid = _a.isFluid, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, isExpandable = _a.isExpandable, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "position", "isFluid", "ariaLabel", "onClick", "previousStep", "isExpandable", "stepContent", "isStepContentHidden"]);
     var surface = React.useContext(Context$3).surface;
     var statusIcons = {
-        completed: BtIconTickVariant,
-        current: BtIconCircle,
-        warning: BtIconAlert,
-        error: BtIconCrossAlt
+        completed: "progressStepperComplete",
+        current: "progressStepperCurrent",
+        warning: "progressStepperWarning",
+        error: "progressStepperError"
     };
     var onClickHandler = function (event) {
         event.preventDefault();
@@ -35409,7 +35088,8 @@ var ProgressStepperItem = function (_a) {
                     _d)), "data-testid": "arc-ProgressStepperItem-iconWrapper" }, statusIcons[status] === undefined ? (React__default["default"].createElement("div", { style: {
                     width: size === "small" ? "16px" : "32px",
                     height: size === "small" ? "16px" : "32px"
-                } })) : (React__default["default"].createElement(Icon, { size: size === "small" ? 16 : 32, icon: statusIcons[status] }))),
+                } })) : (React__default["default"].createElement("span", { className: "arc-ProgressStepperItem-statusIcon" },
+                React__default["default"].createElement(ThemeIcon, { icon: statusIcons[status], size: size === "small" ? 16 : 32 })))),
             React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-iconSectionTrailAfter" })),
         React__default["default"].createElement("div", { className: "arc-ProgressStepperItem-textSection" },
             status !== "todo" && (React__default["default"].createElement(VisuallyHidden, null,
@@ -35507,36 +35187,16 @@ RadioGroup.RadioButton = RadioButton;
  * Use `Rule` to display a horizontal rule.
  */
 var Rule = function (props) {
-    var surface = React.useContext(Context$3).surface;
-    return (React__default["default"].createElement("hr", __assign({ className: classNames({
-            "arc-Rule": true,
-            "arc-Rule--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs(props))));
+    return React__default["default"].createElement("hr", __assign({ className: "arc-Rule" }, filterDataAttrs(props)));
 };
 
-const BtIconArrowAltUp = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M20.35352,13.14648,16,8.793l-4.35352,4.35352a.49995.49995,0,0,0,.707.707L15.5,10.707V22.5a.5.5,0,0,0,1,0V10.707l3.14648,3.14648a.49995.49995,0,0,0,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * Use `ScrollToTop` to allow the user to scroll to the top of the page by clicking a button.
  */
 var ScrollToTop = function (_a) {
     var _b = _a.appear, appear = _b === void 0 ? "always" : _b, _c = _a.isFixed, isFixed = _c === void 0 ? true : _c, _d = _a.fill, fill = _d === void 0 ? "solid" : _d, _e = _a.zIndex, zIndex = _e === void 0 ? 100 : _e, props = __rest(_a, ["appear", "isFixed", "fill", "zIndex"]);
     var _f = React.useState(false), hasScrolled = _f[0], setHasScrolled = _f[1];
+    var surface = React.useContext(Context$3).surface;
     React.useEffect(function () {
         var handleScroll = debounce_1(function () {
             setHasScrolled(window.scrollY > 0);
@@ -35554,12 +35214,13 @@ var ScrollToTop = function (_a) {
             zIndex: zIndex
         }, className: classNames("arc-ScrollToTop", "arc-ScrollToTop--".concat(fill), {
             "arc-ScrollToTop--fixed": isFixed,
+            "arc-ScrollToTop--onDarkSurface": surface === "dark",
             "arc-ScrollToTop--visible": appear === "always" || (appear === "afterScroll" && hasScrolled)
         }) }, filterDataAttrs(props)),
         React__default["default"].createElement("div", { className: "arc-ScrollToTop-textWrapper" },
             React__default["default"].createElement("span", { className: "arc-ScrollToTop-text" }, "Scroll to top")),
         React__default["default"].createElement("span", { className: "arc-ScrollToTop-iconContainer" },
-            React__default["default"].createElement(Icon, { icon: BtIconArrowAltUp, size: 44 }))));
+            React__default["default"].createElement(ThemeIcon, { size: 44, icon: "scrollToTop" }))));
 };
 
 /**
@@ -37601,31 +37262,14 @@ const $cc7e05a45900e73f$export$c3468e2714d175fa = $cc7e05a45900e73f$export$6b919
 const $cc7e05a45900e73f$export$2f60d3ec9ad468f2 = $cc7e05a45900e73f$export$d8117927658af6d7;
 const $cc7e05a45900e73f$export$bf1aedc3039c8d63 = $cc7e05a45900e73f$export$ff951e476c12189;
 
-const BtIconChevronUp2Px = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M28.999,23.5a.99676.99676,0,0,1-.707-.293l-12.28515-12.293L3.708,23.207A.99989.99989,0,0,1,2.294,21.793l13.71289-13.707L29.70605,21.793a.99976.99976,0,0,1-.707,1.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 /** Use `Select` to choose from a dropdown list of options. */
 var Select = function (_a) {
     var _b;
-    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _c = _a.selectSize, selectSize = _c === void 0 ? "m" : _c, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
+    var isRequired = _a.isRequired, isDisabled = _a.isDisabled, placeholder = _a.placeholder, label = _a.label, _c = _a.ariaLabel, ariaLabel = _c === void 0 ? label : _c, options = _a.options, onOpenChange = _a.onOpenChange, isDefaultOpen = _a.isDefaultOpen, defaultValue = _a.defaultValue, errorMessage = _a.errorMessage, labelSize = _a.labelSize, helper = _a.helper, name = _a.name, isFluid = _a.isFluid, onBlur = _a.onBlur, onChange = _a.onChange, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, _d = _a.selectSize, selectSize = _d === void 0 ? "m" : _d, props = __rest(_a, ["isRequired", "isDisabled", "placeholder", "label", "ariaLabel", "options", "onOpenChange", "isDefaultOpen", "defaultValue", "errorMessage", "labelSize", "helper", "name", "isFluid", "onBlur", "onChange", "disclosureTitle", "disclosureText", "onClickDisclosure", "selectSize"]);
     var id = React.useId();
     var arcRootElement = React.useContext(ArcRootElementContext);
     var surface = React.useContext(Context$3).surface;
-    var _d = React.useState(defaultValue), selectedValue = _d[0], setSelectedValue = _d[1];
+    var _e = React.useState(defaultValue), selectedValue = _e[0], setSelectedValue = _e[1];
     var onValueChange = function (value) {
         onChange && onChange(value);
         setSelectedValue(value);
@@ -37646,7 +37290,7 @@ var Select = function (_a) {
     };
     return (React__default["default"].createElement(FormControl, { errorMessage: errorMessage, helper: helper, htmlFor: id, label: label, labelSize: labelSize, requirementStatus: isRequired ? "required" : "optional", isDisabled: isDisabled, disclosureText: disclosureText, disclosureTitle: disclosureTitle, onClickDisclosure: onClickDisclosure },
         React__default["default"].createElement($cc7e05a45900e73f$export$be92b6f5f03c0fe9, { name: name, required: isRequired, disabled: isDisabled, defaultOpen: isDefaultOpen, value: selectedValue, onOpenChange: onOpenChange, onValueChange: function (value) { return onValueChange(value); } },
-            React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, className: classNames("arc-Select-trigger", (_b = {
+            React__default["default"].createElement($cc7e05a45900e73f$export$41fb9f06171c75f4, __assign({ id: id, name: name, onBlur: onBlur, "aria-label": ariaLabel, className: classNames("arc-Select-trigger", (_b = {
                         "arc-Select-trigger--constrained": !isFluid,
                         "arc-Select-trigger--onDarkSurface": surface === "dark",
                         "arc-Select-trigger--invalid": errorMessage
@@ -37655,13 +37299,13 @@ var Select = function (_a) {
                     _b)) }, filterDataAttrs(props)),
                 React__default["default"].createElement($cc7e05a45900e73f$export$4c8d1a57a761ef94, { asChild: true, "aria-label": getSelectedValueName(selectedValue) }, !selectedValue ? (React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Select-placeHolder" }, placeholder)) : (React__default["default"].createElement("span", { className: "arc-Select-valueItem" }, getSelectedValueName(selectedValue)))),
                 React__default["default"].createElement($cc7e05a45900e73f$export$f04a61298a47a40f, { className: "arc-Select-triggerIcon" },
-                    React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: getIconSize(selectSize) }))),
+                    React__default["default"].createElement(ThemeIcon, { size: getIconSize(selectSize), icon: "selectTrigger" }))),
             React__default["default"].createElement($cc7e05a45900e73f$export$602eac185826482c, { container: arcRootElement || undefined },
                 React__default["default"].createElement($cc7e05a45900e73f$export$7c6e2c02157bb7d2, { className: classNames("arc-Select-content", {
                         "arc-Select-content--onDarkSurface": surface === "dark"
                     }) },
                     React__default["default"].createElement($cc7e05a45900e73f$export$2f60d3ec9ad468f2, { className: "arc-Select-scrollButton" },
-                        React__default["default"].createElement(Icon, { icon: BtIconChevronUp2Px, size: 16 })),
+                        React__default["default"].createElement(ThemeIcon, { size: 16, icon: "selectScrollUp" })),
                     React__default["default"].createElement($cc7e05a45900e73f$export$d5c6c08dc2d3ca7, null, options.map(function (_a, i) {
                         var name = _a.name, value = _a.value;
                         return (React__default["default"].createElement($cc7e05a45900e73f$export$6d08773d2e66f8f2, { className: "arc-Select-item", key: "select-item-".concat(i), value: value },
@@ -37669,10 +37313,10 @@ var Select = function (_a) {
                                 React__default["default"].createElement($cc7e05a45900e73f$export$d6e5bf9c43ea9319, { asChild: true },
                                     React__default["default"].createElement("span", { className: "arc-Select-itemText" }, name))),
                             React__default["default"].createElement($cc7e05a45900e73f$export$c3468e2714d175fa, null,
-                                React__default["default"].createElement(Icon, { icon: BtIconTickAlt2Px, size: 20 }))));
+                                React__default["default"].createElement(ThemeIcon, { size: 20, icon: "selectIndicator" }))));
                     })),
                     React__default["default"].createElement($cc7e05a45900e73f$export$bf1aedc3039c8d63, { className: "arc-Select-scrollButton" },
-                        React__default["default"].createElement(Icon, { icon: BtIconChevronDown2Px, size: 16 })))))));
+                        React__default["default"].createElement(ThemeIcon, { size: 16, icon: "selectScrollDown" })))))));
 };
 
 /**
@@ -37686,7 +37330,7 @@ var ArcBreakpointL = 1024;
  * Use `SiteFooter` to display information at the bottom of a page.
  */
 var SiteFooter = function (_a) {
-    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    var children = _a.children, currentYear = _a.currentYear, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "logoLabel", "main", "siteName"]);
     React.useEffect(function () {
         React__default["default"].Children.map(children, function (item) {
             if (item && item.type !== SiteFooterItem) {
@@ -37695,7 +37339,6 @@ var SiteFooter = function (_a) {
         });
     }, [children]);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        curve ? (React__default["default"].createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
         React__default["default"].createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
             React__default["default"].createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
                 (siteName || main) && (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -37724,7 +37367,7 @@ var SiteFooterItemGroup = function (_a) {
     return (React__default["default"].createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
         React__default["default"].createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
             React__default["default"].createElement("span", { className: "arc-SiteFooter-icon" },
-                React__default["default"].createElement(BtIconChevronDown2Px, null)),
+                React__default["default"].createElement(ThemeIcon, { icon: "siteFooterExpand" })),
             React__default["default"].createElement("h2", { className: "arc-SiteFooter-title" }, title)),
         React__default["default"].createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
 };
@@ -37766,7 +37409,7 @@ var Item = function (_a) {
             _b)) }, filterDataAttrs(props)),
         React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderItem-link", href: href },
             isEmphasised && (React__default["default"].createElement("span", { className: "arc-SiteHeaderItem-linkIcon" },
-                React__default["default"].createElement(BtIconChevronRight2Px, null))),
+                React__default["default"].createElement(ThemeIcon, { icon: "siteHeaderLink" }))),
             children)));
 };
 
@@ -37796,7 +37439,7 @@ var ItemGroup = function (_a) {
                 }), className: "arc-SiteHeaderItemGroup-title", href: href, tabIndex: !hasClientSideJavaScript || isMinWidthArcBreakpointL ? 0 : -1 },
                 title,
                 React__default["default"].createElement("span", { className: "arc-SiteHeaderItemGroup-titleIcon" },
-                    React__default["default"].createElement(BtIconChevronDown2Px, null)))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
+                    React__default["default"].createElement(ThemeIcon, { icon: "siteHeaderItemGroupExpand" })))) : (React__default["default"].createElement("div", { className: "arc-SiteHeaderItemGroup-title" }, title)))) : null,
             React__default["default"].createElement("ul", { className: "arc-SiteHeaderItemGroup-items" },
                 children,
                 href && title ? (React__default["default"].createElement("li", { className: "arc-SiteHeaderItem arc-SiteHeaderItem--viewAll" },
@@ -37854,7 +37497,7 @@ var BackButton = function (_a) {
             setOpen(false);
         } },
         React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-icon" },
-            React__default["default"].createElement(BtIconChevronLeft2Px, null)),
+            React__default["default"].createElement(ThemeIcon, { icon: "siteHeaderBack" })),
         React__default["default"].createElement("span", { className: "arc-SiteHeaderBackButton-text" }, "Back")));
 };
 
@@ -37938,7 +37581,7 @@ var ViewAll = function (_a) {
     return (React__default["default"].createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteHeaderPanel-viewAll", href: href },
         title,
         React__default["default"].createElement("span", { className: "arc-SiteHeaderPanel-viewAllIcon" },
-            React__default["default"].createElement(BtIconChevronRight2Px, null))));
+            React__default["default"].createElement(ThemeIcon, { icon: "siteHeaderViewAll" }))));
 };
 Panel.ViewAll = ViewAll;
 
@@ -37972,7 +37615,10 @@ var NavItem = function (_a) {
                 setPanelOpen(!panelOpen);
             } },
             React__default["default"].createElement("span", null, title),
-            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px, null)) : (React__default["default"].createElement(BtIconChevronRight2Px, null)))),
+            React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" },
+                React__default["default"].createElement(ThemeIcon, { icon: isMinWidthArcBreakpointL
+                        ? "siteHeaderNavItemExpand"
+                        : "siteHeaderNavItemExpandAlt" }))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, promo: promo, setOpen: setPanelOpen, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
 };
 
@@ -38059,7 +37705,7 @@ var SubNavItem = function (_a) {
             } },
             linkTitle,
             children && (React__default["default"].createElement("span", { className: "arc-SiteHeaderSubNavItem-linkIcon" },
-                React__default["default"].createElement(BtIconChevronRight2Px, null)))),
+                React__default["default"].createElement(ThemeIcon, { icon: "siteHeaderSubNavOpen" })))),
         React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, subNavItemRef: subNavItem, subNavLink: "arc-SiteHeaderSubNavItem-link", promo: promo, title: React__default["default"].createElement("span", null,
                 title,
                 subTitle && (React__default["default"].createElement(Text, { size: "xs", tone: "supporting" }, subTitle))), viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined }, children)))));
@@ -38170,7 +37816,10 @@ var NavItemWithSubNav = function (_a) {
                     setPanelOpen(!panelOpen);
                 } },
                 title,
-                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" }, isMinWidthArcBreakpointL ? (React__default["default"].createElement(BtIconChevronDown2Px, null)) : (React__default["default"].createElement(BtIconChevronRight2Px, null)))),
+                React__default["default"].createElement("span", { className: "arc-SiteHeaderNavItem-linkIcon" },
+                    React__default["default"].createElement(ThemeIcon, { icon: isMinWidthArcBreakpointL
+                            ? "siteHeaderNavItemExpand"
+                            : "siteHeaderNavItemExpandAlt" }))),
             React__default["default"].createElement(Panel, { navItemRef: navItem, open: panelOpen, setOpen: setPanelOpen, title: subTitle, viewAll: href ? (React__default["default"].createElement(Panel.ViewAll, { href: href, onClick: onViewAllClick, title: viewAllTitle || "View all ".concat(title.toLowerCase()) })) : undefined, withSubNav: true },
                 defaultItem
                     ? React__default["default"].cloneElement(slot1, { isDefaultItem: defaultItem })
@@ -38578,7 +38227,7 @@ var Switch = function (_a) {
                     React__default["default"].createElement($6be4966fd9bbc698$export$6521433ed15a34db, { className: "arc-Switch-thumb" },
                         React__default["default"].createElement("div", { className: "arc-Switch-thumbIcon" },
                             React__default["default"].createElement("div", { className: "arc-Switch-icon", "data-testid": "arc-switch-thumb-icon" },
-                                React__default["default"].createElement(Icon, { icon: BtIconTickAlt2Px, color: surface === "dark" ? "brand" : "brand", size: labelSize === "l" ? 24 : 16 })))))),
+                                React__default["default"].createElement(ThemeIcon, { icon: "switchToggle", color: "brand", size: labelSize === "l" ? 24 : 16 })))))),
             React__default["default"].createElement("div", { className: classNames("arc-Switch-statusText", {
                     "arc-Switch-statusText--isDisabled": isDisabled,
                     "arc-Switch-statusText--onDarkSurface": surface === "dark"
@@ -39060,7 +38709,7 @@ var Tab = function (_a) {
             React__default["default"].createElement(Icon, { icon: icon }))),
         iconActive && (React__default["default"].createElement("div", { className: "arc-Tab-triggerIcon arc-Tab-triggerIcon--active", "data-testid": "arc-Tab-TriggerIconActive" },
             React__default["default"].createElement(Icon, { icon: iconActive }))),
-        label));
+        React__default["default"].createElement("span", { className: "arc-Tab-triggerText" }, label)));
 };
 
 var TabContent = function (_a) {
@@ -39068,40 +38717,6 @@ var TabContent = function (_a) {
     return (React__default["default"].createElement($69cb30bb0017df05$export$7c6e2c02157bb7d2, { className: "arc-Tab-content", value: value }, children));
 };
 
-const BtIconArrowRightFill = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M2,16A14,14,0,1,0,16,2,14,14,0,0,0,2,16Zm16.85352-4.35352L23.207,16l-4.35351,4.35352a.5.5,0,0,1-.707-.707L21.293,16.5H9.5a.5.5,0,0,1,0-1H21.293l-3.14649-3.14648a.5.5,0,0,1,.707-.707Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconArrowLeftFill = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M30,16A14,14,0,1,0,16,30,14,14,0,0,0,30,16ZM13.14648,20.35352,8.793,16l4.35351-4.35352a.5.5,0,0,1,.707.707L10.707,15.5H22.5a.5.5,0,0,1,0,1H10.707l3.14649,3.14648a.5.5,0,0,1-.707.707Z",
-      fill: "currentColor",
-    }),
-  );
-
 var TabsList = function (_a) {
     var children = _a.children, type = _a.type, isJustified = _a.isJustified, ariaLabel = _a.ariaLabel, props = __rest(_a, ["children", "type", "isJustified", "ariaLabel"]);
     var surface = React.useContext(Context$3).surface;
@@ -39145,11 +38760,11 @@ var TabsList = function (_a) {
         leftOverflow && (React__default["default"].createElement("button", { className: classNames("arc-Tabs-overflowIcon arc-Tabs-overflowIcon--left", {
                 "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
             }), onClick: function () { return scrollTabs(-300); }, "aria-label": "Scroll Tabs Left", "data-testid": "arc-Tabs-overflowIconLeft" },
-            React__default["default"].createElement(Icon, { icon: BtIconArrowLeftFill, size: 40, color: "brand" }))),
+            React__default["default"].createElement(ThemeIcon, { icon: "tabsPrevious", size: 40, color: "brand" }))),
         rightOverflow && (React__default["default"].createElement("button", { className: classNames("arc-Tabs-overflowIcon", {
                 "arc-Tabs-overflowIcon--onDarkSurface": surface === "dark"
             }), onClick: function () { return scrollTabs(300); }, "aria-label": "Scroll Tabs Right", "data-testid": "arc-Tabs-overflowIconRight" },
-            React__default["default"].createElement(Icon, { icon: BtIconArrowRightFill, size: 40, color: "brand" })))));
+            React__default["default"].createElement(ThemeIcon, { icon: "tabsNext", size: 40, color: "brand" })))));
 };
 
 var Tabs = function (_a) {
@@ -39160,44 +38775,6 @@ Tabs.Tab = Tab;
 Tabs.List = TabsList;
 Tabs.Content = TabContent;
 
-const BtIconCross = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,27A13,13,0,1,1,29,16,13.01474,13.01474,0,0,1,16,29Z",
-      fill: "currentColor",
-    }),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M20.85352,11.14648a.49983.49983,0,0,0-.707,0L16,15.293l-4.14648-4.14649a.5.5,0,0,0-.707.707L15.293,16l-4.14649,4.14648a.5.5,0,1,0,.707.707L16,16.707l4.14648,4.14649a.5.5,0,0,0,.707-.707L16.707,16l4.14649-4.14648A.49983.49983,0,0,0,20.85352,11.14648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconCrossFill = (props) =>
-  /*#__PURE__*/ React__default["default"].createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React__default["default"].createElement("defs", null),
-    /*#__PURE__*/ React__default["default"].createElement("path", {
-      d: "M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm4.85352,18.14648a.5.5,0,1,1-.707.707L16,16.707l-4.14648,4.14649a.5.5,0,0,1-.707-.707L15.293,16l-4.14649-4.14648a.5.5,0,0,1,.707-.707L16,15.293l4.14648-4.14649a.5.5,0,0,1,.707.707L16.707,16Z",
-      fill: "currentColor",
-    }),
-  );
-
 /**
  * use `Tag` to promote features and manage filtering.
  */
@@ -39227,8 +38804,8 @@ var Tag = function (_a) {
                 React__default["default"].createElement(Icon, { "data-testid": "arc-Tag-icon", icon: icon, size: 16 }))),
             React__default["default"].createElement("div", { className: "arc-Tag-label" }, children))))),
         isRemovable && (React__default["default"].createElement("button", { className: "arc-Tag-icon arc-Tag-icon--removable", onClick: onRemoveHandler, "data-testid": "arc-Tag-icon-removable", "aria-live": "polite", "aria-roledescription": "remove tag" },
-            React__default["default"].createElement(Icon, { icon: BtIconCross, color: "brand", size: 20 }),
-            React__default["default"].createElement(Icon, { icon: BtIconCrossFill, color: "brand", size: 20 })))));
+            React__default["default"].createElement(ThemeIcon, { icon: "tagRemove", color: "brand", size: 20 }),
+            React__default["default"].createElement(ThemeIcon, { icon: "tagRemoveInteractive", color: "brand", size: 20 })))));
 };
 
 /** Use `TextArea` to allow custom user text entry via keyboard, for long-form and multi-line descriptions */
@@ -39990,10 +39567,10 @@ const $054eb8030ebde76e$export$f39c2d165cd861fe = $054eb8030ebde76e$export$811e7
 var ToastNotification = function (_a) {
     var link = _a.link, title = _a.title, isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, _b = _a.isStatusIconVisible, isStatusIconVisible = _b === void 0 ? true : _b, _c = _a.isCloseButtonVisible, isCloseButtonVisible = _c === void 0 ? true : _c, _d = _a.status, status = _d === void 0 ? "general" : _d, props = __rest(_a, ["link", "title", "isOpen", "onOpenChange", "isStatusIconVisible", "isCloseButtonVisible", "status"]);
     var statusIcons = {
-        general: BtIconNotification,
-        error: BtIconAlertTriangle,
-        warning: BtIconAlert,
-        success: BtIconTick
+        general: "toastGeneral",
+        error: "toastError",
+        warning: "toastWarning",
+        success: "toastSuccess"
     };
     var handleLinkClick = function (handler) { return function (event) {
         event.preventDefault();
@@ -40002,13 +39579,13 @@ var ToastNotification = function (_a) {
     return (React__default["default"].createElement($054eb8030ebde76e$export$be92b6f5f03c0fe9, __assign({ className: "arc-Toast-root", open: isOpen, onOpenChange: onOpenChange }, filterDataAttrs(props)),
         React__default["default"].createElement("div", { "data-testid": "toast-notification-wrapper", className: classNames("arc-Toast", "arc-Toast-status--".concat(status)) },
             isStatusIconVisible && (React__default["default"].createElement("div", { "data-testid": "status-icon", className: "arc-Toast-icon" },
-                React__default["default"].createElement(Icon, { size: 24, icon: statusIcons[status] }))),
+                React__default["default"].createElement(ThemeIcon, { size: 24, icon: statusIcons[status] }))),
             React__default["default"].createElement($054eb8030ebde76e$export$f99233281efd08a0, { className: "arc-Toast-title" },
                 React__default["default"].createElement("span", null, title)),
             link && (React__default["default"].createElement($054eb8030ebde76e$export$e19cd5f9376f8cee, { className: "arc-Toast-action", asChild: true, altText: link.text },
                 React__default["default"].createElement("a", __assign({ className: "arc-Toast-link", href: link.href, "aria-label": link.ariaLabel }, (link.onClick && { onClick: handleLinkClick(link.onClick) })), link.text))),
             isCloseButtonVisible && !link && (React__default["default"].createElement($054eb8030ebde76e$export$f39c2d165cd861fe, { className: "arc-Toast-dismiss", "aria-label": "Close" },
-                React__default["default"].createElement(Icon, { icon: BtIconCrossAlt2Px, size: 24 }))))));
+                React__default["default"].createElement(ThemeIcon, { icon: "toastDismiss", size: 24 }))))));
 };
 
 /** Use `Toast` to display temporary messages at the bottom of the viewport. */
@@ -40026,6 +39603,11 @@ var Truncate = function (_a) {
     return (React__default["default"].createElement("div", __assign({ className: "arc-Truncate", style: { maxWidth: "".concat(maxWidth, "%") }, title: title }, filterDataAttrs(props)), children));
 };
 
+var Theme = function (_a) {
+    var _b = _a.theme, theme = _b === void 0 ? "arc-11" : _b, children = _a.children, props = __rest(_a, ["theme", "children"]);
+    return (React__default["default"].createElement("div", __assign({ className: "arc-ds-sys-theme--".concat(theme) }, filterDataAttrs(props)), children));
+};
+
 /**
  * Use `UniversalHeader` to display a group-level page header.
  */
@@ -40062,7 +39644,6 @@ exports.Checkbox = Checkbox;
 exports.Clock = Clock;
 exports.ClockRehydrator = Clock_rehydrator;
 exports.Columns = Columns;
-exports.Curve = Curve;
 exports.Disclosure = Disclosure;
 exports.DisclosureMini = DisclosureMini;
 exports.Elevation = Elevation;
@@ -40097,6 +39678,7 @@ exports.Tag = Tag;
 exports.Text = Text;
 exports.TextArea = TextArea;
 exports.TextInput = TextInput;
+exports.Theme = Theme;
 exports.Toast = Toast;
 exports.Truncate = Truncate;
 exports.UniversalHeader = UniversalHeader;