@arc-ui/components 11.4.2 → 11.6.0

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

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

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

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+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-f5e28822.js';
+import { s as suffixModifier } from './suffix-modifier-7e640670.js';
 
 /**
  * Use `Image` to render a single image, or set of images, with support for

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 };

package/dist/_shared/esm/RadioGroup-1fd0f389.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+import React from "react";
+import { FC } from "react";
+import { FormControlProps } from "./FormControl-5e3fdca3";
+/**
+ * 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 };

package/dist/_shared/esm/RadioGroup-1fd0f389.js

@@ -0,0 +1,64 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import React__default, { createContext, useContext, forwardRef, useEffect } from 'react';
+import { F as FormControl } from './FormControl-5e3fdca3.js';
+import { c as classNames } from './index-2ae58626.js';
+import { C as Context } from './Surface-bb100ef8.js';
+
+var RadioContext = createContext({});
+var Provider = RadioContext.Provider;
+var useRadioContext = function () {
+    var context = useContext(RadioContext);
+    return context;
+};
+
+/**
+ * Radio Button component.
+ */
+var RadioButton = forwardRef(function (_a, ref) {
+    var helper = _a.helper, id = _a.id, isDisabled = _a.isDisabled, label = _a.label, value = _a.value, props = __rest(_a, ["helper", "id", "isDisabled", "label", "value"]);
+    var _b = useRadioContext(), blurEvent = _b.blurEvent, changeEvent = _b.changeEvent, groupDisabled = _b.groupDisabled, checkedValue = _b.checkedValue, labelSize = _b.labelSize, name = _b.name, size = _b.size;
+    var surface = useContext(Context).surface;
+    var idLabel = "".concat(id, "-label");
+    var checked = checkedValue === value ? true : false;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-RadioButton": true,
+            "arc-RadioButton--disabled": isDisabled || groupDisabled,
+            "arc-RadioButton--small": size === "s",
+            "arc-RadioButton--smallLabel": labelSize === "s",
+            "arc-RadioButton--onDarkSurface": surface === "dark"
+        }) }, filterDataAttrs(props)),
+        React__default.createElement("label", { className: "arc-RadioButton-label", htmlFor: id, id: idLabel },
+            React__default.createElement("input", { className: "arc-RadioButton-input", checked: typeof changeEvent !== "function" ? undefined : checked, defaultChecked: typeof changeEvent !== "function" ? checked : undefined, disabled: isDisabled || groupDisabled, id: id, name: name, onBlur: blurEvent, onChange: changeEvent, ref: ref, type: "radio", value: value }),
+            React__default.createElement("span", null,
+                label,
+                helper && React__default.createElement("span", { className: "arc-RadioButton-helper" }, helper)))));
+});
+
+/**
+ * Use `RadioGroup` to wrap and control radio buttons and apply default values
+ */
+var RadioGroup = function (_a) {
+    var children = _a.children, checkedValue = _a.checkedValue, _b = _a.isDisabled, isDisabled = _b === void 0 ? false : _b, id = _a.id, helper = _a.helper, label = _a.label, _c = _a.labelSize, labelSize = _c === void 0 ? "l" : _c, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, _d = _a.size, size = _d === void 0 ? "l" : _d, props = __rest(_a, ["children", "checkedValue", "isDisabled", "id", "helper", "label", "labelSize", "name", "onBlur", "onChange", "size"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== RadioButton) {
+                throw new Error("Illegal child passed to <RadioGroup />. Ensure to only use <RadioGroup.RadioButton />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement(Provider, { value: {
+            blurEvent: onBlur,
+            changeEvent: onChange,
+            groupDisabled: isDisabled,
+            checkedValue: checkedValue,
+            labelSize: labelSize,
+            name: name,
+            size: size
+        } },
+        React__default.createElement("div", __assign({ className: "arc-RadioGroup" }, filterDataAttrs(props)),
+            React__default.createElement(FormControl, { elementType: "fieldset", label: label, labelSize: labelSize, helper: helper, id: id, requirementStatus: "not-applicable", helperUnderLabel: true }, children))));
+};
+RadioButton.displayName = "RadioGroup.RadioButton";
+RadioGroup.RadioButton = RadioButton;
+
+export { RadioGroup as R };

package/dist/_shared/esm/{Section-7bc71e26.js → Section-b8038d66.js}

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from './index-229fc864.js';
+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';
 

package/dist/_shared/esm/SiteFooter-8075a9bd.d.ts

