@arc-ui/components 12.0.0-beta7 → 12.0.0

package/lib/_shared/esm/Link-CoHABYiD.mjs

@@ -0,0 +1,49 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useContext } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { T as ThemeIcon } from './ThemeIcon-B0n6cKRb.mjs';
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = useContext(Context).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps),
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
+        React__default.createElement("div", { className: classNames("arc-Link-wrapper", {
+                "arc-Link--isButton": isButton,
+            }) },
+            React__default.createElement(VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default.createElement(ThemeIcon, { icon: "linkExternal", size: size === "s" ? 20 : 24 }))))));
+};
+
+export { Link as L };

package/lib/_shared/esm/Popover-BHCEpLSa.mjs

@@ -0,0 +1,33 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { R as Root2, A as Anchor2, T as Trigger, P as Portal, C as Content2, a as PopoverArrow } from './index-Do2wfP-X.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { e as useThemeElement } from './index-Bz2JQq34.mjs';
+import { S as Surface } from './Surface-C69KVzkY.mjs';
+
+/**
+ * Use `Popover` to display content in a portal, triggered by a button.
+ */
+var Popover = function (_a) {
+    var align = _a.align, ariaLabel = _a.ariaLabel, alignOffset = _a.alignOffset, _b = _a.arrow, arrow = _b === void 0 ? true : _b, _c = _a.background, background = _c === void 0 ? "light" : _c, children = _a.children, content = _a.content, _d = _a.asChild, asChild = _d === void 0 ? false : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 452 : _e, minHeight = _a.minHeight, onCloseAutoFocus = _a.onCloseAutoFocus, onEscapeKeyDown = _a.onEscapeKeyDown, onFocusOutside = _a.onFocusOutside, onInteractOutside = _a.onInteractOutside, onOpenAutoFocus = _a.onOpenAutoFocus, onPointerDownOutside = _a.onPointerDownOutside, onOpenChange = _a.onOpenChange, open = _a.open, _f = _a.constrainToViewport, constrainToViewport = _f === void 0 ? true : _f, side = _a.side, _g = _a.sideOffset, sideOffset = _g === void 0 ? 0 : _g, _h = _a.zIndex, zIndex = _h === void 0 ? 100 : _h, _j = _a.hideWhenDetached, hideWhenDetached = _j === void 0 ? false : _j, _k = _a.useBespokeTrigger, useBespokeTrigger = _k === void 0 ? false : _k, props = __rest(_a, ["align", "ariaLabel", "alignOffset", "arrow", "background", "children", "content", "asChild", "maxWidth", "minHeight", "onCloseAutoFocus", "onEscapeKeyDown", "onFocusOutside", "onInteractOutside", "onOpenAutoFocus", "onPointerDownOutside", "onOpenChange", "open", "constrainToViewport", "side", "sideOffset", "zIndex", "hideWhenDetached", "useBespokeTrigger"]);
+    var _l = useThemeElement(), themeElement = _l[0], setThemeElement = _l[1];
+    var alignOffsetDefault = align === "center" ? 0 : -16;
+    return (React__default.createElement("div", __assign({ className: "arc-Popover" }, filterAttrs(props)),
+        React__default.createElement(Root2, { open: open, onOpenChange: onOpenChange },
+            useBespokeTrigger ? (React__default.createElement(Anchor2, { className: "arc-Popover-anchor" }, children)) : (React__default.createElement(Trigger, { "aria-label": ariaLabel, asChild: asChild, className: "arc-Popover-trigger" }, children)),
+            React__default.createElement("div", { ref: setThemeElement },
+                React__default.createElement(Portal, { container: themeElement },
+                    React__default.createElement("div", { "data-cy": "z-index", style: { position: "absolute", zIndex: zIndex } },
+                        React__default.createElement(Content2, { side: side, sideOffset: sideOffset, align: align, hideWhenDetached: hideWhenDetached, alignOffset: alignOffset !== null && alignOffset !== void 0 ? alignOffset : alignOffsetDefault, onOpenAutoFocus: onOpenAutoFocus, onCloseAutoFocus: onCloseAutoFocus, onEscapeKeyDown: onEscapeKeyDown, onPointerDownOutside: onPointerDownOutside, onFocusOutside: onFocusOutside, onInteractOutside: onInteractOutside },
+                            React__default.createElement(Surface, { isTransparent: true, background: background === "light" ? "light-white" : "dark-black" },
+                                React__default.createElement("div", { className: classNames("arc-Popover-content", {
+                                        "arc-Popover-content--dark": background === "dark",
+                                        "arc-Popover-content--brand": background === "brand",
+                                        "arc-Popover-content--constrainToViewport": constrainToViewport,
+                                    }), style: { maxWidth: maxWidth, minHeight: minHeight }, "aria-labelledby": "popover-content" },
+                                    content && React__default.createElement("div", { id: "popover-content" }, content),
+                                    arrow && (React__default.createElement(PopoverArrow, { className: "arc-Popover-arrow" })))))))))));
+};
+
+export { Popover as P };

