@arc-ui/components 11.4.2 → 11.6.0

package/dist/Pagination/Pagination.cjs.js

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+var BtIconChevronLeftMid = require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
+var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+var filterDataAttrs = require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var usePagination = function (pageCount, selectedPage) {
+    var formatValues = function (range) {
+        return range.map(function (value) { return value.toString(); });
+    };
+    return React.useMemo(function () {
+        if (pageCount > 7 && selectedPage < 5) {
+            // show 1 - 5 the right dots are visible.
+            return formatValues(filterDataAttrs.__spreadArray(filterDataAttrs.__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+                "...",
+                pageCount
+            ], false));
+        }
+        if (pageCount > 7 && selectedPage >= pageCount - 3) {
+            // show numbers to the end but the left dots are visible
+            return formatValues(filterDataAttrs.__spreadArray([
+                1,
+                "..."
+            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
+        }
+        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
+            // show selected page with one number either side and both the left and the right dots are visible.
+            return formatValues([
+                1,
+                "...",
+                selectedPage - 1,
+                selectedPage,
+                selectedPage + 1,
+                "...",
+                pageCount
+            ]);
+        }
+        // show all pages from pageCount
+        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
+    }, [pageCount, selectedPage]);
+};
+
+/**
+ * Use `Pagination` to navigate multiple pages.
+ */
+var Pagination = function (_a) {
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b;
+    var surface = React.useContext(Surface.Context).surface;
+    var _c = React.useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
+    var pageRange = usePagination(pageCount, selectedPage);
+    var handlePagechange = function (pageToSelect) { return function () {
+        setSelectedPage(pageToSelect);
+        onPageChange(pageToSelect);
+    }; };
+    var isPageNumber = function (rangeValue) { return !isNaN(parseInt(rangeValue)); };
+    return (React__default["default"].createElement("nav", { "aria-label": "pagination navigation", className: index.classNames("arc-Pagination", {
+            "arc-Pagination--onDarkSurface": surface === "dark"
+        }) },
+        React__default["default"].createElement("button", { "aria-label": "Go to previous page", className: index.classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === 1
+            }), onClick: handlePagechange(selectedPage - 1) },
+            React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid.BtIconChevronLeftMid_2 }))),
+        React__default["default"].createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
+            return isPageNumber(rangeValue) ? (React__default["default"].createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: index.classNames("arc-Pagination-value arc-Pagination-value--number", {
+                    "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
+                }), onClick: handlePagechange(parseInt(rangeValue)) }, rangeValue)) : (React__default["default"].createElement("span", { key: "pagination-range-value-dot".concat(i), className: index.classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
+        })),
+        React__default["default"].createElement("button", { "aria-label": "Go to next page", className: index.classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
+            }), onClick: handlePagechange(selectedPage + 1) },
+            React__default["default"].createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid.BtIconChevronRightMid_2 })))));
+};
+
+exports.Pagination = Pagination;

package/dist/Pagination/Pagination.esm.d.ts

@@ -0,0 +1,20 @@
+import { FC } from "react";
+/**
+ * Use `Pagination` to navigate multiple pages.
+ */
+declare const Pagination: FC<PaginationProps>;
+interface PaginationProps {
+    /**
+     * Number of pages for the pagination
+     */
+    pageCount: number;
+    /**
+     * Default page to be selected on render. If not provided defaults to 1.
+     */
+    defaultSelectedPage?: number;
+    /**
+     * Function to call when the page changes
+     */
+    onPageChange: (selectedPage: number) => void;
+}
+export { Pagination };

package/dist/Pagination/Pagination.esm.js