@@ -0,0 +1,62 @@
+import { FC, ReactNode } from "react";
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+declare const SiteFooter: FC<SiteFooterProps> & {
+    Item: typeof SiteFooterItem;
+    ItemGroup: typeof SiteFooterItemGroup;
+};
+declare const SiteFooterItemGroup: FC<SiteFooterItemGroupProps>;
+declare const SiteFooterItem: FC<SiteFooterItemProps>;
+interface SiteFooterItemGroupProps {
+    /**
+     * Contents of the SiteFooterItemGroup. Must be SiteFooter.Item components.
+     */
+    children: ReactNode;
+    /**
+     * Title text for the SiteFooterItemGroup.
+     */
+    title: string;
+}
+interface SiteFooterItemProps {
+    /**
+     * Contents of the SiteFooterItem.
+     */
+    children: ReactNode;
+    /**
+     * A URL to link to when the Item is clicked or touched.
+     */
+    href: string;
+    /**
+     * On click handler.
+     */
+    onClick?: () => void;
+}
+interface SiteFooterProps {
+    /**
+     * Secondary content of the SiteFooter. Must be SiteFooter.Item components.
+     */
+    children?: ReactNode;
+    /**
+     * Copyright year.
+     */
+    currentYear?: string;
+    /**
+     * Should the SiteFooter include a Curve?
+     */
+    curve?: boolean;
+    /**
+     * Accessible text for the SiteFooter logo.
+     */
+    logoLabel?: string;
+    /**
+     * Main content of the SiteFooter. Must be SiteFooter.ItemGroup components.
+     */
+    main?: ReactNode;
+    /**
+     * Text that appears at the top of the footer. Can be the name of the site, a
+     * brand strapline, or similar.
+     */
+    siteName?: string;
+}
+export { SiteFooter, SiteFooterItemGroup, SiteFooterItem, SiteFooterItemGroupProps, SiteFooterItemProps, SiteFooterProps };

package/dist/_shared/esm/SiteFooter-8075a9bd.js

@@ -0,0 +1,67 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from './filter-data-attrs-afdb7d32.js';
+import { u as useMediaQuery, A as ArcBreakpointM } from './index.es-00cb3bcb.js';
+import { B as BtIconChevronDown2Px_2 } from './BtIconChevronDown2Px-782876e2.js';
+import React__default, { useEffect, Fragment } from 'react';
+import { B as BrandLogo } from './BrandLogo-56699561.js';
+import { C as Curve } from './Curve-3e87b1bc.js';
+import { S as Section } from './Section-b8038d66.js';
+import { S as Surface } from './Surface-bb100ef8.js';
+import { h as handleLinkClick } from './handle-link-click-f64f55a2.js';
+
+/**
+ * Use `SiteFooter` to display information at the bottom of a page.
+ */
+var SiteFooter = function (_a) {
+    var children = _a.children, currentYear = _a.currentYear, _b = _a.curve, curve = _b === void 0 ? true : _b, logoLabel = _a.logoLabel, main = _a.main, siteName = _a.siteName, props = __rest(_a, ["children", "currentYear", "curve", "logoLabel", "main", "siteName"]);
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem) {
+                throw new Error("Illegal child passed to <SiteFooter />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement(React__default.Fragment, null,
+        curve ? (React__default.createElement(Curve, { bottomColor: "brand-flat", from: "topLeft", size: "s" })) : null,
+        React__default.createElement("footer", __assign({ className: "arc-SiteFooter" }, filterDataAttrs(props)),
+            React__default.createElement(Surface, { background: "brand-flat", paddingVertical: "24" },
+                (siteName || main) && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Section, null,
+                        siteName && (React__default.createElement("div", { className: "arc-SiteFooter-name" }, siteName)),
+                        main && React__default.createElement("div", { className: "arc-SiteFooter-main" }, main)),
+                    React__default.createElement("hr", { className: "arc-SiteFooter-rule" }))),
+                React__default.createElement(Section, null,
+                    React__default.createElement("div", { className: "arc-SiteFooter-secondary" },
+                        children && (React__default.createElement("ul", { className: "arc-SiteFooter-secondaryItems" }, children)),
+                        React__default.createElement("div", { className: "arc-SiteFooter-brand" },
+                            React__default.createElement("div", { className: "arc-SiteFooter-copyright" },
+                                React__default.createElement("span", { className: "arc-SiteFooter-copyrightSymbol" }, "\u00A9"), " ".concat(currentYear || new Date().getFullYear())),
+                            React__default.createElement(BrandLogo, { label: logoLabel }))))))));
+};
+var SiteFooterItemGroup = function (_a) {
+    var children = _a.children, title = _a.title;
+    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(ArcBreakpointM, "px)"));
+    useEffect(function () {
+        React__default.Children.map(children, function (item) {
+            if (item && item.type !== SiteFooterItem && item.type !== Fragment) {
+                throw new Error("Illegal child passed to <SiteFooterItemGroup />. Ensure to only use <SiteFooter.Item />.");
+            }
+        });
+    }, [children]);
+    return (React__default.createElement("details", { className: "arc-SiteFooter-disclosure", open: isMinWidthArcBreakpointM },
+        React__default.createElement("summary", { className: "arc-SiteFooter-summary", tabIndex: isMinWidthArcBreakpointM ? -1 : 0 },
+            React__default.createElement("span", { className: "arc-SiteFooter-icon" },
+                React__default.createElement(BtIconChevronDown2Px_2, null)),
+            React__default.createElement("h2", { className: "arc-SiteFooter-title" }, title)),
+        React__default.createElement("ul", { className: "arc-SiteFooter-mainItems" }, children)));
+};
+var SiteFooterItem = function (_a) {
+    var children = _a.children, href = _a.href, onClick = _a.onClick, props = __rest(_a, ["children", "href", "onClick"]);
+    return (React__default.createElement("li", __assign({ className: "arc-SiteFooter-item" }, filterDataAttrs(props)),
+        React__default.createElement("a", { onClick: handleLinkClick({ handler: onClick }), className: "arc-SiteFooter-link", href: href }, children)));
+};
+SiteFooterItem.displayName = "SiteFooter.Item";
+SiteFooter.Item = SiteFooterItem;
+SiteFooterItemGroup.displayName = "SiteFooter.ItemGroup";
+SiteFooter.ItemGroup = SiteFooterItemGroup;
+
+export { SiteFooter as S };

