@arc-ui/components 11.5.0 → 11.6.0

package/dist/_shared/esm/Columns-8704515b.js

@@ -0,0 +1,51 @@
+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, { useEffect } from 'react';
+import { s as suffixModifier } from './suffix-modifier-7e640670.js';
+
+/**
+ * Use `Columns` to compose layouts on a 12-column grid.
+ */
+var Columns = function (_a) {
+    var children = _a.children, _b = _a.isGutterless, isGutterless = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isGutterless"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== Col) {
+                throw new Error("Illegal child passed to <Columns />. Ensure to only use <Columns.Col />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Columns": true,
+            "arc-Columns--gutterless": isGutterless
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("div", { className: "arc-Columns-inner" }, children)));
+};
+var Col = function (_a) {
+    var _b;
+    var align = _a.align, children = _a.children, _c = _a.isDebugVisible, isDebugVisible = _c === void 0 ? false : _c, offset = _a.offset, offsetS = _a.offsetS, offsetM = _a.offsetM, offsetL = _a.offsetL, offsetXL = _a.offsetXL, span = _a.span, spanS = _a.spanS, spanM = _a.spanM, spanL = _a.spanL, spanXL = _a.spanXL, props = __rest(_a, ["align", "children", "isDebugVisible", "offset", "offsetS", "offsetM", "offsetL", "offsetXL", "span", "spanS", "spanM", "spanL", "spanXL"]);
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
+            _b["arc-Columns-col"] = true,
+            _b[suffixModifier("arc-Columns-col--align", align || "")] = align,
+            _b["arc-Columns-col--".concat(span)] = typeof span !== "undefined",
+            _b["arc-Columns-col--s".concat(spanS)] = typeof spanS !== "undefined",
+            _b["arc-Columns-col--m".concat(spanM)] = typeof spanM !== "undefined",
+            _b["arc-Columns-col--l".concat(spanL)] = typeof spanL !== "undefined",
+            _b["arc-Columns-col--xL".concat(spanXL)] = typeof spanXL !== "undefined",
+            _b["arc-Columns-col--offset"] = typeof offset !== "undefined" ||
+                typeof offsetS !== "undefined" ||
+                typeof offsetM !== "undefined" ||
+                typeof offsetL !== "undefined" ||
+                typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--offset".concat(offset)] = typeof offset !== "undefined",
+            _b["arc-Columns-col--offsetS".concat(offsetS)] = typeof offsetS !== "undefined",
+            _b["arc-Columns-col--offsetM".concat(offsetM)] = typeof offsetM !== "undefined",
+            _b["arc-Columns-col--offsetL".concat(offsetL)] = typeof offsetL !== "undefined",
+            _b["arc-Columns-col--offsetXL".concat(offsetXL)] = typeof offsetXL !== "undefined",
+            _b["arc-Columns-col--debugVisible"] = isDebugVisible,
+            _b)) }, filterDataAttrs(props)), children));
+};
+Col.displayName = "Columns.Col";
+Columns.Col = Col;
+
+export { Columns as C };

package/dist/_shared/esm/{DisclosureMini-322fccc0.js → DisclosureMini-022beae3.js}

@@ -25,7 +25,9 @@ var DisclosureMini = function (_a) {
                 "arc-DisclosureMini-summary--icon-left": iconPosition === "left",
                 "arc-DisclosureMini-summary--icon-right": iconPosition === "right"
             }), onClick: handleOnClick, "aria-expanded": disclousreState },
-            React__default.createElement("span", { className: "arc-DisclosureMini-summary-icon" },
+            React__default.createElement("div", { className: classNames("arc-DisclosureMini-summary-icon", {
+                    "arc-DisclosureMini-summary-icon--small": size === "s"
+                }) },
                 React__default.createElement(BtIconChevronDown2Px_2, null)),
             React__default.createElement(Text, { size: size === "l" ? "m" : "s" }, summary)),
         React__default.createElement("div", { className: "arc-DisclosureMini-details" },

package/dist/_shared/esm/Filter-41b391e3.d.ts

@@ -0,0 +1,83 @@
+import { FC, ReactNode } from "react";
+declare const FilterItems: FC<FilterItemsProps>;
+interface FilterItemsProps {
+    /**
+     * Render children of `<Filter.Items />`. This should only use `<Filter.Item />`
+     */
+    children: ReactNode;
+    /**
+     * Determine the display style of `<Filter.Item />`
+     */
+    displayType?: "grid" | "list";
+}
+declare const FilterItem: FC<FilterItemProps>;
+interface FilterItemProps {
+    /**
+     * Content to display within `Filter.Item`
+     */
+    children: ReactNode;
+    /**
+     * Attach Tags to content provided within `Filter.Item`
+     */
+    tags: string[];
+}
+declare const FilterControls: FC<FilterControlsProps>;
+interface FilterControlsProps {
+    /**
+     * Contents of the `<FilterControls />` Should contain `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Detmine how to align <FilterControl /> with in <FilterControls />. Default `center`
+     */
+    controlsAlignment?: "left" | "right" | "center";
+}
+declare const FilterControl: FC<FilterControlProps>;
+interface FilterControlProps {
+    /**
+     * Name of the `<FilterControl />`
+     */
+    children: ReactNode;
+    /**
+     * Determine if the `<FilterControl />` is selected
+     */
+    isSelected?: boolean;
+    /**
+     * onClick handler
+     */
+    onClick?: () => void;
+}
+/** use `Filter` for interactive elements that filter and categorise page content. */
+declare const Filter: FC<FilterProps> & {
+    Item: typeof FilterItem;
+    Items: typeof FilterItems;
+    Control: typeof FilterControl;
+    Controls: typeof FilterControls;
+};
+interface FilterProps {
+    /**
+     * Contents of the `<Filter />` Should contain `<Filter.Item />`
+     */
+    children?: ReactNode;
+    /**
+     * onChange handler called everytime `<FilterControl />` is pressed
+     */
+    onChange?: (selectedControls: string[]) => void;
+    /**
+     * Detmine how to display the content within `<Filter.Items />`. Default is `grid`
+     */
+    displayType?: FilterItemsProps["displayType"];
+    /**
+     * Detmine how to align <Filter.Controls />. Default `center`
+     */
+    controlsAlignment?: FilterControlsProps["controlsAlignment"];
+    /**
+     * Detmine if the `<Filter.Control />` have to partially match or match all
+     */
+    logicType?: "AND" | "OR";
+    /**
+     * Detmine what is display when no items match the filtering criteria
+     */
+    error?: ReactNode;
+}
+export { FilterItems, FilterItemsProps, FilterItem, FilterItemProps, FilterControls, FilterControlsProps, FilterControl, FilterControlProps, Filter, FilterProps };

package/dist/_shared/esm/Filter-41b391e3.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-bb100ef8.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/esm/{FormControl-0744f93f.d.ts → FormControl-5e3fdca3.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-5e3fdca3.js}

@@ -3,8 +3,7 @@ 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 { D as DisclosureMini } from './DisclosureMini-022beae3.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-d62c3f56.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-d62c3f56.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-bb100ef8.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/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-107d6954.d.ts

@@ -0,0 +1,81 @@
+import React from "react";
+import { FC, ReactNode } from "react";
+import { anchorPoints } from "./index-9483ad5f";
+import { loadingOptions } from "./Image-3596ce55";
+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-107d6954.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-bb100ef8.js';
+import { I as Image } from './Image-3596ce55.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 };