quirk-ui 0.1.193 → 0.1.194

package/dist/main.d.ts

@@ -42,6 +42,7 @@ import { PageProps } from './sanity/types/page';
 import { PageSection } from './sanity/types/pageSection';
 import { PortableTextBlock } from '@portabletext/types';
 import { PortableTextBlock as PortableTextBlock_2 } from '@portabletext/react';
+import { PortableTextComponents } from '@portabletext/react';
 import { QuoteBlockProps } from './next/blocks/QuoteBlock/QuoteBlock.types';
 import { QuoteBlockProps as QuoteBlockProps_2 } from './QuoteBlock.types';
 import { ReactNode } from 'react';
@@ -1594,7 +1595,7 @@ export { RenderLinkProps }
  * <HeroBlock {...section} renderRichText={renderRichText} />
  * <CardGridBlock {...section} renderRichText={renderRichText} />
  */
-export declare function renderRichText({ blocks, className, textOverride, animateText, }: RenderRichTextProps_3): default_2.ReactElement | null;
+export declare function renderRichText({ blocks, className, textOverride, animateText, components, }: RenderRichTextProps_3): default_2.ReactElement | null;
 
 export { RenderRichTextProps }
 
@@ -1645,6 +1646,10 @@ declare interface RichTextProps {
     className?: string;
     textOverride?: string;
     animateText?: boolean;
+    /** Optional component overrides merged on top of the defaults.
+     *  Use this to add custom marks, block styles, or types per-project
+     *  without modifying the library. Uses @portabletext/react mergeComponents. */
+    components?: Partial<PortableTextComponents>;
 }
 
 export { SanityCategory }

