@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/switch/index.js

@@ -1,4 +1,4 @@
-import { Switch as t } from "./Switch.js";
+import { Switch } from "./Switch.js";
 export {
-  t as Switch
+  Switch
 };

package/dist/components/table/Table.js

@@ -1,67 +1,70 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { memo as f, useCallback as S, isValidElement as x } from "react";
-import { create as T } from "../../helpers/bem.js";
-import { isArray as b } from "../../helpers/validations.js";
-import $ from "./Table.module.scss.js";
-const l = T($, "Table"), j = f(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useCallback, isValidElement } from "react";
+import { create } from "../../helpers/bem.js";
+import { isArray } from "../../helpers/validations.js";
+import styles from "./Table.module.scss.js";
+const bem = create(styles, "Table");
+const Table = memo(
   ({
-    variant: a = "primary",
-    className: h,
-    ariaLabel: p,
-    caption: d,
-    headerType: n = "single",
-    data: s,
-    headerProps: N,
-    bodyProps: t,
-    ...y
+    variant = "primary",
+    className,
+    ariaLabel,
+    caption,
+    headerType = "single",
+    data,
+    headerProps,
+    bodyProps,
+    ...props
   }) => {
-    const _ = S(
-      (e) => {
-        const m = n === "double" ? { ...e, scope: "row" } : e, { label: r, icon: c, className: u, ...w } = m;
-        return /* @__PURE__ */ i(
+    const renderTableBodyCell = useCallback(
+      (props2) => {
+        const cellProps = headerType === "double" ? { ...props2, scope: "row" } : props2;
+        const { label, icon, className: className2, ...rest } = cellProps;
+        return /* @__PURE__ */ jsxs(
           "td",
           {
-            className: l("cell", { "with-icon": !!c }, u),
-            ...w,
+            className: bem("cell", { "with-icon": Boolean(icon) }, className2),
+            ...rest,
             children: [
-              x(c) ? /* @__PURE__ */ o("span", { className: l("cell__icon"), children: c }) : null,
-              r
+              isValidElement(icon) ? /* @__PURE__ */ jsx("span", { className: bem("cell__icon"), children: icon }) : null,
+              label
             ]
           },
-          `table-body-cell-${r}`
+          `table-body-cell-${label}`
         );
       },
-      [n]
+      [headerType]
     );
-    return !b(s == null ? void 0 : s.header) || !b(s == null ? void 0 : s.body) ? null : /* @__PURE__ */ o("div", { className: l("container", a, h), children: /* @__PURE__ */ i(
+    if (!isArray(data == null ? void 0 : data.header) || !isArray(data == null ? void 0 : data.body)) return null;
+    return /* @__PURE__ */ jsx("div", { className: bem("container", variant, className), children: /* @__PURE__ */ jsxs(
       "table",
       {
-        "aria-label": p,
-        className: l(void 0, a),
-        ...y,
+        "aria-label": ariaLabel,
+        className: bem(void 0, variant),
+        ...props,
         children: [
-          /* @__PURE__ */ o("caption", { className: l("caption"), children: d }),
-          /* @__PURE__ */ o("thead", { className: l("head", a), ...N, children: /* @__PURE__ */ o("tr", { className: l("head__row"), children: s.header.map((e) => /* @__PURE__ */ o(
+          /* @__PURE__ */ jsx("caption", { className: bem("caption"), children: caption }),
+          /* @__PURE__ */ jsx("thead", { className: bem("head", variant), ...headerProps, children: /* @__PURE__ */ jsx("tr", { className: bem("head__row"), children: data.header.map((cell) => /* @__PURE__ */ jsx(
             "th",
             {
-              className: l("head__cell", e.className),
-              colSpan: e.colSpan,
-              rowSpan: e.rowSpan,
-              children: e.label
+              className: bem("head__cell", cell.className),
+              colSpan: cell.colSpan,
+              rowSpan: cell.rowSpan,
+              children: cell.label
             },
-            `table-header-cell-${e.label}`
+            `table-header-cell-${cell.label}`
           )) }) }),
-          /* @__PURE__ */ o("tbody", { className: l("body", a), ...t, children: s.body.map(({ data: e, className: m }) => {
-            var r;
-            return /* @__PURE__ */ o(
+          /* @__PURE__ */ jsx("tbody", { className: bem("body", variant), ...bodyProps, children: data.body.map(({ data: data2, className: className2 }) => {
+            var _a;
+            return /* @__PURE__ */ jsx(
               "tr",
               {
-                className: l("body__row", m),
-                children: e.map(
-                  (c) => _(c)
+                className: bem("body__row", className2),
+                children: data2.map(
+                  (cell) => renderTableBodyCell(cell)
                 )
               },
-              `table-body-row-${(r = e == null ? void 0 : e[0]) == null ? void 0 : r.label}`
+              `table-body-row-${(_a = data2 == null ? void 0 : data2[0]) == null ? void 0 : _a.label}`
             );
           }) })
         ]
@@ -69,7 +72,7 @@ const l = T($, "Table"), j = f(
     ) });
   }
 );
-j.displayName = "Table";
+Table.displayName = "Table";
 export {
-  j as Table
+  Table
 };

package/dist/components/table/Table.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", a = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Table__container": "prokodo-Table__container",
   "prokodo-Table__container--primary": "prokodo-Table__container--primary",
   "prokodo-Table__container--secondary": "prokodo-Table__container--secondary",
@@ -17,11 +19,11 @@ const o = "gradientMove", e = "fadeInKeyframe", a = {
   "prokodo-Table__body__row": "prokodo-Table__body__row",
   "prokodo-Table__body__cell": "prokodo-Table__body__cell",
   "with-icon": "with-icon",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/table/index.js

@@ -1,4 +1,4 @@
-import { Table as r } from "./Table.js";
+import { Table } from "./Table.js";
 export {
-  r as Table
+  Table
 };

package/dist/components/teaser/Teaser.js

@@ -1,94 +1,95 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import { memo as v } from "react";
-import { create as x } from "../../helpers/bem.js";
-import { isString as _ } from "../../helpers/validations.js";
-import C from "./Teaser.module.scss.js";
-import { Card as y } from "../card/Card.js";
-import { Lottie as T } from "../lottie/Lottie.js";
-import { Image as b } from "../image/Image.js";
-import { Headline as I } from "../headline/Headline.js";
-import { RichText as j } from "../rich-text/RichText.js";
-import { Icon as k } from "../icon/Icon.js";
-const m = x(C, "Teaser"), w = v(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Teaser.module.scss.js";
+import { Card } from "../card/Card.js";
+import { Lottie } from "../lottie/Lottie.js";
+import { Image } from "../image/Image.js";
+import { Headline } from "../headline/Headline.server.js";
+import { RichText } from "../rich-text/RichText.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Teaser");
+const Teaser = memo(
   ({
-    className: g,
-    variant: n = "primary",
-    animation: c,
-    lineClamp: N,
-    align: p,
-    image: h,
-    title: o,
-    content: i,
-    onClick: r,
-    redirect: a,
-    ...e
+    className,
+    variant = "primary",
+    animation,
+    lineClamp,
+    align,
+    image,
+    title,
+    content,
+    onClick,
+    redirect,
+    ...props
   }) => {
-    var f;
-    return /* @__PURE__ */ l(
-      y,
+    var _a;
+    return /* @__PURE__ */ jsxs(
+      Card,
       {
-        variant: n,
-        ...e,
-        className: m(void 0, void 0, g),
-        contentClassName: m("card"),
-        redirect: a,
-        onClick: r,
+        variant,
+        ...props,
+        className: bem(void 0, void 0, className),
+        contentClassName: bem("card"),
+        redirect,
+        onClick,
         children: [
-          c && /* @__PURE__ */ s(T, { animationName: c, className: m("animation") }),
-          h && /* @__PURE__ */ s("div", { className: m("image__wrapper"), children: /* @__PURE__ */ s(
-            b,
+          animation && /* @__PURE__ */ jsx(Lottie, { animationName: animation, className: bem("animation") }),
+          image && /* @__PURE__ */ jsx("div", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
+            Image,
             {
-              ...h,
-              captionClassName: m("image__caption"),
-              className: m("image"),
-              containerClassName: m("image")
+              ...image,
+              captionClassName: bem("image__caption"),
+              className: bem("image"),
+              containerClassName: bem("image")
             }
           ) }),
-          /* @__PURE__ */ l("div", { className: m("card__content"), children: [
-            /* @__PURE__ */ s(
-              I,
+          /* @__PURE__ */ jsxs("div", { className: bem("card__content"), children: [
+            /* @__PURE__ */ jsx(
+              Headline,
               {
-                align: p ?? "center",
+                align: align ?? "center",
                 size: "md",
                 type: "h3",
-                ...o,
-                variant: (o == null ? void 0 : o.variant) ?? n,
-                className: m(
+                ...title,
+                variant: (title == null ? void 0 : title.variant) ?? variant,
+                className: bem(
                   "headline",
                   {
-                    "has-lineClamp": !!N
+                    "has-lineClamp": Boolean(lineClamp)
                   },
-                  o == null ? void 0 : o.className
+                  title == null ? void 0 : title.className
                 ),
-                children: o == null ? void 0 : o.content
+                children: title == null ? void 0 : title.content
               }
             ),
-            _(i) && /* @__PURE__ */ s(
-              j,
+            isString(content) && /* @__PURE__ */ jsx(
+              RichText,
               {
-                className: m("content", {
-                  "has-lineClamp": !!N,
-                  [`align-${p}`]: !!p
+                className: bem("content", {
+                  "has-lineClamp": Boolean(lineClamp),
+                  [`align-${align}`]: !!align
                 }),
-                children: i
+                children: content
               }
             ),
-            _(a == null ? void 0 : a.label) && /* @__PURE__ */ l("span", { className: m("link"), children: [
-              /* @__PURE__ */ s(
-                k,
+            isString(redirect == null ? void 0 : redirect.label) && /* @__PURE__ */ jsxs("span", { className: bem("link"), children: [
+              /* @__PURE__ */ jsx(
+                Icon,
                 {
-                  color: n,
+                  color: variant,
                   name: "ArrowRight01Icon",
                   size: "xs",
-                  ...a == null ? void 0 : a.icon,
-                  className: m(
+                  ...redirect == null ? void 0 : redirect.icon,
+                  className: bem(
                     "link__icon",
                     void 0,
-                    (f = a == null ? void 0 : a.icon) == null ? void 0 : f.className
+                    (_a = redirect == null ? void 0 : redirect.icon) == null ? void 0 : _a.className
                   )
                 }
               ),
-              a == null ? void 0 : a.label
+              redirect == null ? void 0 : redirect.label
             ] })
           ] })
         ]
@@ -96,7 +97,7 @@ const m = x(C, "Teaser"), w = v(
     );
   }
 );
-w.displayName = "Teaser";
+Teaser.displayName = "Teaser";
 export {
-  w as Teaser
+  Teaser
 };

package/dist/components/teaser/Teaser.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", e = "fadeInKeyframe", r = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Teaser": "prokodo-Teaser",
   "prokodo-Teaser__card": "prokodo-Teaser__card",
   "prokodo-Teaser__card__content": "prokodo-Teaser__card__content",
@@ -13,11 +15,11 @@ const o = "gradientMove", e = "fadeInKeyframe", r = {
   "prokodo-Teaser__content--align-right": "prokodo-Teaser__content--align-right",
   "prokodo-Teaser__link": "prokodo-Teaser__link",
   "prokodo-Teaser__link__icon": "prokodo-Teaser__link__icon",
-  gradientMove: o,
-  fadeInKeyframe: e
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  r as default,
-  e as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/teaser/index.js

@@ -1,4 +1,4 @@
-import { Teaser as o } from "./Teaser.js";
+import { Teaser } from "./Teaser.js";
 export {
-  o as Teaser
+  Teaser
 };

package/dist/constants/project.js

@@ -1,4 +1,4 @@
-const O = "0.0.26";
+const PROKODO_UI_VERSION = "0.0.28";
 export {
-  O as PROKODO_UI_VERSION
+  PROKODO_UI_VERSION
 };

package/dist/helpers/bem.js

@@ -1,12 +1,20 @@
-import m from "react-bem-helper";
-const p = "prokodo";
-function l(t, e) {
-  const n = `${p}-${e}`, r = new m({ name: n, outputIsString: !0 });
-  return (s, a, c) => r(s, a, c).split(" ").map(
-    (o) => t[o] !== void 0 && t[o] !== "" ? t[o] : o
-  ).join(" ");
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import BEMHelper from "react-bem-helper";
+const COMPANY_PREFIX = "prokodo";
+function create(styles, blockName) {
+  const prefixedName = `${COMPANY_PREFIX}-${blockName}`;
+  const bem = new BEMHelper({ name: prefixedName, outputIsString: true });
+  return (element, modifiers, extra) => {
+    const className = bem(element, modifiers, extra);
+    const classNames = className.split(" ");
+    return classNames.map(
+      (key) => styles[key] !== void 0 && styles[key] !== "" ? styles[key] : key
+    ).join(" ");
+  };
 }
+__name(create, "create");
 export {
-  p as COMPANY_PREFIX,
-  l as create
+  COMPANY_PREFIX,
+  create
 };

package/dist/helpers/calculation.js

@@ -1,4 +1,6 @@
-const l = (o) => o === void 0 ? 0 : o.split(/\s+/).length;
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const calculateWordCount = /* @__PURE__ */ __name((text) => text === void 0 ? 0 : text.split(/\s+/).length, "calculateWordCount");
 export {
-  l as calculateWordCount
+  calculateWordCount
 };

package/dist/helpers/validations.js

@@ -1,8 +1,14 @@
-const t = (s) => typeof s == "string" && s.trim() !== "", i = (s) => typeof s == "number", r = (s) => Array.isArray(s) && s.length > 0, n = (s) => s == null, o = (s) => s !== !1 && s !== void 0;
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const isString = /* @__PURE__ */ __name((e) => typeof e === "string" && e.trim() !== "", "isString");
+const isNumber = /* @__PURE__ */ __name((e) => typeof e === "number", "isNumber");
+const isArray = /* @__PURE__ */ __name((array) => Array.isArray(array) && array.length > 0, "isArray");
+const isNull = /* @__PURE__ */ __name((e) => e === null || e === void 0, "isNull");
+const isTrue = /* @__PURE__ */ __name((e) => e !== false && e !== void 0, "isTrue");
 export {
-  r as isArray,
-  n as isNull,
-  i as isNumber,
-  t as isString,
-  o as isTrue
+  isArray,
+  isNull,
+  isNumber,
+  isString,
+  isTrue
 };

package/dist/hooks/useGoogleMaps.js

@@ -1,19 +1,24 @@
-import { Loader as s } from "@googlemaps/js-api-loader";
-import { useState as l, useEffect as n } from "react";
-const m = (o, e) => {
-  const [a, t] = l(!1);
-  return n(() => {
-    new s({
-      apiKey: o,
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { Loader } from "@googlemaps/js-api-loader";
+import { useState, useEffect } from "react";
+const useGoogleMaps = /* @__PURE__ */ __name((apiKey, reload) => {
+  const [loaded, setLoaded] = useState(false);
+  useEffect(() => {
+    const loader = new Loader({
+      apiKey,
       version: "weekly",
       libraries: ["maps"]
-    }).importLibrary("marker").then(() => {
-      t(!0);
-    }).catch((r) => {
-      throw console.error("Error loading Google Maps", r), new Error("Error loading Google Map: ", r);
     });
-  }, [o, e]), a;
-};
+    loader.importLibrary("marker").then(() => {
+      setLoaded(true);
+    }).catch((err) => {
+      console.error("Error loading Google Maps", err);
+      throw new Error("Error loading Google Map: ", err);
+    });
+  }, [apiKey, reload]);
+  return loaded;
+}, "useGoogleMaps");
 export {
-  m as useGoogleMaps
+  useGoogleMaps
 };

package/dist/hooks/useHydrationReady.js

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { useRef, useState, useEffect } from "react";
+function useHydrationReady({ enabled = true }) {
+  const ref = useRef(null);
+  const [visible, setVisible] = useState(!enabled);
+  useEffect(() => {
+    if (enabled === false || visible) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if ((entry == null ? void 0 : entry.isIntersecting) === true) {
+          setVisible(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [enabled, visible]);
+  return [visible, ref];
+}
+__name(useHydrationReady, "useHydrationReady");
+export {
+  useHydrationReady
+};