@arc-ui/components 10.8.0 → 11.0.0

package/dist/_shared/cjs/suffix-modifier-edf7851e.js

@@ -0,0 +1,19 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+
+/**
+ * Suffixes a modifier value onto the end of a className, converting it to
+ * pascal case. i.e. turns suffixModifier("MyComponent--display", display)
+ * returns MyComponent--displayBlock.
+ *
+ * @param rootClassName The root className to append the suffix onto
+ * @param suffix The suffix to convert into pascal case.
+ */
+var suffixModifier = function (rootClassName, suffix) {
+    return "".concat(rootClassName).concat(index.camelCase(suffix, {
+        pascalCase: true
+    }));
+};
+
+exports.suffixModifier = suffixModifier;

package/dist/_shared/esm/BrandLogo-ea3dd0e6.d.ts

@@ -0,0 +1,26 @@
+import { FC } from "react";
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+declare const BrandLogo: FC<BrandLogoProps>;
+declare const colors: readonly ["auto", "brand"];
+declare const subBrands: readonly ["redcare", "wholesale"];
+interface BrandLogoProps {
+    /**
+     * Color of the BrandLogo. The `brand` color only shows on light surfaces.
+     */
+    color?: typeof colors[number];
+    /**
+     * Accessible text for the BrandLogo.
+     */
+    label?: string;
+    /**
+     * Size of the BrandLogo, in pixels.
+     */
+    size?: number;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+export { BrandLogo, colors, subBrands, BrandLogoProps };

package/dist/_shared/{BrandLogo-6cc8202e.js → esm/BrandLogo-ea3dd0e6.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `BrandLogo` to display the brand logo.

package/dist/_shared/esm/BtIconChevronDown2Px-4abd079b.js

@@ -0,0 +1,23 @@
+import React$1 from 'react';
+
+const React = React$1;
+const BtIconChevronDown2Px = 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("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"
+    })
+  );
+var BtIconChevronDown2Px_2 = BtIconChevronDown2Px;
+
+export { BtIconChevronDown2Px_2 as B };

package/dist/_shared/esm/BtIconChevronRight2Px-a5cc1d05.js

@@ -0,0 +1,43 @@
+import React$2 from 'react';
+
+const React$1 = React$2;
+const BtIconChevronLeft2Px = 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", {
+      d:
+        "M22.5,29.99854a.99676.99676,0,0,1-.707-.293L8.08594,15.99268,21.793,2.294A1.00023,1.00023,0,0,1,23.207,3.709l-12.293,12.28467L23.207,28.2915a1,1,0,0,1-.707,1.707Z",
+      fill: "currentColor"
+    })
+  );
+var BtIconChevronLeft2Px_2 = BtIconChevronLeft2Px;
+
+const React = React$2;
+const BtIconChevronRight2Px = 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("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 BtIconChevronRight2Px_2 = BtIconChevronRight2Px;
+
+export { BtIconChevronLeft2Px_2 as B, BtIconChevronRight2Px_2 as a };

package/dist/_shared/esm/BtIconChevronRightMid-386cf272.js

@@ -0,0 +1,25 @@
+import React$1 from 'react';
+
+const React = React$1;
+const BtIconChevronRightMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.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"
+    })
+  );
+var BtIconChevronRightMid_2 = BtIconChevronRightMid;
+
+export { BtIconChevronRightMid_2 as B };

package/dist/_shared/esm/Button-5ff56a7b.d.ts

