@arc-ui/components 10.8.1 → 11.1.0

package/dist/Align/Align.esm.js

@@ -1,6 +1,6 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React from 'react';
+import React__default from 'react';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
 
 /**
@@ -9,8 +9,8 @@ import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js'
 var Align = function (_a) {
     var _b;
     var children = _a.children, _c = _a.horizontal, horizontal = _c === void 0 ? "left" : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, _e = _a.vertical, vertical = _e === void 0 ? "top" : _e, props = __rest(_a, ["children", "horizontal", "isDebugVisible", "vertical"]);
-    var wrappedChildren = React.Children.map(children, function (child, i) { return (React.createElement(AlignItem, { key: i }, child)); });
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    var wrappedChildren = React__default.Children.map(children, function (child, i) { return (React__default.createElement(AlignItem, { key: i }, child)); });
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
             _b["arc-Align"] = true,
             _b[suffixModifier("arc-Align--horizontal", horizontal)] = horizontal !== "left",
             _b["arc-Align--debugVisible"] = isDebugVisible,
@@ -19,7 +19,7 @@ var Align = function (_a) {
 };
 var AlignItem = function (_a) {
     var children = _a.children;
-    return React.createElement("div", { className: "arc-Align-item" }, children);
+    return React__default.createElement("div", { className: "arc-Align-item" }, children);
 };
 
 export { Align };

package/dist/Badge/Badge.cjs.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react";
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+declare const Badge: FC<BadgeProps>;
+interface BadgeProps {
+    /**
+     * Text to display within Badge
+     */
+    children: ReactNode;
+    /**
+     * Badge Size
+     */
+    size?: "default" | "large";
+    /**
+     * Badge has outline
+     */
+    fill?: "solid" | "outlined";
+    /**
+     * State of the Badge
+     */
+    state?: "default" | "error" | "warning" | "success";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
+}
+export { Badge };

package/dist/Badge/Badge.cjs.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-78b35bc1.js');
+var React = require('react');
+var index$1 = require('../_shared/cjs/index-45bfb67b.js');
+var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
+var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
+var Text = require('../_shared/cjs/Text-1d3844be.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+var Badge = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("div", index.__assign({}, (ariaLabel && { "aria-label": ariaLabel }), { className: index$1.classNames((_b = {
+                "arc-Badge": true,
+                "arc-Badge--onDarkSurface": surface === "dark",
+                "arc-Badge--large": size === "large",
+                "arc-Badge--outline": fill === "outlined"
+            },
+            _b[suffixModifier.suffixModifier("arc-Badge--state", state)] = state !== "default",
+            _b)), role: state === "error" ? "alert" : "status", "data-testid": "badge" }),
+        React__default["default"].createElement("div", { className: index$1.classNames((_c = {
+                    "arc-Badge-text": true
+                },
+                _c[suffixModifier.suffixModifier("arc-Badge--text", state)] = state !== "default",
+                _c)) },
+            React__default["default"].createElement(Text.Text, { size: size === "default" ? "xs" : "m" }, children))));
+};
+
+exports.Badge = Badge;

package/dist/Badge/Badge.esm.d.ts

@@ -0,0 +1,26 @@
+import { FC, ReactNode } from "react";
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+declare const Badge: FC<BadgeProps>;
+interface BadgeProps {
+    /**
+     * Text to display within Badge
+     */
+    children: ReactNode;
+    /**
+     * Badge Size
+     */
+    size?: "default" | "large";
+    /**
+     * Badge has outline
+     */
+    fill?: "solid" | "outlined";
+    /**
+     * State of the Badge
+     */
+    state?: "default" | "error" | "warning" | "success";
+    /**
+     * Aria label for accessibility
+     */
+    ariaLabel?: string;
+}
+export { Badge };

package/dist/Badge/Badge.esm.js

