@uninspired/cookie-banner 0.0.10 → 0.0.12

package/dist/react/index.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require$$0 = require("react");
 const reactAccordion = require("@radix-ui/react-accordion");
 const lucideReact = require("lucide-react");
+const reactDialog = require("@radix-ui/react-dialog");
 const reactCollapsible = require("@radix-ui/react-collapsible");
 const reactSwitch = require("@radix-ui/react-switch");
 var jsxRuntime = { exports: {} };
@@ -444,7 +445,7 @@ function requireReactJsxRuntime_development() {
           }
         }
       }
-      function checkPropTypes(typeSpecs, values, location, componentName, element) {
+      function checkPropTypes(typeSpecs, values, location2, componentName, element) {
         {
           var has = Function.call.bind(hasOwnProperty);
           for (var typeSpecName in typeSpecs) {
@@ -452,23 +453,23 @@ function requireReactJsxRuntime_development() {
               var error$1 = void 0;
               try {
                 if (typeof typeSpecs[typeSpecName] !== "function") {
-                  var err = Error((componentName || "React class") + ": " + location + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                  var err = Error((componentName || "React class") + ": " + location2 + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                   err.name = "Invariant Violation";
                   throw err;
                 }
-                error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+                error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location2, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
               } catch (ex) {
                 error$1 = ex;
               }
               if (error$1 && !(error$1 instanceof Error)) {
                 setCurrentlyValidatingElement(element);
-                error("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", componentName || "React class", location, typeSpecName, typeof error$1);
+                error("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", componentName || "React class", location2, typeSpecName, typeof error$1);
                 setCurrentlyValidatingElement(null);
               }
               if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
                 loggedTypeFailures[error$1.message] = true;
                 setCurrentlyValidatingElement(element);
-                error("Failed %s type: %s", location, error$1.message);
+                error("Failed %s type: %s", location2, error$1.message);
                 setCurrentlyValidatingElement(null);
               }
             }
@@ -963,25 +964,25 @@ const Text = ({
     )
   );
 };
-const root$2 = "_root_2wcp0_53";
-const open$1 = "_open_2wcp0_66";
-const noTarget = "_noTarget_2wcp0_72";
-const collapsible = "_collapsible_2wcp0_81";
-const header$1 = "_header_2wcp0_84";
-const heading = "_heading_2wcp0_91";
-const chevron$1 = "_chevron_2wcp0_97";
-const settings = "_settings_2wcp0_108";
-const footer = "_footer_2wcp0_122";
-const legal = "_legal_2wcp0_129";
-const actions$1 = "_actions_2wcp0_132";
+const root$2 = "_root_12udu_53";
+const noTarget = "_noTarget_12udu_65";
+const collapsible = "_collapsible_12udu_74";
+const header$1 = "_header_12udu_77";
+const heading = "_heading_12udu_84";
+const chevron$1 = "_chevron_12udu_90";
+const open$1 = "_open_12udu_95";
+const settings = "_settings_12udu_101";
+const footer = "_footer_12udu_115";
+const legal = "_legal_12udu_122";
+const actions$1 = "_actions_12udu_125";
 const classes$2 = {
   root: root$2,
-  open: open$1,
   noTarget,
   collapsible,
   header: header$1,
   heading,
   chevron: chevron$1,
+  open: open$1,
   settings,
   footer,
   legal,
@@ -2074,6 +2075,7 @@ const SelectionProvider = ({
   }, [items]);
   const onSave = require$$0.useCallback(() => {
     saveSelection(selection);
+    location.reload();
   }, [selection]);
   const selectionTaken = require$$0.useMemo(() => {
     if (!savedSelection) return false;
@@ -2179,13 +2181,12 @@ const BannerContent = ({
   const { onSave, onDeclineAll, selectionTaken } = useSelection();
   const [openItem, setOpenItem] = require$$0.useState(void 0);
   const [settingsOpen, setSettingsOpen] = require$$0.useState(defaultSettingsOpen);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Root, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    reactDialog.Content,
     {
       className: clx({
         [classes$2.root]: true,
-        [classes$2.noTarget]: noTarget2,
-        [classes$2.open]: !selectionTaken
+        [classes$2.noTarget]: noTarget2
       }),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         reactCollapsible.Root,
@@ -2196,8 +2197,8 @@ const BannerContent = ({
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.header, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.heading, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { weight: "bold", children: heading2 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", color: "muted", children: subheading })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Title, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { weight: "bold", children: heading2 }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Description, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", color: "muted", children: subheading }) })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(reactCollapsible.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", children: [
                 settingsOpen ? hideLabel : selectLabel,
@@ -2235,15 +2236,15 @@ const BannerContent = ({
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.footer, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes$2.legal, children: privacyPolicy && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: privacyPolicy.url, target: "_blank", children: privacyPolicy.label }) }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.actions, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "neutral", onClick: () => onDeclineAll(), children: declineLabel }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "brand", onClick: () => onSave(), children: saveLabel })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "neutral", onClick: () => onDeclineAll(), children: declineLabel }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(reactDialog.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "brand", onClick: () => onSave(), children: saveLabel }) })
               ] })
             ] })
           ]
         }
       )
     }
