@arc-ui/components 11.7.0 → 11.9.0

package/dist/_shared/cjs/index.module-bbcc4e18.js

@@ -0,0 +1,126 @@
+'use strict';
+
+var _extends = require('./extends-bb8ffacd.js');
+var React = require('react');
+
+/**
+ * Set a given ref to a given value
+ * This utility takes care of different types of refs: callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$var$setRef(ref, value) {
+    if (typeof ref === 'function') ref(value);
+    else if (ref !== null && ref !== undefined) ref.current = value;
+}
+/**
+ * A utility to compose multiple refs together
+ * Accepts callback refs and RefObject(s)
+ */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) {
+    return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node)
+        )
+    ;
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * Slot
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    const childrenArray = React.Children.toArray(children);
+    const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable);
+    if (slottable) {
+        // the new element to render is the one passed as a child of `Slottable`
+        const newElement = slottable.props.children;
+        const newChildren = childrenArray.map((child)=>{
+            if (child === slottable) {
+                // because the new element will be the one rendered, we are only interested
+                // in grabbing its children (`newElement.props.children`)
+                if (React.Children.count(newElement) > 1) return React.Children.only(null);
+                return /*#__PURE__*/ React.isValidElement(newElement) ? newElement.props.children : null;
+            } else return child;
+        });
+        return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
+            ref: forwardedRef
+        }), /*#__PURE__*/ React.isValidElement(newElement) ? /*#__PURE__*/ React.cloneElement(newElement, undefined, newChildren) : null);
+    }
+    return /*#__PURE__*/ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends._extends({}, slotProps, {
+        ref: forwardedRef
+    }), children);
+});
+$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot';
+/* -------------------------------------------------------------------------------------------------
+ * SlotClone
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ React.forwardRef((props, forwardedRef)=>{
+    const { children: children , ...slotProps } = props;
+    if (/*#__PURE__*/ React.isValidElement(children)) return /*#__PURE__*/ React.cloneElement(children, {
+        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
+        ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref)
+    });
+    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
+});
+$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone';
+/* -------------------------------------------------------------------------------------------------
+ * Slottable
+ * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children  })=>{
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+};
+/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) {
+    return /*#__PURE__*/ React.isValidElement(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45;
+}
+function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) {
+    // all child props should override
+    const overrideProps = {
+        ...childProps
+    };
+    for(const propName in childProps){
+        const slotPropValue = slotProps[propName];
+        const childPropValue = childProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // if the handler exists on both, we compose them
+            if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{
+                childPropValue(...args);
+                slotPropValue(...args);
+            };
+            else if (slotPropValue) overrideProps[propName] = slotPropValue;
+        } else if (propName === 'style') overrideProps[propName] = {
+            ...slotPropValue,
+            ...childPropValue
+        };
+        else if (propName === 'className') overrideProps[propName] = [
+            slotPropValue,
+            childPropValue
+        ].filter(Boolean).join(' ');
+    }
+    return {
+        ...slotProps,
+        ...overrideProps
+    };
+}
+
+/**
+ * On the server, React emits a warning when calling `useLayoutEffect`.
+ * This is because neither `useLayoutEffect` nor `useEffect` run on the server.
+ * We use this safe version which suppresses the warning by replacing it with a noop on the server.
+ *
+ * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect
+ */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? React.useLayoutEffect : ()=>{};
+
+function $010c2913dbd2fe3d$export$5cae361ad82dce8b(value) {
+    const ref = React.useRef({
+        value: value,
+        previous: value
+    }); // We compare values before making an update to ensure that
+    // a change has been made. This ensures the previous value is
+    // persisted correctly between renders.
+    return React.useMemo(()=>{
+        if (ref.current.value !== value) {
+            ref.current.previous = ref.current.value;
+            ref.current.value = value;
+        }
+        return ref.current.previous;
+    }, [
+        value
+    ]);
+}
+
+exports.$010c2913dbd2fe3d$export$5cae361ad82dce8b = $010c2913dbd2fe3d$export$5cae361ad82dce8b;
+exports.$5e63c961fc1ce211$export$8c6ed5c666ac1360 = $5e63c961fc1ce211$export$8c6ed5c666ac1360;
+exports.$9f79659886946c16$export$e5c5a5f917a5871c = $9f79659886946c16$export$e5c5a5f917a5871c;

package/dist/_shared/esm/{Breadcrumbs-5dc0afa7.js → Breadcrumbs-dafa8dde.js}

@@ -1,14 +1,14 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
 import React__default, { useRef, useState, useEffect } from 'react';
 import { d as debounce_1 } from './debounce-e228705f.js';
 import { B as BtIconChevronLeft2Px_2, a as BtIconChevronRight2Px_2 } from './BtIconChevronRight2Px-b8e7b4ad.js';
 import { I as Icon } from './Icon-c1af47bc.js';