@@ -0,0 +1,29 @@
+import { a as __assign } from '../_shared/esm/index-229fc864.js';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import { C as Context } from '../_shared/esm/Surface-bf201530.js';
+import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
+import { T as Text } from '../_shared/esm/Text-6b958ad8.js';
+
+/** Use `Badge` component to visually display a small amount of information, such as notification counts or status indicators. */
+var Badge = function (_a) {
+    var _b, _c;
+    var children = _a.children, _d = _a.state, state = _d === void 0 ? "default" : _d, _e = _a.size, size = _e === void 0 ? "default" : _e, _f = _a.fill, fill = _f === void 0 ? "solid" : _f, ariaLabel = _a.ariaLabel;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("div", __assign({}, (ariaLabel && { "aria-label": ariaLabel }), { className: classNames((_b = {
+                "arc-Badge": true,
+                "arc-Badge--onDarkSurface": surface === "dark",
+                "arc-Badge--large": size === "large",
+                "arc-Badge--outline": fill === "outlined"
+            },
+            _b[suffixModifier("arc-Badge--state", state)] = state !== "default",
+            _b)), role: state === "error" ? "alert" : "status", "data-testid": "badge" }),
+        React__default.createElement("div", { className: classNames((_c = {
+                    "arc-Badge-text": true
+                },
+                _c[suffixModifier("arc-Badge--text", state)] = state !== "default",
+                _c)) },
+            React__default.createElement(Text, { size: size === "default" ? "xs" : "m" }, children))));
+};
+
+export { Badge };

package/dist/Badge/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@arc-ui/badge",
+  "types": "./Badge.esm.d.ts",
+  "main": "./Badge.cjs.js",
+  "module": "./Badge.esm.js",
+  "private": true
+}

package/dist/Base/Base.cjs.d.ts

@@ -1,16 +1 @@
-import { FC } from "react";
-/**
- * Use `Base` as the root component of the arc system.
- */
-declare const Base: FC<BaseProps>;
-interface BaseProps {
-    /**
-     * Brand theme to apply to Base.
-     */
-    brand?: "bt" | null;
-    /**
-     * Content to display inside Base.
-     */
-    children: any;
-}
-export { Base };
+export { Base } from "../_shared/cjs/Base-e2b846fe";

package/dist/Base/Base.cjs.js

@@ -2,22 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
-var React = require('react');
+var Base = require('../_shared/cjs/Base-e2b846fe.js');
+require('../_shared/cjs/index-78b35bc1.js');
+require('react');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ArcRootElementContext = React.createContext(null);
-/**
- * Use `Base` as the root component of the arc system.
- */
-var Base = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, children = _a.children, props = index.__rest(_a, ["brand", "children"]);
-    var _c = React__default["default"].useState(null), arcRoot = _c[0], setArcRoot = _c[1];
-    return (React__default["default"].createElement("div", index.__assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, index.filterDataAttrs(props)),
-        React__default["default"].createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
-};
-
-exports.Base = Base;
+exports.Base = Base.Base;

package/dist/Base/Base.esm.d.ts

@@ -1,16 +1 @@
-import { FC } from "react";
-/**
- * Use `Base` as the root component of the arc system.
- */
-declare const Base: FC<BaseProps>;
-interface BaseProps {
-    /**
-     * Brand theme to apply to Base.
-     */
-    brand?: "bt" | null;
-    /**
-     * Content to display inside Base.
-     */
-    children: any;
-}
-export { Base };
+export { Base } from "../_shared/esm/Base-c235dc45";

package/dist/Base/Base.esm.js

@@ -1,15 +1,3 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import React, { createContext } from 'react';
-
-var ArcRootElementContext = createContext(null);
-/**
- * Use `Base` as the root component of the arc system.
- */
-var Base = function (_a) {
-    var _b = _a.brand, brand = _b === void 0 ? "bt" : _b, children = _a.children, props = __rest(_a, ["brand", "children"]);
-    var _c = React.useState(null), arcRoot = _c[0], setArcRoot = _c[1];
-    return (React.createElement("div", __assign({ id: "arc-root", ref: setArcRoot, className: "arc".concat(brand ? " arc-".concat(brand) : "") }, filterDataAttrs(props)),
-        React.createElement(ArcRootElementContext.Provider, { value: arcRoot }, children)));
-};
-
-export { Base };
+export { B as Base } from '../_shared/esm/Base-c235dc45.js';
+import '../_shared/esm/index-229fc864.js';
+import 'react';

package/dist/BrandLogo/BrandLogo.esm.d.ts