@@ -0,0 +1,79 @@
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import React__default, { useMemo, useContext, useState } from 'react';
+import { B as BtIconChevronRightMid_2 } from '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import { B as BtIconChevronLeftMid_2 } from '../_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js';
+import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import { b as __spreadArray } from '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+
+var usePagination = function (pageCount, selectedPage) {
+    var formatValues = function (range) {
+        return range.map(function (value) { return value.toString(); });
+    };
+    return useMemo(function () {
+        if (pageCount > 7 && selectedPage < 5) {
+            // show 1 - 5 the right dots are visible.
+            return formatValues(__spreadArray(__spreadArray([], Array.from({ length: 5 }, function (_value, index) { return index + 1; }), true), [
+                "...",
+                pageCount
+            ], false));
+        }
+        if (pageCount > 7 && selectedPage >= pageCount - 3) {
+            // show numbers to the end but the left dots are visible
+            return formatValues(__spreadArray([
+                1,
+                "..."
+            ], Array.from({ length: 5 }, function (_value, index) { return pageCount - index; }).reverse(), true));
+        }
+        if (pageCount > 7 && selectedPage >= 5 && selectedPage < pageCount - 3) {
+            // show selected page with one number either side and both the left and the right dots are visible.
+            return formatValues([
+                1,
+                "...",
+                selectedPage - 1,
+                selectedPage,
+                selectedPage + 1,
+                "...",
+                pageCount
+            ]);
+        }
+        // show all pages from pageCount
+        return formatValues(Array.from({ length: pageCount }, function (_value, index) { return index + 1; }));
+    }, [pageCount, selectedPage]);
+};
+
+/**
+ * Use `Pagination` to navigate multiple pages.
+ */
+var Pagination = function (_a) {
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b;
+    var surface = useContext(Context).surface;
+    var _c = useState(defaultSelectedPage), selectedPage = _c[0], setSelectedPage = _c[1];
+    var pageRange = usePagination(pageCount, selectedPage);
+    var handlePagechange = function (pageToSelect) { return function () {
+        setSelectedPage(pageToSelect);
+        onPageChange(pageToSelect);
+    }; };
+    var isPageNumber = function (rangeValue) { return !isNaN(parseInt(rangeValue)); };
+    return (React__default.createElement("nav", { "aria-label": "pagination navigation", className: classNames("arc-Pagination", {
+            "arc-Pagination--onDarkSurface": surface === "dark"
+        }) },
+        React__default.createElement("button", { "aria-label": "Go to previous page", className: classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === 1
+            }), onClick: handlePagechange(selectedPage - 1) },
+            React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_2 }))),
+        React__default.createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
+            return isPageNumber(rangeValue) ? (React__default.createElement("button", { "aria-current": parseInt(rangeValue) === selectedPage, key: "pagination-range-value-".concat(rangeValue), "aria-label": "Go to page ".concat(rangeValue), className: classNames("arc-Pagination-value arc-Pagination-value--number", {
+                    "arc-Pagination-value--selected": parseInt(rangeValue) === selectedPage
+                }), onClick: handlePagechange(parseInt(rangeValue)) }, rangeValue)) : (React__default.createElement("span", { key: "pagination-range-value-dot".concat(i), className: classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
+        })),
+        React__default.createElement("button", { "aria-label": "Go to next page", className: classNames("arc-Pagination-navigationButton", {
+                "arc-Pagination-navigationButton--hidden": selectedPage === pageCount
+            }), onClick: handlePagechange(selectedPage + 1) },
+            React__default.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_2 })))));
+};
+
+export { Pagination };

package/dist/Pagination/package.json

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

package/dist/PaginationSimple/PaginationSimple.cjs.d.ts