package/dist/next/ui/PortableTextRenderer/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index.css');require('../../../index11.css');const e=require("react/jsx-runtime"),k=require("react"),q=require("@portabletext/react"),w=require("../AnimatedSpan/index.cjs");;/* empty css                        */require("../../../core/components/Avatar/index.cjs");require("../../../core/context/ModalContext.cjs");require("../../../core/components/Checkbox/index.cjs");const L=require("../../../core/components/Text/index.cjs"),h=require("../../../core/components/Heading/index.cjs");require("react-dom");const B=require("../../../core/components/Table/index.cjs");require("../../../core/components/Tabs/index.cjs");require("../../../core/tokens/theme.cjs");const H=require("next/image"),S=require("../../hooks/useMediaQuery.cjs"),b="_container_1glyt_1",z="_divider_1glyt_32",F="_richTextImage_1glyt_50",I="_richTextLink_1glyt_58",W="_spacerSmall_1glyt_72",C="_spacerMedium_1glyt_77",P="_spacerLarge_1glyt_82",U="_codeBlock_1glyt_110",A="_codeBlockWrapper_1glyt_119",E="_codeFilename_1glyt_131",i={container:b,divider:z,richTextImage:F,richTextLink:I,spacerSmall:W,spacerMedium:C,spacerLarge:P,codeBlock:U,codeBlockWrapper:A,codeFilename:E};function Q(t){return{normal:({children:n})=>e.jsx(L.Text,{className:t,children:n}),h1:({children:n})=>e.jsx(h.Heading,{className:t,level:1,children:n}),h2:({children:n})=>e.jsx(h.Heading,{className:t,level:2,children:n}),h3:({children:n})=>e.jsx(h.Heading,{className:t,level:3,children:n}),h4:({children:n})=>e.jsx(h.Heading,{className:t,level:4,children:n}),h5:({children:n})=>e.jsx(h.Heading,{className:t,level:5,children:n}),h6:({children:n})=>e.jsx(h.Heading,{className:t,level:6,children:n}),quote:({children:n})=>e.jsx("blockquote",{className:t,children:n})}}const D={strong:({children:t})=>e.jsx("strong",{children:t}),em:({children:t})=>e.jsx("em",{children:t}),number:({children:t})=>e.jsx("span",{className:"inlineNumber",children:t}),left:({children:t})=>e.jsx("span",{className:"textLeft",children:t}),center:({children:t})=>e.jsx("span",{className:"textCenter",children:t}),right:({children:t})=>e.jsx("span",{className:"textRight",children:t}),inlineCode:({children:t})=>e.jsx("code",{children:t}),link:({children:t,value:n})=>{var s;const{linkType:r,internalUrl:l,externalUrl:m,email:d,phone:p,blank:_}=n??{};let a="#";return r==="external"&&m?a=m:r==="internal"&&((s=l==null?void 0:l.slug)!=null&&s.current)?a=`/${l.slug.current}`:r==="email"&&d?a=`mailto:${d}`:r==="phone"&&p&&(a=`tel:${p.replace(/\s/g,"")}`),e.jsx("a",{href:a,target:_?"_blank":void 0,rel:r==="external"?"noopener noreferrer":void 0,className:i.richTextLink,children:t})},textSize:({children:t,value:n})=>{const r=n!=null&&n.size?`text-${n.size}`:"";return e.jsx("span",{className:r,children:t})}};function G({baseClassName:t,previousTextRef:n,textOverride:r,animateText:l,isMobile:m}){const d=({children:s,value:c})=>{if(!c)return e.jsx(e.Fragment,{children:s});const{colorClass:o}=c;return r?l?e.jsx(w.AnimatedSpan,{className:o,text:r,prevText:n.current},"animated-span"):e.jsx("span",{className:o,children:r}):e.jsx("span",{className:o,children:s})},p=({children:s=[]})=>{const c=k.Children.count(s);return e.jsx("ul",{style:{columnCount:m?1:c>7?2:1},className:t,children:s})};let _;const a=()=>_;return _={marks:{...D,coloredText:d},block:Q(t),list:{bullet:p},types:{image:({value:s})=>{var o,j,x,T,y;if(!(s!=null&&s.imageUrls))return null;const c=((o=s.asset)==null?void 0:o.altText)||"Content image";return e.jsxs("figure",{className:`${t??""} ${i.richTextImage}`,children:[e.jsx(H,{src:s.imageUrls.medium,alt:c,width:1e3,height:800,style:{maxWidth:"100%",height:"auto"}}),(((j=s.asset)==null?void 0:j.title)||((x=s.asset)==null?void 0:x.description))&&e.jsxs("figcaption",{children:[((T=s.asset)==null?void 0:T.title)&&e.jsx("strong",{children:s.asset.title}),((y=s.asset)==null?void 0:y.description)&&e.jsx("p",{children:s.asset.description})]})]})},divider:()=>e.jsx("hr",{className:i.divider}),spacer:({value:s})=>{const c=(s==null?void 0:s.style)||"medium",o={small:i.spacerSmall,medium:i.spacerMedium,large:i.spacerLarge};return e.jsx("span",{className:o[c]??i.spacerMedium})},table:({value:s})=>{var $,N;if(!(($=s==null?void 0:s.rows)!=null&&$.length))return null;const{hasHeadingRow:c}=s,o=c?s.rows[0]:null,j=c?s.rows.slice(1):s.rows,x=o||j[0];if(!((N=x==null?void 0:x.cells)!=null&&N.length))return null;const T=x.cells.map((M,u)=>{var f;return{header:o?e.jsx(q.PortableText,{value:(f=o.cells[u])==null?void 0:f.content,components:a()}):`Column ${u+1}`,accessor:`col${u}`,cellRenderer:g=>g?e.jsx(q.PortableText,{value:g,components:a()}):null}}),y=j.map(M=>{var f;const u={};return(f=M.cells)==null||f.forEach((g,R)=>{u[`col${R}`]=g==null?void 0:g.content}),u});return e.jsx(B.Table,{hasHeadingRow:c,data:y,columns:T,className:`${t??""} ${c?"hasHeadingRow":""}`})},code:({value:s})=>s!=null&&s.code?e.jsxs("div",{className:`${i.codeBlockWrapper} ${t??""}`,children:[s.filename&&e.jsx("div",{className:i.codeFilename,children:s.filename}),e.jsx("pre",{className:i.codeBlock,children:e.jsx("code",{children:s.code})})]}):null}},_}const J=({blocks:t,className:n,textOverride:r,animateText:l})=>{const m=S.useMediaQuery("(max-width: 767px)"),d=k.useRef(r);k.useEffect(()=>{d.current=r},[r]);const p=k.useMemo(()=>G({baseClassName:n,previousTextRef:d,textOverride:r,animateText:l,isMobile:m}),[n,r,l,m]);return t?typeof t=="string"?e.jsx(L.Text,{className:n,children:t}):e.jsx("div",{className:`${i.container} portableTextContainer`,children:e.jsx(q.PortableText,{value:t,components:p})}):null};exports.RichText=J;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../../index.css');require('../../../index11.css');const e=require("react/jsx-runtime"),T=require("react"),q=require("@portabletext/react"),R=require("../AnimatedSpan/index.cjs");;/* empty css                        */require("../../../core/components/Avatar/index.cjs");require("../../../core/context/ModalContext.cjs");require("../../../core/components/Checkbox/index.cjs");const b=require("../../../core/components/Text/index.cjs"),_=require("../../../core/components/Heading/index.cjs");require("react-dom");const w=require("../../../core/components/Table/index.cjs");require("../../../core/components/Tabs/index.cjs");require("../../../core/tokens/theme.cjs");const B=require("next/image"),H=require("../../hooks/useMediaQuery.cjs"),I="_container_1glyt_1",S="_divider_1glyt_32",z="_richTextImage_1glyt_50",F="_richTextLink_1glyt_58",W="_spacerSmall_1glyt_72",C="_spacerMedium_1glyt_77",P="_spacerLarge_1glyt_82",U="_codeBlock_1glyt_110",A="_codeBlockWrapper_1glyt_119",E="_codeFilename_1glyt_131",a={container:I,divider:S,richTextImage:z,richTextLink:F,spacerSmall:W,spacerMedium:C,spacerLarge:P,codeBlock:U,codeBlockWrapper:A,codeFilename:E};function Q(t){return{normal:({children:n})=>e.jsx(b.Text,{className:t,children:n}),h1:({children:n})=>e.jsx(_.Heading,{className:t,level:1,children:n}),h2:({children:n})=>e.jsx(_.Heading,{className:t,level:2,children:n}),h3:({children:n})=>e.jsx(_.Heading,{className:t,level:3,children:n}),h4:({children:n})=>e.jsx(_.Heading,{className:t,level:4,children:n}),h5:({children:n})=>e.jsx(_.Heading,{className:t,level:5,children:n}),h6:({children:n})=>e.jsx(_.Heading,{className:t,level:6,children:n}),quote:({children:n})=>e.jsx("blockquote",{className:t,children:n})}}const D={strong:({children:t})=>e.jsx("strong",{children:t}),em:({children:t})=>e.jsx("em",{children:t}),number:({children:t})=>e.jsx("span",{className:"inlineNumber",children:t}),left:({children:t})=>e.jsx("span",{className:"textLeft",children:t}),center:({children:t})=>e.jsx("span",{className:"textCenter",children:t}),right:({children:t})=>e.jsx("span",{className:"textRight",children:t}),inlineCode:({children:t})=>e.jsx("code",{children:t}),link:({children:t,value:n})=>{var s;const{linkType:r,internalUrl:m,externalUrl:c,email:x,phone:d,blank:p}=n??{};let i="#";return r==="external"&&c?i=c:r==="internal"&&((s=m==null?void 0:m.slug)!=null&&s.current)?i=`/${m.slug.current}`:r==="email"&&x?i=`mailto:${x}`:r==="phone"&&d&&(i=`tel:${d.replace(/\s/g,"")}`),e.jsx("a",{href:i,target:p?"_blank":void 0,rel:r==="external"?"noopener noreferrer":void 0,className:a.richTextLink,children:t})},textSize:({children:t,value:n})=>{const r=n!=null&&n.size?`text-${n.size}`:"";return e.jsx("span",{className:r,children:t})}};function G({baseClassName:t,previousTextRef:n,textOverride:r,animateText:m,isMobile:c}){const x=({children:s,value:o})=>{if(!o)return e.jsx(e.Fragment,{children:s});const{colorClass:l}=o;return r?m?e.jsx(R.AnimatedSpan,{className:l,text:r,prevText:n.current},"animated-span"):e.jsx("span",{className:l,children:r}):e.jsx("span",{className:l,children:s})},d=({children:s=[]})=>{const o=T.Children.count(s);return e.jsx("ul",{style:{columnCount:c?1:o>7?2:1},className:t,children:s})};let p;const i=()=>p;return p={marks:{...D,coloredText:x},block:Q(t),list:{bullet:d},types:{image:({value:s})=>{var l,j,u,k,y;if(!(s!=null&&s.imageUrls))return null;const o=((l=s.asset)==null?void 0:l.altText)||"Content image";return e.jsxs("figure",{className:`${t??""} ${a.richTextImage}`,children:[e.jsx(B,{src:s.imageUrls.medium,alt:o,width:1e3,height:800,style:{maxWidth:"100%",height:"auto"}}),(((j=s.asset)==null?void 0:j.title)||((u=s.asset)==null?void 0:u.description))&&e.jsxs("figcaption",{children:[((k=s.asset)==null?void 0:k.title)&&e.jsx("strong",{children:s.asset.title}),((y=s.asset)==null?void 0:y.description)&&e.jsx("p",{children:s.asset.description})]})]})},divider:()=>e.jsx("hr",{className:a.divider}),spacer:({value:s})=>{const o=(s==null?void 0:s.style)||"medium",l={small:a.spacerSmall,medium:a.spacerMedium,large:a.spacerLarge};return e.jsx("span",{className:l[o]??a.spacerMedium})},table:({value:s})=>{var $,N;if(!(($=s==null?void 0:s.rows)!=null&&$.length))return null;const{hasHeadingRow:o}=s,l=o?s.rows[0]:null,j=o?s.rows.slice(1):s.rows,u=l||j[0];if(!((N=u==null?void 0:u.cells)!=null&&N.length))return null;const k=u.cells.map((M,g)=>{var f;return{header:l?e.jsx(q.PortableText,{value:(f=l.cells[g])==null?void 0:f.content,components:i()}):`Column ${g+1}`,accessor:`col${g}`,cellRenderer:h=>h?e.jsx(q.PortableText,{value:h,components:i()}):null}}),y=j.map(M=>{var f;const g={};return(f=M.cells)==null||f.forEach((h,L)=>{g[`col${L}`]=h==null?void 0:h.content}),g});return e.jsx(w.Table,{hasHeadingRow:o,data:y,columns:k,className:`${t??""} ${o?"hasHeadingRow":""}`})},code:({value:s})=>s!=null&&s.code?e.jsxs("div",{className:`${a.codeBlockWrapper} ${t??""}`,children:[s.filename&&e.jsx("div",{className:a.codeFilename,children:s.filename}),e.jsx("pre",{className:a.codeBlock,children:e.jsx("code",{children:s.code})})]}):null}},p}const J=({blocks:t,className:n,textOverride:r,animateText:m,components:c})=>{const x=H.useMediaQuery("(max-width: 767px)"),d=T.useRef(r);T.useEffect(()=>{d.current=r},[r]);const p=T.useMemo(()=>{const i=G({baseClassName:n,previousTextRef:d,textOverride:r,animateText:m,isMobile:x});return c?{...i,...c.marks&&{marks:{...i.marks,...c.marks}},...c.block&&{block:{...i.block,...c.block}},...c.types&&{types:{...i.types,...c.types}},...c.list&&{list:{...i.list,...c.list}},...c.listItem&&{listItem:{...i.listItem,...c.listItem}}}:i},[n,r,m,x,c]);return t?typeof t=="string"?e.jsx(b.Text,{className:n,children:t}):e.jsx("div",{className:`${a.container} portableTextContainer`,children:e.jsx(q.PortableText,{value:t,components:p})}):null};exports.RichText=J;