@@ -1 +1 @@
-export { BrandLogo } from "../_shared/esm/BrandLogo-ea3dd0e6";
+export { BrandLogo } from "../_shared/esm/BrandLogo-4f13fe85";

package/dist/BrandLogo/BrandLogo.esm.js

@@ -1,6 +1,6 @@
-export { B as BrandLogo } from '../_shared/esm/BrandLogo-ea3dd0e6.js';
+export { B as BrandLogo } from '../_shared/esm/BrandLogo-4f13fe85.js';
 import '../_shared/esm/index-229fc864.js';
 import '../_shared/esm/index-2ae58626.js';
 import 'react';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/Surface-bf201530.js';

package/dist/Breadcrumbs/Breadcrumbs.cjs.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var Icon = require('../_shared/cjs/Icon-bb5a5fd1.js');
+var BtIconChevronRight2Px = require('../_shared/cjs/BtIconChevronRight2Px-a8e40136.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
-require('../_shared/cjs/index.es-f590caaf.js');
 require('../_shared/cjs/suffix-modifier-edf7851e.js');
 require('../_shared/cjs/Surface-d6b8010e.js');
 
@@ -560,10 +560,10 @@ var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
     return (React__default["default"].createElement("li", { className: "arc-Breadcrumbs-item" },
         spacerIconBefore && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React__default["default"].createElement(Icon.Icon, { icon: "btChevronLeft2px" }))),
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronLeft2Px_2 }))),
         children,
         spacerIconAfter && (React__default["default"].createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React__default["default"].createElement(Icon.Icon, { icon: "btChevronRight2px" })))));
+            React__default["default"].createElement(Icon.Icon, { icon: BtIconChevronRight2Px.BtIconChevronRight2Px_2 })))));
 };
 
 var BreadcrumbsLink = React__default["default"].forwardRef(function (_a, ref) {

package/dist/Breadcrumbs/Breadcrumbs.esm.js

@@ -1,11 +1,11 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { I as Icon } from '../_shared/esm/Icon-2fd92daa.js';
+import React__default, { useRef, useState, useEffect } from 'react';
+import { B as BtIconChevronLeft2Px_2, a as BtIconChevronRight2Px_2 } from '../_shared/esm/BtIconChevronRight2Px-b8e7b4ad.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
 import { a as __assign } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
-import '../_shared/esm/index.es-42f84e2d.js';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/Surface-bf201530.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -550,20 +550,20 @@ var debounce_1 = debounce;
 
 var BreadcrumbsItem = function (_a) {
     var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
-    return (React.createElement("li", { className: "arc-Breadcrumbs-item" },
-        spacerIconBefore && (React.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
-            React.createElement(Icon, { icon: "btChevronLeft2px" }))),
+    return (React__default.createElement("li", { className: "arc-Breadcrumbs-item" },
+        spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
+            React__default.createElement(Icon, { icon: BtIconChevronLeft2Px_2 }))),
         children,
-        spacerIconAfter && (React.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
-            React.createElement(Icon, { icon: "btChevronRight2px" })))));
+        spacerIconAfter && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon" },
+            React__default.createElement(Icon, { icon: BtIconChevronRight2Px_2 })))));
 };
 