package/lib/_shared/esm/Preview-AHYIJh9S.mjs

@@ -0,0 +1,173 @@
+import { g as getDefaultExportFromCjs } from './index-5C0-U8cc.mjs';
+import React__default from 'react';
+
+function _mergeNamespaces(n, m) {
+  m.forEach(function (e) {
+    e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+      if (k !== 'default' && !(k in n)) {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  });
+  return Object.freeze(n);
+}
+
+var Preview_1;
+var hasRequiredPreview;
+
+function requirePreview () {
+	if (hasRequiredPreview) return Preview_1;
+	hasRequiredPreview = 1;
+	var __create = Object.create;
+	var __defProp = Object.defineProperty;
+	var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+	var __getOwnPropNames = Object.getOwnPropertyNames;
+	var __getProtoOf = Object.getPrototypeOf;
+	var __hasOwnProp = Object.prototype.hasOwnProperty;
+	var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+	var __export = (target, all) => {
+	  for (var name in all)
+	    __defProp(target, name, { get: all[name], enumerable: true });
+	};
+	var __copyProps = (to, from, except, desc) => {
+	  if (from && typeof from === "object" || typeof from === "function") {
+	    for (let key of __getOwnPropNames(from))
+	      if (!__hasOwnProp.call(to, key) && key !== except)
+	        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+	  }
+	  return to;
+	};
+	var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+	  // If the importer is in node compatibility mode or this is not an ESM
+	  // file that has been converted to a CommonJS file using a Babel-
+	  // compatible transform (i.e. "__esModule" has not been set), then set
+	  // "default" to the CommonJS "module.exports" for node compatibility.
+	  !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+	  mod
+	));
+	var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+	var __publicField = (obj, key, value) => {
+	  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+	  return value;
+	};
+	var Preview_exports = {};
+	__export(Preview_exports, {
+	  default: () => Preview
+	});
+	Preview_1 = __toCommonJS(Preview_exports);
+	var import_react = __toESM(React__default);
+	const ICON_SIZE = "64px";
+	const cache = {};
+	class Preview extends import_react.Component {
+	  constructor() {
+	    super(...arguments);
+	    __publicField(this, "mounted", false);
+	    __publicField(this, "state", {
+	      image: null
+	    });
+	    __publicField(this, "handleKeyPress", (e) => {
+	      if (e.key === "Enter" || e.key === " ") {
+	        this.props.onClick();
+	      }
+	    });
+	  }
+	  componentDidMount() {
+	    this.mounted = true;
+	    this.fetchImage(this.props);
+	  }
+	  componentDidUpdate(prevProps) {
+	    const { url, light } = this.props;
+	    if (prevProps.url !== url || prevProps.light !== light) {
+	      this.fetchImage(this.props);
+	    }
+	  }
+	  componentWillUnmount() {
+	    this.mounted = false;
+	  }
+	  fetchImage({ url, light, oEmbedUrl }) {
+	    if (import_react.default.isValidElement(light)) {
+	      return;
+	    }
+	    if (typeof light === "string") {
+	      this.setState({ image: light });
+	      return;
+	    }
+	    if (cache[url]) {
+	      this.setState({ image: cache[url] });
+	      return;
+	    }
+	    this.setState({ image: null });
+	    return window.fetch(oEmbedUrl.replace("{url}", url)).then((response) => response.json()).then((data) => {
+	      if (data.thumbnail_url && this.mounted) {
+	        const image = data.thumbnail_url.replace("height=100", "height=480").replace("-d_295x166", "-d_640");
+	        this.setState({ image });
+	        cache[url] = image;
+	      }
+	    });
+	  }
+	  render() {
+	    const { light, onClick, playIcon, previewTabIndex, previewAriaLabel } = this.props;
+	    const { image } = this.state;
+	    const isElement = import_react.default.isValidElement(light);
+	    const flexCenter = {
+	      display: "flex",
+	      alignItems: "center",
+	      justifyContent: "center"
+	    };
+	    const styles = {
+	      preview: {
+	        width: "100%",
+	        height: "100%",
+	        backgroundImage: image && !isElement ? `url(${image})` : void 0,
+	        backgroundSize: "cover",
+	        backgroundPosition: "center",
+	        cursor: "pointer",
+	        ...flexCenter
+	      },
+	      shadow: {
+	        background: "radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",
+	        borderRadius: ICON_SIZE,
+	        width: ICON_SIZE,
+	        height: ICON_SIZE,
+	        position: isElement ? "absolute" : void 0,
+	        ...flexCenter
+	      },
+	      playIcon: {
+	        borderStyle: "solid",
+	        borderWidth: "16px 0 16px 26px",
+	        borderColor: "transparent transparent transparent white",
+	        marginLeft: "7px"
+	      }
+	    };
+	    const defaultPlayIcon = /* @__PURE__ */ import_react.default.createElement("div", { style: styles.shadow, className: "react-player__shadow" }, /* @__PURE__ */ import_react.default.createElement("div", { style: styles.playIcon, className: "react-player__play-icon" }));
+	    return /* @__PURE__ */ import_react.default.createElement(
+	      "div",
+	      {
+	        style: styles.preview,
+	        className: "react-player__preview",
+	        onClick,
+	        tabIndex: previewTabIndex,
+	        onKeyPress: this.handleKeyPress,
+	        ...previewAriaLabel ? { "aria-label": previewAriaLabel } : {}
+	      },
+	      isElement ? light : null,
+	      playIcon || defaultPlayIcon
+	    );
+	  }
+	}
+	return Preview_1;
+}
+
+var PreviewExports = /*@__PURE__*/ requirePreview();
+var Preview = /*@__PURE__*/getDefaultExportFromCjs(PreviewExports);
+
+var Preview$1 = /*#__PURE__*/_mergeNamespaces({
+  __proto__: null,
+  default: Preview
+}, [PreviewExports]);
+
+export { Preview$1 as P };