package/dist/next/ui/PortableTextRenderer/index.mjs

@@ -1,7 +1,7 @@
-import { jsx as n, jsxs as N, Fragment as S } from "react/jsx-runtime";
-import z, { useRef as F, useEffect as I, useMemo as W } from "react";
+import { jsx as s, jsxs as N, Fragment as R } from "react/jsx-runtime";
+import b, { useRef as S, useEffect as z, useMemo as F } from "react";
 import { PortableText as $ } from "@portabletext/react";
-import { AnimatedSpan as C } from "../AnimatedSpan/index.mjs";
+import { AnimatedSpan as W } from "../AnimatedSpan/index.mjs";
 import '../../../index.css';import '../../../index11.css';/* empty css                      */
 import "../../../core/components/Avatar/index.mjs";
 import "../../../core/context/ModalContext.mjs";
@@ -9,15 +9,15 @@ import "../../../core/components/Checkbox/index.mjs";
 import { Text as B } from "../../../core/components/Text/index.mjs";
 import { Heading as _ } from "../../../core/components/Heading/index.mjs";
 import "react-dom";
-import { Table as j } from "../../../core/components/Table/index.mjs";
+import { Table as C } from "../../../core/components/Table/index.mjs";
 import "../../../core/components/Tabs/index.mjs";
 import "../../../core/tokens/theme.mjs";