package/dist/_shared/esm/SiteHeader-c25ee36e.d.ts

@@ -0,0 +1,78 @@
+/// <reference types="react" />
+import React from "react";
+import { FC, ReactNode } from "react";
+import { subBrands } from "./BrandLogo-56699561";
+import { Column } from "./index-f419cf04";
+import { Item } from "./index-699086a7";
+import { ItemGroup } from "./index-e340924e";
+import { NavItem, NavItemWithSubNav } from "./index-e6d20018";
+import { NodeItem } from "./SiteHeader.rehydrator-4da8ac64";
+import { SubNavItem } from "./index-74488a9f";
+declare const Context: React.Context<{
+    transparent: boolean;
+}>;
+/**
+ * Use `SiteHeader` to display brand logo and navigation at the top of a page.
+ */
+declare const SiteHeader: FC<SiteHeaderProps> & {
+    Column: typeof Column;
+    Item: typeof Item;
+    ItemGroup: typeof ItemGroup;
+    NavItem: typeof NavItem;
+    NodeItem: typeof NodeItem;
+    NavItemWithSubNav: typeof NavItemWithSubNav;
+    SubNavItem: typeof SubNavItem;
+};
+interface SiteHeaderProps {
+    /**
+     * Contents of the SiteHeader. Must be SiteHeader.NavItem or
+     * SiteHeader.NavItemWithSubNav components.
+     */
+    children?: ReactNode;
+    /**
+     * Basket component for the SiteHeader.
+     */
+    basket?: ReactNode;
+    /**
+     * Should account login links be included in the SiteHeader?
+     */
+    hasLogin?: boolean;
+    /**
+     * Should the SiteHeader have a transparent background?
+     */
+    isTransparent?: boolean;
+    /**
+     * A URL to link to when SiteHeader logo is clicked or touched.
+     */
+    loginHref?: string;
+    /**
+     * A Function to run to when SiteHeader logo is clicked or touched.
+     */
+    logoOnClick?: () => void;
+    /**
+     * A Function to run to when SiteHeader login links are clicked or touched.
+     */
+    loginOnClick?: () => void;
+    /**
+     * Text to display in SiteHeader login links.
+     */
+    loginTitle?: string;
+    /**
+     * A URL to link to when the SiteHeader brand logo link is clicked or touched.
+     */
+    logoHref?: string;
+    /**
+     * Accessible text for the SiteHeader brand logo link.
+     */
+    logoLabel?: string;
+    /**
+     * Search component for the SiteHeader.
+     */
+    search?: ReactNode;
+    /**
+     * Optional sub-brand variant. Only applies to BT.
+     */
+    subBrand?: typeof subBrands[number];
+}
+export { MenuButton } from "./SiteHeader.rehydrator-4da8ac64";
+export { SiteHeader, SiteHeaderProps, Context as SiteHeaderContext };