@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/dist/_shared/cjs/FormControl-x7kC-Srg.js

@@ -1,108 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('react');
-var Surface = require('./Surface-BCplA5V_.js');
-var DisclosureMini = require('./DisclosureMini-Bln2KdOz.js');
-var VisuallyHidden = require('./VisuallyHidden-BItgxu3C.js');
-var ThemeIcon = require('./ThemeIcon-CHgtRxWu.js');
-
-/**
- * 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, _d = _a.idDisclosure, idDisclosure = _d === void 0 ? "".concat(id, "-disclosure") : _d, errorMessage = _a.errorMessage, helper = _a.helper, disclosureText = _a.disclosureText;
-    if (!id) {
-        return {
-            ariaDescribedby: undefined,
-            idHelper: undefined,
-            idError: undefined,
-            idDisclosure: undefined
-        };
-    }
-    var ariaDescribedbyArr = [];
-    if (errorMessage) {
-        ariaDescribedbyArr.push(idError);
-    }
-    if (helper) {
-        ariaDescribedbyArr.push(idHelper);
-    }
-    if (disclosureText) {
-        ariaDescribedbyArr.push(idDisclosure);
-    }
-    var ariaDescribedby = ariaDescribedbyArr.length > 0 ? ariaDescribedbyArr.join(" ") : undefined;
-    return { ariaDescribedby: ariaDescribedby, idError: idError, idHelper: idHelper, idDisclosure: idDisclosure };
-};
-
-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, supplementaryInfo = _a.supplementaryInfo, id = _a.id, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, _d = _a.labelPosition, labelPosition = _d === void 0 ? "top" : _d, _e = _a.requirementStatus, requirementStatus = _e === void 0 ? "optional" : _e, _f = _a.helperUnderLabel, helperUnderLabel = _f === void 0 ? false : _f, isDisabled = _a.isDisabled, _g = _a.hideLabel, hideLabel = _g === void 0 ? false : _g, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = index.__rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "labelPosition", "requirementStatus", "helperUnderLabel", "isDisabled", "hideLabel", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var _h = useAriaDescribedby({
-        disclosureText: disclosureText,
-        errorMessage: errorMessage,
-        helper: helper,
-        id: htmlFor || id
-    }), ariaDescribedby = _h.ariaDescribedby, idError = _h.idError, idHelper = _h.idHelper, idDisclosure = _h.idDisclosure;
-    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;
-    }
-    var hasInfo = helperUnderLabel
-        ? Boolean(errorMessage || disclosureTitle || supplementaryInfo)
-        : Boolean(errorMessage || disclosureTitle || helper || supplementaryInfo);
-    return (React.createElement(Provider, { value: { requirementStatus: requirementStatus } },
-        React.createElement(ElementType, index.__assign({ className: index$1.classNames({
-                "arc-FormControl": true,
-                "arc-FormControl--isDisabled": isDisabled,
-                "arc-FormControl--smallLabel": labelSize === "s",
-                "arc-FormControl--onDarkSurface": surface === "dark",
-                "arc-FormControl--sideLabel": labelPosition === "left"
-            }), id: id }, elementProps, index.filterAttrs(props)),
-            hideLabel === true ? (React.createElement(VisuallyHidden.VisuallyHidden, null,
-                React.createElement(LabelType, index.__assign({ className: index$1.classNames("arc-FormControl-label", {
-                        "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
-                    }) }, labelProps),
-                    label,
-                    requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))))) : (React.createElement(LabelType, index.__assign({ className: index$1.classNames("arc-FormControl-label", {
-                    "arc-FormControl-label--withHelperUnderLabel": helperUnderLabel && helper
-                }) }, labelProps),
-                label,
-                requirementStatus === "optional" && (React.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)")))),
-            helperUnderLabel && helper && (React.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)),
-            children,
-            React.createElement("div", { className: index$1.classNames("arc-FormControl-info", {
-                    "arc-FormControl-info--hasContent": hasInfo
-                }) },
-                ((helper && !helperUnderLabel) ||
-                    errorMessage ||
-                    disclosureTitle) && (React.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React.createElement("div", { className: "arc-FormControl-error", id: idError },
-                    React.createElement("span", { className: "arc-FormControl-error--icon" },
-                        React.createElement(ThemeIcon.ThemeIcon, { icon: "formControlAlert" })),
-                    errorMessage)) : (!helperUnderLabel &&
-                    (disclosureTitle ? (React.createElement(DisclosureMini.DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText)) : (helper && (React.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))),
-                supplementaryInfo && (React.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
-};
-
-exports.Context = Context;
-exports.FormControl = FormControl;
-exports.useAriaDescribedby = useAriaDescribedby;

package/dist/_shared/cjs/Grid-Bfnjhc5b.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var React = require('react');
-var index$1 = require('./index-CTlXMLug.js');
-
-var BREAKPOINTS = ["xs", "s", "m", "l", "xl"];
-
-var Col = function (_a) {
-    var order = _a.order, offset = _a.offset, align = _a.align, children = _a.children, props = index.__rest(_a, ["order", "offset", "align", "children"]);
-    return (React.createElement("div", index.__assign({ className: index$1.classNames("arc-Grid-col", BREAKPOINTS.reduce(function (acc, bp) {
-            var _a;
-            var sizeValue = props === null || props === void 0 ? void 0 : props[bp];
-            var orderValue = order === null || order === void 0 ? void 0 : order[bp];
-            var offsetValue = offset === null || offset === void 0 ? void 0 : offset[bp];
-            var alignValue = align === null || align === void 0 ? void 0 : align[bp];
-            return index.__assign(index.__assign({}, acc), (_a = {}, _a["arc-Grid-col--".concat(bp).concat(sizeValue)] = sizeValue !== undefined, _a["arc-Grid-order--".concat(bp).concat(orderValue)] = orderValue !== undefined, _a["arc-Grid-offset--".concat(bp).concat(offsetValue)] = offsetValue !== undefined, _a["arc-Grid-align--".concat(bp).concat(alignValue)] = alignValue !== undefined, _a));
-        }, {})) }, index.filterAttrs(props)), children));
-};
-
-var Row = function (_a) {
-    var _b = _a.direction, direction = _b === void 0 ? "row" : _b, _c = _a.align, align = _c === void 0 ? "normal" : _c, _d = _a.justify, justify = _d === void 0 ? "normal" : _d, children = _a.children, props = index.__rest(_a, ["direction", "align", "justify", "children"]);
-    return (React.createElement("div", index.__assign({ className: index$1.classNames("arc-Grid-row", "".concat(index.suffixModifier("arc-Grid-row--direction", direction)), "".concat(index.suffixModifier("arc-Grid-row--justify", justify)), "".concat(index.suffixModifier("arc-Grid-row--align", align))) }, index.filterAttrs(props)), children));
-};
-
-/**
- * Use `Grid` to compose layouts on a 12-column grid.
- */
-var Grid = function (_a) {
-    var children = _a.children, isFluid = _a.isFluid, isDebugVisible = _a.isDebugVisible, isGutterless = _a.isGutterless, props = index.__rest(_a, ["children", "isFluid", "isDebugVisible", "isGutterless"]);
-    return (React.createElement("div", index.__assign({ className: index$1.classNames("arc-Grid", {
-            "arc-Grid--fluid": isFluid,
-            "arc-Grid--debugVisible": isDebugVisible,
-            "arc-Grid--gutterless": isGutterless
-        }) }, index.filterAttrs(props)),
-        React.createElement("div", { className: "arc-Grid-inner" }, children)));
-};
-Grid.Row = Row;
-Grid.Col = Col;
-
-exports.Grid = Grid;