-  );
+  ) });
 };
 const Banner = ({
   localStorageKey = "cb-selection",

package/dist/react/index.js

@@ -1,7 +1,8 @@
 import require$$0, { useMemo, useState, useEffect, useCallback, createContext, useContext } from "react";
-import { Item, Trigger, Content, Root as Root$2 } from "@radix-ui/react-accordion";
+import { Item, Trigger, Content, Root as Root$3 } from "@radix-ui/react-accordion";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { Root as Root$1, Trigger as Trigger$1, Content as Content$1 } from "@radix-ui/react-collapsible";
+import { Root as Root$1, Content as Content$1, Title, Description, Close } from "@radix-ui/react-dialog";
+import { Root as Root$2, Trigger as Trigger$1, Content as Content$2 } from "@radix-ui/react-collapsible";
 import { Root, Thumb } from "@radix-ui/react-switch";
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
@@ -442,7 +443,7 @@ function requireReactJsxRuntime_development() {
           }
         }
       }
-      function checkPropTypes(typeSpecs, values, location, componentName, element) {
+      function checkPropTypes(typeSpecs, values, location2, componentName, element) {
         {
           var has = Function.call.bind(hasOwnProperty);
           for (var typeSpecName in typeSpecs) {
@@ -450,23 +451,23 @@ function requireReactJsxRuntime_development() {
               var error$1 = void 0;
               try {
                 if (typeof typeSpecs[typeSpecName] !== "function") {
-                  var err = Error((componentName || "React class") + ": " + location + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                  var err = Error((componentName || "React class") + ": " + location2 + " type `" + typeSpecName + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof typeSpecs[typeSpecName] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
                   err.name = "Invariant Violation";
                   throw err;
                 }
-                error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+                error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location2, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
               } catch (ex) {
                 error$1 = ex;
               }
               if (error$1 && !(error$1 instanceof Error)) {
                 setCurrentlyValidatingElement(element);
-                error("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", componentName || "React class", location, typeSpecName, typeof error$1);
+                error("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", componentName || "React class", location2, typeSpecName, typeof error$1);
                 setCurrentlyValidatingElement(null);
               }
               if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
                 loggedTypeFailures[error$1.message] = true;
                 setCurrentlyValidatingElement(element);
-                error("Failed %s type: %s", location, error$1.message);
+                error("Failed %s type: %s", location2, error$1.message);
                 setCurrentlyValidatingElement(null);
               }
             }
@@ -961,25 +962,25 @@ const Text = ({
     )
   );
 };
-const root$2 = "_root_2wcp0_53";
-const open$1 = "_open_2wcp0_66";
-const noTarget = "_noTarget_2wcp0_72";
-const collapsible = "_collapsible_2wcp0_81";
-const header$1 = "_header_2wcp0_84";
-const heading = "_heading_2wcp0_91";
-const chevron$1 = "_chevron_2wcp0_97";
-const settings = "_settings_2wcp0_108";
-const footer = "_footer_2wcp0_122";
-const legal = "_legal_2wcp0_129";
-const actions$1 = "_actions_2wcp0_132";
+const root$2 = "_root_12udu_53";
+const noTarget = "_noTarget_12udu_65";
+const collapsible = "_collapsible_12udu_74";
+const header$1 = "_header_12udu_77";
+const heading = "_heading_12udu_84";
+const chevron$1 = "_chevron_12udu_90";
+const open$1 = "_open_12udu_95";
+const settings = "_settings_12udu_101";
+const footer = "_footer_12udu_115";
+const legal = "_legal_12udu_122";
+const actions$1 = "_actions_12udu_125";
 const classes$2 = {
   root: root$2,
-  open: open$1,
   noTarget,
   collapsible,
   header: header$1,
   heading,
   chevron: chevron$1,
+  open: open$1,
   settings,
   footer,
   legal,
@@ -2072,6 +2073,7 @@ const SelectionProvider = ({
   }, [items]);
   const onSave = useCallback(() => {
     saveSelection(selection);
+    location.reload();
   }, [selection]);
   const selectionTaken = useMemo(() => {
     if (!savedSelection) return false;
@@ -2177,16 +2179,15 @@ const BannerContent = ({
   const { onSave, onDeclineAll, selectionTaken } = useSelection();
   const [openItem, setOpenItem] = useState(void 0);
   const [settingsOpen, setSettingsOpen] = useState(defaultSettingsOpen);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root$1, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Content$1,
     {
       className: clx({
         [classes$2.root]: true,
-        [classes$2.noTarget]: noTarget2,
-        [classes$2.open]: !selectionTaken
+        [classes$2.noTarget]: noTarget2
       }),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Root$1,
+        Root$2,
         {
           open: settingsOpen,
           onOpenChange: setSettingsOpen,
@@ -2194,8 +2195,8 @@ const BannerContent = ({
           children: [
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.header, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.heading, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { weight: "bold", children: heading2 }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", color: "muted", children: subheading })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Title, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { weight: "bold", children: heading2 }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Description, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", color: "muted", children: subheading }) })
               ] }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Button, { variant: "ghost", children: [
                 settingsOpen ? hideLabel : selectLabel,
@@ -2213,13 +2214,13 @@ const BannerContent = ({
               ] }) })
             ] }),
             /* @__PURE__ */ jsxRuntimeExports.jsx(
-              Content$1,
+              Content$2,
               {
                 className: clx({
                   [classes$2.settings]: true
                 }),
                 children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  Root$2,
+                  Root$3,
                   {
                     type: "single",
                     collapsible: true,
@@ -2233,15 +2234,15 @@ const BannerContent = ({
             /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.footer, children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: classes$2.legal, children: privacyPolicy && /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { size: "caption", children: /* @__PURE__ */ jsxRuntimeExports.jsx("a", { href: privacyPolicy.url, target: "_blank", children: privacyPolicy.label }) }) }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: classes$2.actions, children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "neutral", onClick: () => onDeclineAll(), children: declineLabel }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "brand", onClick: () => onSave(), children: saveLabel })
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "neutral", onClick: () => onDeclineAll(), children: declineLabel }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx(Close, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "brand", onClick: () => onSave(), children: saveLabel }) })
               ] })
             ] })
           ]
         }
       )
     }