package/lib/_shared/esm/ProgressStepper-CujHLQsm.mjs

@@ -0,0 +1,206 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { g as getDefaultExportFromCjs, c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { c as capitaliseFirstLetter } from './capitalise-first-letter-Cubg2CS1.mjs';
+import { V as VisuallyHidden } from './VisuallyHidden-aSQ4RA1o.mjs';
+import { I as Icon } from './Icon-CCUbr_AO.mjs';
+
+var shorterCssColorNames;
+var hasRequiredShorterCssColorNames;
+
+function requireShorterCssColorNames () {
+	if (hasRequiredShorterCssColorNames) return shorterCssColorNames;
+	hasRequiredShorterCssColorNames = 1;
+	shorterCssColorNames = {
+	  aqua: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  azure: /#f0ffff(ff)?(?!\w)/gi,
+	  beige: /#f5f5dc(ff)?(?!\w)/gi,
+	  bisque: /#ffe4c4(ff)?(?!\w)/gi,
+	  black: /#000000(ff)?(?!\w)|#000(f)?(?!\w)/gi,
+	  blue: /#0000ff(ff)?(?!\w)|#00f(f)?(?!\w)/gi,
+	  brown: /#a52a2a(ff)?(?!\w)/gi,
+	  coral: /#ff7f50(ff)?(?!\w)/gi,
+	  cornsilk: /#fff8dc(ff)?(?!\w)/gi,
+	  crimson: /#dc143c(ff)?(?!\w)/gi,
+	  cyan: /#00ffff(ff)?(?!\w)|#0ff(f)?(?!\w)/gi,
+	  darkblue: /#00008b(ff)?(?!\w)/gi,
+	  darkcyan: /#008b8b(ff)?(?!\w)/gi,
+	  darkgrey: /#a9a9a9(ff)?(?!\w)/gi,
+	  darkred: /#8b0000(ff)?(?!\w)/gi,
+	  deeppink: /#ff1493(ff)?(?!\w)/gi,
+	  dimgrey: /#696969(ff)?(?!\w)/gi,
+	  gold: /#ffd700(ff)?(?!\w)/gi,
+	  green: /#008000(ff)?(?!\w)/gi,
+	  grey: /#808080(ff)?(?!\w)/gi,
+	  honeydew: /#f0fff0(ff)?(?!\w)/gi,
+	  hotpink: /#ff69b4(ff)?(?!\w)/gi,
+	  indigo: /#4b0082(ff)?(?!\w)/gi,
+	  ivory: /#fffff0(ff)?(?!\w)/gi,
+	  khaki: /#f0e68c(ff)?(?!\w)/gi,
+	  lavender: /#e6e6fa(ff)?(?!\w)/gi,
+	  lime: /#00ff00(ff)?(?!\w)|#0f0(f)?(?!\w)/gi,
+	  linen: /#faf0e6(ff)?(?!\w)/gi,
+	  maroon: /#800000(ff)?(?!\w)/gi,
+	  moccasin: /#ffe4b5(ff)?(?!\w)/gi,
+	  navy: /#000080(ff)?(?!\w)/gi,
+	  oldlace: /#fdf5e6(ff)?(?!\w)/gi,
+	  olive: /#808000(ff)?(?!\w)/gi,
+	  orange: /#ffa500(ff)?(?!\w)/gi,
+	  orchid: /#da70d6(ff)?(?!\w)/gi,
+	  peru: /#cd853f(ff)?(?!\w)/gi,
+	  pink: /#ffc0cb(ff)?(?!\w)/gi,
+	  plum: /#dda0dd(ff)?(?!\w)/gi,
+	  purple: /#800080(ff)?(?!\w)/gi,
+	  red: /#ff0000(ff)?(?!\w)|#f00(f)?(?!\w)/gi,
+	  salmon: /#fa8072(ff)?(?!\w)/gi,
+	  seagreen: /#2e8b57(ff)?(?!\w)/gi,
+	  seashell: /#fff5ee(ff)?(?!\w)/gi,
+	  sienna: /#a0522d(ff)?(?!\w)/gi,
+	  silver: /#c0c0c0(ff)?(?!\w)/gi,
+	  skyblue: /#87ceeb(ff)?(?!\w)/gi,
+	  snow: /#fffafa(ff)?(?!\w)/gi,
+	  tan: /#d2b48c(ff)?(?!\w)/gi,
+	  teal: /#008080(ff)?(?!\w)/gi,
+	  thistle: /#d8bfd8(ff)?(?!\w)/gi,
+	  tomato: /#ff6347(ff)?(?!\w)/gi,
+	  violet: /#ee82ee(ff)?(?!\w)/gi,
+	  wheat: /#f5deb3(ff)?(?!\w)/gi,
+	  white: /#ffffff(ff)?(?!\w)|#fff(f)?(?!\w)/gi,
+	};
+	return shorterCssColorNames;
+}
+
+var miniSvgDataUri;
+var hasRequiredMiniSvgDataUri;
+
+function requireMiniSvgDataUri () {
+	if (hasRequiredMiniSvgDataUri) return miniSvgDataUri;
+	hasRequiredMiniSvgDataUri = 1;
+	var shorterNames = requireShorterCssColorNames();
+	var REGEX = {
+	  whitespace: /\s+/g,
+	  urlHexPairs: /%[\dA-F]{2}/g,
+	  quotes: /"/g,
+	};
+
+	function collapseWhitespace(str) {
+	  return str.trim().replace(REGEX.whitespace, ' ');
+	}
+
+	function dataURIPayload(string) {
+	  return encodeURIComponent(string)
+	    .replace(REGEX.urlHexPairs, specialHexEncode);
+	}
+
+	// `#` gets converted to `%23`, so quite a few CSS named colors are shorter than
+	// their equivalent URL-encoded hex codes.
+	function colorCodeToShorterNames(string) {
+	  Object.keys(shorterNames).forEach(function(key) {
+	    if (shorterNames[key].test(string)) {
+	      string = string.replace(shorterNames[key], key);
+	    }
+	  });
+
+	  return string;
+	}
+
+	function specialHexEncode(match) {
+	  switch (match) { // Browsers tolerate these characters, and they're frequent
+	    case '%20': return ' ';
+	    case '%3D': return '=';
+	    case '%3A': return ':';
+	    case '%2F': return '/';
+	    default: return match.toLowerCase(); // compresses better
+	  }
+	}
+
+	function svgToTinyDataUri(svgString) {
+	  if (typeof svgString !== 'string') {
+	    throw new TypeError('Expected a string, but received ' + typeof svgString);
+	  }
+	  // Strip the Byte-Order Mark if the SVG has one
+	  if (svgString.charCodeAt(0) === 0xfeff) { svgString = svgString.slice(1); }
+
+	  var body = colorCodeToShorterNames(collapseWhitespace(svgString))
+	    .replace(REGEX.quotes, "'");
+	  return 'data:image/svg+xml,' + dataURIPayload(body);
+	}
+
+	svgToTinyDataUri.toSrcset = function toSrcset(svgString) {
+	  return svgToTinyDataUri(svgString).replace(/ /g, '%20');
+	};
+
+	miniSvgDataUri = svgToTinyDataUri;
+	return miniSvgDataUri;
+}
+
+var miniSvgDataUriExports = requireMiniSvgDataUri();
+var svgToMiniDataURI = /*@__PURE__*/getDefaultExportFromCjs(miniSvgDataUriExports);
+
+var Error = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m13.06 12 2.845-2.845a.75.75 0 0 0-1.06-1.06L12 10.94 9.155 8.095a.75.75 0 0 0-1.06 1.06L10.939 12l-2.844 2.845a.75.75 0 1 0 1.06 1.06L12 13.061l2.845 2.844a.75.75 0 0 0 1.06-1.06L13.06 12Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath id=\"a\">\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
+
+var Warning = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <path\n      d=\"M12 15.747a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm.004-1.487a.375.375 0 0 0 .375-.375l.001-6.757a.375.375 0 1 0-.75 0l-.001 6.757a.375.375 0 0 0 .375.375Z\"\n      fill=\"currentColor\"\n      stroke=\"currentColor\"\n      strokeWidth=\".3\"\n    />\n  </svg>\n";
+
+var Complete = "\n  <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n    <g clipPath=\"url(#a)\">\n      <path\n        d=\"m10.125 16.435-3.53-3.53a.75.75 0 0 1 0-1.06.768.768 0 0 1 1.06 0l2.47 2.47 6.22-6.22a.75.75 0 1 1 1.06 1.06l-7.28 7.28Z\"\n        fill=\"currentColor\"\n      />\n    </g>\n    <defs>\n      <clipPath>\n        <rect width=\"24\" height=\"24\" rx=\"12\" />\n      </clipPath>\n    </defs>\n  </svg>\n  ";
+
+var Current = "\n  <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"12\" cy=\"12\" r=\"7\" fill=\"currentColor\" />\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1_1050\"\n        x1=\"36.6036\"\n        y1=\"-4.31391e-07\"\n        x2=\"-12.6036\"\n        y2=\"24\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop stopColor=\"#F200F5\" />\n        <stop offset=\"1\" stopColor=\"#1EC8E6\" />\n      </linearGradient>\n    </defs>\n  </svg>\n  ";
+
+var ProgressStepperItem = function (_a) {
+    var _b;
+    var title = _a.title, titleHref = _a.titleHref, subTitle = _a.subTitle, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.status, status = _d === void 0 ? "todo" : _d, _e = _a.size, size = _e === void 0 ? "large" : _e, isFluid = _a.isFluid, invertLabelPosition = _a.invertLabelPosition, ariaLabel = _a.ariaLabel, onClick = _a.onClick, previousStep = _a.previousStep, stepContent = _a.stepContent, isStepContentHidden = _a.isStepContentHidden, props = __rest(_a, ["title", "titleHref", "subTitle", "direction", "status", "size", "isFluid", "invertLabelPosition", "ariaLabel", "onClick", "previousStep", "stepContent", "isStepContentHidden"]);
+    var statusIcons = {
+        todo: undefined,
+        completed: Complete,
+        current: Current,
+        warning: Warning,
+        error: Error,
+    };
+    var onClickHandler = function (event) {
+        event.preventDefault();
+        onClick && onClick();
+    };
+    var statusIcon = statusIcons[status];
+    return (React__default.createElement("div", __assign({ className: classNames("arc-ProgressStepperItem", "arc-ProgressStepperItem--".concat(status), "arc-ProgressStepperItem--".concat(size), (_b = {
+                "arc-ProgressStepperItem--vertical": direction === "vertical",
+                "arc-ProgressStepperItem--isFluid": isFluid && direction !== "vertical",
+                "arc-ProgressStepperItem--previousStepCompleted": previousStep === "completed"
+            },
+            _b["arc-ProgressStepperItem--hasInteractiveStatus"] = status !== "todo",
+            _b["arc-ProgressStepperItem--invertLabelPosition"] = direction !== "vertical" && invertLabelPosition,
+            _b)) }, filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-iconSection" },
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-iconWrapper", "data-testid": "arc-ProgressStepperItem-iconWrapper" },
+                React__default.createElement("span", { className: classNames("arc-ProgressStepperItem-statusIcon", {
+                        "arc-ProgressStepperItem-statusIcon--small": size === "small",
+                    }) }, status === "todo" ? null : status === "current" ? (React__default.createElement("div", { className: "arc-ProgressStepperItem-statusIconInner" })) : (React__default.createElement(Icon, { icon: statusIcon && svgToMiniDataURI(statusIcon) }))))),
+        React__default.createElement("div", { className: "arc-ProgressStepperItem-textSection" },
+            titleHref || onClick ? (React__default.createElement("a", { role: !titleHref && onClick ? "button" : undefined, href: titleHref, "aria-label": ariaLabel, className: classNames("arc-ProgressStepperItem-title", "arc-ProgressStepperItem-title--link"), onClick: onClickHandler },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))) : (React__default.createElement("div", { className: "arc-ProgressStepperItem-title" },
+                title,
+                status !== "todo" ? (React__default.createElement(VisuallyHidden, null,
+                    ":",
+                    capitaliseFirstLetter(status))) : (React__default.createElement(VisuallyHidden, null, ":To do")))),
+            React__default.createElement("div", { className: "arc-ProgressStepperItem-subTitle" }, subTitle),
+            stepContent && !isStepContentHidden && direction === "vertical" && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-ProgressStepperItem-nodeItem" }, stepContent))))));
+};
+
+/** Use `ProgressStepper` to provide an overview of a series of steps in a digital journey. */
+var ProgressStepper = function (_a) {
+    var children = _a.children, size = _a.size, isFluid = _a.isFluid, direction = _a.direction, isExpandable = _a.isExpandable, invertLabelPosition = _a.invertLabelPosition, ref = _a.ref, props = __rest(_a, ["children", "size", "isFluid", "direction", "isExpandable", "invertLabelPosition", "ref"]);
+    var items = React__default.Children.toArray(children);
+    var getStepStatus = function (item) {
+        var _a;
+        return (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.status;
+    };
+    return (React__default.createElement("div", __assign({ ref: ref, className: classNames("arc-ProgressStepper", {
+            "arc-ProgressStepper--vertical": direction === "vertical",
+        }) }, filterAttrs(props)), items.map(function (item, index) { return (React__default.createElement(React__default.Fragment, { key: "StepperItem-".concat(index) },
+        React__default.createElement(ProgressStepperItem, __assign({ title: item.props.title, titleHref: item.props.titleHref, subTitle: item.props.subTitle, status: item.props.status, stepContent: item.props.stepContent, isStepContentHidden: item.props.isStepContentHidden, onClick: item.props.onClick, isFluid: isFluid, invertLabelPosition: invertLabelPosition, direction: direction, isExpandable: isExpandable, size: size, previousStep: getStepStatus(items[index - 1]) }, filterAttrs(item.props))))); })));
+};
+
+export { ProgressStepper as P, ProgressStepperItem as a };

package/lib/_shared/esm/Rule-I1w3EaZi.mjs

@@ -0,0 +1,22 @@
+import { a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { useContext } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+import { C as Context } from './Surface-C69KVzkY.mjs';
+
+/**
+ * Use `Rule` to display a horizontal or vertical rule.
+ */
+var Rule = function (_a, props) {
+    var _b;
+    var _c = _a.orientation, orientation = _c === void 0 ? "horizontal" : _c;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("hr", __assign({ className: classNames((_b = {
+                "arc-Rule": true
+            },
+            _b["arc-Rule--".concat(orientation)] = true,
+            _b["arc-Rule--onDarkSurface"] = surface === "dark",
+            _b)) }, filterAttrs(props))));
+};
+
+export { Rule as R };

package/lib/_shared/esm/Section-COc1l3mp.mjs

@@ -0,0 +1,20 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+
+/**
+ * Use `Section` to compose content into vertical page layouts.
+ */
+var Section = function (_a) {
+    var children = _a.children, _b = _a.isFullWidth, isFullWidth = _b === void 0 ? false : _b, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, _d = _a.isExtended, isExtended = _d === void 0 ? false : _d, id = _a.id, props = __rest(_a, ["children", "isFullWidth", "isDebugVisible", "isExtended", "id"]);
+    return (React__default.createElement("div", __assign({ id: id, className: classNames({
+            "arc-Section": true,
+            "arc-Section--regular": !isExtended,
+            "arc-Section--extended": isExtended,
+            "arc-Section--fullWidth": isFullWidth,
+            "arc-Section--debugVisible": isDebugVisible,
+        }) }, filterAttrs(props)), children));
+};
+
+export { Section as S };

package/lib/_shared/esm/SemanticHeading-DpEBq7pG.mjs

@@ -0,0 +1,14 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+
+/**
+ * Use `SemanticHeading` to render accessible headings that preserve correct
+ * document hierarchy.
+ */
+var SemanticHeading = function (_a) {
+    var children = _a.children, level = _a.level, className = _a.className, props = __rest(_a, ["children", "level", "className"]);
+    return React__default.createElement(level ? "h".concat(level) : "span", __assign({ className: classNames("arc-SemanticHeading", className) }, props), children);
+};
+
+export { SemanticHeading as S };

package/lib/_shared/esm/Spinner-DvngCIwx.mjs

@@ -0,0 +1,15 @@
+import { _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+
+/**
+ * Use `Spinner` to display a loading state.
+ */
+var Spinner = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? "m" : _b, color = _a.color, props = __rest(_a, ["size", "color"]);
+    return (React__default.createElement("svg", __assign({ className: classNames("arc-Spinner", "arc-Spinner-".concat(color), "arc-Spinner-size--".concat(size)), width: typeof size === "number" ? "".concat(size, "px") : undefined, "data-testid": "arc-Spinner", "aria-label": "loading", viewBox: "0 0 48 48", xmlns: "http://www.w3.org/2000/svg" }, filterAttrs(props)),
+        React__default.createElement("circle", { cx: "24", cy: "24", fill: "none", r: "22", strokeWidth: "4", strokeLinecap: "round" })));
+};
+
+export { Spinner as S };

package/lib/_shared/esm/Surface-C69KVzkY.mjs

@@ -0,0 +1,51 @@
+import { b as __spreadArray, _ as __rest, a as __assign } from './tslib.es6-w7hdJ3oZ.mjs';
+import React__default, { createContext } from 'react';
+import { c as classNames } from './index-5C0-U8cc.mjs';
+import { c as camelcase } from './index-Spae4j7j.mjs';
+import { f as filterAttrs } from './filter-attrs-v_SweZXP.mjs';
+
+var defaultContext = { surface: "light" };
+var Context = createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `Surface` to compose content using the Arc system.
+ */
+var Surface = function (_a) {
+    var _b;
+    var background = _a.background, children = _a.children, _c = _a.growVertically, growVertically = _c === void 0 ? false : _c, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, isTransparent = _a.isTransparent, props = __rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical", "isTransparent"]);
+    var surface = "light";
+    if (background === "dark-black" ||
+        background === "dark-brand-01" ||
+        background === "dark-brand-02" ||
+        background === "dark-neutral-01" ||
+        background === "dark-neutral-02") {
+        surface = "dark";
+    }
+    return (React__default.createElement(Provider, { value: { surface: surface } },
+        React__default.createElement("div", __assign({ "data-testid": "arc-surface", className: classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background && camelcase(background), "Background")] = background,
+                _b["arc-Surface--growVertically"] = growVertically,
+                _b["arc-Surface--padding".concat(padding)] = padding,
+                _b["arc-Surface--paddingHorizontal".concat(paddingHorizontal)] = paddingHorizontal,
+                _b["arc-Surface--paddingVertical".concat(paddingVertical)] = paddingVertical,
+                _b["arc-Surface--isTransparent"] = isTransparent,
+                _b)) }, filterAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "dark-black",
+    "dark-brand-01",
+    "dark-brand-02",
+    "dark-neutral-01",
+    "dark-neutral-02",
+    "light-brand-01",
+    "light-brand-02",
+    "light-neutral-01",
+    "light-neutral-02",
+    "light-white",
+];
+var backgrounds = __spreadArray([], backgroundsShared, true);
+var backgroundsBT = __spreadArray([], backgroundsShared, true);
+
+export { Context as C, Surface as S, backgroundsBT as a, backgrounds as b };