@prokodo/ui 0.0.49 → 0.0.51

package/dist/components/accordion/{Accordion.module.scss.js → Accordion.base.module.scss.js}

@@ -1,6 +1,4 @@
 const accordionBorderShift = "accordionBorderShift";
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Accordion": "prokodo-Accordion",
   "prokodo-Accordion__item": "prokodo-Accordion__item",
@@ -13,13 +11,9 @@ const styles = {
   "prokodo-Accordion__icon--is-hidden": "prokodo-Accordion__icon--is-hidden",
   "prokodo-Accordion__content": "prokodo-Accordion__content",
   "prokodo-Accordion__content--is-expanded": "prokodo-Accordion__content--is-expanded",
-  "prokodo-Accordion__actions": "prokodo-Accordion__actions",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Accordion__actions": "prokodo-Accordion__actions"
 };
 export {
   accordionBorderShift,
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/accordion/Accordion.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 AccordionEffectsLoader({ useBorderShift }) {
+  useEffect(() => {
+    if (Boolean(useBorderShift)) {
+      void import("./Accordion.effects.module.scss.js");
+    }
+  }, [useBorderShift]);
+  return null;
+}
+__name(AccordionEffectsLoader, "AccordionEffectsLoader");
+export {
+  AccordionEffectsLoader
+};

package/dist/components/accordion/Accordion.effects.module.scss.js

@@ -0,0 +1,8 @@
+const accordionBorderShift = "accordionBorderShift";
+const Accordion_effects_module = {
+  accordionBorderShift
+};
+export {
+  accordionBorderShift,
+  Accordion_effects_module as default
+};

package/dist/components/accordion/Accordion.view.js

@@ -1,9 +1,10 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { create } from "../../helpers/bem.js";
 import { isNull } from "../../helpers/validations.js";
-import styles from "./Accordion.module.scss.js";
+import styles from "./Accordion.base.module.scss.js";
+import { AccordionEffectsLoader } from "./Accordion.effects.client.js";
 import { Headline } from "../headline/Headline.js";
 import { Animated } from "../animated/Animated.js";
 import { Button } from "../button/Button.js";
@@ -20,84 +21,87 @@ function AccordionView({
   iconProps,
   ...domRest
 }) {
-  return /* @__PURE__ */ jsx("div", { ...domRest, className: bem(void 0, { [variant]: true }, className), children: items.map((item, index) => {
-    const { title, renderHeader, renderContent, actions, className: itemCls } = item;
-    const accId = `${id}-${title}`;
-    const isExpanded = expandedIndex === index;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: bem("item", { "is-expanded": isExpanded }, itemCls),
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-controls": `${accId}-content`,
-              "aria-expanded": isExpanded,
-              className: bem("header", { "is-expanded": isExpanded }),
-              id: `${accId}-header`,
-              role: "button",
-              tabIndex: 0,
-              onClick: onToggle ? (e) => onToggle(index, e) : void 0,
-              onKeyDown: onToggle ? (e) => {
-                if (e.key === "Enter" || e.key === " ") onToggle(index, e);
-              } : void 0,
-              children: [
-                !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    animated: true,
-                    className: bem("title"),
-                    highlight: isExpanded,
-                    size: "xs",
-                    type: "h3",
-                    variant: isExpanded ? "primary" : "inherit",
-                    ...item.titleOptions ?? titleOptions,
-                    children: title
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    className: bem("icon", { "is-hidden": isExpanded }),
-                    color: "inherit",
-                    name: "PlusSignIcon",
-                    size: "sm",
-                    ...iconProps
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    className: bem("icon", { "is-hidden": !isExpanded }),
-                    color: "inherit",
-                    name: "MinusSignIcon",
-                    size: "sm",
-                    ...iconProps
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-labelledby": `${accId}-header`,
-              className: bem("content", { "is-expanded": isExpanded }),
-              hidden: !isExpanded,
-              id: `${accId}-content`,
-              role: "region",
-              children: [
-                !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
-                actions !== void 0 && (actions == null ? void 0 : actions.length) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action }, `${accId}-action-${action.id}`)) }) : null
-              ]
-            }
-          )
-        ]
-      },
-      accId
-    );
-  }) });
+  return /* @__PURE__ */ jsxs("div", { ...domRest, className: bem(void 0, { [variant]: true }, className), children: [
+    /* @__PURE__ */ jsx(AccordionEffectsLoader, { useBorderShift: true }),
+    items.map((item, index) => {
+      const { title, renderHeader, renderContent, actions, className: itemCls } = item;
+      const accId = `${id}-${title}`;
+      const isExpanded = expandedIndex === index;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: bem("item", { "is-expanded": isExpanded }, itemCls),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "aria-controls": `${accId}-content`,
+                "aria-expanded": isExpanded,
+                className: bem("header", { "is-expanded": isExpanded }),
+                id: `${accId}-header`,
+                role: "button",
+                tabIndex: 0,
+                onClick: onToggle ? (e) => onToggle(index, e) : void 0,
+                onKeyDown: onToggle ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") onToggle(index, e);
+                } : void 0,
+                children: [
+                  !isNull(renderHeader) ? renderHeader : /* @__PURE__ */ jsx(
+                    Headline,
+                    {
+                      animated: true,
+                      className: bem("title"),
+                      highlight: isExpanded,
+                      size: "xs",
+                      type: "h3",
+                      variant: isExpanded ? "primary" : "inherit",
+                      ...item.titleOptions ?? titleOptions,
+                      children: title
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      className: bem("icon", { "is-hidden": isExpanded }),
+                      color: "inherit",
+                      name: "PlusSignIcon",
+                      size: "sm",
+                      ...iconProps
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Icon,
+                    {
+                      className: bem("icon", { "is-hidden": !isExpanded }),
+                      color: "inherit",
+                      name: "MinusSignIcon",
+                      size: "sm",
+                      ...iconProps
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "aria-labelledby": `${accId}-header`,
+                className: bem("content", { "is-expanded": isExpanded }),
+                hidden: !isExpanded,
+                id: `${accId}-content`,
+                role: "region",
+                children: [
+                  !isNull(renderContent) && /* @__PURE__ */ jsx(Animated, { children: renderContent }),
+                  actions !== void 0 && (actions == null ? void 0 : actions.length) ? /* @__PURE__ */ jsx("div", { className: bem("actions"), children: actions.map((action) => /* @__PURE__ */ jsx(Button, { ...action }, `${accId}-action-${action.id}`)) }) : null
+                ]
+              }
+            )
+          ]
+        },
+        accId
+      );
+    })
+  ] });
 }
 __name(AccordionView, "AccordionView");
 export {

package/dist/components/animated/Animated.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Animated": "prokodo-Animated",
   "prokodo-Animated--animate-bottom-top": "prokodo-Animated--animate-bottom-top",
@@ -9,12 +7,8 @@ const styles = {
   "prokodo-Animated--is-visible": "prokodo-Animated--is-visible",
   "prokodo-Animated--is-disabled": "prokodo-Animated--is-disabled",
   "prokodo-Animated--has-fast-speed": "prokodo-Animated--has-fast-speed",
-  "prokodo-Animated--has-slow-speed": "prokodo-Animated--has-slow-speed",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Animated--has-slow-speed": "prokodo-Animated--has-slow-speed"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/avatar/Avatar.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Avatar": "prokodo-Avatar",
   "prokodo-Avatar--primary": "prokodo-Avatar--primary",
@@ -15,12 +13,8 @@ const styles = {
   "prokodo-Avatar--has-size-lg": "prokodo-Avatar--has-size-lg",
   "prokodo-Avatar--has-size-xl": "prokodo-Avatar--has-size-xl",
   "prokodo-Avatar__image": "prokodo-Avatar__image",
-  "prokodo-Avatar__link": "prokodo-Avatar__link",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Avatar__link": "prokodo-Avatar__link"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/button/Button.module.scss.js

@@ -1,5 +1,3 @@
-const gradientMove = "gradientMove";
-const fadeInKeyframe = "fadeInKeyframe";
 const styles = {
   "prokodo-Button": "prokodo-Button",
   "prokodo-Button--has-bg-primary": "prokodo-Button--has-bg-primary",
@@ -26,12 +24,8 @@ const styles = {
   "prokodo-Button__link": "prokodo-Button__link",
   "prokodo-Button__link--icon-only": "prokodo-Button__link--icon-only",
   "prokodo-Button__content": "prokodo-Button__content",
-  "prokodo-Button__content--icon-only": "prokodo-Button__content--icon-only",
-  gradientMove,
-  fadeInKeyframe
+  "prokodo-Button__content--icon-only": "prokodo-Button__content--icon-only"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  gradientMove
+  styles as default
 };

package/dist/components/calendly/Calendly.client.js

@@ -4,9 +4,11 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useRef, useState, useCallback, useMemo, useEffect } from "react";
 import { isString } from "../../helpers/validations.js";
-import { Animated } from "../animated/Animated.js";
 import { Loading } from "../loading/Loading.js";
+import { Animated } from "../animated/Animated.js";
 let scriptAlreadyLoaded = false;
+let cssAlreadyLoaded = false;
+let devWarnedTwice = false;
 function CalendlyClient(props) {
   const {
     calendlyId,
@@ -24,8 +26,11 @@ function CalendlyClient(props) {
     ...rest
   } = props;
   const calendlyRef = useRef(null);
+  const visibleRef = useRef(false);
+  const didInitRef = useRef(false);
   const [widgetInitialized, setWidgetInitialized] = useState(false);
   const [scriptLoaded, setScriptLoaded] = useState(scriptAlreadyLoaded);
+  const [error, setError] = useState(null);
   const format = /* @__PURE__ */ __name((c) => c == null ? void 0 : c.replaceAll("#", ""), "format");
   const safePrefill = useCallback(() => {
     const res = {};
@@ -45,7 +50,7 @@ function CalendlyClient(props) {
     if (isString(colors.button)) p.set("primary_color", format(colors.button));
     if (isString(data == null ? void 0 : data.utm_campaign)) p.set("utm_campaign", (data == null ? void 0 : data.utm_campaign) ?? "");
     if (isString(data == null ? void 0 : data.utm_source)) p.set("utm_source", (data == null ? void 0 : data.utm_source) ?? "");
-    return `https://calendly.com/${calendlyId}?${p.toString()}`;
+    return calendlyId ? `https://calendly.com/${calendlyId}?${p.toString()}` : "";
   }, [
     calendlyId,
     colors,
@@ -54,28 +59,68 @@ function CalendlyClient(props) {
     hideEventTypeDetails,
     hideCookieSettings
   ]);
+  const tryInit = useCallback((attempt = 0) => {
+    const host = calendlyRef.current;
+    if (!host) return;
+    if (didInitRef.current) return;
+    if (host.dataset.initialized === "1") return;
+    if (widgetInitialized) return;
+    if (!calendlyId) {
+      setError("Calendly ID missing.");
+      return;
+    }
+    if (!dataUrl) {
+      setError("Calendly URL could not be built.");
+      return;
+    }
+    if (window.Calendly) {
+      try {
+        host.innerHTML = "";
+      } catch {
+      }
+      host.setAttribute("data-url", dataUrl);
+      window.Calendly.initInlineWidget({
+        url: dataUrl,
+        parentElement: host,
+        prefill: safePrefill()
+      });
+      setWidgetInitialized(true);
+      didInitRef.current = true;
+      host.dataset.initialized = "1";
+      setWidgetInitialized(true);
+      if (process.env.NODE_ENV !== "production" && !devWarnedTwice) {
+        devWarnedTwice = true;
+        console.debug("[Calendly] widget initialized");
+      }
+      return;
+    }
+    if (attempt < 10) {
+      setTimeout(() => tryInit(attempt + 1), 100);
+    } else {
+      console.warn("Calendly widget failed to load.");
+      setError("Calendly widget failed to load.");
+    }
+  }, [dataUrl, safePrefill, widgetInitialized, calendlyId]);
   const onAnimate = useCallback(
     (visible) => {
-      if (!visible || !scriptLoaded || widgetInitialized) return;
-      const tryInit = /* @__PURE__ */ __name((attempt = 0) => {
-        var _a;
-        if (window.Calendly) {
-          (_a = calendlyRef.current) == null ? void 0 : _a.setAttribute("data-url", dataUrl);
-          window.Calendly.initInlineWidget({
-            url: dataUrl,
-            parentElement: calendlyRef.current,
-            prefill: safePrefill()
-          });
-          setWidgetInitialized(true);
-          return;
-        }
-        if (attempt < 10) setTimeout(() => tryInit(attempt + 1), 100);
-        else console.warn("Calendly widget failed to load.");
-      }, "tryInit");
-      tryInit();
+      visibleRef.current = visible;
+      if (!visible || widgetInitialized) return;
+      if (scriptLoaded) tryInit();
     },
-    [scriptLoaded, widgetInitialized, dataUrl, safePrefill]
+    [scriptLoaded, widgetInitialized, tryInit]
   );
+  useEffect(() => () => {
+    const host = calendlyRef.current;
+    if (host) {
+      try {
+        host.innerHTML = "";
+        delete host.dataset.initialized;
+      } catch {
+      }
+    }
+    didInitRef.current = false;
+    setWidgetInitialized(false);
+  }, []);
   useEffect(() => {
     if (scriptAlreadyLoaded || typeof document === "undefined") {
       setScriptLoaded(true);
@@ -88,15 +133,46 @@ function CalendlyClient(props) {
       scriptAlreadyLoaded = true;
       setScriptLoaded(true);
     };
+    s.onerror = () => {
+      setError("Calendly script blocked or failed to load.");
+    };
     document.body.appendChild(s);
+    const watchdog = window.setTimeout(() => {
+      if (!scriptAlreadyLoaded) setError("Calendly script did not load (timeout).");
+    }, 8e3);
+    return () => clearTimeout(watchdog);
+  }, []);
+  useEffect(() => {
+    if (cssAlreadyLoaded || typeof document === "undefined") return;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = "https://assets.calendly.com/assets/external/widget.css";
+    document.head.appendChild(link);
+    cssAlreadyLoaded = true;
   }, []);
+  useEffect(() => {
+    if (scriptLoaded && visibleRef.current && !widgetInitialized) {
+      tryInit();
+    }
+  }, [scriptLoaded, widgetInitialized, tryInit]);
+  useEffect(() => {
+    if (scriptLoaded && !widgetInitialized) {
+      const id = setTimeout(() => tryInit(), 0);
+      return () => clearTimeout(id);
+    }
+    return;
+  }, [scriptLoaded, widgetInitialized, tryInit]);
   const divStyle = {
-    display: widgetInitialized ? "block" : "none",
+    display: "block",
     minWidth: 320,
     height: 700
   };
   return /* @__PURE__ */ jsxs(Animated, { ...animationProps, onAnimate, children: [
-    !Boolean(hideLoading) && !widgetInitialized && /* @__PURE__ */ jsx(Loading, {}),
+    !Boolean(hideLoading) && !Boolean(widgetInitialized) && !isString(error) && /* @__PURE__ */ jsx(Loading, {}),
+    isString(error) && /* @__PURE__ */ jsxs("div", { role: "alert", style: { padding: 12 }, children: [
+      /* @__PURE__ */ jsx("p", { style: { margin: 0 }, children: error }),
+      dataUrl && /* @__PURE__ */ jsx("p", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx("a", { href: dataUrl, rel: "noreferrer", target: "_blank", children: "Open Calendly in a new tab" }) })
+    ] }),
     /* @__PURE__ */ jsx("div", { ref: calendlyRef, ...rest, style: divStyle })
   ] });
 }

package/dist/components/calendly/Calendly.server.js

@@ -2,8 +2,9 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx } from "react/jsx-runtime";
 import { CalendlyView } from "./Calendly.view.js";
-function CalendlyServer(props) {
-  return /* @__PURE__ */ jsx(CalendlyView, { ...props });
+function CalendlyServer({ ...rest }) {
+  rest == null ? true : delete rest.hideCookieSettings;
+  return /* @__PURE__ */ jsx(CalendlyView, { ...rest });
 }
 __name(CalendlyServer, "CalendlyServer");
 export {

package/dist/components/calendly/Calendly.view.js

@@ -7,10 +7,11 @@ function CalendlyView({
   animationProps,
   hideLoading,
   LoadingComponent = Loading,
+  calendlyId: _calendlyId,
   ...rest
 }) {
   const style = {
-    display: "none",
+    display: "block",
     minWidth: 320,
     height: 700
   };

package/dist/components/card/{Card.module.scss.js → Card.base.module.scss.js}

@@ -1,6 +1,3 @@
-const fadeInMask = "fadeInMask";
-const fadeInKeyframe = "fadeInKeyframe";
-const gradientMove = "gradientMove";
 const styles = {
   "prokodo-Card": "prokodo-Card",
   "prokodo-Card--inherit": "prokodo-Card--inherit",
@@ -17,18 +14,11 @@ const styles = {
   "prokodo-Card__gradiant--success": "prokodo-Card__gradiant--success",
   "prokodo-Card__gradiant--warning": "prokodo-Card__gradiant--warning",
   "prokodo-Card--has-highlight": "prokodo-Card--has-highlight",
-  fadeInMask,
   "prokodo-Card--has-gradiant": "prokodo-Card--has-gradiant",
   "prokodo-Card--has-background": "prokodo-Card--has-background",
   "prokodo-Card--has-shadow": "prokodo-Card--has-shadow",
-  "prokodo-Card--has-animation": "prokodo-Card--has-animation",
-  fadeInKeyframe,
-  "prokodo-Card--is-clickable": "prokodo-Card--is-clickable",
-  gradientMove
+  "prokodo-Card--is-clickable": "prokodo-Card--is-clickable"
 };
 export {
-  styles as default,
-  fadeInKeyframe,
-  fadeInMask,
-  gradientMove
+  styles as default
 };

package/dist/components/card/Card.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 CardEffectsLoader({ useReveal, useHighlight, useGradient }) {
+  useEffect(() => {
+    if (Boolean(useReveal) || Boolean(useHighlight) || Boolean(useGradient)) {
+      void import("./Card.effects.module.scss.js");
+    }
+  }, [useReveal, useHighlight, useGradient]);
+  return null;
+}
+__name(CardEffectsLoader, "CardEffectsLoader");
+export {
+  CardEffectsLoader
+};

package/dist/components/card/Card.effects.module.scss.js

@@ -0,0 +1,14 @@
+const Card_fadeInAnimation = "Card_fadeInAnimation";
+const Card_fadeInMask = "Card_fadeInMask";
+const Card_effects_module = {
+  "prokodo-Card": "prokodo-Card",
+  "prokodo-Card--has-animation": "prokodo-Card--has-animation",
+  Card_fadeInAnimation,
+  "prokodo-Card--has-highlight": "prokodo-Card--has-highlight",
+  Card_fadeInMask
+};
+export {
+  Card_fadeInAnimation,
+  Card_fadeInMask,
+  Card_effects_module as default
+};

package/dist/components/card/Card.view.js

@@ -4,7 +4,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { Animated } from "../animated/Animated.js";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
-import styles from "./Card.module.scss.js";
+import styles from "./Card.base.module.scss.js";
+import { CardEffectsLoader } from "./Card.effects.client.js";
 import { Skeleton } from "../skeleton/Skeleton.js";
 import { Image } from "../image/Image.js";
 import { Link } from "../link/Link.js";
@@ -34,7 +35,7 @@ function CardView({
   onMouseEnter,
   onMouseLeave
 }) {
-  const mod = {
+  const modifiers = {
     [variant]: true,
     "is-clickable": Boolean(isClickable),
     "has-highlight": Boolean(highlight),
@@ -42,13 +43,22 @@ function CardView({
     "has-background": Boolean(background),
     "has-shadow": enableShadow !== false && (Boolean(isClickable) || Boolean(enableShadow)),
     "has-animation": Boolean(animated)
+    // hook only; actual animation rules live in effects sheet
   };
+  const effects = /* @__PURE__ */ jsx(
+    CardEffectsLoader,
+    {
+      useGradient: Boolean(gradiant),
+      useHighlight: Boolean(highlight),
+      useReveal: Boolean(animated)
+    }
+  );
   const innerCard = (
     /* eslint-disable jsx-a11y/no-static-element-interactions */
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: bem(void 0, mod, className),
+        className: bem(void 0, modifiers, className),
         role: !redirect && Boolean(isClickable) ? "button" : void 0,
         tabIndex: !redirect && Boolean(isClickable) ? 0 : -1,
         onClick: Boolean(isClickable) && !redirect ? onClick : void 0,
@@ -56,10 +66,11 @@ function CardView({
         onMouseEnter,
         onMouseLeave,
         children: [
+          effects,
           Boolean(loading) && /* @__PURE__ */ jsx(
             Skeleton,
             {
-              className: bem("skeleton", mod),
+              className: bem("skeleton", modifiers),
               variant: "rectangular",
               ...skeletonProps
             }