-import { a as __assign } from './filter-data-attrs-afdb7d32.js';
 import { c as classNames } from './index-2ae58626.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
 
 var BreadcrumbsItem = function (_a) {
-    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children;
-    return (React__default.createElement("li", { className: "arc-Breadcrumbs-item" },
+    var spacerIconAfter = _a.spacerIconAfter, spacerIconBefore = _a.spacerIconBefore, children = _a.children, props = __rest(_a, ["spacerIconAfter", "spacerIconBefore", "children"]);
+    return (React__default.createElement("li", __assign({ className: "arc-Breadcrumbs-item" }, filterDataAttrs(props)),
         spacerIconBefore && (React__default.createElement("div", { className: "arc-Breadcrumbs-spacerIcon", "data-testid": "arc-chevron-left-2px" },
             React__default.createElement(Icon, { icon: BtIconChevronLeft2Px_2 }))),
         children,
@@ -17,18 +17,18 @@ var BreadcrumbsItem = function (_a) {
 };
 
 var BreadcrumbsLink = React__default.forwardRef(function (_a, ref) {
-    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children;
+    var onClick = _a.onClick, href = _a.href, isActive = _a.isActive, children = _a.children, props = __rest(_a, ["onClick", "href", "isActive", "children"]);
     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__default.createElement("a", __assign({}, (onClick && ref
+        }) }, filterDataAttrs(props)), children)) : (React__default.createElement("a", __assign({}, (onClick && ref
         ? { onClick: onClick }
-        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }), children))));
+        : { onClick: handleLinkClick({ handler: onClick }) }), { className: "arc-Breadcrumbs-text", ref: ref, href: href }, filterDataAttrs(props)), children))));
 });
 
 /** Use `Breadcrumbs` to add a secondary navigation scheme that reveals the user’s location. Each item should be wrapped with `Breadcrumbs.Item` */
 var Breadcrumbs = function (_a) {
-    var isLight = _a.isLight, children = _a.children;
+    var isLight = _a.isLight, children = _a.children, props = __rest(_a, ["isLight", "children"]);
     var breadcrumbsList = useRef(null);
     var _b = useState(false), isCompressed = _b[0], setIsCompressed = _b[1];
     var _c = useState(false), showBackTrail = _c[0], setShowBackTrail = _c[1];
@@ -67,10 +67,10 @@ var Breadcrumbs = function (_a) {
         // eslint-disable-next-line
     }, []);
     var items = React__default.Children.toArray(children);
-    return (React__default.createElement("nav", { "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
+    return (React__default.createElement("nav", __assign({ "aria-label": "Breadcrumbs", role: "navigation", className: classNames({
             "arc-Breadcrumbs": true,
             "arc-Breadcrumbs--dark": isLight
-        }) },
+        }) }, filterDataAttrs(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 },

package/dist/_shared/esm/BtIconTick-5fe50cc7.js

@@ -0,0 +1,83 @@
+import React__default from 'react';
+
+const React$2 = React__default;
+const BtIconNotification = props =>
+  /*#__PURE__*/ React$2.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$2.createElement("defs", null),
+    /*#__PURE__*/ React$2.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"
+    })
+  );
+var BtIconNotification_2 = BtIconNotification;
+
+const React$1 = React__default;
+const BtIconAlertTriangle = props =>
+  /*#__PURE__*/ React$1.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React$1.createElement("defs", null),
+    /*#__PURE__*/ React$1.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$1.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$1.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"
+    })
+  );
+var BtIconAlertTriangle_2 = BtIconAlertTriangle;
+
+const React = React__default;
+const BtIconTick = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement(
+      "g",
+      {
+        "data-name": "Icons"
+      },
+      /*#__PURE__*/ React.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.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"
+      })
+    )
+  );
+var BtIconTick_2 = BtIconTick;
+
+export { BtIconNotification_2 as B, BtIconAlertTriangle_2 as a, BtIconTick_2 as b };

package/dist/_shared/{cjs/Button-b4d6ccc8.d.ts → esm/Button-d1dbcf79.d.ts}

