@prokodo/ui 0.0.49 → 0.0.50

package/dist/components/loading/Loading.view.js

@@ -0,0 +1,124 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+const PX = { xs: 16, sm: 24, md: 32, lg: 48, xl: 64 };
+const SpinnerView = /* @__PURE__ */ __name(({
+  className,
+  style,
+  size = "sm",
+  ariaLabel = "Loading",
+  reducedMotion
+}) => {
+  const s = PX[size];
+  const r = s / 2;
+  const stroke = Math.max(2, Math.round(s / 12));
+  const radius = r - stroke;
+  const arcPath = describeArc(0, 0, radius, -20, 270);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": ariaLabel,
+      className,
+      height: s,
+      role: "status",
+      viewBox: `0 0 ${s} ${s}`,
+      width: s,
+      style: {
+        display: "inline-block",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "ui-loading-gradient", x1: "0%", x2: "0%", y1: "0%", y2: "100%", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "currentColor", stopOpacity: "1" }),
+          /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "currentColor", stopOpacity: "0.4" }),
+          /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "currentColor", stopOpacity: "0.1" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("g", { transform: `translate(${r} ${r})`, children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              fill: "none",
+              r: radius,
+              stroke: "currentColor",
+              strokeOpacity: "0.15",
+              strokeWidth: stroke
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: arcPath,
+              fill: "none",
+              stroke: "url(#ui-loading-gradient)",
+              strokeLinecap: "round",
+              strokeWidth: stroke,
+              children: !Boolean(reducedMotion) && /* @__PURE__ */ jsx(
+                "animateTransform",
+                {
+                  attributeName: "transform",
+                  dur: "0.9s",
+                  from: "0 0 0",
+                  repeatCount: "indefinite",
+                  to: "360 0 0",
+                  type: "rotate"
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}, "SpinnerView");
+const OverlayView = /* @__PURE__ */ __name(({
+  className,
+  style,
+  size = "xl",
+  ariaLabel = "Loading",
+  show = true,
+  blur = 0,
+  zIndex = 9999,
+  reducedMotion,
+  resolvedBackdrop
+}) => {
+  if (!show) return null;
+  const bg = resolvedBackdrop === "dark" ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.5)";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      role: "presentation",
+      style: {
+        position: "fixed",
+        inset: 0,
+        width: "100vw",
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: bg,
+        backdropFilter: blur ? `blur(${blur}px)` : void 0,
+        WebkitBackdropFilter: blur ? `blur(${blur}px)` : void 0,
+        zIndex,
+        ...style
+      },
+      children: /* @__PURE__ */ jsx(SpinnerView, { ariaLabel, reducedMotion, size })
+    }
+  );
+}, "OverlayView");
+function polarToCartesian(cx, cy, r, angle) {
+  const rad = (angle - 90) * Math.PI / 180;
+  return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+}
+__name(polarToCartesian, "polarToCartesian");
+function describeArc(cx, cy, r, start, end) {
+  const startPt = polarToCartesian(cx, cy, r, end);
+  const endPt = polarToCartesian(cx, cy, r, start);
+  const largeArcFlag = "1";
+  return `M ${startPt.x} ${startPt.y} A ${r} ${r} 0 ${largeArcFlag} 0 ${endPt.x} ${endPt.y}`;
+}
+__name(describeArc, "describeArc");
+export {
+  OverlayView,
+  SpinnerView
+};

package/dist/components/lottie/Lottie.module.scss.js

@@ -1,12 +1,6 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
-  "prokodo-Lottie__container": "prokodo-Lottie__container",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Lottie__container": "prokodo-Lottie__container"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/post-item/PostItem.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-PostItem__grid": "prokodo-PostItem__grid",
   "prokodo-PostItem__animation": "prokodo-PostItem__animation",
