@tickboxhq/banner-default 0.0.13 → 0.0.14

package/dist/{chunk-DGDSIXCT.js → chunk-FLFKIHIQ.js}

@@ -79,6 +79,8 @@ var TICKBOX_STYLES = `
   left: 16px;
   right: 16px;
   bottom: 16px;
+  max-width: 1100px;
+  margin-inline: auto;
   z-index: var(--tb-z);
   background: var(--tb-bg);
   color: var(--tb-fg);
@@ -108,6 +110,7 @@ var TICKBOX_STYLES = `
 }
 .tb-banner-actions {
   display: flex;
+  align-items: center;
   gap: 8px;
   flex-wrap: wrap;
 }
@@ -364,5 +367,5 @@ function injectStyles() {
 }
 
 export { DEFAULT_BANNER_COPY, DEFAULT_NOTICE_COPY, injectStyles };
-//# sourceMappingURL=chunk-DGDSIXCT.js.map
-//# sourceMappingURL=chunk-DGDSIXCT.js.map
+//# sourceMappingURL=chunk-FLFKIHIQ.js.map
+//# sourceMappingURL=chunk-FLFKIHIQ.js.map

package/dist/chunk-FLFKIHIQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/copy.ts","../src/shared/styles.ts"],"names":[],"mappings":";AAoBO,IAAM,mBAAA,GAAkC;AAAA,EAC7C,KAAA,EAAO,sBAAA;AAAA,EACP,WAAA,EACE,+GAAA;AAAA,EACF,WAAA,EAAa,YAAA;AAAA,EACb,WAAA,EAAa,YAAA;AAAA,EACb,cAAA,EAAgB,WAAA;AAAA,EAChB,SAAA,EAAW,kBAAA;AAAA,EACX,UAAA,EAAY,OAAA;AAAA,EACZ,eAAA,EAAiB,gBAAA;AAAA,EACjB,aAAA,EAAe;AACjB;AAEO,IAAM,mBAAA,GAAkC;AAAA,EAC7C,KAAA,EAAO,wBAAA;AAAA,EACP,WAAA,EACE,6IAAA;AAAA,EACF,gBAAA,EAAkB,QAAA;AAAA,EAClB,WAAA,EAAa,SAAA;AAAA,EACb,eAAA,EAAiB;AACnB;;;AC9BO,IAAM,cAAA,GAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;AA4U9B,IAAM,QAAA,GAAW,wBAAA;AAEjB,IAAI,QAAA,GAAW,KAAA;AAOR,SAAS,YAAA,GAAqB;AACnC,EAAA,IAAI,QAAA,EAAU;AACd,EAAA,IAAI,OAAO,aAAa,WAAA,EAAa;AACrC,EAAA,IAAI,QAAA,CAAS,cAAA,CAAe,QAAQ,CAAA,EAAG;AACrC,IAAA,QAAA,GAAW,IAAA;AACX,IAAA;AAAA,EACF;AACA,EAAA,MAAM,EAAA,GAAK,QAAA,CAAS,aAAA,CAAc,OAAO,CAAA;AACzC,EAAA,EAAA,CAAG,EAAA,GAAK,QAAA;AACR,EAAA,EAAA,CAAG,WAAA,GAAc,cAAA;AACjB,EAAA,QAAA,CAAS,IAAA,CAAK,YAAY,EAAE,CAAA;AAC5B,EAAA,QAAA,GAAW,IAAA;AACb","file":"chunk-FLFKIHIQ.js","sourcesContent":["export type BannerCopy = {\n  title: string\n  description: string\n  acceptLabel: string\n  rejectLabel: string\n  customiseLabel: string\n  saveLabel: string\n  closeLabel: string\n  policyLinkLabel: string\n  requiredBadge: string\n}\n\nexport type NoticeCopy = {\n  title: string\n  description: string\n  acknowledgeLabel: string\n  optOutLabel: string\n  policyLinkLabel: string\n}\n\nexport const DEFAULT_BANNER_COPY: BannerCopy = {\n  title: 'Cookies and tracking',\n  description:\n    'We use cookies to make this site work and, with your consent, to measure usage. You can choose what to allow.',\n  acceptLabel: 'Accept all',\n  rejectLabel: 'Reject all',\n  customiseLabel: 'Customise',\n  saveLabel: 'Save preferences',\n  closeLabel: 'Close',\n  policyLinkLabel: 'Privacy policy',\n  requiredBadge: 'Required',\n}\n\nexport const DEFAULT_NOTICE_COPY: NoticeCopy = {\n  title: 'A note about analytics',\n  description:\n    'We use privacy-friendly analytics to understand how this site is used. No personal data is collected and no advertising profiles are built.',\n  acknowledgeLabel: 'Got it',\n  optOutLabel: 'Opt out',\n  policyLinkLabel: 'Privacy policy',\n}\n","/**\n * Inline CSS for the default banner / notice / modal components.\n *\n * Uses CSS custom properties so users can re-theme without forking. Light\n * and dark themes are wired through `prefers-color-scheme` and the\n * `[data-tb-theme]` attribute.\n *\n * Visual style: GitHub-ish — system font, 6px corners, subtle border + soft\n * shadow, equal-prominence accept/reject buttons.\n */\nexport const TICKBOX_STYLES = `\n:where(.tb-root) {\n  --tb-bg: #ffffff;\n  --tb-fg: #1f2328;\n  --tb-fg-muted: #59636e;\n  --tb-border: #d1d9e0;\n  --tb-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);\n  --tb-primary-bg: #1f2328;\n  --tb-primary-fg: #ffffff;\n  --tb-primary-bg-hover: #000000;\n  --tb-secondary-bg: #ffffff;\n  --tb-secondary-fg: #1f2328;\n  --tb-secondary-bg-hover: #f6f8fa;\n  --tb-link: #0969da;\n  --tb-radius: 6px;\n  --tb-z: 2147483000;\n  font-family:\n    -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica,\n    Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n  color: var(--tb-fg);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n@media (prefers-color-scheme: dark) {\n  :where(.tb-root:not([data-tb-theme=\"light\"])) {\n    --tb-bg: #0d1117;\n    --tb-fg: #f0f6fc;\n    --tb-fg-muted: #9198a1;\n    --tb-border: #30363d;\n    --tb-shadow: 0 8px 24px rgba(1, 4, 9, 0.85);\n    --tb-primary-bg: #f0f6fc;\n    --tb-primary-fg: #0d1117;\n    --tb-primary-bg-hover: #ffffff;\n    --tb-secondary-bg: #15191f;\n    --tb-secondary-fg: #f0f6fc;\n    --tb-secondary-bg-hover: #1f2328;\n    --tb-link: #4493f8;\n  }\n}\n:where(.tb-root[data-tb-theme=\"dark\"]) {\n  --tb-bg: #0d1117;\n  --tb-fg: #f0f6fc;\n  --tb-fg-muted: #9198a1;\n  --tb-border: #30363d;\n  --tb-shadow: 0 8px 24px rgba(1, 4, 9, 0.85);\n  --tb-primary-bg: #f0f6fc;\n  --tb-primary-fg: #0d1117;\n  --tb-primary-bg-hover: #ffffff;\n  --tb-secondary-bg: #15191f;\n  --tb-secondary-fg: #f0f6fc;\n  --tb-secondary-bg-hover: #1f2328;\n  --tb-link: #4493f8;\n}\n\n.tb-banner {\n  position: fixed;\n  left: 16px;\n  right: 16px;\n  bottom: 16px;\n  max-width: 1100px;\n  margin-inline: auto;\n  z-index: var(--tb-z);\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  padding: 16px 20px;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-banner-text {\n  flex: 1 1 320px;\n  min-width: 0;\n}\n.tb-banner-title {\n  font-weight: 600;\n  margin: 0 0 2px;\n  font-size: 14px;\n}\n.tb-banner-desc {\n  margin: 0;\n  color: var(--tb-fg-muted);\n}\n.tb-banner-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.tb-notice {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  z-index: var(--tb-z);\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  padding: 14px 16px;\n  max-width: 360px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-notice-title {\n  font-weight: 600;\n  margin: 0 0 4px;\n  font-size: 14px;\n}\n.tb-notice-desc {\n  margin: 0 0 10px;\n  color: var(--tb-fg-muted);\n  font-size: 13px;\n}\n.tb-notice-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.tb-link {\n  color: var(--tb-link);\n  text-decoration: none;\n  font-size: 13px;\n  margin-right: auto;\n}\n.tb-link:hover { text-decoration: underline; }\n\n.tb-btn {\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: var(--tb-radius);\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  cursor: pointer;\n  line-height: 1.5;\n  transition: background-color 80ms ease;\n  white-space: nowrap;\n}\n.tb-btn:focus-visible {\n  outline: 2px solid var(--tb-link);\n  outline-offset: 2px;\n}\n.tb-btn-primary {\n  background: var(--tb-primary-bg);\n  color: var(--tb-primary-fg);\n}\n.tb-btn-primary:hover { background: var(--tb-primary-bg-hover); }\n.tb-btn-secondary {\n  background: var(--tb-secondary-bg);\n  color: var(--tb-secondary-fg);\n  border-color: var(--tb-border);\n}\n.tb-btn-secondary:hover { background: var(--tb-secondary-bg-hover); }\n/*\n * Style for Accept All and Reject All on the first banner layer. They MUST\n * look identical — UK ICO and EU EDPB treat unequal visual weight on those\n * buttons as a dark pattern. Customisation should not break this symmetry;\n * if you need to apply brand colours, apply them here, not to one button.\n */\n.tb-btn-equal {\n  background: var(--tb-secondary-bg);\n  color: var(--tb-secondary-fg);\n  border-color: var(--tb-border);\n}\n.tb-btn-equal:hover { background: var(--tb-secondary-bg-hover); }\n.tb-btn-ghost {\n  background: transparent;\n  color: var(--tb-fg-muted);\n  padding: 6px 10px;\n}\n.tb-btn-ghost:hover { color: var(--tb-fg); }\n\n.tb-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 18, 24, 0.5);\n  z-index: var(--tb-z);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-modal {\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  width: 100%;\n  max-width: 520px;\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n}\n.tb-modal-head {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--tb-border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n}\n.tb-modal-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n}\n.tb-modal-body {\n  padding: 12px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.tb-modal-foot {\n  padding: 12px 16px;\n  border-top: 1px solid var(--tb-border);\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.tb-cat {\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  padding: 12px;\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n.tb-cat-text { flex: 1; min-width: 0; }\n.tb-cat-name {\n  font-weight: 600;\n  margin: 0 0 2px;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.tb-cat-desc {\n  margin: 0;\n  color: var(--tb-fg-muted);\n  font-size: 13px;\n}\n.tb-badge {\n  display: inline-block;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--tb-fg-muted);\n  background: var(--tb-secondary-bg-hover);\n  border: 1px solid var(--tb-border);\n  border-radius: 999px;\n  padding: 1px 8px;\n}\n\n.tb-switch {\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 18px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n.tb-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n.tb-switch-track {\n  position: absolute;\n  inset: 0;\n  background: var(--tb-border);\n  border-radius: 999px;\n  transition: background-color 100ms ease;\n  cursor: pointer;\n}\n.tb-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--tb-bg);\n  border-radius: 50%;\n  transition: transform 100ms ease;\n}\n.tb-switch input:checked + .tb-switch-track {\n  background: var(--tb-primary-bg);\n}\n.tb-switch input:checked + .tb-switch-track .tb-switch-thumb {\n  transform: translateX(14px);\n}\n.tb-switch input:disabled + .tb-switch-track {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tb-switch input:focus-visible + .tb-switch-track {\n  outline: 2px solid var(--tb-link);\n  outline-offset: 2px;\n}\n\n@keyframes tb-fade-in {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 640px) {\n  .tb-banner {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .tb-banner-actions {\n    flex-direction: column;\n  }\n  .tb-banner-actions .tb-btn { width: 100%; }\n}\n`\n\nconst STYLE_ID = 'tickbox-default-styles'\n\nlet injected = false\n\n/**\n * Insert the stylesheet into `<head>` exactly once per page. Safe to call\n * from every component mount — subsequent calls are no-ops. No-op on the\n * server (no `document`).\n */\nexport function injectStyles(): void {\n  if (injected) return\n  if (typeof document === 'undefined') return\n  if (document.getElementById(STYLE_ID)) {\n    injected = true\n    return\n  }\n  const el = document.createElement('style')\n  el.id = STYLE_ID\n  el.textContent = TICKBOX_STYLES\n  document.head.appendChild(el)\n  injected = true\n}\n"]}

