@expo/styleguide-cookie-consent 4.0.0-datagrail.2 → 4.0.0-datagrail.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +1 -1
  2. package/dist/src/CookieConsentProvider.d.ts +2 -2
  3. package/dist/src/bannerStyles.d.ts +1 -1
  4. package/dist/src/consent.d.ts +3 -1
  5. package/dist/src/types.d.ts +0 -1
  6. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- import{c as n}from"react/compiler-runtime";import{useSyncExternalStore as e,useEffect as t}from"react";import{jsx as o,Fragment as a,jsxs as r}from"react/jsx-runtime";const d="data-expo-buttons";function i(n){const e=n.shadowRoot?.querySelector(".dg-app");n.removeAttribute(d);const t=e?function(n){const e=Array.from(n.children).filter((n=>n.classList.contains("dg-button")&&n.getClientRects().length>0)),t=e.find((n=>n.classList.contains("reject_all"))),o=e.find((n=>n.classList.contains("accept_all")));if(!t||!o)return null;const a=Math.round(e[0].getBoundingClientRect().top);if(e.every((n=>Math.round(n.getBoundingClientRect().top)===a)))return null;const r=getComputedStyle(n),d=n.clientWidth-parseFloat(r.paddingLeft)-parseFloat(r.paddingRight),i=parseFloat(r.columnGap)||0;return t.getBoundingClientRect().width+i+o.getBoundingClientRect().width<=d?"split":"stacked"}(e):null;t&&n.setAttribute(d,t)}const s="\n:host(.dg-consent-banner) {\n --dg-consent-background-color: var(--expo-theme-background-screen);\n --dg-consent-background-border: 1px solid var(--expo-theme-border-secondary);\n --consent-border-radius: 20px;\n --dg-body-font-color: var(--expo-theme-text-secondary);\n --dg-title-font-color: var(--expo-theme-text-default);\n --dg-heading-font-color: var(--expo-theme-text-default);\n --dg-option-background: var(--expo-theme-background-element);\n --dg-option-border: var(--expo-theme-border-secondary);\n --dg-option-essential-background: var(--expo-theme-background-element);\n --dg-option-essential-border: var(--expo-theme-border-secondary);\n --dg-category-text: var(--expo-theme-text-default);\n --dg-category-text-enabled: var(--expo-theme-text-default);\n --dg-policy-option-heading-color: var(--expo-theme-text-default);\n --dg-policy-option-heading-enabled-color: var(--expo-theme-text-default);\n --dg-policy-option-description-font-color: var(--expo-theme-text-secondary);\n --dg-policy-option-essential-label-font-color: var(--expo-theme-text-secondary);\n --dg-body-font-weight: 400;\n --dg-secondary-font-weight: 400;\n --dg-policy-option-heading-size: 14px;\n --dg-policy-option-heading-weight: 600;\n --dg-policy-option-description-font-size: 13px;\n --dg-policy-option-description-font-weight: 400;\n --dg-policy-option-essential-label-font-size: 13px;\n --dg-policy-option-essential-label-font-weight: 500;\n --dg-slider-primary: #fff;\n --dg-slider-secondary: var(--expo-theme-text-quaternary);\n --dg-slider-enabled-primary: #fff;\n --dg-slider-enabled-secondary: var(--expo-theme-text-link);\n --dg-language-dropdown-font-color: var(--expo-theme-text-secondary);\n font-family: inherit;\n font-size: 14px;\n line-height: 1.375;\n /* The shadow sits on the host; round it to match the card so the corners don't show a square edge. */\n border-radius: var(--consent-border-radius);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/* Keep the 16px gutter on short viewports too. */\n:host(.dg-consent-banner.dg-left),\n:host(.dg-consent-banner.dg-right),\n:host(.dg-consent-banner.dg-bottom) {\n width: 360px;\n max-width: calc(100% - 32px);\n bottom: 16px;\n}\n\n/* Show the GPC/DNT bottom bar as a corner card. */\n:host(.dg-consent-banner.dg-bottom) {\n left: 16px;\n right: auto;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-app {\n border-radius: var(--consent-border-radius);\n}\n\n/* Put the close button after the notice. */\n:host(.dg-consent-banner.dg-bottom) .dg-header {\n flex: 0 0 auto;\n order: 1;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-browser-signal-notice {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* Center the X on the notice text. */\n:host(.dg-consent-banner.dg-bottom) .dg-header-close {\n display: flex;\n align-items: center;\n}\n\n:host(.dg-consent-banner.dg-modal) .dg-app {\n box-sizing: border-box;\n width: 500px;\n max-width: calc(100% - 32px);\n}\n\n:host(.dg-consent-banner) .dg-app {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n padding: 12px;\n}\n\n:host(.dg-consent-banner) .dg-header,\n:host(.dg-consent-banner) .dg-main-language-dropdown,\n:host(.dg-consent-banner) .dg-main-content-explanation.dg-text-body,\n:host(.dg-consent-banner) .dg-links,\n:host(.dg-consent-banner) .dg-main-content-policies,\n:host(.dg-consent-banner) .dg-tracking-details {\n flex-basis: 100%;\n margin: 0;\n}\n\n/* DataGrail's text elements set Helvetica through --dg-secondary-font; use the page font everywhere. */\n:host(.dg-consent-banner) .dg-main-content-explanation,\n:host(.dg-consent-banner) .dg-link,\n:host(.dg-consent-banner) .dg-header-close,\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-browser-signal-notice-text,\n:host(.dg-consent-banner) .dg-main-language-dropdown span,\n:host(.dg-consent-banner) button {\n font-family: inherit;\n}\n\n:host(.dg-consent-banner) .dg-header {\n align-items: center;\n}\n\n/* Hide the header when it holds only the hidden language menu. */\n:host(.dg-consent-banner) .dg-header:not(:has(.dg-text-title, .dg-header-buttons > *)) {\n display: none;\n}\n\n/* Hide layer titles in the corner banner. */\n:host(.dg-consent-banner.dg-left) .dg-app > .dg-text-title,\n:host(.dg-consent-banner.dg-right) .dg-app > .dg-text-title {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-title {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-header-close svg path,\n:host(.dg-consent-banner) .dg-chevron path,\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon path {\n fill: var(--expo-theme-icon-secondary);\n}\n\n/* GPC/DNT notice. Keep the desktop size on phones. */\n:host(.dg-consent-banner) .dg-browser-signal-notice {\n flex-basis: 100%;\n box-sizing: border-box;\n align-items: center;\n gap: 8px;\n margin: 0;\n padding: 0;\n border: none;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-text {\n margin: 0;\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-main-language-dropdown {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-body {\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-text-body p {\n margin: 0;\n}\n\n:host(.dg-consent-banner) .dg-text-body a,\n:host(.dg-consent-banner) .dg-link {\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n text-decoration: underline;\n}\n\n/* Space the actions from the copy: 17px with the row gap, as in c15t. */\n:host(.dg-consent-banner) .dg-app > :not(.dg-button):has(+ .dg-button) {\n margin-bottom: 9px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policies {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 0;\n margin-bottom: 4px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-main-content-policy-option:first-of-type {\n border: 1px solid var(--expo-theme-border-secondary);\n border-radius: 8px;\n padding: 0 10px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading button,\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading strong {\n font-size: 14px;\n font-weight: 600;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-description {\n padding: 0 0 0 24px;\n line-height: 1.4;\n}\n\n:host(.dg-consent-banner) .dg-collapsible.isOpen .dg-main-content-policy-option-description {\n padding-bottom: 12px;\n}\n\n:host(.dg-consent-banner) .dg-button {\n display: inline-flex;\n align-items: center;\n height: 28px;\n margin: 0;\n padding: 0 12px;\n border: 1px solid var(--expo-theme-border-default);\n border-radius: 9999px;\n background: var(--expo-theme-background-default);\n color: var(--expo-theme-text-default);\n justify-content: center;\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n transition: background-color 150ms, transform 150ms;\n}\n\n:host(.dg-consent-banner) .dg-button:hover {\n background: var(--expo-theme-background-element);\n}\n\n:host(.dg-consent-banner) .dg-button:active {\n transform: scale(0.98);\n}\n\n:host(.dg-consent-banner) .dg-button.open_layer {\n order: 1;\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all {\n order: 2;\n border-color: var(--expo-theme-button-secondary-border);\n background: var(--expo-theme-button-secondary-background);\n color: var(--expo-theme-button-secondary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all:hover {\n background: var(--expo-theme-button-secondary-hover);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_some {\n order: 3;\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all {\n order: 4;\n margin-left: auto;\n border-color: var(--expo-theme-button-primary-border);\n background: var(--expo-theme-button-primary-background);\n color: var(--expo-theme-button-primary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all:hover {\n background: var(--expo-theme-button-primary-hover);\n}\n\n/* Set by watchBannerButtons when the buttons wrap: the spacer breaks the line after the first button, and\n Accept Necessary and Accept All get equal widths. */\n:host(.dg-consent-banner[data-expo-buttons]) .dg-app::after {\n content: '';\n order: 1;\n flex-basis: 100%;\n}\n\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.accept_all {\n flex: 1 1 0;\n margin-left: 0;\n}\n\n/* Cancel the spacer's extra row gap. */\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.accept_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all {\n margin-top: -8px;\n}\n\n/* Too wide to share a row. */\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.accept_all {\n flex-basis: 100%;\n}\n\n/* DataGrail pins the banner to the viewport edges on phones; keep the desktop gutter. */\n@media only screen and (max-width: 480px) {\n :host(.dg-consent-banner.dg-left),\n :host(.dg-consent-banner.dg-right),\n :host(.dg-consent-banner.dg-bottom) {\n width: auto;\n inset: auto 16px 16px;\n }\n\n :host(.dg-consent-banner) .dg-app {\n padding: 12px;\n }\n\n /* Fit the modal's three buttons on a 390px screen. */\n :host(.dg-consent-banner.dg-modal) .dg-app {\n column-gap: 8px;\n }\n\n :host(.dg-consent-banner.dg-modal) .dg-button {\n padding: 0 10px;\n }\n}\n",c=200,g="expo-cookie-consent-queued-events",l={analytics:"pending",marketing:"pending",hasConsented:!1,isDataGrailLoaded:!1};let h=l;const p=new Set,u=[],b=[];let m=null,f=null,x=!1;function w(){return h.analytics}function y(){return h.marketing}function v(){return"granted"===h.analytics}function k(){return"granted"===h.marketing}function C(n,e){n.length>=200||n.push(e)}function _(n){C(u,n)}function L(n){C(b,n)}function E(n){m=n}function R(n){f=n}function j(n,e,t,o){if("granted"===o&&"pending"===t){const t=n.splice(0);e&&t.length>0&&e(t)}else"denied"===o&&(n.length=0)}function A(n,e,t){return n.consentPreferences.cookieOptions.some((n=>n.gtm_key===e&&n.isEnabled))?"granted":t?"denied":"pending"}function S(n,e){n.unshift(...e),n.length=Math.min(n.length,200)}function B(n){const e="page_load"===n.action,t=!e||document.cookie.includes("datagrail_consent_preferences=")||!1===window.DG_BANNER_API?.config().showBanner,o={analytics:A(n,"dg-category-performance",t),marketing:A(n,"dg-category-marketing",t),hasConsented:t,isDataGrailLoaded:!0};if(e){const n=function(){try{const n=window.sessionStorage.getItem(g);if(!n)return null;window.sessionStorage.removeItem(g);const e=JSON.parse(n);return{analytics:Array.isArray(e.analytics)?e.analytics:[],marketing:Array.isArray(e.marketing)?e.marketing:[]}}catch{return null}}();n&&(S(u,n.analytics),S(b,n.marketing))}else(function(n){const e={analytics:"granted"===n.analytics?u:[],marketing:"granted"===n.marketing?b:[]};try{return 0===e.analytics.length&&0===e.marketing.length?window.sessionStorage.removeItem(g):window.sessionStorage.setItem(g,JSON.stringify(e)),!0}catch{return!1}})(o)&&(u.length=0,b.length=0);!function(n){const e=h;h=n,j(u,m,e.analytics,h.analytics),j(b,f,e.marketing,h.marketing);for(const n of p)n()}(o)}function D(){window.DG_BANNER_API?.showConsentBanner()}function I(n){return p.add(n),()=>{p.delete(n)}}function N(){return e(I,G,z)}function z(){return l}function G(){return h}function M(){h=l,u.length=0,b.length=0,m=null,f=null,x=!1;for(const n of p)n()}const O="datagrail-consent",q="dg-consent-custom-style",P="google-tag-manager",T="google-analytics";function F(n){window.dataLayer=window.dataLayer??[],"function"!=typeof window.gtag&&(window.gtag=function(){window.dataLayer.push(arguments)}),function(n){return window.dataLayer.some((e=>{const t=e;return"config"===t?.[0]&&t[1]===n}))}(n)||(window.gtag("js",new Date),window.gtag("config",n))}function H(e){const r=n(26),{children:c,customerId:g,containerId:l,gtmId:h,ga4Id:p,disabled:u,styles:b}=e,m=void 0!==u&&u,f=void 0===b?s:b,{analytics:w,isDataGrailLoaded:y}=N(),v="granted"===w,k=h?void 0:p;let C,_,L,E,R,j,A,S,D,I,z;return r[0]!==p||r[1]!==h?(C=()=>{h&&p&&"undefined"!=typeof process&&"production"!==process.env.NODE_ENV&&console.warn("[cookie-consent] ga4Id is ignored when gtmId is set. Load GA4 from the GTM container instead.")},_=[h,p],r[0]=p,r[1]=h,r[2]=C,r[3]=_):(C=r[2],_=r[3]),t(C,_),r[4]!==l||r[5]!==g||r[6]!==m||r[7]!==f?(L=()=>{if(m)return;x||(x=!0,window.dgEvent=window.dgEvent??[],window.dgEvent.push({event:"initial_preference_callback",params:B}),window.dgEvent.push({event:"preference_callback",params:B}));const n=f?function(){if("undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof ResizeObserver)return()=>{};const n=new Set,e=new WeakMap,t=[],o=new Set;let a=0;const r=n=>{o.add(n),a||(a=requestAnimationFrame((()=>{a=0,o.forEach(i),o.clear()})))},s=new ResizeObserver((n=>{n.forEach((n=>{const t=e.get(n.target);t&&r(t)}))})),c=n=>{const t=n.shadowRoot?.querySelector(".dg-app");t&&!e.has(t)&&(e.set(t,n),s.observe(t)),r(n)},g=e=>{if(n.has(e)||!e.shadowRoot)return;n.add(e);const o=new MutationObserver((()=>c(e)));o.observe(e.shadowRoot,{childList:!0,subtree:!0,characterData:!0}),t.push(o),c(e)},l=()=>{document.querySelectorAll(".dg-consent-banner").forEach(g)},h=new MutationObserver(l);return h.observe(document.body,{childList:!0}),l(),()=>{h.disconnect(),t.forEach((n=>n.disconnect())),s.disconnect(),a&&cancelAnimationFrame(a),n.forEach((n=>n.removeAttribute(d)))}}():void 0;return f&&function(n){if(document.getElementById(q))return;const e=document.createElement("style");e.id=q,e.textContent=n,document.head.prepend(e)}(f),function(n,e){if(document.getElementById(O))return;const t=document.createElement("script");t.id=O,t.async=!0,t.src=`https://api.consentjs.datagrail.io/${n}/${e}/consent-loader.js`,document.head.prepend(t)}(g,l),n},E=[m,g,l,f],r[4]=l,r[5]=g,r[6]=m,r[7]=f,r[8]=L,r[9]=E):(L=r[8],E=r[9]),t(L,E),r[10]!==m||r[11]!==h||r[12]!==y?(R=()=>{!m&&h&&y&&function(n){if(document.getElementById(P))return;const e=document.createElement("script");e.id=P,e.text=function(n){return`\nwindow.dataLayer = window.dataLayer || [];\nwindow.gtag = function () {\n window.dataLayer.push(arguments);\n};\n(function (w, d, s, l, i) {\n w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });\n var f = d.getElementsByTagName(s)[0];\n var j = d.createElement(s);\n j.async = true;\n j.src = "https://www.googletagmanager.com/gtm.js?id=" + i;\n f.parentNode.insertBefore(j, f);\n})(window, document, "script", "dataLayer", "${n}");\n`}(n),document.head.appendChild(e)}(h)},j=[m,h,y],r[10]=m,r[11]=h,r[12]=y,r[13]=R,r[14]=j):(R=r[13],j=r[14]),t(R,j),r[15]!==k||r[16]!==m?(S=()=>{!m&&k&&F(k)},A=[m,k],r[15]=k,r[16]=m,r[17]=A,r[18]=S):(A=r[17],S=r[18]),t(S,A),r[19]!==k||r[20]!==m||r[21]!==v?(D=()=>{!m&&k&&v&&function(n){if(document.getElementById(T))return;F(n);const e=document.createElement("script");e.id=T,e.async=!0,e.src=`https://www.googletagmanager.com/gtag/js?id=${n}`,document.head.appendChild(e)}(k)},I=[m,k,v],r[19]=k,r[20]=m,r[21]=v,r[22]=D,r[23]=I):(D=r[22],I=r[23]),t(D,I),r[24]!==c?(z=o(a,{children:c}),r[24]=c,r[25]=z):z=r[25],z}const Z="text-secondary hocus:text-default inline-flex items-center gap-1.5 text-sm transition-colors cursor-pointer",$="Your Privacy Choices";function W(e){const t=n(4),{fallbackHref:d}=e,{isDataGrailLoaded:i}=N();let s;t[0]===Symbol.for("react.memo_cache_sentinel")?(s=r(a,{children:[o(J,{}),o("span",{className:"font-semibold",children:$})]}),t[0]=s):s=t[0];const c=s;if(!i){let n;return t[1]!==d?(n=o("a",{href:d,className:Z,"aria-label":$,children:c}),t[1]=d,t[2]=n):n=t[2],n}let g;return t[3]===Symbol.for("react.memo_cache_sentinel")?(g=o("button",{type:"button",onClick:D,className:Z,"aria-label":$,children:c}),t[3]=g):g=t[3],g}function J(){const e=n(1);let t;return e[0]===Symbol.for("react.memo_cache_sentinel")?(t=r("svg",{width:"30",height:"16",viewBox:"0 0 743 376",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[o("rect",{width:"742.6",height:"376",rx:"188",fill:"white"}),o("rect",{x:"14.2146",y:"14.2146",width:"714.171",height:"347.571",rx:"173.785",stroke:"#405D96",strokeWidth:"28.4292"}),o("path",{d:"M421.723 0H554.6C658.43 0 742.6 84.1705 742.6 188C742.6 291.83 658.43 376 554.6 376H320.877L421.723 0Z",fill:"#405D96"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M315.783 112.736C321.683 117.519 322.591 126.181 317.809 132.084L216.494 257.149C207.93 267.721 192.099 268.548 182.48 258.926L123.211 199.638C117.84 194.266 117.84 185.556 123.211 180.184C128.581 174.812 137.288 174.812 142.659 180.184L198.33 235.873L296.44 114.763C301.222 108.86 309.882 107.953 315.783 112.736Z",fill:"#405D96"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M456.576 106.585C462.095 101.365 470.799 101.608 476.017 107.129L608.556 247.338C613.774 252.858 613.531 261.565 608.013 266.785C602.494 272.005 593.79 271.761 588.572 266.241L456.033 126.031C450.814 120.511 451.058 111.804 456.576 106.585Z",fill:"white"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M610.222 108.733C615.592 114.106 615.592 122.815 610.222 128.188L473.815 264.636C468.445 270.008 459.738 270.008 454.367 264.636C448.997 259.264 448.997 250.554 454.367 245.182L590.774 108.733C596.144 103.361 604.851 103.361 610.222 108.733Z",fill:"white"})]}),e[0]=t):t=e[0],t}export{H as CookieConsentProvider,c as MAX_QUEUE_SIZE,W as PrivacyChoicesButton,_ as enqueueAnalyticsEvent,L as enqueueMarketingEvent,s as expoBannerStyles,w as getAnalyticsConsentStatus,y as getMarketingConsentStatus,v as isAnalyticsConsented,k as isMarketingConsented,M as resetConsentState,E as setAnalyticsReplayFn,R as setMarketingReplayFn,D as showConsentPreferences,N as useConsent};
2
+ import{c as n}from"react/compiler-runtime";import{useSyncExternalStore as e,useEffect as t}from"react";import{jsx as o,Fragment as a,jsxs as r}from"react/jsx-runtime";const d="data-expo-buttons";function i(n){const e=n.shadowRoot?.querySelector(".dg-app");n.removeAttribute(d);const t=e?function(n){const e=Array.from(n.children).filter((n=>n.classList.contains("dg-button")&&n.getClientRects().length>0)),t=e.find((n=>n.classList.contains("reject_all"))),o=e.find((n=>n.classList.contains("accept_all")));if(!t||!o)return null;const a=Math.round(e[0].getBoundingClientRect().top);if(e.every((n=>Math.round(n.getBoundingClientRect().top)===a)))return null;const r=getComputedStyle(n),d=n.clientWidth-parseFloat(r.paddingLeft)-parseFloat(r.paddingRight),i=parseFloat(r.columnGap)||0;return t.getBoundingClientRect().width+i+o.getBoundingClientRect().width<=d?"split":"stacked"}(e):null;t&&n.setAttribute(d,t)}const s="\n:host(.dg-consent-banner) {\n --dg-consent-background-color: var(--expo-theme-background-screen);\n --dg-consent-background-border: 1px solid var(--expo-theme-border-secondary);\n --consent-border-radius: 20px;\n --dg-body-font-color: var(--expo-theme-text-secondary);\n --dg-title-font-color: var(--expo-theme-text-default);\n --dg-heading-font-color: var(--expo-theme-text-default);\n --dg-option-background: var(--expo-theme-background-element);\n --dg-option-border: var(--expo-theme-border-secondary);\n --dg-option-essential-background: var(--expo-theme-background-element);\n --dg-option-essential-border: var(--expo-theme-border-secondary);\n --dg-category-text: var(--expo-theme-text-default);\n --dg-category-text-enabled: var(--expo-theme-text-default);\n --dg-policy-option-heading-color: var(--expo-theme-text-default);\n --dg-policy-option-heading-enabled-color: var(--expo-theme-text-default);\n --dg-policy-option-description-font-color: var(--expo-theme-text-secondary);\n --dg-policy-option-essential-label-font-color: var(--expo-theme-text-secondary);\n --dg-body-font-weight: 400;\n --dg-secondary-font-weight: 400;\n --dg-policy-option-heading-size: 14px;\n --dg-policy-option-heading-weight: 600;\n --dg-policy-option-description-font-size: 13px;\n --dg-policy-option-description-font-weight: 400;\n --dg-policy-option-essential-label-font-size: 13px;\n --dg-policy-option-essential-label-font-weight: 500;\n --dg-slider-primary: #fff;\n --dg-slider-secondary: var(--expo-theme-text-quaternary);\n --dg-slider-enabled-primary: #fff;\n --dg-slider-enabled-secondary: var(--expo-theme-text-link);\n --dg-language-dropdown-font-color: var(--expo-theme-text-secondary);\n font-family: inherit;\n font-size: 14px;\n line-height: 1.375;\n /* The shadow sits on the host; round it to match the card so the corners don't show a square edge. */\n border-radius: var(--consent-border-radius);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/* Keep the 16px gutter on short viewports too. */\n:host(.dg-consent-banner.dg-left),\n:host(.dg-consent-banner.dg-right),\n:host(.dg-consent-banner.dg-bottom) {\n width: 360px;\n max-width: calc(100% - 32px);\n bottom: 16px;\n}\n\n/* Show the GPC/DNT bottom bar as a corner card. */\n:host(.dg-consent-banner.dg-bottom) {\n left: 16px;\n right: auto;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-app {\n border-radius: var(--consent-border-radius);\n}\n\n/* Put the close button after the notice. */\n:host(.dg-consent-banner.dg-bottom) .dg-header {\n flex: 0 0 auto;\n order: 1;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-browser-signal-notice {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* Center the X on the notice text. */\n:host(.dg-consent-banner.dg-bottom) .dg-header-close {\n display: flex;\n align-items: center;\n}\n\n:host(.dg-consent-banner.dg-modal) .dg-app {\n box-sizing: border-box;\n width: 500px;\n max-width: calc(100% - 32px);\n}\n\n:host(.dg-consent-banner) .dg-app {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n padding: 12px;\n}\n\n:host(.dg-consent-banner) .dg-header,\n:host(.dg-consent-banner) .dg-main-language-dropdown,\n:host(.dg-consent-banner) .dg-main-content-explanation.dg-text-body,\n:host(.dg-consent-banner) .dg-links,\n:host(.dg-consent-banner) .dg-main-content-policies,\n:host(.dg-consent-banner) .dg-tracking-details {\n flex-basis: 100%;\n margin: 0;\n}\n\n/* DataGrail's text elements set Helvetica through --dg-secondary-font; use the page font everywhere. */\n:host(.dg-consent-banner) .dg-main-content-explanation,\n:host(.dg-consent-banner) .dg-link,\n:host(.dg-consent-banner) .dg-header-close,\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-browser-signal-notice-text,\n:host(.dg-consent-banner) .dg-main-language-dropdown span,\n:host(.dg-consent-banner) button {\n font-family: inherit;\n}\n\n:host(.dg-consent-banner) .dg-header {\n align-items: center;\n}\n\n/* Hide the header when it holds only the hidden language menu. */\n:host(.dg-consent-banner) .dg-header:not(:has(.dg-text-title, .dg-header-buttons > *)) {\n display: none;\n}\n\n/* Hide layer titles in the corner banner. */\n:host(.dg-consent-banner.dg-left) .dg-app > .dg-text-title,\n:host(.dg-consent-banner.dg-right) .dg-app > .dg-text-title {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-title {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-header-close svg path,\n:host(.dg-consent-banner) .dg-chevron path,\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon path {\n fill: var(--expo-theme-icon-secondary);\n}\n\n/* GPC/DNT notice. Keep the desktop size on phones. */\n:host(.dg-consent-banner) .dg-browser-signal-notice {\n flex-basis: 100%;\n box-sizing: border-box;\n align-items: center;\n gap: 8px;\n margin: 0;\n padding: 0;\n border: none;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-text {\n margin: 0;\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-main-language-dropdown {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-body {\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-text-body p {\n margin: 0;\n}\n\n:host(.dg-consent-banner) .dg-text-body a,\n:host(.dg-consent-banner) .dg-link {\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n text-decoration: underline;\n}\n\n/* Space the actions from the copy: 17px with the row gap, as in c15t. */\n:host(.dg-consent-banner) .dg-app > :not(.dg-button):has(+ .dg-button) {\n margin-bottom: 9px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policies {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 0;\n margin-bottom: 4px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-main-content-policy-option:first-of-type {\n border: 1px solid var(--expo-theme-border-secondary);\n border-radius: 8px;\n padding: 0 10px;\n}\n\n/* DataGrail adds 13px of padding to a 46px heading; keep the rows compact on all screen sizes. */\n:host(.dg-consent-banner) .dg-app .dg-main-content-policy-option-heading {\n height: 40px;\n padding: 0;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading button,\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading strong {\n font-size: 14px;\n font-weight: 600;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-description {\n padding: 0 0 0 24px;\n line-height: 1.4;\n}\n\n:host(.dg-consent-banner) .dg-collapsible.isOpen .dg-main-content-policy-option-description {\n padding-bottom: 12px;\n}\n\n/* DataGrail adds an 8px bottom margin on phones; keep the padding equal above and below. */\n:host(.dg-consent-banner) .dg-app .dg-main-content-policy-option-description > :last-child {\n margin-bottom: 0;\n}\n\n:host(.dg-consent-banner) .dg-button {\n display: inline-flex;\n align-items: center;\n height: 28px;\n margin: 0;\n padding: 0 12px;\n border: 1px solid var(--expo-theme-border-default);\n border-radius: 9999px;\n background: var(--expo-theme-background-default);\n color: var(--expo-theme-text-default);\n justify-content: center;\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n transition: background-color 150ms, transform 150ms;\n}\n\n:host(.dg-consent-banner) .dg-button:hover {\n background: var(--expo-theme-background-element);\n}\n\n:host(.dg-consent-banner) .dg-button:active {\n transform: scale(0.98);\n}\n\n:host(.dg-consent-banner) .dg-button.open_layer {\n order: 1;\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all {\n order: 2;\n border-color: var(--expo-theme-button-secondary-border);\n background: var(--expo-theme-button-secondary-background);\n color: var(--expo-theme-button-secondary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all:hover {\n background: var(--expo-theme-button-secondary-hover);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_some {\n order: 3;\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all {\n order: 4;\n margin-left: auto;\n border-color: var(--expo-theme-button-primary-border);\n background: var(--expo-theme-button-primary-background);\n color: var(--expo-theme-button-primary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all:hover {\n background: var(--expo-theme-button-primary-hover);\n}\n\n/* Set by watchBannerButtons when the buttons wrap: the spacer breaks the line after the first button, and\n Accept Necessary and Accept All get equal widths. */\n:host(.dg-consent-banner[data-expo-buttons]) .dg-app::after {\n content: '';\n order: 1;\n flex-basis: 100%;\n}\n\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.accept_all {\n flex: 1 1 0;\n margin-left: 0;\n}\n\n/* Cancel the spacer's extra row gap. */\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.accept_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all {\n margin-top: -8px;\n}\n\n/* Too wide to share a row. */\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.accept_all {\n flex-basis: 100%;\n}\n\n/* DataGrail pins the banner to the viewport edges on phones; keep the desktop gutter. */\n@media only screen and (max-width: 480px) {\n :host(.dg-consent-banner.dg-left),\n :host(.dg-consent-banner.dg-right),\n :host(.dg-consent-banner.dg-bottom) {\n width: auto;\n inset: auto 16px 16px;\n }\n\n :host(.dg-consent-banner) .dg-app {\n padding: 12px;\n }\n\n /* Fit the modal's three buttons on a 390px screen. */\n :host(.dg-consent-banner.dg-modal) .dg-app {\n column-gap: 8px;\n }\n\n :host(.dg-consent-banner.dg-modal) .dg-button {\n padding: 0 10px;\n }\n}\n",c=200,g={analytics:"pending",marketing:"pending",hasConsented:!1,isDataGrailLoaded:!1};let l=g;const p=new Set,h=[],u=[];let b=null,m=null,f=!1,x=!1;function w(){return l.analytics}function y(){return l.marketing}function v(){return"granted"===l.analytics}function k(){return"granted"===l.marketing}function _(n,e){n.length>=200||n.push(e)}function C(n){_(h,n)}function L(n){_(u,n)}function E(n){b=n}function R(n){m=n}function j(n,e,t,o){if("granted"===o&&"pending"===t){const t=n.splice(0);e&&t.length>0&&e(t)}else"denied"===o&&(n.length=0)}function D(n,e,t){return n.consentPreferences.cookieOptions.some((n=>n.gtm_key===e&&n.isEnabled))?"granted":t?"denied":"pending"}function B(n){const e="page_load"===n.action,t=!e||document.cookie.includes("datagrail_consent_preferences=")||!1===window.DG_BANNER_API?.config().showBanner,o={analytics:D(n,"dg-category-performance",t),marketing:D(n,"dg-category-marketing",t),hasConsented:t,isDataGrailLoaded:!0},a="granted"===l.analytics&&"denied"===o.analytics||"granted"===l.marketing&&"denied"===o.marketing,r=!e&&"granted"!==l.marketing&&"granted"===o.marketing;!function(n){const e=l;l=n,j(h,b,e.analytics,l.analytics),j(u,m,e.marketing,l.marketing);for(const n of p)n()}(o),a?window.location.reload():r&&x&&(window.dataLayer=window.dataLayer??[],window.dataLayer.push({event:"marketing_consent_granted"}))}function G(){window.DG_BANNER_API?.showConsentBanner()}function z(n){return p.add(n),()=>{p.delete(n)}}function A(){return e(z,S,N)}function N(){return g}function S(){return l}function I(){l=g,h.length=0,u.length=0,b=null,m=null,f=!1,x=!1;for(const n of p)n()}const M="datagrail-consent",q="dg-consent-custom-style",O="google-tag-manager",P="google-analytics";function T(n){window.dataLayer=window.dataLayer??[],"function"!=typeof window.gtag&&(window.gtag=function(){window.dataLayer.push(arguments)}),function(n){return window.dataLayer.some((e=>{const t=e;return"config"===t?.[0]&&t[1]===n}))}(n)||(window.gtag("js",new Date),window.gtag("config",n))}function F(e){const r=n(27),{children:c,customerId:g,containerId:l,gtmId:p,ga4Id:h,disabled:u,styles:b}=e,m=void 0!==u&&u,w=void 0===b?s:b,{analytics:y,isDataGrailLoaded:v}=A(),k="granted"===y,_=p?void 0:h;let C,L,E,R,j,D,G,z,N,S,I;return r[0]!==h||r[1]!==p?(C=()=>{p&&h&&"undefined"!=typeof process&&"production"!==process.env.NODE_ENV&&console.warn("[cookie-consent] ga4Id is ignored when gtmId is set. Load GA4 from the GTM container instead.")},L=[p,h],r[0]=h,r[1]=p,r[2]=C,r[3]=L):(C=r[2],L=r[3]),t(C,L),r[4]!==l||r[5]!==g||r[6]!==m||r[7]!==p||r[8]!==w?(E=()=>{if(m)return;!function({signalGtm:n=!1}={}){x=n,f||(f=!0,window.dgEvent=window.dgEvent??[],window.dgEvent.push({event:"block_reload",block:!0}),window.dgEvent.push({event:"initial_preference_callback",params:B}),window.dgEvent.push({event:"preference_callback",params:B}))}({signalGtm:Boolean(p)});const n=w?function(){if("undefined"==typeof document||"undefined"==typeof MutationObserver||"undefined"==typeof ResizeObserver)return()=>{};const n=new Set,e=new WeakMap,t=[],o=new Set;let a=0;const r=n=>{o.add(n),a||(a=requestAnimationFrame((()=>{a=0,o.forEach(i),o.clear()})))},s=new ResizeObserver((n=>{n.forEach((n=>{const t=e.get(n.target);t&&r(t)}))})),c=n=>{const t=n.shadowRoot?.querySelector(".dg-app");t&&!e.has(t)&&(e.set(t,n),s.observe(t)),r(n)},g=e=>{if(n.has(e)||!e.shadowRoot)return;n.add(e);const o=new MutationObserver((()=>c(e)));o.observe(e.shadowRoot,{childList:!0,subtree:!0,characterData:!0}),t.push(o),c(e)},l=()=>{document.querySelectorAll(".dg-consent-banner").forEach(g)},p=new MutationObserver(l);return p.observe(document.body,{childList:!0}),l(),()=>{p.disconnect(),t.forEach((n=>n.disconnect())),s.disconnect(),a&&cancelAnimationFrame(a),n.forEach((n=>n.removeAttribute(d)))}}():void 0;return w&&function(n){if(document.getElementById(q))return;const e=document.createElement("style");e.id=q,e.textContent=n,document.head.prepend(e)}(w),function(n,e){if(document.getElementById(M))return;const t=document.createElement("script");t.id=M,t.async=!0,t.src=`https://api.consentjs.datagrail.io/${n}/${e}/consent-loader.js`,document.head.prepend(t)}(g,l),n},R=[m,g,l,p,w],r[4]=l,r[5]=g,r[6]=m,r[7]=p,r[8]=w,r[9]=E,r[10]=R):(E=r[9],R=r[10]),t(E,R),r[11]!==m||r[12]!==p||r[13]!==v?(j=()=>{!m&&p&&v&&function(n){if(document.getElementById(O))return;const e=document.createElement("script");e.id=O,e.text=function(n){return`\nwindow.dataLayer = window.dataLayer || [];\nwindow.gtag = function () {\n window.dataLayer.push(arguments);\n};\n(function (w, d, s, l, i) {\n w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });\n var f = d.getElementsByTagName(s)[0];\n var j = d.createElement(s);\n j.async = true;\n j.src = "https://www.googletagmanager.com/gtm.js?id=" + i;\n f.parentNode.insertBefore(j, f);\n})(window, document, "script", "dataLayer", "${n}");\n`}(n),document.head.appendChild(e)}(p)},D=[m,p,v],r[11]=m,r[12]=p,r[13]=v,r[14]=j,r[15]=D):(j=r[14],D=r[15]),t(j,D),r[16]!==_||r[17]!==m?(z=()=>{!m&&_&&T(_)},G=[m,_],r[16]=_,r[17]=m,r[18]=G,r[19]=z):(G=r[18],z=r[19]),t(z,G),r[20]!==_||r[21]!==m||r[22]!==k?(N=()=>{!m&&_&&k&&function(n){if(document.getElementById(P))return;T(n);const e=document.createElement("script");e.id=P,e.async=!0,e.src=`https://www.googletagmanager.com/gtag/js?id=${n}`,document.head.appendChild(e)}(_)},S=[m,_,k],r[20]=_,r[21]=m,r[22]=k,r[23]=N,r[24]=S):(N=r[23],S=r[24]),t(N,S),r[25]!==c?(I=o(a,{children:c}),r[25]=c,r[26]=I):I=r[26],I}const H="text-secondary hocus:text-default inline-flex items-center gap-1.5 text-sm transition-colors cursor-pointer",Z="Your Privacy Choices";function $(e){const t=n(4),{fallbackHref:d}=e,{isDataGrailLoaded:i}=A();let s;t[0]===Symbol.for("react.memo_cache_sentinel")?(s=r(a,{children:[o(W,{}),o("span",{className:"font-semibold",children:Z})]}),t[0]=s):s=t[0];const c=s;if(!i){let n;return t[1]!==d?(n=o("a",{href:d,className:H,"aria-label":Z,children:c}),t[1]=d,t[2]=n):n=t[2],n}let g;return t[3]===Symbol.for("react.memo_cache_sentinel")?(g=o("button",{type:"button",onClick:G,className:H,"aria-label":Z,children:c}),t[3]=g):g=t[3],g}function W(){const e=n(1);let t;return e[0]===Symbol.for("react.memo_cache_sentinel")?(t=r("svg",{width:"30",height:"16",viewBox:"0 0 743 376",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[o("rect",{width:"742.6",height:"376",rx:"188",fill:"white"}),o("rect",{x:"14.2146",y:"14.2146",width:"714.171",height:"347.571",rx:"173.785",stroke:"#405D96",strokeWidth:"28.4292"}),o("path",{d:"M421.723 0H554.6C658.43 0 742.6 84.1705 742.6 188C742.6 291.83 658.43 376 554.6 376H320.877L421.723 0Z",fill:"#405D96"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M315.783 112.736C321.683 117.519 322.591 126.181 317.809 132.084L216.494 257.149C207.93 267.721 192.099 268.548 182.48 258.926L123.211 199.638C117.84 194.266 117.84 185.556 123.211 180.184C128.581 174.812 137.288 174.812 142.659 180.184L198.33 235.873L296.44 114.763C301.222 108.86 309.882 107.953 315.783 112.736Z",fill:"#405D96"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M456.576 106.585C462.095 101.365 470.799 101.608 476.017 107.129L608.556 247.338C613.774 252.858 613.531 261.565 608.013 266.785C602.494 272.005 593.79 271.761 588.572 266.241L456.033 126.031C450.814 120.511 451.058 111.804 456.576 106.585Z",fill:"white"}),o("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M610.222 108.733C615.592 114.106 615.592 122.815 610.222 128.188L473.815 264.636C468.445 270.008 459.738 270.008 454.367 264.636C448.997 259.264 448.997 250.554 454.367 245.182L590.774 108.733C596.144 103.361 604.851 103.361 610.222 108.733Z",fill:"white"})]}),e[0]=t):t=e[0],t}export{F as CookieConsentProvider,c as MAX_QUEUE_SIZE,$ as PrivacyChoicesButton,C as enqueueAnalyticsEvent,L as enqueueMarketingEvent,s as expoBannerStyles,w as getAnalyticsConsentStatus,y as getMarketingConsentStatus,v as isAnalyticsConsented,k as isMarketingConsented,I as resetConsentState,E as setAnalyticsReplayFn,R as setMarketingReplayFn,G as showConsentPreferences,A as useConsent};
package/dist/src/CookieConsentProvider.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CookieConsentProviderProps } from './types';
2
2
  /**
3
3
  * Loads the DataGrail banner and, once it reports preferences, the site's Google tags.
4
- * GTM waits for DataGrail so its page-view triggers see the stored consent. DataGrail reloads
5
- * the page when the visitor changes their preferences, so the tags always load with stored consent.
4
+ * GTM waits for DataGrail so its page-view triggers see the stored consent. Grants apply in place;
5
+ * revocations reload the page.
6
6
  */
7
7
  export declare function CookieConsentProvider({ children, customerId, containerId, gtmId, ga4Id, disabled, styles, }: CookieConsentProviderProps): import("react/jsx-runtime").JSX.Element;
package/dist/src/bannerStyles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const expoBannerStyles = "\n:host(.dg-consent-banner) {\n --dg-consent-background-color: var(--expo-theme-background-screen);\n --dg-consent-background-border: 1px solid var(--expo-theme-border-secondary);\n --consent-border-radius: 20px;\n --dg-body-font-color: var(--expo-theme-text-secondary);\n --dg-title-font-color: var(--expo-theme-text-default);\n --dg-heading-font-color: var(--expo-theme-text-default);\n --dg-option-background: var(--expo-theme-background-element);\n --dg-option-border: var(--expo-theme-border-secondary);\n --dg-option-essential-background: var(--expo-theme-background-element);\n --dg-option-essential-border: var(--expo-theme-border-secondary);\n --dg-category-text: var(--expo-theme-text-default);\n --dg-category-text-enabled: var(--expo-theme-text-default);\n --dg-policy-option-heading-color: var(--expo-theme-text-default);\n --dg-policy-option-heading-enabled-color: var(--expo-theme-text-default);\n --dg-policy-option-description-font-color: var(--expo-theme-text-secondary);\n --dg-policy-option-essential-label-font-color: var(--expo-theme-text-secondary);\n --dg-body-font-weight: 400;\n --dg-secondary-font-weight: 400;\n --dg-policy-option-heading-size: 14px;\n --dg-policy-option-heading-weight: 600;\n --dg-policy-option-description-font-size: 13px;\n --dg-policy-option-description-font-weight: 400;\n --dg-policy-option-essential-label-font-size: 13px;\n --dg-policy-option-essential-label-font-weight: 500;\n --dg-slider-primary: #fff;\n --dg-slider-secondary: var(--expo-theme-text-quaternary);\n --dg-slider-enabled-primary: #fff;\n --dg-slider-enabled-secondary: var(--expo-theme-text-link);\n --dg-language-dropdown-font-color: var(--expo-theme-text-secondary);\n font-family: inherit;\n font-size: 14px;\n line-height: 1.375;\n /* The shadow sits on the host; round it to match the card so the corners don't show a square edge. */\n border-radius: var(--consent-border-radius);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/* Keep the 16px gutter on short viewports too. */\n:host(.dg-consent-banner.dg-left),\n:host(.dg-consent-banner.dg-right),\n:host(.dg-consent-banner.dg-bottom) {\n width: 360px;\n max-width: calc(100% - 32px);\n bottom: 16px;\n}\n\n/* Show the GPC/DNT bottom bar as a corner card. */\n:host(.dg-consent-banner.dg-bottom) {\n left: 16px;\n right: auto;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-app {\n border-radius: var(--consent-border-radius);\n}\n\n/* Put the close button after the notice. */\n:host(.dg-consent-banner.dg-bottom) .dg-header {\n flex: 0 0 auto;\n order: 1;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-browser-signal-notice {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* Center the X on the notice text. */\n:host(.dg-consent-banner.dg-bottom) .dg-header-close {\n display: flex;\n align-items: center;\n}\n\n:host(.dg-consent-banner.dg-modal) .dg-app {\n box-sizing: border-box;\n width: 500px;\n max-width: calc(100% - 32px);\n}\n\n:host(.dg-consent-banner) .dg-app {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n padding: 12px;\n}\n\n:host(.dg-consent-banner) .dg-header,\n:host(.dg-consent-banner) .dg-main-language-dropdown,\n:host(.dg-consent-banner) .dg-main-content-explanation.dg-text-body,\n:host(.dg-consent-banner) .dg-links,\n:host(.dg-consent-banner) .dg-main-content-policies,\n:host(.dg-consent-banner) .dg-tracking-details {\n flex-basis: 100%;\n margin: 0;\n}\n\n/* DataGrail's text elements set Helvetica through --dg-secondary-font; use the page font everywhere. */\n:host(.dg-consent-banner) .dg-main-content-explanation,\n:host(.dg-consent-banner) .dg-link,\n:host(.dg-consent-banner) .dg-header-close,\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-browser-signal-notice-text,\n:host(.dg-consent-banner) .dg-main-language-dropdown span,\n:host(.dg-consent-banner) button {\n font-family: inherit;\n}\n\n:host(.dg-consent-banner) .dg-header {\n align-items: center;\n}\n\n/* Hide the header when it holds only the hidden language menu. */\n:host(.dg-consent-banner) .dg-header:not(:has(.dg-text-title, .dg-header-buttons > *)) {\n display: none;\n}\n\n/* Hide layer titles in the corner banner. */\n:host(.dg-consent-banner.dg-left) .dg-app > .dg-text-title,\n:host(.dg-consent-banner.dg-right) .dg-app > .dg-text-title {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-title {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-header-close svg path,\n:host(.dg-consent-banner) .dg-chevron path,\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon path {\n fill: var(--expo-theme-icon-secondary);\n}\n\n/* GPC/DNT notice. Keep the desktop size on phones. */\n:host(.dg-consent-banner) .dg-browser-signal-notice {\n flex-basis: 100%;\n box-sizing: border-box;\n align-items: center;\n gap: 8px;\n margin: 0;\n padding: 0;\n border: none;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-text {\n margin: 0;\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-main-language-dropdown {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-body {\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-text-body p {\n margin: 0;\n}\n\n:host(.dg-consent-banner) .dg-text-body a,\n:host(.dg-consent-banner) .dg-link {\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n text-decoration: underline;\n}\n\n/* Space the actions from the copy: 17px with the row gap, as in c15t. */\n:host(.dg-consent-banner) .dg-app > :not(.dg-button):has(+ .dg-button) {\n margin-bottom: 9px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policies {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 0;\n margin-bottom: 4px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-main-content-policy-option:first-of-type {\n border: 1px solid var(--expo-theme-border-secondary);\n border-radius: 8px;\n padding: 0 10px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading button,\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading strong {\n font-size: 14px;\n font-weight: 600;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-description {\n padding: 0 0 0 24px;\n line-height: 1.4;\n}\n\n:host(.dg-consent-banner) .dg-collapsible.isOpen .dg-main-content-policy-option-description {\n padding-bottom: 12px;\n}\n\n:host(.dg-consent-banner) .dg-button {\n display: inline-flex;\n align-items: center;\n height: 28px;\n margin: 0;\n padding: 0 12px;\n border: 1px solid var(--expo-theme-border-default);\n border-radius: 9999px;\n background: var(--expo-theme-background-default);\n color: var(--expo-theme-text-default);\n justify-content: center;\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n transition: background-color 150ms, transform 150ms;\n}\n\n:host(.dg-consent-banner) .dg-button:hover {\n background: var(--expo-theme-background-element);\n}\n\n:host(.dg-consent-banner) .dg-button:active {\n transform: scale(0.98);\n}\n\n:host(.dg-consent-banner) .dg-button.open_layer {\n order: 1;\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all {\n order: 2;\n border-color: var(--expo-theme-button-secondary-border);\n background: var(--expo-theme-button-secondary-background);\n color: var(--expo-theme-button-secondary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all:hover {\n background: var(--expo-theme-button-secondary-hover);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_some {\n order: 3;\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all {\n order: 4;\n margin-left: auto;\n border-color: var(--expo-theme-button-primary-border);\n background: var(--expo-theme-button-primary-background);\n color: var(--expo-theme-button-primary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all:hover {\n background: var(--expo-theme-button-primary-hover);\n}\n\n/* Set by watchBannerButtons when the buttons wrap: the spacer breaks the line after the first button, and\n Accept Necessary and Accept All get equal widths. */\n:host(.dg-consent-banner[data-expo-buttons]) .dg-app::after {\n content: '';\n order: 1;\n flex-basis: 100%;\n}\n\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.accept_all {\n flex: 1 1 0;\n margin-left: 0;\n}\n\n/* Cancel the spacer's extra row gap. */\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.accept_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all {\n margin-top: -8px;\n}\n\n/* Too wide to share a row. */\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.accept_all {\n flex-basis: 100%;\n}\n\n/* DataGrail pins the banner to the viewport edges on phones; keep the desktop gutter. */\n@media only screen and (max-width: 480px) {\n :host(.dg-consent-banner.dg-left),\n :host(.dg-consent-banner.dg-right),\n :host(.dg-consent-banner.dg-bottom) {\n width: auto;\n inset: auto 16px 16px;\n }\n\n :host(.dg-consent-banner) .dg-app {\n padding: 12px;\n }\n\n /* Fit the modal's three buttons on a 390px screen. */\n :host(.dg-consent-banner.dg-modal) .dg-app {\n column-gap: 8px;\n }\n\n :host(.dg-consent-banner.dg-modal) .dg-button {\n padding: 0 10px;\n }\n}\n";
1
+ export declare const expoBannerStyles = "\n:host(.dg-consent-banner) {\n --dg-consent-background-color: var(--expo-theme-background-screen);\n --dg-consent-background-border: 1px solid var(--expo-theme-border-secondary);\n --consent-border-radius: 20px;\n --dg-body-font-color: var(--expo-theme-text-secondary);\n --dg-title-font-color: var(--expo-theme-text-default);\n --dg-heading-font-color: var(--expo-theme-text-default);\n --dg-option-background: var(--expo-theme-background-element);\n --dg-option-border: var(--expo-theme-border-secondary);\n --dg-option-essential-background: var(--expo-theme-background-element);\n --dg-option-essential-border: var(--expo-theme-border-secondary);\n --dg-category-text: var(--expo-theme-text-default);\n --dg-category-text-enabled: var(--expo-theme-text-default);\n --dg-policy-option-heading-color: var(--expo-theme-text-default);\n --dg-policy-option-heading-enabled-color: var(--expo-theme-text-default);\n --dg-policy-option-description-font-color: var(--expo-theme-text-secondary);\n --dg-policy-option-essential-label-font-color: var(--expo-theme-text-secondary);\n --dg-body-font-weight: 400;\n --dg-secondary-font-weight: 400;\n --dg-policy-option-heading-size: 14px;\n --dg-policy-option-heading-weight: 600;\n --dg-policy-option-description-font-size: 13px;\n --dg-policy-option-description-font-weight: 400;\n --dg-policy-option-essential-label-font-size: 13px;\n --dg-policy-option-essential-label-font-weight: 500;\n --dg-slider-primary: #fff;\n --dg-slider-secondary: var(--expo-theme-text-quaternary);\n --dg-slider-enabled-primary: #fff;\n --dg-slider-enabled-secondary: var(--expo-theme-text-link);\n --dg-language-dropdown-font-color: var(--expo-theme-text-secondary);\n font-family: inherit;\n font-size: 14px;\n line-height: 1.375;\n /* The shadow sits on the host; round it to match the card so the corners don't show a square edge. */\n border-radius: var(--consent-border-radius);\n box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n\n/* Keep the 16px gutter on short viewports too. */\n:host(.dg-consent-banner.dg-left),\n:host(.dg-consent-banner.dg-right),\n:host(.dg-consent-banner.dg-bottom) {\n width: 360px;\n max-width: calc(100% - 32px);\n bottom: 16px;\n}\n\n/* Show the GPC/DNT bottom bar as a corner card. */\n:host(.dg-consent-banner.dg-bottom) {\n left: 16px;\n right: auto;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-app {\n border-radius: var(--consent-border-radius);\n}\n\n/* Put the close button after the notice. */\n:host(.dg-consent-banner.dg-bottom) .dg-header {\n flex: 0 0 auto;\n order: 1;\n}\n\n:host(.dg-consent-banner.dg-bottom) .dg-browser-signal-notice {\n flex: 1 1 0;\n min-width: 0;\n}\n\n/* Center the X on the notice text. */\n:host(.dg-consent-banner.dg-bottom) .dg-header-close {\n display: flex;\n align-items: center;\n}\n\n:host(.dg-consent-banner.dg-modal) .dg-app {\n box-sizing: border-box;\n width: 500px;\n max-width: calc(100% - 32px);\n}\n\n:host(.dg-consent-banner) .dg-app {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: 8px 12px;\n padding: 12px;\n}\n\n:host(.dg-consent-banner) .dg-header,\n:host(.dg-consent-banner) .dg-main-language-dropdown,\n:host(.dg-consent-banner) .dg-main-content-explanation.dg-text-body,\n:host(.dg-consent-banner) .dg-links,\n:host(.dg-consent-banner) .dg-main-content-policies,\n:host(.dg-consent-banner) .dg-tracking-details {\n flex-basis: 100%;\n margin: 0;\n}\n\n/* DataGrail's text elements set Helvetica through --dg-secondary-font; use the page font everywhere. */\n:host(.dg-consent-banner) .dg-main-content-explanation,\n:host(.dg-consent-banner) .dg-link,\n:host(.dg-consent-banner) .dg-header-close,\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-browser-signal-notice-text,\n:host(.dg-consent-banner) .dg-main-language-dropdown span,\n:host(.dg-consent-banner) button {\n font-family: inherit;\n}\n\n:host(.dg-consent-banner) .dg-header {\n align-items: center;\n}\n\n/* Hide the header when it holds only the hidden language menu. */\n:host(.dg-consent-banner) .dg-header:not(:has(.dg-text-title, .dg-header-buttons > *)) {\n display: none;\n}\n\n/* Hide layer titles in the corner banner. */\n:host(.dg-consent-banner.dg-left) .dg-app > .dg-text-title,\n:host(.dg-consent-banner.dg-right) .dg-app > .dg-text-title {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-title {\n margin: 0;\n font-size: 14px;\n font-weight: 600;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-header-close svg path,\n:host(.dg-consent-banner) .dg-chevron path,\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon path {\n fill: var(--expo-theme-icon-secondary);\n}\n\n/* GPC/DNT notice. Keep the desktop size on phones. */\n:host(.dg-consent-banner) .dg-browser-signal-notice {\n flex-basis: 100%;\n box-sizing: border-box;\n align-items: center;\n gap: 8px;\n margin: 0;\n padding: 0;\n border: none;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-icon {\n flex-shrink: 0;\n width: 20px;\n height: 20px;\n}\n\n:host(.dg-consent-banner) .dg-browser-signal-notice-text {\n margin: 0;\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-main-language-dropdown {\n display: none;\n}\n\n:host(.dg-consent-banner) .dg-text-body {\n font-size: 14px;\n line-height: 1.375;\n}\n\n:host(.dg-consent-banner) .dg-text-body p {\n margin: 0;\n}\n\n:host(.dg-consent-banner) .dg-text-body a,\n:host(.dg-consent-banner) .dg-link {\n color: var(--expo-theme-text-secondary);\n font-size: 14px;\n text-decoration: underline;\n}\n\n/* Space the actions from the copy: 17px with the row gap, as in c15t. */\n:host(.dg-consent-banner) .dg-app > :not(.dg-button):has(+ .dg-button) {\n margin-bottom: 9px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policies {\n display: flex;\n flex-direction: column;\n gap: 8px;\n padding: 0;\n margin-bottom: 4px;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option,\n:host(.dg-consent-banner) .dg-main-content-policy-option:first-of-type {\n border: 1px solid var(--expo-theme-border-secondary);\n border-radius: 8px;\n padding: 0 10px;\n}\n\n/* DataGrail adds 13px of padding to a 46px heading; keep the rows compact on all screen sizes. */\n:host(.dg-consent-banner) .dg-app .dg-main-content-policy-option-heading {\n height: 40px;\n padding: 0;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading button,\n:host(.dg-consent-banner) .dg-main-content-policy-option-heading strong {\n font-size: 14px;\n font-weight: 600;\n}\n\n:host(.dg-consent-banner) .dg-main-content-policy-option-description {\n padding: 0 0 0 24px;\n line-height: 1.4;\n}\n\n:host(.dg-consent-banner) .dg-collapsible.isOpen .dg-main-content-policy-option-description {\n padding-bottom: 12px;\n}\n\n/* DataGrail adds an 8px bottom margin on phones; keep the padding equal above and below. */\n:host(.dg-consent-banner) .dg-app .dg-main-content-policy-option-description > :last-child {\n margin-bottom: 0;\n}\n\n:host(.dg-consent-banner) .dg-button {\n display: inline-flex;\n align-items: center;\n height: 28px;\n margin: 0;\n padding: 0 12px;\n border: 1px solid var(--expo-theme-border-default);\n border-radius: 9999px;\n background: var(--expo-theme-background-default);\n color: var(--expo-theme-text-default);\n justify-content: center;\n font-size: 12px;\n font-weight: 500;\n line-height: 1;\n white-space: nowrap;\n transition: background-color 150ms, transform 150ms;\n}\n\n:host(.dg-consent-banner) .dg-button:hover {\n background: var(--expo-theme-background-element);\n}\n\n:host(.dg-consent-banner) .dg-button:active {\n transform: scale(0.98);\n}\n\n:host(.dg-consent-banner) .dg-button.open_layer {\n order: 1;\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all {\n order: 2;\n border-color: var(--expo-theme-button-secondary-border);\n background: var(--expo-theme-button-secondary-background);\n color: var(--expo-theme-button-secondary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.reject_all:hover {\n background: var(--expo-theme-button-secondary-hover);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_some {\n order: 3;\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all {\n order: 4;\n margin-left: auto;\n border-color: var(--expo-theme-button-primary-border);\n background: var(--expo-theme-button-primary-background);\n color: var(--expo-theme-button-primary-text);\n}\n\n:host(.dg-consent-banner) .dg-button.accept_all:hover {\n background: var(--expo-theme-button-primary-hover);\n}\n\n/* Set by watchBannerButtons when the buttons wrap: the spacer breaks the line after the first button, and\n Accept Necessary and Accept All get equal widths. */\n:host(.dg-consent-banner[data-expo-buttons]) .dg-app::after {\n content: '';\n order: 1;\n flex-basis: 100%;\n}\n\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons]) .dg-button.accept_all {\n flex: 1 1 0;\n margin-left: 0;\n}\n\n/* Cancel the spacer's extra row gap. */\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='split']) .dg-button.accept_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all {\n margin-top: -8px;\n}\n\n/* Too wide to share a row. */\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.reject_all,\n:host(.dg-consent-banner[data-expo-buttons='stacked']) .dg-button.accept_all {\n flex-basis: 100%;\n}\n\n/* DataGrail pins the banner to the viewport edges on phones; keep the desktop gutter. */\n@media only screen and (max-width: 480px) {\n :host(.dg-consent-banner.dg-left),\n :host(.dg-consent-banner.dg-right),\n :host(.dg-consent-banner.dg-bottom) {\n width: auto;\n inset: auto 16px 16px;\n }\n\n :host(.dg-consent-banner) .dg-app {\n padding: 12px;\n }\n\n /* Fit the modal's three buttons on a 390px screen. */\n :host(.dg-consent-banner.dg-modal) .dg-app {\n column-gap: 8px;\n }\n\n :host(.dg-consent-banner.dg-modal) .dg-button {\n padding: 0 10px;\n }\n}\n";
package/dist/src/consent.d.ts CHANGED
@@ -8,7 +8,9 @@ export declare function enqueueAnalyticsEvent(event: QueuedEvent): void;
8
8
  export declare function enqueueMarketingEvent(event: QueuedEvent): void;
9
9
  export declare function setAnalyticsReplayFn(fn: (events: QueuedEvent[]) => void): void;
10
10
  export declare function setMarketingReplayFn(fn: (events: QueuedEvent[]) => void): void;
11
- export declare function listenForDataGrailConsent(): void;
11
+ export declare function listenForDataGrailConsent({ signalGtm }?: {
12
+ signalGtm?: boolean;
13
+ }): void;
12
14
  export declare function showConsentPreferences(): void;
13
15
  export declare function useConsent(): ConsentState;
14
16
  export declare function resetConsentState(): void;
package/dist/src/types.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  export type ConsentStatus = 'pending' | 'granted' | 'denied';
2
2
  export type QueuedEvent = {
3
3
  type: 'track' | 'identify' | 'group' | 'gtag' | 'adwords';
4
- /** Must survive a JSON round trip: the queue crosses the reload after a consent choice. */
5
4
  args: unknown[];
6
5
  timestamp: number;
7
6
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@expo/styleguide-cookie-consent",
3
- "version": "4.0.0-datagrail.2",
3
+ "version": "4.0.0-datagrail.3",
4
4
  "description": "Cookie consent provider for Expo websites with DataGrail.",
5
5
  "homepage": "https://github.com/expo/styleguide",
6
6
  "repository": {
@@ -37,5 +37,5 @@
37
37
  "peerDependencies": {
38
38
  "react": ">= 19"
39
39
  },
40
- "gitHead": "71044c44b79c109eff9bed9d5da18b40014f8f45"
40
+ "gitHead": "cfe78fa539301501eeb28b3447a33430aba70087"
41
41
  }