@@ -0,0 +1,98 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
+type ElementUnion = HTMLButtonElement | HTMLAnchorElement;
+type Ref = React.Ref<ElementUnion> | null;
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+declare const Button: FC<ButtonProps>;
+interface ButtonIconProps {
+    /**
+     * Icon variant.
+     */
+    icon?: ArcIcon;
+    /**
+     * Should the icon be a default chevron?
+     */
+    isChevron?: boolean;
+    /**
+     * Should the icon be positioned before button text?
+     */
+    isBeforeText?: boolean;
+}
+interface ButtonElementProps {
+    /**
+     * Default behavior of the Button element. If not provided, 'submit' will
+     * be inferred. Type 'reset' deliberately excluded.
+     */
+    type?: "button" | "submit";
+}
+interface LinkElementProps {
+    /**
+     * URL to link to if Button elementType is 'a'.
+     */
+    href?: string;
+    /**
+     * Target window for the Button href URL.
+     */
+    target?: string;
+    /**
+     * Relationship between the Button href URL and the current page. See
+     * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
+     */
+    rel?: string;
+}
+interface ButtonProps extends ButtonElementProps, LinkElementProps {
+    /**
+     * Text to override `label` with additional, more precise information
+     * specifically for screen reader users.
+     */
+    ariaLabel?: string;
+    /**
+     * Button fill.
+     */
+    fill?: "solid" | "outlined" | "flat";
+    /**
+     * Button icon variant.
+     */
+    icon?: ArcIcon;
+    /**
+     * How should a Button icon be displayed?
+     */
+    iconPosition?: "afterText" | "beforeText" | "iconOnly";
+    /**
+     * HTML ID for the Button
+     */
+    id?: string;
+    /**
+     * Should the Button be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Should the Button’s CSS display property be set to block?
+     */
+    isDisplayBlock?: boolean;
+    /**
+     * Should the Button take up the full width of its container?
+     */
+    isFullWidth?: boolean;
+    /**
+     * Button text.
+     */
+    label: string;
+    /**
+     * Optional click handler for the Button.
+     */
+    onClick?: () => void;
+    /**
+     * Optional property to provide component Ref
+     */
+    ref?: Ref;
+    /**
+     * Optional supporting text for the Button.
+     */
+    supportingText?: string;
+}
+export { ElementUnion, Ref, Button, ButtonIconProps, ButtonProps };

package/dist/_shared/esm/Button-5ff56a7b.js

@@ -0,0 +1,74 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import React$1, { forwardRef, useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from './BtIconChevronRightMid-386cf272.js';
+import { c as classNames } from './index-2ae58626.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { I as Icon } from './Icon-76d0d8c0.js';
+import { C as Context } from './Surface-d515d212.js';
+
+const React = React$1;
+const BtIconChevronLeftMid = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.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"
+    })
+  );
+var BtIconChevronLeftMid_2 = BtIconChevronLeftMid;
+
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+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 surface = useContext(Context).surface;
+    var buttonClasses = classNames((_b = {
+            "arc-Button": true,
+            "arc-Button--displayBlock": isDisplayBlock
+        },
+        _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["arc-Button--hasSupportingText"] = supportingText,
+        _b["arc-Button--onDarkSurface"] = surface === "dark",
+        _b));
+    var commonProps = __assign({ id: id, onClick: onClick, ref: ref }, filterDataAttrs(props));
+    var buttonText = supportingText ? (React$1.createElement("span", null,
+        React$1.createElement("span", { className: "arc-Button-text" }, label),
+        React$1.createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React$1.createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React$1.createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    if (href && !isDisabled) {
+        return (React$1.createElement("a", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React$1.createElement("span", { className: "arc-Button-inner" },
+                buttonText,
+                buttonIcon)));
+    }
+    return (React$1.createElement("button", __assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React$1.createElement("span", { className: "arc-Button-inner" },
+            buttonText,
+            buttonIcon)));
+});
+var ButtonIcon = function (_a) {
+    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
+    return (React$1.createElement("span", { className: classNames({
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
+        }) }, isChevron ? (React$1.createElement(Icon, { icon: isBeforeText ? BtIconChevronLeftMid_2 : BtIconChevronRightMid_2 })) : (React$1.createElement(Icon, { icon: icon }))));
+};
+
+export { Button as B };

package/dist/_shared/esm/Curve-cfdca379.d.ts

