@c15t/nextjs 2.0.0-rc.5 → 2.0.0-rc.7

package/dist/headless.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_modules__={"@c15t/react/headless"(e){e.exports=require("@c15t/react/headless")}},__webpack_module_cache__={};function __webpack_require__(e){var _=__webpack_module_cache__[e];if(void 0!==_)return _.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in(()=>{__webpack_require__.r(__webpack_exports__);var e=__webpack_require__("@c15t/react/headless"),_={};for(let r in e)"default"!==r&&(_[r]=()=>e[r]);__webpack_require__.d(__webpack_exports__,_)})(),__webpack_exports__)exports[__rspack_i]=__webpack_exports__[__rspack_i];Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_modules__={"@c15t/react/headless"(e){e.exports=require("@c15t/react/headless")}},__webpack_module_cache__={};function __webpack_require__(e){var _=__webpack_module_cache__[e];if(void 0!==_)return _.exports;var r=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](r,r.exports,__webpack_require__),r.exports}__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in(()=>{__webpack_require__.r(__webpack_exports__);var e=__webpack_require__("@c15t/react/headless"),_={};for(let r in e)"default"!==r&&(_[r]=()=>e[r]);__webpack_require__.d(__webpack_exports__,_)})(),__webpack_exports__)exports[__rspack_i]=__webpack_exports__[__rspack_i];Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/iab/styles.css

@@ -0,0 +1 @@
+@import "@c15t/react/iab/styles.css";

package/dist/iab/styles.tw3.css

