@smwb/ui-react 2.6.3 → 2.8.0

package/dist/components/feedBack/progressIndicator/progressIndicator.js

@@ -1,52 +1,84 @@
-import { jsx as i, jsxs as b, Fragment as _ } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/progressIndicator/progressIndicator.entry.css';/* empty css                                                                             */
-import { useRef as v, useEffect as w, forwardRef as h } from "react";
+import { jsx as t, jsxs as $, Fragment as M } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/progressIndicator/progressIndicator.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                             */
+import { useRef as R, useEffect as k, forwardRef as x } from "react";
 import m from "clsx";
-const y = h(function({ type: r, variant: e, className: c, progressValue: a = 0, color: s = "primary", size: d = "medium", id: u, ...f }, n) {
-  const l = {
+const F = x(function({
+  type: r,
+  variant: s,
+  className: e,
+  progressValue: i = 0,
+  max: c = 100,
+  color: u = "primary",
+  size: y = "medium",
+  fullWidth: p,
+  width: a,
+  valueLabel: l,
+  id: N,
+  ...P
+}, d) {
+  const f = {
     role: "progressbar",
-    "aria-label": f["aria-label"],
-    id: u,
-    ...r === "determinate" ? { "aria-valuenow": a, "aria-valuemin": 0, "aria-valuemax": 100 } : {}
-  }, o = s !== "primary" ? `smwb-indicator_color-${s}` : null;
-  return e === "circular" ? /* @__PURE__ */ i(
+    "aria-label": P["aria-label"],
+    id: N,
+    ...r === "determinate" ? { "aria-valuenow": i, "aria-valuemin": 0, "aria-valuemax": c } : {}
+  }, b = u !== "primary" ? `smwb-indicator_color-${u}` : null, _ = Math.min(100, Math.max(0, c > 0 ? i / c * 100 : 0));
+  if (s === "circular")
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: d,
+        className: m("smwb-indicator_circular", `smwb-${r}`, b, `smwb-indicator_size-${y}`, e),
+        ...f,
+        children: r === "determinate" ? /* @__PURE__ */ t(z, { progressValue: _ }) : /* @__PURE__ */ $(M, { children: [
+          /* @__PURE__ */ t("div", { className: "smwb-indicator_circular__thumb" }),
+          /* @__PURE__ */ t("div", {}),
+          /* @__PURE__ */ t("div", {}),
+          /* @__PURE__ */ t("div", {})
+        ] })
+      }
+    );
+  const v = { "smwb-indicator_full-width": p }, h = a !== void 0 ? { width: typeof a == "number" ? `${a}px` : a } : void 0, w = (n) => /* @__PURE__ */ t(
     "div",
     {
-      ref: n,
-      className: m("smwb-indicator_circular", `smwb-${r}`, o, `smwb-indicator_size-${d}`, c),
-      ...l,
-      children: r === "determinate" ? /* @__PURE__ */ i($, { progressValue: a }) : /* @__PURE__ */ b(_, { children: [
-        /* @__PURE__ */ i("div", { className: "smwb-indicator_circular__thumb" }),
-        /* @__PURE__ */ i("div", {}),
-        /* @__PURE__ */ i("div", {}),
-        /* @__PURE__ */ i("div", {})
-      ] })
+      ref: n ? d : void 0,
+      className: m("smwb-indicator_linear", `smwb-${r}`, b, n && v, n && e),
+      style: n ? h : void 0,
+      ...f,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: "smwb-indicator_linear__thumb",
+          style: r === "determinate" ? { width: `${_}%` } : {}
+        }
+      )
     }
-  ) : /* @__PURE__ */ i("div", { ref: n, className: m("smwb-indicator_linear", `smwb-${r}`, o, c), ...l, children: /* @__PURE__ */ i(
-    "div",
-    {
-      className: "smwb-indicator_linear__thumb",
-      style: r === "determinate" ? { width: `${a}%` } : {}
-    }
-  ) });
+  );
+  if (!l || r !== "determinate")
+    return w(!0);
+  const g = c === 100 ? `${Math.round(i)}%` : `${i} / ${c}`;
+  return /* @__PURE__ */ $("div", { ref: d, className: m("smwb-indicator_labeled", v, e), style: h, children: [
+    w(!1),
+    /* @__PURE__ */ t("span", { className: "smwb-indicator__value", children: typeof l == "function" ? l(i, c) : g })
+  ] });
 });
