@arc-ui/components 11.5.0 → 11.7.0

package/dist/_shared/esm/Filter-a01aed11.js

@@ -0,0 +1,115 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs, b as __spreadArray } from './filter-data-attrs-afdb7d32.js';
+import React__default, { useContext, useState, useEffect } from 'react';
+import { C as Context } from './Surface-dde51789.js';
+import { c as classNames } from './index-2ae58626.js';
+
+var FilterControl = function (_a) {
+    var children = _a.children, onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b;
+    var surface = useContext(Context).surface;
+    var _c = useState(isSelected), selected = _c[0], setSelected = _c[1];
+    var onClickHandler = function () {
+        onClick && onClick();
+        setSelected(function (previousValue) { return !previousValue; });
+    };
+    return (React__default.createElement("button", { className: classNames("arc-FilterControl", {
+            "arc-FilterControl--onDarkSurface": surface === "dark",
+            "arc-FilterControl--selected": selected
+        }), onClick: onClickHandler, tabIndex: 0 },
+        React__default.createElement("div", { className: "arc-FilterControl-text" }, children)));
+};
+
+var FilterControls = function (_a) {
+    var children = _a.children, controlsAlignment = _a.controlsAlignment, props = __rest(_a, ["children", "controlsAlignment"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterControls", {
+            "arc-FilterControls--alignLeft": controlsAlignment === "left",
+            "arc-FilterControls--alignRight": controlsAlignment === "right"
+        }) }, filterDataAttrs(props)), children));
+};
+
+var FilterItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React__default.createElement("div", __assign({ className: "arc-FilterItem" }, filterDataAttrs(props)), children));
+};
+
+var FilterItems = function (_a) {
+    var children = _a.children, _b = _a.displayType, displayType = _b === void 0 ? "grid" : _b, props = __rest(_a, ["children", "displayType"]);
+    return (React__default.createElement("div", __assign({ className: classNames("arc-FilterItems", {
+            "arc-FilterItems--list": displayType === "list",
+            "arc-FilterItems--grid": displayType === "grid"
+        }) }, filterDataAttrs(props)), displayType === "list"
+        ? React__default.Children.toArray(children).map(function (child, index, array) { return (React__default.createElement(React__default.Fragment, { key: index },
+            child,
+            index !== array.length - 1 && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("div", { className: "arc-FilterItems-separator", "data-testid": "arc-FilterItems-separator" }))))); })
+        : children));
+};
+
+/** use `Filter` for interactive elements that filter and categorise page content. */
+var Filter = function (_a) {
+    var children = _a.children, onChange = _a.onChange, displayType = _a.displayType, controlsAlignment = _a.controlsAlignment, _b = _a.logicType, logicType = _b === void 0 ? "OR" : _b, error = _a.error, props = __rest(_a, ["children", "onChange", "displayType", "controlsAlignment", "logicType", "error"]);
+    var _c = useState([]), selectedControls = _c[0], setSelectedControls = _c[1];
+    var controls = React__default.Children.toArray(children).find(function (child) { return React__default.isValidElement(child) && child.type === FilterControls; });
+    var items = React__default.Children.toArray(children).find(function (child) { return React__default.isValidElement(child) && child.type === FilterItems; });
+    useEffect(function () {
+        var initialSelectedControls = [];
+        if (controls && React__default.isValidElement(controls)) {
+            React__default.Children.forEach(controls.props.children, function (child) {
+                if (child.props.isSelected) {
+                    initialSelectedControls.push(child.props.children);
+                }
+            });
+        }
+        setSelectedControls(initialSelectedControls);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    var handleControlClick = function (clickedControl) {
+        if (selectedControls.includes(clickedControl)) {
+            var updatedControls = selectedControls.filter(function (control) { return control !== clickedControl; });
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+        else {
+            var updatedControls = __spreadArray(__spreadArray([], selectedControls, true), [clickedControl], false);
+            setSelectedControls(updatedControls);
+            if (onChange) {
+                onChange(updatedControls);
+            }
+        }
+    };
+    var filterItems = React__default.Children.toArray(items && React__default.isValidElement(items) && items.props.children);
+    var filteredItems = filterItems.filter(function (filteredItem) {
+        // If no tags are selected, show all items
+        if (selectedControls.length === 0) {
+            return true;
+        }
+        // If logicType is "AND", all selected tags should be present in the item's tags
+        if (logicType === "AND") {
+            return selectedControls.every(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+        else {
+            // Check if item has tags property and if any selected tags are present in item's tags
+            return selectedControls.some(function (control) {
+                return filteredItem.props.tags.includes(control);
+            });
+        }
+    });
+    return (React__default.createElement("div", __assign({ className: "arc-Filter" }, filterDataAttrs(props)),
+        React__default.createElement(FilterControls, { controlsAlignment: controlsAlignment }, controls &&
+            React__default.isValidElement(controls) &&
+            React__default.Children.map(controls.props.children, function (control, index) { return (React__default.createElement(FilterControl, { key: index, onClick: function () { return handleControlClick(control.props.children); }, isSelected: control.props.isSelected }, control.props.children)); })),
+        filteredItems.length === 0 ? (React__default.createElement(React__default.Fragment, null, error)) : (React__default.createElement(FilterItems, { displayType: displayType }, filteredItems.map(function (item) { return item.props.children; })))));
+};
+Filter.Controls = FilterControls;
+Filter.Control = FilterControl;
+Filter.Items = FilterItems;
+Filter.Item = FilterItem;
+FilterControls.displayName = "Filter.Controls";
+FilterControl.displayName = "Filter.Control";
+FilterItems.displayName = "Filter.Items";
+FilterItem.displayName = "Filter.Item";
+
+export { Filter as F };

package/dist/_shared/{cjs/FormControl-42360ae8.d.ts → esm/FormControl-2fa7aae5.d.ts}

@@ -87,6 +87,10 @@ interface FormControlProps {
      * onClick handler for FormControlDisclosure
      */
     onClickDisclosure?: () => void;
+    /**
+     * Optional additional information for the FormControl.
+     */
+    supplementaryInfo?: React.ReactNode;
     /**
      * Position helper text under label. This is set to `false` by default.
      */

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

@@ -2,9 +2,8 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import { c as classNames } from './index-2ae58626.js';
 import React__default, { createContext, useContext } from 'react';
 import { B as BtIconAlert_2 } from './BtIconAlert-55a6ed5c.js';
-import { C as Context$1 } from './Surface-bb100ef8.js';
-import { D as DisclosureMini } from './DisclosureMini-322fccc0.js';
-import { V as VerticalSpace } from './VerticalSpace-93980c9c.js';
+import { C as Context$1 } from './Surface-dde51789.js';
+import { D as DisclosureMini } from './DisclosureMini-78a8f392.js';
 
 /**
  * Optionally define ariaDescribedBy if errorMessage or helper exist.
@@ -42,7 +41,7 @@ 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, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
+    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.requirementStatus, requirementStatus = _d === void 0 ? "optional" : _d, _e = _a.helperUnderLabel, helperUnderLabel = _e === void 0 ? false : _e, isDisabled = _a.isDisabled, disclosureTitle = _a.disclosureTitle, disclosureText = _a.disclosureText, onClickDisclosure = _a.onClickDisclosure, props = __rest(_a, ["children", "elementType", "errorMessage", "helper", "htmlFor", "supplementaryInfo", "id", "label", "labelSize", "requirementStatus", "helperUnderLabel", "isDisabled", "disclosureTitle", "disclosureText", "onClickDisclosure"]);
     var surface = useContext(Context$1).surface;
     var _f = useAriaDescribedby({
         disclosureText: disclosureText,
@@ -77,12 +76,13 @@ var FormControl = function (_a) {
                 requirementStatus === "optional" && (React__default.createElement("span", { className: "arc-FormControl-labelOptional" }, "(optional)"))),
             helperUnderLabel && (React__default.createElement(React__default.Fragment, null, helper && (React__default.createElement("div", { className: "arc-FormControl-helper arc-FormControl-helper--underLabel", id: idHelper }, helper)))),
             children,
-            !helperUnderLabel && (React__default.createElement(React__default.Fragment, null, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
-                React__default.createElement("span", { className: "arc-FormControl-error--icon" },
-                    React__default.createElement(BtIconAlert_2, null)),
-                errorMessage)) : disclosureTitle ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(VerticalSpace, { size: "12" }),
-                React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))))));
+            React__default.createElement("div", { className: "arc-FormControl-info" },
+                !helperUnderLabel && (React__default.createElement("div", { className: "arc-FormControl-helperContainer" }, errorMessage ? (React__default.createElement("div", { className: "arc-FormControl-error", id: idError },
+                    React__default.createElement("span", { className: "arc-FormControl-error--icon" },
+                        React__default.createElement(BtIconAlert_2, null)),
+                    errorMessage)) : disclosureTitle ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(DisclosureMini, { onClick: onClickDisclosure, summary: disclosureTitle, size: labelSize, id: idDisclosure }, disclosureText))) : (helper && (React__default.createElement("div", { className: "arc-FormControl-helper", id: idHelper }, helper))))),
+                supplementaryInfo && (React__default.createElement("div", { className: "arc-FormControl-supplementaryInfo" }, supplementaryInfo))))));
 };
 
 export { Context as C, FormControl as F, useAriaDescribedby as u };

package/dist/_shared/esm/Group-fb26fd32.d.ts

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `Group` to arrange flexible items in a row.
+ */
+declare const Group: FC<GroupProps> & {
+    Item: typeof GroupItem;
+};
+declare const GroupItem: FC<ItemProps>;
+interface ItemProps {
+    /**
+     * Content to display in the Group.Item.
+     */
+    children?: ReactNode;
+    /**
+     * Should the Group.Item be visible for debugging and documentation
+     * purposes?
+     */
+    isDebugVisible?: boolean;
+    /**
+     * Should the Group.Item stretch to fill the available space?
+     */
+    grow?: boolean;
+}
+interface GroupProps {
+    /**
+     * Contents of the Group. Should only contain `Group.Item`.
+     */
+    children: ReactNode;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space?
+     */
+    grow?: boolean;
+    /**
+     * Should all Group.Items in the Group stretch to fill the available space with equal widths?
+     */
+    growEqual?: boolean;
+    /**
+     * Should a border be shown between Group.Items? **Warning: Sets CSS property `overflow:hidden`.**
+     */
+    gutterBorder?: boolean;
+    /**
+     * Should wrapping of Group.Items in the Group be disabled?
+     */
+    noWrap?: boolean;
+}
+export { Group, GroupItem, ItemProps, GroupProps };

package/dist/_shared/esm/Group-fb26fd32.js

@@ -0,0 +1,42 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default, { useContext, useEffect } from 'react';
+import { C as Context } from './Surface-dde51789.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 = __rest(_a, ["children", "grow", "growEqual", "gutterBorder", "noWrap"]);
+    var surface = useContext(Context).surface;
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== GroupItem) {
+                throw new Error("Illegal child passed to <Group />. Ensure to only use <Group.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("div", __assign({ className: 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)) }, filterDataAttrs(props)),
+        React__default.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 = __rest(_a, ["children", "grow", "isDebugVisible"]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Group-item"] = true,
+            _b["arc-Group-item--grow"] = grow,
+            _b["arc-Group-item--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props)), children));
+};
+GroupItem.displayName = "Group.Item";
+Group.Item = GroupItem;
+
+export { Group as G };

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

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import { c as classNames } from './index-2ae58626.js';
 import React__default, { useContext } from 'react';
 import { s as suffixModifier } from './suffix-modifier-7e640670.js';
-import { C as Context } from './Surface-bb100ef8.js';
+import { C as Context } from './Surface-dde51789.js';
 
 /**
  * Use `Heading` to display heading text.

package/dist/_shared/esm/{Icon-fd247973.js → Icon-c1af47bc.js}

@@ -2,7 +2,7 @@ import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-
 import React__default, { useContext } from 'react';
 import { c as classNames } from './index-2ae58626.js';
 import { s as suffixModifier } from './suffix-modifier-7e640670.js';
-import { C as Context } from './Surface-bb100ef8.js';
+import { C as Context } from './Surface-dde51789.js';
 
 const React = React__default;
 const ArcIconArc = props =>

package/dist/_shared/esm/{Image-3596ce55.js → Image-3ed3863c.js}

@@ -35,5 +35,6 @@ var ImageSource = function (_a) {
 };
 ImageSource.displayName = "Image.Source";
 Image.Source = ImageSource;
+var loadingOptions = ["eager", "lazy"];
 
-export { Image as I };
+export { Image as I, loadingOptions as l };

package/dist/_shared/esm/ItemGroup-5af4d600.d.ts

@@ -0,0 +1,27 @@
+import { FC, ReactNode } from "react";
+declare const ItemGroup: FC<ItemGroupProps>;
+interface ItemGroupProps {
+    /**
+     * Contents of the ItemGroup. Must be Item components.
+     */
+    children: ReactNode;
+    /**
+     * A top-level URL for the ItemGroup to link to.
+     */
+    href?: string;
+    /**
+     * Title text to be displayed in the ItemGroup summary.
+     */
+    title?: string;
+    /**
+     * Text to display in top-level link inside the ItemGroup in narrow viewports.
+     * Only applies if `href` is present. If not provided, top-level link text
+     * will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+export { ItemGroup, ItemGroupProps };

package/dist/_shared/esm/NavItem-df20237c.d.ts

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from "react";
+declare const NavItem: FC<NavItemProps>;
+interface NavItemProps {
+    /**
+     * Contents of the NavItem. Must be SiteHeader.ItemGroup or
+     * SiteHeader.Column components.
+     */
+    children?: ReactNode;
+    /**
+     * A top-level URL for the NavItem to link to.
+     *
+     * When `children` are not present, the URL to link to when the NavItem is
+     * clicked or touched.
+     *
+     * When `children` are present, the URL to link to when a top-level link
+     * inside the NavItem panel is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Should the NavItem be highlighted as the current item/page? Only applies if
+     * `children` are not present (and `href` is present).
+     */
+    isCurrent?: boolean;
+    /**
+     * Content to display in the NavItem panel promo area.
+     */
+    promo?: ReactNode;
+    /**
+     * Top-level text to display in the NavItem.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItem panel. Only
+     * applies if both `children` are present and `href` is true. If not
+     * provided, top-level link text will be automatically generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+export { NavItem, NavItemProps };

package/dist/_shared/esm/NavItemWithSubNav-65f21828.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactElement, ReactNode } from "react";
+declare const Context: React.Context<{
+    navItem: React.MutableRefObject<HTMLLIElement> | null;
+    subTitle: string | null;
+}>;
+declare const NavItemWithSubNav: FC<NavItemWithSubNavProps>;
+interface NavItemWithSubNavProps {
+    /**
+     * The URL to link to when a top-level link inside the NavItemWithSubNav panel
+     * is clicked or touched.
+     */
+    href?: string;
+    /**
+     * Content to be displayed in the first slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot1: ReactElement;
+    /**
+     * Content to be displayed in the second slot of the NavItemWithSubNav. Must
+     * be a single SiteHeader.SubNavItem component.
+     */
+    slot2: ReactNode;
+    /**
+     * Content to be displayed in the third slot of the NavItemWithSubNav. Must be
+     * a single SiteHeader.SubNavItem component.
+     */
+    slot3?: ReactNode;
+    /**
+     * Title text to display inside the NavItemWithSubNav panel.
+     */
+    subTitle?: string;
+    /**
+     * Top-level text to display in the NavItemWithSubNav.
+     */
+    title: string;
+    /**
+     * Text to display in top-level link inside the NavItemWithSubNav panel. Only
+     * applies if `href` is true. If not provided, text will be automatically
+     * generated from `title`.
+     */
+    viewAllTitle?: string;
+    /**
+     * view all click handler.
+     */
+    onViewAllClick?: () => void;
+}
+export { NavItemWithSubNav, NavItemWithSubNavProps, Context as NavItemContext };

package/dist/_shared/esm/Poster-a83ae770.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { FC, ReactNode } from "react";
+import { anchorPoints } from "./index-9483ad5f";
+import { loadingOptions } from "./Image-3ed3863c";
+declare const PosterVideo: FC<PosterVideoProps>;
+interface PosterVideoProps {
+    /**
+     * Anchor point for the Poster.Video,
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Should the Poster.Video autoplay?
+     */
+    autoPlay?: boolean;
+    /**
+     * HTML video sources for the Poster.Video. [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video).
+     */
+    children: ReactNode;
+    /**
+     * Should the Poster.Video loop?
+     */
+    loop?: boolean;
+}
+declare const PosterImage: FC<PosterImageProps>;
+interface PosterImageProps {
+    /**
+     * Alternative text for the Poster.Image, shown if the image cannot be displayed. Consider avoiding this prop if the image is for decorative purposes only.
+     */
+    alt?: string;
+    /**
+     * Anchor point for the Poster.Image.
+     */
+    anchor?: typeof anchorPoints[number];
+    /**
+     * Loading behaviour of the Poster.Image.
+     */
+    loading?: typeof loadingOptions[number];
+    /**
+     * The HTML [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes) attribute for the Poster.Image. Required if `srcSet` is defined.
+     */
+    sizes?: string;
+    /**
+     * The `src` for the Poster.Image. Used if srcSet is not defined, or as a fallback.
+     */
+    src: string;
+    /**
+     * A comma-separated list indicating a set of possible sources for the user agent to use for different screen sizes for the Poster.Image. Same format as [srcSet](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Example_4_Using_the_srcset_and_sizes_attributes), i.e. `my-image-200.png 200w, my-image-200.png 200w`.
+     */
+    srcSet?: string;
+    /**
+     * Contents of the PosterImage.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+declare const Poster: FC<PosterProps> & {
+    Image: typeof PosterImage;
+    Video: typeof PosterVideo;
+};
+interface PosterProps {
+    /**
+     * Poster background to overlay content on top of. Must be one of Poster.Image or Poster.Video.
+     */
+    background: ReactNode;
+    /**
+     * Contents of the Poster. Each item will be wrapped in an PosterItem component.
+     */
+    children: ReactNode;
+    /**
+     * Apply an overlay to the Poster background, e.g. a scrim gradient for text legibility.
+     */
+    overlay?: boolean;
+    /**
+     * The background surface colour to show behind the Poster content before it loads.
+     * If using `overlay`, the gradient will match the surface.
+     */
+    surface?: "darker" | "lighter";
+}
+export { PosterVideo, PosterVideoProps, PosterImage, PosterImageProps, Poster, PosterProps };

package/dist/_shared/esm/Poster-a83ae770.js

@@ -0,0 +1,44 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { c as classNames } from './index-2ae58626.js';
+import React__default from 'react';
+import { S as Surface } from './Surface-dde51789.js';
+import { I as Image } from './Image-3ed3863c.js';
+import { s as suffixModifier } from './suffix-modifier-7e640670.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 = __rest(_a, ["alt", "anchor", "loading", "sizes", "src", "srcSet"]);
+    return (React__default.createElement(Image, __assign({ alt: alt, anchor: anchor, fit: "cover", loading: loading, sizes: sizes, src: src, srcSet: srcSet }, props)));
+};
+PosterImage.displayName = "Poster.Image";
+
+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 = __rest(_a, ["anchor", "autoPlay", "children", "loop"]);
+    return (React__default.createElement("video", __assign({ className: classNames((_b = {
+                "arc-PosterVideo": true
+            },
+            _b[suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
+            _b)), autoPlay: autoPlay, muted: true, loop: loop }, filterDataAttrs(props)), children));
+};
+PosterVideo.displayName = "Poster.Video";
+
+/**
+ * Use `Poster` to compose content on an image or video background.
+ */
+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 ? "darker" : _c, props = __rest(_a, ["background", "children", "overlay", "surface"]);
+    return (React__default.createElement(Surface, { background: surface },
+        React__default.createElement("div", __assign({ className: classNames({
+                "arc-Poster": true,
+                "arc-Poster--overlay": overlay,
+                "arc-Poster--overlayLight": surface === "lighter"
+            }) }, filterDataAttrs(props)),
+            React__default.createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
+            React__default.createElement("div", { className: "arc-Poster-body" }, children))));
+};
+PosterImage.displayName = "Poster.Image";
+Poster.Image = PosterImage;
+PosterVideo.displayName = "Poster.Video";
+Poster.Video = PosterVideo;
+
+export { Poster as P };

package/dist/_shared/esm/RadioGroup-65b8c8bf.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "./FormControl-2fa7aae5";
+/**
+ * Radio Button component.
+ */
+declare const RadioButton: FC<RadioButtonProps>;
+interface RadioButtonProps {
+    /**
+     * ID for the Radio Button.
+     */
+    id: string;
+    /**
+     * Should the RadioButton be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper text for the RadioButton, shown below the label.
+     */
+    helper?: string;
+    /**
+     * Label for the RadioButton.
+     */
+    label: string;
+    /**
+     * Current value (controlled).
+     */
+    value: string;
+}
+type EventType = React.ChangeEvent<HTMLInputElement>;
+type ContextProps = {
+    blurEvent: (event: EventType) => void;
+    changeEvent: (event: EventType) => void;
+    groupDisabled: boolean;
+    checkedValue: string;
+    labelSize: "s" | "l";
+    name: string;
+    size: "s" | "l";
+};
+declare const Provider: React.Provider<ContextProps>;
+declare const useRadioContext: () => ContextProps;
+type EventType$0 = React.ChangeEvent<HTMLInputElement>;
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+declare const RadioGroup: FC<RadioGroupProps> & {
+    RadioButton: typeof RadioButton;
+};
+interface RadioGroupProps extends Omit<FormControlProps, "children" | "elementType" | "errorMessage" | "htmlFor" | "labelSize" | "requirementStatus" | "disclosureText" | "disclosureTitle" | "onClickDisclosure" | "helperUnderLabel" | "supplementaryInfo"> {
+    /**
+     * Contents of the RadioGroup. Should only contain `RadioGroup.RadioButton`
+     */
+    children?: React.ReactNode;
+    /**
+     * Value of the RadioButton that should be checked by default.
+     */
+    checkedValue: string;
+    /**
+     * Should all controls be disabled?
+     */
+    isDisabled?: boolean;
+    /**
+     * Helper message for the RadioGroup.
+     */
+    helper?: string;
+    /**
+     * ID for the RadioGroup.
+     */
+    id: string;
+    /**
+     * Label for the RadioGroup.
+     */
+    label: string;
+    /**
+     * Label size for the RadioGroup
+     */
+    labelSize?: "s" | "l";
+    /**
+     * Name for the RadioGroup.
+     */
+    name: string;
+    /**
+     * Function to call when the RadioGroup loses focus.
+     */
+    onBlur?: (e: EventType$0) => void;
+    /**
+     * Callback function to update the RadioGroup's controlled `checkedValue` prop,
+     * for example `e => setCheckedValue(e.target.value)`.
+     */
+    onChange?: (event: EventType$0) => void;
+    /**
+     * Size of the RadioGroup.
+     */
+    size?: "s" | "l";
+}
+export { RadioButton, RadioButtonProps, Provider, useRadioContext, RadioGroup, RadioGroupProps };