@@ -0,0 +1 @@
+@import "@c15t/react/iab/styles.tw3.css";

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_modules__={"./libs/browser-initial-data"(e){e.exports=require("./libs/browser-initial-data.cjs")},"./libs/initial-data"(e){e.exports=require("./libs/initial-data.cjs")},"@c15t/react"(e){e.exports=require("@c15t/react")},c15t(e){e.exports=require("c15t")}},__webpack_module_cache__={};function __webpack_require__(e){var _=__webpack_module_cache__[e];if(void 0!==_)return _.exports;var t=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](t,t.exports,__webpack_require__),t.exports}__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var t in _)__webpack_require__.o(_,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:_[t]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in(()=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{C15tPrefetch:()=>r.C15tPrefetch,buildPrefetchScript:()=>t.buildPrefetchScript,ensurePrefetchedInitialData:()=>t.ensurePrefetchedInitialData,fetchInitialData:()=>a.fetchInitialData,getPrefetchedInitialData:()=>t.getPrefetchedInitialData});var e=__webpack_require__("@c15t/react"),_={};for(let t in e)0>["C15tPrefetch","fetchInitialData","default","buildPrefetchScript","ensurePrefetchedInitialData","getPrefetchedInitialData"].indexOf(t)&&(_[t]=()=>e[t]);__webpack_require__.d(__webpack_exports__,_);var t=__webpack_require__("c15t"),r=__webpack_require__("./libs/browser-initial-data"),a=__webpack_require__("./libs/initial-data")})(),exports.C15tPrefetch=__webpack_exports__.C15tPrefetch,exports.buildPrefetchScript=__webpack_exports__.buildPrefetchScript,exports.ensurePrefetchedInitialData=__webpack_exports__.ensurePrefetchedInitialData,exports.fetchInitialData=__webpack_exports__.fetchInitialData,exports.getPrefetchedInitialData=__webpack_exports__.getPrefetchedInitialData,__webpack_exports__)-1===["C15tPrefetch","buildPrefetchScript","ensurePrefetchedInitialData","fetchInitialData","getPrefetchedInitialData"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_modules__={"./libs/browser-initial-data"(e){e.exports=require("./libs/browser-initial-data.cjs")},"./libs/initial-data"(e){e.exports=require("./libs/initial-data.cjs")},"@c15t/react"(e){e.exports=require("@c15t/react")},c15t(e){e.exports=require("c15t")}},__webpack_module_cache__={};function __webpack_require__(e){var _=__webpack_module_cache__[e];if(void 0!==_)return _.exports;var t=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](t,t.exports,__webpack_require__),t.exports}__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var t in _)__webpack_require__.o(_,t)&&!__webpack_require__.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:_[t]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in(()=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{C15tPrefetch:()=>r.C15tPrefetch,buildPrefetchScript:()=>t.buildPrefetchScript,ensurePrefetchedInitialData:()=>t.ensurePrefetchedInitialData,fetchInitialData:()=>a.fetchInitialData,getPrefetchedInitialData:()=>t.getPrefetchedInitialData});var e=__webpack_require__("@c15t/react"),_={};for(let t in e)0>["C15tPrefetch","fetchInitialData","default","buildPrefetchScript","ensurePrefetchedInitialData","getPrefetchedInitialData"].indexOf(t)&&(_[t]=()=>e[t]);__webpack_require__.d(__webpack_exports__,_);var t=__webpack_require__("c15t"),r=__webpack_require__("./libs/browser-initial-data"),a=__webpack_require__("./libs/initial-data")})(),exports.C15tPrefetch=__webpack_exports__.C15tPrefetch,exports.buildPrefetchScript=__webpack_exports__.buildPrefetchScript,exports.ensurePrefetchedInitialData=__webpack_exports__.ensurePrefetchedInitialData,exports.fetchInitialData=__webpack_exports__.fetchInitialData,exports.getPrefetchedInitialData=__webpack_exports__.getPrefetchedInitialData,__webpack_exports__)-1===["C15tPrefetch","buildPrefetchScript","ensurePrefetchedInitialData","fetchInitialData","getPrefetchedInitialData"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/index.js

@@ -1 +1 @@
-import{buildPrefetchScript as t,ensurePrefetchedInitialData as i,getPrefetchedInitialData as e}from"c15t";import{C15tPrefetch as r}from"./libs/browser-initial-data.js";import{fetchInitialData as a}from"./libs/initial-data.js";export*from"@c15t/react";export{r as C15tPrefetch,t as buildPrefetchScript,i as ensurePrefetchedInitialData,a as fetchInitialData,e as getPrefetchedInitialData};
+export*from"@c15t/react";export{buildPrefetchScript,ensurePrefetchedInitialData,getPrefetchedInitialData}from"c15t";export{C15tPrefetch}from"./libs/browser-initial-data.js";export{fetchInitialData}from"./libs/initial-data.js";

package/dist/libs/browser-initial-data.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{C15tPrefetch:()=>C15tPrefetch});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_c15t_namespaceObject=require("c15t"),script_namespaceObject=require("next/script");var script_default=__webpack_require__.n(script_namespaceObject);const DEFAULT_SCRIPT_ID="c15t-initial-data-prefetch";function C15tPrefetch({id:e="c15t-initial-data-prefetch",..._}){return(0,jsx_runtime_namespaceObject.jsx)(script_default(),{id:e,strategy:"beforeInteractive",children:(0,external_c15t_namespaceObject.buildPrefetchScript)(_)})}for(var __rspack_i in exports.C15tPrefetch=__webpack_exports__.C15tPrefetch,__webpack_exports__)-1===["C15tPrefetch"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.n=e=>{var _=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(_,{a:_}),_},__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{C15tPrefetch:()=>C15tPrefetch});const jsx_runtime_namespaceObject=require("react/jsx-runtime"),external_c15t_namespaceObject=require("c15t"),script_namespaceObject=require("next/script");var script_default=__webpack_require__.n(script_namespaceObject);const DEFAULT_SCRIPT_ID="c15t-initial-data-prefetch";function C15tPrefetch({id:e="c15t-initial-data-prefetch",..._}){return(0,jsx_runtime_namespaceObject.jsx)(script_default(),{id:e,strategy:"beforeInteractive",children:(0,external_c15t_namespaceObject.buildPrefetchScript)(_)})}for(var __rspack_i in exports.C15tPrefetch=__webpack_exports__.C15tPrefetch,__webpack_exports__)-1===["C15tPrefetch"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/libs/browser-initial-data.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{buildPrefetchScript as r}from"c15t";import e from"next/script";function i({id:i="c15t-initial-data-prefetch",...c}){return t(e,{id:i,strategy:"beforeInteractive",children:r(c)})}export{i as C15tPrefetch};
+import{jsx as t}from"react/jsx-runtime";import{buildPrefetchScript as r}from"c15t";import e from"next/script";function i({id:c="c15t-initial-data-prefetch",...o}){return t(e,{id:c,strategy:"beforeInteractive",children:r(o)})}export{i as C15tPrefetch};

package/dist/libs/initial-data.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{fetchInitialData:()=>fetchInitialData});const server_namespaceObject=require("@c15t/react/server"),cache_namespaceObject=require("next/cache"),headers_namespaceObject=require("next/headers"),DEFAULT_REVALIDATE_SECONDS=1;async function fetchInitialData(e){let _=await (0,headers_namespaceObject.headers)(),r=(0,server_namespaceObject.normalizeBackendURL)(e.backendURL,_);if(!r)return;let a=e.nextCache?.revalidateSeconds;if(!1===a)return(0,server_namespaceObject.fetchSSRData)({...e,backendURL:r,headers:_});let t=(0,server_namespaceObject.createSSRInitCacheKey)({normalizedURL:r,headers:_,overrides:e.overrides});return(0,cache_namespaceObject.unstable_cache)(()=>(0,server_namespaceObject.fetchSSRData)({...e,backendURL:r,headers:_}),["c15t:nextjs:fetchInitialData",t],{revalidate:a??1})()}for(var __rspack_i in exports.fetchInitialData=__webpack_exports__.fetchInitialData,__webpack_exports__)-1===["fetchInitialData"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{fetchInitialData:()=>fetchInitialData});const server_namespaceObject=require("@c15t/react/server"),cache_namespaceObject=require("next/cache"),headers_namespaceObject=require("next/headers"),DEFAULT_REVALIDATE_SECONDS=1;async function fetchInitialData(e){let _=await (0,headers_namespaceObject.headers)(),r=(0,server_namespaceObject.normalizeBackendURL)(e.backendURL,_);if(!r)return;let a=e.nextCache?.revalidateSeconds;if(!1===a)return(0,server_namespaceObject.fetchSSRData)({...e,backendURL:r,headers:_});let t=(0,server_namespaceObject.createSSRInitCacheKey)({normalizedURL:r,headers:_,overrides:e.overrides});return(0,cache_namespaceObject.unstable_cache)(()=>(0,server_namespaceObject.fetchSSRData)({...e,backendURL:r,headers:_}),["c15t:nextjs:fetchInitialData",t],{revalidate:a??1})()}for(var __rspack_i in exports.fetchInitialData=__webpack_exports__.fetchInitialData,__webpack_exports__)-1===["fetchInitialData"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/styles.css

@@ -0,0 +1 @@
+@import "@c15t/react/styles.css";

package/dist/styles.tw3.css

@@ -0,0 +1 @@
+@import "@c15t/react/styles.tw3.css";

package/dist/types.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in __webpack_require__.r(__webpack_exports__),__webpack_exports__)exports[__rspack_i]=__webpack_exports__[__rspack_i];Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};for(var __rspack_i in __webpack_require__.r(__webpack_exports__),__webpack_exports__)exports[__rspack_i]=__webpack_exports__[__rspack_i];Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/version.cjs

@@ -1 +1 @@
-"use strict";const __rslib_import_meta_url__="undefined"==typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{version:()=>version});const version="2.0.0-rc.5";for(var __rspack_i in exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});
+"use strict";const __rslib_import_meta_url__="u"<typeof document?new(require("url".replace("",""))).URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href;var __webpack_require__={};__webpack_require__.d=(e,_)=>{for(var r in _)__webpack_require__.o(_,r)&&!__webpack_require__.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:_[r]})},__webpack_require__.o=(e,_)=>Object.prototype.hasOwnProperty.call(e,_),__webpack_require__.r=e=>{"u">typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var __webpack_exports__={};__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{version:()=>version});const version="2.0.0-rc.7";for(var __rspack_i in exports.version=__webpack_exports__.version,__webpack_exports__)-1===["version"].indexOf(__rspack_i)&&(exports[__rspack_i]=__webpack_exports__[__rspack_i]);Object.defineProperty(exports,"__esModule",{value:!0});

package/dist/version.js

@@ -1 +1 @@
-let e="2.0.0-rc.5";export{e as version};
+let e="2.0.0-rc.7";export{e as version};

