@arc-ui/components 12.0.0-beta.6 → 12.0.0-beta.9

package/dist/InformationCard/InformationCard.esm.js

@@ -1,66 +1,52 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
 import React__default, { useContext, useState } from 'react';
-import { a as SemSizeBreakpointsS, S as SemSizeBreakpointsM } from '../_shared/esm/index.es-974af4a2.js';
 import { B as BtIconArrowRight } from '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
-import { I as Icon } from '../_shared/esm/Icon-428e8061.js';
-import { T as Tag } from '../_shared/esm/Tag-1ae027ee.js';
-import { I as Image } from '../_shared/esm/Image-c1dc10b5.js';
-import { H as Heading } from '../_shared/esm/Heading-0dfbdb24.js';
-import { T as Text } from '../_shared/esm/Text-96d8a35f.js';
-import { B as ButtonV2 } from '../_shared/esm/ButtonV2-f9019e00.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6a3533db.js';
-import { u as useMediaQuery } from '../_shared/esm/use-media-query-d3622da8.js';
-import { C as CardHeading } from '../_shared/esm/CardHeading-4223432d.js';
+import { I as Icon } from '../_shared/esm/Icon-e85f55ee.js';
+import { B as Badge } from '../_shared/esm/Badge-233eb171.js';
+import { I as Image } from '../_shared/esm/Image-67ec95a0.js';
+import { T as Text } from '../_shared/esm/Text-d0acd173.js';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-feb9bcbc.js';
+import { C as CardHeading } from '../_shared/esm/CardHeading-394596ee.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { C as Context, S as Surface } from '../_shared/esm/Surface-c425e5e6.js';
-import '../_shared/esm/ThemeIcon-9fac63d0.js';
-import '../_shared/esm/ArcIconEclipse.esm-bb48b82a.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-b782cda9.js';
+import '../_shared/esm/Spinner-6493dd54.js';
+import '../_shared/esm/Heading-db9014d5.js';
 
 /** Use `InformationCard` for flexibility and the ability to focus and highlight product specific content. */
 var InformationCard = function (_a) {
-    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, tags = _a.tags, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "tags", "icon", "minHeight", "headingLevel"]);
+    var cardUrl = _a.cardUrl, onClick = _a.onClick, heading = _a.heading, text = _a.text, label = _a.label, footerLogo = _a.footerLogo, button = _a.button, image = _a.image, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = __rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "headingLevel"]);
     var surface = useContext(Context).surface;
-    var isMinWidthArcBreakpointS = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsS, ")"));
-    var isMinWidthArcBreakpointM = useMediaQuery("(min-width: ".concat(SemSizeBreakpointsM, ")"));
     var _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
-    var headingSpacing = isMinWidthArcBreakpointS ? "16" : "8";
-    var assetSpacing = isMinWidthArcBreakpointM ? "24" : "20";
-    var containerSpacing = isMinWidthArcBreakpointS ? "32" : "24";
     var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
     return (React__default.createElement("div", __assign({ style: { minHeight: minHeight }, className: classNames("arc-InformationCard", {
             "arc-InformationCard--isALink": cardUrl,
             "arc-InformationCard--outlined": cardUrl && showHoverState,
             "arc-InformationCard--onDarkSurface": surface === "dark"
         }) }, filterDataAttrs(props)),
-        React__default.createElement(Surface, { growVertically: true, padding: containerSpacing, background: "light-white" },
-            React__default.createElement("div", null,
+        React__default.createElement(Surface, { growVertically: true, background: "light-white" },
+            React__default.createElement("div", { className: "arc-InformationCard-innerContainer" },
                 image && (React__default.createElement("div", { className: "arc-InformationCard-img" },
-                    React__default.createElement(Image, __assign({ alt: "" }, image)),
-                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
+                    React__default.createElement(Image, __assign({ alt: "" }, image)))),
                 icon && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Icon, { testId: "information-card-icon", icon: icon, size: 96 }),
-                    React__default.createElement(VerticalSpace, { size: assetSpacing }))),
-                label && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Heading, { size: "xxs" }, label.toUpperCase()),
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }))),
-                React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) })),
-            React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
-                text && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(VerticalSpace, { size: headingSpacing }),
-                    React__default.createElement(Text, null, text),
-                    (button || tags || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" }))),
-                tags && (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement("div", { className: "arc-InformationCard-tagContainer" }, tags.map(function (_a, i) {
-                        var text = _a.text, tagProps = __rest(_a, ["text"]);
-                        return (React__default.createElement("div", { className: "arc-InformationCard-tag", key: "information-card-tag-".concat(i) },
-                            React__default.createElement(Tag, __assign({}, tagProps), text)));
-                    })),
-                    (button || footerLogo) && React__default.createElement(VerticalSpace, { size: "24" })))),
-            React__default.createElement("div", { className: "arc-InformationCard-footer" },
-                button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
-                    React__default.createElement(ButtonV2, __assign({}, button, { size: "s", iconPosition: "beforeText", buttonStyle: "tertiary", icon: BtIconArrowRight })))),
-                footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
-                    React__default.createElement(Image, __assign({}, footerLogo))))))));
+                    React__default.createElement("div", { className: "arc-InformationCard-icon" },
+                        React__default.createElement(Icon, { testId: "information-card-icon", icon: icon })))),
+                React__default.createElement("div", { className: "arc-InformationCard-contentContainer" },
+                    label && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                    React__default.createElement(CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                    text && React__default.createElement(Text, null, text)),
+                (button || badges || footerLogo) && (React__default.createElement("div", { className: "arc-InformationCard-footer" },
+                    badges && (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("div", { className: "arc-InformationCard-badgeContainer" }, badges.map(function (_a, i) {
+                            var text = _a.text, badgeProps = __rest(_a, ["text"]);
+                            return (React__default.createElement("div", { className: "arc-InformationCard-badge", key: "information-card-badge-".concat(i) },
+                                React__default.createElement(Badge, __assign({}, badgeProps), text)));
+                        })))),
+                    React__default.createElement("div", { className: "arc-InformationCard-footerItems" },
+                        button && !cardUrl && (React__default.createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
+                            React__default.createElement(ButtonV2, __assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight })))),
+                        footerLogo && (React__default.createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
+                            React__default.createElement(Image, __assign({}, footerLogo)))))))))));
 };
 
 export { InformationCard };

package/dist/InformationCard/styles.css

@@ -1 +1 @@
-.arc .arc-InformationCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 1px var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;position:relative;text-decoration:none;transition:all 0.2s ease-in-out}.arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc .arc-InformationCard--isALink[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-InformationCard--isALink:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-InformationCard-img .arc-Image-img{height:80px;width:auto}.arc .arc-InformationCard-contentContainer{flex:1 1 auto}.arc .arc-InformationCard-tagContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc .arc-InformationCard-tag{margin-top:8px}.arc .arc-InformationCard-footer{align-items:center;display:flex}.arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc .arc-InformationCard-tagContainer>.arc-InformationCard-tag{margin:4px 8px}.arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:1024px){.arc .arc-InformationCard-img .arc-Image-img{height:96px}}
+.arc .arc-InformationCard{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 1px var(--card-colors-light-border-default);color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:2px;overflow:hidden;position:relative;text-decoration:none;transition:all 0.2s ease-in-out}.arc .arc-InformationCard-innerContainer{display:flex;flex-direction:column;height:100%;padding:var(--card-padding-s)}.arc .arc-InformationCard-label{color:var(--card-colors-light-text-default);font:var(--sem-type-body-semi-s)}.arc .arc-InformationCard--outlined{box-shadow:0 0 0 2px var(--card-colors-light-fg-hover)}.arc .arc-InformationCard--outlined .arc-CardHeading-link{color:var(--card-colors-light-text-hover)}.arc .arc-InformationCard--isALink[focus-within]{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-InformationCard--isALink:focus-within{box-shadow:0 0 0 1px var(--card-colors-light-fg-hover);outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-InformationCard--onDarkSurface.arc-InformationCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-InformationCard-img,.arc .arc-InformationCard-icon{margin-bottom:var(--card-gap-m)}.arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-m);width:auto}.arc .arc-InformationCard .arc-Icon{height:var(--card-size-icon-m);width:var(--card-size-icon-m)}.arc .arc-InformationCard-contentContainer{display:flex;flex-direction:column;flex-grow:1;gap:var(--card-gap-xs)}.arc .arc-InformationCard-badgeContainer{display:flex;flex-wrap:wrap;margin:-4px -8px}.arc .arc-InformationCard-badge{margin-top:8px}.arc .arc-InformationCard-footer{display:flex;flex-direction:column;gap:var(--card-gap-xl);margin-top:var(--card-gap-xl)}.arc .arc-InformationCard-footerItems{align-items:center;display:flex}.arc .arc-InformationCard-footerButtonContainer{flex:1 1 auto}.arc .arc-InformationCard-footerLogoContainer .arc-Image-img{max-height:48px;width:auto}.arc .arc-InformationCard-badgeContainer>.arc-InformationCard-badge{margin:4px 8px}.arc .arc-InformationCard .arc-Surface{flex:1}@media (min-width:768px){.arc .arc-InformationCard-contentContainer{gap:var(--card-gap-s)}}@media (min-width:1024px){.arc .arc-InformationCard-img .arc-Image-img{height:var(--card-size-l)}}@media (min-width:1280px){.arc .arc-InformationCard-innerContainer{padding:var(--card-padding-m)}}

