@canopy-iiif/app 0.10.9 → 0.10.11

package/ui/dist/server.mjs

@@ -155,8 +155,16 @@ var Scroll = (props) => {
 
 // ui/src/iiif/Image.jsx
 import React5, { useEffect as useEffect4, useState as useState4 } from "react";
-var Image = (props) => {
+var Image = (props = {}) => {
   const [CloverImage, setCloverImage] = useState4(null);
+  const baseClass = "canopy-iiif-image";
+  const {
+    height = `600px`,
+    backgroundColor = `var(--color-gray-200)`,
+    caption,
+    className: userClassName
+  } = props || {};
+  const rootClassName = [userClassName, baseClass].filter(Boolean).join(" ");
   useEffect4(() => {
     let mounted = true;
     const canUseDom = typeof window !== "undefined" && typeof document !== "undefined";
@@ -179,40 +187,26 @@ var Image = (props) => {
     } catch (_) {
       json = "{}";
     }
-    const {
-      height = `600px`,
-      backgroundColor = `var(--color-gray-200)`,
-      caption
-    } = props || {};
-    return /* @__PURE__ */ React5.createElement(
-      "figure",
+    return /* @__PURE__ */ React5.createElement("figure", { className: rootClassName }, /* @__PURE__ */ React5.createElement(
+      "div",
       {
+        className: `${baseClass}__placeholder`,
+        "data-canopy-image": "1",
         style: {
-          margin: `1.618rem 0 2.618rem`
+          "--canopy-iiif-image-height": height,
+          "--canopy-iiif-image-bg": backgroundColor
         }
       },
       /* @__PURE__ */ React5.createElement(
-        "div",
+        "script",
         {
-          "data-canopy-image": "1",
-          style: {
-            height,
-            backgroundColor,
-            borderRadius: `0.25rem`
-          }
-        },
-        /* @__PURE__ */ React5.createElement(
-          "script",
-          {
-            type: "application/json",
-            dangerouslySetInnerHTML: { __html: json }
-          }
-        )
-      ),
-      caption && /* @__PURE__ */ React5.createElement("figcaption", null, caption)
-    );
+          type: "application/json",
+          dangerouslySetInnerHTML: { __html: json }
+        }
+      )
+    ), caption && /* @__PURE__ */ React5.createElement("figcaption", { className: `${baseClass}__caption` }, caption));
   }
-  return /* @__PURE__ */ React5.createElement(CloverImage, { ...props });
+  return /* @__PURE__ */ React5.createElement(CloverImage, { ...props, className: rootClassName });
 };
 
 // ui/src/iiif/MdxRelatedItems.jsx
@@ -282,9 +276,16 @@ function Button({
 
 // ui/src/layout/ButtonWrapper.jsx
 import React8 from "react";
-function ButtonWrapper({ className = "", children, ...rest }) {
-  const classes = ["canopy-button-group", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React8.createElement("div", { className: classes, ...rest }, children);
+function ButtonWrapper({
+  className = "",
+  children,
+  text = "",
+  variant = "default",
+  ...rest
+}) {
+  const variantClass = variant && variant !== "default" ? `canopy-button-group--${variant}` : "";
+  const classes = ["canopy-button-group", variantClass, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ React8.createElement("div", { className: classes, ...rest }, text && /* @__PURE__ */ React8.createElement("span", { className: "canopy-button-group__text" }, text), /* @__PURE__ */ React8.createElement("div", { className: "canopy-button-group__actions" }, children));
 }
 
 // ui/src/interstitials/Hero.jsx