@prokodo/ui 0.0.53 → 0.0.55

package/dist/types/components/post-item/PostItem.model.d.ts

@@ -42,6 +42,7 @@ export type PostItemPropsBase = {
     className?: string;
     classes?: PostItemClasses;
     componentsProps?: PostItemComponentsProps;
+    wordCount?: number;
     readCount?: number;
     title: PostItemHeadline;
     author?: PostItemAuthorProps;
@@ -56,6 +57,5 @@ export type PostItemPropsBase = {
 };
 export type PostItemProps = PostItemPropsBase & (PostItemWithDate | PostItemWithoutDate);
 export type PostItemViewPrivateProps = {
-    wordCount: number;
     readMinutes: number;
 };

package/dist/types/components/post-teaser/PostTeaser.model.d.ts

@@ -51,6 +51,7 @@ export type PostTeaserPropsBase = {
     classes?: PostTeaserClasses;
     componentsProps?: PostTeaserComponentsProps;
     readCount?: number;
+    wordCount?: number;
     title: PostTeaserHeadline;
     content?: string;
     hideCategory?: boolean;
@@ -64,7 +65,6 @@ export type PostTeaserPropsBase = {
 export type PostTeaserProps = PostTeaserPropsBase & (PostTeaserWithDate | PostTeaserWithoutDate);
 export type PostTeaserViewProps = PostTeaserProps & {
     isHovered?: boolean;
-    wordCount: number;
     readMinutes: number;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;

package/dist/types/components/rich-text/RichText.client.d.ts

@@ -1,6 +1,6 @@
 import { type JSX } from "react";
 import type { RichTextProps } from "./RichText.model";
-export declare function RichTextClient({ children, animated, animationProps, variant, schema, itemProp, linkComponent, className, overrideParagraph, ...props }: RichTextProps): JSX.Element;
+export declare function RichTextClient({ children, animated, animationProps, variant, schema, itemProp, linkComponent, className, overrideParagraph, codeTheme, ...props }: RichTextProps): JSX.Element;
 export declare namespace RichTextClient {
     var displayName: string;
 }

package/dist/types/components/rich-text/RichText.d.ts

@@ -8,6 +8,11 @@ export declare const RichText: import("react").ComponentType<{
     linkComponent?: import("../link").LinkProps["linkComponent"];
     className?: string;
     overrideParagraph?: (textContent: string) => import("react").ReactNode;
+    codeTheme?: {
+        href?: string;
+        name?: string;
+        version?: "auto" | string;
+    };
 } & import("react").HTMLAttributes<HTMLDivElement> & {
     priority?: boolean;
 }>;

package/dist/types/components/rich-text/RichText.lazy.d.ts

@@ -8,6 +8,11 @@ declare const _default: import("react").ComponentType<{
     linkComponent?: import("../link").LinkProps["linkComponent"];
     className?: string;
     overrideParagraph?: (textContent: string) => import("react").ReactNode;
+    codeTheme?: {
+        href?: string;
+        name?: string;
+        version?: "auto" | string;
+    };
 } & import("react").HTMLAttributes<HTMLDivElement> & {
     priority?: boolean;
 }>;

package/dist/types/components/rich-text/RichText.model.d.ts

@@ -13,4 +13,9 @@ export type RichTextProps = {
     linkComponent?: LinkProps["linkComponent"];
     className?: string;
     overrideParagraph?: (textContent: string) => ReactNode;
+    codeTheme?: {
+        href?: string;
+        name?: string;
+        version?: "auto" | string;
+    };
 } & HTMLAttributes<HTMLDivElement>;

package/dist/ui.css

@@ -653,10 +653,10 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
-.prokodo-RichText__a, .prokodo-RichText a {
+.prokodo-RichText__a {
   color: var(--color-primary-500);
 }
-.prokodo-RichText__p, .prokodo-RichText p {
+.prokodo-RichText__p {
   color: var(--color-grey-500);
   font-weight: 400;
   font-size: 1.125rem;
@@ -669,26 +669,26 @@
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__p, .prokodo-RichText p {
+  .prokodo-RichText__p {
     font-size: 1rem;
     line-height: 1.45;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__p, .prokodo-RichText p {
+  .prokodo-RichText__p {
     font-size: 1rem;
     line-height: 1.45;
   }
 }
-.prokodo-RichText__p, .prokodo-RichText p {
+.prokodo-RichText__p {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__p, html[data-theme=dark] .prokodo-RichText p {
+html[data-theme=dark] .prokodo-RichText__p {
   color: var(--color-grey-700);
 }
-.prokodo-RichText__pre, .prokodo-RichText pre {
+.prokodo-RichText__pre {
   color: var(--color-grey-500);
-  padding: 1rem 0.75rem;
+  padding: 0;
   border: 1px solid var(--color-grey-200);
   border-radius: 5px;
   background-color: var(--color-grey-50);
@@ -705,55 +705,63 @@ html[data-theme=dark] .prokodo-RichText__p, html[data-theme=dark] .prokodo-RichT
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__pre, .prokodo-RichText pre {
+  .prokodo-RichText__pre {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__pre, .prokodo-RichText pre {
+  .prokodo-RichText__pre {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
-.prokodo-RichText__pre, .prokodo-RichText pre {
+.prokodo-RichText__pre {
   text-align: inherit;
 }
-html[data-theme=dark] .prokodo-RichText__pre, html[data-theme=dark] .prokodo-RichText pre {
+html[data-theme=dark] .prokodo-RichText__pre {
   color: var(--color-grey-300);
   background-color: var(--color-grey-50);
 }
-.prokodo-RichText__ul, .prokodo-RichText__ol, .prokodo-RichText ul, .prokodo-RichText ol {
+.prokodo-RichText__blockquote {
+  background-color: var(--color-grey-50);
+  border-left: 3px solid var(--color-grey-100);
+  padding: 1px 1rem;
+  margin: 0;
+}
+.prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
   color: var(--color-grey-500);
 }
-.prokodo-RichText__li, .prokodo-RichText li {
+.prokodo-RichText__li {
   display: flex;
   align-items: flex-start;
   padding-bottom: 0.25rem;
+  margin-top: 2px;
 }
-.prokodo-RichText__li__icon, .prokodo-RichText li__icon {
+.prokodo-RichText__li__icon {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   margin-right: 0.5rem;
+  padding-top: 2px;
   line-height: 1;
 }
-.prokodo-RichText__li__content, .prokodo-RichText li__content {
+.prokodo-RichText__li__content {
   flex: 1 1 auto;
   min-width: 0;
   overflow-wrap: anywhere;
   display: inline;
 }
-.prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
+.prokodo-RichText__ol__decimal {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 19px;
   height: 19px;
   background-color: var(--color-primary-500);
-  color: var(--color-grey-500);
+  color: var(--color-white);
   border: 1px solid var(--color-primary-500);
   border-radius: 200px;
   margin-right: 0.5rem;
@@ -768,45 +776,45 @@ html[data-theme=dark] .prokodo-RichText__pre, html[data-theme=dark] .prokodo-Ric
   text-decoration: none;
 }
 @media screen and (min-width: 480px) {
-  .prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
+  .prokodo-RichText__ol__decimal {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
 @media screen and (min-width: 960px) {
-  .prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
+  .prokodo-RichText__ol__decimal {
     font-size: 0.875rem;
     line-height: 1.4;
   }
 }
-.prokodo-RichText__ol__decimal, .prokodo-RichText ol__decimal {
+.prokodo-RichText__ol__decimal {
   text-align: inherit;
 }
-.prokodo-RichText__ol li, .prokodo-RichText ol li {
+.prokodo-RichText__ol > li {
   display: -webkit-box;
 }
-.prokodo-RichText__ol li icon--inherit, .prokodo-RichText ol li icon--inherit {
+.prokodo-RichText__ol > li icon--inherit {
   color: var(--color-grey-900);
 }
-.prokodo-RichText__ol li icon--primary, .prokodo-RichText ol li icon--primary {
+.prokodo-RichText__ol > li icon--primary {
   color: var(--color-primary-500);
 }
-.prokodo-RichText__ol li icon--secondary, .prokodo-RichText ol li icon--secondary {
+.prokodo-RichText__ol > li icon--secondary {
   color: var(--color-secondary-500);
 }
-.prokodo-RichText__ol li icon--info, .prokodo-RichText ol li icon--info {
+.prokodo-RichText__ol > li icon--info {
   color: var(--color-grey-500);
 }
-.prokodo-RichText__ol li icon--success, .prokodo-RichText ol li icon--success {
+.prokodo-RichText__ol > li icon--success {
   color: var(--color-success);
 }
-.prokodo-RichText__ol li icon--error, .prokodo-RichText ol li icon--error {
+.prokodo-RichText__ol > li icon--error {
   color: var(--color-error);
 }
-.prokodo-RichText__ol li icon--warning, .prokodo-RichText ol li icon--warning {
+.prokodo-RichText__ol > li icon--warning {
   color: var(--color-warning);
 }
-.prokodo-RichText__ol li icon--white, .prokodo-RichText ol li icon--white {
+.prokodo-RichText__ol > li icon--white {
   color: var(--color-white);
 }/* stylelint-disable */
 /**
@@ -3053,26 +3061,33 @@ html[data-theme=dark] .prokodo-Card__background {
   width: 100%;
 }
 .prokodo-Input__label {
-  position: absolute;
-  left: 1.5rem;
-  top: 1.75rem;
   transform-origin: top left;
-  /* start centered vertically, at full size */
-  transform: translateY(-50%) scale(1);
   transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
-  padding: 0;
-  font-size: 1rem;
+  padding-bottom: 0.5rem;
   color: var(--color-grey-600);
   z-index: 1;
   pointer-events: none;
 }
-.prokodo-Input__label--is-focused {
-  /* lift up and shrink */
-  transform: translateY(-150%) scale(0.75);
-  color: var(--color-primary-500);
-  /* white background behind text so it “floats” */
-  background-color: var(--color-white);
-  padding: 0 0.25rem;
+@media screen and (min-width: 960px) {
+  .prokodo-Input__label {
+    position: absolute;
+    left: 1.5rem;
+    font-size: 1.125rem;
+    top: 1.75rem;
+    /* start centered vertically, at full size */
+    transform: translateY(-50%) scale(1);
+    padding: 0;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Input__label--is-focused {
+    /* lift up and shrink */
+    transform: translateY(-150%) scale(0.75);
+    color: var(--color-primary-500);
+    /* white background behind text so it “floats” */
+    background-color: var(--color-white);
+    padding: 0 0.25rem;
+  }
 }
 .prokodo-Input__inner {
   position: relative;
@@ -3145,6 +3160,9 @@ html[data-theme=dark] .prokodo-Card__background {
     line-height: 1.45;
   }
 }
+.prokodo-Input__input__node {
+  font-size: 1rem;
+}
 html[data-theme=dark] .prokodo-Input__input__node {
   background-color: var(--color-grey-200);
 }
@@ -3410,6 +3428,9 @@ html[data-theme=dark] .prokodo-Input__helperText {
     line-height: 1.5;
   }
 }
+.prokodo-Label {
+  font-size: 1rem;
+}
 .prokodo-Label {
   filter: drop-shadow(var(--elevation-1--text));
 }
@@ -4353,18 +4374,28 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   width: 100%;
 }
 .prokodo-Select__label {
-  position: absolute;
-  left: 1.5rem;
-  top: 1.75rem;
+  position: relative;
   transform-origin: top left;
-  /* start centered vertically, at full size */
-  transform: translateY(-150%) scale(0.75);
-  padding: 0 0.25rem;
+  padding-bottom: 0.5rem;
   font-size: 1rem;
   color: var(--color-primary-500);
   z-index: 1;
   pointer-events: none;
-  background-color: var(--color-white);
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Select__label {
+    position: absolute;
+    left: 1.5rem;
+    top: 1.75rem;
+    padding: 0 0.25rem;
+    /* start centered vertically, at full size */
+    transform: translateY(-150%) scale(0.75);
+    background-color: var(--color-white);
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
 }
 .prokodo-Select {
   /* ───────────────── field (container for button + listbox) */
@@ -4472,6 +4503,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
     line-height: 1.45;
   }
 }
+.prokodo-Select__button__inner {
+  font-size: 1rem;
+}
 html[data-theme=dark] .prokodo-Select__button__inner {
   background: var(--color-grey-200);
 }
@@ -4550,6 +4584,9 @@ html[data-theme=dark] .prokodo-Select__button__inner {
     line-height: 1.45;
   }
 }
+.prokodo-Select__item {
+  font-size: 1rem;
+}
 .prokodo-Select__item:last-child {
   border-bottom-left-radius: 1.5625rem;
   border-bottom-right-radius: 1.5625rem;
@@ -4581,10 +4618,10 @@ html[data-theme=dark] .prokodo-Select__button__inner {
   /* ───────────────── checkbox for multi-select */
 }
 .prokodo-Select__checkbox {
-  width: 18px;
-  height: 18px;
-  margin-right: 0.75rem;
   position: relative;
+  min-width: 18px;
+  min-height: 18px;
+  margin-right: 0.75rem;
   transform: scale(1.2);
   cursor: pointer;
   border: none;
@@ -5113,6 +5150,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
   background-color: #dedede;
   border-radius: 50%;
   top: 50%;
+  text-align: center;
   transform: translateX(-50%) translateY(-50%);
   z-index: 3;
 }
@@ -5146,6 +5184,10 @@ html[data-theme=dark] .prokodo-Select__helperText {
     line-height: 1.45;
   }
 }
+.prokodo-Slider__mark__label {
+  text-align: center;
+  font-size: 0.8rem;
+}
 @media screen and (min-width: 480px) {
   .prokodo-Slider__mark__label {
     position: static;
@@ -5153,9 +5195,9 @@ html[data-theme=dark] .prokodo-Select__helperText {
     height: auto;
     left: auto;
     text-indent: inherit;
-    text-align: center;
     margin-left: 50%;
     min-width: 100px;
+    font-size: 1rem;
   }
 }
 .prokodo-Slider__input {
@@ -5366,6 +5408,7 @@ html[data-theme=dark] .prokodo-Select__helperText {
 .prokodo-Switch__label {
   width: 100%;
   display: grid;
+  font-size: 1rem;
   grid-template-columns: 100%;
   grid-gap: 16px;
   gap: 16px;
@@ -6199,9 +6242,6 @@ html[data-theme=dark] .prokodo-Select__helperText {
 html[data-theme=dark] .prokodo-List__item__icon {
   background-color: var(--color-grey-400);
 }
-.prokodo-List__item__icon__svg {
-  color: var(--color-black);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "type": "module",
   "description": "UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.",
   "sideEffects": false,
@@ -209,8 +209,10 @@
     "@googlemaps/js-api-loader": "^1.16.6",
     "@lottiefiles/dotlottie-react": "^0.7.2",
     "dayjs": "^1.11.13",
+    "highlight.js": "^11.11.1",
     "markdown-it": "^14.1.0",
     "marked": "^15.0.12",
+    "marked-highlight": "^2.2.2",
     "react-bem-helper": "^1.4.1",
     "typescript": "5.5.3",
     "xss": "^1.0.15"

package/dist/helpers/calculation.js

@@ -1,6 +0,0 @@
-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 {
-  calculateWordCount
-};