package/dist/Link/Link.cjs.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
-var Surface = require('../_shared/cjs/Surface-7500f314.js');
-var Icon = require('../_shared/cjs/Icon-7f1e8a19.js');
-var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-25393f58.js');
+var Surface = require('../_shared/cjs/Surface-877d9fcc.js');
+var Icon = require('../_shared/cjs/Icon-cbf91a21.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-82a60021.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Link/Link.esm.js

@@ -1,9 +1,9 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
 import React__default, { useContext } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { C as Context } from '../_shared/esm/Surface-c425e5e6.js';
-import { I as Icon } from '../_shared/esm/Icon-428e8061.js';
-import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-cf45ac18.js';
+import { C as Context } from '../_shared/esm/Surface-b782cda9.js';
+import { I as Icon } from '../_shared/esm/Icon-e85f55ee.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-605ea42d.js';
 
 const BtIconNewWindow = (props) =>
   /*#__PURE__*/ React__default.createElement(

package/dist/Link/styles.css

@@ -1 +1 @@
-.arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc .arc-Link:focus-visible{outline:none}.arc .arc-Link-wrapper{display:inline-block}.arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc .arc-Link-iconWrapper{align-items:flex-end;-moz-column-gap:var(--textlink-gap-s);column-gap:var(--textlink-gap-s);display:inline-flex;flex-wrap:nowrap}.arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc .arc-Link:focus-visible .arc-Link-text,.arc a:focus-visible[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:none}.arc .arc-Link:focus-visible .arc-Link-text,.arc a:focus-visible:has(.arc-Link) .arc-Link-text{text-decoration:none}.arc .arc-Link:hover .arc-Link-text,.arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc .arc-Link:hover .arc-Link-text,.arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc .arc-Link--onLightSurface .arc-Link-text,.arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible:has(.arc-Link--onLightSurface) .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc .arc-Link--onDarkSurface .arc-Link-text,.arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}
+.arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc .arc-Link:focus-visible{outline:none}.arc .arc-Link-wrapper{display:inline-block}.arc .arc-Link-text{font-weight:inherit !important}.arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc .arc-Link-iconWrapper{align-items:flex-end;-moz-column-gap:var(--textlink-gap-s);column-gap:var(--textlink-gap-s);display:inline-flex;flex-wrap:nowrap}.arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc .arc-Link:focus-visible .arc-Link-text,.arc a:focus-visible[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:none}.arc .arc-Link:focus-visible .arc-Link-text,.arc a:focus-visible:has(.arc-Link) .arc-Link-text{text-decoration:none}.arc .arc-Link:hover .arc-Link-text,.arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc .arc-Link:hover .arc-Link-text,.arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc .arc-Link--onLightSurface .arc-Link-text,.arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible[\:has\(.arc-Link--onLightSurface\)] .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc a:focus-visible:has(.arc-Link--onLightSurface) .arc-Link--onLightSurface .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc .arc-Link--onDarkSurface .arc-Link-text,.arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc .arc-Link--onDarkSurface:focus-visible .arc-Link-wrapper{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-dark-border-subtle);outline-offset:2px}.arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}

package/dist/Markup/Markup.cjs.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var Surface = require('../_shared/cjs/Surface-7500f314.js');
+var Surface = require('../_shared/cjs/Surface-877d9fcc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Markup/Markup.esm.js

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import React__default, { useContext } from 'react';
-import { C as Context } from '../_shared/esm/Surface-c425e5e6.js';
+import { C as Context } from '../_shared/esm/Surface-b782cda9.js';
 
 /**
  * Use `Markup` to display HTML-formatted text.

package/dist/MediaCard/MediaCard.cjs.js

@@ -2,22 +2,22 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MediaCard = require('../_shared/cjs/MediaCard-4ff9f5c0.js');
-require('../_shared/cjs/index.es-c26e8978.js');
+var MediaCard = require('../_shared/cjs/MediaCard-976046b7.js');
+require('../_shared/cjs/index.es-b98bcd00.js');
 require('react');
 require('../_shared/cjs/index-9947ac13.js');
-require('../_shared/cjs/index.es-ba095ee5.js');
+require('../_shared/cjs/index.es-d99844c0.js');
 require('../_shared/cjs/use-media-query-d34c83b9.js');
-require('../_shared/cjs/Image-c8969ad9.js');
-require('../_shared/cjs/Heading-14378b72.js');
-require('../_shared/cjs/Surface-7500f314.js');
-require('../_shared/cjs/Text-284a7314.js');
-require('../_shared/cjs/VerticalSpace-973deefe.js');
-require('../_shared/cjs/CardHeading-3ddcf774.js');
-require('../_shared/cjs/CardFooter-a1bb3ded.js');
+require('../_shared/cjs/Image-b83fa185.js');
+require('../_shared/cjs/Heading-dc6acee1.js');
+require('../_shared/cjs/Surface-877d9fcc.js');
+require('../_shared/cjs/Text-0d5891fc.js');
+require('../_shared/cjs/VerticalSpace-14714d0f.js');
+require('../_shared/cjs/CardHeading-0e9d9f86.js');
+require('../_shared/cjs/CardFooter-24b10ae4.js');
 require('../_shared/cjs/BtIconArrowRight.esm-6053bb79.js');
 require('../_shared/cjs/BtIconPlayFill.esm-b8997cfc.js');
-require('../_shared/cjs/Icon-7f1e8a19.js');
+require('../_shared/cjs/Icon-cbf91a21.js');
 require('../_shared/cjs/index-28fbfd5b.js');
 require('../_shared/cjs/ConditionalWrapper-bf944594.js');
 

package/dist/MediaCard/MediaCard.esm.js

@@ -1,18 +1,18 @@
-export { M as MediaCard } from '../_shared/esm/MediaCard-d83b5561.js';
-import '../_shared/esm/index.es-5496ec12.js';
+export { M as MediaCard } from '../_shared/esm/MediaCard-4a845195.js';
+import '../_shared/esm/index.es-3b4ff2ab.js';
 import 'react';
 import '../_shared/esm/index-2e73c2e9.js';
-import '../_shared/esm/index.es-974af4a2.js';
+import '../_shared/esm/index.es-8ada4213.js';
 import '../_shared/esm/use-media-query-d3622da8.js';
-import '../_shared/esm/Image-c1dc10b5.js';
-import '../_shared/esm/Heading-0dfbdb24.js';
-import '../_shared/esm/Surface-c425e5e6.js';
-import '../_shared/esm/Text-96d8a35f.js';
-import '../_shared/esm/VerticalSpace-6a3533db.js';
-import '../_shared/esm/CardHeading-4223432d.js';
-import '../_shared/esm/CardFooter-e4380cda.js';
+import '../_shared/esm/Image-67ec95a0.js';
+import '../_shared/esm/Heading-db9014d5.js';
+import '../_shared/esm/Surface-b782cda9.js';
+import '../_shared/esm/Text-d0acd173.js';
+import '../_shared/esm/VerticalSpace-6d8fcb17.js';
+import '../_shared/esm/CardHeading-394596ee.js';
+import '../_shared/esm/CardFooter-c1c75258.js';
 import '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
 import '../_shared/esm/BtIconPlayFill.esm-05fc0344.js';
-import '../_shared/esm/Icon-428e8061.js';
+import '../_shared/esm/Icon-e85f55ee.js';
 import '../_shared/esm/index-ce6dee84.js';
 import '../_shared/esm/ConditionalWrapper-b85979de.js';

package/dist/MediaCard/styles.css

@@ -1 +1 @@
-.arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding-top:var(--card-padding-s)}.arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:636px){.arc .arc-MediaCard-content{padding-top:var(--card-padding-s)}.arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}}
+.arc .arc-MediaCard{color:var(--card-colors-light-text-default);display:flex;flex-direction:column;height:100%;outline:var(--focus-border-weight-s) solid transparent;outline-offset:4px;overflow:hidden;position:relative;transition:all 0.2s ease-in-out}.arc .arc-MediaCard--contained{border-radius:var(--card-border-radius-s);box-shadow:0 0 0 var(--card-border-weight-s) var(--card-colors-light-border-default)}.arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc .arc-MediaCard-content{display:flex;flex:1 1 auto;flex-direction:column;padding:var(--card-padding-s) var(--card-padding-xs) 0 var(--card-padding-xs)}.arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}

package/dist/Modal/Modal.cjs.js

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
 var React = require('react');
 var index = require('../_shared/cjs/index-9947ac13.js');
-var Combination = require('../_shared/cjs/Combination-854a36ce.js');
-var component = require('../_shared/cjs/component-4e71e3d3.js');
+var Combination = require('../_shared/cjs/Combination-091f3e34.js');
+var component = require('../_shared/cjs/component-dc16a7a5.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Heading = require('../_shared/cjs/Heading-14378b72.js');
-var ButtonV2 = require('../_shared/cjs/ButtonV2-373877da.js');
-var Text = require('../_shared/cjs/Text-284a7314.js');
-var VerticalSpace = require('../_shared/cjs/VerticalSpace-973deefe.js');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-c3dc056d.js');
-var Surface = require('../_shared/cjs/Surface-7500f314.js');
+var Heading = require('../_shared/cjs/Heading-dc6acee1.js');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-2640e91a.js');
+var Text = require('../_shared/cjs/Text-0d5891fc.js');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-14714d0f.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-e7a68823.js');
+var Surface = require('../_shared/cjs/Surface-877d9fcc.js');
 require('react-dom');
-require('../_shared/cjs/Icon-7f1e8a19.js');
-require('../_shared/cjs/ArcIconEclipse.esm-ac777a76.js');
+require('../_shared/cjs/Icon-cbf91a21.js');
+require('../_shared/cjs/Spinner-3e4a2e61.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Modal/Modal.esm.js

@@ -1,19 +1,19 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-5496ec12.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
 import * as React from 'react';
 import React__default, { useRef } from 'react';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
-import { c as createContextScope, a as useComposedRefs, P as Primitive, d as composeEventHandlers, e as Presence, R as RemoveScroll, S as Slot, f as useFocusGuards, F as FocusScope, D as DismissableLayer, j as createContext2, g as useControllableState, h as useId, i as Portal$1 } from '../_shared/esm/Combination-2af75870.js';
-import { h as hideOthers, u as useThemeElement } from '../_shared/esm/component-3e60a45e.js';
+import { c as createContextScope, a as useComposedRefs, P as Primitive, d as composeEventHandlers, e as Presence, R as RemoveScroll, S as Slot, f as useFocusGuards, F as FocusScope, D as DismissableLayer, j as createContext2, g as useControllableState, h as useId, i as Portal$1 } from '../_shared/esm/Combination-beb0370c.js';
+import { h as hideOthers, u as useThemeElement } from '../_shared/esm/component-d81b583b.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { H as Heading } from '../_shared/esm/Heading-0dfbdb24.js';
-import { B as ButtonV2 } from '../_shared/esm/ButtonV2-f9019e00.js';
-import { T as Text } from '../_shared/esm/Text-96d8a35f.js';
-import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6a3533db.js';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-9fac63d0.js';
-import { S as Surface } from '../_shared/esm/Surface-c425e5e6.js';
+import { H as Heading } from '../_shared/esm/Heading-db9014d5.js';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-feb9bcbc.js';
+import { T as Text } from '../_shared/esm/Text-d0acd173.js';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-6d8fcb17.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-0b755b19.js';
+import { S as Surface } from '../_shared/esm/Surface-b782cda9.js';
 import 'react-dom';
-import '../_shared/esm/Icon-428e8061.js';
-import '../_shared/esm/ArcIconEclipse.esm-bb48b82a.js';
+import '../_shared/esm/Icon-e85f55ee.js';
+import '../_shared/esm/Spinner-6493dd54.js';
 
 var DIALOG_NAME = "Dialog";
 var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);

package/dist/PageBanner/PageBanner.cjs.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
+var React = require('react');
+var Banner = require('../_shared/cjs/Banner-a785d73f.js');
+require('../_shared/cjs/index-9947ac13.js');
+require('../_shared/cjs/index.es-d99844c0.js');
+require('../_shared/cjs/use-media-query-d34c83b9.js');
+require('../_shared/cjs/Heading-dc6acee1.js');
+require('../_shared/cjs/Surface-877d9fcc.js');
+require('../_shared/cjs/Image-b83fa185.js');
+require('../_shared/cjs/Grid-bf7d8993.js');
+require('../_shared/cjs/VerticalSpace-14714d0f.js');
+require('../_shared/cjs/Text-0d5891fc.js');
+require('../_shared/cjs/Box-082962b9.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var PageBanner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.minHeight, minHeight = _c === void 0 ? 576 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.isElevated, isElevated = _e === void 0 ? false : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.alignment, alignment = _h === void 0 ? "center" : _h, props = index_es.__rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
+    return (React__default["default"].createElement(Banner.Banner, index_es.__assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, index_es.filterDataAttrs(props)), children));
+};
+
+exports.PageBanner = PageBanner;

package/dist/PageBanner/PageBanner.esm.js

@@ -0,0 +1,20 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
+import React__default from 'react';
+import { B as Banner } from '../_shared/esm/Banner-ad242982.js';
+import '../_shared/esm/index-2e73c2e9.js';
+import '../_shared/esm/index.es-8ada4213.js';
+import '../_shared/esm/use-media-query-d3622da8.js';
+import '../_shared/esm/Heading-db9014d5.js';
+import '../_shared/esm/Surface-b782cda9.js';
+import '../_shared/esm/Image-67ec95a0.js';
+import '../_shared/esm/Grid-3d8eaa8e.js';
+import '../_shared/esm/VerticalSpace-6d8fcb17.js';
+import '../_shared/esm/Text-d0acd173.js';
+import '../_shared/esm/Box-aa4f3782.js';
+
+var PageBanner = function (_a) {
+    var heading = _a.heading, label = _a.label, text = _a.text, img = _a.img, _b = _a.contentRatio, contentRatio = _b === void 0 ? "1/1" : _b, children = _a.children, _c = _a.minHeight, minHeight = _c === void 0 ? 576 : _c, _d = _a.isReversed, isReversed = _d === void 0 ? false : _d, _e = _a.isElevated, isElevated = _e === void 0 ? false : _e, _f = _a.headingLevel, headingLevel = _f === void 0 ? "2" : _f, _g = _a.type, type = _g === void 0 ? "light" : _g, _h = _a.alignment, alignment = _h === void 0 ? "center" : _h, props = __rest(_a, ["heading", "label", "text", "img", "contentRatio", "children", "minHeight", "isReversed", "isElevated", "headingLevel", "type", "alignment"]);
+    return (React__default.createElement(Banner, __assign({ heading: heading, label: label, text: text, img: img, contentRatio: contentRatio, minHeight: minHeight, isReversed: isReversed, isElevated: isElevated, headingLevel: headingLevel, type: type, headingSize: "m", alignment: alignment }, filterDataAttrs(props)), children));
+};
+
+export { PageBanner };

package/dist/PageBanner/package.json

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

package/dist/Pagination/Pagination.cjs.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-c3dc056d.js');
-require('../_shared/cjs/Surface-7500f314.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-e7a68823.js');
+require('../_shared/cjs/Surface-877d9fcc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/dist/Pagination/Pagination.esm.js

@@ -1,8 +1,8 @@
-import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-5496ec12.js';
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-3b4ff2ab.js';
 import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
 import React__default, { useMemo, useState } from 'react';
-import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-9fac63d0.js';
-import '../_shared/esm/Surface-c425e5e6.js';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-0b755b19.js';
+import '../_shared/esm/Surface-b782cda9.js';
 
 var usePagination = function (pageCount, selectedPage) {
     var formatValues = function (range) {

package/dist/PaginationSimple/PaginationSimple.cjs.js

@@ -2,40 +2,109 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index_es = require('../_shared/cjs/index.es-c26e8978.js');
+var index_es = require('../_shared/cjs/index.es-b98bcd00.js');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var ThemeIcon = require('../_shared/cjs/ThemeIcon-c3dc056d.js');
-require('../_shared/cjs/Surface-7500f314.js');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-e7a68823.js');
+var Icon = require('../_shared/cjs/Icon-cbf91a21.js');
+require('../_shared/cjs/Surface-877d9fcc.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+const BtIconFirstMid = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M4.675 4.00537C5.04779 4.00537 5.35 4.30758 5.35 4.68037V11.3204C5.35 11.6932 5.04779 11.9954 4.675 11.9954C4.30221 11.9954 4 11.6932 4 11.3204V4.68037C4 4.30758 4.30221 4.00537 4.675 4.00537Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.97265 8.0002L10.8213 10.8522C10.9473 10.9785 11.0181 11.1495 11.0181 11.3279C11.0181 11.5063 10.9473 11.6773 10.8213 11.8036C10.759 11.866 10.6851 11.9155 10.6036 11.9493C10.5222 11.983 10.4349 12.0004 10.3467 12.0004C10.2585 12.0004 10.1712 11.983 10.0897 11.9493C10.0083 11.9155 9.93428 11.866 9.87199 11.8036L6.54799 8.47553C6.42219 8.34932 6.35156 8.17839 6.35156 8.0002C6.35156 7.822 6.42219 7.65107 6.54799 7.52486L9.87199 4.19686C9.93428 4.13446 10.0083 4.08495 10.0897 4.05117C10.1712 4.01738 10.2585 4 10.3467 4C10.4348 4 10.5222 4.01738 10.6036 4.05117C10.6851 4.08495 10.759 4.13446 10.8213 4.19686C10.9473 4.3231 11.0181 4.49417 11.0181 4.67253C11.0181 4.85089 10.9473 5.02196 10.8213 5.1482L7.97265 8.0002Z",
+      fill: "currentColor",
+    }),
+  );
+
+const BtIconLastMid = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        viewBox: "0 0 16 16",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M10.3406 11.9951C9.96783 11.9951 9.66562 11.6929 9.66562 11.3201V4.68012C9.66562 4.30732 9.96783 4.00512 10.3406 4.00512C10.7134 4.00512 11.0156 4.30732 11.0156 4.68012L11.0156 11.3201C11.0156 11.6929 10.7134 11.9951 10.3406 11.9951Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M7.04297 8.00029L4.19434 5.14832C4.06834 5.02202 3.99754 4.85102 3.99754 4.67262C3.99754 4.49422 4.06834 4.32322 4.19434 4.19692C4.25664 4.13452 4.33054 4.08502 4.41204 4.05122C4.49344 4.01752 4.58074 4.00012 4.66897 4.00012C4.75714 4.00012 4.84445 4.01752 4.9259 4.05122C5.00735 4.08502 5.08134 4.13452 5.14363 4.19692L8.46763 7.52496C8.59343 7.65117 8.66406 7.8221 8.66406 8.00029C8.66406 8.17849 8.59343 8.34942 8.46763 8.47563L5.14363 11.8036C5.08134 11.866 5.00735 11.9155 4.9259 11.9493C4.84445 11.9831 4.75714 12.0005 4.66897 12.0005C4.58084 12.0005 4.49344 11.9831 4.41204 11.9493C4.33054 11.9155 4.25664 11.866 4.19434 11.8036C4.06834 11.6774 3.99754 11.5063 3.99754 11.328C3.99754 11.1496 4.06834 10.9785 4.19434 10.8523L7.04297 8.00029Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * TODO! Revise method of aligning svg's
+ */
 /**
  * Use `PaginationSimple` to navigate through multiple pages of content.
  */
 var PaginationSimple = function (_a) {
-    var hidePrev = _a.hidePrev, hideNext = _a.hideNext, prevHref = _a.prevHref, nextHref = _a.nextHref, onPrevPage = _a.onPrevPage, onNextPage = _a.onNextPage, isFluid = _a.isFluid, props = index_es.__rest(_a, ["hidePrev", "hideNext", "prevHref", "nextHref", "onPrevPage", "onNextPage", "isFluid"]);
+    var hide = _a.hide, hrefs = _a.hrefs, onPageChange = _a.onPageChange, isFluid = _a.isFluid, showEllipsis = _a.showEllipsis, props = index_es.__rest(_a, ["hide", "hrefs", "onPageChange", "isFluid", "showEllipsis"]);
     return (React__default["default"].createElement("nav", index_es.__assign({ className: index.classNames("arc-PaginationSimple", {
             "arc-PaginationSimple--fluid": isFluid,
             "arc-PaginationSimple--centered": !isFluid
         }) }, index_es.filterDataAttrs(props)),
         React__default["default"].createElement("ul", { className: "arc-PaginationSimple-list" },
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default["default"].createElement("a", { tabIndex: 0, href: prevHref, role: !prevHref ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
-                        "arc-PaginationSimple-navigationButton--hidden": hidePrev
-                    }), onClick: onPrevPage },
-                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left" },
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.first, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.first) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.first
+                    }), onClick: function (e) { return onPageChange(e, "first"); } },
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement(Icon.Icon, { size: 32, icon: BtIconFirstMid })),
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "First")),
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.prev) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.prev
+                    }), onClick: function (e) { return onPageChange(e, "prev"); } },
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--left " },
                         React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimplePrevious" })),
                     React__default["default"].createElement("span", { className: "arc-PaginationSimple-prevText" }, "Prev"))),