@@ -0,0 +1,28 @@
+import { FC } from "react";
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+declare const PaginationSimple: FC<PaginationSimpleProps>;
+interface PaginationSimpleProps {
+    /**
+     * hides prev button if true.
+     */
+    hidePrev?: boolean;
+    /**
+     * hides next button if true.
+     */
+    hideNext?: boolean;
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * Function to call when previous page is selected
+     */
+    onPrevPage: () => void;
+    /**
+     * Function to call when next page is selected
+     */
+    onNextPage: () => void;
+}
+export { PaginationSimple };

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index = require('../_shared/cjs/index-45bfb67b.js');
+var React = require('react');
+var BtIconChevronRightMid = require('../_shared/cjs/BtIconChevronRightMid-5a38d855.js');
+var BtIconChevronLeftMid = require('../_shared/cjs/BtIconChevronLeftMid-df952a3e.js');
+var Icon = require('../_shared/cjs/Icon-9ae8dbe1.js');
+var Surface = require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+var PaginationSimple = function (_a) {
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid;
+    var surface = React.useContext(Surface.Context).surface;
+    return (React__default["default"].createElement("nav", { className: index.classNames("arc-PaginationSimple", {
+            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+            "arc-PaginationSimple--fluid": isFluid,
+            "arc-PaginationSimple--centered": !isFluid
+        }) },
+        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hidePrev
+            }), onClick: function () {
+                onPrevPage();
+            } },
+            React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid.BtIconChevronLeftMid_2 })),
+            React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
+        React__default["default"].createElement("button", { className: index.classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hideNext
+            }), onClick: function () {
+                onNextPage();
+            } },
+            React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
+            React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
+                React__default["default"].createElement(Icon.Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid.BtIconChevronRightMid_2 })))));
+};
+
+exports.PaginationSimple = PaginationSimple;

package/dist/PaginationSimple/PaginationSimple.esm.d.ts

@@ -0,0 +1,28 @@
+import { FC } from "react";
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+declare const PaginationSimple: FC<PaginationSimpleProps>;
+interface PaginationSimpleProps {
+    /**
+     * hides prev button if true.
+     */
+    hidePrev?: boolean;
+    /**
+     * hides next button if true.
+     */
+    hideNext?: boolean;
+    /**
+     * if true buttons will hug either edge of the parent element
+     */
+    isFluid?: boolean;
+    /**
+     * Function to call when previous page is selected
+     */
+    onPrevPage: () => void;
+    /**
+     * Function to call when next page is selected
+     */
+    onNextPage: () => void;
+}
+export { PaginationSimple };

package/dist/PaginationSimple/PaginationSimple.esm.js

@@ -0,0 +1,39 @@
+import { c as classNames } from '../_shared/esm/index-2ae58626.js';
+import React__default, { useContext } from 'react';
+import { B as BtIconChevronRightMid_2 } from '../_shared/esm/BtIconChevronRightMid-d9b11761.js';
+import { B as BtIconChevronLeftMid_2 } from '../_shared/esm/BtIconChevronLeftMid-9f4f3a3d.js';
+import { I as Icon } from '../_shared/esm/Icon-fd247973.js';
+import { C as Context } from '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';
+
+/**
+ * Use `PaginationSimple` to navigate multiple pages.
+ */
+var PaginationSimple = function (_a) {
+    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid;
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("nav", { className: classNames("arc-PaginationSimple", {
+            "arc-PaginationSimple--onDarkSurface": surface === "dark",
+            "arc-PaginationSimple--fluid": isFluid,
+            "arc-PaginationSimple--centered": !isFluid
+        }) },
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hidePrev
+            }), onClick: function () {
+                onPrevPage();
+            } },
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronLeftMid_2 })),
+            React__default.createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev")),
+        React__default.createElement("button", { className: classNames("arc-PaginationSimple-navigationButton", {
+                "arc-PaginationSimple-navigationButton--hidden": hideNext
+            }), onClick: function () {
+                onNextPage();
+            } },
+            React__default.createElement("span", { className: "arc-PaginationSimple-nextText" }, "Next"),
+            React__default.createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right" },
+                React__default.createElement(Icon, { color: "brand", size: 32, icon: BtIconChevronRightMid_2 })))));
+};
+
+export { PaginationSimple };

package/dist/PaginationSimple/package.json

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

package/dist/Poster/Poster.cjs.d.ts

