@arc-ui/components 12.0.0-alpha.0 → 12.0.0-beta.10

package/dist/InformationCard/InformationCard.cjs.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
+var React = require('react');
+var BtIconArrowRight_esm = require('../_shared/cjs/BtIconArrowRight.esm-6053bb79.js');
+var Icon = require('../_shared/cjs/Icon-5dd78f2b.js');
+var Badge = require('../_shared/cjs/Badge-e5e57c0d.js');
+var Image = require('../_shared/cjs/Image-bb696c61.js');
+var Text = require('../_shared/cjs/Text-1b3e4fb6.js');
+var ButtonV2 = require('../_shared/cjs/ButtonV2-0679b44b.js');
+var CardHeading = require('../_shared/cjs/CardHeading-a7d8d472.js');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
+require('../_shared/cjs/Spinner-0f578e7f.js');
+require('../_shared/cjs/Heading-b4b65724.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/** 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, badges = _a.badges, icon = _a.icon, minHeight = _a.minHeight, _b = _a.headingLevel, headingLevel = _b === void 0 ? "2" : _b, props = index_es.__rest(_a, ["cardUrl", "onClick", "heading", "text", "label", "footerLogo", "button", "image", "badges", "icon", "minHeight", "headingLevel"]);
+    var surface = React.useContext(Surface.Context).surface;
+    var _c = React.useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    var handleShowHoverState = function (show) { return function () { return setShowHoverState(show); }; };
+    return (React__default["default"].createElement("div", index_es.__assign({ style: { minHeight: minHeight }, className: index.classNames("arc-InformationCard", {
+            "arc-InformationCard--isALink": cardUrl,
+            "arc-InformationCard--outlined": cardUrl && showHoverState,
+            "arc-InformationCard--onDarkSurface": surface === "dark"
+        }) }, index_es.filterDataAttrs(props)),
+        React__default["default"].createElement(Surface.Surface, { growVertically: true, background: "light-white" },
+            React__default["default"].createElement("div", { className: "arc-InformationCard-innerContainer" },
+                image && (React__default["default"].createElement("div", { className: "arc-InformationCard-img" },
+                    React__default["default"].createElement(Image.Image, index_es.__assign({ alt: "" }, image)))),
+                icon && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    React__default["default"].createElement("div", { className: "arc-InformationCard-icon" },
+                        React__default["default"].createElement(Icon.Icon, { testId: "information-card-icon", icon: icon })))),
+                React__default["default"].createElement("div", { className: "arc-InformationCard-contentContainer" },
+                    label && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement("div", { className: "arc-InformationCard-label" }, label.toUpperCase()))),
+                    React__default["default"].createElement(CardHeading.CardHeading, { heading: heading, headingLevel: headingLevel, href: cardUrl, onClick: onClick, onMouseEnter: handleShowHoverState(true), onMouseLeave: handleShowHoverState(false), onFocus: handleShowHoverState(true), onBlur: handleShowHoverState(false) }),
+                    text && React__default["default"].createElement(Text.Text, null, text)),
+                (button || badges || footerLogo) && (React__default["default"].createElement("div", { className: "arc-InformationCard-footer" },
+                    badges && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                        React__default["default"].createElement("div", { className: "arc-InformationCard-badgeContainer" }, badges.map(function (_a, i) {
+                            var text = _a.text, badgeProps = index_es.__rest(_a, ["text"]);
+                            return (React__default["default"].createElement("div", { className: "arc-InformationCard-badge", key: "information-card-badge-".concat(i) },
+                                React__default["default"].createElement(Badge.Badge, index_es.__assign({}, badgeProps), text)));
+                        })))),
+                    React__default["default"].createElement("div", { className: "arc-InformationCard-footerItems" },
+                        button && !cardUrl && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerButtonContainer" },
+                            React__default["default"].createElement(ButtonV2.ButtonV2, index_es.__assign({}, button, { size: "m", iconPosition: "beforeText", buttonStyle: "compact", icon: BtIconArrowRight_esm.BtIconArrowRight })))),
+                        footerLogo && (React__default["default"].createElement("div", { className: "arc-InformationCard-footerLogoContainer" },
+                            React__default["default"].createElement(Image.Image, index_es.__assign({}, footerLogo)))))))))));
+};
+
+exports.InformationCard = InformationCard;

