@smwb/ui-react 2.6.2 → 2.7.0

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

@@ -0,0 +1,2 @@
+export { DescriptionList, DescriptionItem, default } from "./descriptionList";
+export type { DescriptionListProps, DescriptionItemProps, DescriptionListEntry, DescriptionListLayout, } from "./descriptionList";

package/dist/components/dataDisplay/expansionPanel/expansionPanel.js

@@ -1,5 +1,6 @@
 import { jsxs as t, jsx as n, Fragment as C } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/expansionPanel/expansionPanel.entry.css';/* empty css                                                                       */
+import '../../../assets/styles/less/components/expansionPanel/expansionPanel.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                       */
 import { forwardRef as T, useState as I, useEffect as R } from "react";
 import K from "clsx";
 import { createPortal as U } from "react-dom";
@@ -14,7 +15,7 @@ const G = {
   closeFullscreen: "Close fullscreen",
   placeholder: "Panel is open in fullscreen",
   placeholderClose: "Close"
-}, N = (o, i) => typeof o == "function" ? o(i) : o, H = (o, i) => typeof o == "function" ? o(i) : o, ne = T(function({
+}, N = (o, i) => typeof o == "function" ? o(i) : o, H = (o, i) => typeof o == "function" ? o(i) : o, le = T(function({
   className: i,
   header: m,
   mode: g,
@@ -168,7 +169,7 @@ const G = {
   ] });
 });
 export {
-  ne as ExpansionPanel,
-  ne as default
+  le as ExpansionPanel,
+  le as default
 };
 //# sourceMappingURL=expansionPanel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"expansionPanel.js","sources":["../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useState } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  /** Tooltip/aria for the control that expands a tile to a full grid row. */\n  expandRow?: string;\n  /** Tooltip/aria for the control that collapses a full row back to a tile. */\n  collapseRow?: string;\n  /** Tooltip/aria for the control that opens the panel fullscreen. */\n  expandFullscreen?: string;\n  /** Tooltip/aria for the control that closes fullscreen. */\n  closeFullscreen?: string;\n  /** Text shown in the original slot while the panel is fullscreen. */\n  placeholder?: string;\n  /** Label of the button in the placeholder that closes fullscreen. */\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = ReactNode | ((ctx: ExpansionPanelRenderContext) => ReactNode);\ntype ExpansionPanelControls = ReactNode | ((ctx: ExpansionPanelControlsContext) => ReactNode);\n\nexport interface ExpansionPanelProps {\n  className?: string;\n  /** Content of the panel header (left side of the control bar). */\n  header?: ReactNode;\n  /** Controlled layout mode. */\n  mode?: ExpansionMode;\n  /** Initial mode for the uncontrolled component. */\n  defaultMode?: ExpansionMode;\n  /** Fired with the next mode whenever it changes. */\n  onModeChange?: (mode: ExpansionMode) => void;\n  /** Render the panel as a plain card without row/fullscreen controls. */\n  disableExpand?: boolean;\n  /** Hide the built-in control bar (consumer drives `mode` itself). */\n  noControls?: boolean;\n  /** Replace the built-in row/fullscreen controls with a custom node or render prop. */\n  renderControls?: ExpansionPanelControls;\n  /** Close fullscreen when the backdrop is clicked. Default: true. */\n  closeOnOutsideClick?: boolean;\n  /** Close fullscreen when Escape is pressed. Default: true. */\n  closeOnEsc?: boolean;\n  /** Accessible labels / tooltips for the built-in controls. */\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nconst resolveChildren = (children: ExpansionPanelChildren, ctx: ExpansionPanelRenderContext): ReactNode =>\n  typeof children === \"function\" ? children(ctx) : children;\n\nconst resolveControls = (controls: ExpansionPanelControls, ctx: ExpansionPanelControlsContext): ReactNode =>\n  typeof controls === \"function\" ? controls(ctx) : controls;\n\nexport const ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(function ExpansionPanel(\n  {\n    className,\n    header,\n    mode: modeProp,\n    defaultMode = \"tile\",\n    onModeChange,\n    disableExpand = false,\n    noControls = false,\n    renderControls,\n    closeOnOutsideClick = true,\n    closeOnEsc = true,\n    labels,\n    children,\n  },\n  ref\n) {\n  const [mode, setMode] = useControllableState<ExpansionMode>({\n    value: modeProp,\n    defaultValue: defaultMode,\n    onChange: onModeChange,\n  });\n\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // `disableExpand` renders a plain card regardless of the requested mode,\n  // without mutating state — works in both controlled and uncontrolled use.\n  const effectiveMode: ExpansionMode = disableExpand ? \"tile\" : mode;\n  const isFullRow = effectiveMode === \"row\";\n  const isFullscreen = effectiveMode === \"fullscreen\";\n\n  const toggleRow = () => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = () => setMode(\"fullscreen\");\n  const closeFullscreen = () => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode,\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow,\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: l,\n  });\n\n  const defaultControls = (overlay: boolean) => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.closeFullscreen}\n          title={l.closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow}\n          aria-label={isFullRow ? l.collapseRow : l.expandRow}\n          title={isFullRow ? l.collapseRow : l.expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.expandFullscreen}\n          title={l.expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const renderControlBar = (overlay: boolean) => {\n    if (disableExpand || noControls) {\n      return null;\n    }\n\n    const content = renderControls\n      ? resolveControls(renderControls, controlsContext(overlay))\n      : defaultControls(overlay);\n\n    if (!content) {\n      return null;\n    }\n\n    return <div className=\"smwb-expansion-panel__controls\">{content}</div>;\n  };\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      return;\n    }\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen || !closeOnEsc) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isFullscreen, closeOnEsc, setMode]);\n\n  const card = (\n    <div\n      ref={ref}\n      className={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow }, className)}\n      data-testid=\"expansion-panel\"\n    >\n      <div className=\"smwb-expansion-panel__head\">\n        <div className=\"smwb-expansion-panel__header\">{header}</div>\n        {renderControlBar(false)}\n      </div>\n      <div className=\"smwb-expansion-panel__body\">\n        {resolveChildren(children, {\n          mode: effectiveMode,\n          isFullscreen: false,\n          isFullRow,\n        })}\n      </div>\n    </div>\n  );\n\n  if (!isFullscreen || !domRoot) {\n    return card;\n  }\n\n  return (\n    <>\n      <div className=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n        <span>{l.placeholder}</span>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          label={l.placeholderClose}\n          onClick={() => setMode(\"tile\")}\n        />\n      </div>\n      {createPortal(\n        <div\n          className=\"smwb-expansion-panel__overlay smwb-dark\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          data-testid=\"expansion-panel-overlay\"\n          onClick={\n            closeOnOutsideClick\n              ? (e) => {\n                  if (e.target === e.currentTarget) {\n                    setMode(\"tile\");\n                  }\n                }\n              : undefined\n          }\n        >\n          <div className=\"smwb-expansion-panel__dialog\">\n            <div className=\"smwb-expansion-panel__head\">\n              <div className=\"smwb-expansion-panel__header\">{header}</div>\n              {renderControlBar(true)}\n            </div>\n            <div className=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">\n              {resolveChildren(children, {\n                mode: effectiveMode,\n                isFullscreen: true,\n                isFullRow: false,\n              })}\n            </div>\n          </div>\n        </div>,\n        domRoot\n      )}\n    </>\n  );\n});\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","resolveChildren","children","ctx","resolveControls","controls","ExpansionPanel","forwardRef","className","header","modeProp","defaultMode","onModeChange","disableExpand","noControls","renderControls","closeOnOutsideClick","closeOnEsc","labels","ref","mode","setMode","useControllableState","domRoot","setDomRoot","useState","useSafeLayoutEffect","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","closeFullscreen","controlsContext","overlay","defaultControls","jsx","Button","Icon","jsxs","Fragment","renderControlBar","content","useEffect","prev","onKeyDown","event","card","cn","createPortal"],"mappings":"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"}
+{"version":3,"file":"expansionPanel.js","sources":["../../../../src/components/dataDisplay/expansionPanel/expansionPanel.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect, useState } from \"react\";\nimport cn from \"clsx\";\nimport { createPortal } from \"react-dom\";\nimport Button from \"../../inputs/button/button\";\nimport Icon from \"../../base/icon/icon\";\nimport { useControllableState } from \"../../../hooks/useControllableState\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type ExpansionMode = \"tile\" | \"row\" | \"fullscreen\";\n\nexport interface ExpansionPanelLabels {\n  /** Tooltip/aria for the control that expands a tile to a full grid row. */\n  expandRow?: string;\n  /** Tooltip/aria for the control that collapses a full row back to a tile. */\n  collapseRow?: string;\n  /** Tooltip/aria for the control that opens the panel fullscreen. */\n  expandFullscreen?: string;\n  /** Tooltip/aria for the control that closes fullscreen. */\n  closeFullscreen?: string;\n  /** Text shown in the original slot while the panel is fullscreen. */\n  placeholder?: string;\n  /** Label of the button in the placeholder that closes fullscreen. */\n  placeholderClose?: string;\n}\n\nexport interface ExpansionPanelRenderContext {\n  mode: ExpansionMode;\n  isFullscreen: boolean;\n  isFullRow: boolean;\n}\n\nexport interface ExpansionPanelControlsContext extends ExpansionPanelRenderContext {\n  setMode: (next: ExpansionMode | ((current: ExpansionMode) => ExpansionMode)) => void;\n  toggleRow: () => void;\n  openFullscreen: () => void;\n  closeFullscreen: () => void;\n  labels: Required<ExpansionPanelLabels>;\n}\n\ntype ExpansionPanelChildren = ReactNode | ((ctx: ExpansionPanelRenderContext) => ReactNode);\ntype ExpansionPanelControls = ReactNode | ((ctx: ExpansionPanelControlsContext) => ReactNode);\n\nexport interface ExpansionPanelProps {\n  className?: string;\n  /** Content of the panel header (left side of the control bar). */\n  header?: ReactNode;\n  /** Controlled layout mode. */\n  mode?: ExpansionMode;\n  /** Initial mode for the uncontrolled component. */\n  defaultMode?: ExpansionMode;\n  /** Fired with the next mode whenever it changes. */\n  onModeChange?: (mode: ExpansionMode) => void;\n  /** Render the panel as a plain card without row/fullscreen controls. */\n  disableExpand?: boolean;\n  /** Hide the built-in control bar (consumer drives `mode` itself). */\n  noControls?: boolean;\n  /** Replace the built-in row/fullscreen controls with a custom node or render prop. */\n  renderControls?: ExpansionPanelControls;\n  /** Close fullscreen when the backdrop is clicked. Default: true. */\n  closeOnOutsideClick?: boolean;\n  /** Close fullscreen when Escape is pressed. Default: true. */\n  closeOnEsc?: boolean;\n  /** Accessible labels / tooltips for the built-in controls. */\n  labels?: ExpansionPanelLabels;\n  children?: ExpansionPanelChildren;\n}\n\nconst DEFAULT_LABELS: Required<ExpansionPanelLabels> = {\n  expandRow: \"Expand to full row\",\n  collapseRow: \"Collapse to grid\",\n  expandFullscreen: \"Expand to fullscreen\",\n  closeFullscreen: \"Close fullscreen\",\n  placeholder: \"Panel is open in fullscreen\",\n  placeholderClose: \"Close\",\n};\n\nconst resolveChildren = (children: ExpansionPanelChildren, ctx: ExpansionPanelRenderContext): ReactNode =>\n  typeof children === \"function\" ? children(ctx) : children;\n\nconst resolveControls = (controls: ExpansionPanelControls, ctx: ExpansionPanelControlsContext): ReactNode =>\n  typeof controls === \"function\" ? controls(ctx) : controls;\n\nexport const ExpansionPanel = forwardRef<HTMLDivElement, ExpansionPanelProps>(function ExpansionPanel(\n  {\n    className,\n    header,\n    mode: modeProp,\n    defaultMode = \"tile\",\n    onModeChange,\n    disableExpand = false,\n    noControls = false,\n    renderControls,\n    closeOnOutsideClick = true,\n    closeOnEsc = true,\n    labels,\n    children,\n  },\n  ref\n) {\n  const [mode, setMode] = useControllableState<ExpansionMode>({\n    value: modeProp,\n    defaultValue: defaultMode,\n    onChange: onModeChange,\n  });\n\n  const l = { ...DEFAULT_LABELS, ...labels };\n  const [domRoot, setDomRoot] = useState<HTMLElement>();\n\n  useSafeLayoutEffect(() => {\n    setDomRoot(document.body);\n  }, []);\n\n  // `disableExpand` renders a plain card regardless of the requested mode,\n  // without mutating state — works in both controlled and uncontrolled use.\n  const effectiveMode: ExpansionMode = disableExpand ? \"tile\" : mode;\n  const isFullRow = effectiveMode === \"row\";\n  const isFullscreen = effectiveMode === \"fullscreen\";\n\n  const toggleRow = () => setMode((current) => (current === \"row\" ? \"tile\" : \"row\"));\n  const openFullscreen = () => setMode(\"fullscreen\");\n  const closeFullscreen = () => setMode(\"tile\");\n\n  const controlsContext = (overlay: boolean): ExpansionPanelControlsContext => ({\n    mode: effectiveMode,\n    isFullscreen: overlay,\n    isFullRow: overlay ? false : isFullRow,\n    setMode,\n    toggleRow,\n    openFullscreen,\n    closeFullscreen,\n    labels: l,\n  });\n\n  const defaultControls = (overlay: boolean) => {\n    if (overlay) {\n      return (\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.closeFullscreen}\n          title={l.closeFullscreen}\n          onClick={closeFullscreen}\n          data-testid=\"expansion-panel-close\"\n          icon={<Icon name=\"close\" size={18} />}\n        />\n      );\n    }\n\n    return (\n      <>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-pressed={isFullRow}\n          aria-label={isFullRow ? l.collapseRow : l.expandRow}\n          title={isFullRow ? l.collapseRow : l.expandRow}\n          onClick={toggleRow}\n          data-testid=\"expansion-panel-row\"\n          icon={<Icon name={isFullRow ? \"grid_view\" : \"table_rows\"} size={18} />}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          aria-label={l.expandFullscreen}\n          title={l.expandFullscreen}\n          onClick={openFullscreen}\n          data-testid=\"expansion-panel-fullscreen\"\n          icon={<Icon name=\"open_in_full\" size={18} />}\n        />\n      </>\n    );\n  };\n\n  const renderControlBar = (overlay: boolean) => {\n    if (disableExpand || noControls) {\n      return null;\n    }\n\n    const content = renderControls\n      ? resolveControls(renderControls, controlsContext(overlay))\n      : defaultControls(overlay);\n\n    if (!content) {\n      return null;\n    }\n\n    return <div className=\"smwb-expansion-panel__controls\">{content}</div>;\n  };\n\n  useEffect(() => {\n    if (!isFullscreen) {\n      return;\n    }\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [isFullscreen]);\n\n  useEffect(() => {\n    if (!isFullscreen || !closeOnEsc) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setMode(\"tile\");\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [isFullscreen, closeOnEsc, setMode]);\n\n  const card = (\n    <div\n      ref={ref}\n      className={cn(\"smwb-expansion-panel\", { \"smwb-expansion-panel_row\": isFullRow }, className)}\n      data-testid=\"expansion-panel\"\n    >\n      <div className=\"smwb-expansion-panel__head\">\n        <div className=\"smwb-expansion-panel__header\">{header}</div>\n        {renderControlBar(false)}\n      </div>\n      <div className=\"smwb-expansion-panel__body\">\n        {resolveChildren(children, {\n          mode: effectiveMode,\n          isFullscreen: false,\n          isFullRow,\n        })}\n      </div>\n    </div>\n  );\n\n  if (!isFullscreen || !domRoot) {\n    return card;\n  }\n\n  return (\n    <>\n      <div className=\"smwb-expansion-panel__placeholder\" data-testid=\"expansion-panel-placeholder\">\n        <span>{l.placeholder}</span>\n        <Button\n          type=\"button\"\n          variant=\"outlined\"\n          size=\"small\"\n          label={l.placeholderClose}\n          onClick={() => setMode(\"tile\")}\n        />\n      </div>\n      {createPortal(\n        <div\n          className=\"smwb-expansion-panel__overlay smwb-dark\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          data-testid=\"expansion-panel-overlay\"\n          onClick={\n            closeOnOutsideClick\n              ? (e) => {\n                  if (e.target === e.currentTarget) {\n                    setMode(\"tile\");\n                  }\n                }\n              : undefined\n          }\n        >\n          <div className=\"smwb-expansion-panel__dialog\">\n            <div className=\"smwb-expansion-panel__head\">\n              <div className=\"smwb-expansion-panel__header\">{header}</div>\n              {renderControlBar(true)}\n            </div>\n            <div className=\"smwb-expansion-panel__body smwb-expansion-panel__body_fullscreen\">\n              {resolveChildren(children, {\n                mode: effectiveMode,\n                isFullscreen: true,\n                isFullRow: false,\n              })}\n            </div>\n          </div>\n        </div>,\n        domRoot\n      )}\n    </>\n  );\n});\n\nexport default ExpansionPanel;\n"],"names":["DEFAULT_LABELS","resolveChildren","children","ctx","resolveControls","controls","ExpansionPanel","forwardRef","className","header","modeProp","defaultMode","onModeChange","disableExpand","noControls","renderControls","closeOnOutsideClick","closeOnEsc","labels","ref","mode","setMode","useControllableState","domRoot","setDomRoot","useState","useSafeLayoutEffect","effectiveMode","isFullRow","isFullscreen","toggleRow","current","openFullscreen","closeFullscreen","controlsContext","overlay","defaultControls","jsx","Button","Icon","jsxs","Fragment","renderControlBar","content","useEffect","prev","onKeyDown","event","card","cn","createPortal"],"mappings":"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"}

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

@@ -1,21 +1,22 @@
-import { jsx as a } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/imagesList/imagesList.entry.css';/* empty css                                                               */
+import { jsx as t } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/imagesList/imagesList.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                               */
 import { forwardRef as f } from "react";
-import s from "clsx";
-import { ImagesListContext as n } from "./imagesListContext.js";
-const y = f(function({ className: t, children: r, gap: l = 4, cols: i = 3, rowsHeight: m = 0, variant: e = "default", "aria-label": o, id: c }, d) {
-  return /* @__PURE__ */ a(n.Provider, { value: { rowsHeight: m, variant: e }, children: /* @__PURE__ */ a("div", { className: s("smwb-gallery", t), "data-testid": "images-list", ref: d, id: c, children: /* @__PURE__ */ a(
+import e from "clsx";
+import { ImagesListContext as p } from "./imagesListContext.js";
+const I = f(function({ className: r, children: s, gap: l = 4, cols: i = 3, rowsHeight: m = 0, variant: a = "default", "aria-label": o, id: c }, d) {
+  return /* @__PURE__ */ t(p.Provider, { value: { rowsHeight: m, variant: a }, children: /* @__PURE__ */ t("div", { className: e("smwb-gallery", r), "data-testid": "images-list", ref: d, id: c, children: /* @__PURE__ */ t(
     "ul",
     {
       "aria-label": o,
-      className: s("smwb-gallery__list", `smwb-${e}`),
+      className: e("smwb-gallery__list", `smwb-${a}`),
       style: { "--cols-count": i, "--gap": `${l}px` },
-      children: r
+      children: s
     }
   ) }) });
 });
 export {
-  y as ImagesList,
-  y as default
+  I as ImagesList,
+  I as default
 };
 //# sourceMappingURL=imagesList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"imagesList.js","sources":["../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\n\nexport interface ImagesListProps {\n  className?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  /** Accessible label for the image list. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ImagesList = forwardRef<HTMLDivElement, PropsWithChildren<ImagesListProps>>(function ImagesList(\n  { className, children, gap = 4, cols = 3, rowsHeight = 0, variant = \"default\", \"aria-label\": ariaLabel, id },\n  ref\n) {\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight, variant }}>\n      <div className={cn(\"smwb-gallery\", className)} data-testid=\"images-list\" ref={ref} id={id}>\n        <ul\n          aria-label={ariaLabel}\n          className={cn(\"smwb-gallery__list\", `smwb-${variant}`)}\n          style={{ \"--cols-count\": cols, \"--gap\": `${gap}px` } as CSSProperties}\n        >\n          {children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n});\n\nexport default ImagesList;\n"],"names":["ImagesList","forwardRef","className","children","gap","cols","rowsHeight","variant","ariaLabel","id","ref","ImagesListContext","cn","jsx"],"mappings":";;;;;AAgBO,MAAMA,IAAaC,EAA+D,SACvF,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,IAAM,GAAG,MAAAC,IAAO,GAAG,YAAAC,IAAa,GAAG,SAAAC,IAAU,WAAW,cAAcC,GAAW,IAAAC,EAAA,GACxGC,GACA;AACA,2BACGC,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAL,GAAY,SAAAC,EAAA,GAC/C,4BAAC,OAAA,EAAI,WAAWK,EAAG,gBAAgBV,CAAS,GAAG,eAAY,eAAc,KAAAQ,GAAU,IAAAD,GACjF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYL;AAAA,MACZ,WAAWI,EAAG,sBAAsB,QAAQL,CAAO,EAAE;AAAA,MACrD,OAAO,EAAE,gBAAgBF,GAAM,SAAS,GAAGD,CAAG,KAAA;AAAA,MAE7C,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;"}
+{"version":3,"file":"imagesList.js","sources":["../../../../src/components/dataDisplay/imagesList/imagesList.tsx"],"sourcesContent":["import React, { CSSProperties, forwardRef, PropsWithChildren } from \"react\";\nimport cn from \"clsx\";\nimport { ImagesListContext } from \"./imagesListContext\";\n\nexport interface ImagesListProps {\n  className?: string;\n  rowsHeight?: number;\n  cols: number;\n  variant?: \"woven\" | \"masonry\" | \"default\";\n  gap?: number;\n  /** Accessible label for the image list. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ImagesList = forwardRef<HTMLDivElement, PropsWithChildren<ImagesListProps>>(function ImagesList(\n  { className, children, gap = 4, cols = 3, rowsHeight = 0, variant = \"default\", \"aria-label\": ariaLabel, id },\n  ref\n) {\n  return (\n    <ImagesListContext.Provider value={{ rowsHeight, variant }}>\n      <div className={cn(\"smwb-gallery\", className)} data-testid=\"images-list\" ref={ref} id={id}>\n        <ul\n          aria-label={ariaLabel}\n          className={cn(\"smwb-gallery__list\", `smwb-${variant}`)}\n          style={{ \"--cols-count\": cols, \"--gap\": `${gap}px` } as CSSProperties}\n        >\n          {children}\n        </ul>\n      </div>\n    </ImagesListContext.Provider>\n  );\n});\n\nexport default ImagesList;\n"],"names":["ImagesList","forwardRef","className","children","gap","cols","rowsHeight","variant","ariaLabel","id","ref","ImagesListContext","cn","jsx"],"mappings":";;;;;;AAiBO,MAAMA,IAAaC,EAA+D,SACvF,EAAE,WAAAC,GAAW,UAAAC,GAAU,KAAAC,IAAM,GAAG,MAAAC,IAAO,GAAG,YAAAC,IAAa,GAAG,SAAAC,IAAU,WAAW,cAAcC,GAAW,IAAAC,EAAA,GACxGC,GACA;AACA,2BACGC,EAAkB,UAAlB,EAA2B,OAAO,EAAE,YAAAL,GAAY,SAAAC,EAAA,GAC/C,4BAAC,OAAA,EAAI,WAAWK,EAAG,gBAAgBV,CAAS,GAAG,eAAY,eAAc,KAAAQ,GAAU,IAAAD,GACjF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,cAAYL;AAAA,MACZ,WAAWI,EAAG,sBAAsB,QAAQL,CAAO,EAAE;AAAA,MACrD,OAAO,EAAE,gBAAgBF,GAAM,SAAS,GAAGD,CAAG,KAAA;AAAA,MAE7C,UAAAD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ,CAAC;"}

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,47 @@
+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;
+}
+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;
+}
+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;
+}
+/** 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,63 @@
+import { jsx as s, jsxs as o } 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 d, { useId as N } from "react";
+import _ from "clsx";
+const h = (a) => typeof a == "number" ? `${a}px` : a, i = (a) => a != null && a !== !1 && a !== !0 && a !== "", v = d.forwardRef(function({ className: e, style: r, columnWidth: l, children: n, ...c }, t) {
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      "data-testid": "kanban",
+      ...c,
+      ref: t,
+      className: _("smwb-kanban", e),
+      style: { ...r, "--smwb-kanban-column-width": h(l) },
+      children: n
+    }
+  );
+}), x = d.forwardRef(
+  function({ className: e, style: r, title: l, count: n, accent: c, empty: t, footer: b, children: m, ...w }, u) {
+    const k = `${N()}-title`, f = d.Children.toArray(m).length > 0;
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        "data-testid": "kanban-column",
+        role: "group",
+        "aria-labelledby": k,
+        ...w,
+        ref: u,
+        className: _("smwb-kanban__column", e),
+        style: { ...r, "--smwb-kanban-accent": c },
+        children: [
+          /* @__PURE__ */ o("div", { className: "smwb-kanban__column-header", children: [
+            /* @__PURE__ */ s("div", { className: "smwb-kanban__column-title", id: k, children: l }),
+            n != null ? /* @__PURE__ */ s("span", { className: "smwb-kanban__count", children: n }) : null
+          ] }),
+          f ? /* @__PURE__ */ s("ul", { className: "smwb-kanban__cards", role: "list", children: m }) : i(t) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__empty", children: t }) : null,
+          i(b) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__column-footer", children: b }) : null
+        ]
+      }
+    );
+  }
+), R = d.forwardRef(function({ className: e, style: r, title: l, href: n, titleLines: c = 3, children: t, ...b }, m) {
+  return /* @__PURE__ */ o(
+    "li",
+    {
+      "data-testid": "kanban-card",
+      ...b,
+      ref: m,
+      className: _("smwb-kanban__card", { "smwb-kanban__card_link": !!n }, e),
+      style: { ...r, "--smwb-kanban-title-lines": String(c) },
+      children: [
+        i(l) ? n ? /* @__PURE__ */ s("a", { className: "smwb-kanban__card-title", href: n, children: l }) : /* @__PURE__ */ s("div", { className: "smwb-kanban__card-title", children: l }) : null,
+        i(t) ? /* @__PURE__ */ s("div", { className: "smwb-kanban__card-body", children: t }) : null
+      ]
+    }
+  );
+});
+export {
+  v as Kanban,
+  R as KanbanCard,
+  x 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}\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}\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}\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, ...rest },\n  ref\n) {\n  return (\n    <div\n      data-testid=\"kanban\"\n      {...rest}\n      ref={ref}\n      className={cn(\"smwb-kanban\", className)}\n      style={{ ...style, \"--smwb-kanban-column-width\": cssLength(columnWidth) } as CSSProperties}\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({ className, style, title, count, accent, empty, footer, children, ...rest }, ref) {\n    const titleId = `${useId()}-title`;\n    const hasCards = React.Children.toArray(children).length > 0;\n    return (\n      <div\n        data-testid=\"kanban-column\"\n        role=\"group\"\n        aria-labelledby={titleId}\n        {...rest}\n        ref={ref}\n        className={cn(\"smwb-kanban__column\", className)}\n        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, ...rest },\n  ref\n) {\n  return (\n    <li\n      data-testid=\"kanban-card\"\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","rest","ref","jsx","cn","KanbanColumn","title","count","accent","empty","footer","titleId","useId","hasCards","jsxs","KanbanCard","href","titleLines"],"mappings":";;;;;AAsCA,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,GAAGC,EAAA,GAC9CC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,eAAeP,CAAS;AAAA,MACtC,OAAO,EAAE,GAAGC,GAAO,8BAA8BN,EAAUO,CAAW,EAAA;AAAA,MAErE,UAAAC;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC,GAGYK,IAAeT,EAAM;AAAA,EAChC,SAAsB,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,QAAAC,GAAQ,UAAAV,GAAU,GAAGC,EAAA,GAAQC,GAAK;AACvG,UAAMS,IAAU,GAAGC,EAAA,CAAO,UACpBC,IAAWjB,EAAM,SAAS,QAAQI,CAAQ,EAAE,SAAS;AAC3D,WACE,gBAAAc;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAY;AAAA,QACZ,MAAK;AAAA,QACL,mBAAiBH;AAAA,QAChB,GAAGV;AAAA,QACJ,KAAAC;AAAA,QACA,WAAWE,EAAG,uBAAuBP,CAAS;AAAA,QAC9C,OAAO,EAAE,GAAGC,GAAO,wBAAwBU,EAAA;AAAA,QAE3C,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,UAAAH,GACH,IACEN,EAAQe,CAAK,IACf,gBAAAN,EAAC,SAAI,WAAU,sBAAsB,aAAM,IACzC;AAAA,UACHT,EAAQgB,CAAM,IAAI,gBAAAP,EAAC,SAAI,WAAU,8BAA8B,aAAO,IAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGtF;AACF,GAMaY,IAAanB,EAAM,WAA8D,SAC5F,EAAE,WAAAC,GAAW,OAAAC,GAAO,OAAAQ,GAAO,MAAAU,GAAM,YAAAC,IAAa,GAAG,UAAAjB,GAAU,GAAGC,EAAA,GAC9DC,GACA;AACA,SACE,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACX,GAAGb;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAG,qBAAqB,EAAE,0BAA0B,EAAQY,EAAI,GAAKnB,CAAS;AAAA,MACzF,OAAO,EAAE,GAAGC,GAAO,6BAA6B,OAAOmB,CAAU,EAAA;AAAA,MAEhE,UAAA;AAAA,QAAAvB,EAAQY,CAAK,IACZU,IACE,gBAAAb,EAAC,OAAE,WAAU,2BAA0B,MAAAa,GACpC,UAAAV,GACH,IAEA,gBAAAH,EAAC,OAAA,EAAI,WAAU,2BAA2B,aAAM,IAEhD;AAAA,QACHT,EAAQM,CAAQ,IAAI,gBAAAG,EAAC,SAAI,WAAU,0BAA0B,UAAAH,GAAS,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtF,CAAC;"}

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