@@ -1,81 +1 @@
-import React from "react";
-import { FC, ReactNode } from "react";
-import { anchorPoints } from "../_shared/cjs/index-9483ad5f";
-import { loadingOptions } from "../_shared/cjs/Image-fe760a06";
-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;
-}
-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;
-}
-/**
- * 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 { Poster };
+export { Poster } from "../_shared/cjs/Poster-e05bbe13";

package/dist/Poster/Poster.cjs.js

@@ -2,51 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../_shared/cjs/index-78b35bc1.js');
-var index$1 = require('../_shared/cjs/index-45bfb67b.js');
-var React = require('react');
-var Surface = require('../_shared/cjs/Surface-d6b8010e.js');
-var Image = require('../_shared/cjs/Image-fe760a06.js');
-var suffixModifier = require('../_shared/cjs/suffix-modifier-edf7851e.js');
+var Poster = require('../_shared/cjs/Poster-e05bbe13.js');
+require('../_shared/cjs/filter-data-attrs-a30dcf5f.js');
+require('../_shared/cjs/index-45bfb67b.js');
+require('react');
+require('../_shared/cjs/Surface-6da0a78e.js');
+require('../_shared/cjs/Image-3bf4b4f3.js');
+require('../_shared/cjs/suffix-modifier-1ee2da04.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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__default["default"].createElement(Image.Image, index.__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 = index.__rest(_a, ["anchor", "autoPlay", "children", "loop"]);
-    return (React__default["default"].createElement("video", index.__assign({ className: index$1.classNames((_b = {
-                "arc-PosterVideo": true
-            },
-            _b[suffixModifier.suffixModifier("arc-PosterVideo--anchor", anchor)] = anchor,
-            _b)), autoPlay: autoPlay, muted: true, loop: loop }, index.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 = index.__rest(_a, ["background", "children", "overlay", "surface"]);
-    return (React__default["default"].createElement(Surface.Surface, { background: surface },
-        React__default["default"].createElement("div", index.__assign({ className: index$1.classNames({
-                "arc-Poster": true,
-                "arc-Poster--overlay": overlay,
-                "arc-Poster--overlayLight": surface === "lighter"
-            }) }, index.filterDataAttrs(props)),
-            React__default["default"].createElement("div", { className: "arc-Poster-backgroundWrapper" }, background),
-            React__default["default"].createElement("div", { className: "arc-Poster-body" }, children))));
-};
-PosterImage.displayName = "Poster.Image";
-Poster.Image = PosterImage;
-PosterVideo.displayName = "Poster.Video";
-Poster.Video = PosterVideo;
-
-exports.Poster = Poster;
+exports.Poster = Poster.Poster;

package/dist/Poster/Poster.esm.d.ts

@@ -1,81 +1 @@
-import React from "react";
-import { FC, ReactNode } from "react";
-import { anchorPoints } from "../_shared/esm/index-9483ad5f";
-import { loadingOptions } from "../_shared/esm/Image-c0f3d42f";
-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;
-}
-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;
-}
-/**
- * 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 { Poster };
+export { Poster } from "../_shared/esm/Poster-107d6954";

package/dist/Poster/Poster.esm.js

@@ -1,44 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index-229fc864.js';
-import { c as classNames } from '../_shared/esm/index-2ae58626.js';
-import React__default from 'react';
-import { S as Surface } from '../_shared/esm/Surface-bf201530.js';
-import { I as Image } from '../_shared/esm/Image-c0f3d42f.js';
-import { s as suffixModifier } from '../_shared/esm/suffix-modifier-f5e28822.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 };
+export { P as Poster } from '../_shared/esm/Poster-107d6954.js';
+import '../_shared/esm/filter-data-attrs-afdb7d32.js';
+import '../_shared/esm/index-2ae58626.js';
+import 'react';
+import '../_shared/esm/Surface-bb100ef8.js';
+import '../_shared/esm/Image-3596ce55.js';
+import '../_shared/esm/suffix-modifier-7e640670.js';