@@ -28,6 +28,10 @@ interface ButtonElementProps {
      * be inferred. Type 'reset' deliberately excluded.
      */
     type?: "button" | "submit";
+    /**
+     * Refers to the id of a form so it can be submitted if the button exists outside of it.
+     */
+    form?: string;
 }
 interface LinkElementProps {
     /**

package/dist/_shared/esm/{Button-9c3b0b11.js → Button-d1dbcf79.js}

@@ -12,7 +12,7 @@ import { C as Context } from './Surface-dde51789.js';
  */
 var Button = forwardRef(function (_a, ref) {
     var _b;
-    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var ariaLabel = _a.ariaLabel, _c = _a.fill, fill = _c === void 0 ? "solid" : _c, href = _a.href, icon = _a.icon, _d = _a.iconPosition, iconPosition = _d === void 0 ? "afterText" : _d, id = _a.id, _e = _a.isDisabled, isDisabled = _e === void 0 ? false : _e, _f = _a.isDisplayBlock, isDisplayBlock = _f === void 0 ? false : _f, _g = _a.isFullWidth, isFullWidth = _g === void 0 ? false : _g, label = _a.label, onClick = _a.onClick, rel = _a.rel, supportingText = _a.supportingText, target = _a.target, type = _a.type, form = _a.form, props = __rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type", "form"]);
     var surface = useContext(Context).surface;
     var buttonClasses = classNames((_b = {
             "arc-Button": true,
@@ -37,7 +37,7 @@ var Button = forwardRef(function (_a, ref) {
                 buttonText,
                 buttonIcon)));
     }
-    return (React__default.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+    return (React__default.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type, form: form }),
         React__default.createElement("span", { className: "arc-Button-inner" },
             buttonText,
             buttonIcon)));

package/dist/_shared/esm/{Card-79b6eae0.js → Card-e62c3ff6.js}

@@ -4,7 +4,7 @@ import React__default, { useState, useEffect, useContext } from 'react';
 import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-d9b11761.js';
 import { I as Icon } from './Icon-c1af47bc.js';
 import { I as Image } from './Image-3ed3863c.js';
-import { H as Heading } from './Heading-ee6bec51.js';
+import { H as Heading } from './Heading-0f629151.js';
 import { s as suffixModifier } from './suffix-modifier-7e640670.js';
 import { C as Context, S as Surface } from './Surface-dde51789.js';
 import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';

package/dist/_shared/esm/{Checkbox-2d144384.js → Checkbox-d8891198.js}

@@ -3,7 +3,7 @@ import React__default, { forwardRef, useContext } from 'react';
 import { B as BtIconTickAlt2Px_2 } from './BtIconTickAlt2Px-da97e9ae.js';
 import { B as BtIconAlert_2 } from './BtIconAlert-55a6ed5c.js';
 import { c as classNames } from './index-2ae58626.js';
-import { C as Context, u as useAriaDescribedby } from './FormControl-2fa7aae5.js';
+import { C as Context, u as useAriaDescribedby } from './FormControl-f18e2f59.js';
 import { C as Context$1 } from './Surface-dde51789.js';
 
 /**

package/dist/_shared/esm/Columns-8704515b.d.ts

@@ -73,4 +73,4 @@ interface ColumnsProps {
      */
     isGutterless?: boolean;
 }
-export { Columns, Col, ColProps, ColumnsProps };
+export { Columns, Col, Span, ColProps, ColumnsProps };

package/dist/_shared/esm/{Curve-3e87b1bc.d.ts → Curve-bbc5589c.d.ts}

@@ -1,8 +1,11 @@
 import { FC } from "react";
 import { backgroundsBT } from "../../Surface/Surface.esm";
 /**
- * Use `Curve` sparingly to soften edges and create a more natural, less rigid
- * look and feel.
+#### 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
  */
 declare const Curve: FC<CurveProps>;
 declare const sizes: readonly ["s", "m", "l"];

package/dist/_shared/esm/{Curve-3e87b1bc.js → Curve-bbc5589c.js}

@@ -4,8 +4,11 @@ import React__default from 'react';
 import { s as suffixModifier } from './suffix-modifier-7e640670.js';
 
 /**
- * Use `Curve` sparingly to soften edges and create a more natural, less rigid
- * look and feel.
+#### 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;

package/dist/_shared/esm/{DisclosureMini-78a8f392.js → DisclosureMini-9b819941.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import { c as classNames } from './index-2ae58626.js';
 import React__default, { useContext, useState } from 'react';
 import { B as BtIconChevronDown2Px_2 } from './BtIconChevronDown2Px-782876e2.js';
-import { T as Text } from './Text-14deb70e.js';
+import { T as Text } from './Text-40457811.js';
 import { C as Context } from './Surface-dde51789.js';
 
 /**

package/dist/_shared/esm/{FormControl-2fa7aae5.js → FormControl-f18e2f59.js}

@@ -3,7 +3,7 @@ import { c as classNames } from './index-2ae58626.js';
 import React__default, { createContext, useContext } from 'react';
 import { B as BtIconAlert_2 } from './BtIconAlert-55a6ed5c.js';
 import { C as Context$1 } from './Surface-dde51789.js';
-import { D as DisclosureMini } from './DisclosureMini-78a8f392.js';
+import { D as DisclosureMini } from './DisclosureMini-9b819941.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.

package/dist/_shared/esm/{Heading-ee6bec51.d.ts → Heading-0f629151.d.ts}

@@ -33,6 +33,10 @@ interface HeadingProps {
      * The color of the Heading.
      */
     color?: HeadingColor;
+    /**
+     * Id for the Heading.
+     */
+    id?: string;
     /**
      * HTML section heading level. If not provided, the Heading will render as
      * a span.

package/dist/_shared/esm/{Heading-ee6bec51.js → Heading-0f629151.js}

@@ -9,13 +9,13 @@ import { C as Context } from './Surface-dde51789.js';
  */
 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, props = __rest(_a, ["align", "casing", "children", "color", "level", "size"]);
+    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 = useContext(Context).surface;
     var Element = "span";
     if (level) {
         Element = "h".concat(level);
     }
-    return (React__default.createElement(Element, __assign({ className: classNames((_b = {
+    return (React__default.createElement(Element, __assign({ id: id, className: classNames((_b = {
                 "arc-Heading": true
             },
             _b[suffixModifier("arc-Heading--align", align)] = align && align !== "left",

package/dist/{MediaCard/MediaCard.esm.d.ts → _shared/esm/MediaCard-9483ad5f.d.ts}

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { loadingOptions } from "../Image/Image.esm";
+import { loadingOptions } from "../../Image/Image.esm";
 import React from "react";
 import { FC } from "react";
-import { BoxProps } from "../Box/Box.esm";
-// Update tests for box surface
+import { BoxProps } from "../../Box/Box.esm";
 /**
  * Use `MediaCard` to contain content and an image about a single subject.
  */
@@ -58,4 +57,4 @@ interface MediaCardProps {
      */
     imageSrcSet?: string;
 }
-export { MediaCard };
+export { MediaCard, MediaCardProps };

package/dist/_shared/esm/ProgressStepper-7ab88f4c.d.ts

@@ -0,0 +1,89 @@
+import { FC, ReactNode } from "react";
+type ProgressStatus = "completed" | "current" | "warning" | "error" | "todo";
+declare const ProgressStepperItem: FC<ProgressStepperItemProps>;
+interface ProgressStepperItemProps {
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    title: string;
+    /**
+     * Determine a title for `<ProgressStepper.Item />`
+     */
+    titleHref?: string;
+    /**
+     * Text to override `linkTitle` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Execute a function on title click `<ProgressStepper.Item />`
+     */
+    onClick?: () => void;
+    /**
+     * Determine a sub title for `<ProgressStepper.Item />`
+     */
+    subTitle?: string;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the position of the step `<ProgressStepper.Item />`
+     */
+    position?: "first" | "middle" | "last";
+    /**
+     * Determine a status for `<ProgressStepper.Item />`
+     */
+    status?: ProgressStatus;
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item /> should be Fluid`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine the context `<ProgressStepper.Item /> should b`
+     */
+    previousStep?: ProgressStatus;
+    /**
+     * Determine if `<ProgressStepper.Item /> should have expandable content`
+     */
+    isExpandable?: boolean;
+    /**
+     * Determine what content to display in `<ProgressStepper.Item />. To use this option isExpandable must be `true``
+     */
+    stepContent?: ReactNode;
+    /**
+     * Determine if `stepContent` is hidden
+     */
+    isStepContentHidden?: boolean;
+}
+/** Use `ProgressStepper` to illustrate the progress of a specific task within a page, by displaying a step-by-step progress through the user journey. This is commonly used in multi-step processes or wizards.  */
+declare const ProgressStepper: FC<ProgressStepperProps> & {
+    Item: typeof ProgressStepperItem;
+};
+interface ProgressStepperProps {
+    /**
+     * Children of `<ProgressStepper />` should only contain `<ProgressStepper.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * Determine a direction for `<ProgressStepper.Item />`
+     */
+    direction?: "horizontal" | "vertical";
+    /**
+     * Determine the size for `<ProgressStepper.Item />`
+     */
+    size?: "small" | "large";
+    /**
+     * Determine if `<ProgressStepper.Item />` should be Fluid. Only appliciable for `horizontal direction.`
+     */
+    isFluid?: boolean;
+    /**
+     * Determine if `<ProgressStepper.Item />` should be able to expand. This only is appliciable when direction is set to vertical
+     */
+    isExpandable?: boolean;
+}
+export { ProgressStepperItem, ProgressStepperItemProps, ProgressStepper, ProgressStepperProps };