@@ -1,10 +1,11 @@
 import { jsxs as z, jsx as u } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';/* empty css                                                             */
+import '../../../assets/styles/less/components/lazyImage/lazyImage.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty 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);
+const B = _(function({ src: c, alt: t, fallback: m, lazy: e = !0, aspectRatio: a, className: g, onError: n, ...p }, b) {
+  const [y, v] = d(!1), [i, l] = d(!e), f = x(null), w = j(b, f);
   F(() => {
     if (!e || i) return;
     const s = f.current;
@@ -25,13 +26,13 @@ const A = _(function({ src: c, alt: t, fallback: a, lazy: e = !0, aspectRatio: m
     "span",
     {
       className: N("smwb-lazy-image", g, { "smwb-lazy-image--empty": r }),
-      style: m != null ? { aspectRatio: String(m) } : void 0,
+      style: a != null ? { aspectRatio: String(a) } : void 0,
       children: [
-        r && a ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: a }) : null,
+        r && m ? /* @__PURE__ */ u("span", { className: "smwb-lazy-image__fallback", children: m }) : null,
         r ? null : /* @__PURE__ */ u(
           "img",
           {
-            ...b,
+            ...p,
             ref: w,
             className: "smwb-lazy-image__img",
             src: i ? c : void 0,
@@ -46,7 +47,7 @@ const A = _(function({ src: c, alt: t, fallback: a, lazy: e = !0, aspectRatio: m
   );
 });
 export {
-  A as LazyImage,
-  A as default
+  B as LazyImage,
+  B 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          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":";;;;;;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,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;"}

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

@@ -1,25 +1,26 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/list/list.entry.css';/* empty css                                                   */
+import { jsxs as o, jsx as e } 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 a } from "react";
 import n from "clsx";
-const w = a(function({ className: t, dense: i, subheader: s, children: l, ...r }, e) {
-  return /* @__PURE__ */ m(
+const b = a(function({ className: t, dense: i, subheader: s, children: r, ...l }, m) {
+  return /* @__PURE__ */ o(
     "ul",
     {
-      ref: e,
+      ref: m,
       "data-testid": "list",
       role: "list",
       className: n("smwb-list", { "smwb-list_dense": i }, t),
-      ...r,
+      ...l,
       children: [
-        s ? /* @__PURE__ */ o("li", { className: "smwb-list__subheader", children: s }) : null,
-        l
+        s ? /* @__PURE__ */ e("li", { className: "smwb-list__subheader", children: s }) : null,
+        r
       ]
     }
   );
 });
 export {
-  w as List,
-  w as default
+  b as List,
+  b 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}\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":";;;;;AAaO,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;"}

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";