@arc-ui/components 10.7.0 → 10.8.1

package/dist/VerticalSpace/VerticalSpace.esm.d.ts

@@ -0,0 +1,18 @@
+import { FC } from "react";
+/**
+ * Use `VerticalSpace` to create vertical space between components.
+ */
+declare const VerticalSpace: FC<VerticalSpaceProps>;
+type VerticalSpaceSize = "4" | "8" | "12" | "16" | "24" | "32" | "48" | "64" | "96" | "128";
+interface VerticalSpaceProps {
+    /**
+     * Should the VerticalSpace be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Size of the VerticalSpace.
+     */
+    size?: VerticalSpaceSize;
+}
+export { VerticalSpace };

package/dist/VerticalSpace/{index.js → VerticalSpace.esm.js}

@@ -1,5 +1,5 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/index-e3c83626.js';
-import { c as classNames } from '../_shared/index-56d9df62.js';
+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';
 
 /**

package/dist/VerticalSpace/package.json

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

package/dist/VisuallyHidden/VisuallyHidden.cjs.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+var VisuallyHidden = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("div", { "data-testid": "visually-hidden", className: "arc-VisuallyHidden" }, children));
+};
+
+exports.VisuallyHidden = VisuallyHidden;

package/dist/VisuallyHidden/VisuallyHidden.esm.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+/**
+ * Provides text for screen readers that is visually hidden.
+ */
+declare const VisuallyHidden: FC<VisuallyHiddenProps>;
+interface VisuallyHiddenProps {
+    /**
+     * Content to be Visually Hidden.
+     */
+    children?: ReactNode;
+}
+export { VisuallyHidden };

package/dist/VisuallyHidden/package.json

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

package/dist/_shared/cjs/BrandLogo-3c6102ef.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `BrandLogo` to display the brand logo.
+ */
+var BrandLogo = function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, label = _a.label, _d = _a.size, size = _d === void 0 ? 34 : _d, subBrand = _a.subBrand, props = index.__rest(_a, ["color", "label", "size", "subBrand"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-BrandLogo": true,
+                "arc-BrandLogo--colorBrand": color === "brand",
+                "arc-BrandLogo--onDarkSurface": surface === "dark"
+            },
+            _b[suffixModifier.suffixModifier("arc-BrandLogo--subBrand", subBrand || "")] = subBrand,
+            _b)), style: {
+            width: size !== 34 ? size : undefined
+        } }, index.filterDataAttrs(props)), label ? React__default["default"].createElement("span", { className: "arc-BrandLogo-text" }, label) : null));
+};
+
+exports.BrandLogo = BrandLogo;