package/dist/_shared/cjs/Group-DZ8hdyp4.js

@@ -1,36 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('react');
-var Surface = require('./Surface-BCplA5V_.js');
-
-/**
- * Use `Group` to arrange flexible items in a row.
- */
-var Group = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.growEqual, growEqual = _d === void 0 ? false : _d, _e = _a.gutterBorder, gutterBorder = _e === void 0 ? false : _e, _f = _a.noWrap, noWrap = _f === void 0 ? false : _f, props = index.__rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
-    var surface = React.useContext(Surface.Context).surface;
-    return (React.createElement("div", index.__assign({ className: index$1.classNames((_b = {},
-            _b["arc-Group"] = true,
-            _b["arc-Group--grow"] = grow,
-            _b["arc-Group--growEqual"] = growEqual,
-            _b["arc-Group--gutterBorder"] = gutterBorder,
-            _b["arc-Group--noWrap"] = noWrap,
-            _b["arc-Group--onDarkSurface"] = surface === "dark",
-            _b)) }, index.filterAttrs(props)),
-        React.createElement("div", { className: "arc-Group-inner" }, children)));
-};
-var GroupItem = function (_a) {
-    var _b;
-    var children = _a.children, _c = _a.grow, grow = _c === void 0 ? false : _c, _d = _a.isDebugVisible, isDebugVisible = _d === void 0 ? false : _d, props = index.__rest(_a, ["children", "grow", "isDebugVisible"]);
-    return (React.createElement("div", index.__assign({ className: index$1.classNames((_b = {},
-            _b["arc-Group-item"] = true,
-            _b["arc-Group-item--grow"] = grow,
-            _b["arc-Group-item--debugVisible"] = isDebugVisible,
-            _b)) }, index.filterAttrs(props)), children));
-};
-Group.Item = GroupItem;
-
-exports.Group = Group;

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