package/dist/InformationCard/InformationCard.esm.js

@@ -0,0 +1,52 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.js';
+import React__default, { useContext, useState } from 'react';
+import { B as BtIconArrowRight } from '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
+import { I as Icon } from '../_shared/esm/Icon-6fef56b3.js';
+import { B as Badge } from '../_shared/esm/Badge-ec093004.js';
+import { I as Image } from '../_shared/esm/Image-45c7760b.js';
+import { T as Text } from '../_shared/esm/Text-dc3f9cb5.js';
+import { B as ButtonV2 } from '../_shared/esm/ButtonV2-b35cea64.js';
+import { C as CardHeading } from '../_shared/esm/CardHeading-4e020d2e.js';
+import { c as classNames } from '../_shared/esm/index-2e73c2e9.js';
+import { C as Context, S as Surface } from '../_shared/esm/Surface-201aa0d6.js';
+import '../_shared/esm/Spinner-7c6f320f.js';
+import '../_shared/esm/Heading-e83f0d49.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, 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 _c = useState(false), showHoverState = _c[0], setShowHoverState = _c[1];
+    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, 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)))),
+                icon && (React__default.createElement(React__default.Fragment, null,
+                    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/package.json

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

package/dist/InformationCard/styles.css

@@ -0,0 +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-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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
+var React = require('react');
+var index = require('../_shared/cjs/index-9947ac13.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
+var Icon = require('../_shared/cjs/Icon-5dd78f2b.js');
+var VisuallyHidden = require('../_shared/cjs/VisuallyHidden-c691ea4d.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const BtIconNewWindow = (props) =>
+  /*#__PURE__*/ React__default["default"].createElement(
+    "svg",
+    Object.assign(
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 32 32",
+      },
+      props,
+    ),
+    /*#__PURE__*/ React__default["default"].createElement("defs", null),
+    /*#__PURE__*/ React__default["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["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 = index_es.__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: index_es.__assign(index_es.__assign({}, commonProps), { href: href, title: title, target: target, rel: rel }),
+        button: index_es.__assign({}, commonProps),
+        span: index_es.__assign({}, commonProps)
+    };
+    var LinkElement = isButton ? "button" : href ? "a" : "span";
+    return (React__default["default"].createElement(LinkElement, index_es.__assign({}, elementProps[LinkElement], index_es.filterDataAttrs(props)),
+        React__default["default"].createElement("div", { className: "arc-Link-wrapper" },
+            React__default["default"].createElement(VisuallyHidden.VisuallyHidden, null,
+                screenReaderText || children,
+                isExternalLink && " (Opens in new window)"),
+            firstText && (React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Link-text" },
+                firstText,
+                "\u00A0")),
+            React__default["default"].createElement("span", { className: "arc-Link-iconWrapper" },
+                React__default["default"].createElement("span", { "aria-hidden": true, className: "arc-Link-text" }, lastWord),
+                isExternalLink && (React__default["default"].createElement(Icon.Icon, { isPresentationIcon: true, icon: BtIconNewWindow, size: size === "s" ? 20 : 24 }))))));
+};
+
+exports.Link = Link;

package/dist/Link/Link.esm.js

@@ -0,0 +1,67 @@
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.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-201aa0d6.js';
+import { I as Icon } from '../_shared/esm/Icon-6fef56b3.js';
+import { V as VisuallyHidden } from '../_shared/esm/VisuallyHidden-59f004f5.js';
+
+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], filterDataAttrs(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/dist/Link/package.json

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

package/dist/Link/styles.css

@@ -0,0 +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-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 filterDataAttrs = require('../_shared/cjs/filter-data-attrs-1c9a530c.js');
+var index_es = require('../_shared/cjs/index.es-0c2c97f4.js');
 var index = require('../_shared/cjs/index-9947ac13.js');
 var React = require('react');
-var Surface = require('../_shared/cjs/Surface-038db6e1.js');
+var Surface = require('../_shared/cjs/Surface-ca708a8c.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -15,13 +15,13 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * 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 = filterDataAttrs.__rest(_a, ["children", "isMeasured"]);
+    var children = _a.children, _b = _a.isMeasured, isMeasured = _b === void 0 ? false : _b, props = index_es.__rest(_a, ["children", "isMeasured"]);
     var surface = React.useContext(Surface.Context).surface;
-    return (React__default["default"].createElement("div", filterDataAttrs.__assign({ className: index.classNames({
+    return (React__default["default"].createElement("div", index_es.__assign({ className: index.classNames({
             "arc-Markup": true,
             "arc-Markup--measured": isMeasured,
             "arc-Markup--onDarkSurface": surface === "dark"
-        }) }, filterDataAttrs.filterDataAttrs(props)), children));
+        }) }, index_es.filterDataAttrs(props)), children));
 };
 
 exports.Markup = Markup;

package/dist/Markup/Markup.esm.js

@@ -1,7 +1,7 @@
-import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/filter-data-attrs-ea8f4ed4.js';
+import { _ as __rest, a as __assign, f as filterDataAttrs } from '../_shared/esm/index.es-fc59ba8f.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-0ca6817d.js';
+import { C as Context } from '../_shared/esm/Surface-201aa0d6.js';
 
 /**
  * Use `Markup` to display HTML-formatted text.

package/dist/Markup/styles.css

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

package/dist/MediaCard/MediaCard.cjs.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MediaCard = require('../_shared/cjs/MediaCard-158890b3.js');
+require('../_shared/cjs/index.es-0c2c97f4.js');
+require('react');
+require('../_shared/cjs/index-9947ac13.js');
+require('../_shared/cjs/index.es-0f681622.js');
+require('../_shared/cjs/use-media-query-d34c83b9.js');
+require('../_shared/cjs/Image-bb696c61.js');
+require('../_shared/cjs/Heading-b4b65724.js');
+require('../_shared/cjs/Surface-ca708a8c.js');
+require('../_shared/cjs/Text-1b3e4fb6.js');
+require('../_shared/cjs/VerticalSpace-a5cf4d4e.js');
+require('../_shared/cjs/CardHeading-a7d8d472.js');
+require('../_shared/cjs/CardFooter-facb09e6.js');
+require('../_shared/cjs/BtIconArrowRight.esm-6053bb79.js');
+require('../_shared/cjs/BtIconPlayFill.esm-b8997cfc.js');
+require('../_shared/cjs/Icon-5dd78f2b.js');
+require('../_shared/cjs/index-28fbfd5b.js');
+require('../_shared/cjs/ConditionalWrapper-bf944594.js');
+
+
+
+exports.MediaCard = MediaCard.MediaCard;

package/dist/MediaCard/MediaCard.esm.js

@@ -0,0 +1,18 @@
+export { M as MediaCard } from '../_shared/esm/MediaCard-38c7a943.js';
+import '../_shared/esm/index.es-fc59ba8f.js';
+import 'react';
+import '../_shared/esm/index-2e73c2e9.js';
+import '../_shared/esm/index.es-be971b8d.js';
+import '../_shared/esm/use-media-query-d3622da8.js';
+import '../_shared/esm/Image-45c7760b.js';
+import '../_shared/esm/Heading-e83f0d49.js';
+import '../_shared/esm/Surface-201aa0d6.js';
+import '../_shared/esm/Text-dc3f9cb5.js';
+import '../_shared/esm/VerticalSpace-4b6b7468.js';
+import '../_shared/esm/CardHeading-4e020d2e.js';
+import '../_shared/esm/CardFooter-97261b1c.js';
+import '../_shared/esm/BtIconArrowRight.esm-93da96bb.js';
+import '../_shared/esm/BtIconPlayFill.esm-05fc0344.js';
+import '../_shared/esm/Icon-6fef56b3.js';
+import '../_shared/esm/index-ce6dee84.js';
+import '../_shared/esm/ConditionalWrapper-b85979de.js';

package/dist/MediaCard/package.json

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

package/dist/MediaCard/styles.css

@@ -0,0 +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: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)}}