@@ -13,12 +11,8 @@ const styles = {
   "prokodo-PostItem__image__wrapper": "prokodo-PostItem__image__wrapper",
   "prokodo-PostItem__image__content__wrapper": "prokodo-PostItem__image__content__wrapper",
   "prokodo-PostItem__button": "prokodo-PostItem__button",
-  "prokodo-PostItem__button__content": "prokodo-PostItem__button__content",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-PostItem__button__content": "prokodo-PostItem__button__content"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/post-item/PostItemAuthor.module.scss.js

@@ -1,13 +1,7 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-PostItemAuthor": "prokodo-PostItemAuthor",
-  "prokodo-PostItemAuthor__name": "prokodo-PostItemAuthor__name",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-PostItemAuthor__name": "prokodo-PostItemAuthor__name"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/post-teaser/PostTeaser.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-PostTeaser__card": "prokodo-PostTeaser__card",
   "prokodo-PostTeaser__card__container": "prokodo-PostTeaser__card__container",
@@ -16,12 +14,8 @@ const styles = {
   "prokodo-PostTeaser__content": "prokodo-PostTeaser__content",
   "prokodo-PostTeaser__link": "prokodo-PostTeaser__link",
   "prokodo-PostTeaser__link__icon": "prokodo-PostTeaser__link__icon",
-  "prokodo-PostTeaser__link--is-hovered": "prokodo-PostTeaser__link--is-hovered",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-PostTeaser__link--is-hovered": "prokodo-PostTeaser__link--is-hovered"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/post-widget/PostWidget.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-PostWidget__list": "prokodo-PostWidget__list",
   "prokodo-PostWidget__list--has-fullWidth": "prokodo-PostWidget__list--has-fullWidth",
@@ -10,12 +8,8 @@ const styles = {
   "prokodo-PostWidget__image__link": "prokodo-PostWidget__image__link",
   "prokodo-PostWidget__content": "prokodo-PostWidget__content",
   "prokodo-PostWidget__headline": "prokodo-PostWidget__headline",
-  "prokodo-PostWidget__date": "prokodo-PostWidget__date",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-PostWidget__date": "prokodo-PostWidget__date"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/post-widget-carousel/PostWidgetCarousel.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-PostWidgetCarousel__carousel": "prokodo-PostWidgetCarousel__carousel",
   "prokodo-PostWidgetCarousel__carousel__item__image__link": "prokodo-PostWidgetCarousel__carousel__item__image__link",
@@ -7,12 +5,8 @@ const styles = {
   "prokodo-PostWidgetCarousel__carousel__item__link": "prokodo-PostWidgetCarousel__carousel__item__link",
   "prokodo-PostWidgetCarousel__carousel__dots": "prokodo-PostWidgetCarousel__carousel__dots",
   "prokodo-PostWidgetCarousel__carousel__buttons": "prokodo-PostWidgetCarousel__carousel__buttons",
-  "prokodo-PostWidgetCarousel__headline": "prokodo-PostWidgetCarousel__headline",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-PostWidgetCarousel__headline": "prokodo-PostWidgetCarousel__headline"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/progressBar/ProgressBar.module.scss.js

@@ -1,8 +1,6 @@
 const gradientShift = "gradientShift";
 const indeterminateMove = "indeterminateMove";
 const ProgressBar__bar = "ProgressBar__bar";
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-ProgressBar": "prokodo-ProgressBar",
   "prokodo-ProgressBar__track": "prokodo-ProgressBar__track",
@@ -21,15 +19,11 @@ const styles = {
   "prokodo-ProgressBar__label": "prokodo-ProgressBar__label",
   "prokodo-ProgressBar--animated": "prokodo-ProgressBar--animated",
   ProgressBar__bar,
-  "ProgressBar__bar--indeterminate": "ProgressBar__bar--indeterminate",
-  gradientMove,
-  fadeInKeyframe
+  "ProgressBar__bar--indeterminate": "ProgressBar__bar--indeterminate"
 };
 export {
   ProgressBar__bar,
   styles as default,
-  fadeInKeyframe,
-  gradientMove,
   gradientShift,
   indeterminateMove
 };

package/dist/components/quote/Quote.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Quote": "prokodo-Quote",
   "prokodo-Quote__headline": "prokodo-Quote__headline",
@@ -9,12 +7,8 @@ const styles = {
   "prokodo-Quote__caption__avatar": "prokodo-Quote__caption__avatar",
   "prokodo-Quote__caption__author": "prokodo-Quote__caption__author",
   "prokodo-Quote__caption__author__name": "prokodo-Quote__caption__author__name",
-  "prokodo-Quote__caption__author__position": "prokodo-Quote__caption__author__position",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Quote__caption__author__position": "prokodo-Quote__caption__author__position"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/rich-text/RichText.client.js

@@ -1,9 +1,9 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { marked } from "../../node_modules/.pnpm/marked@15.0.12/node_modules/marked/lib/marked.esm.js";
-import { useMemo, Fragment, createElement, isValidElement } from "react";
+import { useMemo, Fragment, Children, isValidElement, createElement } from "react";
 import { l as libExports } from "../../_virtual/index.js";
 import { create } from "../../helpers/bem.js";
 import styles from "./RichText.module.scss.js";
@@ -12,6 +12,8 @@ import { Link } from "../link/Link.js";
 import { Headline } from "../headline/Headline.js";
 import { AnimatedText } from "../animatedText/AnimatedText.js";
 const bem = create(styles, "RichText");
+const normalize = /* @__PURE__ */ __name((nodes) => Children.toArray(nodes), "normalize");
+const withKey = /* @__PURE__ */ __name((el, key) => isValidElement(el) ? el.key == null ? { ...el, key } : el : el, "withKey");
 function RichTextClient({
   children,
   animated,
@@ -32,13 +34,29 @@ function RichTextClient({
   const headlineProps = { animationProps };
   const renderAnimation = /* @__PURE__ */ __name((content) => {
     if (!Boolean(animated)) return content;
-    return /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content });
+    return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }) : content;
   }, "renderAnimation");
   const safeHtml = useMemo(() => {
     marked.setOptions({ gfm: true, breaks: true });
     return libExports.filterXSS(marked.parse(children ?? ""));
   }, [children]);
-  function domNodeToReact(node) {
+  const VOID_TAGS = /* @__PURE__ */ new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr"
+  ]);
+  function domNodeToReact(node, path = "r") {
     if (node.nodeType === Node.TEXT_NODE) {
       return node.textContent;
     }
@@ -47,7 +65,12 @@ function RichTextClient({
     }
     const elem = node;
     const tagName = elem.tagName.toLowerCase();
-    const childReactNodes = Array.from(elem.childNodes).map(domNodeToReact);
+    const childReactNodes = Array.from(elem.childNodes).map(
+      (child, i) => domNodeToReact(child, `${path}.${i}`)
+    );
+    const keyedChildren = normalize(
+      childReactNodes.map((c, i) => isValidElement(c) ? withKey(c, `${path}.c${i}`) : c)
+    );
     switch (tagName) {
       case "h1":
       case "h2":
@@ -83,17 +106,17 @@ function RichTextClient({
             size = "xs";
             type = "h6";
         }
-        return /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size, type, children: childReactNodes });
+        return /* @__PURE__ */ jsx(Headline, { ...baseProps, ...headlineProps, size, type, children: keyedChildren });
       }
       case "p": {
         const cls = bem("p");
-        return /* @__PURE__ */ jsx("p", { className: cls, itemProp, children: childReactNodes.map(renderAnimation) });
+        return /* @__PURE__ */ jsx("p", { className: cls, itemProp, children: normalize(keyedChildren.map(renderAnimation)) });
       }
       case "a": {
         const cls = bem("a");
         const href = elem.getAttribute("href") ?? "#";
         const title = elem.getAttribute("title") ?? void 0;
-        const linkText = childReactNodes.map(renderAnimation);
+        const linkText = normalize(keyedChildren.map(renderAnimation));
         return /* @__PURE__ */ jsx(
           Link,
           {
@@ -103,25 +126,26 @@ function RichTextClient({
             href,
             linkComponent,
             title,
+            variant: "primary",
             children: linkText
           }
         );
       }
       case "pre": {
         const cls = bem("pre");
-        return /* @__PURE__ */ jsx("pre", { className: cls, children: childReactNodes });
+        return /* @__PURE__ */ jsx("pre", { className: cls, children: keyedChildren });
       }
       case "ul": {
         const cls = bem("ul");
-        return /* @__PURE__ */ jsx("ul", { className: cls, children: childReactNodes });
+        return /* @__PURE__ */ jsx("ul", { className: cls, children: keyedChildren });
       }
       case "ol": {
         const cls = bem("ol");
-        return /* @__PURE__ */ jsx("ol", { className: cls, children: childReactNodes });
+        return /* @__PURE__ */ jsx("ol", { className: cls, children: keyedChildren });
       }
       case "li": {
         const cls = bem("li");
-        return /* @__PURE__ */ jsxs("li", { className: cls, children: [
+        return /* @__PURE__ */ jsx("li", { className: cls, children: normalize([
           /* @__PURE__ */ jsx(
             Icon,
             {
@@ -129,20 +153,27 @@ function RichTextClient({
               color: variant,
               name: "ArrowRight01Icon",
               size: 18
-            }
+            },
+            `${path}.icon`
           ),
-          childReactNodes.map((c, i) => (
+          ...keyedChildren.map((c, i) => (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ jsx("span", { children: renderAnimation(c) }, i)
+            /* @__PURE__ */ jsx("span", { children: renderAnimation(c) }, `${path}.s${i}`)
           ))
-        ] });
+        ]) });
+      }
+      default: {
+        const props2 = { className: bem(tagName) };
+        if (tagName === "img") {
+          props2.src = elem.getAttribute("src") ?? "";
+          props2.alt = elem.getAttribute("alt") ?? "";
+          props2.loading = "lazy";
+        }
+        if (VOID_TAGS.has(tagName)) {
+          return createElement(tagName, { ...props2, key: path });
+        }
+        return keyedChildren.length ? createElement(tagName, { ...props2, key: path }, keyedChildren) : createElement(tagName, { ...props2, key: path });
       }
-      default:
-        return createElement(
-          tagName,
-          { key: Math.random().toString(), className: bem(tagName) },
-          childReactNodes
-        );
     }
   }
   __name(domNodeToReact, "domNodeToReact");
@@ -170,7 +201,7 @@ function RichTextClient({
       className: bem(void 0, void 0, className),
       ...schema,
       ...props,
-      children: topLevelChildren.map((n, i) => /* @__PURE__ */ jsx(Fragment, { children: domNodeToReact(n) }, i))
+      children: topLevelChildren.map((n, i) => /* @__PURE__ */ jsx(Fragment, { children: domNodeToReact(n) }, `top-level-${i}`))
     }
   );
 }

package/dist/components/rich-text/RichText.js

@@ -6,7 +6,7 @@ const RichText = createIsland({
   name: "RichText",
   Server: RichTextServer,
   loadLazy: /* @__PURE__ */ __name(() => import("./RichText.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name((props) => Boolean(props.overrideParagraph) || Boolean(props.animated), "isInteractive")
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {
   RichText

package/dist/components/rich-text/RichText.lazy.js

@@ -11,7 +11,7 @@ const RichText_lazy = createLazyWrapper({
   hydrateOnVisible: true,
   // only hydrate when it scrolls into view
   ioOptions: { threshold: 0.1 },
-  isInteractive: /* @__PURE__ */ __name((props) => Boolean(props.overrideParagraph) || Boolean(props.animated), "isInteractive")
+  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
 });
 export {
   RichText_lazy as default

package/dist/components/rich-text/RichText.module.scss.js

@@ -1,18 +1,14 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
+  "prokodo-RichText__a": "prokodo-RichText__a",
+  "prokodo-RichText": "prokodo-RichText",
   "prokodo-RichText__p": "prokodo-RichText__p",
   "prokodo-RichText__pre": "prokodo-RichText__pre",
   "prokodo-RichText__ul": "prokodo-RichText__ul",
   "prokodo-RichText__ol": "prokodo-RichText__ol",
   "prokodo-RichText__li": "prokodo-RichText__li",
   "prokodo-RichText__li__icon": "prokodo-RichText__li__icon",
-  "prokodo-RichText__ol__decimal": "prokodo-RichText__ol__decimal",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-RichText__ol__decimal": "prokodo-RichText__ol__decimal"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/rich-text/RichText.server.js

@@ -16,7 +16,8 @@ function RichTextServer(props) {
     itemProp,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     overrideParagraph,
-    // We ignore `animated`, `linkComponent`, etc. on the server for now.
+    linkComponent: _linkComp,
+    // omit on server (don’t pass to DOM)
     ...restProps
   } = props;
   const rawHtml = md.render(children ?? "");

package/dist/components/select/Select.module.scss.js

@@ -1,6 +1,4 @@
 const Select__button__inner = "Select__button__inner";
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Select": "prokodo-Select",
   "prokodo-Select--fullWidth": "prokodo-Select--fullWidth",
@@ -25,13 +23,9 @@ const styles = {
   "prokodo-Select__checkbox--checked": "prokodo-Select__checkbox--checked",
   "prokodo-Select__helperText": "prokodo-Select__helperText",
   "prokodo-Select__helperText__content": "prokodo-Select__helperText__content",
-  "prokodo-Select__helperText__content--is-error": "prokodo-Select__helperText__content--is-error",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Select__helperText__content--is-error": "prokodo-Select__helperText__content--is-error"
 };
 export {
   Select__button__inner,
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/sidenav/SideNav.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-SideNav": "prokodo-SideNav",
   "prokodo-SideNav--collapsed": "prokodo-SideNav--collapsed",
@@ -13,12 +11,8 @@ const styles = {
   "prokodo-SideNav__label": "prokodo-SideNav__label",
   "label-in": "label-in",
   "prokodo-SideNav__label--collapsed": "prokodo-SideNav__label--collapsed",
-  "label-out": "label-out",
-  gradientMove,
-  fadeInKeyframe
+  "label-out": "label-out"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/skeleton/{Skeleton.module.scss.js → Skeleton.base.module.scss.js}

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Skeleton": "prokodo-Skeleton",
   "prokodo-Skeleton--text": "prokodo-Skeleton--text",
@@ -9,12 +7,8 @@ const styles = {
   "skeleton-pulse": "skeleton-pulse",
   "prokodo-Skeleton--wave": "prokodo-Skeleton--wave",
   "skeleton-wave": "skeleton-wave",
-  "prokodo-Skeleton--none": "prokodo-Skeleton--none",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Skeleton--none": "prokodo-Skeleton--none"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/skeleton/Skeleton.effects.client.js

@@ -0,0 +1,16 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useEffect } from "react";
+function SkeletonEffectsLoader({ animation }) {
+  useEffect(() => {
+    if (animation && animation !== "none") {
+      void import("./Skeleton.effects.module.scss.js");
+    }
+  }, [animation]);
+  return null;
+}
+__name(SkeletonEffectsLoader, "SkeletonEffectsLoader");
+export {
+  SkeletonEffectsLoader
+};

package/dist/components/skeleton/Skeleton.effects.module.scss.js

@@ -0,0 +1,7 @@
+const Skeleton_effects_module = {
+  "skeleton-pulse": "skeleton-pulse",
+  "skeleton-wave": "skeleton-wave"
+};
+export {
+  Skeleton_effects_module as default
+};

package/dist/components/skeleton/Skeleton.js

@@ -1,32 +1,35 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
-import styles from "./Skeleton.module.scss.js";
+import styles from "./Skeleton.base.module.scss.js";
+import { SkeletonEffectsLoader } from "./Skeleton.effects.client.js";
 const bem = create(styles, "Skeleton");
 const Skeleton = /* @__PURE__ */ __name(({
   width = "100%",
   height = "16px",
   variant = "rectangular",
   animation = "wave",
+  // "wave" | "pulse" | "none"
   className
-}) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: bem(
-      void 0,
-      {
-        [variant]: true,
-        [animation]: true
-      },
-      className
-    ),
-    style: {
-      width,
-      height
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(SkeletonEffectsLoader, { animation }),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { width, height },
+      className: bem(
+        void 0,
+        {
+          [variant]: true,
+          [animation]: true
+          // adds --wave / --pulse / --none
+        },
+        className
+      )
     }
-  }
-), "Skeleton");
+  )
+] }), "Skeleton");
 export {
   Skeleton
 };