@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js

@@ -1,55 +1,62 @@
-import { jsxs as n, Fragment as _, jsx as e } from "react/jsx-runtime";
-import '../../../../assets/styles/less/components/imagesList/imagesListItem/imagesListItem.entry.css';/* empty css                                                                                     */
-import { useContext as y, useEffect as u } from "react";
-import t from "clsx";
-import { useModalState as h } from "../../../../hooks/useModalState.js";
-import { ImagesListContext as v } from "../imagesListContext.js";
-import x from "./imagesListItemModal.js";
-const M = ({
+import { jsxs as n, Fragment as y, jsx as e } from "react/jsx-runtime";
+import '../../../../assets/styles/less/components/imagesList/imagesListItem/imagesListItem.entry.css';import '../../../../assets/styles/less/tokens.entry.css';/* empty css                                        */
+/* empty css                                                                                     */
+import { useContext as _, useEffect as h } from "react";
+import m from "clsx";
+import { useModalState as v } from "../../../../hooks/useModalState.js";
+import { ImagesListContext as x } from "../imagesListContext.js";
+import I from "./imagesListItemModal.js";
+const k = ({
   className: s,
   src: i,
   rounded: o,
-  itemBarContent: l,
+  itemBarContent: r,
   cols: d = 1,
-  rows: r = 1,
+  rows: l = 1,
   itemBarPlacement: g = "bottom",
   alt: c = "image"
 }) => {
-  const { isOpen: m, onClose: p, onOpen: b } = h(), { rowsHeight: a, variant: w } = y(v);
-  u(() => {
-    m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "auto";
-  }, [m]);
+  const { isOpen: t, onClose: p, onOpen: b } = v(), { rowsHeight: a, variant: w } = _(x);
+  h(() => {
+    if (!t) return;
+    const u = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = u;
+    };
+  }, [t]);
   const f = {
-    height: a ? `${a * r}px` : "",
-    gridRowEnd: `span ${r}`,
+    // No height is undefined, not "": React writes an empty value on the client
+    // but not on the server, and hydration reports the style as mismatched.
+    height: a ? `${a * l}px` : void 0,
+    gridRowEnd: `span ${l}`,
     gridColumnEnd: `span ${d}`
   };
-  return /* @__PURE__ */ n(_, { children: [
+  return /* @__PURE__ */ n(y, { children: [
     /* @__PURE__ */ e(
       "li",
       {
         "data-testid": "images-list-item",
-        className: t("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
+        className: m("smwb-gallery__list__item", s, "smwb-gallery-item", `smwb-${w}`),
         onClick: b,
         style: f,
         children: /* @__PURE__ */ n("div", { className: "smwb-gallery-item__inner", children: [
-          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: t("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
-          l && /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "smwb-gallery-item__img-wrapper", children: /* @__PURE__ */ e("img", { src: i, alt: c || "image", className: m("smwb-gallery-item__img", { "smwb-rounded": o }) }) }),
+          r && /* @__PURE__ */ e(
             "div",
             {
-              className: t("smwb-gallery-item__bar", s, `smwb-${g}`, {
+              className: m("smwb-gallery-item__bar", s, `smwb-${g}`, {
                 "smwb-rounded": o
               }),
-              children: l
+              children: r
             }
           )
         ] })
       }
     ),
-    /* @__PURE__ */ e(x, { src: i, onClose: p, isOpen: m })
+    /* @__PURE__ */ e(I, { src: i, onClose: p, isOpen: t })
   ] });
 };
 export {
-  M as default
+  k as default
 };
 //# sourceMappingURL=imagesListItem.js.map

package/dist/components/dataDisplay/imagesList/imagesListItem/imagesListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItem.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  useEffect(() => {\n    if (isOpen) {\n      document.body.style.overflow = \"hidden\";\n    } else {\n      document.body.style.overflow = \"auto\";\n    }\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    height: rowsHeight ? `${rowsHeight * rows}px` : \"\",\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;;AAmBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAE5D,EAAAC,EAAU,MAAM;AACd,IAAIR,IACF,SAAS,KAAK,MAAM,WAAW,WAE/B,SAAS,KAAK,MAAM,WAAW;AAAA,EAEnC,GAAG,CAACA,CAAM,CAAC;AAEX,QAAMS,IAAuB;AAAA,IAC3B,QAAQL,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAc,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BrB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAO;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAAnB,GAAU,KAAKM,KAAO,SAAS,WAAWc,EAAG,0BAA0B,EAAE,gBAAgBnB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAiB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BrB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAiB,EAACE,GAAA,EAAoB,KAAArB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}
+{"version":3,"file":"imagesListItem.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItem.tsx"],"sourcesContent":["import React, { CSSProperties, useContext, useEffect } from \"react\";\nimport cn from \"clsx\";\nimport { useModalState } from \"../../../../hooks/useModalState\";\nimport { ImagesListItemModal } from \"../index\";\nimport { ImagesListContext } from \"../imagesListContext\";\n\nexport interface ImagesListItemProps {\n  className?: string;\n  src: string;\n  rowsHeight?: number;\n  cols: number;\n  rows: number;\n  rounded?: boolean;\n  itemBarPlacement?: \"top\" | \"bottom\" | \"under\";\n  itemBarContent?: React.ReactNode;\n  alt?: string;\n}\n\nconst ImagesListItem = ({\n  className,\n  src,\n  rounded,\n  itemBarContent,\n  cols = 1,\n  rows = 1,\n  itemBarPlacement = \"bottom\",\n  alt = \"image\",\n}: ImagesListItemProps) => {\n  const { isOpen, onClose, onOpen } = useModalState();\n  const { rowsHeight, variant } = useContext(ImagesListContext);\n\n  // Lock the page's scroll while the viewer is open, and give it back as it was.\n  // (Every item used to set it to \"auto\" when it mounted, undoing another lock.)\n  useEffect(() => {\n    if (!isOpen) return;\n    const previous = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = previous;\n    };\n  }, [isOpen]);\n\n  const style: CSSProperties = {\n    // No height is undefined, not \"\": React writes an empty value on the client\n    // but not on the server, and hydration reports the style as mismatched.\n    height: rowsHeight ? `${rowsHeight * rows}px` : undefined,\n    gridRowEnd: `span ${rows}`,\n    gridColumnEnd: `span ${cols}`,\n  };\n\n  return (\n    <>\n      <li\n        data-testid=\"images-list-item\"\n        className={cn(\"smwb-gallery__list__item\", className, \"smwb-gallery-item\", `smwb-${variant}`)}\n        onClick={onOpen}\n        style={style}\n      >\n        <div className=\"smwb-gallery-item__inner\">\n          <div className=\"smwb-gallery-item__img-wrapper\">\n            <img src={src} alt={alt || \"image\"} className={cn(\"smwb-gallery-item__img\", { \"smwb-rounded\": rounded })} />\n          </div>\n          {itemBarContent && (\n            <div\n              className={cn(\"smwb-gallery-item__bar\", className, `smwb-${itemBarPlacement}`, {\n                \"smwb-rounded\": rounded,\n              })}\n            >\n              {itemBarContent}\n            </div>\n          )}\n        </div>\n      </li>\n      <ImagesListItemModal src={src} onClose={onClose} isOpen={isOpen} />\n    </>\n  );\n};\n\nexport default ImagesListItem;\n"],"names":["ImagesListItem","className","src","rounded","itemBarContent","cols","rows","itemBarPlacement","alt","isOpen","onClose","onOpen","useModalState","rowsHeight","variant","useContext","ImagesListContext","useEffect","previous","style","jsxs","Fragment","jsx","cn","ImagesListItemModal"],"mappings":";;;;;;;;AAoBA,MAAMA,IAAiB,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,KAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,kBAAAC,IAAmB;AAAA,EACnB,KAAAC,IAAM;AACR,MAA2B;AACzB,QAAM,EAAE,QAAAC,GAAQ,SAAAC,GAAS,QAAAC,EAAA,IAAWC,EAAA,GAC9B,EAAE,YAAAC,GAAY,SAAAC,MAAYC,EAAWC,CAAiB;AAI5D,EAAAC,EAAU,MAAM;AACd,QAAI,CAACR,EAAQ;AACb,UAAMS,IAAW,SAAS,KAAK,MAAM;AACrC,oBAAS,KAAK,MAAM,WAAW,UACxB,MAAM;AACX,eAAS,KAAK,MAAM,WAAWA;AAAA,IACjC;AAAA,EACF,GAAG,CAACT,CAAM,CAAC;AAEX,QAAMU,IAAuB;AAAA;AAAA;AAAA,IAG3B,QAAQN,IAAa,GAAGA,IAAaP,CAAI,OAAO;AAAA,IAChD,YAAY,QAAQA,CAAI;AAAA,IACxB,eAAe,QAAQD,CAAI;AAAA,EAAA;AAG7B,SACE,gBAAAe,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,WAAWC,EAAG,4BAA4BtB,GAAW,qBAAqB,QAAQa,CAAO,EAAE;AAAA,QAC3F,SAASH;AAAA,QACT,OAAAQ;AAAA,QAEA,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,UAAA,gBAAAE,EAAC,SAAI,WAAU,kCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAApB,GAAU,KAAKM,KAAO,SAAS,WAAWe,EAAG,0BAA0B,EAAE,gBAAgBpB,EAAA,CAAS,GAAG,GAC5G;AAAA,UACCC,KACC,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAG,0BAA0BtB,GAAW,QAAQM,CAAgB,IAAI;AAAA,gBAC7E,gBAAgBJ;AAAA,cAAA,CACjB;AAAA,cAEA,UAAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,gBAAAkB,EAACE,GAAA,EAAoB,KAAAtB,GAAU,SAAAQ,GAAkB,QAAAD,EAAA,CAAgB;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.d.ts

@@ -3,5 +3,5 @@ export interface ImagesListItemModalProps {
     onClose: () => void;
     isOpen: boolean;
 }
-declare const ImagesListItemModal: ({ src, onClose, isOpen }: ImagesListItemModalProps) => import("react").ReactPortal;
+declare const ImagesListItemModal: ({ src, onClose, isOpen }: ImagesListItemModalProps) => import("react").ReactPortal | null;
 export default ImagesListItemModal;

package/dist/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js

@@ -1,29 +1,32 @@
 import { jsx as e } from "react/jsx-runtime";
-import { useRef as i } from "react";
-import { createPortal as n } from "react-dom";
-import { CSSTransition as l } from "react-transition-group";
-const g = ({ src: o, onClose: a, isOpen: t }) => {
-  const m = i(null);
-  return n(
+import { useRef as l, useState as s } from "react";
+import { createPortal as c } from "react-dom";
+import { useSafeLayoutEffect as d } from "../../../../hooks/useSafeLayoutEffect.js";
+import { CSSTransition as u } from "react-transition-group";
+const b = ({ src: a, onClose: m, isOpen: r }) => {
+  const o = l(null), [t, n] = s();
+  return d(() => {
+    n(document.body);
+  }, []), t ? c(
     /* @__PURE__ */ e(
-      l,
+      u,
       {
         timeout: 100,
-        in: t,
+        in: r,
         classNames: {
           enterActive: "smwb-image-modal__overlay-enter-active",
           enterDone: "smwb-image-modal__overlay-enter-done"
         },
         mountOnEnter: !0,
         unmountOnExit: !0,
-        nodeRef: m,
-        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: a, ref: m, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (r) => r.stopPropagation(), children: /* @__PURE__ */ e("img", { src: o, alt: "", className: "smwb-image-modal__img" }) }) })
+        nodeRef: o,
+        children: /* @__PURE__ */ e("div", { className: "smwb-image-modal__overlay", onClick: m, ref: o, children: /* @__PURE__ */ e("div", { className: "smwb-image-modal", onClick: (i) => i.stopPropagation(), children: /* @__PURE__ */ e("img", { src: a, alt: "", className: "smwb-image-modal__img" }) }) })
       }
     ),
-    document.body
-  );
+    t
+  ) : null;
 };
 export {
-  g as default
+  b as default
 };
 //# sourceMappingURL=imagesListItemModal.js.map

package/dist/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    document.body\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","createPortal","jsx","CSSTransition","e"],"mappings":";;;;AAUA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI;AAC3C,SAAOC;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIL;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAASL,GAAS,KAAKE,GAChE,UAAA,gBAAAG,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAN,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEF,SAAS;AAAA,EAAA;AAEb;"}
+{"version":3,"file":"imagesListItemModal.js","sources":["../../../../../src/components/dataDisplay/imagesList/imagesListItem/imagesListItemModal.tsx"],"sourcesContent":["import { useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { useSafeLayoutEffect } from \"../../../../hooks/useSafeLayoutEffect\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport interface ImagesListItemModalProps {\n  src: string;\n  onClose: () => void;\n  isOpen: boolean;\n}\n\nconst ImagesListItemModal = ({ src, onClose, isOpen }: ImagesListItemModalProps) => {\n  const nodeRef = useRef<HTMLDivElement>(null);\n  // The viewer is portalled: its target is resolved in the browser only, so the\n  // image list renders on the server and hydrates.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n  if (!portalRoot) return null;\n  return createPortal(\n    <CSSTransition\n      timeout={100}\n      in={isOpen}\n      classNames={{\n        enterActive: \"smwb-image-modal__overlay-enter-active\",\n        enterDone: \"smwb-image-modal__overlay-enter-done\",\n      }}\n      mountOnEnter\n      unmountOnExit\n      nodeRef={nodeRef}\n    >\n      <div className=\"smwb-image-modal__overlay\" onClick={onClose} ref={nodeRef}>\n        <div className=\"smwb-image-modal\" onClick={(e) => e.stopPropagation()}>\n          <img src={src} alt=\"\" className=\"smwb-image-modal__img\" />\n        </div>\n      </div>\n    </CSSTransition>,\n    portalRoot\n  );\n};\n\nexport default ImagesListItemModal;\n"],"names":["ImagesListItemModal","src","onClose","isOpen","nodeRef","useRef","portalRoot","setPortalRoot","useState","useSafeLayoutEffect","createPortal","jsx","CSSTransition","e"],"mappings":";;;;;AAWA,MAAMA,IAAsB,CAAC,EAAE,KAAAC,GAAK,SAAAC,GAAS,QAAAC,QAAuC;AAClF,QAAMC,IAAUC,EAAuB,IAAI,GAGrC,CAACC,GAAYC,CAAa,IAAIC,EAAA;AAIpC,SAHAC,EAAoB,MAAM;AACxB,IAAAF,EAAc,SAAS,IAAI;AAAA,EAC7B,GAAG,CAAA,CAAE,GACAD,IACEI;AAAA,IACL,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,IAAIT;AAAA,QACJ,YAAY;AAAA,UACV,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,QAEb,cAAY;AAAA,QACZ,eAAa;AAAA,QACb,SAAAC;AAAA,QAEA,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,6BAA4B,SAAST,GAAS,KAAKE,GAChE,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,CAACE,MAAMA,EAAE,gBAAA,GAClD,UAAA,gBAAAF,EAAC,OAAA,EAAI,KAAAV,GAAU,KAAI,IAAG,WAAU,wBAAA,CAAwB,EAAA,CAC1D,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFK;AAAA,EAAA,IAnBsB;AAqB1B;"}

package/dist/components/dataDisplay/kanban/index.d.ts

@@ -0,0 +1,2 @@
+export { Kanban, KanbanColumn, KanbanCard, default } from "./kanban";
+export type { KanbanProps, KanbanColumnProps, KanbanCardProps } from "./kanban";

package/dist/components/dataDisplay/kanban/kanban.d.ts

@@ -0,0 +1,53 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export interface KanbanProps extends HTMLAttributes<HTMLDivElement> {
+    className?: string;
+    /**
+     * The narrowest a column gets before the board scrolls sideways: a number of
+     * pixels or any CSS length. 15.5rem by default.
+     */
+    columnWidth?: number | string;
+    /** Test id of the root `<div>`; `kanban` unless given. */
+    "data-testid"?: string;
+}
+export interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    className?: string;
+    /** The column's name: text or a badge. It names the column for assistive technology. */
+    title: ReactNode;
+    /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */
+    count?: number | string | null;
+    /** The column's colour, a stripe along its top: any CSS colour. */
+    accent?: string;
+    /** Shown in place of the cards when there are none, e.g. "Empty". */
+    empty?: ReactNode;
+    /** Under the cards, e.g. a link to the rest as a list. */
+    footer?: ReactNode;
+    /** Test id of the column's `<div>`; `kanban-column` unless given. */
+    "data-testid"?: string;
+}
+export interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, "title"> {
+    className?: string;
+    /** The card's title, clamped to `titleLines` lines. */
+    title?: ReactNode;
+    /** Makes the title a link, and the whole card open it. */
+    href?: string;
+    /** Lines the title is clamped to: 3 by default. */
+    titleLines?: number;
+    /** Test id of the card's `<li>`; `kanban-card` unless given. */
+    "data-testid"?: string;
+}
+/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */
+export declare const Kanban: React.ForwardRefExoticComponent<KanbanProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */
+export declare const KanbanColumn: React.ForwardRefExoticComponent<KanbanColumnProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A card on the board: its title (a link with `href`, and then the whole card
+ * opens it) and the children under it.
+ */
+export declare const KanbanCard: React.ForwardRefExoticComponent<KanbanCardProps & {
+    children?: ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;
+export default Kanban;

package/dist/components/dataDisplay/kanban/kanban.js

@@ -0,0 +1,74 @@
+import { jsx as s, jsxs as _ } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/kanban/kanban.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import m, { useId as p } from "react";
+import k from "clsx";
+const h = (a) => typeof a == "number" ? `${a}px` : a, c = (a) => a != null && a !== !1 && a !== !0 && a !== "", x = m.forwardRef(function({ className: b, style: l, columnWidth: t, children: n, "data-testid": e = "kanban", ...d }, r) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-testid": e,
+      ...d,
+      ref: r,
+      className: k("smwb-kanban", b),
+      style: t === void 0 ? l : { ...l, "--smwb-kanban-column-width": h(t) },
+      children: n
+    }
+  );
+}), R = m.forwardRef(
+  function({
+    className: b,
+    style: l,
+    title: t,
+    count: n,
+    accent: e,
+    empty: d,
+    footer: r,
+    children: i,
+    "data-testid": o = "kanban-column",
+    ...u
+  }, f) {
+    const w = `${p()}-title`, N = m.Children.toArray(i).length > 0;
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        "data-testid": o,
+        role: "group",
+        "aria-labelledby": w,
+        ...u,
+        ref: f,
+        className: k("smwb-kanban__column", b),
+        style: e === void 0 ? l : { ...l, "--smwb-kanban-accent": e },
+        children: [
+          /* @__PURE__ */ _("div", { className: "smwb-kanban__column-header", children: [
+            /* @__PURE__ */ s("div", { className: "smwb-kanban__column-title", id: w, children: t }),
+            n != null ? /* @__PURE__ */ s("span", { className: "smwb-kanban__count", children: n }) : null
+          ] }),
+          N ? /* @__PURE__ */ s("ul", { className: "smwb-kanban__cards", role: "list", children: i }) : c(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__empty", children: d }) : null,
+          c(r) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__column-footer", children: r }) : null
+        ]
+      }
+    );
+  }
+), j = m.forwardRef(function({ className: b, style: l, title: t, href: n, titleLines: e = 3, children: d, "data-testid": r = "kanban-card", ...i }, o) {
+  return /* @__PURE__ */ _(
+    "li",
+    {
+      "data-testid": r,
+      ...i,
+      ref: o,
+      className: k("smwb-kanban__card", { "smwb-kanban__card_link": !!n }, b),
+      style: { ...l, "--smwb-kanban-title-lines": String(e) },
+      children: [
+        c(t) ? n ? /* @__PURE__ */ s("a", { className: "smwb-kanban__card-title", href: n, children: t }) : /* @__PURE__ */ s("div", { className: "smwb-kanban__card-title", children: t }) : null,
+        c(d) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__card-body", children: d }) : null
+      ]
+    }
+  );
+});
+export {
+  x as Kanban,
+  j as KanbanCard,
+  R as KanbanColumn
+};
+//# sourceMappingURL=kanban.js.map

package/dist/components/dataDisplay/kanban/kanban.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kanban.js","sources":["../../../../src/components/dataDisplay/kanban/kanban.tsx"],"sourcesContent":["import React, { CSSProperties, HTMLAttributes, PropsWithChildren, ReactNode, useId } from \"react\";\nimport cn from \"clsx\";\n\nexport interface KanbanProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n  /**\n   * The narrowest a column gets before the board scrolls sideways: a number of\n   * pixels or any CSS length. 15.5rem by default.\n   */\n  columnWidth?: number | string;\n  /** Test id of the root `<div>`; `kanban` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanColumnProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n  className?: string;\n  /** The column's name: text or a badge. It names the column for assistive technology. */\n  title: ReactNode;\n  /** How many cards the column holds (it may show fewer), beside the title. Nothing is shown for null. */\n  count?: number | string | null;\n  /** The column's colour, a stripe along its top: any CSS colour. */\n  accent?: string;\n  /** Shown in place of the cards when there are none, e.g. \"Empty\". */\n  empty?: ReactNode;\n  /** Under the cards, e.g. a link to the rest as a list. */\n  footer?: ReactNode;\n  /** Test id of the column's `<div>`; `kanban-column` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport interface KanbanCardProps extends Omit<HTMLAttributes<HTMLLIElement>, \"title\"> {\n  className?: string;\n  /** The card's title, clamped to `titleLines` lines. */\n  title?: ReactNode;\n  /** Makes the title a link, and the whole card open it. */\n  href?: string;\n  /** Lines the title is clamped to: 3 by default. */\n  titleLines?: number;\n  /** Test id of the card's `<li>`; `kanban-card` unless given. */\n  \"data-testid\"?: string;\n}\n\nconst cssLength = (value: number | string | undefined): string | undefined =>\n  typeof value === \"number\" ? `${value}px` : value;\n\nconst present = (value: ReactNode): boolean =>\n  value !== undefined && value !== null && value !== false && value !== true && value !== \"\";\n\n/** A board: KanbanColumn children side by side, scrolling sideways when they do not fit. */\nexport const Kanban = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanProps>>(function Kanban(\n  { className, style, columnWidth, children, \"data-testid\": dataTestId = \"kanban\", ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={\n        columnWidth === undefined\n          ? style\n          : ({ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties)\n      }\n    >\n      {children}\n    </div>\n  );\n});\n\n/** A column of the board: its title and count, then its KanbanCard children, or `empty` when it has none. */\nexport const KanbanColumn = React.forwardRef<HTMLDivElement, PropsWithChildren<KanbanColumnProps>>(\n  function KanbanColumn(\n    {\n      className,\n      style,\n      title,\n      count,\n      accent,\n      empty,\n      footer,\n      children,\n      \"data-testid\": dataTestId = \"kanban-column\",\n      ...rest\n    },\n    ref\n  ) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid={dataTestId}\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        style={accent === undefined ? style : ({ ...style, \"--smwb-kanban-accent\": accent } as CSSProperties)}\n      >\n        <div className=\"smwb-kanban__column-header\">\n          <div className=\"smwb-kanban__column-title\" id={titleId}>\n            {title}\n          </div>\n          {count !== undefined && count !== null ? <span className=\"smwb-kanban__count\">{count}</span> : null}\n        </div>\n        {hasCards ? (\n          <ul className=\"smwb-kanban__cards\" role=\"list\">\n            {children}\n          </ul>\n        ) : present(empty) ? (\n          <div className=\"smwb-kanban__empty\">{empty}</div>\n        ) : null}\n        {present(footer) ? <div className=\"smwb-kanban__column-footer\">{footer}</div> : null}\n      </div>\n    );\n  }\n);\n\n/**\n * A card on the board: its title (a link with `href`, and then the whole card\n * opens it) and the children under it.\n */\nexport const KanbanCard = React.forwardRef<HTMLLIElement, PropsWithChildren<KanbanCardProps>>(function KanbanCard(\n  { className, style, title, href, titleLines = 3, children, \"data-testid\": dataTestId = \"kanban-card\", ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid={dataTestId}\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban__card\", { \"smwb-kanban__card_link\": Boolean(href) }, className)}\n      style={{ ...style, \"--smwb-kanban-title-lines\": String(titleLines) } as CSSProperties}\n    >\n      {present(title) ? (\n        href ? (\n          <a className=\"smwb-kanban__card-title\" href={href}>\n            {title}\n          </a>\n        ) : (\n          <div className=\"smwb-kanban__card-title\">{title}</div>\n        )\n      ) : null}\n      {present(children) ? <div className=\"smwb-kanban__card-body\">{children}</div> : null}\n    </li>\n  );\n});\n\nexport default Kanban;\n"],"names":["cssLength","value","present","Kanban","React","className","style","columnWidth","children","dataTestId","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;;;AA4CA,MAAMA,IAAY,CAACC,MACjB,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAEvCC,IAAU,CAACD,MACQA,KAAU,QAAQA,MAAU,MAASA,MAAU,MAAQA,MAAU,IAG7EE,IAASC,EAAM,WAA2D,SACrF,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,UAAAC,GAAU,eAAeC,IAAa,UAAU,GAAGC,EAAA,GACpFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAaH;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeR,CAAS;AAAA,MACtC,OACEE,MAAgB,SACZD,IACC,EAAE,GAAGA,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAGrE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYM,IAAeV,EAAM;AAAA,EAChC,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAS;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAX;AAAA,IACA,eAAeC,IAAa;AAAA,IAC5B,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWlB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAe;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAad;AAAA,QACb,MAAK;AAAA,QACL,mBAAiBW;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBR,CAAS;AAAA,QAC9C,OAAOY,MAAW,SAAYX,IAAS,EAAE,GAAGA,GAAO,wBAAwBW,EAAA;AAAA,QAE3E,UAAA;AAAA,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,YAAA,gBAAAX,EAAC,OAAA,EAAI,WAAU,6BAA4B,IAAIQ,GAC5C,UAAAL,GACH;AAAA,YACwBC,KAAU,yBAAQ,QAAA,EAAK,WAAU,sBAAsB,UAAAA,EAAA,CAAM,IAAU;AAAA,UAAA,GACjG;AAAA,UACCM,IACC,gBAAAV,EAAC,MAAA,EAAG,WAAU,sBAAqB,MAAK,QACrC,UAAAJ,GACH,IACEN,EAAQgB,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHV,EAAQiB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAapB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAS,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAlB,GAAU,eAAeC,IAAa,eAAe,GAAGC,EAAA,GACzGC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAad;AAAA,MACZ,GAAGC;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKpB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOoB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAxB,EAAQa,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHV,EAAQM,CAAQ,IAAI,gBAAAI,EAAC,SAAI,WAAU,0BAA0B,UAAAJ,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}

package/dist/components/dataDisplay/lazyImage/lazyImage.js

@@ -1,44 +1,46 @@
-import { jsxs as z, jsx as u } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';/* empty css                                                             */
-import { forwardRef as _, useState as d, useRef as x, useEffect as F } from "react";
-import N from "clsx";
-import { useForkRef as j } from "../../../hooks/useForkRef.js";
-const A = _(function({ src: c, alt: t, fallback: a, lazy: e = !0, aspectRatio: m, className: g, onError: n, ...b }, p) {
-  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(p, f);
-  F(() => {
-    if (!e || i) return;
-    const s = f.current;
+import { jsxs as _, jsx as g } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { forwardRef as x, useState as p, useRef as F, useEffect as N } from "react";
+import j from "clsx";
+import { useForkRef as k } from "../../../hooks/useForkRef.js";
+const C = x(function({ src: a, alt: n, fallback: m, lazy: e = !0, aspectRatio: l, className: b, onError: i, ...t }, y) {
+  var d;
+  const [w, v] = p(!1), [r, f] = p(!e), u = F(null), I = k(y, u);
+  N(() => {
+    if (!e || r) return;
+    const s = u.current;
     if (!s) return;
     if (typeof IntersectionObserver == "undefined") {
-      l(!0);
+      f(!0);
       return;
     }
-    const o = new IntersectionObserver((R) => {
-      R.some((h) => h.isIntersecting) && (l(!0), o.disconnect());
+    const c = new IntersectionObserver((h) => {
+      h.some((z) => z.isIntersecting) && (f(!0), c.disconnect());
     });
-    return o.observe(s), () => o.disconnect();
-  }, [e, i]);
-  const r = y || !c, I = (s) => {
-    v(!0), n == null || n(s);
+    return c.observe(s), () => c.disconnect();
+  }, [e, r]);
+  const o = w || !a, R = (s) => {
+    v(!0), i == null || i(s);
   };
-  return /* @__PURE__ */ z(
+  return /* @__PURE__ */ _(
     "span",
     {
-      className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
-      style: m != null ? { aspectRatio: String(m) } : void 0,
+      className: j("smwb-lazy-image", b, { "smwb-lazy-image--empty": o }),
+      style: l != null ? { aspectRatio: String(l) } : void 0,
       children: [
-        r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
-        r ? null : /* @__PURE__ */ u(
+        o && m ? /* @__PURE__ */ g("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
+        o ? null : /* @__PURE__ */ g(
           "img",
           {
-            ...b,
-            ref: w,
+            ...t,
+            ref: I,
             className: "smwb-lazy-image__img",
-            src: i ? c : void 0,
-            alt: t != null ? t : "",
-            loading: e ? "lazy" : void 0,
-            decoding: "async",
-            onError: I
+            src: r ? a : void 0,
+            alt: n != null ? n : "",
+            loading: e ? "lazy" : t.loading,
+            decoding: (d = t.decoding) != null ? d : "async",
+            onError: R
           }
         )
       ]
@@ -46,7 +48,7 @@ const A = _(function({ src: c, alt: t, fallback: a, lazy: e = !0, aspectRatio: m
   );
 });
 export {
-  A as LazyImage,
-  A as default
+  C as LazyImage,
+  C as default
 };
 //# sourceMappingURL=lazyImage.js.map

package/dist/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          loading={lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx"],"mappings":";;;;;AAyBO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAWE,OAVF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YACZ,SAASE,IAAO,SAAS;AAAA,YACzB,UAAS;AAAA,YACT,SAASqB;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"lazyImage.js","sources":["../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\n\nexport interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: React.ReactNode;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + fallback dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs in an effect on the client.\n */\nexport const LazyImage = forwardRef<HTMLImageElement, LazyImageProps>(function LazyImage(\n  { src, alt, fallback, lazy = true, aspectRatio, className, onError, ...rest },\n  ref\n) {\n  const [failed, setFailed] = useState(false);\n  const [visible, setVisible] = useState(!lazy);\n  const imgRef = useRef<HTMLImageElement | null>(null);\n  const setRefs = useForkRef(ref, imgRef);\n\n  useEffect(() => {\n    if (!lazy || visible) return;\n    const el = imgRef.current;\n    if (!el) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(el);\n    return () => io.disconnect();\n  }, [lazy, visible]);\n\n  const showFallback = failed || !src;\n  const handleError = (event: React.SyntheticEvent<HTMLImageElement>): void => {\n    setFailed(true);\n    onError?.(event);\n  };\n\n  return (\n    <span\n      className={cn(\"smwb-lazy-image\", className, { \"smwb-lazy-image--empty\": showFallback })}\n      style={aspectRatio != null ? { aspectRatio: String(aspectRatio) } : undefined}\n    >\n      {showFallback && fallback ? <span className=\"smwb-lazy-image__fallback\">{fallback}</span> : null}\n      {!showFallback ? (\n        <img\n          {...rest}\n          ref={setRefs}\n          className=\"smwb-lazy-image__img\"\n          src={visible ? src : undefined}\n          alt={alt ?? \"\"}\n          // `lazy` wins over the caller's loading; without it, the caller's stays.\n          // decoding=\"async\" is a default: the caller's wins, and an explicit\n          // undefined keeps it.\n          loading={lazy ? \"lazy\" : rest.loading}\n          decoding={rest.decoding ?? \"async\"}\n          onError={handleError}\n        />\n      ) : null}\n    </span>\n  );\n});\n\nexport default LazyImage;\n"],"names":["LazyImage","forwardRef","src","alt","fallback","lazy","aspectRatio","className","onError","rest","ref","failed","setFailed","useState","visible","setVisible","imgRef","useRef","setRefs","useForkRef","useEffect","el","io","entries","entry","showFallback","handleError","event","jsxs","cn","jsx","_a"],"mappings":";;;;;;AA0BO,MAAMA,IAAYC,EAA6C,SACpE,EAAE,KAAAC,GAAK,KAAAC,GAAK,UAAAC,GAAU,MAAAC,IAAO,IAAM,aAAAC,GAAa,WAAAC,GAAW,SAAAC,GAAS,GAAGC,EAAA,GACvEC,GACA;;AACA,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,CAACC,GAASC,CAAU,IAAIF,EAAS,CAACR,CAAI,GACtCW,IAASC,EAAgC,IAAI,GAC7CC,IAAUC,EAAWT,GAAKM,CAAM;AAEtC,EAAAI,EAAU,MAAM;AACd,QAAI,CAACf,KAAQS,EAAS;AACtB,UAAMO,IAAKL,EAAO;AAClB,QAAI,CAACK,EAAI;AACT,QAAI,OAAO,wBAAyB,aAAa;AAC/C,MAAAN,EAAW,EAAI;AACf;AAAA,IACF;AACA,UAAMO,IAAK,IAAI,qBAAqB,CAACC,MAAY;AAC/C,MAAIA,EAAQ,KAAK,CAACC,MAAUA,EAAM,cAAc,MAC9CT,EAAW,EAAI,GACfO,EAAG,WAAA;AAAA,IAEP,CAAC;AACD,WAAAA,EAAG,QAAQD,CAAE,GACN,MAAMC,EAAG,WAAA;AAAA,EAClB,GAAG,CAACjB,GAAMS,CAAO,CAAC;AAElB,QAAMW,IAAed,KAAU,CAACT,GAC1BwB,IAAc,CAACC,MAAwD;AAC3E,IAAAf,EAAU,EAAI,GACdJ,KAAA,QAAAA,EAAUmB;AAAA,EACZ;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,mBAAmBtB,GAAW,EAAE,0BAA0BkB,GAAc;AAAA,MACtF,OAAOnB,KAAe,OAAO,EAAE,aAAa,OAAOA,CAAW,MAAM;AAAA,MAEnE,UAAA;AAAA,QAAAmB,KAAgBrB,IAAW,gBAAA0B,EAAC,QAAA,EAAK,WAAU,6BAA6B,aAAS,IAAU;AAAA,QAC1FL,IAcE,OAbF,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAGrB;AAAA,YACJ,KAAKS;AAAA,YACL,WAAU;AAAA,YACV,KAAKJ,IAAUZ,IAAM;AAAA,YACrB,KAAKC,KAAA,OAAAA,IAAO;AAAA,YAIZ,SAASE,IAAO,SAASI,EAAK;AAAA,YAC9B,WAAUsB,IAAAtB,EAAK,aAAL,OAAAsB,IAAiB;AAAA,YAC3B,SAASL;AAAA,UAAA;AAAA,QAAA;AAAA,MAET;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/components/dataDisplay/list/list.d.ts

@@ -5,6 +5,8 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     dense?: boolean;
     /** Section subheader rendered before the items. */
     subheader?: ReactNode;
+    /** Test id of the root `<ul>`; `list` unless given. */
+    "data-testid"?: string;
 }
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/list/list.js

@@ -1,25 +1,27 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/list/list.entry.css';/* empty css                                                   */
-import { forwardRef as a } from "react";
-import n from "clsx";
-const w = a(function({ className: t, dense: i, subheader: s, children: l, ...r }, e) {
-  return /* @__PURE__ */ m(
+import { jsxs as a, jsx as d } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/list/list.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
+import { forwardRef as n } from "react";
+import c from "clsx";
+const _ = n(function({ className: l, dense: r, subheader: t, children: e, "data-testid": m = "list", ...s }, o) {
+  var i;
+  return /* @__PURE__ */ a(
     "ul",
     {
-      ref: e,
-      "data-testid": "list",
-      role: "list",
-      className: n("smwb-list", { "smwb-list_dense": i }, t),
-      ...r,
+      ref: o,
+      "data-testid": m,
+      className: c("smwb-list", { "smwb-list_dense": r }, l),
+      ...s,
+      role: (i = s.role) != null ? i : "list",
       children: [
-        s ? /* @__PURE__ */ o("li", { className: "smwb-list__subheader", children: s }) : null,
-        l
+        t ? /* @__PURE__ */ d("li", { className: "smwb-list__subheader", children: t }) : null,
+        e
       ]
     }
   );
 });
 export {
-  w as List,
-  w as default
+  _ as List,
+  _ as default
 };
 //# sourceMappingURL=list.js.map

package/dist/components/dataDisplay/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid=\"list\"\n      role=\"list\"\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAYO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAC5CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAWE,EAAG,aAAa,EAAE,mBAAmBN,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGI;AAAA,MAEH,UAAA;AAAA,QAAAF,IAAY,gBAAAM,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"list.js","sources":["../../../../src/components/dataDisplay/list/list.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, PropsWithChildren, ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  className?: string;\n  /** Compact vertical rhythm. */\n  dense?: boolean;\n  /** Section subheader rendered before the items. */\n  subheader?: ReactNode;\n  /** Test id of the root `<ul>`; `list` unless given. */\n  \"data-testid\"?: string;\n}\n\nexport const List = forwardRef<HTMLUListElement, PropsWithChildren<ListProps>>(function List(\n  { className, dense, subheader, children, \"data-testid\": dataTestId = \"list\", ...props },\n  ref\n) {\n  return (\n    <ul\n      ref={ref}\n      data-testid={dataTestId}\n      className={cn(\"smwb-list\", { \"smwb-list_dense\": dense }, className)}\n      {...props}\n      // A default: the caller's own wins, and an explicit undefined keeps it.\n      role={props.role ?? \"list\"}\n    >\n      {subheader ? <li className=\"smwb-list__subheader\">{subheader}</li> : null}\n      {children}\n    </ul>\n  );\n});\n\nexport default List;\n"],"names":["List","forwardRef","className","dense","subheader","children","dataTestId","props","ref","jsxs","cn","_a","jsx"],"mappings":";;;;;AAeO,MAAMA,IAAOC,EAA2D,SAC7E,EAAE,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,UAAAC,GAAU,eAAeC,IAAa,QAAQ,GAAGC,EAAA,GAChFC,GACA;;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,eAAaF;AAAA,MACb,WAAWI,EAAG,aAAa,EAAE,mBAAmBP,EAAA,GAASD,CAAS;AAAA,MACjE,GAAGK;AAAA,MAEJ,OAAMI,IAAAJ,EAAM,SAAN,OAAAI,IAAc;AAAA,MAEnB,UAAA;AAAA,QAAAP,IAAY,gBAAAQ,EAAC,MAAA,EAAG,WAAU,wBAAwB,aAAU,IAAQ;AAAA,QACpEP;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/components/dataDisplay/meter/index.d.ts

@@ -0,0 +1,2 @@
+export { Meter, meterColor, DEFAULT_METER_THRESHOLDS, default } from "./meter";
+export type { MeterProps, MeterColor, MeterThreshold } from "./meter";

package/dist/components/dataDisplay/meter/meter.d.ts

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+export type MeterColor = "neutral" | "primary" | "info" | "success" | "warning" | "error";
+/** From this share of `max` (0–1) on, the meter takes `color`. */
+export interface MeterThreshold {
+    from: number;
+    color: MeterColor;
+}
+/** Info while under way, success when complete. */
+export declare const DEFAULT_METER_THRESHOLDS: readonly MeterThreshold[];
+export interface MeterProps extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+    className?: string;
+    /** How many are done (X of Y). */
+    value: number;
+    /** How many there are in all (X of Y). */
+    max: number;
+    /** What is measured — the accessible name, e.g. "Requirements accepted". */
+    label: string;
+    /** Visible text instead of "X of Y": markup, or a function of (value, max). */
+    text?: ReactNode | ((value: number, max: number) => ReactNode);
+    /** The word between the figures in the default text and in aria-valuetext. */
+    ofLabel?: string;
+    /** Colour by share of `max`: the last threshold the share reaches wins. */
+    thresholds?: readonly MeterThreshold[];
+    /** A fixed colour, instead of the thresholds. */
+    color?: MeterColor;
+    /** The bar only; the text stays available to assistive technology. */
+    hideText?: boolean;
+    /** Test id of the root `<div>`; `meter` unless given. */
+    "data-testid"?: string;
+}
+/** The colour for a share of the whole: the last threshold (by `from`) the share reaches. */
+export declare function meterColor(share: number, thresholds: readonly MeterThreshold[]): MeterColor;
+/** A share of a whole, "X of Y": a bar and the figures beside it, coloured by thresholds. */
+export declare const Meter: React.ForwardRefExoticComponent<MeterProps & React.RefAttributes<HTMLDivElement>>;
+export default Meter;

package/dist/components/dataDisplay/meter/meter.js

@@ -0,0 +1,63 @@
+import { jsxs as n, jsx as s, Fragment as w } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/meter/meter.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                     */
+import b from "react";
+import N from "clsx";
+const M = [
+  { from: 0, color: "info" },
+  { from: 1, color: "success" }
+];
+function $(i, m) {
+  let e = "neutral", r = -1 / 0;
+  for (const t of m)
+    i >= t.from && t.from >= r && (e = t.color, r = t.from);
+  return e;
+}
+const D = b.forwardRef(function({
+  className: m,
+  value: e,
+  max: r,
+  label: t,
+  text: a,
+  ofLabel: l = "of",
+  thresholds: d = M,
+  color: o,
+  hideText: c,
+  "data-testid": _ = "meter",
+  ...h
+}, p) {
+  const f = r > 0 ? Math.min(1, Math.max(0, e / r)) : 0, u = o != null ? o : $(f, d);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      ...h,
+      ref: p,
+      role: "meter",
+      "aria-label": t,
+      "aria-valuenow": e,
+      "aria-valuemin": 0,
+      "aria-valuemax": r,
+      "aria-valuetext": `${e} ${l} ${r}`,
+      "data-testid": _,
+      className: N("smwb-meter", `smwb-meter_color-${u}`, { "smwb-meter_bar-only": c }, m),
+      children: [
+        /* @__PURE__ */ s("span", { className: "smwb-meter__track", "aria-hidden": "true", children: /* @__PURE__ */ s("span", { className: "smwb-meter__fill", style: { width: `${f * 100}%` } }) }),
+        c ? null : /* @__PURE__ */ s("span", { className: "smwb-meter__text", "aria-hidden": "true", children: a === void 0 ? /* @__PURE__ */ n(w, { children: [
+          /* @__PURE__ */ s("b", { className: "smwb-meter__value", children: e }),
+          /* @__PURE__ */ n("span", { className: "smwb-meter__of", children: [
+            " ",
+            l,
+            " ",
+            r
+          ] })
+        ] }) : typeof a == "function" ? a(e, r) : a })
+      ]
+    }
+  );
+});
+export {
+  M as DEFAULT_METER_THRESHOLDS,
+  D as Meter,
+  $ as meterColor
+};
+//# sourceMappingURL=meter.js.map