-function $({ progressValue: t = 0 }) {
-  const r = v(null);
-  return w(() => {
-    var c;
+function z({ progressValue: o = 0 }) {
+  const r = R(null);
+  return k(() => {
+    var e;
     if (!r.current || !r.current.r) return;
-    const e = (c = r.current) == null ? void 0 : c.r.baseVal.value;
-    if (e && r.current) {
-      const a = 2 * Math.PI * e;
-      r.current.style.strokeDasharray = `${a} ${a}`, r.current.style.strokeDashoffset = `${a}`;
-      const s = a - t / 100 * a;
-      r.current.style.strokeDashoffset = `${s}`;
+    const s = (e = r.current) == null ? void 0 : e.r.baseVal.value;
+    if (s && r.current) {
+      const i = 2 * Math.PI * s;
+      r.current.style.strokeDasharray = `${i} ${i}`, r.current.style.strokeDashoffset = `${i}`;
+      const c = i - o / 100 * i;
+      r.current.style.strokeDashoffset = `${c}`;
     }
-  }, [r, t]), /* @__PURE__ */ i("svg", { className: "smwb-indicator_circular__svg", children: /* @__PURE__ */ i("circle", { className: "smwb-indicator_circular__circle", cx: "24", cy: "24", r: "22", ref: r }) });
+  }, [r, o]), /* @__PURE__ */ t("svg", { className: "smwb-indicator_circular__svg", children: /* @__PURE__ */ t("circle", { className: "smwb-indicator_circular__circle", cx: "24", cy: "24", r: "22", ref: r }) });
 }
 export {
-  $ as CircularProgress,
-  y as ProgressIndicator,
-  y as default
+  z as CircularProgress,
+  F as ProgressIndicator,
+  F as default
 };
 //# sourceMappingURL=progressIndicator.js.map

package/dist/components/feedBack/progressIndicator/progressIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progressIndicator.js","sources":["../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect } from \"react\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  className?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ProgressIndicator = forwardRef<HTMLDivElement, ProgressIndicatorProps>(function ProgressIndicator(\n  { type, variant, className, progressValue = 0, color = \"primary\", size = \"medium\", id, ...rest },\n  ref\n) {\n  const ariaProps = {\n    role: \"progressbar\" as const,\n    \"aria-label\": rest[\"aria-label\"],\n    id,\n    ...(type === \"determinate\" ? { \"aria-valuenow\": progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": 100 } : {}),\n  };\n  const colorClass = color !== \"primary\" ? `smwb-indicator_color-${color}` : null;\n\n  if (variant === \"circular\") {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-indicator_circular\", `smwb-${type}`, colorClass, `smwb-indicator_size-${size}`, className)}\n        {...ariaProps}\n      >\n        {type === \"determinate\" ? (\n          <CircularProgress progressValue={progressValue} />\n        ) : (\n          <>\n            <div className=\"smwb-indicator_circular__thumb\" />\n            <div></div>\n            <div></div>\n            <div></div>\n          </>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div ref={ref} className={cn(\"smwb-indicator_linear\", `smwb-${type}`, colorClass, className)} {...ariaProps}>\n      <div\n        className=\"smwb-indicator_linear__thumb\"\n        style={type === \"determinate\" ? { width: `${progressValue}%` } : {}}\n      ></div>\n    </div>\n  );\n});\n\nexport interface CircularProgressProps {\n  progressValue?: number;\n}\n\nexport function CircularProgress({ progressValue = 0 }: CircularProgressProps) {\n  const circleRef = useRef<SVGCircleElement>(null);\n\n  useEffect(() => {\n    if (!circleRef.current || !circleRef.current.r) return;\n\n    const circleRadius = circleRef.current?.r.baseVal.value;\n    if (circleRadius && circleRef.current) {\n      const circleLength = 2 * Math.PI * circleRadius;\n      circleRef.current.style.strokeDasharray = `${circleLength} ${circleLength}`;\n      circleRef.current.style.strokeDashoffset = `${circleLength}`;\n\n      const offset = circleLength - (progressValue / 100) * circleLength;\n      circleRef.current.style.strokeDashoffset = `${offset}`;\n    }\n  }, [circleRef, progressValue]);\n\n  return (\n    <svg className=\"smwb-indicator_circular__svg\">\n      <circle className=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circleRef} />\n    </svg>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["ProgressIndicator","forwardRef","type","variant","className","progressValue","color","size","id","rest","ref","ariaProps","colorClass","jsx","cn","CircularProgress","jsxs","Fragment","circleRef","useRef","useEffect","circleRadius","_a","circleLength","offset"],"mappings":";;;;AAoBO,MAAMA,IAAoBC,EAAmD,SAClF,EAAE,MAAAC,GAAM,SAAAC,GAAS,WAAAC,GAAW,eAAAC,IAAgB,GAAG,OAAAC,IAAQ,WAAW,MAAAC,IAAO,UAAU,IAAAC,GAAI,GAAGC,EAAA,GAC1FC,GACA;AACA,QAAMC,IAAY;AAAA,IAChB,MAAM;AAAA,IACN,cAAcF,EAAK,YAAY;AAAA,IAC/B,IAAAD;AAAA,IACA,GAAIN,MAAS,gBAAgB,EAAE,iBAAiBG,GAAe,iBAAiB,GAAG,iBAAiB,QAAQ,CAAA;AAAA,EAAC,GAEzGO,IAAaN,MAAU,YAAY,wBAAwBA,CAAK,KAAK;AAE3E,SAAIH,MAAY,aAEZ,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAH;AAAA,MACA,WAAWI,EAAG,2BAA2B,QAAQZ,CAAI,IAAIU,GAAY,uBAAuBL,CAAI,IAAIH,CAAS;AAAA,MAC5G,GAAGO;AAAA,MAEH,gBAAS,gBACR,gBAAAE,EAACE,GAAA,EAAiB,eAAAV,EAAA,CAA8B,IAEhD,gBAAAW,EAAAC,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAU,iCAAA,CAAiC;AAAA,0BAC/C,OAAA,EAAI;AAAA,0BACJ,OAAA,EAAI;AAAA,0BACJ,OAAA,CAAA,CAAI;AAAA,MAAA,EAAA,CACP;AAAA,IAAA;AAAA,EAAA,IAON,gBAAAA,EAAC,OAAA,EAAI,KAAAH,GAAU,WAAWI,EAAG,yBAAyB,QAAQZ,CAAI,IAAIU,GAAYR,CAAS,GAAI,GAAGO,GAChG,UAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAOX,MAAS,gBAAgB,EAAE,OAAO,GAAGG,CAAa,QAAQ,CAAA;AAAA,IAAC;AAAA,EAAA,GAEtE;AAEJ,CAAC;AAMM,SAASU,EAAiB,EAAE,eAAAV,IAAgB,KAA4B;AAC7E,QAAMa,IAAYC,EAAyB,IAAI;AAE/C,SAAAC,EAAU,MAAM;;AACd,QAAI,CAACF,EAAU,WAAW,CAACA,EAAU,QAAQ,EAAG;AAEhD,UAAMG,KAAeC,IAAAJ,EAAU,YAAV,gBAAAI,EAAmB,EAAE,QAAQ;AAClD,QAAID,KAAgBH,EAAU,SAAS;AACrC,YAAMK,IAAe,IAAI,KAAK,KAAKF;AACnC,MAAAH,EAAU,QAAQ,MAAM,kBAAkB,GAAGK,CAAY,IAAIA,CAAY,IACzEL,EAAU,QAAQ,MAAM,mBAAmB,GAAGK,CAAY;AAE1D,YAAMC,IAASD,IAAgBlB,IAAgB,MAAOkB;AACtD,MAAAL,EAAU,QAAQ,MAAM,mBAAmB,GAAGM,CAAM;AAAA,IACtD;AAAA,EACF,GAAG,CAACN,GAAWb,CAAa,CAAC,qBAG1B,OAAA,EAAI,WAAU,gCACb,UAAA,gBAAAQ,EAAC,YAAO,WAAU,mCAAkC,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,KAAKK,GAAW,GAC7F;AAEJ;"}
+{"version":3,"file":"progressIndicator.js","sources":["../../../../src/components/feedBack/progressIndicator/progressIndicator.tsx"],"sourcesContent":["import React, { forwardRef, useRef, useEffect, type CSSProperties, type ReactNode } from \"react\";\nimport cn from \"clsx\";\n\nexport type ProgressColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface ProgressIndicatorProps {\n  className?: string;\n  variant: \"circular\" | \"linear\";\n  type: \"determinate\" | \"indeterminate\";\n  progressValue?: number;\n  /** Upper bound of `progressValue` (100 by default): with `max={14}`, `progressValue={3}` is 3 of 14. */\n  max?: number;\n  /** Semantic color. */\n  color?: ProgressColor;\n  /** Circular size preset. */\n  size?: \"small\" | \"medium\" | \"large\";\n  /** Linear: fill the container's width instead of the fixed 240px track. */\n  fullWidth?: boolean;\n  /** Linear: the width, in px or any CSS length. */\n  width?: number | string;\n  /**\n   * Linear, determinate: the value as text beside the bar. `true` shows a\n   * percentage — or \"3 / 14\" with a custom `max`; a function formats it, e.g.\n   * `(value, max) => <>{value} of {max}</>`.\n   */\n  valueLabel?: boolean | ((value: number, max: number) => ReactNode);\n  /** Accessible name for the progress bar. */\n  \"aria-label\"?: string;\n  id?: string;\n}\n\nexport const ProgressIndicator = forwardRef<HTMLDivElement, ProgressIndicatorProps>(function ProgressIndicator(\n  {\n    type,\n    variant,\n    className,\n    progressValue = 0,\n    max = 100,\n    color = \"primary\",\n    size = \"medium\",\n    fullWidth,\n    width,\n    valueLabel,\n    id,\n    ...rest\n  },\n  ref\n) {\n  const ariaProps = {\n    role: \"progressbar\" as const,\n    \"aria-label\": rest[\"aria-label\"],\n    id,\n    ...(type === \"determinate\" ? { \"aria-valuenow\": progressValue, \"aria-valuemin\": 0, \"aria-valuemax\": max } : {}),\n  };\n  const colorClass = color !== \"primary\" ? `smwb-indicator_color-${color}` : null;\n  const percent = Math.min(100, Math.max(0, max > 0 ? (progressValue / max) * 100 : 0));\n\n  if (variant === \"circular\") {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"smwb-indicator_circular\", `smwb-${type}`, colorClass, `smwb-indicator_size-${size}`, className)}\n        {...ariaProps}\n      >\n        {type === \"determinate\" ? (\n          <CircularProgress progressValue={percent} />\n        ) : (\n          <>\n            <div className=\"smwb-indicator_circular__thumb\" />\n            <div></div>\n            <div></div>\n            <div></div>\n          </>\n        )}\n      </div>\n    );\n  }\n\n  // Width class and style go on the outermost element: the bar, or the wrapper\n  // that also holds the value label.\n  const sizeClass = { \"smwb-indicator_full-width\": fullWidth };\n  const sizeStyle: CSSProperties | undefined =\n    width !== undefined ? { width: typeof width === \"number\" ? `${width}px` : width } : undefined;\n  const bar = (outer: boolean) => (\n    <div\n      ref={outer ? ref : undefined}\n      className={cn(\"smwb-indicator_linear\", `smwb-${type}`, colorClass, outer && sizeClass, outer && className)}\n      style={outer ? sizeStyle : undefined}\n      {...ariaProps}\n    >\n      <div\n        className=\"smwb-indicator_linear__thumb\"\n        style={type === \"determinate\" ? { width: `${percent}%` } : {}}\n      ></div>\n    </div>\n  );\n\n  if (!valueLabel || type !== \"determinate\") {\n    return bar(true);\n  }\n  const defaultText = max === 100 ? `${Math.round(progressValue)}%` : `${progressValue} / ${max}`;\n  return (\n    <div ref={ref} className={cn(\"smwb-indicator_labeled\", sizeClass, className)} style={sizeStyle}>\n      {bar(false)}\n      <span className=\"smwb-indicator__value\">\n        {typeof valueLabel === \"function\" ? valueLabel(progressValue, max) : defaultText}\n      </span>\n    </div>\n  );\n});\n\nexport interface CircularProgressProps {\n  /** Percent, 0–100. */\n  progressValue?: number;\n}\n\nexport function CircularProgress({ progressValue = 0 }: CircularProgressProps) {\n  const circleRef = useRef<SVGCircleElement>(null);\n\n  useEffect(() => {\n    if (!circleRef.current || !circleRef.current.r) return;\n\n    const circleRadius = circleRef.current?.r.baseVal.value;\n    if (circleRadius && circleRef.current) {\n      const circleLength = 2 * Math.PI * circleRadius;\n      circleRef.current.style.strokeDasharray = `${circleLength} ${circleLength}`;\n      circleRef.current.style.strokeDashoffset = `${circleLength}`;\n\n      const offset = circleLength - (progressValue / 100) * circleLength;\n      circleRef.current.style.strokeDashoffset = `${offset}`;\n    }\n  }, [circleRef, progressValue]);\n\n  return (\n    <svg className=\"smwb-indicator_circular__svg\">\n      <circle className=\"smwb-indicator_circular__circle\" cx=\"24\" cy=\"24\" r=\"22\" ref={circleRef} />\n    </svg>\n  );\n}\n\nexport default ProgressIndicator;\n"],"names":["ProgressIndicator","forwardRef","type","variant","className","progressValue","max","color","size","fullWidth","width","valueLabel","id","rest","ref","ariaProps","colorClass","percent","jsx","cn","CircularProgress","jsxs","Fragment","sizeClass","sizeStyle","bar","outer","defaultText","circleRef","useRef","useEffect","circleRadius","_a","circleLength","offset"],"mappings":"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"}

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -1,61 +1,62 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';/* empty css                                                                         */
-import S from "clsx";
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/saveAssetDialog/saveAssetDialog.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                                         */
+import g from "clsx";
 import { Modal as l } from "../modal/modal.js";