package/dist/react/index.js

@@ -1,4 +1,4 @@
-import { DEFAULT_BANNER_COPY, injectStyles, DEFAULT_NOTICE_COPY } from '../chunk-DGDSIXCT.js';
+import { DEFAULT_BANNER_COPY, injectStyles, DEFAULT_NOTICE_COPY } from '../chunk-FLFKIHIQ.js';
 import { ConsentBanner, ConsentNotice } from '@tickboxhq/react';
 import { useState, useEffect, useId, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';

package/dist/vue/index.js

@@ -1,4 +1,4 @@
-import { injectStyles, DEFAULT_BANNER_COPY, DEFAULT_NOTICE_COPY } from '../chunk-DGDSIXCT.js';
+import { injectStyles, DEFAULT_BANNER_COPY, DEFAULT_NOTICE_COPY } from '../chunk-FLFKIHIQ.js';
 import { ConsentBanner, ConsentNotice } from '@tickboxhq/vue';
 import { defineComponent, onMounted, h, ref } from 'vue';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tickboxhq/banner-default",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Drop-in styled consent banner and notice components for Tickbox",
   "license": "MIT",
   "homepage": "https://tickbox.dev",
@@ -29,13 +29,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@tickboxhq/core": "0.0.13"
+    "@tickboxhq/core": "0.0.14"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "vue": "^3.4.0",
-    "@tickboxhq/vue": "0.0.13",
-    "@tickboxhq/react": "0.0.13"
+    "@tickboxhq/react": "0.0.14",
+    "@tickboxhq/vue": "0.0.14"
   },
   "peerDependenciesMeta": {
     "@tickboxhq/react": {
@@ -61,8 +61,8 @@
     "typescript": "^5.7.2",
     "vitest": "^2.1.8",
     "vue": "^3.5.13",
-    "@tickboxhq/react": "0.0.13",
-    "@tickboxhq/vue": "0.0.13"
+    "@tickboxhq/react": "0.0.14",
+    "@tickboxhq/vue": "0.0.14"
   },
   "scripts": {
     "build": "tsup",

package/dist/chunk-DGDSIXCT.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/shared/copy.ts","../src/shared/styles.ts"],"names":[],"mappings":"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","file":"chunk-DGDSIXCT.js","sourcesContent":["export type BannerCopy = {\n  title: string\n  description: string\n  acceptLabel: string\n  rejectLabel: string\n  customiseLabel: string\n  saveLabel: string\n  closeLabel: string\n  policyLinkLabel: string\n  requiredBadge: string\n}\n\nexport type NoticeCopy = {\n  title: string\n  description: string\n  acknowledgeLabel: string\n  optOutLabel: string\n  policyLinkLabel: string\n}\n\nexport const DEFAULT_BANNER_COPY: BannerCopy = {\n  title: 'Cookies and tracking',\n  description:\n    'We use cookies to make this site work and, with your consent, to measure usage. You can choose what to allow.',\n  acceptLabel: 'Accept all',\n  rejectLabel: 'Reject all',\n  customiseLabel: 'Customise',\n  saveLabel: 'Save preferences',\n  closeLabel: 'Close',\n  policyLinkLabel: 'Privacy policy',\n  requiredBadge: 'Required',\n}\n\nexport const DEFAULT_NOTICE_COPY: NoticeCopy = {\n  title: 'A note about analytics',\n  description:\n    'We use privacy-friendly analytics to understand how this site is used. No personal data is collected and no advertising profiles are built.',\n  acknowledgeLabel: 'Got it',\n  optOutLabel: 'Opt out',\n  policyLinkLabel: 'Privacy policy',\n}\n","/**\n * Inline CSS for the default banner / notice / modal components.\n *\n * Uses CSS custom properties so users can re-theme without forking. Light\n * and dark themes are wired through `prefers-color-scheme` and the\n * `[data-tb-theme]` attribute.\n *\n * Visual style: GitHub-ish — system font, 6px corners, subtle border + soft\n * shadow, equal-prominence accept/reject buttons.\n */\nexport const TICKBOX_STYLES = `\n:where(.tb-root) {\n  --tb-bg: #ffffff;\n  --tb-fg: #1f2328;\n  --tb-fg-muted: #59636e;\n  --tb-border: #d1d9e0;\n  --tb-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);\n  --tb-primary-bg: #1f2328;\n  --tb-primary-fg: #ffffff;\n  --tb-primary-bg-hover: #000000;\n  --tb-secondary-bg: #ffffff;\n  --tb-secondary-fg: #1f2328;\n  --tb-secondary-bg-hover: #f6f8fa;\n  --tb-link: #0969da;\n  --tb-radius: 6px;\n  --tb-z: 2147483000;\n  font-family:\n    -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica,\n    Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\";\n  color: var(--tb-fg);\n  font-size: 14px;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n}\n@media (prefers-color-scheme: dark) {\n  :where(.tb-root:not([data-tb-theme=\"light\"])) {\n    --tb-bg: #0d1117;\n    --tb-fg: #f0f6fc;\n    --tb-fg-muted: #9198a1;\n    --tb-border: #30363d;\n    --tb-shadow: 0 8px 24px rgba(1, 4, 9, 0.85);\n    --tb-primary-bg: #f0f6fc;\n    --tb-primary-fg: #0d1117;\n    --tb-primary-bg-hover: #ffffff;\n    --tb-secondary-bg: #15191f;\n    --tb-secondary-fg: #f0f6fc;\n    --tb-secondary-bg-hover: #1f2328;\n    --tb-link: #4493f8;\n  }\n}\n:where(.tb-root[data-tb-theme=\"dark\"]) {\n  --tb-bg: #0d1117;\n  --tb-fg: #f0f6fc;\n  --tb-fg-muted: #9198a1;\n  --tb-border: #30363d;\n  --tb-shadow: 0 8px 24px rgba(1, 4, 9, 0.85);\n  --tb-primary-bg: #f0f6fc;\n  --tb-primary-fg: #0d1117;\n  --tb-primary-bg-hover: #ffffff;\n  --tb-secondary-bg: #15191f;\n  --tb-secondary-fg: #f0f6fc;\n  --tb-secondary-bg-hover: #1f2328;\n  --tb-link: #4493f8;\n}\n\n.tb-banner {\n  position: fixed;\n  left: 16px;\n  right: 16px;\n  bottom: 16px;\n  z-index: var(--tb-z);\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  padding: 16px 20px;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-banner-text {\n  flex: 1 1 320px;\n  min-width: 0;\n}\n.tb-banner-title {\n  font-weight: 600;\n  margin: 0 0 2px;\n  font-size: 14px;\n}\n.tb-banner-desc {\n  margin: 0;\n  color: var(--tb-fg-muted);\n}\n.tb-banner-actions {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n}\n\n.tb-notice {\n  position: fixed;\n  right: 16px;\n  bottom: 16px;\n  z-index: var(--tb-z);\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  padding: 14px 16px;\n  max-width: 360px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-notice-title {\n  font-weight: 600;\n  margin: 0 0 4px;\n  font-size: 14px;\n}\n.tb-notice-desc {\n  margin: 0 0 10px;\n  color: var(--tb-fg-muted);\n  font-size: 13px;\n}\n.tb-notice-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.tb-link {\n  color: var(--tb-link);\n  text-decoration: none;\n  font-size: 13px;\n  margin-right: auto;\n}\n.tb-link:hover { text-decoration: underline; }\n\n.tb-btn {\n  appearance: none;\n  border: 1px solid transparent;\n  border-radius: var(--tb-radius);\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family: inherit;\n  cursor: pointer;\n  line-height: 1.5;\n  transition: background-color 80ms ease;\n  white-space: nowrap;\n}\n.tb-btn:focus-visible {\n  outline: 2px solid var(--tb-link);\n  outline-offset: 2px;\n}\n.tb-btn-primary {\n  background: var(--tb-primary-bg);\n  color: var(--tb-primary-fg);\n}\n.tb-btn-primary:hover { background: var(--tb-primary-bg-hover); }\n.tb-btn-secondary {\n  background: var(--tb-secondary-bg);\n  color: var(--tb-secondary-fg);\n  border-color: var(--tb-border);\n}\n.tb-btn-secondary:hover { background: var(--tb-secondary-bg-hover); }\n/*\n * Style for Accept All and Reject All on the first banner layer. They MUST\n * look identical — UK ICO and EU EDPB treat unequal visual weight on those\n * buttons as a dark pattern. Customisation should not break this symmetry;\n * if you need to apply brand colours, apply them here, not to one button.\n */\n.tb-btn-equal {\n  background: var(--tb-secondary-bg);\n  color: var(--tb-secondary-fg);\n  border-color: var(--tb-border);\n}\n.tb-btn-equal:hover { background: var(--tb-secondary-bg-hover); }\n.tb-btn-ghost {\n  background: transparent;\n  color: var(--tb-fg-muted);\n  padding: 6px 10px;\n}\n.tb-btn-ghost:hover { color: var(--tb-fg); }\n\n.tb-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(15, 18, 24, 0.5);\n  z-index: var(--tb-z);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 20px;\n  animation: tb-fade-in 160ms ease-out;\n}\n.tb-modal {\n  background: var(--tb-bg);\n  color: var(--tb-fg);\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  box-shadow: var(--tb-shadow);\n  width: 100%;\n  max-width: 520px;\n  max-height: 85vh;\n  display: flex;\n  flex-direction: column;\n}\n.tb-modal-head {\n  padding: 14px 16px;\n  border-bottom: 1px solid var(--tb-border);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n}\n.tb-modal-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n}\n.tb-modal-body {\n  padding: 12px 16px;\n  overflow-y: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n.tb-modal-foot {\n  padding: 12px 16px;\n  border-top: 1px solid var(--tb-border);\n  display: flex;\n  gap: 8px;\n  justify-content: flex-end;\n  flex-wrap: wrap;\n}\n\n.tb-cat {\n  border: 1px solid var(--tb-border);\n  border-radius: var(--tb-radius);\n  padding: 12px;\n  display: flex;\n  gap: 12px;\n  align-items: flex-start;\n}\n.tb-cat-text { flex: 1; min-width: 0; }\n.tb-cat-name {\n  font-weight: 600;\n  margin: 0 0 2px;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n.tb-cat-desc {\n  margin: 0;\n  color: var(--tb-fg-muted);\n  font-size: 13px;\n}\n.tb-badge {\n  display: inline-block;\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--tb-fg-muted);\n  background: var(--tb-secondary-bg-hover);\n  border: 1px solid var(--tb-border);\n  border-radius: 999px;\n  padding: 1px 8px;\n}\n\n.tb-switch {\n  position: relative;\n  display: inline-block;\n  width: 32px;\n  height: 18px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n.tb-switch input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n  position: absolute;\n}\n.tb-switch-track {\n  position: absolute;\n  inset: 0;\n  background: var(--tb-border);\n  border-radius: 999px;\n  transition: background-color 100ms ease;\n  cursor: pointer;\n}\n.tb-switch-thumb {\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 14px;\n  height: 14px;\n  background: var(--tb-bg);\n  border-radius: 50%;\n  transition: transform 100ms ease;\n}\n.tb-switch input:checked + .tb-switch-track {\n  background: var(--tb-primary-bg);\n}\n.tb-switch input:checked + .tb-switch-track .tb-switch-thumb {\n  transform: translateX(14px);\n}\n.tb-switch input:disabled + .tb-switch-track {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.tb-switch input:focus-visible + .tb-switch-track {\n  outline: 2px solid var(--tb-link);\n  outline-offset: 2px;\n}\n\n@keyframes tb-fade-in {\n  from { opacity: 0; transform: translateY(4px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n@media (max-width: 640px) {\n  .tb-banner {\n    flex-direction: column;\n    align-items: stretch;\n  }\n  .tb-banner-actions {\n    flex-direction: column;\n  }\n  .tb-banner-actions .tb-btn { width: 100%; }\n}\n`\n\nconst STYLE_ID = 'tickbox-default-styles'\n\nlet injected = false\n\n/**\n * Insert the stylesheet into `<head>` exactly once per page. Safe to call\n * from every component mount — subsequent calls are no-ops. No-op on the\n * server (no `document`).\n */\nexport function injectStyles(): void {\n  if (injected) return\n  if (typeof document === 'undefined') return\n  if (document.getElementById(STYLE_ID)) {\n    injected = true\n    return\n  }\n  const el = document.createElement('style')\n  el.id = STYLE_ID\n  el.textContent = TICKBOX_STYLES\n  document.head.appendChild(el)\n  injected = true\n}\n"]}