-var BreadcrumbsLink = React.forwardRef(function (_a, ref) {
+var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
     var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
-    return (React.createElement(React.Fragment, null, isActive || href === undefined ? (React.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
+    return (React__default.createElement(React__default.Fragment, null, isActive || href === undefined ? (React__default.createElement("span", __assign({}, (isActive && { "aria-hidden": "true" }), { onClick: onClick, className: classNames({
             "arc-Breadcrumbs-text": true,
             "arc-Breadcrumbs-text--active": isActive
-        }) }), children)) : (React.createElement("a", __assign({}, (onClick && ref
+        }) }), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
         : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
 });
@@ -575,7 +575,7 @@ var Breadcrumbs = function (_a) {
     var _b = useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
     var _c = useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
     useEffect(function () {
-        React.Children.map(children, function (item) {
+        React__default.Children.map(children, function (item) {
             if (item && item.type !== BreadcrumbsItem) {
                 throw new Error("Illegal child passed to <Breadcrumbs />. Ensure to only use <Breadcrumbs.Item />");
             }
@@ -593,7 +593,7 @@ var Breadcrumbs = function (_a) {
              * TODO! Revise this if statement
              */
             if (children != null &&
-                React.Children.count(children) > 2 &&
+                React__default.Children.count(children) > 2 &&
                 breadcrumbsList.current != null &&
                 (breadcrumbsList.current.offsetWidth ===
                     ((_a = breadcrumbsList.current.parentElement) === null || _a === void 0 ? void 0 : _a.offsetWidth) ||
@@ -608,29 +608,29 @@ var Breadcrumbs = function (_a) {
         };
         // eslint-disable-next-line
     }, []);
-    var items = React.Children.toArray(children);
-    return (React.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+    var items = React__default.Children.toArray(children);
+    return (React__default.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--dark": isLight
         }) },
-        React.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React.createElement(React.Fragment, null, items.length < 3 ? (React.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React.createElement(React.Fragment, null, isCompressed ? (React.createElement(React.Fragment, null,
-            React.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
-            React.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
-                React.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),
-            React.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+        React__default.createElement("ul", { className: "arc-Breadcrumbs-list", ref: breadcrumbsList }, showBackTrail ? (React__default.createElement(React__default.Fragment, null, items.length < 3 ? (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[0].props.children)) : (React__default.createElement(Breadcrumbs.Item, { spacerIconBefore: true }, items[items.length - 2].props.children)))) : (React__default.createElement(React__default.Fragment, null, isCompressed ? (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, items[0].props.children),
+            React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true },
+                React__default.createElement("button", { className: "arc-Breadcrumbs-expand arc-Breadcrumbs-text", onClick: function () { return setIsCompressed(false); }, "aria-label": "Expand Breadcrumbs", type: "button", "data-testid": "expand-ellipsis" }, "...")),
+            React__default.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
                 items[items.length - 1].props.children &&
-                React.cloneElement(items[items.length - 1].props.children, {
+                React__default.cloneElement(items[items.length - 1].props.children, {
                     isActive: true
-                })))) : (React.createElement(React.Fragment, null,
+                })))) : (React__default.createElement(React__default.Fragment, null,
             items
                 .slice(0, items.length - 1)
                 .map(function (item, index) {
-                return (React.createElement(React.Fragment, { key: "listItem-".concat(index) },
-                    React.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
+                return (React__default.createElement(React__default.Fragment, { key: "listItem-".concat(index) },
+                    React__default.createElement(Breadcrumbs.Item, { spacerIconAfter: true }, item.props.children)));
             }),
-            React.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
+            React__default.createElement(Breadcrumbs.Item, null, items[items.length - 1].props &&
                 items[items.length - 1].props.children &&
-                React.cloneElement(items[items.length - 1].props.children, {
+                React__default.cloneElement(items[items.length - 1].props.children, {
                     isActive: items.length > 1
                 })))))))));
 };

package/dist/Button/Button.cjs.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/cjs/Button-1743b3ec";
+export { Button } from "../_shared/cjs/Button-b3a69953";

package/dist/Button/Button.cjs.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var Button = require('../_shared/cjs/Button-1743b3ec.js');
+var Button = require('../_shared/cjs/Button-b3a69953.js');
 require('../_shared/cjs/index-78b35bc1.js');
-require('../_shared/cjs/index-45bfb67b.js');
 require('react');
+require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+require('../_shared/cjs/index-45bfb67b.js');
 require('../_shared/cjs/suffix-modifier-edf7851e.js');
-require('../_shared/cjs/Icon-bb5a5fd1.js');
-require('../_shared/cjs/index.es-f590caaf.js');
+require('../_shared/cjs/Icon-719d13d4.js');
 require('../_shared/cjs/Surface-d6b8010e.js');
 
 

package/dist/Button/Button.esm.d.ts

@@ -1 +1 @@
-export { Button } from "../_shared/esm/Button-d59c31a2";
+export { Button } from "../_shared/esm/Button-69439f8f";

package/dist/Button/Button.esm.js

@@ -1,8 +1,8 @@
-export { B as Button } from '../_shared/esm/Button-d59c31a2.js';
+export { B as Button } from '../_shared/esm/Button-69439f8f.js';
 import '../_shared/esm/index-229fc864.js';
-import '../_shared/esm/index-2ae58626.js';
 import 'react';
+import '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import '../_shared/esm/index-2ae58626.js';
 import '../_shared/esm/suffix-modifier-f5e28822.js';
-import '../_shared/esm/Icon-2fd92daa.js';
-import '../_shared/esm/index.es-42f84e2d.js';
-import '../_shared/esm/Surface-d515d212.js';
+import '../_shared/esm/Icon-61f7237a.js';
+import '../_shared/esm/Surface-bf201530.js';

package/dist/Card/Card.cjs.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('../_shared/cjs/index-78b35bc1.js');
 var index$1 = require('../_shared/cjs/index-45bfb67b.js');
 var React = require('react');
-var Icon = require('../_shared/cjs/Icon-bb5a5fd1.js');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+var Icon = require('../_shared/cjs/Icon-719d13d4.js');
 var Image = require('../_shared/cjs/Image-fe760a06.js');
 var Heading = require('../_shared/cjs/Heading-cc38c3ec.js');
 var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
 var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
 var handleLinkClick = require('../_shared/cjs/handle-link-click-17a44cf4.js');
-require('../_shared/cjs/index.es-f590caaf.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -120,7 +120,7 @@ var CardLink = function (_a) {
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, index.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.Icon, { icon: "btChevronRightMid", size: 16 })))));
+            React__default["default"].createElement(Icon.Icon, { testId: "cardIcon", icon: BtIconChevronRightMid.BtIconChevronRightMid_2, size: 16 })))));
 };
 
 exports.Card = Card;

package/dist/Card/Card.esm.js

@@ -1,13 +1,13 @@
 import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
 import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React, { useState, useEffect, useContext } from 'react';
-import { I as Icon } from '../_shared/esm/Icon-2fd92daa.js';
-import { I as Image } from '../_shared/esm/Image-7e4948f6.js';
-import { H as Heading } from '../_shared/esm/Heading-183be76c.js';
+import React__default, { useState, useEffect, useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import { I as Icon } from '../_shared/esm/Icon-61f7237a.js';
+import { I as Image } from '../_shared/esm/Image-c0f3d42f.js';
+import { H as Heading } from '../_shared/esm/Heading-eb1e42db.js';
 import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.js';
-import { C as Context, S as Surface } from '../_shared/esm/Surface-d515d212.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-bf201530.js';
 import { h as handleLinkClick } from '../_shared/esm/handle-link-click-f64f55a2.js';
-import '../_shared/esm/index.es-42f84e2d.js';
 
 /**
  * Detect interaction mode
@@ -48,41 +48,41 @@ var Card = function (_a) {
     var interactionMode = useInteractionMode().interactionMode;
     var Wrapper = function (_a) {
         var children = _a.children;
-        return fill === "outlined" || fill === "neutral" ? (React.createElement("div", null, children)) : (React.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
+        return fill === "outlined" || fill === "neutral" ? (React__default.createElement("div", null, children)) : (React__default.createElement(Surface, { background: surface === "dark" ? "white" : "darker" }, children));
     };
-    var coverImage = imageSrc && (React.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
-    return (React.createElement("div", __assign({ className: classNames((_b = {
+    var coverImage = imageSrc && (React__default.createElement(CardImage, { alt: imageAlt, height: imageHeight, loading: imageLoading, src: imageSrc, srcSet: imageSrcSet }));
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {
                 "arc-Card": true,
                 "arc-Card--onDarkSurface": surface === "dark"
             },
             _b[suffixModifier("arc-Card--fill", fill)] = fill !== "solid",
             _b["arc-is-".concat(interactionMode, "InteractionMode")] = interactionMode,
             _b)) }, filterDataAttrs(props)),
-        React.createElement(Wrapper, null,
-            React.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
-                React.createElement("div", { className: "arc-Card-header" },
-                    React.createElement("div", { className: "arc-Card-title" },
-                        React.createElement(Heading, { size: titleSize },
-                            React.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
+        React__default.createElement(Wrapper, null,
+            React__default.createElement("div", { className: "arc-Card-inner", style: { minHeight: minHeight } },
+                React__default.createElement("div", { className: "arc-Card-header" },
+                    React__default.createElement("div", { className: "arc-Card-title" },
+                        React__default.createElement(Heading, { size: titleSize },
+                            React__default.createElement(CardLink, { stretch: true, onClick: onClick, actionId: actionId, fill: fill, href: href, linkData: linkData, target: target }, title))),
                     coverImage),
-                React.createElement("div", { className: "arc-Card-children" },
-                    React.createElement(Card.Block, null, children)),
-                href && (React.createElement(CardBlock, null,
-                    React.createElement(CardLink, { href: href, fill: fill, actionId: actionId, onClick: onClick, isButton: true }, actionLabel)))))));
+                React__default.createElement("div", { className: "arc-Card-children" },
+                    React__default.createElement(Card.Block, null, children)),
+                href && (React__default.createElement(CardBlock, null,
+                    React__default.createElement(CardLink, { href: href, fill: fill, actionId: actionId, onClick: onClick, isButton: true }, actionLabel)))))));
 };
 /**
  * Internal `Card.Block` component to section blocks of content within a Card.
  */
 var CardBlock = function (_a) {
     var _b = _a.align, align = _b === void 0 ? "left" : _b, children = _a.children, _c = _a.isFullWidth, isFullWidth = _c === void 0 ? false : _c, _d = _a.grow, grow = _d === void 0 ? false : _d;
-    return (React.createElement("div", { className: classNames({
+    return (React__default.createElement("div", { className: classNames({
             "arc-Card-block": true,
             "arc-Card-block--alignCenter": align === "center",
             "arc-Card-block--alignRight": align === "right",
             "arc-Card-block--fullWidth": isFullWidth,
             "arc-Card-block--grow": grow
         }) },
-        React.createElement("div", { className: "arc-Card-blockInner" }, children)));
+        React__default.createElement("div", { className: "arc-Card-blockInner" }, children)));
 };
 CardBlock.displayName = "Card.Block";
 Card.Block = CardBlock;
@@ -91,10 +91,10 @@ Card.Block = CardBlock;
  */
 var CardImage = function (_a) {
     var _b = _a.alt, alt = _b === void 0 ? "" : _b, _c = _a.height, height = _c === void 0 ? 176 : _c, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet;
-    return (React.createElement("div", { className: classNames({
+    return (React__default.createElement("div", { className: classNames({
             "arc-Card-image": true
         }) },
-        React.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
+        React__default.createElement(Image, { alt: alt, fit: "cover", height: height, loading: loading, sizes: sizes, src: src, srcSet: srcSet })));
 };
 CardImage.displayName = "Card.Image";
 Card.Image = CardImage;
@@ -104,15 +104,15 @@ Card.Image = CardImage;
 var CardLink = function (_a) {
     var actionId = _a.actionId, isButton = _a.isButton, children = _a.children, fill = _a.fill, href = _a.href, _b = _a.linkData, linkData = _b === void 0 ? {} : _b, onClick = _a.onClick, stretch = _a.stretch, target = _a.target;
     var surface = useContext(Context).surface;
-    return (React.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
+    return (React__default.createElement("a", __assign({ onClick: handleLinkClick({ handler: onClick }), "aria-describedby": actionId, className: classNames({
             "arc-Card-link": true,
             "arc-Card-link--button": isButton,
             "arc-Card-link--onDarkSurface": surface === "dark" && fill !== "neutral",
             "arc-Card-link--stretch": stretch
         }), href: href, rel: target === "_blank" ? "noopener noreferrer" : undefined, tabIndex: isButton ? -1 : undefined, target: target }, filterDataAttrs(linkData)),
-        React.createElement("span", { className: "arc-Card-linkText" }, children),
-        isButton && (React.createElement("span", { className: "arc-Card-linkIcon" },
-            React.createElement(Icon, { icon: "btChevronRightMid", size: 16 })))));
+        React__default.createElement("span", { className: "arc-Card-linkText" }, children),
+        isButton && (React__default.createElement("span", { className: "arc-Card-linkIcon" },
+            React__default.createElement(Icon, { testId: "cardIcon", icon: BtIconChevronRightMid_2, size: 16 })))));
 };
 
 export { Card };