package/dist-types/headless.d.ts

@@ -1 +1 @@
-export * from '../../react/dist-types/headless.d';
+export * from '../../react/dist-types/headless';

package/dist-types/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.0.0-rc.5";
+export declare const version = "2.0.0-rc.7";

package/docs/building-headless-components.md

@@ -4,9 +4,12 @@ description: Build policy-aware custom consent components in Next.js using the h
 ---
 Building headless components is easier now because c15t exposes policy-aware primitives instead of forcing you to reconstruct banner rules by hand.
 
+> ⚠️ **Warning:**
+> Headless is the last step in the customization ladder. Use this guide only when pre-built components, tokens, slots, compound components, and noStyle are no longer sufficient.
+
 The headless stack is:
 
-* `useHeadlessConsentUI()` for policy-aware banner/dialog actions, ordering, layout, and primary action hints
+* `useHeadlessConsentUI()` for policy-aware banner/dialog actions, ordering, layout, and primary actions hints
 * `useConsentManager()` for runtime state, categories, selected consent state, and policy metadata
 * `useTranslations()` for the resolved copy
 * `offlinePolicy.policyPacks` for offline previews that behave like backend policy resolution
@@ -24,7 +27,7 @@ The main win is that your custom UI can stay aligned with policy packs without d
 * the order those actions should render in
 * grouped actions from policy `layout`
 * layout `direction` (`row` or `column`)
-* the primary action
+* the primary actions
 * UI profile and scroll-lock hints
 * whether the banner or dialog should currently be visible
 
