@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/rating/Rating.view.js

@@ -31,7 +31,8 @@ function RatingView(props) {
     onClick,
     onMouseEnter,
     onMouseLeave,
-    inputRef
+    inputRef,
+    color
   } = props;
   const isError = typeof errorText === "string";
   const hasHelperText = isString(helperText);
@@ -46,7 +47,7 @@ function RatingView(props) {
     {
       className: bem(
         void 0,
-        { "full-width": Boolean(fullWidth) },
+        { "full-width": Boolean(fullWidth), ...color && { [color]: true } },
         className
       ),
       children: [
@@ -55,6 +56,7 @@ function RatingView(props) {
             Label,
             {
               ...labelProps,
+              color,
               error: isError,
               htmlFor: name,
               label,

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

@@ -3,7 +3,7 @@ var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Marked as B } from "../../node_modules/.pnpm/marked@17.0.1/node_modules/marked/lib/marked.esm.js";
-import { useRef, useMemo, useState, useEffect, Fragment, Children, isValidElement, createElement } from "react";
+import { useRef, useMemo, useState, useEffect, Fragment, Children, cloneElement, isValidElement, createElement } from "react";
 import { l as libExports } from "../../_virtual/index.js";
 import { create } from "../../helpers/bem.js";
 import { isString } from "../../helpers/validations.js";
@@ -15,9 +15,15 @@ import { Headline } from "../headline/Headline.js";
 import { AnimatedText } from "../animatedText/AnimatedText.js";
 const bem = create(styles, "RichText");
 const xssOptions = (() => {
-  const wl = typeof libExports.getDefaultWhiteList === "function" ? libExports.getDefaultWhiteList() : {};
+  const wl = typeof libExports.getDefaultWhiteList === "function" ? libExports.getDefaultWhiteList() : (
+    /* istanbul ignore next */
+    {}
+  );
   const add = /* @__PURE__ */ __name((tag) => {
-    wl[tag] = Array.from(/* @__PURE__ */ new Set([...wl[tag] ?? [], "class"]));
+    wl[tag] = Array.from(
+      /* @__PURE__ */ new Set([.../* istanbul ignore next */
+      wl[tag] ?? [], "class"])
+    );
   }, "add");
   add("pre");
   add("code");
@@ -28,7 +34,10 @@ const xssOptions = (() => {
   };
 })();
 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");
+const withKey = /* @__PURE__ */ __name((el, key) => isValidElement(el) ? el.key == null ? cloneElement(el, { key }) : el : (
+  /* istanbul ignore next */
+  el
+), "withKey");
 const hasCodeBlocks = /* @__PURE__ */ __name((src) => /(^|\n)```/.test(src) || /<pre|<code/i.test(src), "hasCodeBlocks");
 const extractFenceLangs = /* @__PURE__ */ __name((src) => {
   const langs = /* @__PURE__ */ new Set();
@@ -80,7 +89,7 @@ function RichTextClient({
   children,
   animated,
   animationProps = {},
-  variant = "primary",
+  color = "primary",
   schema = {},
   itemProp,
   linkComponent,
@@ -97,16 +106,22 @@ function RichTextClient({
     ...schema
   };
   const headlineProps = { animationProps };
-  const renderAnimation = /* @__PURE__ */ __name((content) => {
+  const renderAnimation = /* @__PURE__ */ __name((content, idx) => {
     if (!Boolean(animated)) return content;
-    return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }) : content;
+    return typeof content === "string" ? /* @__PURE__ */ jsx(AnimatedText, { ...animationProps, children: content }, `anim-${idx}`) : (
+      /* istanbul ignore next */
+      content
+    );
   }, "renderAnimation");
-  const src = String(children ?? "");
+  const src = String(
+    /* istanbul ignore next */
+    children ?? ""
+  );
   const fastHtml = useMemo(() => {
     const parser2 = new B({ gfm: true, breaks: true });
     return libExports.filterXSS(parser2.parse(src), xssOptions);
   }, [src]);
-  const [html, setHtml] = useState("");
+  const [html, setHtml] = useState(fastHtml);
   useEffect(() => {
     let cancelled = false;
     void (async () => {
@@ -120,6 +135,7 @@ function RichTextClient({
       ]);
       const markedHighlight = (
         // support both module shapes
+        /* istanbul ignore next */
         mhMod.markedHighlight ?? mhMod.default
       );
       if (typeof markedHighlight !== "function") {
@@ -249,7 +265,11 @@ function RichTextClient({
       }
       case "a": {
         const cls = bem("a");
-        const href = elem.getAttribute("href") ?? "#";
+        const href = (
+          /* istanbul ignore next */
+          elem.getAttribute("href") ?? /* istanbul ignore next */
+          "#"
+        );
         const title = elem.getAttribute("title") ?? void 0;
         const linkText = normalize(keyedChildren.map(renderAnimation));
         const isHttp = /^https?:\/\//i.test(href);
@@ -263,7 +283,8 @@ function RichTextClient({
           const htmlTarget = elem.getAttribute("target") ?? void 0;
           const wantsBlank = htmlTarget === "_blank";
           target = wantsBlank ? "_blank" : void 0;
-          rel = wantsBlank ? "noopener" : void 0;
+          rel = /* istanbul ignore next */
+          wantsBlank ? "noopener" : void 0;
         }
         return /* @__PURE__ */ jsx(
           Link,
@@ -271,12 +292,12 @@ function RichTextClient({
             ...baseProps,
             "aria-label": childReactNodes.map(extractText).join(""),
             className: cls,
+            color: "primary",
             href,
             linkComponent,
             rel,
             target,
             title,
-            variant: "primary",
             children: linkText
           }
         );
@@ -303,13 +324,21 @@ function RichTextClient({
         const existing = elem.getAttribute("class");
         const src2 = elem.getAttribute("src");
         const alt = elem.getAttribute("alt");
-        return /* @__PURE__ */ jsx("span", { className: bem("image__wrapper"), children: /* @__PURE__ */ jsx(
+        const altStr = alt ?? "";
+        const srcStr = src2 ?? "";
+        return /* @__PURE__ */ jsx("span", { className: bem("image__wrapper"), children: srcStr ? /* @__PURE__ */ jsx(
           Image,
           {
             fill: true,
-            alt: alt ?? "",
+            alt: altStr,
             className: [bem("image"), existing].filter(Boolean).join(" "),
-            src: src2 ?? ""
+            src: srcStr
+          }
+        ) : /* @__PURE__ */ jsx(
+          "img",
+          {
+            alt: altStr,
+            className: [bem("image"), existing].filter(Boolean).join(" ")
           }
         ) });
       }
@@ -320,7 +349,10 @@ function RichTextClient({
       case "ol": {
         const cls = bem("ol");
         const startAttr = elem.getAttribute("start");
-        const start = isString(startAttr) ? parseInt(startAttr, 10) || 1 : 1;
+        const start = isString(startAttr) ? (
+          /* istanbul ignore next */
+          parseInt(startAttr, 10) || 1
+        ) : 1;
         const liElems = Array.from(elem.children).filter(
           (e) => e.tagName.toLowerCase() === "li"
         );
@@ -344,7 +376,7 @@ function RichTextClient({
             Icon,
             {
               className: bem("li__icon"),
-              color: variant,
+              color,
               name: "ArrowRight01Icon",
               size: 18
             },
@@ -359,8 +391,10 @@ function RichTextClient({
           className: [bem(tagName), existing].filter(Boolean).join(" ")
         };
         if (tagName === "img") {
-          props2.src = elem.getAttribute("src") ?? "";
-          props2.alt = elem.getAttribute("alt") ?? "";
+          props2.src = /* istanbul ignore next */
+          elem.getAttribute("src") ?? "";
+          props2.alt = /* istanbul ignore next */
+          elem.getAttribute("alt") ?? "";
           props2.loading = "lazy";
         }
         if (VOID_TAGS.has(tagName)) {
@@ -407,7 +441,8 @@ function RichTextClient({
 __name(RichTextClient, "RichTextClient");
 RichTextClient.displayName = "RichTextClient";
 function extractText(node) {
-  if (typeof node === "string" || typeof node === "number") {
+  if (typeof node === "string" || /* istanbul ignore next */
+  typeof node === "number") {
     return String(node);
   }
   if (Array.isArray(node)) {

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

@@ -125,10 +125,10 @@
  * content.
  */
 .prokodo-RichText__a {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__p {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -152,15 +152,12 @@
 .prokodo-RichText__p {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__p {
-  color: var(--color-grey-700);
-}
 .prokodo-RichText__pre {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   padding: 0;
-  border: 1px solid var(--color-grey-200);
-  border-radius: 5px;
-  background-color: var(--color-grey-50);
+  border: 1px solid var(--pk-color-border);
+  border-radius: var(--pk-radius-sm);
+  background-color: var(--pk-color-surface-raised);
   overflow-x: auto;
   overflow-wrap: break-word;
   font-weight: 400;
@@ -188,19 +185,16 @@ html[data-theme=dark] .prokodo-RichText__p {
 .prokodo-RichText__pre {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__pre {
-  background-color: var(--color-grey-50);
-}
 .prokodo-RichText__blockquote {
-  background-color: var(--color-grey-50);
-  border-left: 3px solid var(--color-grey-100);
-  padding: 1px 1rem;
+  background-color: var(--pk-color-surface-raised);
+  border-left: 3px solid var(--pk-color-border);
+  padding: 1px var(--pk-space-lg);
   margin: 0;
 }
 .prokodo-RichText__image {
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__image__wrapper {
   position: relative;
@@ -208,7 +202,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   width: 100%;
   height: 300px;
   overflow: hidden;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
@@ -217,14 +211,14 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__li {
   display: flex;
   align-items: flex-start;
-  padding-bottom: 0.25rem;
+  padding-bottom: var(--pk-space-xs);
   margin-top: 2px;
 }
 .prokodo-RichText__li__icon {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   padding-top: 2px;
   line-height: 1;
 }
@@ -233,6 +227,28 @@ html[data-theme=dark] .prokodo-RichText__pre {
   min-width: 0;
   overflow-wrap: anywhere;
   display: inline;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-RichText__li__content {
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol__decimal {
   display: flex;
@@ -240,11 +256,11 @@ html[data-theme=dark] .prokodo-RichText__pre {
   align-items: center;
   width: 19px;
   height: 19px;
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
+  background-color: var(--pk-color-brand);
+  color: var(--pk-palette-white);
+  border: 1px solid var(--pk-color-brand);
   border-radius: 200px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,26 +290,26 @@ html[data-theme=dark] .prokodo-RichText__pre {
   display: -webkit-box;
 }
 .prokodo-RichText__ol > li icon--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol > li icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__ol > li icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-RichText__ol > li icon--info {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-RichText__ol > li icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-RichText__ol > li icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-RichText__ol > li icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-RichText__ol > li icon--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }

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

@@ -5,8 +5,14 @@ import { RichTextServer } from "./RichText.server.js";
 const RichText = createIsland({
   name: "RichText",
   Server: RichTextServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./RichText.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./RichText.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   RichText

package/dist/components/rich-text/RichText.module.css

@@ -125,10 +125,10 @@
  * content.
  */
 .prokodo-RichText__a {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__p {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -152,15 +152,12 @@
 .prokodo-RichText__p {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__p {
-  color: var(--color-grey-700);
-}
 .prokodo-RichText__pre {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
   padding: 0;
-  border: 1px solid var(--color-grey-200);
-  border-radius: 5px;
-  background-color: var(--color-grey-50);
+  border: 1px solid var(--pk-color-border);
+  border-radius: var(--pk-radius-sm);
+  background-color: var(--pk-color-surface-raised);
   overflow-x: auto;
   overflow-wrap: break-word;
   font-weight: 400;
@@ -188,19 +185,16 @@ html[data-theme=dark] .prokodo-RichText__p {
 .prokodo-RichText__pre {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__pre {
-  background-color: var(--color-grey-50);
-}
 .prokodo-RichText__blockquote {
-  background-color: var(--color-grey-50);
-  border-left: 3px solid var(--color-grey-100);
-  padding: 1px 1rem;
+  background-color: var(--pk-color-surface-raised);
+  border-left: 3px solid var(--pk-color-border);
+  padding: 1px var(--pk-space-lg);
   margin: 0;
 }
 .prokodo-RichText__image {
   -o-object-fit: cover;
      object-fit: cover;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__image__wrapper {
   position: relative;
@@ -208,7 +202,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   width: 100%;
   height: 300px;
   overflow: hidden;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
 }
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
@@ -217,14 +211,14 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__li {
   display: flex;
   align-items: flex-start;
-  padding-bottom: 0.25rem;
+  padding-bottom: var(--pk-space-xs);
   margin-top: 2px;
 }
 .prokodo-RichText__li__icon {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   padding-top: 2px;
   line-height: 1;
 }
@@ -233,6 +227,28 @@ html[data-theme=dark] .prokodo-RichText__pre {
   min-width: 0;
   overflow-wrap: anywhere;
   display: inline;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-RichText__li__content {
+    font-size: 1rem;
+  }
+}
+.prokodo-RichText__li__content {
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol__decimal {
   display: flex;
@@ -240,11 +256,11 @@ html[data-theme=dark] .prokodo-RichText__pre {
   align-items: center;
   width: 19px;
   height: 19px;
-  background-color: var(--color-primary-500);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-500);
+  background-color: var(--pk-color-brand);
+  color: var(--pk-palette-white);
+  border: 1px solid var(--pk-color-brand);
   border-radius: 200px;
-  margin-right: 0.5rem;
+  margin-right: var(--pk-space-sm);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -274,26 +290,26 @@ html[data-theme=dark] .prokodo-RichText__pre {
   display: -webkit-box;
 }
 .prokodo-RichText__ol > li icon--inherit {
-  color: var(--color-grey-900);
+  color: var(--pk-color-fg);
 }
 .prokodo-RichText__ol > li icon--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
 }
 .prokodo-RichText__ol > li icon--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
 }
 .prokodo-RichText__ol > li icon--info {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-RichText__ol > li icon--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
 }
 .prokodo-RichText__ol > li icon--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
 }
 .prokodo-RichText__ol > li icon--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
 }
 .prokodo-RichText__ol > li icon--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }

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

@@ -12,6 +12,9 @@ function RichTextServer(props) {
     children,
     className,
     schema = {},
+    animated: _animated,
+    animationProps: _animationProps,
+    color: _color,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     itemProp,
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars