@smwb/ui-react 2.6.2 → 2.7.0

package/dist/chart.js

@@ -0,0 +1,8 @@
+import { Chart as t } from "./components/dataDisplay/chart/chart.js";
+import { chartTheme as h, readChartPalette as o } from "./components/dataDisplay/chart/chartTheme.js";
+export {
+  t as Chart,
+  h as chartTheme,
+  o as readChartPalette
+};
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/base/icon/icon.js

@@ -1,5 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
+import '../../../assets/styles/less/components/icon/icon.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                   */
 import { forwardRef as L, useSyncExternalStore as C } from "react";
 import N from "clsx";
 import { getIcon as O } from "../../../icons/registry.js";
@@ -12,12 +13,12 @@ function T(r) {
     `[smwb] Icon "${r}" is not registered. Register it (import { ${r} } from "@smwb/ui-react/icons") or use source="auto" to fall back to Material Symbols.`
   ));
 }
-const W = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
+const q = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20, grade: I = 100, name: o, color: e = "inherit", title: i, source: _, ...u }, x) {
   var w, b;
-  const d = B(_), g = typeof o == "string" ? o : null, m = () => {
+  const m = B(_), d = typeof o == "string" ? o : null, g = () => {
     var h;
-    return g === null ? null : (h = O(g)) != null ? h : null;
-  }, M = C(j, m, m), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = d === "google" ? "google" : s ? "smwb" : d === "smwb" ? "missing" : "google";
+    return d === null ? null : (h = O(d)) != null ? h : null;
+  }, M = C(j, g, g), s = typeof o == "object" ? o : M, p = typeof o == "string" ? o : o.name, t = m === "google" ? "google" : s ? "smwb" : m === "smwb" ? "missing" : "google";
   t === "missing" && T(p);
   const f = i === void 0, $ = e && E.includes(e) ? `smwb-icon_color-${e}` : null, c = typeof n == "number" ? `${n}px` : n, k = Math.round(Math.min(3, Math.max(1, a / 200)) * 100) / 100;
   return /* @__PURE__ */ l(
@@ -55,7 +56,7 @@ const W = L(function({ className: S, weight: a = 400, fill: v = 0, size: n = 20,
   );
 });
 export {
-  W as Icon,
-  W as default
+  q as Icon,
+  q as default
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;AAWA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useSyncExternalStore } from \"react\";\nimport cn from \"clsx\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { subscribeIcons } from \"../../../icons/store\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { useIconSource } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS = [\"primary\", \"secondary\", \"error\", \"success\", \"warning\", \"info\", \"disabled\"];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  // eslint-disable-next-line no-console -- a missing icon is silent otherwise\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-react/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-react/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  className?: string;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color.\n   * Any string is accepted for backward compatibility, but only known\n   * {@link IconColor} tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as\n   * `role=\"img\"`; otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n}\n\nexport const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon(\n  { className, weight = 400, fill = 0, size = 20, grade = 100, name, color = \"inherit\", title, source, ...props },\n  ref\n) {\n  const resolvedSource = useIconSource(source);\n  const lookup = typeof name === \"string\" ? name : null;\n  // Subscribing keeps late registrations (lazy chunks, Storybook HMR) from\n  // leaving a mounted icon blank. getIcon returns the same object for the same\n  // registration, so the snapshot is stable.\n  const getSnapshot = () => (lookup === null ? null : (getIcon(lookup) ?? null));\n  const registered = useSyncExternalStore(subscribeIcons, getSnapshot, getSnapshot);\n  const definition = typeof name === \"object\" ? name : registered;\n  const glyph = typeof name === \"string\" ? name : name.name;\n\n  const mode =\n    resolvedSource === \"google\" ? \"google\" : definition ? \"smwb\" : resolvedSource === \"smwb\" ? \"missing\" : \"google\";\n  if (mode === \"missing\") warnMissing(glyph);\n\n  const decorative = title === undefined;\n  const colorClass = color && COLOR_TOKENS.includes(color) ? `smwb-icon_color-${color}` : null;\n  const cssSize = typeof size === \"number\" ? `${size}px` : size;\n  const strokeWidth = Math.round(Math.min(3, Math.max(1, weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...props}\n      ref={ref}\n      data-testid=\"icon\"\n      data-icon-source={mode}\n      role={decorative ? undefined : \"img\"}\n      aria-hidden={decorative ? true : undefined}\n      aria-label={title}\n      title={title}\n      style={{\n        ...props.style,\n        ...(mode === \"google\"\n          ? { fontVariationSettings: `'FILL' ${fill}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' 48` }\n          : null),\n      }}\n      className={cn(\"smwb-icon__wrapper\", colorClass, className)}\n    >\n      {mode === \"google\" ? (\n        <span className=\"material-symbols-outlined\" style={{ fontSize: cssSize }}>\n          {glyph}\n        </span>\n      ) : (\n        <svg\n          className=\"smwb-icon__svg\"\n          viewBox={definition?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize, height: cssSize }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n          aria-hidden=\"true\"\n          dangerouslySetInnerHTML={{ __html: definition?.body ?? \"\" }}\n        />\n      )}\n    </span>\n  );\n});\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","warnMissing","name","getIconConfig","Icon","forwardRef","className","weight","fill","size","grade","color","title","source","props","ref","resolvedSource","useIconSource","lookup","getSnapshot","_a","getIcon","registered","useSyncExternalStore","subscribeIcons","definition","glyph","mode","decorative","colorClass","cssSize","strokeWidth","jsx","cn","_b"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAe,CAAC,WAAW,aAAa,SAAS,WAAW,WAAW,QAAQ,UAAU,GAEzFC,wBAAa,IAAA;AAEnB,SAASC,EAAYC,GAAoB;AACvC,EAAI,CAACC,EAAA,EAAgB,iBAAiBH,EAAO,IAAIE,CAAI,MACrDF,EAAO,IAAIE,CAAI,GAEf,QAAQ;AAAA,IACN,gBAAgBA,CAAI,8CAA8CA,CAAI;AAAA,EAAA;AAG1E;AA4CO,MAAME,IAAOC,EAAuC,SACzD,EAAE,WAAAC,GAAW,QAAAC,IAAS,KAAK,MAAAC,IAAO,GAAG,MAAAC,IAAO,IAAI,OAAAC,IAAQ,KAAK,MAAAR,GAAM,OAAAS,IAAQ,WAAW,OAAAC,GAAO,QAAAC,GAAQ,GAAGC,EAAA,GACxGC,GACA;;AACA,QAAMC,IAAiBC,EAAcJ,CAAM,GACrCK,IAAS,OAAOhB,KAAS,WAAWA,IAAO,MAI3CiB,IAAc,MAAA;;AAAO,WAAAD,MAAW,OAAO,QAAQE,IAAAC,EAAQH,CAAM,MAAd,OAAAE,IAAmB;AAAA,KAClEE,IAAaC,EAAqBC,GAAgBL,GAAaA,CAAW,GAC1EM,IAAa,OAAOvB,KAAS,WAAWA,IAAOoB,GAC/CI,IAAQ,OAAOxB,KAAS,WAAWA,IAAOA,EAAK,MAE/CyB,IACJX,MAAmB,WAAW,WAAWS,IAAa,SAAST,MAAmB,SAAS,YAAY;AACzG,EAAIW,MAAS,aAAW1B,EAAYyB,CAAK;AAEzC,QAAME,IAAahB,MAAU,QACvBiB,IAAalB,KAASZ,EAAa,SAASY,CAAK,IAAI,mBAAmBA,CAAK,KAAK,MAClFmB,IAAU,OAAOrB,KAAS,WAAW,GAAGA,CAAI,OAAOA,GACnDsB,IAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAGxB,IAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAE/E,SACE,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGlB;AAAA,MACJ,KAAAC;AAAA,MACA,eAAY;AAAA,MACZ,oBAAkBY;AAAA,MAClB,MAAMC,IAAa,SAAY;AAAA,MAC/B,eAAaA,IAAa,KAAO;AAAA,MACjC,cAAYhB;AAAA,MACZ,OAAAA;AAAA,MACA,OAAO;AAAA,QACL,GAAGE,EAAM;AAAA,QACT,GAAIa,MAAS,WACT,EAAE,uBAAuB,UAAUnB,CAAI,YAAYD,CAAM,YAAYG,CAAK,cAAA,IAC1E;AAAA,MAAA;AAAA,MAEN,WAAWuB,EAAG,sBAAsBJ,GAAYvB,CAAS;AAAA,MAExD,UAAAqB,MAAS,WACR,gBAAAK,EAAC,QAAA,EAAK,WAAU,6BAA4B,OAAO,EAAE,UAAUF,EAAA,GAC5D,UAAAJ,EAAA,CACH,IAEA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAASZ,IAAAK,KAAA,gBAAAA,EAAY,YAAZ,OAAAL,IAAuB;AAAA,UAChC,OAAO,EAAE,OAAOU,GAAS,QAAQA,EAAA;AAAA,UACjC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,aAAAC;AAAA,UACA,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,eAAY;AAAA,UACZ,yBAAyB,EAAE,SAAQG,IAAAT,KAAA,gBAAAA,EAAY,SAAZ,OAAAS,IAAoB,GAAA;AAAA,QAAG;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAIR,CAAC;"}

package/dist/components/base/ripple/ripple.js

@@ -1,16 +1,17 @@
 import { jsx as R } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/ripple/ripple.entry.css';/* empty css                                                       */
+import '../../../assets/styles/less/components/ripple/ripple.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
 import u, { forwardRef as N } from "react";
 import b from "clsx";
-const H = N(function({ actionRef: x, className: l, classes: i, center: g, style: e, duration: f = 600, color: r, ...a }, C) {
+const I = N(function({ actionRef: x, className: l, classes: i, center: g, style: e, duration: f = 600, color: r, ...a }, C) {
   const [n, c] = u.useState([]), w = u.useRef(0);
   return u.useImperativeHandle(
     x,
     () => ({
-      onRipple(d) {
-        const t = d.currentTarget.getBoundingClientRect(), h = Math.max(t.width, t.height), p = h / 2;
-        let o, m;
-        g ? (o = t.width > t.height ? 0 : t.width / 2 - p, m = t.height > t.width ? 0 : t.height / 2 - p) : (o = d.clientX - t.left - p, m = d.clientY - t.top - p), c([
+      onRipple(o) {
+        const t = o.currentTarget.getBoundingClientRect(), d = Math.max(t.width, t.height), p = d / 2;
+        let h, m;
+        g ? (h = t.width > t.height ? 0 : t.width / 2 - p, m = t.height > t.width ? 0 : t.height / 2 - p) : (h = o.clientX - t.left - p, m = o.clientY - t.top - p), c([
           ...n,
           /* @__PURE__ */ R(
             "span",
@@ -18,10 +19,10 @@ const H = N(function({ actionRef: x, className: l, classes: i, center: g, style:
               className: b("smwb-ripple__child", i == null ? void 0 : i.child),
               style: {
                 ...e,
-                left: o,
+                left: h,
                 top: m,
-                width: h,
-                height: h,
+                width: d,
+                height: d,
                 backgroundColor: r != null ? r : e == null ? void 0 : e.backgroundColor
               },
               ...a
@@ -37,6 +38,6 @@ const H = N(function({ actionRef: x, className: l, classes: i, center: g, style:
   ), /* @__PURE__ */ R("span", { ref: C, className: b("smwb-ripple", l, i == null ? void 0 : i.ripple), "data-testid": "ripple", "aria-hidden": "true", children: n });
 });
 export {
-  H as Ripple
+  I as Ripple
 };
 //# sourceMappingURL=ripple.js.map

package/dist/components/base/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, style, duration = 600, color, ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              ...style,\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color ?? style?.backgroundColor,\n            }}\n            {...rest}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        setTimeout(() => {\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n      },\n    }),\n    [rest, center, ripples, classes?.child, style, duration, color]\n  );\n\n  return (\n    <span ref={ref} className={cn(\"smwb-ripple\", className, classes?.ripple)} data-testid=\"ripple\" aria-hidden=\"true\">\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","style","duration","color","rest","ref","ripples","setRipples","React","nextKey","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;AA2BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,IAAW,KAAK,OAAAC,GAAO,GAAGC,EAAA,GAC1EC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC;AAEtC,SAAAA,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASa,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIf,KACFc,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCN,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBlB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,GAAGE;AAAA,gBACH,MAAMa;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBT,KAAA,OAAAA,IAASF,KAAA,gBAAAA,EAAO;AAAA,cAAA;AAAA,cAElC,GAAGG;AAAA,YAAA;AAAA,YAVCK,EAAQ;AAAA,UAAA;AAAA,QAWf,CACD,GAEDA,EAAQ,WAAW,GAEnB,WAAW,MAAM;AACf,UAAAF,EAAW,CAACW,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGhB,CAAQ;AAAA,MACb;AAAA,IAAA;AAAA,IAEF,CAACE,GAAMJ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAOC,GAAUC,CAAK;AAAA,EAAA,GAI9D,gBAAAa,EAAC,QAAA,EAAK,KAAAX,GAAU,WAAWY,EAAG,eAAenB,GAAWC,KAAA,gBAAAA,EAAS,MAAM,GAAG,eAAY,UAAS,eAAY,QACxG,UAAAO,GACH;AAEJ,CAAC;"}
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport cn from \"clsx\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: React.MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends React.HTMLAttributes<HTMLSpanElement> {\n  actionRef: React.Ref<RippleActionsRef>;\n  classes?: RippleClasses;\n  center?: boolean;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string;\n}\n\n/**\n * ⚠️ Для правильной работы этого эффекта, установите у компонента родителя CSS: **position: relative;**\n */\n\nexport const Ripple = forwardRef<HTMLSpanElement, RippleProps>(function Ripple(\n  { actionRef, className, classes, center, style, duration = 600, color, ...rest },\n  ref\n) {\n  const [ripples, setRipples] = React.useState<React.ReactNode[]>([]);\n  const nextKey = React.useRef<number>(0);\n\n  React.useImperativeHandle(\n    actionRef,\n    () => ({\n      onRipple(event: React.MouseEvent) {\n        const target = event.currentTarget as HTMLElement;\n        const rect = target.getBoundingClientRect();\n        const diameter = Math.max(rect.width, rect.height);\n        const radius = diameter / 2;\n\n        let coordX;\n        let coordY;\n\n        if (center) {\n          coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n          coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n        } else {\n          coordX = event.clientX - rect.left - radius;\n          coordY = event.clientY - rect.top - radius;\n        }\n\n        setRipples([\n          ...ripples,\n          <span\n            key={nextKey.current}\n            className={cn(\"smwb-ripple__child\", classes?.child)}\n            style={{\n              ...style,\n              left: coordX,\n              top: coordY,\n              width: diameter,\n              height: diameter,\n              backgroundColor: color ?? style?.backgroundColor,\n            }}\n            {...rest}\n          />,\n        ]);\n\n        nextKey.current += 1;\n\n        setTimeout(() => {\n          setRipples((prevRipples) => prevRipples.slice(1));\n        }, duration);\n      },\n    }),\n    [rest, center, ripples, classes?.child, style, duration, color]\n  );\n\n  return (\n    <span ref={ref} className={cn(\"smwb-ripple\", className, classes?.ripple)} data-testid=\"ripple\" aria-hidden=\"true\">\n      {ripples}\n    </span>\n  );\n});\n"],"names":["Ripple","forwardRef","actionRef","className","classes","center","style","duration","color","rest","ref","ripples","setRipples","React","nextKey","event","rect","diameter","radius","coordX","coordY","jsx","cn","prevRipples"],"mappings":";;;;;AA4BO,MAAMA,IAASC,EAAyC,SAC7D,EAAE,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,IAAW,KAAK,OAAAC,GAAO,GAAGC,EAAA,GAC1EC,GACA;AACA,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAM,SAA4B,CAAA,CAAE,GAC5DC,IAAUD,EAAM,OAAe,CAAC;AAEtC,SAAAA,EAAM;AAAA,IACJX;AAAA,IACA,OAAO;AAAA,MACL,SAASa,GAAyB;AAEhC,cAAMC,IADSD,EAAM,cACD,sBAAA,GACdE,IAAW,KAAK,IAAID,EAAK,OAAOA,EAAK,MAAM,GAC3CE,IAASD,IAAW;AAE1B,YAAIE,GACAC;AAEJ,QAAIf,KACFc,IAASH,EAAK,QAAQA,EAAK,SAAS,IAAIA,EAAK,QAAQ,IAAIE,GACzDE,IAASJ,EAAK,SAASA,EAAK,QAAQ,IAAIA,EAAK,SAAS,IAAIE,MAE1DC,IAASJ,EAAM,UAAUC,EAAK,OAAOE,GACrCE,IAASL,EAAM,UAAUC,EAAK,MAAME,IAGtCN,EAAW;AAAA,UACT,GAAGD;AAAA,UACH,gBAAAU;AAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAWC,EAAG,sBAAsBlB,KAAA,gBAAAA,EAAS,KAAK;AAAA,cAClD,OAAO;AAAA,gBACL,GAAGE;AAAA,gBACH,MAAMa;AAAA,gBACN,KAAKC;AAAA,gBACL,OAAOH;AAAA,gBACP,QAAQA;AAAA,gBACR,iBAAiBT,KAAA,OAAAA,IAASF,KAAA,gBAAAA,EAAO;AAAA,cAAA;AAAA,cAElC,GAAGG;AAAA,YAAA;AAAA,YAVCK,EAAQ;AAAA,UAAA;AAAA,QAWf,CACD,GAEDA,EAAQ,WAAW,GAEnB,WAAW,MAAM;AACf,UAAAF,EAAW,CAACW,MAAgBA,EAAY,MAAM,CAAC,CAAC;AAAA,QAClD,GAAGhB,CAAQ;AAAA,MACb;AAAA,IAAA;AAAA,IAEF,CAACE,GAAMJ,GAAQM,GAASP,KAAA,gBAAAA,EAAS,OAAOE,GAAOC,GAAUC,CAAK;AAAA,EAAA,GAI9D,gBAAAa,EAAC,QAAA,EAAK,KAAAX,GAAU,WAAWY,EAAG,eAAenB,GAAWC,KAAA,gBAAAA,EAAS,MAAM,GAAG,eAAY,UAAS,eAAY,QACxG,UAAAO,GACH;AAEJ,CAAC;"}

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

@@ -1,7 +1,18 @@
 import React, { ReactNode } from "react";
+/**
+ * `filled` — the header is an app-bar strip on a raised panel (the original look).
+ * `outlined` — a bordered card with a flat header: for feeds of records.
+ * `plain` — no frame, a divider under each panel: for FAQ-style lists.
+ * The flat variants stretch to the container and wrap long titles.
+ */
+export type AccordionVariant = "filled" | "outlined" | "plain";
 export interface AccordionProps {
     className?: string;
-    title?: string;
+    /** Header text or markup (a date, an author, a badge…). */
+    title?: ReactNode;
+    /** Secondary line under the title. */
+    subtitle?: ReactNode;
+    variant?: AccordionVariant;
     isOpenByDefault?: boolean;
     /** Controlled open state. When set, the component is controlled. */
     open?: boolean;
@@ -12,7 +23,13 @@ export interface AccordionProps {
     id?: string;
     children?: React.ReactNode;
     startAdornment?: (isOpen: boolean) => React.ReactNode;
+    /** Rendered after the title, before the expand icon. */
+    endAdornment?: (isOpen: boolean) => React.ReactNode;
     noIcon?: boolean;
+    /** Create the content on first open instead of up front. */
+    lazy?: boolean;
+    /** Remove the content once the panel has collapsed (created again on open). */
+    unmountOnExit?: boolean;
     onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     /** Fired with the next open state on toggle. */
     onChange?: (open: boolean) => void;

package/dist/components/dataDisplay/accordion/accordion.js

@@ -1,62 +1,85 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/accordion/accordion.entry.css';/* empty css                                                             */
-import { forwardRef as z, useState as H } from "react";
-import b from "clsx";
-import R from "../../base/animateHeight/animateHeight.js";
-import { Icon as S } from "../../base/icon/icon.js";
-import { useId as q } from "../../../hooks/useId.js";
-const M = z(function({
-  className: u,
-  title: w,
-  isOpenByDefault: I = !1,
-  open: n,
-  disabled: t,
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/accordion/accordion.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
+import { forwardRef as J, useState as y } from "react";
+import O from "clsx";
+import K from "../../base/animateHeight/animateHeight.js";
+import { Icon as L } from "../../base/icon/icon.js";
+import { useId as M } from "../../../hooks/useId.js";
+const C = J(function({
+  className: $,
+  title: j,
+  subtitle: l,
+  variant: B = "filled",
+  isOpenByDefault: H = !1,
+  open: m,
+  disabled: s,
   icon: a,
-  id: x,
-  children: e,
-  startAdornment: s,
-  noIcon: N,
-  onToggleClick: c,
+  id: z,
+  children: c,
+  startAdornment: n,
+  endAdornment: p,
+  noIcon: P,
+  lazy: R,
+  unmountOnExit: _,
+  onToggleClick: r,
   onChange: i
-}, h) {
-  const d = n !== void 0, [v, O] = H(I), o = d ? !!n : v, m = q(x), p = `${m}-content`, f = `${m}-header`, y = b("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), j = ($) => {
-    if (t)
+}, S) {
+  const f = m !== void 0, [q, D] = y(H), o = f ? !!m : q, b = M(z), w = `${b}-content`, u = `${b}-header`, h = !!(R || _), [N, I] = y(o);
+  o && !N && I(!0);
+  const E = (t) => {
+    t === 0 && _ && !o && I(!1);
+  }, v = h ? c !== void 0 : !!c, F = O("smwb-accordion__arrow-icon", { "smwb-accordion__arrow-icon_opened": o }), G = (t) => {
+    if (s)
       return;
-    const l = !o;
-    d || O(l), i == null || i(l), c == null || c($);
+    const x = !o;
+    f || D(x), i == null || i(x), r == null || r(t);
   };
-  return /* @__PURE__ */ _("div", { ref: h, className: b("smwb-accordion", { "smwb-disabled": t }, u), "data-testid": "accordion", children: [
-    /* @__PURE__ */ _(
-      "button",
-      {
-        id: f,
-        className: "smwb-accordion__header",
-        onClick: j,
-        type: "button",
-        disabled: t,
-        "aria-expanded": o,
-        "aria-controls": e ? p : void 0,
-        children: [
-          s == null ? void 0 : s(o),
-          /* @__PURE__ */ r("span", { className: "smwb-accordion__title", children: w }),
-          !N && (a != null ? a : /* @__PURE__ */ r(S, { className: y, name: "expand_more", size: 24 }))
-        ]
-      }
-    ),
-    e && /* @__PURE__ */ r("div", { id: p, role: "region", "aria-labelledby": f, children: /* @__PURE__ */ r(
-      R,
-      {
-        height: o ? "auto" : 0,
-        animateOpacity: !0,
-        duration: 300,
-        className: "smwb-accordion__content",
-        children: e
-      }
-    ) })
-  ] });
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      ref: S,
+      className: O("smwb-accordion", `smwb-accordion_${B}`, { "smwb-disabled": s }, $),
+      "data-testid": "accordion",
+      children: [
+        /* @__PURE__ */ d(
+          "button",
+          {
+            id: u,
+            className: "smwb-accordion__header",
+            onClick: G,
+            type: "button",
+            disabled: s,
+            "aria-expanded": o,
+            "aria-controls": v ? w : void 0,
+            children: [
+              n == null ? void 0 : n(o),
+              /* @__PURE__ */ d("span", { className: "smwb-accordion__heading", children: [
+                /* @__PURE__ */ e("span", { className: "smwb-accordion__title", children: j }),
+                l ? /* @__PURE__ */ e("span", { className: "smwb-accordion__subtitle", children: l }) : null
+              ] }),
+              p ? /* @__PURE__ */ e("span", { className: "smwb-accordion__end", children: p(o) }) : null,
+              !P && (a != null ? a : /* @__PURE__ */ e(L, { className: F, name: "expand_more", size: 24 }))
+            ]
+          }
+        ),
+        v && /* @__PURE__ */ e("div", { id: w, role: "region", "aria-labelledby": u, children: /* @__PURE__ */ e(
+          K,
+          {
+            height: o ? "auto" : 0,
+            animateOpacity: !0,
+            duration: 300,
+            className: "smwb-accordion__content",
+            onHeightAnimationEnd: E,
+            children: !h || N ? c : null
+          }
+        ) })
+      ]
+    }
+  );
 });
 export {
-  M as Accordion,
-  M as default
+  C as Accordion,
+  C as default
 };
 //# sourceMappingURL=accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport interface AccordionProps {\n  className?: string;\n  title?: string;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    noIcon,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div ref={ref} className={cn(\"smwb-accordion\", { \"smwb-disabled\": disabled }, className)} data-testid=\"accordion\">\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={children ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__title\">{title}</span>\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {children && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n          >\n            {children}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","noIcon","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":";;;;;;;AA0BO,MAAMA,IAAYC,EAA2C,SAClE;AAAA,EACE,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AACF,GACAC,GACA;AACA,QAAMC,IAAeV,MAAS,QACxB,CAACW,GAAcC,CAAe,IAAIC,EAAkBd,CAAe,GACnEe,IAASJ,IAAe,CAAC,CAACV,IAAOW,GACjCI,IAASC,EAAMb,CAAM,GACrBc,IAAY,GAAGF,CAAM,YACrBG,IAAW,GAAGH,CAAM,WAEpBI,IAAmBC,EAAG,8BAA8B,EAAE,qCAAqCN,GAAQ,GAEnGO,IAAS,CAACC,MAAuD;AACrE,QAAIrB;AACF;AAEF,UAAMsB,IAAO,CAACT;AACd,IAAKJ,KACHE,EAAgBW,CAAI,GAEtBf,KAAA,QAAAA,EAAWe,IACXhB,KAAA,QAAAA,EAAgBe;AAAA,EAClB;AAEA,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAAf,GAAU,WAAWW,EAAG,kBAAkB,EAAE,iBAAiBnB,EAAA,GAAYJ,CAAS,GAAG,eAAY,aACpG,UAAA;AAAA,IAAA,gBAAA2B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIN;AAAA,QACJ,WAAU;AAAA,QACV,SAASG;AAAA,QACT,MAAK;AAAA,QACL,UAAApB;AAAA,QACA,iBAAea;AAAA,QACf,iBAAeV,IAAWa,IAAY;AAAA,QAErC,UAAA;AAAA,UAAAZ,KAAA,gBAAAA,EAAiBS;AAAA,UAClB,gBAAAW,EAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA3B,GAAM;AAAA,UAC9C,CAACQ,MAAWJ,KAAA,OAAAA,IAAQ,gBAAAuB,EAACC,GAAA,EAAK,WAAWP,GAAkB,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGtFf,uBACE,OAAA,EAAI,IAAIa,GAAW,MAAK,UAAS,mBAAiBC,GACjD,UAAA,gBAAAO;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb,IAAS,SAAS;AAAA,QAC1B,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,WAAU;AAAA,QAET,UAAAV;AAAA,MAAA;AAAA,IAAA,EACH,CACF;AAAA,EAAA,GAEJ;AAEJ,CAAC;"}
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/dataDisplay/accordion/accordion.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useState } from \"react\";\nimport cn from \"clsx\";\nimport AnimateHeight, { type Height } from \"../../base/animateHeight/animateHeight\";\nimport Icon from \"../../base/icon/icon\";\nimport { useId } from \"../../../hooks/useId\";\n\n/**\n * `filled` — the header is an app-bar strip on a raised panel (the original look).\n * `outlined` — a bordered card with a flat header: for feeds of records.\n * `plain` — no frame, a divider under each panel: for FAQ-style lists.\n * The flat variants stretch to the container and wrap long titles.\n */\nexport type AccordionVariant = \"filled\" | \"outlined\" | \"plain\";\n\nexport interface AccordionProps {\n  className?: string;\n  /** Header text or markup (a date, an author, a badge…). */\n  title?: ReactNode;\n  /** Secondary line under the title. */\n  subtitle?: ReactNode;\n  variant?: AccordionVariant;\n  isOpenByDefault?: boolean;\n  /** Controlled open state. When set, the component is controlled. */\n  open?: boolean;\n  /** Disable toggling. */\n  disabled?: boolean;\n  /** Custom expand icon (replaces the default chevron). */\n  icon?: ReactNode;\n  id?: string;\n  children?: React.ReactNode;\n  startAdornment?: (isOpen: boolean) => React.ReactNode;\n  /** Rendered after the title, before the expand icon. */\n  endAdornment?: (isOpen: boolean) => React.ReactNode;\n  noIcon?: boolean;\n  /** Create the content on first open instead of up front. */\n  lazy?: boolean;\n  /** Remove the content once the panel has collapsed (created again on open). */\n  unmountOnExit?: boolean;\n  onToggleClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n  /** Fired with the next open state on toggle. */\n  onChange?: (open: boolean) => void;\n}\n\nexport const Accordion = forwardRef<HTMLDivElement, AccordionProps>(function Accordion(\n  {\n    className,\n    title,\n    subtitle,\n    variant = \"filled\",\n    isOpenByDefault = false,\n    open,\n    disabled,\n    icon,\n    id: idProp,\n    children,\n    startAdornment,\n    endAdornment,\n    noIcon,\n    lazy,\n    unmountOnExit,\n    onToggleClick,\n    onChange,\n  },\n  ref\n) {\n  const isControlled = open !== undefined;\n  const [internalOpen, setInternalOpen] = useState<boolean>(isOpenByDefault);\n  const isOpen = isControlled ? !!open : internalOpen;\n  const baseId = useId(idProp);\n  const contentId = `${baseId}-content`;\n  const headerId = `${baseId}-header`;\n\n  // Deferred content (lazy / unmountOnExit) exists only once the panel has been\n  // opened; unmountOnExit drops it again when the collapse animation ends.\n  const deferred = Boolean(lazy || unmountOnExit);\n  const [present, setPresent] = useState<boolean>(isOpen);\n  if (isOpen && !present) {\n    setPresent(true);\n  }\n  const onCollapsed = (height: Height) => {\n    if (height === 0 && unmountOnExit && !isOpen) {\n      setPresent(false);\n    }\n  };\n  // A deferred panel keeps its region (it has nothing to test yet); otherwise\n  // the region is there when there is content.\n  const hasContent = deferred ? children !== undefined : Boolean(children);\n\n  const arrowIconClasses = cn(\"smwb-accordion__arrow-icon\", { \"smwb-accordion__arrow-icon_opened\": isOpen });\n\n  const toggle = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n    if (disabled) {\n      return;\n    }\n    const next = !isOpen;\n    if (!isControlled) {\n      setInternalOpen(next);\n    }\n    onChange?.(next);\n    onToggleClick?.(e);\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\"smwb-accordion\", `smwb-accordion_${variant}`, { \"smwb-disabled\": disabled }, className)}\n      data-testid=\"accordion\"\n    >\n      <button\n        id={headerId}\n        className=\"smwb-accordion__header\"\n        onClick={toggle}\n        type=\"button\"\n        disabled={disabled}\n        aria-expanded={isOpen}\n        aria-controls={hasContent ? contentId : undefined}\n      >\n        {startAdornment?.(isOpen)}\n        <span className=\"smwb-accordion__heading\">\n          <span className=\"smwb-accordion__title\">{title}</span>\n          {subtitle ? <span className=\"smwb-accordion__subtitle\">{subtitle}</span> : null}\n        </span>\n        {endAdornment ? <span className=\"smwb-accordion__end\">{endAdornment(isOpen)}</span> : null}\n        {!noIcon && (icon ?? <Icon className={arrowIconClasses} name=\"expand_more\" size={24} />)}\n      </button>\n\n      {hasContent && (\n        <div id={contentId} role=\"region\" aria-labelledby={headerId}>\n          <AnimateHeight\n            height={isOpen ? \"auto\" : 0}\n            animateOpacity={true}\n            duration={300}\n            className=\"smwb-accordion__content\"\n            onHeightAnimationEnd={onCollapsed}\n          >\n            {!deferred || present ? children : null}\n          </AnimateHeight>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default Accordion;\n"],"names":["Accordion","forwardRef","className","title","subtitle","variant","isOpenByDefault","open","disabled","icon","idProp","children","startAdornment","endAdornment","noIcon","lazy","unmountOnExit","onToggleClick","onChange","ref","isControlled","internalOpen","setInternalOpen","useState","isOpen","baseId","useId","contentId","headerId","deferred","present","setPresent","onCollapsed","height","hasContent","arrowIconClasses","cn","toggle","e","next","jsxs","jsx","Icon","AnimateHeight"],"mappings":"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"}

package/dist/components/dataDisplay/assetGrid/assetGrid.js

@@ -1,9 +1,10 @@
 import { jsx as e } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';/* empty css                                                             */
+import '../../../assets/styles/less/components/assetGrid/assetGrid.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                             */
 import _, { useRef as H, useState as h, useEffect as I, useMemo as O } from "react";
 import T from "clsx";
 import { useVirtualList as W } from "../../../hooks/useVirtualList.js";
-function L({
+function V({
   items: l,
   renderItem: f,
   minColumn: d = 160,
@@ -16,7 +17,7 @@ function L({
   className: N,
   style: R
 }) {
-  const g = H(null), [c, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
+  const g = H(null), [m, A] = h(0), [M, S] = h(0), [z, $] = h(!1);
   I(() => {
     const s = g.current;
     if (!s || typeof ResizeObserver == "undefined") return;
@@ -26,14 +27,14 @@ function L({
     return t.observe(s), () => t.disconnect();
   }, []);
   const o = O(
-    () => c <= 0 ? 1 : Math.max(1, Math.floor((c + r) / (d + r))),
-    [c, r, d]
+    () => m <= 0 ? 1 : Math.max(1, Math.floor((m + r) / (d + r))),
+    [m, r, d]
   ), C = Math.ceil(l.length / o), i = W({
     itemCount: C,
     itemHeight: a + r,
     viewportHeight: M || 1,
     overscan: v
-  }), u = {
+  }), p = {
     display: "grid",
     gridTemplateColumns: `repeat(auto-fill, minmax(${d}px, 1fr))`,
     gap: r,
@@ -46,23 +47,23 @@ function L({
     marginBottom: r
   };
   let n;
-  return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
+  return b ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: p, children: Array.from({ length: w }).map((s, t) => /* @__PURE__ */ e("div", { className: "smwb-asset-grid__skeleton", style: { height: a } }, t)) }) : l.length === 0 ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__empty", children: x }) : z ? n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__sizer", style: { height: i.totalHeight, position: "relative" }, children: /* @__PURE__ */ e(
     "div",
     {
       className: "smwb-asset-grid__band",
       style: { position: "absolute", top: 0, left: 0, right: 0, transform: `translateY(${i.offsetY}px)` },
       children: Array.from({ length: Math.max(0, i.endIndex - i.startIndex) }).map((s, t) => {
-        const p = i.startIndex + t;
+        const u = i.startIndex + t;
         return /* @__PURE__ */ e("div", { className: "smwb-asset-grid__row", style: F, children: Array.from({ length: o }).map((Y, y) => {
-          const m = p * o + y;
-          return m < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[m], m) }, y) : null;
-        }) }, p);
+          const c = u * o + y;
+          return c < l.length ? /* @__PURE__ */ e(_.Fragment, { children: f(l[c], c) }, y) : null;
+        }) }, u);
       })
     }
-  ) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: u, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
+  ) }) : n = /* @__PURE__ */ e("div", { className: "smwb-asset-grid__plain", style: p, children: l.map((s, t) => /* @__PURE__ */ e(_.Fragment, { children: f(s, t) }, t)) }), /* @__PURE__ */ e("div", { ref: g, className: T("smwb-asset-grid", N), style: R, onScroll: i.onScroll, children: n });
 }
 export {
-  L as AssetGrid,
-  L as default
+  V as AssetGrid,
+  V as default
 };
 //# sourceMappingURL=assetGrid.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n  items,\n  renderItem,\n  minColumn = 160,\n  rowHeight,\n  gap = 8,\n  overscan = 2,\n  loading,\n  loadingCount = 12,\n  emptyLabel,\n  className,\n  style,\n}: AssetGridProps<T>): React.ReactElement {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      setWidth(el.clientWidth);\n      setHeight(el.clientHeight);\n      setReady(true);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const cols = useMemo(\n    () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n    [width, gap, minColumn]\n  );\n  const rowCount = Math.ceil(items.length / cols);\n  const vl = useVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowHeight + gap,\n    viewportHeight: height || 1,\n    overscan,\n  });\n\n  const plainStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n    gap,\n    gridAutoRows: rowHeight,\n  };\n  const rowStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap,\n    height: rowHeight,\n    marginBottom: gap,\n  };\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {Array.from({ length: loadingCount }).map((_, i) => (\n          <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n        ))}\n      </div>\n    );\n  } else if (items.length === 0) {\n    body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n  } else if (!ready) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {items.map((item, index) => (\n          <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n        ))}\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n        <div\n          className=\"smwb-asset-grid__band\"\n          style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n        >\n          {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n            const row = vl.startIndex + r;\n            return (\n              <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n                {Array.from({ length: cols }).map((_, c) => {\n                  const index = row * cols + c;\n                  return index < items.length ? (\n                    <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n                  ) : null;\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n      {body}\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}
+{"version":3,"file":"assetGrid.js","sources":["../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport cn from \"clsx\";\nimport { useVirtualList } from \"../../../hooks/useVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => React.ReactNode;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `useVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>({\n  items,\n  renderItem,\n  minColumn = 160,\n  rowHeight,\n  gap = 8,\n  overscan = 2,\n  loading,\n  loadingCount = 12,\n  emptyLabel,\n  className,\n  style,\n}: AssetGridProps<T>): React.ReactElement {\n  const viewportRef = useRef<HTMLDivElement | null>(null);\n  const [width, setWidth] = useState(0);\n  const [height, setHeight] = useState(0);\n  const [ready, setReady] = useState(false);\n\n  useEffect(() => {\n    const el = viewportRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      setWidth(el.clientWidth);\n      setHeight(el.clientHeight);\n      setReady(true);\n    });\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, []);\n\n  const cols = useMemo(\n    () => (width <= 0 ? 1 : Math.max(1, Math.floor((width + gap) / (minColumn + gap)))),\n    [width, gap, minColumn]\n  );\n  const rowCount = Math.ceil(items.length / cols);\n  const vl = useVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowHeight + gap,\n    viewportHeight: height || 1,\n    overscan,\n  });\n\n  const plainStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(auto-fill, minmax(${minColumn}px, 1fr))`,\n    gap,\n    gridAutoRows: rowHeight,\n  };\n  const rowStyle: React.CSSProperties = {\n    display: \"grid\",\n    gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,\n    gap,\n    height: rowHeight,\n    marginBottom: gap,\n  };\n\n  let body: React.ReactNode;\n  if (loading) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {Array.from({ length: loadingCount }).map((_, i) => (\n          <div key={i} className=\"smwb-asset-grid__skeleton\" style={{ height: rowHeight }} />\n        ))}\n      </div>\n    );\n  } else if (items.length === 0) {\n    body = <div className=\"smwb-asset-grid__empty\">{emptyLabel}</div>;\n  } else if (!ready) {\n    body = (\n      <div className=\"smwb-asset-grid__plain\" style={plainStyle}>\n        {items.map((item, index) => (\n          <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n        ))}\n      </div>\n    );\n  } else {\n    body = (\n      <div className=\"smwb-asset-grid__sizer\" style={{ height: vl.totalHeight, position: \"relative\" }}>\n        <div\n          className=\"smwb-asset-grid__band\"\n          style={{ position: \"absolute\", top: 0, left: 0, right: 0, transform: `translateY(${vl.offsetY}px)` }}\n        >\n          {Array.from({ length: Math.max(0, vl.endIndex - vl.startIndex) }).map((_, r) => {\n            const row = vl.startIndex + r;\n            return (\n              <div key={row} className=\"smwb-asset-grid__row\" style={rowStyle}>\n                {Array.from({ length: cols }).map((_, c) => {\n                  const index = row * cols + c;\n                  return index < items.length ? (\n                    <React.Fragment key={c}>{renderItem(items[index], index)}</React.Fragment>\n                  ) : null;\n                })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div ref={viewportRef} className={cn(\"smwb-asset-grid\", className)} style={style} onScroll={vl.onScroll}>\n      {body}\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","items","renderItem","minColumn","rowHeight","gap","overscan","loading","loadingCount","emptyLabel","className","style","viewportRef","useRef","width","setWidth","useState","height","setHeight","ready","setReady","useEffect","el","ro","cols","useMemo","rowCount","vl","useVirtualList","plainStyle","rowStyle","body","jsx","_","i","r","row","c","index","React","item","cn"],"mappings":"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"}

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

@@ -24,6 +24,10 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
     total?: number;
     /** Click handler for the "+N" surplus chip. */
     onSurplusClick?: () => void;
+    /** Accessible name of the "+N" surplus chip. */
+    surplusAriaLabel?: (count: number) => string;
+    /** Size of the "+N" surplus chip: match the avatars in the group. */
+    size?: AvatarSize | number;
 }
 export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & {
     children?: ReactNode | undefined;

package/dist/components/dataDisplay/avatar/avatar.js

@@ -1,45 +1,60 @@
-import { jsx as c, jsxs as C } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/avatar/avatar.entry.css';/* empty css                                                       */
-import { forwardRef as _, useState as E, Children as S, isValidElement as $ } from "react";
-import f from "clsx";
-const w = (o) => typeof o == "string", j = _(function({ className: i, src: r, alt: e, size: t = "medium", variant: u = "circular", color: n, style: d, imgProps: a, children: m, ...v }, s) {
-  const [l, N] = E(!1), b = !!r && !l, x = f(
+import { jsx as o, jsxs as C } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                       */
+import { forwardRef as N, useState as $, Children as E, isValidElement as S } from "react";
+import h from "clsx";
+const _ = (i) => typeof i == "string", j = N(function({ className: m, src: s, alt: e, size: t = "medium", variant: u = "circular", color: l, style: d, imgProps: a, children: v, ...r }, f) {
+  const [b, c] = $(!1), n = !!s && !b, x = h(
     "smwb-avatar",
     `smwb-avatar_${u}`,
-    w(t) ? `smwb-avatar_${t}` : null,
-    i
+    _(t) ? `smwb-avatar_${t}` : null,
+    m
   ), y = {
     ...d,
-    ...w(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
-    ...n && !b ? { backgroundColor: n } : {}
+    ..._(t) ? {} : { width: t, height: t, fontSize: t / 2.5 },
+    ...l && !n ? { backgroundColor: l } : {}
   };
-  return /* @__PURE__ */ c("div", { ref: s, ...v, "data-testid": "avatar", className: x, style: y, children: b ? /* @__PURE__ */ c(
+  return /* @__PURE__ */ o("div", { ref: f, ...r, "data-testid": "avatar", className: x, style: y, children: n ? /* @__PURE__ */ o(
     "img",
     {
       ...a,
-      className: f("smwb-avatar__img", a == null ? void 0 : a.className),
-      src: r,
+      className: h("smwb-avatar__img", a == null ? void 0 : a.className),
+      src: s,
       alt: e,
       onError: (A) => {
-        var h;
-        N(!0), (h = a == null ? void 0 : a.onError) == null || h.call(a, A);
+        var w;
+        c(!0), (w = a == null ? void 0 : a.onError) == null || w.call(a, A);
       }
     }
-  ) : /* @__PURE__ */ c("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: m }) });
-}), M = _(function({ className: i, max: r = 5, total: e, onSurplusClick: t, children: u, ...n }, d) {
-  const a = S.toArray(u).filter($), m = e != null ? e : a.length, v = Math.max(r, 1), s = a.slice(0, v), l = m - s.length;
-  return /* @__PURE__ */ C("div", { ref: d, ...n, "data-testid": "avatar-group", className: f("smwb-avatar-group", i), children: [
-    l > 0 ? /* @__PURE__ */ c(
-      j,
-      {
-        className: "smwb-avatar-group__surplus",
-        onClick: t,
-        style: t ? { cursor: "pointer" } : void 0,
-        children: `+${l}`
-      }
-    ) : null,
-    s
-  ] });
+  ) : /* @__PURE__ */ o("span", { className: "smwb-avatar__fallback", role: "img", "aria-label": e, children: v }) });
+}), M = N(function({
+  className: m,
+  max: s = 5,
+  total: e,
+  onSurplusClick: t,
+  surplusAriaLabel: u = (r) => `${r} more`,
+  size: l,
+  children: d,
+  ...a
+}, v) {
+  const r = E.toArray(d).filter(S), f = e != null ? e : r.length, b = Math.max(s, 1), c = r.slice(0, b), n = f - c.length;
+  return (
+    // In order, the first avatar first; the "+N" chip ends the row.
+    /* @__PURE__ */ C("div", { ref: v, ...a, "data-testid": "avatar-group", className: h("smwb-avatar-group", m), children: [
+      c,
+      n > 0 ? /* @__PURE__ */ o(
+        j,
+        {
+          className: "smwb-avatar-group__surplus",
+          size: l,
+          alt: u(n),
+          onClick: t,
+          style: t ? { cursor: "pointer" } : void 0,
+          children: `+${n}`
+        }
+      ) : null
+    ] })
+  );
 });
 export {
   j as Avatar,