@arc-ui/community-components 3.3.0 → 3.4.0

package/lib/_shared/esm/{Accordion-DrOTh90S.mjs → Accordion-DtU7jbCv.mjs}

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
+import React__default from 'react';
 import { c as classNames } from './index-BfTCfPZ1.mjs';
 import { Heading } from '@arc-ui/components/Heading';
 import { Text } from '@arc-ui/components/Text';
@@ -12,28 +12,28 @@ var styles$2 = {"accordion-header":"AccordionHeading-module_accordion-header__8s
 var AccordionHeading = function (_a) {
     var _b, _c;
     var heading = _a.heading, content = _a.content, id = _a.id, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, _f = _a.headingSize, headingSize = _f === void 0 ? "xl" : _f, image = _a.image, props = __rest(_a, ["heading", "content", "id", "isPadded", "headingLevel", "headingSize", "image"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
             _b[styles$2["accordion-header"]] = true,
             _b[styles$2["accordion-header--padded"]] = isPadded,
             _b[styles$2["accordion-header--headingSizeM"]] = headingSize === "m",
             _b)) }, filterAttrs(props)),
-        React.createElement("div", { className: classNames((_c = {}, _c[styles$2["accordion-header--hasImage"]] = image, _c)) },
-            image && (React.createElement("div", null,
-                React.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
-        content && (React.createElement(React.Fragment, null,
-            headingSize === "xl" ? (React.createElement(VerticalSpace, { size: "24" })) : (React.createElement(VerticalSpace, { size: "8", sizeL: "12", sizeXL: "16" })),
-            React.createElement(Text, { size: "l", elementType: "p" }, content)))));
+        React__default.createElement("div", { className: classNames((_c = {}, _c[styles$2["accordion-header--hasImage"]] = image, _c)) },
+            image && (React__default.createElement("div", null,
+                React__default.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })))),
+            React__default.createElement(Heading, { level: headingLevel, id: id, size: headingSize }, heading)),
+        content && (React__default.createElement(React__default.Fragment, null,
+            headingSize === "xl" ? (React__default.createElement(VerticalSpace, { size: "24" })) : (React__default.createElement(VerticalSpace, { size: "8", sizeL: "12", sizeXL: "16" })),
+            React__default.createElement(Text, { size: "l", elementType: "p" }, content)))));
 };
 
 var styles$1 = {"AccordionDisclosureListItem":"AccordionDisclosureList-module_AccordionDisclosureListItem__p8LIT"};
 
 var AccordionDisclosureList = function (_a) {
     var disclosureList = _a.disclosureList;
-    return (React.createElement("ul", null, disclosureList.map(function (_a) {
+    return (React__default.createElement("ul", null, disclosureList.map(function (_a) {
         var children = _a.children, summary = _a.summary, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.indentDetails, indentDetails = _c === void 0 ? false : _c, headingLevel = _a.headingLevel, id = _a.id, props = __rest(_a, ["children", "summary", "isOpen", "indentDetails", "headingLevel", "id"]);
-        return (React.createElement("li", { key: id, className: styles$1.AccordionDisclosureListItem, id: id },
-            React.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
+        return (React__default.createElement("li", { key: id, className: styles$1.AccordionDisclosureListItem, id: id },
+            React__default.createElement(Disclosure, __assign({ summary: summary, isOpen: isOpen, indentDetails: indentDetails, headingLevel: headingLevel }, filterAttrs(props)), children)));
     })));
 };
 
@@ -44,9 +44,9 @@ var styles = {"Accordion":"Accordion-module_Accordion__LsXTU"};
  */
 var Accordion = function (_a) {
     var heading = _a.heading, headingLevel = _a.headingLevel, headingSize = _a.headingSize, content = _a.content, id = _a.id, disclosureList = _a.disclosureList, props = __rest(_a, ["heading", "headingLevel", "headingSize", "content", "id", "disclosureList"]);
-    return (React.createElement("div", __assign({ className: styles.Accordion }, filterAttrs(props)),
-        React.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
-        React.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
+    return (React__default.createElement("div", __assign({ className: styles.Accordion }, filterAttrs(props)),
+        React__default.createElement(AccordionHeading, { isPadded: true, id: id, "data-testid": "Accordion-header", heading: heading, headingLevel: headingLevel, headingSize: headingSize, content: content }),
+        React__default.createElement(AccordionDisclosureList, { disclosureList: disclosureList })));
 };
 
 export { Accordion as A };

package/lib/_shared/esm/Author-CJQFrQM9.mjs

@@ -0,0 +1,27 @@
+import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-D-1kWaCP.mjs';
+import React__default from 'react';
+import { Grid, GridRow, GridCol } from '@arc-ui/components/Grid';
+import { Avatar } from '@arc-ui/components/Avatar';
+import { Heading } from '@arc-ui/components/Heading';
+import { Text } from '@arc-ui/components/Text';
+
+var styles = {"authorContent":"Author-module_authorContent__TBY7b","largeAvatar":"Author-module_largeAvatar__Vco03"};
+
+var Author = function (_a) {
+    var name = _a.name, title = _a.title, _b = _a.avatar, avatar = _b === void 0 ? {} : _b, props = __rest(_a, ["name", "title", "avatar"]);
+    var avatarSizes = ["s", "m", "l", "xl"];
+    avatar.size = avatarSizes.includes(avatar.size || "") ? avatar.size : "m";
+    var isLargeAvatar = avatar.size === "l" || avatar.size === "xl";
+    return (React__default.createElement("div", __assign({}, filterAttrs(props)),
+        React__default.createElement(Grid, { isFluid: true, isGutterless: true },
+            React__default.createElement(GridRow, { align: "center" },
+                React__default.createElement(GridCol, { xs: isLargeAvatar ? 12 : "auto" },
+                    React__default.createElement("div", { className: isLargeAvatar ? styles.largeAvatar : undefined },
+                        React__default.createElement(Avatar, __assign({}, avatar)))),
+                React__default.createElement(GridCol, null,
+                    React__default.createElement("div", { className: "".concat(!isLargeAvatar && styles.authorContent), "data-testid": "authorContent" },
+                        React__default.createElement(Heading, { size: "xs" }, name),
+                        React__default.createElement(Text, { size: "s" }, title)))))));
+};
+
+export { Author as A };

package/lib/_shared/esm/Preview-CmbKOgEO.mjs

@@ -0,0 +1,100 @@
+import React__default, { useState, useEffect } from 'react';
+
+const ICON_SIZE = "64px";
+const cache = {};
+const Preview = ({
+  src,
+  light,
+  oEmbedUrl,
+  onClickPreview,
+  playIcon,
+  previewTabIndex,
+  previewAriaLabel
+}) => {
+  const [image, setImage] = useState(null);
+  useEffect(() => {
+    if (!src || !light || !oEmbedUrl) return;
+    fetchImage({ src, light, oEmbedUrl });
+  }, [src, light, oEmbedUrl]);
+  const fetchImage = async ({
+    src: src2,
+    light: light2,
+    oEmbedUrl: oEmbedUrl2
+  }) => {
+    if (React__default.isValidElement(light2)) {
+      return;
+    }
+    if (typeof light2 === "string") {
+      setImage(light2);
+      return;
+    }
+    if (cache[src2]) {
+      setImage(cache[src2]);
+      return;
+    }
+    setImage(null);
+    const response = await fetch(oEmbedUrl2.replace("{url}", src2));
+    const data = await response.json();
+    if (data.thumbnail_url) {
+      const fetchedImage = data.thumbnail_url.replace("height=100", "height=480").replace("-d_295x166", "-d_640");
+      setImage(fetchedImage);
+      cache[src2] = fetchedImage;
+    }
+  };
+  const handleKeyPress = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      onClickPreview == null ? void 0 : onClickPreview(e);
+    }
+  };
+  const handleClick = (e) => {
+    onClickPreview == null ? void 0 : onClickPreview(e);
+  };
+  const isElement = React__default.isValidElement(light);
+  const flexCenter = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center"
+  };
+  const styles = {
+    preview: {
+      width: "100%",
+      height: "100%",
+      backgroundImage: image && !isElement ? `url(${image})` : void 0,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      cursor: "pointer",
+      ...flexCenter
+    },
+    shadow: {
+      background: "radial-gradient(rgb(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 60%)",
+      borderRadius: ICON_SIZE,
+      width: ICON_SIZE,
+      height: ICON_SIZE,
+      position: isElement ? "absolute" : void 0,
+      ...flexCenter
+    },
+    playIcon: {
+      borderStyle: "solid",
+      borderWidth: "16px 0 16px 26px",
+      borderColor: "transparent transparent transparent white",
+      marginLeft: "7px"
+    }
+  };
+  const defaultPlayIcon = /* @__PURE__ */ React__default.createElement("div", { style: styles.shadow, className: "react-player__shadow" }, /* @__PURE__ */ React__default.createElement("div", { style: styles.playIcon, className: "react-player__play-icon" }));
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      style: styles.preview,
+      className: "react-player__preview",
+      tabIndex: previewTabIndex,
+      onClick: handleClick,
+      onKeyDown: handleKeyPress,
+      ...previewAriaLabel ? { "aria-label": previewAriaLabel } : {}
+    },
+    isElement ? light : null,
+    playIcon || defaultPlayIcon
+  );
+};
+var Preview_default = Preview;
+
+export { Preview_default as default };

package/lib/_shared/esm/{SectionHeading-DZOg_gYi.mjs → SectionHeading-BskdQ2Tt.mjs}

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
+import React__default from 'react';
 import { c as classNames } from './index-BfTCfPZ1.mjs';
 import { Text } from '@arc-ui/components/Text';
 import { VerticalSpace } from '@arc-ui/components/VerticalSpace';
@@ -11,17 +11,17 @@ var styles = {"section-header":"SectionHeading-module_section-header__iB07I","se
 var SectionHeading = function (_a) {
     var _b, _c;
     var heading = _a.heading, content = _a.content, id = _a.id, image = _a.image, isHeadingWordWrap = _a.isHeadingWordWrap, _d = _a.isPadded, isPadded = _d === void 0 ? false : _d, _e = _a.headingLevel, headingLevel = _e === void 0 ? "2" : _e, props = __rest(_a, ["heading", "content", "id", "image", "isHeadingWordWrap", "isPadded", "headingLevel"]);
-    return (React.createElement("div", __assign({ className: classNames((_b = {},
+    return (React__default.createElement("div", __assign({ className: classNames((_b = {},
             _b[styles["section-header"]] = true,
             _b[styles["section-header--padded"]] = isPadded,
             _b)) }, filterAttrs(props)),
-        React.createElement("div", { className: classNames((_c = {}, _c[styles["section-header--hasImage"]] = image, _c)) },
-            image && (React.createElement("div", null,
-                React.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })))),
-            React.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
-        content && (React.createElement(React.Fragment, null,
-            React.createElement(VerticalSpace, { size: "24" }),
-            React.createElement(Text, { size: "l", elementType: "p" }, content)))));
+        React__default.createElement("div", { className: classNames((_c = {}, _c[styles["section-header--hasImage"]] = image, _c)) },
+            image && (React__default.createElement("div", null,
+                React__default.createElement(Image, __assign({}, image, { width: 68, fit: "cover" })))),
+            React__default.createElement(Heading, { level: headingLevel, id: id, size: "xl", isWordWrap: isHeadingWordWrap }, heading)),
+        content && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(VerticalSpace, { size: "24" }),
+            React__default.createElement(Text, { size: "l", elementType: "p" }, content)))));
 };
 
 export { SectionHeading as S };

package/lib/_shared/esm/{ThumbnailSignpost-DaZByYIH.mjs → ThumbnailSignpost-CBSdQiHw.mjs}

@@ -1,5 +1,5 @@
 import { _ as __rest, a as __assign, f as filterAttrs } from './filter-attrs-D-1kWaCP.mjs';
-import React from 'react';
+import React__default from 'react';
 import { c as classNames } from './index-BfTCfPZ1.mjs';
 import { B as BtIconArrowRightFill } from './BtIconArrowRightFill-D0zKgk3B.mjs';
 import { Image } from '@arc-ui/components/Image';
@@ -12,25 +12,25 @@ var styles = {"thumbnailSignpost":"ThumbnailSignpost-module_thumbnailSignpost__Y
 var ThumbnailSignpost = function (_a) {
     var _b;
     var text = _a.text, title = _a.title, img = _a.img, onClick = _a.onClick, buttonLabel = _a.buttonLabel, props = __rest(_a, ["text", "title", "img", "onClick", "buttonLabel"]);
-    return (React.createElement("div", __assign({ className: classNames(styles.thumbnailSignpost, (_b = {},
+    return (React__default.createElement("div", __assign({ className: classNames(styles.thumbnailSignpost, (_b = {},
             _b[styles.isLink] = onClick,
             _b)), onClick: onClick, "aria-label": title, tabIndex: onClick ? 0 : -1 }, (onClick && { role: "button" }), filterAttrs(props)),
-        img && (React.createElement("div", { className: styles.image },
-            React.createElement(Image, __assign({}, img)))),
-        React.createElement("div", { className: styles.content },
-            React.createElement("span", { className: styles.heading }, title),
-            React.createElement(VerticalSpace, { size: "8" }),
+        img && (React__default.createElement("div", { className: styles.image },
+            React__default.createElement(Image, __assign({}, img)))),
+        React__default.createElement("div", { className: styles.content },
+            React__default.createElement("span", { className: styles.heading }, title),
+            React__default.createElement(VerticalSpace, { size: "8" }),
             text,
-            buttonLabel && onClick && (React.createElement(React.Fragment, null,
-                React.createElement(VerticalSpace, { size: "8" }),
-                React.createElement("div", { className: styles.thumbnailButton },
-                    React.createElement("span", { className: styles.buttonIcon, role: "img", style: {
+            buttonLabel && onClick && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement(VerticalSpace, { size: "8" }),
+                React__default.createElement("div", { className: styles.thumbnailButton },
+                    React__default.createElement("span", { className: styles.buttonIcon, role: "img", style: {
                             height: 24,
                             width: 24,
                             maskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
                             WebkitMaskImage: "url(\"".concat(BtIconArrowRightFill, "\")"),
                         } }),
-                    React.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
+                    React__default.createElement(Heading, { size: "xxs" }, buttonLabel)))))));
 };
 
 export { ThumbnailSignpost as T };