@@ -1,36 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('react');
-var Surface = require('./Surface-BCplA5V_.js');
-
-/**
- * Use `Heading` to display heading text.
- */
-var Heading = function (_a) {
-    var _b;
-    var _c = _a.isInline, isInline = _c === void 0 ? false : _c, _d = _a.align, align = _d === void 0 ? "left" : _d, _e = _a.casing, casing = _e === void 0 ? "auto" : _e, _f = _a.color, color = _f === void 0 ? "auto" : _f, children = _a.children, level = _a.level, size = _a.size, id = _a.id, props = index.__rest(_a, ["isInline", "align", "casing", "color", "children", "level", "size", "id"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var Element = "span";
-    if (level) {
-        Element = "h".concat(level);
-    }
-    return (React.createElement(Element, index.__assign({ id: id, className: index$1.classNames((_b = {
-                "arc-Heading": true,
-                "arc-Heading--inline": isInline
-            },
-            _b[index.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.filterAttrs(props)), children));
-};
-var HeadingProposition = function (_a) {
-    var children = _a.children;
-    return React.createElement("span", { className: "arc-Heading-proposition" }, children);
-};
-Heading.Proposition = HeadingProposition;
-
-exports.Heading = Heading;

package/dist/_shared/cjs/HeroButton-CNJkSeLs.js

@@ -1,122 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var React = require('react');
-var index$1 = require('./index-CTlXMLug.js');
-var Surface = require('./Surface-BCplA5V_.js');
-var Icon = require('./Icon-C5peYhWn.js');
-var Spinner = require('./Spinner-DmTvG4x-.js');
-
-const BtIconArrowAltRight = (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: "M18.85352,11.64648a.49995.49995,0,0,0-.707.707L21.293,15.5H9.5a.5.5,0,0,0,0,1H21.293l-3.14649,3.14648a.49995.49995,0,1,0,.707.707L23.207,16Z",
-      fill: "currentColor",
-    }),
-  );
-
-const BtIconArrowAltDown = (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: "M20.35352,18.14648a.49983.49983,0,0,0-.707,0L16.5,21.293V9.5a.5.5,0,0,0-1,0V21.293l-3.14648-3.14648a.49995.49995,0,1,0-.707.707L16,23.207l4.35352-4.35352A.49982.49982,0,0,0,20.35352,18.14648Z",
-      fill: "currentColor",
-    }),
-  );
-
-const ArcIconPlay = (props) =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        viewBox: "0 0 56 56",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React.createElement("path", {
-      d: "M36.4683 26.3206L23.9068 19.0686C23.6123 18.8984 23.2783 18.8088 22.9382 18.8086C22.5981 18.8084 22.264 18.8978 21.9694 19.0677C21.6748 19.2376 21.4301 19.4821 21.26 19.7765C21.0898 20.071 21.0001 20.4051 21 20.7451V35.2491C20.9985 35.5899 21.087 35.9251 21.2566 36.2207C21.4263 36.5162 21.671 36.7617 21.9661 36.9323C22.2612 37.1028 22.5961 37.1923 22.9369 37.1918C23.2777 37.1912 23.6123 37.1006 23.9068 36.9291L36.4683 29.6754C36.7626 29.5053 37.007 29.2608 37.1769 28.9664C37.3469 28.6719 37.4363 28.338 37.4363 27.998C37.4363 27.6581 37.3469 27.3241 37.1769 27.0297C37.007 26.7352 36.7626 26.4907 36.4683 26.3206ZM35.5933 28.1599L23.0318 35.4136C23.0035 35.4306 22.9711 35.4396 22.9381 35.4396C22.9052 35.4396 22.8728 35.4306 22.8445 35.4136C22.815 35.3977 22.7906 35.3739 22.7739 35.3448C22.7572 35.3158 22.7489 35.2826 22.75 35.2491V20.7451C22.7494 20.7122 22.7579 20.6797 22.7745 20.6513C22.7912 20.6229 22.8154 20.5996 22.8445 20.5841C22.8727 20.567 22.9051 20.5579 22.9381 20.5579C22.9712 20.5579 23.0036 20.567 23.0318 20.5841L35.5933 27.8344C35.6226 27.8505 35.647 27.8743 35.6637 27.9034C35.6803 27.9324 35.6887 27.9654 35.6878 27.9989C35.6882 28.0318 35.6796 28.0642 35.663 28.0926C35.6463 28.121 35.6222 28.1442 35.5933 28.1599Z",
-      fill: "currentColor",
-    }),
-  );
-
-const ArcIconWarn = (props) =>
-  /*#__PURE__*/ React.createElement(
-    "svg",
-    Object.assign(
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        viewBox: "0 0 32 32",
-      },
-      props,
-    ),
-    /*#__PURE__*/ React.createElement("path", {
-      className: "cls-1",
-      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", {
-      className: "cls-1",
-      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 HeroButton = React.forwardRef(function (_a, ref) {
-    var label = _a.label, _b = _a.buttonStyle, buttonStyle = _b === void 0 ? "primary" : _b, icon = _a.icon, ariaLabel = _a.ariaLabel, _c = _a.isLoading, isLoading = _c === void 0 ? false : _c, onClick = _a.onClick, href = _a.href, id = _a.id, rel = _a.rel, target = _a.target, type = _a.type, form = _a.form, props = index.__rest(_a, ["label", "buttonStyle", "icon", "ariaLabel", "isLoading", "onClick", "href", "id", "rel", "target", "type", "form"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var HeroButtonClasses = index$1.classNames("arc-HeroButton", ["arc-HeroButton--".concat(Surface.camelcase(buttonStyle))], {
-        "arc-HeroButton--onDarkSurface": surface === "dark",
-        "arc-HeroButton--emptyLabel": !label,
-        "arc-HeroButton--isLoading": isLoading,
-        "arc-HeroButton--withIcon": icon,
-        "arc-HeroButton--hasGradient": buttonStyle.includes("-gradient")
-    });
-    var HeroButtonIcons = {
-        "arrow-right": BtIconArrowAltRight,
-        "arrow-down": BtIconArrowAltDown,
-        play: ArcIconPlay,
-        warning: ArcIconWarn
-    };
-    var commonProps = index.__assign({ id: id, onClick: onClick, ref: ref }, index.filterAttrs(props));
-    if (href && !isLoading) {
-        return (React.createElement("a", index.__assign({}, commonProps, { className: HeroButtonClasses, href: href, rel: rel, "aria-label": ariaLabel, target: target }),
-            React.createElement("span", { className: index$1.classNames("arc-HeroButton-inner") },
-                label && React.createElement("span", { className: "arc-HeroButton-label" }, label),
-                isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                    React.createElement(Spinner.Spinner, { size: "xxl" }))),
-                icon && !isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                    React.createElement(Icon.Icon, { size: 48, icon: buttonStyle === "warning"
-                            ? HeroButtonIcons["warning"]
-                            : HeroButtonIcons[icon] }))))));
-    }
-    return (React.createElement("button", index.__assign({}, commonProps, { className: HeroButtonClasses, "aria-label": ariaLabel, disabled: isLoading, type: type, form: form }),
-        React.createElement("span", { className: index$1.classNames("arc-HeroButton-inner") },
-            label && React.createElement("span", { className: "arc-HeroButton-label" }, label),
-            icon && !isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                React.createElement(Icon.Icon, { size: 48, icon: buttonStyle === "warning"
-                        ? HeroButtonIcons["warning"]
-                        : HeroButtonIcons[icon] }))),
-            isLoading && (React.createElement("span", { className: "arc-HeroButton-icon" },
-                React.createElement(Spinner.Spinner, { size: "xxl" }))))));
-});
-
-exports.HeroButton = HeroButton;

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