-  );
+  ) });
 };
 const Banner = ({
   localStorageKey = "cb-selection",

package/dist/react/style.css

@@ -102,7 +102,7 @@
     }
   }
 }
-@keyframes _contentShow_2wcp0_1 {
+@keyframes _contentShow_12udu_1 {
   from {
     opacity: 0;
     transform: translateX(-100px);
@@ -113,7 +113,7 @@
   }
 }
 
-@keyframes _contentHide_2wcp0_1 {
+@keyframes _contentHide_12udu_1 {
   from {
     opacity: 1;
     transform: translateX(0px);
@@ -124,7 +124,7 @@
   }
 }
 
-@keyframes _slideDown_2wcp0_1 {
+@keyframes _slideDown_12udu_1 {
   0% {
     max-height: var(--cb-size-settings-max-height);
     overflow: auto;
@@ -139,7 +139,7 @@
   }
 }
 
-@keyframes _slideUp_2wcp0_1 {
+@keyframes _slideUp_12udu_1 {
   0% {
     max-height: 0;
     overflow: hidden;
@@ -154,9 +154,8 @@
   }
 }
 
-._root_2wcp0_53 {
-  display: none;
-  visibility: hidden;
+._root_12udu_53 {
+  display: flex;
   flex-direction: column;
   gap: var(--cb-space-md);
   padding: var(--cb-space-md);
@@ -165,15 +164,9 @@
   border-radius: var(--cb-radius-md);
   overflow: hidden;
   will-change: opacity, transform;
-  animation: _contentHide_2wcp0_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
-
-  &._open_2wcp0_66 {
-    visibility: visible;
-    display: flex;
-    animation: _contentShow_2wcp0_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  }
+  animation: _contentShow_12udu_1 150ms cubic-bezier(0.16, 1, 0.3, 1);
 
-  &._noTarget_2wcp0_72 {
+  &._noTarget_12udu_65 {
     position: fixed;
     bottom: var(--cb-space-md);
     left: var(--cb-space-md);
@@ -182,58 +175,58 @@
     max-width: var(--cb-size-banner-max-width);
   }
 
-  ._collapsible_2wcp0_81 {
+  ._collapsible_12udu_74 {
     display: contents;
 
-    ._header_2wcp0_84 {
+    ._header_12udu_77 {
       display: flex;
       flex-direction: row;
       align-items: flex-start;
       justify-content: space-between;
       gap: var(--cb-space-md);
 
-      ._heading_2wcp0_91 {
+      ._heading_12udu_84 {
         display: flex;
         flex-direction: column;
         align-items: flex-start;
       }
 
-      ._chevron_2wcp0_97 {
+      ._chevron_12udu_90 {
         transform: rotate(0deg);
         will-change: transform;
         transition: transform 150ms ease-out;
 
-        &._open_2wcp0_66 {
+        &._open_12udu_95 {
           transform: rotate(180deg);
         }
       }
     }
 
-    ._settings_2wcp0_108 {
+    ._settings_12udu_101 {
       display: flex;
       flex-direction: column;
       background-color: var(--cb-color-background-muted);
       border-radius: var(--cb-radius-md);
       overflow: hidden;
       will-change: max-height, overflow;
-      animation: _slideDown_2wcp0_1 250ms ease-out;
+      animation: _slideDown_12udu_1 250ms ease-out;
 
       &[data-state="open"] {
-        animation: _slideUp_2wcp0_1 250ms ease-out;
+        animation: _slideUp_12udu_1 250ms ease-out;
       }
     }
 
-    ._footer_2wcp0_122 {
+    ._footer_12udu_115 {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       gap: var(--cb-space-md);
 
-      ._legal_2wcp0_129 {
+      ._legal_12udu_122 {
       }
 
-      ._actions_2wcp0_132 {
+      ._actions_12udu_125 {
         display: flex;
         flex-direction: row;
         align-items: center;