@@ -0,0 +1,32 @@
+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.
+ */
+declare const Curve: FC<CurveProps>;
+declare const sizes: readonly ["s", "m", "l"];
+declare const positions: readonly ["bottom", "bottomLeft", "bottomRight", "top", "topLeft", "topRight"];
+interface CurveProps {
+    /**
+     * Bottom color of the Curve. Shares values with Surface.
+     */
+    bottomColor?: typeof backgroundsBT[number];
+    /**
+     * Positional variants of the Curve.
+     */
+    from?: typeof positions[number];
+    /**
+     * Should the Curve colors be flipped? Normally used at the top of Poster.
+     */
+    isInverted?: boolean;
+    /**
+     * Size of the Curve.
+     */
+    size?: typeof sizes[number];
+    /**
+     * Top color of the Curve. Shares values with Surface.
+     */
+    topColor?: typeof backgroundsBT[number];
+}
+export { Curve, sizes, positions, CurveProps };

package/dist/_shared/{Curve-5f476d0b.js → esm/Curve-cfdca379.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
 
 /**
  * Use `Curve` sparingly to soften edges and create a more natural, less rigid

package/dist/_shared/esm/FormControl-feedc495.d.ts

@@ -0,0 +1,70 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+declare const useAriaDescribedby: ({ id, idError, idHelper, errorMessage, helper }: {
+    id?: string | undefined;
+    idError?: string | undefined;
+    idHelper?: string | undefined;
+    errorMessage?: any;
+    helper?: any;
+}) => {
+    ariaDescribedby: undefined;
+    idHelper: undefined;
+    idError: undefined;
+} | {
+    ariaDescribedby: string | undefined;
+    idError: string;
+    idHelper: string;
+};
+type RequirementStatus = "required" | "optional" | "not-applicable";
+declare const Context: React.Context<{
+    requirementStatus: RequirementStatus | null;
+}>;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+declare const FormControl: FC<FormControlProps>;
+interface FormControlProps {
+    /**
+     * Render the input or series of inputs
+     */
+    children: React.ReactNode;
+    /**
+     * HTML Element type for the FormControl.
+     * @default 'div'
+     */
+    elementType?: "div" | "fieldset";
+    /**
+     * Error message for the FormControl.
+     */
+    errorMessage?: string;
+    /**
+     * Helper text for the FormControl, shown below the label.
+     */
+    helper?: React.ReactNode;
+    /**
+     * ID for the input that the FormControl points towards.
+     */
+    htmlFor?: string;
+    /**
+     * ID for the FormControl. Used for helper and errorMessage if `htmlFor` is undefined.
+     */
+    id?: string;
+    /**
+     * Are all of the inputs in the FormControl required, optional, or is a
+     * uniform requirement status for all inputs not applicable?
+     */
+    requirementStatus?: RequirementStatus;
+    /**
+     * Label for the FormControl.
+     */
+    label: string;
+    /**
+     * Label size.
+     */
+    labelSize?: "s" | "l";
+}
+export { useAriaDescribedby, FormControl, FormControlProps, Context as FormControlContext };

package/dist/_shared/{FormControl-9dc9ecc3.js → esm/FormControl-feedc495.js}

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
-import React, { createContext, useContext } from 'react';
-import { C as Context$1 } from './Surface-3fe44a2a.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
+import React$1, { createContext, useContext } from 'react';
+import { C as Context$1 } from './Surface-d515d212.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -26,6 +26,35 @@ var useAriaDescribedby = function (_a) {
     return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
 };
 
+const React = React$1;
+const BtIconAlert = 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("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.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.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"
+    })
+  );
+var BtIconAlert_2 = BtIconAlert;
+
 var defaultContext = {
     requirementStatus: null
 };
