@arc-ui/components 12.0.0-beta.13 → 12.0.0-beta.14.1

package/lib/Link/Link.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+var Icon = require('../_shared/cjs/Icon-DdqFr6bT.cjs');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-B4XCvPYP.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+
+const BtIconNewWindow = (props) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React.createElement("defs", null),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = filterAttrs.__rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: index.classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: filterAttrs.__assign(filterAttrs.__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: filterAttrs.__assign({}, commonProps),
+        span: filterAttrs.__assign({}, commonProps),
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React.createElement(LinkElement, filterAttrs.__assign({}, elementProps[LinkElement], filterAttrs.filterAttrs(props)),
+        React.createElement("div", { className: "arc-Link-wrapper" },
+            React.createElement(VisuallyHidden.VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React.createElement("span", { className: "arc-Link-iconWrapper" },
+                React.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React.createElement(Icon.Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+exports.Link = Link;

package/lib/Link/Link.mjs

@@ -0,0 +1,69 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { C as Context } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import { I as Icon } from '../_shared/esm/Icon-B626JGP1.mjs';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-DqAgoqJo.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+
+const BtIconNewWindow = (props) =>
+  /*#__PURE__*/ React__default.createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default.createElement("defs", null),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M24.70166,7.01794a.49968.49968,0,0,0-.19092-.03845H17.50586a.5.5,0,0,0,0,1h5.79785l-8.15918,8.15918a.49995.49995,0,1,0,.707.707l8.15918-8.15918v5.77393a.5.5,0,1,0,1,0v-6.981a.50171.50171,0,0,0-.30908-.46155Z",
+      fill: "currentColor",
+    }),
+    /*#__PURE__*/ React__default.createElement("path", {
+      d: "M26.85156,3.99072H5.18359A1.20156,1.20156,0,0,0,3.9834,5.19141V26.89062a1.10362,1.10362,0,0,0,1.10254,1.103H26.85156a1.17979,1.17979,0,0,0,1.17871-1.17871V5.16943A1.17979,1.17979,0,0,0,26.85156,3.99072Zm.17871,22.82422a.17891.17891,0,0,1-.17871.17871H5.08594a.10419.10419,0,0,1-.10254-.103V5.19141a.20069.20069,0,0,1,.20019-.20069h21.668a.17888.17888,0,0,1,.17871.17871Z",
+      fill: "currentColor",
+    }),
+  );
+
+/**
+ * Use `Link` to direct users to a new page or piece of information.
+ */
+var Link = function (_a) {
+    var id = _a.id, href = _a.href, title = _a.title, rel = _a.rel, target = _a.target, children = _a.children, onClick = _a.onClick, screenReaderText = _a.screenReaderText, _b = _a.isButton, isButton = _b === void 0 ? false : _b, _c = _a.isImplied, isImplied = _c === void 0 ? false : _c, _d = _a.size, size = _d === void 0 ? "m" : _d, props = __rest(_a, ["id", "href", "title", "rel", "target", "children", "onClick", "screenReaderText", "isButton", "isImplied", "size"]);
+    var surface = useContext(Context).surface;
+    var isExternalLink = target === "_blank";
+    var textArray = children.split(" ");
+    var firstText = textArray.slice(0, -1).join(" ");
+    var lastWord = textArray[textArray.length - 1];
+    var commonProps = {
+        id: id,
+        onClick: onClick,
+        className: classNames("arc-Link", "arc-Link--".concat(size), {
+            "arc-Link--onDarkSurface": surface === "dark",
+            "arc-Link--onLightSurface": surface !== "dark",
+            "arc-Link--isImplied": isImplied,
+        }),
+    };
+    var elementProps = {
+        a: __assign(__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: __assign({}, commonProps),
+        span: __assign({}, commonProps),
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default.createElement(LinkElement, __assign({}, elementProps[LinkElement], filterAttrs(props)),
+        React__default.createElement("div", { className: "arc-Link-wrapper" },
+            React__default.createElement(VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React__default.createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default.createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default.createElement(Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+export { Link };

package/lib/Link/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-14-1 .arc .arc-Link{align-items:center;background:none;border:none;cursor:pointer;outline:none;text-decoration:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link:focus-visible{outline:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link-wrapper{display:inline-block}.arc-v12-0-0-beta-14-1 .arc .arc-Link-text{font-weight:inherit !important}.arc-v12-0-0-beta-14-1 .arc .arc-Link-text{font:var(--sem-type-body-reg-m);text-decoration:underline}.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-Link--isImplied .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link--s .arc-Link-text{font:var(--sem-type-body-reg-s)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--m .arc-Link-text{font:var(--sem-type-body-reg-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--l .arc-Link-text{font:var(--sem-type-body-reg-l)}.arc-v12-0-0-beta-14-1 .arc .arc-Link:focus-visible .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:focus-visible[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link:focus-visible .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:focus-visible:has(.arc-Link) .arc-Link-text{text-decoration:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:hover[\:has\(.arc-Link\)] .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-14-1 .arc .arc-Link:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:hover:has(.arc-Link) .arc-Link-text{text-decoration:underline}.arc-v12-0-0-beta-14-1 .arc a:focus-visible[\:has\(.arc-Link\)]{outline:none;text-decoration:none}.arc-v12-0-0-beta-14-1 .arc a:focus-visible:has(.arc-Link){outline:none;text-decoration:none}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-default)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:visited[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:visited .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:visited:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-visited)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:focus-visible .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:hover[\:has\(.arc-Link--onLightSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onLightSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:hover:has(.arc-Link--onLightSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-light-text-hover)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-default)}.arc-v12-0-0-beta-14-1 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc a:focus-visible[\:has\(.arc-Link--onDarkSurface\)] .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc a:focus-visible:has(.arc-Link--onDarkSurface) .arc-Link--onDarkSurface .arc-Link-wrapper,.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:visited[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:visited .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:visited .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc a:visited:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper{color:var(--textlink-colors-dark-text-visited)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover[\:has\(.arc-Link--onDarkSurface\)] .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:hover .arc-Link-text,.arc-v12-0-0-beta-14-1 .arc .arc-Link--onDarkSurface:hover .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-iconWrapper,.arc-v12-0-0-beta-14-1 .arc a:hover:has(.arc-Link--onDarkSurface) .arc-Link-text{color:var(--textlink-colors-dark-text-hover)}

package/lib/Markup/Markup.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = filterAttrs.__rest(_a, ["children", "isMeasured"]);
+    var surface = React.useContext(Surface.Context).surface;
+    return (React.createElement("div", filterAttrs.__assign({ className: index.classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark",
+        }) }, filterAttrs.filterAttrs(props)), children));
+};
+
+exports.Markup = Markup;

package/lib/Markup/Markup.mjs

@@ -0,0 +1,20 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useContext } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { C as Context } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+
+/**
+ * Use `Markup` to display HTML-formatted text.
+ */
+var Markup = function (_a) {
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isMeasured"]);
+    var surface = useContext(Context).surface;
+    return (React__default.createElement("div", __assign({ className: classNames({
+            "arc-Markup": true,
+            "arc-Markup--measured": isMeasured,
+            "arc-Markup--onDarkSurface": surface === "dark",
+        }) }, filterAttrs(props)), children));
+};
+
+export { Markup };

package/lib/Markup/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-14-1 .arc .arc-Markup--measured{max-width:32em}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote,.arc-v12-0-0-beta-14-1 .arc .arc-Markup ol,.arc-v12-0-0-beta-14-1 .arc .arc-Markup p,.arc-v12-0-0-beta-14-1 .arc .arc-Markup>small,.arc-v12-0-0-beta-14-1 .arc .arc-Markup ul{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h1{margin-bottom:var(--sem-space-gap-110);margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h2,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h3,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h4,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h5,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h6{margin-bottom:var(--sem-space-gap-60);margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h1,.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h2,.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h3,.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h4,.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h5,.arc-v12-0-0-beta-14-1 .arc .arc-Markup *+h6{margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup hr,.arc-v12-0-0-beta-14-1 .arc .arc-Markup img,.arc-v12-0-0-beta-14-1 .arc .arc-Markup pre,.arc-v12-0-0-beta-14-1 .arc .arc-Markup table{margin-bottom:var(--sem-space-gap-110);margin-top:var(--sem-space-gap-110)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup>:first-child{margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup>:last-child{margin-bottom:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote{margin-bottom:0;margin-left:var(--sem-space-gap-110);margin-right:0;margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote p{margin-bottom:0;margin-top:0;quotes:"“" "”" "‘" "’"}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote p:first-child::before{content:open-quote;margin-left:-0.75ch}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote p:first-child::after{content:close-quote}.arc-v12-0-0-beta-14-1 .arc .arc-Markup blockquote p+p:last-child{text-align:right}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h1,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h2,.arc-v12-0-0-beta-14-1 .arc .arc-Markup h3{font-weight:var(--sem-font-weight-semi-bold)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h6{font:var(--sem-type-mobile-semi-xxs)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h5{font:var(--sem-type-mobile-semi-xs)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h4{font:var(--sem-type-mobile-semi-s)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h3{font:var(--sem-type-mobile-semi-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h2{font:var(--sem-type-mobile-semi-l)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h1{font:var(--sem-type-mobile-semi-xxl)}@media (min-width:768px){.arc-v12-0-0-beta-14-1 .arc .arc-Markup h3{font:var(--sem-type-tablet-semi-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h2{font:var(--sem-type-tablet-semi-l)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h1{font:var(--sem-type-tablet-semi-xxl)}}@media (min-width:1280px){.arc-v12-0-0-beta-14-1 .arc .arc-Markup h3{font:var(--sem-type-desktop-semi-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h2{font:var(--sem-type-desktop-semi-l)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup h1{font:var(--sem-type-desktop-semi-xxl)}}.arc-v12-0-0-beta-14-1 .arc .arc-Markup img{display:block;max-width:100%}.arc-v12-0-0-beta-14-1 .arc .arc-Markup ol,.arc-v12-0-0-beta-14-1 .arc .arc-Markup ul{list-style:none;margin-bottom:0;margin-top:0;padding-left:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup ol{counter-reset:list}.arc-v12-0-0-beta-14-1 .arc .arc-Markup li{padding-left:var(--sem-space-padding-110);position:relative}.arc-v12-0-0-beta-14-1 .arc .arc-Markup li::before{left:0;position:absolute;text-align:center;width:24px}.arc-v12-0-0-beta-14-1 .arc .arc-Markup ul>li::before{content:"•"}.arc-v12-0-0-beta-14-1 .arc .arc-Markup ol>li::before{content:counter(list) ".";counter-increment:list}.arc-v12-0-0-beta-14-1 .arc .arc-Markup hr{background-color:var(--sem-color-border-secondary-light-minimal);border:0;color:var(--sem-color-border-secondary-light-minimal);height:1px;margin-bottom:0;margin-top:0}.arc-v12-0-0-beta-14-1 .arc .arc-Markup--onDarkSurface hr{background-color:var(--sem-color-border-secondary-dark-minimal);color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup>small{display:block;font:var(--sem-type-interface-reg-s)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup table{border-collapse:collapse;max-width:100%}.arc-v12-0-0-beta-14-1 .arc .arc-Markup td,.arc-v12-0-0-beta-14-1 .arc .arc-Markup th{border:1px solid var(--sem-color-border-secondary-light-minimal);height:calc(4px * 9);padding-left:calc(4px * 4);padding-right:calc(4px * 4);vertical-align:middle}.arc-v12-0-0-beta-14-1 .arc .arc-Markup--onDarkSurface td,.arc-v12-0-0-beta-14-1 .arc .arc-Markup--onDarkSurface th{border-color:var(--sem-color-border-secondary-dark-minimal)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup th{font-weight:var(--sem-font-weight-semi-bold)}.arc .arc-Markup tbody tr:nth-child(even){background-color:rgba(0,0,0,0.05)}.arc .arc-Markup:not(.arc-Markup--onDarkSurface) tbody tr:nth-child(even){background-color:rgba(42,28,74,0.05)}.arc-v12-0-0-beta-14-1 .arc .arc-Markup.arc-Markup--onDarkSurface tbody tr:nth-child(even){background-color:rgba(255,255,255,0.15)}

package/lib/MediaCard/MediaCard.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var MediaCard = require('../_shared/cjs/MediaCard-DEbY0pn4.cjs');
+require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+require('react');
+require('../_shared/cjs/index-CTlXMLug.cjs');
+require('../_shared/cjs/index.es-gP1lKcqE.cjs');
+require('../_shared/cjs/use-media-query-BsUfHjPZ.cjs');
+require('../_shared/cjs/Image-Bk-IOgez.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Heading-ByiXEHGj.cjs');
+require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/Text-Cr5nmYmx.cjs');
+require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
+require('../_shared/cjs/CardHeading-DJHqAMXm.cjs');
+require('../_shared/cjs/CardFooter-BA8K3lsL.cjs');
+require('../_shared/cjs/BtIconArrowRight-tlOxlRcu.cjs');
+require('../_shared/cjs/BtIconPlayFill-1FkY9-lL.cjs');
+require('../_shared/cjs/Icon-DdqFr6bT.cjs');
+require('../_shared/cjs/index-BLRjGROQ.cjs');
+require('../_shared/cjs/ConditionalWrapper-C09Kw6EG.cjs');
+
+
+
+exports.MediaCard = MediaCard.MediaCard;

package/lib/MediaCard/MediaCard.mjs

@@ -0,0 +1,20 @@
+export { M as MediaCard } from '../_shared/esm/MediaCard-OZMQZjSh.mjs';
+import '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import 'react';
+import '../_shared/esm/index-5C0-U8cc.mjs';
+import '../_shared/esm/index.es-C7HkLzRN.mjs';
+import '../_shared/esm/use-media-query-DmKuIDEM.mjs';
+import '../_shared/esm/Image-Bx91_r2O.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Heading-CtGuamJw.mjs';
+import '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/Text-CBlnm5CT.mjs';
+import '../_shared/esm/VerticalSpace-Duhm0zXP.mjs';
+import '../_shared/esm/CardHeading-C7ZPtnmj.mjs';
+import '../_shared/esm/CardFooter-B1zkMZd9.mjs';
+import '../_shared/esm/BtIconArrowRight-26CZetOo.mjs';
+import '../_shared/esm/BtIconPlayFill-Bi65YfLF.mjs';
+import '../_shared/esm/Icon-B626JGP1.mjs';
+import '../_shared/esm/index-Cr6KeQLU.mjs';
+import '../_shared/esm/ConditionalWrapper-WoJxFYwS.mjs';

package/lib/MediaCard/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-14-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-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-MediaCard--outlined{box-shadow:0 0 0 var(--card-border-weight-m) var(--card-colors-light-border-hover)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--contained.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--contained.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-light-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--onDarkSurface[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--onDarkSurface:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined[focus-within]{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--onDarkSurface.arc-MediaCard--outlined:focus-within{outline-color:var(--focus-colors-dark-border-subtle)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard-imgContainer{border-radius:var(--card-border-radius-s);overflow:hidden}.arc-v12-0-0-beta-14-1 .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-v12-0-0-beta-14-1 .arc .arc-MediaCard--contained .arc-MediaCard-imgContainer{border-radius:0}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-s)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard-textContainer{flex:1 1 auto}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard .arc-Surface{flex:1}@media (min-width:1280px){.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard-content{padding-top:var(--card-padding-m)}.arc-v12-0-0-beta-14-1 .arc .arc-MediaCard--contained .arc-MediaCard-content{padding:var(--card-padding-m)}}

package/lib/Modal/Modal.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index$2 = require('../_shared/cjs/index-CTlXMLug.cjs');
+var index$1 = require('../_shared/cjs/index-DCBkpeuX.cjs');
+var index = require('../_shared/cjs/index-DXNM3D1d.cjs');
+var Heading = require('../_shared/cjs/Heading-ByiXEHGj.cjs');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-DitTW91Z.cjs');
+var Text = require('../_shared/cjs/Text-Cr5nmYmx.cjs');
+var VerticalSpace = require('../_shared/cjs/VerticalSpace-BJvST6WP.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
+var Surface = require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+require('../_shared/cjs/Combination-C5xlVcaJ.cjs');
+require('react/jsx-runtime');
+require('react-dom');
+require('../_shared/cjs/index-DM20WK5o.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Icon-DdqFr6bT.cjs');
+require('../_shared/cjs/Spinner-bbrOwxv2.cjs');
+
+/** Use `Modal` to display information that needs immediate action from a user. */
+var Modal = function (_a) {
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = filterAttrs.__rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
+    var _f = index.useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
+    var triggerRef = React.useRef(null);
+    var setTriggerElement = function () {
+        return shouldReturnFocus &&
+            (triggerRef.current = document.activeElement);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    };
+    var canShowClose = role !== "alertdialog" && onRequestClose;
+    var hasContent = description || children;
+    var ariaProps = filterAttrs.__assign({}, (ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {}));
+    var closeModal = function () {
+        if (role !== "alertdialog" && onRequestClose) {
+            onRequestClose();
+        }
+    };
+    return (React.createElement("div", { ref: setThemeElement },
+        React.createElement(index$1.Root, { open: isOpen },
+            React.createElement(index$1.Portal, { container: themeElement },
+                React.createElement(index$1.Overlay, { className: "arc-Modal-overlay" },
+                    React.createElement(index$1.Content, filterAttrs.__assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: index$2.classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
+                            "arc-Modal-dialog--maxHeightWindow": isContentScrollable,
+                        }) }, filterAttrs.filterAttrs(props)),
+                        React.createElement("div", { className: "arc-Modal-section" },
+                            React.createElement(Surface.Surface, null,
+                                React.createElement(index$1.Title, { asChild: true },
+                                    React.createElement(Heading.Heading, { level: "1", size: "m" }, title)))),
+                        React.createElement(VerticalSpace.VerticalSpace, { size: "12" }),
+                        hasContent && (React.createElement("div", { className: "arc-Modal-content" },
+                            React.createElement("div", { className: "arc-Modal-section" },
+                                React.createElement(Surface.Surface, null,
+                                    description && (React.createElement(index$1.Description, { asChild: true },
+                                        React.createElement(Text.Text, null, description))),
+                                    description && children && (React.createElement(VerticalSpace.VerticalSpace, { "data-testid": "arc-modal-vertical-space", size: "20" })),
+                                    children)))),
+                        actions && (React.createElement("div", { className: "arc-Modal-section" },
+                            React.createElement(Surface.Surface, null,
+                                React.createElement("div", { className: "arc-Modal-actions" }, actions.map(function (props, i) { return (React.createElement("div", { key: "arc-modal-button-".concat(i), className: "arc-Modal-actionButton" },
+                                    React.createElement(ButtonV2.ButtonV2, filterAttrs.__assign({ isFullWidth: true }, props)))); }))))),
+                        canShowClose && (React.createElement("div", { className: "arc-Modal-iconContainer" },
+                            React.createElement("button", { "aria-label": "close", onClick: closeModal, className: "arc-Modal-closeButton" },
+                                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "modalClose" }))))))))));
+};
+
+exports.Modal = Modal;

package/lib/Modal/Modal.mjs

@@ -0,0 +1,71 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useRef } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { R as Root, P as Portal, O as Overlay, C as Content, T as Title, D as Description } from '../_shared/esm/index-BYYnPaYO.mjs';
+import { u as useThemeElement } from '../_shared/esm/index-DKUZMeu5.mjs';
+import { H as Heading } from '../_shared/esm/Heading-CtGuamJw.mjs';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-yixMtjeC.mjs';
+import { T as Text } from '../_shared/esm/Text-CBlnm5CT.mjs';
+import { V as VerticalSpace } from '../_shared/esm/VerticalSpace-Duhm0zXP.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
+import { S as Surface } from '../_shared/esm/Surface-Colbp3Zx.mjs';
+import '../_shared/esm/Combination-BWqjRkSE.mjs';
+import 'react/jsx-runtime';
+import 'react-dom';
+import '../_shared/esm/index-DAKCDHmP.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Icon-B626JGP1.mjs';
+import '../_shared/esm/Spinner-Cd7LiPTy.mjs';
+
+/** Use `Modal` to display information that needs immediate action from a user. */
+var Modal = function (_a) {
+    var title = _a.title, description = _a.description, ariaDescribedBy = _a.ariaDescribedBy, isOpen = _a.isOpen, actions = _a.actions, onRequestClose = _a.onRequestClose, children = _a.children, _b = _a.role, role = _b === void 0 ? "dialog" : _b, _c = _a.shouldReturnFocus, shouldReturnFocus = _c === void 0 ? true : _c, _d = _a.isContentScrollable, isContentScrollable = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "l" : _e, props = __rest(_a, ["title", "description", "ariaDescribedBy", "isOpen", "actions", "onRequestClose", "children", "role", "shouldReturnFocus", "isContentScrollable", "size"]);
+    var _f = useThemeElement(), themeElement = _f[0], setThemeElement = _f[1];
+    var triggerRef = useRef(null);
+    var setTriggerElement = function () {
+        return shouldReturnFocus &&
+            (triggerRef.current = document.activeElement);
+    };
+    var focusTriggerElement = function () {
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    };
+    var canShowClose = role !== "alertdialog" && onRequestClose;
+    var hasContent = description || children;
+    var ariaProps = __assign({}, (ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {}));
+    var closeModal = function () {
+        if (role !== "alertdialog" && onRequestClose) {
+            onRequestClose();
+        }
+    };
+    return (React__default.createElement("div", { ref: setThemeElement },
+        React__default.createElement(Root, { open: isOpen },
+            React__default.createElement(Portal, { container: themeElement },
+                React__default.createElement(Overlay, { className: "arc-Modal-overlay" },
+                    React__default.createElement(Content, __assign({}, ariaProps, { role: role, onOpenAutoFocus: setTriggerElement, onCloseAutoFocus: focusTriggerElement, onEscapeKeyDown: closeModal, onInteractOutside: closeModal, "aria-modal": "true", className: classNames("arc-Modal-dialog", "arc-Modal-dialog--".concat(size), {
+                            "arc-Modal-dialog--maxHeightWindow": isContentScrollable,
+                        }) }, filterAttrs(props)),
+                        React__default.createElement("div", { className: "arc-Modal-section" },
+                            React__default.createElement(Surface, null,
+                                React__default.createElement(Title, { asChild: true },
+                                    React__default.createElement(Heading, { level: "1", size: "m" }, title)))),
+                        React__default.createElement(VerticalSpace, { size: "12" }),
+                        hasContent && (React__default.createElement("div", { className: "arc-Modal-content" },
+                            React__default.createElement("div", { className: "arc-Modal-section" },
+                                React__default.createElement(Surface, null,
+                                    description && (React__default.createElement(Description, { asChild: true },
+                                        React__default.createElement(Text, null, description))),
+                                    description && children && (React__default.createElement(VerticalSpace, { "data-testid": "arc-modal-vertical-space", size: "20" })),
+                                    children)))),
+                        actions && (React__default.createElement("div", { className: "arc-Modal-section" },
+                            React__default.createElement(Surface, null,
+                                React__default.createElement("div", { className: "arc-Modal-actions" }, actions.map(function (props, i) { return (React__default.createElement("div", { key: "arc-modal-button-".concat(i), className: "arc-Modal-actionButton" },
+                                    React__default.createElement(ButtonV2, __assign({ isFullWidth: true }, props)))); }))))),
+                        canShowClose && (React__default.createElement("div", { className: "arc-Modal-iconContainer" },
+                            React__default.createElement("button", { "aria-label": "close", onClick: closeModal, className: "arc-Modal-closeButton" },
+                                React__default.createElement(ThemeIcon, { size: 32, icon: "modalClose" }))))))))));
+};
+
+export { Modal };

package/lib/Modal/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-14-1 .arc .arc-Modal{color:auto}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-overlay{align-items:center;background-color:var(--overlay-colors-overlay-default);display:flex;height:100%;justify-content:center;left:0;overflow-x:hidden;overflow-y:auto;padding:16px;position:fixed;top:0;width:100%;z-index:100}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog{background-color:var(--modal-colors-light-bg-default);border-radius:var(--modal-border-radius-s);display:flex;flex-direction:column;margin:auto;padding:var(--modal-padding-m) 0;position:relative;width:100%}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--maxHeightWindow{height:100%}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-iconContainer{position:absolute;right:8px;top:8px}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-closeButton{background-color:transparent;border:none;cursor:pointer;margin:0;padding:0}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-closeButton:focus-visible{border-radius:var(--focus-border-radius-s);outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-content{overflow-x:hidden;overflow-y:auto}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-section{padding:0 var(--modal-padding-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actions{margin-top:var(--modal-gap-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-top:var(--modal-gap-s)}@media (min-width:636px){.arc-v12-0-0-beta-14-1 .arc .arc-Modal-overlay{padding:80px 0}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--s{max-width:var(--modal-size-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--m,.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-l)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actions{display:flex}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actionButton{flex:1 1 auto}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actionButton:nth-of-type(n+2){margin-left:var(--modal-gap-s);margin-top:0}}@media (min-width:768px){.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (min-width:1024px){.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--m{max-width:var(--modal-size-xl)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog--l{max-width:var(--modal-size-xxl)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actions{justify-content:flex-end}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-actionButton{flex:0 1 auto}}@media (prefers-reduced-motion:no-preference){.arc-v12-0-0-beta-14-1 .arc .arc-Modal-overlay{animation:overlay-show 100ms cubic-bezier(0.44,0,0.55,0.94)}.arc-v12-0-0-beta-14-1 .arc .arc-Modal-dialog{animation:content-show 100ms cubic-bezier(0.44,0,0.55,0.94)}@keyframes content-show{from{opacity:0;transform:scale(0.85)}to{opacity:1;transform:scale(1)}}@keyframes overlay-show{from{opacity:0}to{opacity:1}}}

package/lib/Pagination/Pagination.cjs

@@ -0,0 +1,77 @@
+'use strict';
+
+var filterAttrs = require('../_shared/cjs/filter-attrs-eK6E_34o.cjs');
+var React = require('react');
+var index = require('../_shared/cjs/index-CTlXMLug.cjs');
+var ThemeIcon = require('../_shared/cjs/ThemeIcon-BoxbjTaQ.cjs');
+require('../_shared/cjs/suffix-modifier-DLUGR-yG.cjs');
+require('../_shared/cjs/index-DR8Rkav9.cjs');
+require('../_shared/cjs/Surface-BFx1yNsq.cjs');
+
+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(filterAttrs.__spreadArray(filterAttrs.__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(filterAttrs.__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 through multiple pages of content.
+ */
+var Pagination = function (_a) {
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = filterAttrs.__rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
+    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.createElement("nav", filterAttrs.__assign({ "aria-label": "pagination navigation", className: index.classNames("arc-Pagination") }, filterAttrs.filterAttrs(props)),
+        React.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.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--left" },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationPrevious" }))),
+        React.createElement("div", { className: "arc-Pagination-pageNumberContainer" }, pageRange.map(function (rangeValue, i) {
+            return isPageNumber(rangeValue) ? (React.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.createElement("span", { key: "pagination-range-value-dot".concat(i), className: index.classNames("arc-Pagination-value arc-Pagination-value--dots") }, rangeValue));
+        })),
+        React.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.createElement("div", { className: "arc-Pagination-navigationButtonIcon arc-Pagination-navigationButtonIcon--right" },
+                React.createElement(ThemeIcon.ThemeIcon, { size: 32, icon: "paginationNext" })))));
+};
+
+exports.Pagination = Pagination;

package/lib/Pagination/Pagination.mjs

@@ -0,0 +1,75 @@
+import { b as __spreadArray, _ as __rest, a as __assign, f as filterAttrs } from '../_shared/esm/filter-attrs-B6CM-NUr.mjs';
+import React__default, { useMemo, useState } from 'react';
+import { c as classNames } from '../_shared/esm/index-5C0-U8cc.mjs';
+import { T as ThemeIcon } from '../_shared/esm/ThemeIcon-CN_Ed5b1.mjs';
+import '../_shared/esm/suffix-modifier-B_pO0UkF.mjs';
+import '../_shared/esm/index-Spae4j7j.mjs';
+import '../_shared/esm/Surface-Colbp3Zx.mjs';
+
+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 through multiple pages of content.
+ */
+var Pagination = function (_a) {
+    var pageCount = _a.pageCount, onPageChange = _a.onPageChange, _b = _a.defaultSelectedPage, defaultSelectedPage = _b === void 0 ? 1 : _b, props = __rest(_a, ["pageCount", "onPageChange", "defaultSelectedPage"]);
+    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", __assign({ "aria-label": "pagination navigation", className: classNames("arc-Pagination") }, filterAttrs(props)),
+        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(ThemeIcon, { size: 32, icon: "paginationPrevious" }))),
+        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(ThemeIcon, { size: 32, icon: "paginationNext" })))));
+};
+
+export { Pagination };

package/lib/Pagination/styles.css

@@ -0,0 +1 @@
+.arc-v12-0-0-beta-14-1 .arc .arc-Pagination{align-items:center;display:flex;flex-wrap:nowrap}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-pageNumberContainer{display:flex;flex-wrap:nowrap}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButton{align-items:center;background:transparent;border:none;border-radius:var(--pagination-border-radius-m);color:var(--pagination-colors-light-fg-default);cursor:pointer;display:flex;height:var(--pagination-size-m);justify-content:center;line-height:0;margin:0;outline:none;padding:0;width:var(--pagination-size-m)}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination--onDarkSurface .arc-Pagination-navigationButton{color:var(--pagination-colors-dark-fg-default)}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButtonIcon--left{margin-left:-2px}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButtonIcon--right{margin-right:-2px}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButton--hidden{visibility:hidden}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButton:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value--number{background:transparent;border:none;color:inherit;cursor:pointer;font:var(--sem-type-interface-reg-s);outline:none;padding:0}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value--number:focus-visible{outline:var(--focus-border-weight-s) solid var(--focus-colors-light-border-subtle);outline-offset:2px}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination .arc-Pagination-value--number:active{background-color:var(--pagination-colors-light-bg-pressed);color:var(--pagination-colors-light-text-default)}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value{align-items:center;border-radius:var(--pagination-border-radius-m);display:flex;height:var(--pagination-size-m);justify-content:center;width:var(--pagination-size-m)}@media (hover:hover){.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-navigationButton:hover,.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value--number:not(.arc-Pagination-value--selected):hover{background-color:var(--pagination-colors-light-bg-hover);color:var(--pagination-colors-light-text-default)}}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value--selected{background-color:var(--pagination-colors-light-bg-selected);color:var(--pagination-colors-light-text-default)}@media (min-width: 768px){.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-value{margin:0 calc(var(--pagination-gap-m) / 2)}.arc-v12-0-0-beta-14-1 .arc .arc-Pagination-pageNumberContainer{display:flex;flex-wrap:nowrap;margin:0 calc(var(--pagination-gap-m) / 2)}}