{"_id":"@commercetools-demo/puck-components","_rev":"4-77670658972f5b5abb9f32e13d7744eb","name":"@commercetools-demo/puck-components","dist-tags":{"latest":"0.8.3"},"versions":{"0.8.0":{"name":"@commercetools-demo/puck-components","version":"0.8.0","_id":"@commercetools-demo/puck-components@0.8.0","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"dist":{"shasum":"f76507c99e36d4f92f38b05e2c7755c44aa1f37a","tarball":"https://registry.npmjs.org/@commercetools-demo/puck-components/-/puck-components-0.8.0.tgz","fileCount":7,"integrity":"sha512-9KSX9TDtWVShUKUhnD2fDnxRYO3VByAvIhY5P+sL/N2oZerDfcxuwWM/+WE9Ky1jTvYZ2KgXyDLwPH//ZbdQBw==","signatures":[{"sig":"MEQCIFsezqh3jcSnw3klrdHgeDsNy1hrbum4qtmcgnB3bbFVAiAWfsVTF8x9CkhGQsxNgQXcAbJY8lujzll1ZqdngjD8gQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":571396},"main":"dist/index.js","_from":"file:/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.cJlzm7vU7y.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","typecheck":"tsc --noEmit","build:watch":"tsup --watch"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"_resolved":"/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.cJlzm7vU7y.tgz","_integrity":"sha512-9KSX9TDtWVShUKUhnD2fDnxRYO3VByAvIhY5P+sL/N2oZerDfcxuwWM/+WE9Ky1jTvYZ2KgXyDLwPH//ZbdQBw==","_npmVersion":"10.9.4","description":"Nimbus-free Puck component render layer (visualize) + render config for storefronts","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@measured/puck":"^0.18.2","isomorphic-dompurify":"^3.18.0","@commercetools-demo/puck-api":"^0.8.0","@commercetools-demo/puck-types":"^0.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.0","typescript":"^5.7.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0","react-intl":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/puck-components_0.8.0_1783435039540_0.506556290430056","host":"s3://npm-registry-packages-npm-production"}},"0.8.1":{"name":"@commercetools-demo/puck-components","version":"0.8.1","_id":"@commercetools-demo/puck-components@0.8.1","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"dist":{"shasum":"5243fe4f46f1d1e3fb9382d317a601c4ad6c0797","tarball":"https://registry.npmjs.org/@commercetools-demo/puck-components/-/puck-components-0.8.1.tgz","fileCount":7,"integrity":"sha512-oJgNGkL2o+N+tKdkCWPCgxEO9nIPpGNweEbJqPcz+j25SZL4IQL5f+rwLN+GFr1QQ7V1drvYiuN1bVWQ31aGYQ==","signatures":[{"sig":"MEQCIFWvefFWahgRnEeiR1RwkJWaJsfgRv34Q05+wG9rDH+sAiA/hpq6oEWjwhcDFYVS+SrjOLRB12Lr9idE2O1TR7evjg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":571396},"main":"dist/index.js","_from":"file:/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.kcwA1t6aeC.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","typecheck":"tsc --noEmit","build:watch":"tsup --watch"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"_resolved":"/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.kcwA1t6aeC.tgz","_integrity":"sha512-oJgNGkL2o+N+tKdkCWPCgxEO9nIPpGNweEbJqPcz+j25SZL4IQL5f+rwLN+GFr1QQ7V1drvYiuN1bVWQ31aGYQ==","_npmVersion":"10.9.4","description":"Nimbus-free Puck component render layer (visualize) + render config for storefronts","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@measured/puck":"^0.18.2","isomorphic-dompurify":"^3.18.0","@commercetools-demo/puck-api":"^0.8.0","@commercetools-demo/puck-types":"^0.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.0","typescript":"^5.7.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0","react-intl":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/puck-components_0.8.1_1783436826101_0.5076359241391069","host":"s3://npm-registry-packages-npm-production"}},"0.8.2":{"name":"@commercetools-demo/puck-components","version":"0.8.2","_id":"@commercetools-demo/puck-components@0.8.2","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"dist":{"shasum":"20c943d022f8d2459055d61e84e5548174198bda","tarball":"https://registry.npmjs.org/@commercetools-demo/puck-components/-/puck-components-0.8.2.tgz","fileCount":8,"integrity":"sha512-KkLMRGii/K1SAh9RfHdmJ/unpKe1sftAJJQgo1gAiQqB2wklcrXpfF4tfwDNGZfnU6/qJcFbevUmoU4P+W66/w==","signatures":[{"sig":"MEUCIGYmpUP09yaK9MQcJ96VuKUc55BBu7ISqvTvSNeHRNNbAiEArFmpHw4n0Wgwlso/T+TR4tcFYdbro9VsZ2NaFHwlrlc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":589632},"main":"dist/index.js","_from":"file:/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.XA0X8co982.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"scripts":{"build":"tsup","typecheck":"tsc --noEmit","build:watch":"tsup --watch"},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"_resolved":"/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.XA0X8co982.tgz","_integrity":"sha512-KkLMRGii/K1SAh9RfHdmJ/unpKe1sftAJJQgo1gAiQqB2wklcrXpfF4tfwDNGZfnU6/qJcFbevUmoU4P+W66/w==","_npmVersion":"10.9.4","description":"Nimbus-free Puck component render layer (visualize) + render config for storefronts","directories":{},"_nodeVersion":"22.21.1","dependencies":{"@measured/puck":"^0.18.2","isomorphic-dompurify":"^3.18.0","@commercetools-demo/puck-api":"^0.8.0","@commercetools-demo/puck-types":"^0.8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.0","typescript":"^5.7.2","@types/react":"^18","@types/react-dom":"^18"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0","react-intl":">=6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/puck-components_0.8.2_1783439639611_0.4677036214284924","host":"s3://npm-registry-packages-npm-production"}},"0.8.3":{"name":"@commercetools-demo/puck-components","version":"0.8.3","description":"Nimbus-free Puck component render layer (visualize) + render config for storefronts","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"publishConfig":{"access":"public"},"scripts":{"build":"tsup","build:watch":"tsup --watch","typecheck":"tsc --noEmit"},"dependencies":{"@commercetools-demo/puck-api":"^0.8.1","@commercetools-demo/puck-types":"^0.8.1","@measured/puck":"^0.18.2","isomorphic-dompurify":"^3.18.0"},"peerDependencies":{"react":">=19.0.0","react-dom":">=19.0.0","react-intl":">=6.0.0"},"devDependencies":{"@types/react":"^18","@types/react-dom":"^18","tsup":"^8.3.0","typescript":"^5.7.2"},"_id":"@commercetools-demo/puck-components@0.8.3","_integrity":"sha512-xpuLckvr1b0+QbiWbAysyho57yRevCIUyDEOB40F/eYrusyaQPym9XUurtFIYnVx3vN+MJn35uF29A5xu5nDGw==","_resolved":"/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.0cgSFvcPXL.tgz","_from":"file:/var/folders/f2/sy6vm0p94nbds8xzqf_vyj8m0000gn/T/package.XXXXXX.0cgSFvcPXL.tgz","_nodeVersion":"22.21.1","_npmVersion":"10.9.4","dist":{"integrity":"sha512-xpuLckvr1b0+QbiWbAysyho57yRevCIUyDEOB40F/eYrusyaQPym9XUurtFIYnVx3vN+MJn35uF29A5xu5nDGw==","shasum":"c9dd8ccfb52ee63a6102e9d747edab02412bb418","tarball":"https://registry.npmjs.org/@commercetools-demo/puck-components/-/puck-components-0.8.3.tgz","fileCount":8,"unpackedSize":605944,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBoizq5uAlxDY1uEsDm1Wag3SvSGraVA9mEq8+ExY2cCAiEAgx00dHazXzgvNn2cL2X471KnVD5mf0VmDOW986ksglw="}]},"_npmUser":{"name":"behnam777","email":"behnam777@gmail.com"},"directories":{},"maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/puck-components_0.8.3_1783609964007_0.9479833898510261"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-07T14:37:19.376Z","modified":"2026-07-09T15:12:44.338Z","0.8.0":"2026-07-07T14:37:19.671Z","0.8.1":"2026-07-07T15:07:06.306Z","0.8.2":"2026-07-07T15:53:59.816Z","0.8.3":"2026-07-09T15:12:44.165Z"},"description":"Nimbus-free Puck component render layer (visualize) + render config for storefronts","maintainers":[{"name":"lgiavedoni","email":"lgiavedoni@gmail.com"},{"name":"behnam777","email":"behnam777@gmail.com"}],"readme":"# @commercetools-demo/puck-components\n\nNimbus-free \"visualize\" layer for the Puck CMS: the component render functions,\ntheir prop types, shared render helpers, the i18n catalogs, and a render-only\nPuck config (`defaultRenderConfig` / `createRenderConfig`). Storefronts consume\nthis through [`@commercetools-demo/puck-renderer`](../puck-renderer); the editor\ncomposes these render functions with its own field widgets.\n\nNothing here imports `@commercetools/nimbus` or `@chakra-ui/react`.\n\n## Theming rich text (`.puck-rich-text-content`)\n\n`RichTextContent` renders sanitized rich-text HTML and ships a small scoped\nstylesheet so the output looks consistent regardless of the host's CSS reset\n(e.g. Tailwind Preflight). **Every declared property reads from a CSS custom\nproperty**, with the built-in value as the `var()` fallback:\n\n```css\n.puck-rich-text-content h1 {\n font-size: var(--puck-rich-text-content--h1--font-size, 2em);\n /* … */\n}\n```\n\nSo you can restyle any element by setting the matching variable on\n`.puck-rich-text-content` itself, or on any ancestor (they cascade/inherit):\n\n```css\n/* Your global stylesheet or a wrapper */\n.puck-rich-text-content {\n --puck-rich-text-content--h1--font-size: 3rem;\n --puck-rich-text-content--h1--font-weight: 700;\n --puck-rich-text-content--a--color: #e94560;\n --puck-rich-text-content--line-height: 1.75;\n}\n\n/* Or scope overrides to one page/section */\n.my-article {\n --puck-rich-text-content--blockquote--border-left: 4px solid #2c5530;\n --puck-rich-text-content--code--background: #f5f5f5;\n}\n```\n\nVariable naming convention: `--puck-rich-text-content----`.\nGrouped selectors use one representative key — `strong` covers ``/``,\n`em` covers ``/``, `s` covers ``/``, `pre-code` is `` inside\n`
`.\n\n### Full variable reference\n\n| Variable | Default | Applies to |\n| --- | --- | --- |\n| `--puck-rich-text-content--line-height` | `1.6` | container `line-height` |\n| `--puck-rich-text-content--first-child--margin-top` | `0` | first child `margin-top` |\n| `--puck-rich-text-content--last-child--margin-bottom` | `0` | last child `margin-bottom` |\n| `--puck-rich-text-content--h1--font-size` | `2em` | `h1` |\n| `--puck-rich-text-content--h1--font-weight` | `400` | `h1` |\n| `--puck-rich-text-content--h1--line-height` | `1.2` | `h1` |\n| `--puck-rich-text-content--h1--margin` | `0.67em 0` | `h1` |\n| `--puck-rich-text-content--h2--font-size` | `1.5em` | `h2` |\n| `--puck-rich-text-content--h2--font-weight` | `400` | `h2` |\n| `--puck-rich-text-content--h2--line-height` | `1.25` | `h2` |\n| `--puck-rich-text-content--h2--margin` | `0.75em 0` | `h2` |\n| `--puck-rich-text-content--h3--font-size` | `1.17em` | `h3` |\n| `--puck-rich-text-content--h3--font-weight` | `400` | `h3` |\n| `--puck-rich-text-content--h3--line-height` | `1.3` | `h3` |\n| `--puck-rich-text-content--h3--margin` | `0.83em 0` | `h3` |\n| `--puck-rich-text-content--h4--font-size` | `1em` | `h4` |\n| `--puck-rich-text-content--h4--font-weight` | `400` | `h4` |\n| `--puck-rich-text-content--h4--margin` | `1em 0` | `h4` |\n| `--puck-rich-text-content--h5--font-size` | `0.83em` | `h5` |\n| `--puck-rich-text-content--h5--font-weight` | `400` | `h5` |\n| `--puck-rich-text-content--h5--margin` | `1.17em 0` | `h5` |\n| `--puck-rich-text-content--h6--font-size` | `0.75em` | `h6` |\n| `--puck-rich-text-content--h6--font-weight` | `400` | `h6` |\n| `--puck-rich-text-content--h6--margin` | `1.33em 0` | `h6` |\n| `--puck-rich-text-content--p--margin` | `1em 0` | `p` |\n| `--puck-rich-text-content--strong--font-weight` | `700` | `strong`, `b` |\n| `--puck-rich-text-content--em--font-style` | `italic` | `em`, `i` |\n| `--puck-rich-text-content--u--text-decoration` | `underline` | `u` |\n| `--puck-rich-text-content--s--text-decoration` | `line-through` | `s`, `del` |\n| `--puck-rich-text-content--ul--list-style` | `disc` | `ul` |\n| `--puck-rich-text-content--ul--margin` | `1em 0` | `ul` |\n| `--puck-rich-text-content--ul--padding-left` | `1.5em` | `ul` |\n| `--puck-rich-text-content--ol--list-style` | `decimal` | `ol` |\n| `--puck-rich-text-content--ol--margin` | `1em 0` | `ol` |\n| `--puck-rich-text-content--ol--padding-left` | `1.5em` | `ol` |\n| `--puck-rich-text-content--li--margin` | `0.25em 0` | `li` |\n| `--puck-rich-text-content--a--color` | `#2563eb` | `a` |\n| `--puck-rich-text-content--a--text-decoration` | `underline` | `a` |\n| `--puck-rich-text-content--blockquote--margin` | `1em 0` | `blockquote` |\n| `--puck-rich-text-content--blockquote--padding-left` | `1em` | `blockquote` |\n| `--puck-rich-text-content--blockquote--border-left` | `3px solid #d1d5db` | `blockquote` |\n| `--puck-rich-text-content--blockquote--color` | `#4b5563` | `blockquote` |\n| `--puck-rich-text-content--code--font-family` | `ui-monospace, SFMono-Regular, Menlo, monospace` | `code` |\n| `--puck-rich-text-content--code--background` | `rgba(0,0,0,0.06)` | `code` |\n| `--puck-rich-text-content--code--padding` | `0.1em 0.3em` | `code` |\n| `--puck-rich-text-content--code--border-radius` | `3px` | `code` |\n| `--puck-rich-text-content--code--font-size` | `0.9em` | `code` |\n| `--puck-rich-text-content--pre--background` | `rgba(0,0,0,0.06)` | `pre` |\n| `--puck-rich-text-content--pre--padding` | `0.75em 1em` | `pre` |\n| `--puck-rich-text-content--pre--border-radius` | `6px` | `pre` |\n| `--puck-rich-text-content--pre--overflow-x` | `auto` | `pre` |\n| `--puck-rich-text-content--pre-code--background` | `none` | `code` inside `pre` |\n| `--puck-rich-text-content--pre-code--padding` | `0` | `code` inside `pre` |\n| `--puck-rich-text-content--img--max-width` | `100%` | `img` |\n| `--puck-rich-text-content--img--height` | `auto` | `img` |\n| `--puck-rich-text-content--hr--border` | `none` | `hr` |\n| `--puck-rich-text-content--hr--border-top` | `1px solid #e5e7eb` | `hr` |\n| `--puck-rich-text-content--hr--margin` | `1.5em 0` | `hr` |\n\n> Notes\n> - `margin` / `padding` / `border` variables take the full shorthand value\n>   (e.g. `--puck-rich-text-content--h1--margin: 0.67em 0`).\n> - A value containing commas (font stacks, `rgba(...)`) is a valid `var()`\n>   fallback and equally valid as an override.\n","readmeFilename":"README.md"}