@@ -57,18 +86,21 @@ var FormControl = function (_a) {
     else {
         elementProps["aria-describedby"] = ariaDescribedby;
     }
-    return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, __assign({ className: classNames({
+    return (React$1.createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React$1.createElement(ElementType, __assign({ className: classNames({
                 "arc-FormControl": true,
                 "arc-FormControl--smallLabel": labelSize === "s",
                 "arc-FormControl--onDarkSurface": surface === "dark"
             }), id: id }, elementProps, filterDataAttrs(props)),
-            React.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
+            React$1.createElement(LabelType, __assign({ className: "arc-FormControl-label" }, labelProps),
                 label,
-                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
-            helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+                requirementStatus === "optional" && (React$1.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React$1.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
             children,
-            errorMessage && (React.createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+            errorMessage && (React$1.createElement("div", { className: "arc-FormControl-error", id: idError },
+                React$1.createElement("span", { className: "arc-FormControl-error--icon" },
+                    React$1.createElement(BtIconAlert_2, null)),
+                errorMessage)))));
 };
 
-export { Context as C, FormControl as F, useAriaDescribedby as u };
+export { BtIconAlert_2 as B, Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/Heading-183be76c.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Heading` to display heading text.
+ */
+declare const Heading: FC<HeadingProps> & {
+    Proposition: typeof HeadingProposition;
+};
+declare const HeadingProposition: FC<HeadingPropositionProps>;
+interface HeadingPropositionProps {
+    /**
+     * Text to display in the Proposition.
+     */
+    children: ReactNode;
+}
+type HeadingCasing = "auto" | "none";
+type HeadingColor = "auto" | "brand";
+type HeadingLevel = "1" | "2" | "3" | "4" | "5" | "6";
+type HeadingSize = "xxxs" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl" | "xxxl";
+interface HeadingProps {
+    /**
+     * Text alignment of the Heading.
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Typographic casing of the Heading.
+     */
+    casing?: HeadingCasing;
+    /**
+     * Text and inline markup to display in the Heading.
+     */
+    children: ReactNode;
+    /**
+     * The color of the Heading.
+     */
+    color?: HeadingColor;
+    /**
+     * HTML section heading level. If not provided, the Heading will render as
+     * a span.
+     */
+    level?: HeadingLevel;
+    /**
+     * Typographic size of the Heading.
+     */
+    size?: HeadingSize;
+}
+export { Heading, HeadingProposition, HeadingPropositionProps, HeadingCasing, HeadingColor, HeadingLevel, HeadingSize, HeadingProps };

package/dist/_shared/{Heading-8c640dd1.js → esm/Heading-183be76c.js}

@@ -1,8 +1,8 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-e3c83626.js';
-import { c as classNames } from './index-56d9df62.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import { c as classNames } from './index-2ae58626.js';
 import React, { useContext } from 'react';
-import { s as suffixModifier } from './suffix-modifier-2a93822c.js';
-import { C as Context } from './Surface-3fe44a2a.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
 
 /**
  * Use `Heading` to display heading text.

package/dist/_shared/esm/Icon-76d0d8c0.d.ts

@@ -0,0 +1,34 @@
+import { FC } from "react";
+import { ArcIcon } from "./arc-icon-17594b2f";
+/**
+ * Use `Icon` to display brand iconography.
+ */
+declare const Icon: FC<IconProps>;
+declare const colors: readonly ["auto", "brand", "statusRed", "statusAmber", "statusGreen"];
+interface IconProps {
+    /**
+     * Color of the Icon.
+     */
+    color?: typeof colors[number];
+    /**
+     * Should the Icon component be styled as an inline element?
+     */
+    isInline?: boolean;
+    /**
+     * Icon variant.
+     */
+    icon?: ArcIcon;
+    /**
+     * Alternative text label for the Icon.
+     */
+    label?: string;
+    /**
+     * Size of the Icon, in pixels.
+     */
+    size?: number;
+    /**
+     * value for data-testid
+     */
+    testId?: string;
+}
+export { Icon, colors, IconProps };

package/dist/_shared/esm/Icon-76d0d8c0.js

@@ -0,0 +1,46 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+import React$1, { useContext } from 'react';
+import { c as classNames } from './index-2ae58626.js';
+import { s as suffixModifier } from './suffix-modifier-f5e28822.js';
+import { C as Context } from './Surface-d515d212.js';
+
+const React = React$1;
+const ArcIconArc = props =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        xmlns: "http://www.w3.org/2000/svg"
+      },
+      props
+    ),
+    /*#__PURE__*/ React.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"
+    })
+  );
+var ArcIconArc_2 = ArcIconArc;
+
+/**
+ * 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_2 : _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 surface = useContext(Context).surface;
+    var Icon = icon;
+    return (React$1.createElement("span", __assign({ "data-testid": testId, "aria-label": label, className: classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, filterDataAttrs(props)),
+        React$1.createElement(Icon, null)));
+};
+
+export { Icon as I };