package/dist/_shared/cjs/Button-1743b3ec.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Icon = require('./Icon-bb5a5fd1.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Button` to allow users to take actions with clicks and taps.
+ */
+var Button = React.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 = index.__rest(_a, ["ariaLabel", "fill", "href", "icon", "iconPosition", "id", "isDisabled", "isDisplayBlock", "isFullWidth", "label", "onClick", "rel", "supportingText", "target", "type"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var buttonClasses = index$1.classNames((_b = {
+            "arc-Button": true,
+            "arc-Button--displayBlock": isDisplayBlock
+        },
+        _b[suffixModifier.suffixModifier("arc-Button--fill", fill)] = fill !== "solid",
+        _b["arc-Button--fullWidth"] = isFullWidth,
+        _b[suffixModifier.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 = index.__assign({ id: id, onClick: onClick, ref: ref }, index.filterDataAttrs(props));
+    var buttonText = supportingText ? (React__default["default"].createElement("span", null,
+        React__default["default"].createElement("span", { className: "arc-Button-text" }, label),
+        React__default["default"].createElement("span", { className: "arc-Button-supportingText" }, supportingText))) : (React__default["default"].createElement("span", { className: "arc-Button-text" }, label));
+    var buttonIcon = icon || fill === "flat" ? (React__default["default"].createElement(ButtonIcon, { icon: icon, isChevron: !icon && fill === "flat", isBeforeText: iconPosition === "beforeText" })) : null;
+    if (href && !isDisabled) {
+        return (React__default["default"].createElement("a", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, href: href, rel: rel, target: target }),
+            React__default["default"].createElement("span", { className: "arc-Button-inner" },
+                buttonText,
+                buttonIcon)));
+    }
+    return (React__default["default"].createElement("button", index.__assign({}, commonProps, { "aria-label": ariaLabel, className: buttonClasses, disabled: isDisabled, type: type }),
+        React__default["default"].createElement("span", { className: "arc-Button-inner" },
+            buttonText,
+            buttonIcon)));
+});
+var ButtonIcon = function (_a) {
+    var icon = _a.icon, isChevron = _a.isChevron, isBeforeText = _a.isBeforeText;
+    return (React__default["default"].createElement("span", { className: index$1.classNames({
+            "arc-Button-icon": true,
+            "arc-Button-icon--chevron": isChevron
+        }) }, isChevron ? (React__default["default"].createElement(Icon.Icon, { icon: "btChevron".concat(isBeforeText ? "Left" : "Right", "Mid") })) : (React__default["default"].createElement(Icon.Icon, { icon: icon }))));
+};
+
+exports.Button = Button;

package/dist/_shared/{Curve-5f476d0b.d.ts → cjs/Curve-e72ce25b.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { backgroundsBT } from "../Surface/index";
+import { backgroundsBT } from "../../Surface/Surface.cjs";
 /**
  * Use `Curve` sparingly to soften edges and create a more natural, less rigid
  * look and feel.

package/dist/_shared/cjs/Curve-e72ce25b.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Curve` sparingly to soften edges and create a more natural, less rigid
+ * look and feel.
+ */
+var Curve = function (_a) {
+    var _b;
+    var bottomColor = _a.bottomColor, _c = _a.from, from = _c === void 0 ? "top" : _c, _d = _a.isInverted, isInverted = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "m" : _e, topColor = _a.topColor, props = index.__rest(_a, ["bottomColor", "from", "isInverted", "size", "topColor"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-Curve": true
+            },
+            _b[suffixModifier.suffixModifier("arc-Curve--from", from)] = from && from !== "top",
+            _b["arc-Curve--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b[suffixModifier.suffixModifier("arc-Curve--bottomColor", bottomColor || "")] = bottomColor,
+            _b[suffixModifier.suffixModifier("arc-Curve--topColor", topColor || "")] = topColor,
+            _b["arc-Curve--inverted"] = isInverted,
+            _b)) }, index.filterDataAttrs(props))));
+};
+
+exports.Curve = Curve;