-import { TextField as T } from "../../inputs/textField/textField.js";
-import { Button as h } from "../../inputs/button/button.js";
-function H({
-  open: e,
+import { TextField as j } from "../../inputs/textField/textField.js";
+import { Button as p } from "../../inputs/button/button.js";
+function M({
+  open: _,
   title: o,
   nameLabel: t,
   name: d,
   onNameChange: s,
-  previewSrc: p,
-  onCapture: w,
+  previewSrc: x,
+  onCapture: f,
   captureLabel: v,
   busy: r,
   confirmLabel: u,
-  cancelLabel: x,
-  onConfirm: k,
-  onClose: _,
-  children: m,
-  className: F
+  cancelLabel: e,
+  onConfirm: a,
+  onClose: m,
+  children: k,
+  className: n
 }) {
-  const j = s !== void 0 || d !== void 0;
-  return /* @__PURE__ */ f(l, { open: e, onClose: _, size: "medium", children: [
-    /* @__PURE__ */ i(l.Header, { children: o != null ? o : "Save" }),
-    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ f("div", { className: S("smwb-save-asset-dialog__body", F), children: [
-      j ? /* @__PURE__ */ i(
-        T,
+  const F = s !== void 0 || d !== void 0, w = o != null ? o : "Save";
+  return /* @__PURE__ */ h(l, { open: _, onClose: m, size: "medium", "aria-label": w, children: [
+    /* @__PURE__ */ i(l.Header, { children: w }),
+    /* @__PURE__ */ i(l.Content, { children: /* @__PURE__ */ h("div", { className: g("smwb-save-asset-dialog__body", n), children: [
+      F ? /* @__PURE__ */ i(
+        j,
         {
           label: t != null ? t : "Name",
           value: d != null ? d : "",
           fullWidth: !0,
           disabled: !!r,
-          onChange: (z) => s == null ? void 0 : s(z.currentTarget.value)
+          onChange: (c) => s == null ? void 0 : s(c.currentTarget.value)
         }
       ) : null,
-      p ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: p, alt: "" }) }) : null,
-      w ? /* @__PURE__ */ i(
-        h,
+      x ? /* @__PURE__ */ i("div", { className: "smwb-save-asset-dialog__preview", children: /* @__PURE__ */ i("img", { src: x, alt: "" }) }) : null,
+      f ? /* @__PURE__ */ i(
+        p,
         {
           variant: "outlined",
           size: "small",
           disabled: !!r,
-          onClick: () => w(),
+          onClick: () => f(),
           label: v != null ? v : "Capture preview"
         }
       ) : null,
-      m
+      k
     ] }) }),
-    /* @__PURE__ */ f(l.Footer, { children: [
-      /* @__PURE__ */ i(h, { variant: "text", disabled: !!r, onClick: () => _(), label: x != null ? x : "Cancel" }),
-      /* @__PURE__ */ i(h, { variant: "contained", disabled: !!r, onClick: () => k(), label: u != null ? u : "Save" })
+    /* @__PURE__ */ h(l.Footer, { children: [
+      /* @__PURE__ */ i(p, { variant: "text", disabled: !!r, onClick: () => m(), label: e != null ? e : "Cancel" }),
+      /* @__PURE__ */ i(p, { variant: "contained", disabled: !!r, onClick: () => a(), label: u != null ? u : "Save" })
     ] })
   ] });
 }
 export {
-  H as SaveAssetDialog,
-  H as default
+  M as SaveAssetDialog,
+  M as default
 };
 //# sourceMappingURL=saveAssetDialog.js.map

package/dist/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n  open,\n  title,\n  nameLabel,\n  name,\n  onNameChange,\n  previewSrc,\n  onCapture,\n  captureLabel,\n  busy,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onClose,\n  children,\n  className,\n}: SaveAssetDialogProps): React.ReactElement {\n  const showNameField = onNameChange !== undefined || name !== undefined;\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"medium\">\n      <Modal.Header>{title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n          {showNameField ? (\n            <TextField\n              label={nameLabel ?? \"Name\"}\n              value={name ?? \"\"}\n              fullWidth\n              disabled={!!busy}\n              onChange={(event) => onNameChange?.(event.currentTarget.value)}\n            />\n          ) : null}\n          {previewSrc ? (\n            <div className=\"smwb-save-asset-dialog__preview\">\n              <img src={previewSrc} alt=\"\" />\n            </div>\n          ) : null}\n          {onCapture ? (\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!busy}\n              onClick={() => onCapture()}\n              label={captureLabel ?? \"Capture preview\"}\n            />\n          ) : null}\n          {children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","jsxs","Modal","jsx","cn","TextField","event","Button"],"mappings":";;;;;;AAmCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS;AAE7D,SACE,gBAAAa,EAACC,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UACxC,UAAA;AAAA,IAAA,gBAAAM,EAACD,EAAM,QAAN,EAAc,UAAAhB,KAAA,OAAAA,IAAS,QAAO;AAAA,IAC/B,gBAAAiB,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAD,EAAC,SAAI,WAAWG,EAAG,gCAAgCL,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,OAAOlB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACa,MAAUjB,KAAA,gBAAAA,EAAeiB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHhB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACd;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAG,EAACC,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACI,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACd,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog({\n  open,\n  title,\n  nameLabel,\n  name,\n  onNameChange,\n  previewSrc,\n  onCapture,\n  captureLabel,\n  busy,\n  confirmLabel,\n  cancelLabel,\n  onConfirm,\n  onClose,\n  children,\n  className,\n}: SaveAssetDialogProps): React.ReactElement {\n  const showNameField = onNameChange !== undefined || name !== undefined;\n  // The visible heading also names the dialog for screen readers.\n  const heading = title ?? \"Save\";\n\n  return (\n    <Modal open={open} onClose={onClose} size=\"medium\" aria-label={heading}>\n      <Modal.Header>{heading}</Modal.Header>\n      <Modal.Content>\n        <div className={cn(\"smwb-save-asset-dialog__body\", className)}>\n          {showNameField ? (\n            <TextField\n              label={nameLabel ?? \"Name\"}\n              value={name ?? \"\"}\n              fullWidth\n              disabled={!!busy}\n              onChange={(event) => onNameChange?.(event.currentTarget.value)}\n            />\n          ) : null}\n          {previewSrc ? (\n            <div className=\"smwb-save-asset-dialog__preview\">\n              <img src={previewSrc} alt=\"\" />\n            </div>\n          ) : null}\n          {onCapture ? (\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!busy}\n              onClick={() => onCapture()}\n              label={captureLabel ?? \"Capture preview\"}\n            />\n          ) : null}\n          {children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!busy} onClick={() => onClose()} label={cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!busy} onClick={() => onConfirm()} label={confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","open","title","nameLabel","name","onNameChange","previewSrc","onCapture","captureLabel","busy","confirmLabel","cancelLabel","onConfirm","onClose","children","className","showNameField","heading","Modal","jsx","jsxs","cn","TextField","event","Button"],"mappings":";;;;;;;AAoCO,SAASA,EAAgB;AAAA,EAC9B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,GAA6C;AAC3C,QAAMC,IAAgBX,MAAiB,UAAaD,MAAS,QAEvDa,IAAUf,KAAA,OAAAA,IAAS;AAEzB,2BACGgB,GAAA,EAAM,MAAAjB,GAAY,SAAAY,GAAkB,MAAK,UAAS,cAAYI,GAC7D,UAAA;AAAA,IAAA,gBAAAE,EAACD,EAAM,QAAN,EAAc,UAAAD,EAAA,CAAQ;AAAA,IACvB,gBAAAE,EAACD,EAAM,SAAN,EACC,UAAA,gBAAAE,EAAC,SAAI,WAAWC,EAAG,gCAAgCN,CAAS,GACzD,UAAA;AAAA,MAAAC,IACC,gBAAAG;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,OAAOnB,KAAA,OAAAA,IAAa;AAAA,UACpB,OAAOC,KAAA,OAAAA,IAAQ;AAAA,UACf,WAAS;AAAA,UACT,UAAU,CAAC,CAACK;AAAA,UACZ,UAAU,CAACc,MAAUlB,KAAA,gBAAAA,EAAekB,EAAM,cAAc;AAAA,QAAK;AAAA,MAAA,IAE7D;AAAA,MACHjB,IACC,gBAAAa,EAAC,OAAA,EAAI,WAAU,mCACb,UAAA,gBAAAA,EAAC,OAAA,EAAI,KAAKb,GAAY,KAAI,GAAA,CAAG,EAAA,CAC/B,IACE;AAAA,MACHC,IACC,gBAAAY;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU,CAAC,CAACf;AAAA,UACZ,SAAS,MAAMF,EAAA;AAAA,UACf,OAAOC,KAAA,OAAAA,IAAgB;AAAA,QAAA;AAAA,MAAA,IAEvB;AAAA,MACHM;AAAA,IAAA,EAAA,CACH,EAAA,CACF;AAAA,IACA,gBAAAM,EAACF,EAAM,QAAN,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACK,GAAA,EAAO,SAAQ,QAAO,UAAU,CAAC,CAACf,GAAM,SAAS,MAAMI,EAAA,GAAW,OAAOF,KAAA,OAAAA,IAAe,SAAA,CAAU;AAAA,MACnG,gBAAAQ,EAACK,GAAA,EAAO,SAAQ,aAAY,UAAU,CAAC,CAACf,GAAM,SAAS,MAAMG,EAAA,GAAa,OAAOF,KAAA,OAAAA,IAAgB,OAAA,CAAQ;AAAA,IAAA,EAAA,CAC3G;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/feedBack/skeleton/skeleton.d.ts

@@ -9,12 +9,20 @@ export interface SkeletonProps extends HTMLAttributes<HTMLElement> {
     height?: number | string;
     /** Shimmer animation; pass false to disable. */
     animation?: "pulse" | "wave" | false;
-    /** Render N stacked placeholders. */
+    /**
+     * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the
+     * other HTML attributes; `className` and `style` go on each placeholder.
+     */
     count?: number;
     /** Stagger consecutive items by N ms (with `count`). */
     animationDelay?: number;
-    /** Root element. */
+    /** Element of each placeholder. */
     component?: "span" | "div";
+    /**
+     * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it
+     * marks the group, and each placeholder keeps `skeleton`.
+     */
+    "data-testid"?: string;
 }
 export declare const Skeleton: import("react").ForwardRefExoticComponent<SkeletonProps & import("react").RefAttributes<HTMLElement>>;
 export default Skeleton;

package/dist/components/feedBack/skeleton/skeleton.js

@@ -1,48 +1,52 @@
-import { jsx as i } from "react/jsx-runtime";
-import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';/* empty css                                                           */
-import { forwardRef as u } from "react";
-import g from "clsx";
-const d = (e) => typeof e == "number" ? `${e}px` : e, N = u(function({
-  className: f,
-  variant: k = "text",
-  width: p,
-  height: c,
-  animation: o = "pulse",
-  count: t = 1,
-  animationDelay: r,
-  component: h = "span",
-  style: w,
+import { jsx as l } from "react/jsx-runtime";
+import '../../../assets/styles/less/components/skeleton/skeleton.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
+/* empty css                                                           */
+import { forwardRef as S } from "react";
+import $ from "clsx";
+const w = (o) => typeof o == "number" ? `${o}px` : o, O = S(function({
+  className: c,
+  variant: d = "text",
+  width: b,
+  height: _,
+  animation: s = "pulse",
+  count: n = 1,
+  animationDelay: m,
+  component: g = "span",
+  style: e,
+  "data-testid": r,
   ...a
-}, l) {
-  const b = g(
+}, f) {
+  const u = $(
     "smwb-skeleton",
-    `smwb-skeleton_${k}`,
-    o === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${o}`,
-    f
-  ), _ = h, m = (s) => {
-    const n = {
-      ...w,
-      width: d(p),
-      height: d(c),
-      ...r ? { animationDelay: `${s * r}ms` } : {}
+    `smwb-skeleton_${d}`,
+    s === !1 ? "smwb-skeleton_no-animation" : `smwb-skeleton_${s}`,
+    c
+  ), x = g, h = (t) => {
+    var k, p;
+    const i = {
+      ...e,
+      // An unset prop keeps the width or height the caller set in `style`.
+      width: (k = w(b)) != null ? k : e == null ? void 0 : e.width,
+      height: (p = w(_)) != null ? p : e == null ? void 0 : e.height,
+      ...m ? { animationDelay: `${t * m}ms` } : {}
     };
-    return /* @__PURE__ */ i(
-      _,
+    return /* @__PURE__ */ l(
+      x,
       {
-        ref: t === 1 ? l : void 0,
-        ...t === 1 ? a : {},
-        "data-testid": "skeleton",
+        ref: n === 1 ? f : void 0,
+        ...n === 1 ? a : {},
+        "data-testid": n === 1 && r != null ? r : "skeleton",
         "aria-hidden": "true",
-        className: b,
-        style: n
+        className: u,
+        style: i
       },
-      s
+      t
     );
   };
-  return t === 1 ? m(0) : /* @__PURE__ */ i("span", { ref: l, ...a, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: t }, (s, n) => m(n)) });
+  return n === 1 ? h(0) : /* @__PURE__ */ l("span", { ref: f, ...a, "data-testid": r, className: "smwb-skeleton__group", "aria-hidden": "true", children: Array.from({ length: n }, (t, i) => h(i)) });
 });
 export {
-  N as Skeleton,
-  N as default
+  O as Skeleton,
+  O as default
 };
 //# sourceMappingURL=skeleton.js.map

package/dist/components/feedBack/skeleton/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /** Render N stacked placeholders. */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Root element. */\n  component?: \"span\" | \"div\";\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      width: toCssSize(width),\n      height: toCssSize(height),\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid=\"skeleton\"\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","jsx","_"],"mappings":";;;;AAsBA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBX,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIa,IAAMN,GAENO,IAAY,CAACC,MAAc;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGR;AAAA,MACH,OAAOZ,EAAUM,CAAK;AAAA,MACtB,QAAQN,EAAUO,CAAM;AAAA,MACxB,GAAIG,IAAiB,EAAE,gBAAgB,GAAGS,IAAIT,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAW;AAAA,MAACJ;AAAA,MAAA;AAAA,QAEC,KAAKR,MAAU,IAAIK,IAAM;AAAA,QACxB,GAAIL,MAAU,IAAII,IAAQ,CAAA;AAAA,QAC3B,eAAY;AAAA,QACZ,eAAY;AAAA,QACZ,WAAWE;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIV,MAAU,IACLS,EAAU,CAAC,IAIlB,gBAAAG,EAAC,UAAK,KAAAP,GAAW,GAAGD,GAAO,WAAU,wBAAuB,eAAY,QACrE,UAAA,MAAM,KAAK,EAAE,QAAQJ,KAAS,CAACa,GAAGH,MAAMD,EAAUC,CAAC,CAAC,GACvD;AAEJ,CAAC;"}
+{"version":3,"file":"skeleton.js","sources":["../../../../src/components/feedBack/skeleton/skeleton.tsx"],"sourcesContent":["import { CSSProperties, forwardRef, HTMLAttributes } from \"react\";\nimport cn from \"clsx\";\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLElement> {\n  className?: string;\n  /** Shape of the placeholder. */\n  variant?: \"text\" | \"circular\" | \"rounded\" | \"rectangular\";\n  /** Width — number (px) or any CSS length. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. */\n  height?: number | string;\n  /** Shimmer animation; pass false to disable. */\n  animation?: \"pulse\" | \"wave\" | false;\n  /**\n   * Render N stacked placeholders. With `count` > 1 they sit in a group `<span>`, which takes the `ref` and the\n   * other HTML attributes; `className` and `style` go on each placeholder.\n   */\n  count?: number;\n  /** Stagger consecutive items by N ms (with `count`). */\n  animationDelay?: number;\n  /** Element of each placeholder. */\n  component?: \"span\" | \"div\";\n  /**\n   * Test id of the placeholder; `skeleton` unless given. With `count` > 1 it\n   * marks the group, and each placeholder keeps `skeleton`.\n   */\n  \"data-testid\"?: string;\n}\n\nconst toCssSize = (value?: number | string): string | undefined => (typeof value === \"number\" ? `${value}px` : value);\n\nexport const Skeleton = forwardRef<HTMLElement, SkeletonProps>(function Skeleton(\n  {\n    className,\n    variant = \"text\",\n    width,\n    height,\n    animation = \"pulse\",\n    count = 1,\n    animationDelay,\n    component = \"span\",\n    style,\n    \"data-testid\": dataTestId,\n    ...props\n  },\n  ref\n) {\n  const skeletonClassName = cn(\n    \"smwb-skeleton\",\n    `smwb-skeleton_${variant}`,\n    animation === false ? \"smwb-skeleton_no-animation\" : `smwb-skeleton_${animation}`,\n    className\n  );\n\n  const Tag = component as \"span\";\n\n  const renderOne = (i: number) => {\n    const inlineStyle: CSSProperties = {\n      ...style,\n      // An unset prop keeps the width or height the caller set in `style`.\n      width: toCssSize(width) ?? style?.width,\n      height: toCssSize(height) ?? style?.height,\n      ...(animationDelay ? { animationDelay: `${i * animationDelay}ms` } : {}),\n    };\n    return (\n      <Tag\n        key={i}\n        ref={count === 1 ? ref : undefined}\n        {...(count === 1 ? props : {})}\n        data-testid={count === 1 ? (dataTestId ?? \"skeleton\") : \"skeleton\"}\n        aria-hidden=\"true\"\n        className={skeletonClassName}\n        style={inlineStyle}\n      />\n    );\n  };\n\n  if (count === 1) {\n    return renderOne(0);\n  }\n\n  return (\n    <span ref={ref} {...props} data-testid={dataTestId} className=\"smwb-skeleton__group\" aria-hidden=\"true\">\n      {Array.from({ length: count }, (_, i) => renderOne(i))}\n    </span>\n  );\n});\n\nexport default Skeleton;\n"],"names":["toCssSize","value","Skeleton","forwardRef","className","variant","width","height","animation","count","animationDelay","component","style","dataTestId","props","ref","skeletonClassName","cn","Tag","renderOne","i","inlineStyle","_a","_b","jsx","_"],"mappings":";;;;;AA+BA,MAAMA,IAAY,CAACC,MAAiD,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA,GAElGC,IAAWC,EAAuC,SAC7D;AAAA,EACE,WAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,eAAeC;AAAA,EACf,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC;AAAA,IACxB;AAAA,IACA,iBAAiBZ,CAAO;AAAA,IACxBG,MAAc,KAAQ,+BAA+B,iBAAiBA,CAAS;AAAA,IAC/EJ;AAAA,EAAA,GAGIc,IAAMP,GAENQ,IAAY,CAACC,MAAc;;AAC/B,UAAMC,IAA6B;AAAA,MACjC,GAAGT;AAAA;AAAA,MAEH,QAAOU,IAAAtB,EAAUM,CAAK,MAAf,OAAAgB,IAAoBV,KAAA,gBAAAA,EAAO;AAAA,MAClC,SAAQW,IAAAvB,EAAUO,CAAM,MAAhB,OAAAgB,IAAqBX,KAAA,gBAAAA,EAAO;AAAA,MACpC,GAAIF,IAAiB,EAAE,gBAAgB,GAAGU,IAAIV,CAAc,SAAS,CAAA;AAAA,IAAC;AAExE,WACE,gBAAAc;AAAA,MAACN;AAAA,MAAA;AAAA,QAEC,KAAKT,MAAU,IAAIM,IAAM;AAAA,QACxB,GAAIN,MAAU,IAAIK,IAAQ,CAAA;AAAA,QAC3B,eAAaL,MAAU,KAAKI,KAAA,OAAAA,IAA4B;AAAA,QACxD,eAAY;AAAA,QACZ,WAAWG;AAAA,QACX,OAAOK;AAAA,MAAA;AAAA,MANFD;AAAA,IAAA;AAAA,EASX;AAEA,SAAIX,MAAU,IACLU,EAAU,CAAC,IAIlB,gBAAAK,EAAC,UAAK,KAAAT,GAAW,GAAGD,GAAO,eAAaD,GAAY,WAAU,wBAAuB,eAAY,QAC9F,gBAAM,KAAK,EAAE,QAAQJ,EAAA,GAAS,CAACgB,GAAG,MAAMN,EAAU,CAAC,CAAC,EAAA,CACvD;AAEJ,CAAC;"}