+            React__default["default"].createElement("li", { className: index.classNames("arc-PaginationSimple-listItem arc-PaginationSimple-listItemEllipsis", {
+                    "arc-PaginationSimple-listItemEllipsis--hidden": !showEllipsis
+                }) }, "..."),
             React__default["default"].createElement("li", { className: "arc-PaginationSimple-listItem" },
-                React__default["default"].createElement("a", { tabIndex: 0, href: nextHref, role: !nextHref ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
-                        "arc-PaginationSimple-navigationButton--hidden": hideNext
-                    }), onClick: onNextPage },
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.next, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.next) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.next
+                    }), onClick: function (e) { return onPageChange(e, "next"); } },
                     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(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimpleNext" })))))));
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer arc-PaginationSimple-iconContainer--right " },
+                        React__default["default"].createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationSimpleNext" }))),
+                React__default["default"].createElement("a", { tabIndex: 0, href: hrefs === null || hrefs === void 0 ? void 0 : hrefs.last, role: !(hrefs === null || hrefs === void 0 ? void 0 : hrefs.last) ? "button" : undefined, className: index.classNames("arc-PaginationSimple-navigationButton", {
+                        "arc-PaginationSimple-navigationButton--hidden": hide === null || hide === void 0 ? void 0 : hide.last
+                    }), onClick: function (e) { return onPageChange(e, "last"); } },
+                    React__default["default"].createElement("span", { className: "arc-PaginationSimple-nextText" }, "Last"),
+                    React__default["default"].createElement("div", { className: "arc-PaginationSimple-iconContainer" },
+                        React__default["default"].createElement(Icon.Icon, { size: 32, icon: BtIconLastMid })))))));
 };
 
 exports.PaginationSimple = PaginationSimple;