package/dist/_shared/cjs/FormControl-7d8e10fa.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Optionally define ariaDescribedBy if errorMessage or helper exist.
+ */
+var useAriaDescribedby = function (_a) {
+    var id = _a.id, _b = _a.idError, idError = _b === void 0 ? "".concat(id, "-error") : _b, _c = _a.idHelper, idHelper = _c === void 0 ? "".concat(id, "-helper") : _c, errorMessage = _a.errorMessage, helper = _a.helper;
+    if (!id) {
+        return {
+            ariaDescribedby: undefined,
+            idHelper: undefined,
+            idError: undefined
+        };
+    }
+    var ariaDescribedbyArr = [];
+    if (errorMessage) {
+        ariaDescribedbyArr.push(idError);
+    }
+    if (helper) {
+        ariaDescribedbyArr.push(idHelper);
+    }
+    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
+    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper };
+};
+
+var defaultContext = {
+    requirementStatus: null
+};
+var Context = React.createContext(defaultContext);
+var Provider = Context.Provider;
+/**
+ * Use `FormControl` to provide inputs with labels, helper text and error messages
+ */
+var FormControl = function (_a) {
+    var children = _a.children, _b = _a.elementType, ElementType = _b === void 0 ? "div" : _b, errorMessage = _a.errorMessage, helper = _a.helper, htmlFor = _a.htmlFor, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _e = useAriaDescribedby({
+        errorMessage: errorMessage,
+        helper: helper,
+        id: htmlFor || id // `htmlFor` is preference to keep this deterministic with TextInput
+    }), ariaDescribedby = _e.ariaDescribedby, idError = _e.idError, idHelper = _e.idHelper;
+    var LabelType = ElementType === "div" ? "label" : "legend";
+    var elementProps = {};
+    var labelProps = {};
+    if (LabelType === "label") {
+        labelProps["htmlFor"] = htmlFor;
+        if (htmlFor) {
+            labelProps["id"] = "".concat(htmlFor, "-label");
+        }
+        else if (id) {
+            labelProps["id"] = "".concat(id, "-label");
+        }
+    }
+    else {
+        elementProps["aria-describedby"] = ariaDescribedby;
+    }
+    return (React__default["default"].createElement(Provider, { value: { requirementStatus: requirementStatus } },
+        React__default["default"].createElement(ElementType, index.__assign({ className: index$1.classNames({
+                "arc-FormControl": true,
+                "arc-FormControl--smallLabel": labelSize === "s",
+                "arc-FormControl--onDarkSurface": surface === "dark"
+            }), id: id }, elementProps, index.filterDataAttrs(props)),
+            React__default["default"].createElement(LabelType, index.__assign({ className: "arc-FormControl-label" }, labelProps),
+                label,
+                requirementStatus === "optional" && (React__default["default"].createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
+            helper && (React__default["default"].createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper)),
+            children,
+            errorMessage && (React__default["default"].createElement("div", { className: "arc-FormControl-error", id: idError }, errorMessage)))));
+};
+
+exports.Context = Context;
+exports.FormControl = FormControl;
+exports.useAriaDescribedby = useAriaDescribedby;

package/dist/_shared/cjs/Heading-cc38c3ec.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Heading` to display heading text.
+ */
+var Heading = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, _d = _a.casing, casing = _d === void 0 ? "auto" : _d, children = _a.children, _e = _a.color, color = _e === void 0 ? "auto" : _e, level = _a.level, size = _a.size, props = index.__rest(_a, ["align", "casing", "children", "color", "level", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var Element = "span";
+    if (level) {
+        Element = "h".concat(level);
+    }
+    return (React__default["default"].createElement(Element, index.__assign({ className: index$1.classNames((_b = {
+                "arc-Heading": true
+            },
+            _b[suffixModifier.suffixModifier("arc-Heading--align", align)] = align && align !== "left",
+            _b["arc-Heading--size".concat(size && size.toUpperCase())] = size,
+            _b["arc-Heading--casingNone"] = casing === "none",
+            _b["arc-Heading--colorBrand"] = color === "brand",
+            _b["arc-Heading--onDarkSurface"] = surface === "dark",
+            _b)) }, index.filterDataAttrs(props)), children));
+};
+var HeadingProposition = function (_a) {
+    var children = _a.children;
+    return React__default["default"].createElement("span", { className: "arc-Heading-proposition" }, children);
+};
+HeadingProposition.displayName = "Heading.Proposition";
+Heading.Proposition = HeadingProposition;
+
+exports.Heading = Heading;

package/dist/_shared/cjs/Icon-bb5a5fd1.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index_es = require('./index.es-f590caaf.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Icon` to display brand iconography.
+ */
+var Icon = function (_a) {
+    var _b;
+    var _c = _a.color, color = _c === void 0 ? "auto" : _c, icon = _a.icon, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isSelected, isSelected = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = index.__rest(_a, ["color", "icon", "isInline", "isSelected", "label", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("span", index.__assign({ "aria-label": label, className: index$1.classNames((_b = {},
+            _b["arc-Icon"] = true,
+            _b[suffixModifier.suffixModifier("arc-Icon--color", color)] = color !== "auto",
+            _b["arc-Icon--".concat(icon).concat(isSelected && index_es.iconsSelected.includes("".concat(icon, "Fill")) ? "Fill" : "")] = icon,
+            _b["arc-Icon--inline"] = isInline,
+            _b["arc-Icon--onDarkSurface"] = surface === "dark",
+            _b)), role: label ? "img" : undefined, style: {
+            height: size,
+            width: size
+        } }, index.filterDataAttrs(props))));
+};
+
+exports.Icon = Icon;

package/dist/_shared/cjs/Image-fe760a06.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Image` to render a single image, or set of images, with support for
+ * image fitting and art direction.
+ */
+var Image = function (_a) {
+    var _b;
+    var alt = _a.alt, _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, children = _a.children, fillColor = _a.fillColor, fit = _a.fit, height = _a.height, loading = _a.loading, overlay = _a.overlay, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, width = _a.width, props = index.__rest(_a, ["alt", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
+    React.useEffect(function () {
+        React__default["default"].Children.map(children, function (item) {
+            if (item && item.type !== ImageSource) {
+                throw new Error("Illegal child passed to <Image />. Ensure to only use <Image.Source />.");
+            }
+        });
+    }, [children]);
+    var img = (React__default["default"].createElement("img", { className: "arc-Image-img", alt: alt, height: fit === "cover" ? undefined : height, loading: loading, sizes: children ? undefined : sizes, src: src, srcSet: children ? undefined : srcSet, width: fit === "cover" ? undefined : width }));
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                "arc-Image": true,
+                "arc-Image--cover": fit === "cover"
+            },
+            _b["arc-Image--anchor".concat(anchor)] = fit === "cover",
+            _b[suffixModifier.suffixModifier("arc-Image--overlay", overlay || "")] = overlay,
+            _b)), style: index.__assign(index.__assign(index.__assign({}, (fillColor && { backgroundColor: fillColor })), (fit === "cover" && height ? { height: "".concat(height, "px") } : null)), (fit === "cover" && width ? { width: "".concat(width, "px") } : null)) }, index.filterDataAttrs(props)), children ? (React__default["default"].createElement("picture", null,
+        children,
+        " ",
+        img)) : (React__default["default"].createElement(React__default["default"].Fragment, null, img))));
+};
+var ImageSource = function (_a) {
+    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type; _a.width; var props = index.__rest(_a, ["height", "media", "srcSet", "sizes", "type", "width"]);
+    return (React__default["default"].createElement("source", index.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, index.filterDataAttrs(props))));
+};
+ImageSource.displayName = "Image.Source";
+Image.Source = ImageSource;
+
+exports.Image = Image;

package/dist/_shared/cjs/Section-780f2377.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * 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, props = index.__rest(_a, ["children", "isFullWidth", "isDebugVisible"]);
+    return (React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
+            "arc-Section": true,
+            "arc-Section--fullWidth": isFullWidth,
+            "arc-Section--debugVisible": isDebugVisible
+        }) }, index.filterDataAttrs(props)), children));
+};
+
+exports.Section = Section;

package/dist/_shared/cjs/Surface-d6b8010e.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var defaultContext = { surface: "light" };
+var Context = React.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, props = index.__rest(_a, ["background", "children", "growVertically", "padding", "paddingHorizontal", "paddingVertical"]);
+    var surface = "light";
+    if (background === "black" ||
+        background === "brand" ||
+        background === "brand-flat" ||
+        background === "dark" ||
+        background === "darker") {
+        surface = "dark";
+    }
+    return (React__default["default"].createElement(Provider, { value: { surface: surface } },
+        React__default["default"].createElement("div", index.__assign({ className: index$1.classNames((_b = {
+                    "arc-Surface": true
+                },
+                _b["arc-Surface--".concat(background &&
+                    index.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)) }, index.filterDataAttrs(props)), children)));
+};
+var backgroundsShared = [
+    "black",
+    "brand",
+    "brand-flat",
+    "dark",
+    "darker",
+    "coral",
+    "turquoise",
+    "light",
+    "lighter",
+    "white"
+];
+var backgrounds = index.__spreadArray([], backgroundsShared, true);
+var backgroundsBT = index.__spreadArray([], backgroundsShared, true);
+
+exports.Context = Context;
+exports.Surface = Surface;
+exports.backgrounds = backgrounds;
+exports.backgroundsBT = backgroundsBT;

package/dist/_shared/cjs/Text-1d3844be.js

@@ -0,0 +1,32 @@
+'use strict';
+
+var index = require('./index-78b35bc1.js');
+var index$1 = require('./index-45bfb67b.js');
+var React = require('react');
+var suffixModifier = require('./suffix-modifier-edf7851e.js');
+var Surface = require('./Surface-d6b8010e.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `Text` to display text.
+ */
+var Text = function (_a) {
+    var _b;
+    var _c = _a.align, align = _c === void 0 ? "left" : _c, children = _a.children, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isMeasured, isMeasured = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? "m" : _f, _g = _a.tone, tone = _g === void 0 ? "default" : _g, props = index.__rest(_a, ["align", "children", "isInline", "isMeasured", "size", "tone"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("span", index.__assign({ className: index$1.classNames((_b = {
+                "arc-Text": true
+            },
+            _b[suffixModifier.suffixModifier("arc-Text--align", align)] = align !== "left",
+            _b["arc-Text--inline"] = isInline,
+            _b["arc-Text--measured"] = isMeasured,
+            _b["arc-Text--size".concat(size && size.toUpperCase())] = size && size !== "m",
+            _b["arc-Text--".concat(tone)] = tone !== "default",
+            _b["arc-Text--onDarkSurface"] = surface === "dark",
+            _b)) }, index.filterDataAttrs(props)), children));
+};
+
+exports.Text = Text;

package/dist/_shared/cjs/handle-link-click-17a44cf4.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var handleLinkClick = function (_a) {
+    var handler = _a.handler, _b = _a.preventDefault, preventDefault = _b === void 0 ? true : _b;
+    return function (e) {
+        if (preventDefault && handler) {
+            e.preventDefault();
+        }
+        if (handler) {
+            handler();
+        }
+    };
+};
+
+exports.handleLinkClick = handleLinkClick;

package/dist/_shared/cjs/index-45bfb67b.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var classnames = {exports: {}};
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+/* global define */
+
+(function () {
+
+	var hasOwn = {}.hasOwnProperty;
+
+	function classNames() {
+		var classes = [];
+
+		for (var i = 0; i < arguments.length; i++) {
+			var arg = arguments[i];
+			if (!arg) continue;
+
+			var argType = typeof arg;
+
+			if (argType === 'string' || argType === 'number') {
+				classes.push(arg);
+			} else if (Array.isArray(arg)) {
+				if (arg.length) {
+					var inner = classNames.apply(null, arg);
+					if (inner) {
+						classes.push(inner);
+					}
+				}
+			} else if (argType === 'object') {
+				if (arg.toString === Object.prototype.toString) {
+					for (var key in arg) {
+						if (hasOwn.call(arg, key) && arg[key]) {
+							classes.push(key);
+						}
+					}
+				} else {
+					classes.push(arg.toString());
+				}
+			}
+		}
+
+		return classes.join(' ');
+	}
+
+	if (module.exports) {
+		classNames.default = classNames;
+		module.exports = classNames;
+	} else {
+		window.classNames = classNames;
+	}
+}());
+}(classnames));
+
+var classNames = classnames.exports;
+
+exports.classNames = classNames;