@@ -1,43 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('react');
-var Surface = require('./Surface-BCplA5V_.js');
-
-/**
- * Use `Icon` to display brand iconography.
- */
-var Icon = function (_a) {
-    var _b;
-    var testId = _a.testId, icon = _a.icon, _c = _a.color, color = _c === void 0 ? "auto" : _c, _d = _a.isInline, isInline = _d === void 0 ? false : _d, _e = _a.isPresentationIcon, isPresentationIcon = _e === void 0 ? false : _e, label = _a.label, size = _a.size, props = index.__rest(_a, ["testId", "icon", "color", "isInline", "isPresentationIcon", "label", "size"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var presentationIconProps = {
-        role: "presentation",
-        "aria-hidden": true
-    };
-    var renderIcon = function () {
-        if (!icon)
-            return null;
-        var accessibleProps = isPresentationIcon ? presentationIconProps : {};
-        if (typeof icon === "function") {
-            var IconComponent = icon || (function () { return React.createElement(React.Fragment, null); });
-            return React.createElement(IconComponent, index.__assign({}, accessibleProps));
-        }
-        if (React.isValidElement(icon) && icon.type === "svg") {
-            return React.cloneElement(icon, accessibleProps);
-        }
-        return null;
-    };
-    return (React.createElement("span", index.__assign({ "data-testid": testId, "aria-label": label, className: index$1.classNames((_b = {},
-            _b["arc-Icon"] = true,
-            _b[index.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
-        } }, index.filterAttrs(props)), renderIcon()));
-};
-
-exports.Icon = Icon;

package/dist/_shared/cjs/Image-55IzIW6l.js

@@ -1,51 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('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.fadeOnLoad, fadeOnLoad = _c === void 0 ? false : _c, _d = _a.anchor, anchor = _d === void 0 ? "C" : _d, 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", "fadeOnLoad", "anchor", "children", "fillColor", "fit", "height", "loading", "overlay", "sizes", "src", "srcSet", "width"]);
-    var _e = React.useState(false), visible = _e[0], setVisible = _e[1];
-    React.useEffect(function () {
-        React.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 imageRef = function (el) {
-        if (el) {
-            setTimeout(function () { return setVisible(true); }, 1);
-        }
-    };
-    var animationClasses = {
-        "arc-Image-img--fade": fadeOnLoad,
-        "arc-Image-img--fadeVisible": fadeOnLoad && visible
-    };
-    var img = (React.createElement("img", { ref: imageRef, className: index$1.classNames("arc-Image-img", animationClasses), 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.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[index.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.filterAttrs(props)), children ? (React.createElement("picture", null,
-        children,
-        " ",
-        img)) : (React.createElement(React.Fragment, null, img))));
-};
-var ImageSource = function (_a) {
-    var height = _a.height, media = _a.media, srcSet = _a.srcSet, sizes = _a.sizes, type = _a.type, props = index.__rest(_a, ["height", "media", "srcSet", "sizes", "type"]);
-    return (React.createElement("source", index.__assign({ height: height, media: media, sizes: sizes, srcSet: srcSet, type: type }, index.filterAttrs(props))));
-};
-Image.Source = ImageSource;
-var loadingOptions = ["eager", "lazy"];
-
-exports.Image = Image;
-exports.loadingOptions = loadingOptions;

package/dist/_shared/cjs/MediaCard-DcApbyvL.js

@@ -1,61 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var React = require('react');
-var index$1 = require('./index-CTlXMLug.js');
-var index_es = require('./index.es-y9hyGBEL.js');
-var useMediaQuery = require('./use-media-query-BsUfHjPZ.js');
-var Image = require('./Image-55IzIW6l.js');
-var Heading = require('./Heading-lzfM5f17.js');
-var Surface = require('./Surface-BCplA5V_.js');
-var Text = require('./Text-DIA-MbS2.js');
-var VerticalSpace = require('./VerticalSpace-B-ZFqw2Y.js');
-var CardHeading = require('./CardHeading-BjSIrQC8.js');
-var CardFooter = require('./CardFooter-Bbn1wEJI.js');
-var ConditionalWrapper = require('./ConditionalWrapper-C09Kw6EG.js');
-
-var VideoPlayer = React.lazy(function () {
-    return Promise.resolve().then(function () { return require('../../VideoPlayer/VideoPlayer.cjs.js'); }).then(function (_a) {
-        var VideoPlayer = _a.VideoPlayer;
-        return ({
-            "default": VideoPlayer
-        });
-    });
-});
-/**
- * Use `MediaCard` to contain content and an image about a single subject.
- */
-var MediaCard = function (_a) {
-    var media = _a.media, url = _a.url, onClick = _a.onClick, heading = _a.heading, label = _a.label, text = _a.text, metaText = _a.metaText, minHeight = _a.minHeight, _b = _a.buttonIcon, buttonIcon = _b === void 0 ? "arrow" : _b, _c = _a.isContained, isContained = _c === void 0 ? true : _c, _d = _a.headingLevel, headingLevel = _d === void 0 ? "2" : _d, props = index.__rest(_a, ["media", "url", "onClick", "heading", "label", "text", "metaText", "minHeight", "buttonIcon", "isContained", "headingLevel"]);
-    var surface = React.useContext(Surface.Context).surface;
-    var _e = React.useState(false), isClient = _e[0], setIsClient = _e[1];
-    var _f = React.useState(false), showHoverState = _f[0], setShowHoverState = _f[1];
-    var isMinWidthArcBreakpointS = useMediaQuery.useMediaQuery("(min-width: ".concat(index_es.SemSizeBreakpointsS, ")"));
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
-    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
-    React.useEffect(function () {
-        setIsClient(true);
-    }, []);
-    return (React.createElement("div", index.__assign({ style: { minHeight: minHeight }, className: index$1.classNames("arc-MediaCard", {
-            "arc-MediaCard--outlined": url && isContained && showHoverState,
-            "arc-MediaCard--contained": isContained,
-            "arc-MediaCard--onDarkSurface": surface === "dark"
-        }) }, index.filterAttrs(props)),
-        React.createElement(ConditionalWrapper.ConditionalWrapper, { condition: isContained, wrapper: function (children) { return (React.createElement(Surface.Surface, { growVertically: true, background: "light-white" }, children)); } },
-            media.type === "img" && (React.createElement("div", { className: "arc-MediaCard-imgContainer" },
-                React.createElement(Image.Image, index.__assign({}, media)))),
-            media.type === "video" && isClient && (React.createElement(React.Suspense, { fallback: null },
-                React.createElement(VideoPlayer, index.__assign({ isSupportingTextHidden: true }, media)))),
-            React.createElement("div", { className: "arc-MediaCard-content" },
-                label && (React.createElement(React.Fragment, null,
-                    React.createElement(Heading.Heading, { size: "xxs" }, label.toUpperCase()),
-                    React.createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }))),
-                React.createElement(CardHeading.CardHeading, { heading: heading, headingLevel: headingLevel, href: media.type !== "video" ? url : undefined, onClick: media.type !== "video" ? onClick : undefined, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
-                React.createElement("div", { className: "arc-MediaCard-textContainer" }, text && (React.createElement(React.Fragment, null,
-                    React.createElement(VerticalSpace.VerticalSpace, { size: headingSpacing }),
-                    React.createElement(Text.Text, null, text),
-                    (url || metaText) && React.createElement(VerticalSpace.VerticalSpace, { size: "24" })))),
-                React.createElement(CardFooter.CardFooter, { buttonIcon: buttonIcon, metaText: metaText, showButton: Boolean(url) && media.type !== "video", isHovered: showHoverState })))));
-};
-
-exports.MediaCard = MediaCard;

package/dist/_shared/cjs/Poster-DbbbiYa_.js

@@ -1,41 +0,0 @@
-'use strict';
-
-var index = require('./index-D6hGsItk.js');
-var index$1 = require('./index-CTlXMLug.js');
-var React = require('react');
-var Surface = require('./Surface-BCplA5V_.js');
-var Image = require('./Image-55IzIW6l.js');
-
-var PosterImage = function (_a) {
-    var alt = _a.alt, _b = _a.anchor, anchor = _b === void 0 ? "C" : _b, loading = _a.loading, sizes = _a.sizes, src = _a.src, srcSet = _a.srcSet, props = index.__rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
-    return (React.createElement(Image.Image, index.__assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, index.filterAttrs(props))));
-};
-
-var PosterVideo = function (_a) {
-    var _b;
-    var _c = _a.anchor, anchor = _c === void 0 ? "C" : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? true : _d, children = _a.children, _e = _a.loop, loop = _e === void 0 ? true : _e, props = index.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React.createElement("video", index.__assign({ className: index$1.classNames((_b = {
-                "arc-PosterVideo": true
-            },
-            _b[index.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
-            _b)), autoPlay: autoPlay, muted: true, loop: loop }, index.filterAttrs(props)), children));
-};
-
-/**
- * Use `Poster` to compose content on an image or video background. BT Brand Only.
- */
-var Poster = function (_a) {
-    var background = _a.background, children = _a.children, _b = _a.overlay, overlay = _b === void 0 ? true : _b, _c = _a.surface, surface = _c === void 0 ? "dark-neutral-02" : _c, props = index.__rest(_a, ["background", "children", "overlay", "surface"]);
-    return (React.createElement(Surface.Surface, { background: surface },
-        React.createElement("div", index.__assign({ className: index$1.classNames({
-                "arc-Poster": true,
-                "arc-Poster--overlay": overlay,
-                "arc-Poster--overlayLight": surface === "light-neutral-01"
-            }) }, index.filterAttrs(props)),
-            React.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
-            React.createElement("div", { className: "arc-Poster-body" }, children))));
-};
-Poster.Image = PosterImage;
-Poster.Video = PosterVideo;
-
-exports.Poster = Poster;