@@ -91,7 +94,7 @@ export function CustomConsentBanner() {
               <button
                 key={action}
                 type="button"
-                className={action === banner.primaryAction ? 'btn-primary' : 'btn-secondary'}
+                className={banner.primaryActions.includes(action) ? 'btn-primary' : 'btn-secondary'}
                 onClick={() => {
                   if (action === 'customize') {
                     openDialog();
@@ -202,7 +205,7 @@ When you build custom banner or dialog components, make sure they use:
 
 * `activeUI` or `banner.isVisible` / `dialog.isVisible` for visibility
 * `allowedActions`, `orderedActions`, or `actionGroups` instead of hard-coding buttons
-* `primaryAction` for visual emphasis
+* `primaryActions` for visual emphasis
 * `consentCategories` when deciding which category toggles to render
 * `policyDecision` when you want to debug why a specific UI state was chosen
 

package/docs/components/consent-banner.md

@@ -1,6 +1,6 @@
 ---
 title: ConsentBanner
-description: A pre-built consent banner that appears when user consent is needed. Supports custom layout, button arrangement, and full compound component composition.
+description: A pre-built consent banner that appears when user consent is needed. Supports policy-aware layout, theming, and advanced composition when markup must change.
 ---
 `ConsentBanner` is a ready-to-use consent banner that appears automatically in **opt-in jurisdictions** (like GDPR) where explicit consent is required before tracking. In opt-out jurisdictions (like CCPA), the banner won't appear — users get an opt-out mechanism instead. It includes reject, accept, and customize buttons with configurable layout.
 
@@ -18,20 +18,6 @@ export function ConsentManager() {
 }
 ```
 
-## Customizing Content
-
-Override the default title, description, and button labels:
-
-```tsx
-<ConsentBanner
-  title="We value your privacy"
-  description="We use cookies to enhance your browsing experience and analyze site traffic."
-  acceptButtonText="Accept all"
-  rejectButtonText="Reject all"
-  customizeButtonText="Manage preferences"
-/>
-```
-
 ## Button Layout
 
 The `layout` prop controls button arrangement. Each item is either a button ID or an array of button IDs (which groups them together):
@@ -86,6 +72,37 @@ Use the provider `theme` prop to control how stock consent actions look:
 
 Policy packs control grouping, ordering, and direction. The theme controls button appearance.
 
+## Styling First
+
+> ℹ️ **Info:**
+> For pure theming, stay inside the pre-built banner. Start with layout props, theme.consentActions, design tokens, and theme.slots before reaching for compound components. See Styling Overview.
+
+The stock banner maps common visual changes to the theme system:
+
+* Card background -> `theme.colors.surface`
+* Footer background -> `theme.colors.surfaceHover`
+* Card, footer, and title tweaks -> `theme.slots.consentBannerCard`, `consentBannerFooter`, and `consentBannerTitle`
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentBannerCard: 'rounded-[28px] shadow-xl',
+        consentBannerFooter: 'border-t border-black/10 px-6',
+        consentBannerTitle: 'tracking-tight',
+      },
+    },
+  }}
+>
+  <ConsentBanner />
+</ConsentManagerProvider>
+```
+
 ### Primary Button
 
 Highlight specific button(s) as the primary action:
@@ -116,9 +133,40 @@ Control which legal links appear in the banner description:
 > ℹ️ **Info:**
 > Legal link URLs are configured in the ConsentManagerProvider options via the legalLinks prop, not on the banner itself.
 
-## Compound Components
+## Customizing Copy
+
+Prefer provider `i18n` when you want to rename the stock banner content:
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    i18n: {
+      locale: 'en',
+      messages: {
+        en: {
+          cookieBanner: {
+            title: 'We value your privacy',
+            description: 'We use cookies to improve the site and measure performance.',
+          },
+          common: {
+            acceptAll: 'Accept all',
+            rejectAll: 'Reject all',
+            customize: 'Manage preferences',
+          },
+        },
+      },
+    },
+  }}
+>
+  <ConsentBanner />
+</ConsentManagerProvider>
+```
+
+Direct text props such as `title`, `description`, and `acceptButtonText` are still supported for one-off overrides, but `i18n` is the preferred path for copy changes.
 
-Build fully custom banner layouts using sub-components:
+## Advanced: Compound Components
+
+Use compound components only when the stock banner structure is no longer enough and you need to rearrange existing c15t primitives:
 
 ```tsx
 <ConsentBanner.Root>
@@ -142,7 +190,7 @@ Build fully custom banner layouts using sub-components:
 * `ConsentBanner.Root` — Outermost container, provides theme context
 * `ConsentBanner.Card` — Main content card with optional focus trapping
 * `ConsentBanner.Header` — Contains title and description
-* `ConsentBanner.Title` — Heading, defaults to translation `consentBanner.title`
+* `ConsentBanner.Title` — Heading, defaults to translation `cookieBanner.title`
 * `ConsentBanner.Description` — Description text, supports `legalLinks` prop
 * `ConsentBanner.Footer` — Action buttons container
 * `ConsentBanner.FooterSubGroup` — Groups related buttons together
@@ -151,6 +199,8 @@ Build fully custom banner layouts using sub-components:
 * `ConsentBanner.AcceptButton` — Accepts all consent
 * `ConsentBanner.Overlay` — Optional backdrop overlay
 
+If you only need styling changes, stay with tokens and slots instead of rebuilding the banner layout.
+
 ## Props
 
 ### ConsentBannerProps

package/docs/components/consent-dialog.md

@@ -81,9 +81,36 @@ Hide the c15t branding in the dialog footer:
 <ConsentDialog hideBranding />
 ```
 
-## Compound Components
+## Styling First
 
-Build fully custom dialog layouts using sub-components:
+> ℹ️ **Info:**
+> If you are only changing visuals, stay with the stock dialog and use the theme system first. Start with tokens and slots such as consentDialogCard, consentDialogHeader, and consentDialogFooter. See Styling Overview.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentDialogCard: 'rounded-[32px] shadow-xl',
+        consentDialogHeader: 'gap-3',
+        consentDialogFooter: 'border-t border-black/10 px-6',
+      },
+    },
+  }}
+>
+  <ConsentDialog />
+</ConsentManagerProvider>
+```
+
+Dialog copy should be changed through `ConsentManagerProvider.options.i18n`, not by rebuilding the dialog structure.
+
+## Advanced: Compound Components
+
+Use compound components only when you need custom dialog markup while still keeping c15t primitives:
 
 ```tsx
 <ConsentDialog.Root>
@@ -118,6 +145,8 @@ For a quick pre-composed layout, use the shorthand card:
 </ConsentDialog.Root>
 ```
 
+If the stock dialog structure still works, prefer tokens, slots, and provider configuration instead.
+
 ## Props
 
 ### ConsentDialogProps

package/docs/components/consent-manager-provider.md

@@ -146,6 +146,7 @@ IAB TCF 2.3 configuration.
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |enabled|boolean|Enable IAB TCF 2.3 mode. Note: Only works in 'hosted' client mode (legacy alias: 'c15t') because it requires a backend. Options: Fetch GVL from gvl.consent.io; Initialize \_\_tcfapi CMP API; Generate TC Strings for IAB compliance|-|✅ Required|
+|\_module|IABModule \|undefined|IAB runtime module injected by \`@c15t/iab\`.|-|Optional|
 |cmpId|number \|undefined|CMP ID registered with IAB Europe. When using consent.io as the backend, this is automatically provided via the \`/init\` endpoint — no client-side configuration needed. Only set this if you self-host and have your own CMP registration. A valid (non-zero) CMP ID is required for IAB TCF compliance.|-|Optional|
 |cmpVersion|string \|number \|undefined|CMP version. When omitted, defaults to package version from \`\~/cmp-defaults\` (which uses \~/version).|-|Optional|
 |vendors|number\[] \|undefined|IAB-registered vendor IDs to include (optional). Used to scope the vendor list when fetching GVL or when hosted fallback paths are used (e.g. if GVL fetch fails).|-|Optional|

package/docs/components/consent-widget.md

@@ -35,9 +35,36 @@ export function PrivacySettingsPage() {
 
 Each consent category is rendered as an expandable accordion item. Clicking the category header expands it to show a description and any associated services. Users can toggle individual categories on or off using the switch control. The `necessary` category is always enabled and cannot be toggled.
 
-## Compound Components
+## Styling First
 
-Build fully custom widget layouts using sub-components:
+> ℹ️ **Info:**
+> Most widget customization should stay in the stock component. Use theme tokens and slots such as consentWidgetAccordion, consentWidgetFooter, and toggle before reaching for compound components. See Styling Overview.
+
+```tsx
+<ConsentManagerProvider
+  options={{
+    theme: {
+      colors: {
+        surface: '#fffdf8',
+        surfaceHover: '#f6f3ee',
+      },
+      slots: {
+        consentWidgetAccordion: 'rounded-3xl border border-black/10',
+        consentWidgetFooter: 'border-t border-black/10 px-6',
+        toggle: 'shadow-sm',
+      },
+    },
+  }}
+>
+  <ConsentWidget />
+</ConsentManagerProvider>
+```
+
+Widget copy should be changed through `ConsentManagerProvider.options.i18n` so the inline UI stays aligned with the rest of the consent experience.
+
+## Advanced: Compound Components
+
+Use compound components only when you need to rearrange the widget's existing primitives:
 
 ```tsx
 <ConsentWidget.Root>
@@ -68,6 +95,8 @@ Build fully custom widget layouts using sub-components:
 * `ConsentWidget.RejectButton` — Rejects all consent
 * `ConsentWidget.SaveButton` — Saves custom selections
 
+If the stock widget structure is already correct, stay with tokens and slots instead of rebuilding the layout.
+
 ## Props
 
 ### ConsentWidgetProps

package/docs/concepts/policy-packs.md

@@ -47,7 +47,7 @@ ui: {
     allowedActions: ['reject', 'accept', 'customize'],
     layout: [['reject', 'accept'], 'customize'],
     direction: 'row',
-    primaryAction: 'customize',
+    primaryActions: ['accept', 'customize'],
   },
 }
 ```

package/docs/headless.md

@@ -4,11 +4,12 @@ description: Build fully custom consent UI using only hooks - no pre-built compo
 ---
 c15t's headless mode means using the hooks (`useConsentManager`, `useTranslations`, etc.) without any pre-built UI components. This gives you complete control over the consent experience.
 
-There are three levels of customization:
+Before you go headless, walk the customization ladder in order:
 
-1. **Props** - Use pre-built components with custom text and configuration
-2. **noStyle** - Use pre-built components with their structure but strip all styles
-3. **Headless** - Use only hooks and build the entire UI yourself
+1. **Pre-built components** - Use provider options, component props, tokens, slots, and `theme.consentActions`
+2. **Compound components** - Rearrange c15t primitives when the markup order must change
+3. **`noStyle`** - Keep c15t structure but replace its styling
+4. **Headless** - Use only hooks and build the entire UI yourself
 
 ## When to Go Headless
 
@@ -18,10 +19,15 @@ Go headless when:
 * You need a consent flow that doesn't fit the banner/dialog pattern
 * You want to embed consent choices inline rather than as overlays
 
-Use `noStyle` instead when:
+Use a lower-power tool instead when:
 
-* The component structure works but the styling doesn't
-* You want to apply your own CSS/Tailwind without fighting defaults
+* The component structure works but the styling doesn't -> use tokens, slots, or `noStyle`
+* You only need to rearrange existing c15t parts -> use compound components
+* You want to change copy -> use `ConsentManagerProvider.options.i18n`
+* You only need to restyle stock actions -> use `theme.consentActions`
+
+> ⚠️ **Warning:**
+> Headless mode is not the first answer for pure theming. If you are still trying to debug why a banner footer color did not change, stay in the styling system and verify the token-to-component mapping before you rebuild the UI.
 
 > ℹ️ **Info:**
 > Need a policy-aware implementation guide? See Building Headless Components.

package/docs/hooks/use-consent-manager/overview.md

@@ -130,7 +130,7 @@ Policy-driven UI hints for the consent banner surface.
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |allowedActions|PolicyUiAction \|undefined|Allowed actions for this surface derived from backend runtime policy.|-|Optional|
-|primaryAction|PolicyUiAction \|undefined|Preferred primary action hint from backend runtime policy.|-|Optional|
+|primaryActions|PolicyUiAction \|undefined|Preferred primary action hints from backend runtime policy.|-|Optional|
 |layout|PolicyUiActionGroup \|undefined|Explicit grouped action layout hint from backend runtime policy.|-|Optional|
 |direction|PolicyUiActionDirection \|undefined|Direction hint for the grouped action layout.|-|Optional|
 |uiProfile|PolicyUiProfile \|undefined|Presentation profile hint from backend runtime policy.|-|Optional|
@@ -143,7 +143,7 @@ Policy-driven UI hints for the consent dialog surface.
 |Property|Type|Description|Default|Required|
 |:--|:--|:--|:--|:--:|
 |allowedActions|PolicyUiAction \|undefined|Allowed actions for this surface derived from backend runtime policy.|-|Optional|
-|primaryAction|PolicyUiAction \|undefined|Preferred primary action hint from backend runtime policy.|-|Optional|
+|primaryActions|PolicyUiAction \|undefined|Preferred primary action hints from backend runtime policy.|-|Optional|
 |layout|PolicyUiActionGroup \|undefined|Explicit grouped action layout hint from backend runtime policy.|-|Optional|
 |direction|PolicyUiActionDirection \|undefined|Direction hint for the grouped action layout.|-|Optional|
 |uiProfile|PolicyUiProfile \|undefined|Presentation profile hint from backend runtime policy.|-|Optional|

package/docs/hooks/use-translations.md

@@ -45,6 +45,7 @@ The returned `Translations` object has these sections:
 |rejectAll|string \|undefined|-|-|✅ Required|
 |customize|string \|undefined|-|-|✅ Required|
 |save|string \|undefined|-|-|✅ Required|
+|close|string \|undefined|-|-|✅ Required|
 
 #### `cookieBanner` CookieBannerTranslations
 

package/docs/iab/consent-banner.md

@@ -90,6 +90,6 @@ Options: `'reject'`, `'accept'`, `'customize'` (default: `'customize'`)
 |disableAnimation|boolean \|undefined|When true, disables entrance/exit animations.|false|Optional|
 |scrollLock|boolean \|undefined|When true, locks page scroll when the banner is visible.|true|Optional|
 |trapFocus|boolean \|undefined|When true, traps keyboard focus within the banner.|true|Optional|
-|primaryButton|"customize" \|"accept" \|"reject" \|undefined|Specifies which button should be highlighted as primary.|'customize'|Optional|
+|primaryButton|"reject" \|"accept" \|"customize" \|undefined|Specifies which button should be highlighted as primary.|'customize'|Optional|
 |models|Model \|undefined|Which consent models this banner responds to.|\['iab']|Optional|
 |uiSource|string \|undefined|Override the UI source identifier sent with consent API calls.|'iab\_banner'|Optional|

package/docs/quickstart.md

@@ -33,7 +33,17 @@ availableIn:
    |yarn|`yarn add @c15t/nextjs`|
    |bun|`bun add @c15t/nextjs`|
 
-2. **Create ConsentManager components** Create a provider component with the consent UI and a wrapper that re-exports it. This initializes the consent store and makes consent state available to all child components.
+2. **Import styles** Import the prebuilt component stylesheet in your root layout. This is required for styled components to render correctly.
+
+   ```tsx
+   import '@c15t/nextjs/styles.css';
+   ```
+
+   > ℹ️ Info:
+   >
+   > If you are using the headless API or fully custom styling, you can skip this import.
+
+3. **Create ConsentManager components** Create a provider component with the consent UI and a wrapper that re-exports it. This initializes the consent store and makes consent state available to all child components.
 
    ```tsx
    'use client';
@@ -77,7 +87,7 @@ availableIn:
    >
    > Don't have a backend yet? You can use mode: 'offline' for local-only consent storage, but review the browser-only storage consequences before choosing it for production.
 
-3. **Mount ConsentManager at the app root** Wrap your app tree with ConsentManager so all routes/components can access consent state.
+4. **Mount ConsentManager at the app root** Wrap your app tree with ConsentManager so all routes/components can access consent state.
 
    ```tsx
    import { ConsentManager } from '@/components/consent-manager';
@@ -93,7 +103,7 @@ availableIn:
    }
    ```
 
-4. **Verify it works** Start your development server and confirm:
+5. **Verify it works** Start your development server and confirm:
 
    A consent banner appears at the bottom of the pageClicking "Customize" opens a dialog with toggles for each consent categoryAfter accepting or rejecting, the banner dismisses and your choice persists across page reloads
 

package/docs/styling/classnames.md

@@ -2,15 +2,11 @@
 title: Class Names
 description: Style consent components using className props and per-slot className targeting via the theme.
 ---
-## Component className
+## Prefer Slots for Stock Components
 
-All consent components accept a `className` prop:
+There is no single top-level `className` contract across every pre-built consent component.
 
-```tsx
-<ConsentBanner className="my-banner" />
-<ConsentDialog className="my-dialog" />
-<ConsentWidget className="my-widget" />
-```
+For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.
 
 ## Per-Slot className
 
@@ -59,9 +55,19 @@ const theme = {
 }
 ```
 
-## noStyle Mode
+## When to Use Raw className
+
+Use raw className-level styling when:
+
+* your styling system is already class-driven
+* tokens are too broad for the change
+* slots already identify the correct element
 
-Use `noStyle` when you want to remove defaults and style from scratch:
+If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.
+
+## Advanced: `noStyle`
+
+Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:
 
 ```tsx
 {/* Remove all styles from a specific component */}
@@ -81,4 +87,6 @@ const theme = {
 } satisfies Theme;
 ```
 
+Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.
+
 For full custom markup and behavior, continue to [Headless Mode](../headless).

package/docs/styling/overview.md

@@ -2,24 +2,34 @@
 title: Styling Overview
 description: Five approaches for theming consent components — design tokens, component slots, CSS variables, className, and noStyle mode.
 ---
-c15t's theming system gives you multiple levels of control, from high-level design tokens to complete style removal.
+c15t's theming system gives you multiple levels of control, but most customization should stay inside the pre-built components.
 
-The flow:
+Start with the lowest-power tool that solves the problem:
 
-1. **Define** tokens (colors, spacing, radius, etc.) in JavaScript
-2. Tokens are **injected** as CSS custom properties (`--c15t-*`) at runtime
-3. Components **consume** these variables in their default styles
-4. You **override** at any level: tokens, slots, CSS variables, or raw classNames
+1. **Pre-built component APIs** — provider options and component props such as `layout`, `direction`, `primaryButton`, `legalLinks`, and `theme.consentActions`
+2. **Design tokens** — global colors, typography, spacing, radius, shadows, and motion
+3. **Slots** — targeted styling for specific parts such as the banner card, footer, or title
+4. **CSS variables or className-level overrides** — when you need to integrate with external CSS systems
+5. **Compound components** — when you must rearrange markup while still using c15t primitives
+6. **`noStyle`** — when you want c15t structure but you need to own all visual styling
+7. **Headless** — when you want fully custom markup and behavior
+
+Keep styling and escalation as separate decisions:
+
+* If you are still using the stock banner, dialog, or widget, stay with props, tokens, and slots.
+* Escalate to compound components, `noStyle`, or headless only when the structure or behavior itself must change.
 
 ## Styling Approaches
 
 |Approach|Control|Use When|
 |--|--|--|
+|**Component and provider APIs**|High|Reordering actions, changing button emphasis, configuring links, hiding branding, changing copy via `i18n`|
 |**Tokens**|High|Changing global colors, typography, spacing, radius, shadows, or motion|
-|**Slots**|Medium|Targeting specific component parts (e.g., the banner title, dialog footer)|
-|**CSS Variables**|Medium|Overriding `--c15t-*` variables from external CSS|
-|**className**|Medium|Passing class names to components or slots|
-|**noStyle**|Full|Removing all default styles, building from scratch|
+|**Slots**|Medium|Targeting specific component parts (for example `consentBannerFooter` or `consentDialogCard`)|
+|**CSS variables / className**|Medium|Integrating with an existing stylesheet or utility classes after tokens and slots|
+|**Compound components**|Structure|Rearranging existing c15t primitives without going fully custom|
+|**noStyle**|Full visuals|Keeping c15t structure but replacing all visual defaults|
+|**Headless**|Full|Replacing both markup and behavior|
 
 ## Quick Start
 
@@ -58,9 +68,25 @@ export function ConsentManager({ children }) {
 }
 ```
 
-## Styling Paths
+## Styling Inside Pre-Built Components
+
+Start here before you consider compound components or headless mode.
+
+### 1. Provider and component configuration
+
+Use the stock APIs first:
+
+* `layout`, `direction`, and `primaryButton` for banner action arrangement
+* `legalLinks` for link visibility
+* `hideBranding` and `showTrigger` for dialog and widget behavior
+* `theme.consentActions` for stock banner and dialog button treatment
+* `i18n` on `ConsentManagerProvider` for copy changes
+
+```tsx
+<ConsentBanner layout={['customize', ['reject', 'accept']]} primaryButton="accept" />
+```
 
-### 1. Design tokens
+### 2. Design tokens
 
 Set global values for colors, typography, spacing, radius, shadows, and motion:
 
@@ -68,55 +94,140 @@ Set global values for colors, typography, spacing, radius, shadows, and motion:
 options={{ theme: { colors: { primary: '#6366f1' } } }}
 ```
 
-### 2. Component slots
+Use tokens first when the change is semantic:
+
+* Banner card background -> `theme.colors.surface`
+* Banner footer background -> `theme.colors.surfaceHover`
+* Shared copy color -> `theme.colors.text` and `theme.colors.textMuted`
+
+```tsx
+options={{
+  theme: {
+    colors: {
+      surface: '#ffffff',
+      surfaceHover: '#f6f3ee',
+    },
+  },
+}}
+```
+
+### 3. Component slots
 
 Target specific component parts via the `slots` object:
 
 ```tsx
-options={{ theme: { slots: { consentBannerTitle: 'text-2xl font-bold' } } }}
+options={{
+  theme: {
+    slots: {
+      consentBannerCard: 'rounded-[28px] shadow-xl',
+      consentBannerFooter: 'border-t border-black/10',
+      consentBannerTitle: 'tracking-tight',
+    },
+  },
+}}
 ```
 
-### 3. CSS variables
+Use slots when the component part is right but the local styling needs adjustment.
 
-Override `--c15t-*` custom properties in your stylesheet.
+### 4. CSS variables and className-level overrides
 
-### 4. className prop
+Override `--c15t-*` custom properties in your stylesheet or attach classes through slots when your app styling is driven externally.
 
-Pass className directly to components:
+Reach for this after tokens and slots, not before.
 
 ```tsx
-<ConsentBanner className="my-custom-banner" />
+options={{
+  theme: {
+    slots: {
+      consentBannerFooter: 'bg-[var(--banner-footer)]',
+    },
+  },
+}}
 ```
 
-### 5. noStyle prop
+## Escalating Beyond Pre-Built Components
+
+Only move up this ladder when the lower rung cannot satisfy the request.
 
-Strip all default styles and build from scratch (best paired with [Headless Mode](../headless)):
+### 5. Compound components
+
+Use compound components when you need to rearrange existing c15t primitives:
+
+```tsx
+<ConsentBanner.Root>
+  <ConsentBanner.Card>
+    <ConsentBanner.Header>
+      <ConsentBanner.Title />
+      <ConsentBanner.Description />
+    </ConsentBanner.Header>
+    <ConsentBanner.Footer>
+      <ConsentBanner.CustomizeButton />
+      <ConsentBanner.FooterSubGroup>
+        <ConsentBanner.RejectButton />
+        <ConsentBanner.AcceptButton />
+      </ConsentBanner.FooterSubGroup>
+    </ConsentBanner.Footer>
+  </ConsentBanner.Card>
+</ConsentBanner.Root>
+```
+
+### 6. `noStyle`
+
+Use `noStyle` only when the c15t structure is still correct but you want to replace all visual defaults:
 
 ```tsx
 <ConsentBanner noStyle />
 ```
 
+### 7. Headless
+
+Go headless only when you are replacing both markup and behavior. For that path, continue to [Headless Mode](../headless).
+
 ## Common Styling Tasks
 
-### Change brand color globally
+### Change the banner footer background
 
 ```tsx
-options={{ theme: { colors: { primary: '#0ea5e9', primaryHover: '#0284c7' } } }}
+options={{
+  theme: {
+    colors: {
+      surfaceHover: '#f6f3ee',
+    },
+  },
+}}
 ```
 
-### Make the banner card more compact
+Use `theme.colors.surfaceHover` before trying raw CSS.
+
+### Change the banner card background
 
 ```tsx
-options={{ theme: { spacing: { md: '0.75rem', lg: '1rem' } } }}
+options={{
+  theme: {
+    colors: {
+      surface: '#fffdf8',
+    },
+  },
+}}
 ```
 
-### Round primary/secondary buttons
+Use `theme.colors.surface` before overriding banner CSS variables directly.
+
+### Tweak the banner card, footer, or title styling without changing markup
 
 ```tsx
-options={{ theme: { slots: { buttonPrimary: 'rounded-full', buttonSecondary: 'rounded-full' } } }}
+options={{
+  theme: {
+    slots: {
+      consentBannerCard: 'rounded-[28px] shadow-xl',
+      consentBannerFooter: 'border-t border-black/10 px-6',
+      consentBannerTitle: 'text-xl tracking-tight',
+    },
+  },
+}}
 ```
 
-### Change consent action button styles semantically
+### Change stock consent action button styles semantically
 
 ```tsx
 options={{
@@ -132,6 +243,29 @@ options={{
 
 Use `theme.consentActions` when you want to change the stock banner/dialog button treatment without rewriting the component layout. Policy packs still control action arrangement and primary-action hints. The theme controls whether those actions render as `stroke`, `filled`, `ghost`, or `lighter`.
 
+### Change banner copy without replacing the component
+
+```tsx
+options={{
+  i18n: {
+    locale: 'en',
+    messages: {
+      en: {
+        cookieBanner: {
+          title: 'We value your privacy',
+          description: 'We use cookies to improve the site and measure performance.',
+        },
+        common: {
+          acceptAll: 'Accept all',
+          rejectAll: 'Reject all',
+          customize: 'Manage preferences',
+        },
+      },
+    },
+  },
+}}
+```
+
 ### Enable dark mode safely
 
 ```tsx
@@ -144,8 +278,11 @@ options={{
 }}
 ```
 
+> ℹ️ **Info:**
+> If a token change does not show up where you expect, check how that component maps tokens to CSS variables before escalating. For example, the stock banner footer background comes from colors.surfaceHover, not a separate footer token.
+>
 > ⚠️ **Warning:**
-> noStyle: true removes layout and visual defaults. Use it only when you want full control.Use either tokens/slots or raw CSS variable overrides intentionally to avoid conflicting style sources.For dark mode, c15t supports .dark and .c15t-dark.
+> Do not jump to CSS overrides or !important because a token did not appear to work at first glance.noStyle: true removes layout and visual defaults. Treat it as an advanced opt-out, not a normal theming step.Headless mode is for replacing markup and behavior, not for styling-only requests.Use either tokens/slots or raw CSS variable overrides intentionally to avoid conflicting style sources.For dark mode, c15t supports .dark and .c15t-dark.
 
 ## API Reference
 

package/docs/styling/slots.md

@@ -4,7 +4,19 @@ description: Target individual component parts with styles using the slot system
 ---
 ## What are Slots?
 
-Slots let you target specific parts of consent components with styles. Each component is built from named "slots" (e.g., `consentBannerTitle`, `consentDialogFooter`) that you can style individually.
+Slots let you target specific parts of consent components with styles. Each component is built from named slots such as `consentBannerTitle` and `consentDialogFooter`.
+
+Use slots after the stock component APIs and design tokens:
+
+* If the change is semantic, prefer tokens first. For example, the stock banner footer background comes from `theme.colors.surfaceHover`.
+* If the component part is correct but you need a local tweak, use a slot.
+
+Common banner slot choices:
+
+* `consentBannerCard` for card radius, shadow, width, and local background treatment
+* `consentBannerFooter` for spacing, borders, and local footer styling
+* `consentBannerTitle` for title typography
+* `buttonPrimary` and `buttonSecondary` for shared button classes
 
 ## Using Slots
 
@@ -13,8 +25,8 @@ Pass slot styles in the theme's `slots` object:
 ```tsx
 const theme = {
   slots: {
-    // String value = className
-    consentBannerTitle: 'text-xl font-bold text-gray-900',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'text-xl font-bold tracking-tight',
 
     // Object value = className + inline styles
     consentBannerCard: {
@@ -34,13 +46,31 @@ Each slot accepts either a `string` (treated as className) or a `SlotStyle` obje
 consentBannerTitle: 'my-custom-class'
 
 // Object: className + style + noStyle
-consentBannerTitle: {
-  className: 'my-custom-class',
-  style: { color: 'red', fontSize: '1.5rem' },
-  noStyle: false, // Set true to remove default styles for this slot
+consentBannerFooter: {
+  className: 'border-t border-black/10',
+  style: { paddingBlock: '1rem' },
+  noStyle: false, // Set true only when you want to remove this slot's default styling
 }
 ```
 
+`noStyle` on a slot is an advanced escape hatch. Start with className and style overrides first.
+
+## Example: Style the stock banner without changing markup
+
+```tsx
+const theme = {
+  colors: {
+    surface: '#fffdf8',
+    surfaceHover: '#f6f3ee',
+  },
+  slots: {
+    consentBannerCard: 'rounded-[28px] shadow-xl',
+    consentBannerFooter: 'border-t border-black/10 px-6',
+    consentBannerTitle: 'tracking-tight',
+  },
+} satisfies Theme;
+```
+
 ## Available Slots
 
 Use the typed API reference below for the full slot list and descriptions. It stays in sync with the actual component slot surface.

package/docs/styling/tailwind.md

@@ -6,21 +6,42 @@ c15t works with Tailwind CSS out of the box. Use the `slots` theme option to app
 
 ## Setup
 
+Import the standard c15t stylesheet once at the root of your app:
+
+```tsx
+// React
+import '@c15t/react/styles.css';
+
+// Next.js
+import '@c15t/nextjs/styles.css';
+```
+
 ### Tailwind v4
 
-No additional configuration needed. Tailwind v4 automatically scans your source files.
+Tailwind v4 automatically scans your source files. Import Tailwind normally. c15t component styles join Tailwind's `components` layer automatically, so no extra c15t-specific layer declaration is needed:
+
+```css
+@import "tailwindcss";
+```
 
 ### Tailwind v3
 
-Add c15t's component paths to your `content` array:
+Import the Tailwind 3-compatible c15t stylesheet before your app Tailwind globals, then keep your standard Tailwind directives in the app stylesheet:
+
+```tsx title="app/layout.tsx"
+import '@c15t/react/styles.tw3.css';
+import './globals.css';
+```
+
+```tsx title="app/layout.tsx"
+import '@c15t/nextjs/styles.tw3.css';
+import './globals.css';
+```
 
-```js title="tailwind.config.js"
-module.exports = {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@c15t/react/**/*.{js,mjs}',
-  ],
-};
+```css title="app/globals.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 ```
 
 ## Using Tailwind with Slots

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@c15t/nextjs",
-	"version": "2.0.0-rc.5",
+	"version": "2.0.0-rc.7",
 	"description": "Developer-first CMP for Next.js: cookie banner, consent manager, preferences centre. GDPR ready with minimal setup and rich customization.",
 	"keywords": [
 		"nextjs",
@@ -27,9 +27,15 @@
 		"directory": "packages/nextjs"
 	},
 	"license": "GPL-3.0-only",
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.css"
+	],
 	"type": "module",
 	"exports": {
+		"./styles.css": "./dist/styles.css",
+		"./styles.tw3.css": "./src/styles.tw3.css",
+		"./iab/styles.css": "./dist/iab/styles.css",
+		"./iab/styles.tw3.css": "./src/iab/styles.tw3.css",
 		"./headless": {
 			"types": "./dist-types/headless.d.ts",
 			"import": "./dist/headless.js",
@@ -47,13 +53,17 @@
 		}
 	},
 	"main": "./dist/index.js",
-	"module": "./dist/index.mjs",
+	"module": "./dist/index.js",
 	"types": "./dist-types/index.d.ts",
 	"files": [
 		"dist",
 		"docs",
 		"dist-types",
-		"client"
+		"client",
+		"src/styles.css",
+		"src/styles.tw3.css",
+		"src/iab/styles.css",
+		"src/iab/styles.tw3.css"
 	],
 	"scripts": {
 		"prebuild": "genversion --esm --semi src/version.ts",
@@ -68,16 +78,15 @@
 		"test:watch": "bun prebuild && vitest --passWithNoTests"
 	},
 	"dependencies": {
-		"@c15t/react": "2.0.0-rc.5",
+		"@c15t/react": "2.0.0-rc.7",
 		"@c15t/translations": "2.0.0-rc.5",
-		"c15t": "2.0.0-rc.5"
+		"c15t": "2.0.0-rc.6"
 	},
 	"devDependencies": {
-		"@c15t/backend": "2.0.0-rc.5",
 		"@c15t/typescript-config": "0.0.1-beta.1",
 		"@c15t/vitest-config": "1.0.0",
 		"genversion": "3.2.0",
-		"typescript": "5.9.3"
+		"typescript": "6.0.2"
 	},
 	"peerDependencies": {
 		"next": "^16.0.0 || ^15.0.0 || ^14.0.0 || ^13.0.0",

package/src/iab/styles.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — IAB TCF component styles.
+ *
+ * Import this stylesheet when using IAB consent components in Next.js.
+ * Self-contained — includes shared primitives, no need for base styles.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/iab/styles.css';
+ */
+@import "@c15t/react/iab/styles.css";

package/src/iab/styles.tw3.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs/iab — Tailwind 3-compatible IAB component styles.
+ *
+ * Import this stylesheet before your app Tailwind globals so utility classes
+ * can come after the c15t base rules.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/iab/styles.tw3.css';
+ */
+@import "@c15t/react/iab/styles.tw3.css";

package/src/styles.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — Non-IAB prebuilt component styles.
+ *
+ * Import this stylesheet once in your root layout when using
+ * prebuilt (styled) consent components.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/styles.css';
+ */
+@import "@c15t/react/styles.css";

package/src/styles.tw3.css

@@ -0,0 +1,10 @@
+/**
+ * @c15t/nextjs — Tailwind 3-compatible prebuilt component styles.
+ *
+ * Import this stylesheet before your app Tailwind globals so utility classes
+ * can come after the c15t base rules.
+ *
+ * Usage:
+ *   import '@c15t/nextjs/styles.tw3.css';
+ */
+@import "@c15t/react/styles.tw3.css";