-import H from "next/image";
-import { useMediaQuery as U } from "../../hooks/useMediaQuery.mjs";
-const q = "_container_1glyt_1", E = "_divider_1glyt_32", b = "_richTextImage_1glyt_50", A = "_richTextLink_1glyt_58", P = "_spacerSmall_1glyt_72", Q = "_spacerMedium_1glyt_77", D = "_spacerLarge_1glyt_82", G = "_codeBlock_1glyt_110", J = "_codeBlockWrapper_1glyt_119", K = "_codeFilename_1glyt_131", i = {
-  container: q,
-  divider: E,
-  richTextImage: b,
+import j from "next/image";
+import { useMediaQuery as H } from "../../hooks/useMediaQuery.mjs";
+const U = "_container_1glyt_1", q = "_divider_1glyt_32", E = "_richTextImage_1glyt_50", A = "_richTextLink_1glyt_58", P = "_spacerSmall_1glyt_72", Q = "_spacerMedium_1glyt_77", D = "_spacerLarge_1glyt_82", G = "_codeBlock_1glyt_110", J = "_codeBlockWrapper_1glyt_119", K = "_codeFilename_1glyt_131", a = {
+  container: U,
+  divider: q,
+  richTextImage: E,
   richTextLink: A,
   spacerSmall: P,
   spacerMedium: Q,
@@ -26,198 +26,225 @@ const q = "_container_1glyt_1", E = "_divider_1glyt_32", b = "_richTextImage_1gl
   codeBlockWrapper: J,
   codeFilename: K
 };
-function X(t) {
+function X(e) {
   return {
-    normal: ({ children: r }) => /* @__PURE__ */ n(B, { className: t, children: r }),
-    h1: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 1, children: r }),
-    h2: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 2, children: r }),
-    h3: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 3, children: r }),
-    h4: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 4, children: r }),
-    h5: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 5, children: r }),
-    h6: ({ children: r }) => /* @__PURE__ */ n(_, { className: t, level: 6, children: r }),
-    quote: ({ children: r }) => /* @__PURE__ */ n("blockquote", { className: t, children: r })
+    normal: ({ children: r }) => /* @__PURE__ */ s(B, { className: e, children: r }),
+    h1: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 1, children: r }),
+    h2: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 2, children: r }),
+    h3: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 3, children: r }),
+    h4: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 4, children: r }),
+    h5: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 5, children: r }),
+    h6: ({ children: r }) => /* @__PURE__ */ s(_, { className: e, level: 6, children: r }),
+    quote: ({ children: r }) => /* @__PURE__ */ s("blockquote", { className: e, children: r })
   };
 }
 const Y = {
-  strong: ({ children: t }) => /* @__PURE__ */ n("strong", { children: t }),
-  em: ({ children: t }) => /* @__PURE__ */ n("em", { children: t }),
-  number: ({ children: t }) => /* @__PURE__ */ n("span", { className: "inlineNumber", children: t }),
-  left: ({ children: t }) => /* @__PURE__ */ n("span", { className: "textLeft", children: t }),
-  center: ({ children: t }) => /* @__PURE__ */ n("span", { className: "textCenter", children: t }),
-  right: ({ children: t }) => /* @__PURE__ */ n("span", { className: "textRight", children: t }),
-  inlineCode: ({ children: t }) => /* @__PURE__ */ n("code", { children: t }),
-  link: ({ children: t, value: r }) => {
-    var e;
-    const { linkType: o, internalUrl: l, externalUrl: m, email: p, phone: g, blank: u } = r ?? {};
-    let a = "#";
-    return o === "external" && m ? a = m : o === "internal" && ((e = l == null ? void 0 : l.slug) != null && e.current) ? a = `/${l.slug.current}` : o === "email" && p ? a = `mailto:${p}` : o === "phone" && g && (a = `tel:${g.replace(/\s/g, "")}`), /* @__PURE__ */ n(
+  strong: ({ children: e }) => /* @__PURE__ */ s("strong", { children: e }),
+  em: ({ children: e }) => /* @__PURE__ */ s("em", { children: e }),
+  number: ({ children: e }) => /* @__PURE__ */ s("span", { className: "inlineNumber", children: e }),
+  left: ({ children: e }) => /* @__PURE__ */ s("span", { className: "textLeft", children: e }),
+  center: ({ children: e }) => /* @__PURE__ */ s("span", { className: "textCenter", children: e }),
+  right: ({ children: e }) => /* @__PURE__ */ s("span", { className: "textRight", children: e }),
+  inlineCode: ({ children: e }) => /* @__PURE__ */ s("code", { children: e }),
+  link: ({ children: e, value: r }) => {
+    var t;
+    const { linkType: n, internalUrl: m, externalUrl: c, email: p, phone: d, blank: g } = r ?? {};
+    let o = "#";
+    return n === "external" && c ? o = c : n === "internal" && ((t = m == null ? void 0 : m.slug) != null && t.current) ? o = `/${m.slug.current}` : n === "email" && p ? o = `mailto:${p}` : n === "phone" && d && (o = `tel:${d.replace(/\s/g, "")}`), /* @__PURE__ */ s(
       "a",
       {
-        href: a,
-        target: u ? "_blank" : void 0,
-        rel: o === "external" ? "noopener noreferrer" : void 0,
-        className: i.richTextLink,
-        children: t
+        href: o,
+        target: g ? "_blank" : void 0,
+        rel: n === "external" ? "noopener noreferrer" : void 0,
+        className: a.richTextLink,
+        children: e
       }
     );
   },
-  textSize: ({ children: t, value: r }) => {
-    const o = r != null && r.size ? `text-${r.size}` : "";
-    return /* @__PURE__ */ n("span", { className: o, children: t });
+  textSize: ({ children: e, value: r }) => {
+    const n = r != null && r.size ? `text-${r.size}` : "";
+    return /* @__PURE__ */ s("span", { className: n, children: e });
   }
 };
 function Z({
-  baseClassName: t,
+  baseClassName: e,
   previousTextRef: r,
-  textOverride: o,
-  animateText: l,
-  isMobile: m
+  textOverride: n,
+  animateText: m,
+  isMobile: c
 }) {
   const p = ({
-    children: e,
-    value: s
+    children: t,
+    value: i
   }) => {
-    if (!s) return /* @__PURE__ */ n(S, { children: e });
-    const { colorClass: c } = s;
-    return o ? l ? /* @__PURE__ */ n(
-      C,
+    if (!i) return /* @__PURE__ */ s(R, { children: t });
+    const { colorClass: l } = i;
+    return n ? m ? /* @__PURE__ */ s(
+      W,
       {
-        className: c,
-        text: o,
+        className: l,
+        text: n,
         prevText: r.current
       },
       "animated-span"
-    ) : /* @__PURE__ */ n("span", { className: c, children: o }) : /* @__PURE__ */ n("span", { className: c, children: e });
-  }, g = ({ children: e = [] }) => {
-    const s = z.Children.count(e);
-    return /* @__PURE__ */ n(
+    ) : /* @__PURE__ */ s("span", { className: l, children: n }) : /* @__PURE__ */ s("span", { className: l, children: t });
+  }, d = ({ children: t = [] }) => {
+    const i = b.Children.count(t);
+    return /* @__PURE__ */ s(
       "ul",
       {
-        style: { columnCount: m ? 1 : s > 7 ? 2 : 1 },
-        className: t,
-        children: e
+        style: { columnCount: c ? 1 : i > 7 ? 2 : 1 },
+        className: e,
+        children: t
       }
     );
   };
-  let u;
-  const a = () => u;
-  return u = {
+  let g;
+  const o = () => g;
+  return g = {
     marks: {
       ...Y,
       coloredText: p
     },
-    block: X(t),
+    block: X(e),
     list: {
-      bullet: g
+      bullet: d
     },
     types: {
       // ── Inline image ────────────────────────────────────────────────────
-      image: ({ value: e }) => {
-        var c, x, d, y, T;
-        if (!(e != null && e.imageUrls)) return null;
-        const s = ((c = e.asset) == null ? void 0 : c.altText) || "Content image";
-        return /* @__PURE__ */ N("figure", { className: `${t ?? ""} ${i.richTextImage}`, children: [
-          /* @__PURE__ */ n(
-            H,
+      image: ({ value: t }) => {
+        var l, k, h, y, T;
+        if (!(t != null && t.imageUrls)) return null;
+        const i = ((l = t.asset) == null ? void 0 : l.altText) || "Content image";
+        return /* @__PURE__ */ N("figure", { className: `${e ?? ""} ${a.richTextImage}`, children: [
+          /* @__PURE__ */ s(
+            j,
             {
-              src: e.imageUrls.medium,
-              alt: s,
+              src: t.imageUrls.medium,
+              alt: i,
               width: 1e3,
               height: 800,
               style: { maxWidth: "100%", height: "auto" }
             }
           ),
-          (((x = e.asset) == null ? void 0 : x.title) || ((d = e.asset) == null ? void 0 : d.description)) && /* @__PURE__ */ N("figcaption", { children: [
-            ((y = e.asset) == null ? void 0 : y.title) && /* @__PURE__ */ n("strong", { children: e.asset.title }),
-            ((T = e.asset) == null ? void 0 : T.description) && /* @__PURE__ */ n("p", { children: e.asset.description })
+          (((k = t.asset) == null ? void 0 : k.title) || ((h = t.asset) == null ? void 0 : h.description)) && /* @__PURE__ */ N("figcaption", { children: [
+            ((y = t.asset) == null ? void 0 : y.title) && /* @__PURE__ */ s("strong", { children: t.asset.title }),
+            ((T = t.asset) == null ? void 0 : T.description) && /* @__PURE__ */ s("p", { children: t.asset.description })
           ] })
         ] });
       },
       // ── Divider ─────────────────────────────────────────────────────────
-      divider: () => /* @__PURE__ */ n("hr", { className: i.divider }),
+      divider: () => /* @__PURE__ */ s("hr", { className: a.divider }),
       // ── Spacer ──────────────────────────────────────────────────────────
-      spacer: ({ value: e }) => {
-        const s = (e == null ? void 0 : e.style) || "medium", c = {
-          small: i.spacerSmall,
-          medium: i.spacerMedium,
-          large: i.spacerLarge
+      spacer: ({ value: t }) => {
+        const i = (t == null ? void 0 : t.style) || "medium", l = {
+          small: a.spacerSmall,
+          medium: a.spacerMedium,
+          large: a.spacerLarge
         };
-        return /* @__PURE__ */ n("span", { className: c[s] ?? i.spacerMedium });
+        return /* @__PURE__ */ s("span", { className: l[i] ?? a.spacerMedium });
       },
       // ── Table ────────────────────────────────────────────────────────────
-      table: ({ value: e }) => {
+      table: ({ value: t }) => {
         var L, M;
-        if (!((L = e == null ? void 0 : e.rows) != null && L.length)) return null;
-        const { hasHeadingRow: s } = e, c = s ? e.rows[0] : null, x = s ? e.rows.slice(1) : e.rows, d = c || x[0];
-        if (!((M = d == null ? void 0 : d.cells) != null && M.length)) return null;
-        const y = d.cells.map((w, h) => {
-          var k;
+        if (!((L = t == null ? void 0 : t.rows) != null && L.length)) return null;
+        const { hasHeadingRow: i } = t, l = i ? t.rows[0] : null, k = i ? t.rows.slice(1) : t.rows, h = l || k[0];
+        if (!((M = h == null ? void 0 : h.cells) != null && M.length)) return null;
+        const y = h.cells.map((w, f) => {
+          var x;
           return {
-            header: c ? /* @__PURE__ */ n(
+            header: l ? /* @__PURE__ */ s(
               $,
               {
-                value: (k = c.cells[h]) == null ? void 0 : k.content,
-                components: a()
+                value: (x = l.cells[f]) == null ? void 0 : x.content,
+                components: o()
               }
-            ) : `Column ${h + 1}`,
-            accessor: `col${h}`,
-            cellRenderer: (f) => f ? /* @__PURE__ */ n(
+            ) : `Column ${f + 1}`,
+            accessor: `col${f}`,
+            cellRenderer: (u) => u ? /* @__PURE__ */ s(
               $,
               {
-                value: f,
-                components: a()
+                value: u,
+                components: o()
               }
             ) : null
           };
-        }), T = x.map((w) => {
-          var k;
-          const h = {};
-          return (k = w.cells) == null || k.forEach((f, R) => {
-            h[`col${R}`] = f == null ? void 0 : f.content;
-          }), h;
+        }), T = k.map((w) => {
+          var x;
+          const f = {};
+          return (x = w.cells) == null || x.forEach((u, I) => {
+            f[`col${I}`] = u == null ? void 0 : u.content;
+          }), f;
         });
-        return /* @__PURE__ */ n(
-          j,
+        return /* @__PURE__ */ s(
+          C,
           {
-            hasHeadingRow: s,
+            hasHeadingRow: i,
             data: T,
             columns: y,
-            className: `${t ?? ""} ${s ? "hasHeadingRow" : ""}`
+            className: `${e ?? ""} ${i ? "hasHeadingRow" : ""}`
           }
         );
       },
       // ── Code block ──────────────────────────────────────────────────────
-      code: ({ value: e }) => e != null && e.code ? /* @__PURE__ */ N("div", { className: `${i.codeBlockWrapper} ${t ?? ""}`, children: [
-        e.filename && /* @__PURE__ */ n("div", { className: i.codeFilename, children: e.filename }),
-        /* @__PURE__ */ n("pre", { className: i.codeBlock, children: /* @__PURE__ */ n("code", { children: e.code }) })
+      code: ({ value: t }) => t != null && t.code ? /* @__PURE__ */ N("div", { className: `${a.codeBlockWrapper} ${e ?? ""}`, children: [
+        t.filename && /* @__PURE__ */ s("div", { className: a.codeFilename, children: t.filename }),
+        /* @__PURE__ */ s("pre", { className: a.codeBlock, children: /* @__PURE__ */ s("code", { children: t.code }) })
       ] }) : null
     }
-  }, u;
+  }, g;
 }
-const ge = ({
-  blocks: t,
+const gt = ({
+  blocks: e,
   className: r,
-  textOverride: o,
-  animateText: l
+  textOverride: n,
+  animateText: m,
+  components: c
 }) => {
-  const m = U("(max-width: 767px)"), p = F(o);
-  I(() => {
-    p.current = o;
-  }, [o]);
-  const g = W(
-    () => Z({
-      baseClassName: r,
-      previousTextRef: p,
-      textOverride: o,
-      animateText: l,
-      isMobile: m
-    }),
+  const p = H("(max-width: 767px)"), d = S(n);
+  z(() => {
+    d.current = n;
+  }, [n]);
+  const g = F(
+    () => {
+      const o = Z({
+        baseClassName: r,
+        previousTextRef: d,
+        textOverride: n,
+        animateText: m,
+        isMobile: p
+      });
+      return c ? {
+        ...o,
+        ...c.marks && {
+          marks: { ...o.marks, ...c.marks }
+        },
+        ...c.block && {
+          block: {
+            ...o.block,
+            ...c.block
+          }
+        },
+        ...c.types && {
+          types: { ...o.types, ...c.types }
+        },
+        ...c.list && {
+          list: { ...o.list, ...c.list }
+        },
+        ...c.listItem && {
+          listItem: {
+            ...o.listItem,
+            ...c.listItem
+          }
+        }
+      } : o;
+    },
     // previousTextRef intentionally omitted — it's a stable ref object.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [r, o, l, m]
+    [r, n, m, p, c]
   );
-  return t ? typeof t == "string" ? /* @__PURE__ */ n(B, { className: r, children: t }) : /* @__PURE__ */ n("div", { className: `${i.container} portableTextContainer`, children: /* @__PURE__ */ n($, { value: t, components: g }) }) : null;
+  return e ? typeof e == "string" ? /* @__PURE__ */ s(B, { className: r, children: e }) : /* @__PURE__ */ s("div", { className: `${a.container} portableTextContainer`, children: /* @__PURE__ */ s($, { value: e, components: g }) }) : null;
 };
 export {
-  ge as RichText
+  gt as RichText
 };

package/dist/next/utils/blockRenderers.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../ui/PortableTextRenderer/index.cjs"),l=require("../ui/CallToAction/index.cjs");function o(e){return e.flatMap(r=>r.children??[]).map(r=>r.text??"").join("")}function x({blocks:e,className:r,textOverride:n,animateText:t}){return e!=null&&e.length?i.jsx(u.RichText,{blocks:e,className:r,textOverride:n,animateText:t}):null}function c({alignment:e,spacing:r,items:n,className:t}){return n!=null&&n.length?i.jsx(l.CallToAction,{alignment:e,items:n,className:t,spacing:r}):null}exports.extractText=o;exports.renderCallToAction=c;exports.renderRichText=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),l=require("../ui/PortableTextRenderer/index.cjs"),o=require("../ui/CallToAction/index.cjs");function x(e){return e.flatMap(r=>r.children??[]).map(r=>r.text??"").join("")}function c({blocks:e,className:r,textOverride:n,animateText:t,components:u}){return e!=null&&e.length?i.jsx(l.RichText,{blocks:e,className:r,textOverride:n,animateText:t,components:u}):null}function a({alignment:e,spacing:r,items:n,className:t}){return n!=null&&n.length?i.jsx(o.CallToAction,{alignment:e,items:n,className:t,spacing:r}):null}exports.extractText=x;exports.renderCallToAction=a;exports.renderRichText=c;

package/dist/next/utils/blockRenderers.mjs

@@ -1,33 +1,35 @@
 import { jsx as o } from "react/jsx-runtime";
-import { RichText as u } from "../ui/PortableTextRenderer/index.mjs";
-import { CallToAction as f } from "../ui/CallToAction/index.mjs";
-function a(r) {
+import { RichText as f } from "../ui/PortableTextRenderer/index.mjs";
+import { CallToAction as i } from "../ui/CallToAction/index.mjs";
+function p(r) {
   return r.flatMap((n) => n.children ?? []).map((n) => n.text ?? "").join("");
 }
-function p({
+function h({
   blocks: r,
   className: n,
   textOverride: t,
-  animateText: e
+  animateText: e,
+  components: u
 }) {
   return r != null && r.length ? /* @__PURE__ */ o(
-    u,
+    f,
     {
       blocks: r,
       className: n,
       textOverride: t,
-      animateText: e
+      animateText: e,
+      components: u
     }
   ) : null;
 }
-function h({
+function T({
   alignment: r,
   spacing: n,
   items: t,
   className: e
 }) {
   return t != null && t.length ? /* @__PURE__ */ o(
-    f,
+    i,
     {
       alignment: r,
       items: t,
@@ -37,7 +39,7 @@ function h({
   ) : null;
 }
 export {
-  a as extractText,
-  h as renderCallToAction,
-  p as renderRichText
+  p as extractText,
+  T as renderCallToAction,
+  h as renderRichText
 };

package/dist/next.d.ts

@@ -29,6 +29,7 @@ import { MarkdownBlockProps } from './next/blocks/MarkdownBlock/MarkdownBlock.ty
 import { MarkdownBlockProps as MarkdownBlockProps_2 } from './MarkdownBlock.types';
 import { PortableTextBlock } from '@portabletext/react';
 import { PortableTextBlock as PortableTextBlock_2 } from '@portabletext/types';
+import { PortableTextComponents } from '@portabletext/react';
 import { QuoteBlockProps } from './next/blocks/QuoteBlock/QuoteBlock.types';
 import { QuoteBlockProps as QuoteBlockProps_2 } from './QuoteBlock.types';
 import { RenderCallToActionProps } from '../../../core/types/renderers';
@@ -282,7 +283,7 @@ export declare function renderCallToAction({ alignment, spacing, items, classNam
  * <HeroBlock {...section} renderRichText={renderRichText} />
  * <CardGridBlock {...section} renderRichText={renderRichText} />
  */
-export declare function renderRichText({ blocks, className, textOverride, animateText, }: RenderRichTextProps): default_2.ReactElement | null;
+export declare function renderRichText({ blocks, className, textOverride, animateText, components, }: RenderRichTextProps): default_2.ReactElement | null;
 
 export { RenderRichTextProps }
 
@@ -325,6 +326,10 @@ declare interface RichTextProps {
     className?: string;
     textOverride?: string;
     animateText?: boolean;
+    /** Optional component overrides merged on top of the defaults.
+     *  Use this to add custom marks, block styles, or types per-project
+     *  without modifying the library. Uses @portabletext/react mergeComponents. */
+    components?: Partial<PortableTextComponents>;
 }
 
 export declare function SegmentCard({ eyebrow, title, description, image, callToAction, onHover, onLeave, renderImage, renderRichText, }: SegmentCardProps): JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.1.193",
+  "version": "0.1.194",
   "type": "module",
   "exports": {
     ".": {