@retentful/core/dist/bundle.js

This is the button widget that you import into the app

'use strict';

var React = require('react');

(function() {
    const env = {"API_URL":"http://localhost:8787","SOME_OBJECT":{"one":1,"two":[1,2],"three":"3"},"UNUSED":null};
    try {
        if (process) {
            process.env = Object.assign({}, process.env);
            Object.assign(process.env, env);
            return;
        }
    } catch (e) {} // avoid ReferenceError: process is not defined
    globalThis.process = { env:env };
})();

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.fixed{position:fixed}.bottom-0{bottom:0}.left-0{left:0}.z-\\[100000\\]{z-index:100000}.flex{display:flex}.h-4{height:1rem}.h-\\[14px\\]{height:14px}.h-full{height:100%}.h-screen{height:100vh}.w-4{width:1rem}.w-\\[14px\\]{width:14px}.w-full{width:100%}.w-screen{width:100vw}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.overflow-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-none{border-radius:0}.border{border-width:1px}.border-t{border-top-width:1px}.border-th-border{border-color:var(--border-primary)}.border-th-border-second{border-color:var(--border-secondary)}.bg-th-bg{background-color:var(--background)}.bg-th-bg-secondary{background-color:var(--background-secondary)}.bg-white\\/\\[0\\.01\\]{background-color:hsla(0,0%,100%,.01)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.pt-8{padding-top:2rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-th-text-light{color:var(--primary-light)}.text-th-text-medium{color:var(--primary-medium)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:root{--bg:#fff;--bg-secondary:#f2f2f2;--bg-hover:#e6e6e6;--brand:#27ae60;--brand-second:#219653;--error:#ef4444;--error-second:#dc2626;--border:#d9d9d9;--border-second:#e6e6e6;--text-dark:#1e1f2a;--text-medium:#3f425a;--text-light:#8285a6}[data-theme=dark]{--bg:#191a23;--bg-secondary:#1e1f2a;--bg-hover:#2a2c3c;--brand:#219653;--brand-second:#27ae60;--error:#dc2626;--error-second:#ef4444;--border:#2a2c3c;--border-second:#3f425a;--text-dark:#f3f3f7;--text-medium:#dbdce6;--text-light:#8285a6}@media (prefers-color-scheme:dark){:root{--foreground-rgb:255,255,255;--background-start-rgb:0,0,0;--background-end-rgb:0,0,0}}*{font-family:Inter,sans-serif}body{background:linear-gradient(to bottom,transparent,rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));color:rgb(var(--foreground-rgb))}.transition{transition-duration:.1s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-radius:.5rem;cursor:pointer;display:flex;font-weight:500;justify-content:center;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.button:disabled{cursor:not-allowed}.primary{--tw-text-opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:var(--brand-primary);border-radius:.5rem;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1.25rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.primary:disabled{cursor:not-allowed}.primary:hover:enabled{background-color:var(--brand-secondary)}.primary:disabled{background-color:var(--border-secondary);color:var(--primary-light)}.secondary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-color:var(--border-secondary);border-radius:.5rem;border-width:1px;color:var(--primary-medium);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1.25rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.secondary:disabled{cursor:not-allowed}.secondary:hover:enabled{background-color:var(--background-hover);border-color:var(--border-primary);color:var(--primary-dark)}.secondary:disabled{color:var(--primary-light)}.tertiary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-radius:.5rem;color:var(--primary-light);cursor:pointer;display:flex;font-weight:500;justify-content:center;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.tertiary:disabled{cursor:not-allowed}.tertiary:hover:enabled{color:var(--primary-dark)}.error{--tw-text-opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:var(--error-primary);border-radius:.5rem;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;line-height:1.25rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.error:disabled{cursor:not-allowed}.error:hover:enabled{background-color:var(--error-secondary)}.error:disabled{background-color:var(--border-secondary);color:var(--primary-light)}.error-button{--tw-text-opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:var(--error-primary);border-radius:.5rem;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;line-height:1.25rem;padding:6px 1rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.error-button:disabled{cursor:not-allowed}.error-button:hover:enabled{background-color:var(--error-secondary)}.error-button:disabled{background-color:var(--border-secondary);color:var(--primary-light)}.primary-button{--tw-text-opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:var(--brand-primary);border-radius:.5rem;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;line-height:1.25rem;padding:6px 1rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.primary-button:disabled{cursor:not-allowed}.primary-button:hover:enabled{background-color:var(--brand-secondary)}.primary-button:disabled{background-color:var(--border-secondary);color:var(--primary-light)}.primary-button-sm{--tw-text-opacity:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;background-color:var(--brand-primary);border-radius:.5rem;color:rgb(255 255 255/var(--tw-text-opacity));cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:6px;justify-content:center;line-height:1.25rem;padding:.25rem .5rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.primary-button-sm:disabled{cursor:not-allowed}.primary-button-sm:hover:enabled{background-color:var(--brand-secondary)}.primary-button-sm:disabled{background-color:var(--border-secondary);color:var(--primary-light)}.secondary-button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-color:var(--border-secondary);border-radius:.5rem;border-width:1px;color:var(--primary-medium);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;line-height:1.25rem;padding:6px 1rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.secondary-button:disabled{cursor:not-allowed}.secondary-button:hover:enabled{background-color:var(--background-hover);border-color:var(--border-primary);color:var(--primary-dark)}.secondary-button:disabled{color:var(--primary-light)}.secondary-button-sm{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-color:var(--border-secondary);border-radius:.5rem;border-width:1px;color:var(--primary-medium);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:6px;justify-content:center;line-height:1.25rem;padding:.25rem .5rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.secondary-button-sm:disabled{cursor:not-allowed}.secondary-button-sm:hover:enabled{background-color:var(--background-hover);border-color:var(--border-primary);color:var(--primary-dark)}.secondary-button-sm:disabled{color:var(--primary-light)}.tertiary-button{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-radius:.5rem;color:var(--primary-light);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:.5rem;justify-content:center;line-height:1.25rem;padding:6px 1rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.tertiary-button:disabled{cursor:not-allowed}.tertiary-button:hover:enabled{color:var(--primary-dark)}.tertiary-button-sm{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;align-items:center;border-radius:.5rem;color:var(--primary-light);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;gap:6px;justify-content:center;line-height:1.25rem;padding:.25rem .5rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);white-space:nowrap}.tertiary-button-sm:disabled{cursor:not-allowed}.tertiary-button-sm:hover:enabled{color:var(--primary-dark)}.website-wrapper{align-items:center;background-color:var(--background);display:flex;flex-direction:column;min-height:100vh;padding-left:1rem;padding-right:1rem;position:relative;width:100%}@media (min-width:768px){.website-wrapper{padding-left:10vw;padding-right:10vw}}.website-width{max-width:1200px;width:100%}.website-navlink{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-dark);font-size:1rem;font-weight:500;line-height:1.5rem;padding:.25rem .5rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.website-navlink:hover{color:var(--primary-light)}.website-footerlink{color:var(--primary-light);cursor:pointer;font-size:.875rem;line-height:1.25rem;transition-duration:.1s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.website-footerlink:hover{color:var(--primary-dark)}.website-p1{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-medium);font-size:1rem;line-height:1.5rem}@media (min-width:768px){.website-p1{font-size:1.125rem;line-height:1.75rem}}.website-h1{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-dark);font-size:3rem;font-weight:700;line-height:1}@media (min-width:768px){.website-h1{font-size:3.75rem;line-height:1}}@media (min-width:1024px){.website-h1{font-size:80px}}.website-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-dark);font-size:2.25rem;font-weight:700;line-height:2.5rem}.input{background-color:var(--background-secondary);border-color:var(--border-secondary);border-radius:.5rem;border-width:1px;color:var(--primary-medium);font-size:.875rem;line-height:1.25rem;outline:2px solid transparent;outline-offset:2px;padding:.5rem 1rem}.input::-moz-placeholder{color:var(--primary-light)}.input::placeholder{color:var(--primary-light)}.input:hover{border-color:var(--border-primary)}.input:focus{border-color:var(--brand-primary);color:var(--primary-dark)}.label{font-size:1rem;font-weight:500;line-height:1.5rem}.label,.modal-header{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-dark)}.modal-header{font-size:1.5rem;font-weight:600;line-height:2rem}.modal-description{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--primary-medium);font-size:1rem;line-height:1.5rem}.checked\\:border-none:checked{border-style:none}.checked\\:bg-th-brand:checked{background-color:var(--brand-primary)}.hover\\:border-th-border:hover{border-color:var(--border-primary)}.hover\\:bg-th-bg-hover:hover{background-color:var(--background-hover)}.hover\\:bg-th-bg-secondary:hover{background-color:var(--background-secondary)}.hover\\:text-th-text-dark:hover{color:var(--primary-dark)}.checked\\:hover\\:bg-th-brand-second:hover:checked{background-color:var(--brand-secondary)}@keyframes spin{to{transform:rotate(1turn)}}.group:hover .group-hover\\:animate-spin{animation:spin 1s linear infinite}@media (min-width:768px){.md\\:h-auto{height:auto}.md\\:max-w-\\[560px\\]{max-width:560px}.md\\:justify-start{justify-content:flex-start}.md\\:rounded-2xl{border-radius:1rem}.md\\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\\:pt-10{padding-top:2.5rem}}";
styleInject(css_248z);

function __awaiter(thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
}

typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
    var e = new Error(message);
    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
};

const Logo = ({ className }) => (React.createElement("svg", { width: "14px", height: "14px", viewBox: "0 0 37 40", fill: "", xmlns: "http://www.w3.org/2000/svg" },
    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5123 0.31355C15.384 0.908689 14.21 1.61865 14.2144 1.70317C14.2167 1.74804 16.7972 3.26658 19.9488 5.07779C24.2778 7.56553 25.7185 8.44766 25.8415 8.68539C25.9759 8.94521 26.0042 10.1612 26.0042 15.663V22.3258L26.6691 21.9477C27.0348 21.7398 27.9063 21.2286 28.6059 20.8119L29.8778 20.0541L29.8403 13.6945L29.8027 7.33497L29.4934 6.71035C29.3232 6.36681 29.0019 5.94304 28.7793 5.76855C28.5567 5.59407 26.2673 4.23636 23.6917 2.75157L19.0087 0.0518826L18.0837 0.0123378C17.2419 -0.0237383 17.1005 0.00331869 16.5123 0.31355ZM10.6562 3.80449C10.0983 4.05771 1.89141 8.7668 1.23175 9.2122C0.671766 9.59019 0.13259 10.4105 0.0447128 11.018C0.00655541 11.2817 -0.00882333 12.1351 0.0104866 12.9142L0.0456378 14.3307L5.76335 11.0352C10.099 8.53623 11.5734 7.73967 11.8632 7.73967C12.1538 7.73967 13.606 8.52895 17.9264 11.0351C21.0509 12.8476 23.6535 14.3305 23.7098 14.3305C23.7668 14.3305 23.7984 13.3512 23.7809 12.122L23.7495 9.9136L22.3041 9.07749C16.045 5.45693 13.1706 3.82854 12.8343 3.71256C12.2381 3.50709 11.2164 3.55022 10.6562 3.80449ZM32.2482 14.3286V21.0332L31.9302 21.376C31.7553 21.5646 28.9845 23.2257 25.773 25.0675L19.9337 28.4163L19.9023 30.6371C19.8728 32.7219 19.8833 32.853 20.0757 32.7797C20.1885 32.7368 21.7635 31.8503 23.576 30.8096C32.1484 25.8879 34.8544 24.2819 35.2685 23.8703C36.1292 23.0148 36.1217 23.078 36.1217 16.6431V10.9195L35.8063 10.2771C35.6327 9.92378 35.3725 9.52405 35.2281 9.38865C34.9944 9.16976 32.4293 7.62404 32.2997 7.62404C32.2714 7.62404 32.2482 10.6411 32.2482 14.3286ZM6.75209 13.1056C3.95388 14.7215 1.45584 16.1967 1.20077 16.3839C0.945805 16.571 0.581576 17.0051 0.391367 17.3485L0.0456378 17.9728L0.0115274 23.6201C-0.0265144 29.9249 -0.0120609 30.0718 0.731545 30.9405C0.968699 31.2176 1.63033 31.6998 2.32571 32.1026C9.21416 36.092 15.8199 39.8882 15.9811 39.95C16.1668 40.0213 16.1787 39.8692 16.1494 37.795L16.118 35.5632L10.2209 32.1767C6.97756 30.314 4.23289 28.6789 4.12154 28.543C3.93665 28.3173 3.91919 27.9139 3.91919 23.8698C3.91919 19.8216 3.93642 19.4236 4.12154 19.2077C4.23277 19.0778 6.8735 17.5103 9.98968 15.724C13.1059 13.9378 15.6694 12.4358 15.6862 12.3862C15.7143 12.3035 12.2447 10.2633 11.9628 10.1967C11.8951 10.1807 9.55029 11.4897 6.75209 13.1056ZM8.07129 19.4218L6.26841 20.4521L6.2099 22.45C6.17776 23.5488 6.1825 25.0667 6.22043 25.8228L6.28957 27.1976L11.2038 30.0661L16.118 32.9345L16.1496 30.7809C16.1672 29.5729 16.1342 28.5805 16.0744 28.5208C16.0157 28.462 14.6487 27.6424 13.0365 26.6995L10.1053 24.9848L10.0747 21.6811C10.0578 19.8641 10.0058 18.3807 9.95904 18.3845C9.91233 18.3885 9.0628 18.8553 8.07129 19.4218ZM27.9121 30.9647L19.9337 35.5705L19.9023 37.7853C19.885 39.0034 19.8988 40 19.9329 40C20.1064 40 34.896 31.3842 35.1686 31.1244C35.344 30.9573 35.6171 30.5602 35.7756 30.2421C36.0425 29.7066 36.0639 29.5408 36.0639 28.0098C36.0639 27.1001 36.0249 26.3565 35.9772 26.3573C35.9294 26.3582 32.3002 28.4315 27.9121 30.9647Z", fill: "currentColor" })));

const Modal = ({ children, onDiscard }) => (React.createElement("div", { onClick: () => {
        onDiscard();
    }, className: "flex justify-center items-center z-[100000] fixed left-0 bottom-0 w-screen h-screen bg-white/[0.01]", style: {
        backdropFilter: "blur(10px)",
    } }, children));

const completeSession = (session, endAction, feedbackState) => __awaiter(void 0, void 0, void 0, function* () {
    fetch(`${process.env.API_URL}/api/v1/events/complete`, {
        method: "POST",
        body: JSON.stringify({
            id: session.id,
            endAction,
            endStage: session.endStage,
            couponOffered: session.couponOffered,
            feedbackState,
        }),
        headers: {
            "Content-Type": "application/json",
        },
    }).catch((err) => {
        console.log(err);
    });
});
function createSession(sessionId, appId, customerId) {
    return {
        id: sessionId,
        appId,
        customerId,
        startUri: window.location.href,
        startAction: "CANCEL",
        couponOffered: false,
        endStage: "FEEDBACK",
    };
}

const Discount = ({ title, description, session, setSession, setStage, feedbackState, onCompleteCoupon, setModalIsOpen, resetState, preview = false, }) => {
    const [isLoading, setIsLoading] = React.useState(false);
    const [couponApplied, setCouponApplied] = React.useState(false);
    // upstate session on render
    React.useEffect(() => {
        setSession(Object.assign(Object.assign({}, session), { endStage: "COUPON_OFFER", couponOffered: true }));
    }, []);
    function handleClaimDiscount() {
        return __awaiter(this, void 0, void 0, function* () {
            setIsLoading(true);
            if (!preview) {
                yield onCompleteCoupon();
                yield completeSession(session, "ACCEPTED_COUPON", feedbackState);
            }
            setIsLoading(false);
            setCouponApplied(true);
            resetState();
        });
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "flex flex-col gap-4" },
            React.createElement("p", { className: "modal-header" }, couponApplied ? "🎉 Your discount has been applied!" : title),
            React.createElement("p", { className: "modal-description whitespace-pre-wrap" }, couponApplied
                ? "Your discount will be applied to your next bill."
                : description)),
        React.createElement("div", { className: "flex flex-col gap-2" },
            React.createElement("button", { onClick: couponApplied ? () => setModalIsOpen(false) : handleClaimDiscount, className: "primary-button", disabled: isLoading }, isLoading
                ? "Applying discount"
                : couponApplied
                    ? "Back to app"
                    : "Claim discount"),
            !couponApplied && (React.createElement("button", { className: "tertiary-button", onClick: () => setStage("confirm") }, "No thanks")))));
};

const Confirm = ({ title, description, session, setSession, setStage, feedbackState, onCompleteCancel, setModalIsOpen, resetState, preview = false, }) => {
    const [isLoading, setIsLoading] = React.useState(false);
    const [cancelCompleted, setCancelCompleted] = React.useState(false);
    // update session on load
    React.useEffect(() => {
        setSession(Object.assign(Object.assign({}, session), { endStage: "CONFIRM" }));
    }, []);
    function handleCompleteCancellation() {
        return __awaiter(this, void 0, void 0, function* () {
            setIsLoading(true);
            if (!preview) {
                yield onCompleteCancel();
                yield completeSession(session, "COMPLETED_CANCEL", feedbackState);
            }
            setIsLoading(false);
            setCancelCompleted(true);
            resetState();
        });
    }
    function handleClaimDiscount() {
        return __awaiter(this, void 0, void 0, function* () {
            setStage("discount");
            resetState();
        });
    }
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "flex flex-col gap-1" },
            React.createElement("p", { className: "modal-header" }, cancelCompleted ? "Your subscription has been cancelled" : title),
            React.createElement("p", { className: "modal-description whitespace-pre-wrap" }, cancelCompleted
                ? "Your subscription has been cancelled."
                : description)),
        React.createElement("div", { className: "flex flex-col gap-2" },
            React.createElement("button", { onClick: cancelCompleted
                    ? () => setModalIsOpen(false)
                    : handleCompleteCancellation, className: "error-button" }, cancelCompleted
                ? "Back to app"
                : isLoading
                    ? "Cancelling..."
                    : "Cancel subscription"),
            !cancelCompleted && (React.createElement("button", { className: "tertiary-button", onClick: handleClaimDiscount }, "Claim discount")))));
};

const Feedback = ({ title, description, feedbackState, onSelectQuestion, setFeedbackState, questions, setStage, onUpdateSpecificFeedback, }) => {
    return (React.createElement(React.Fragment, null,
        React.createElement("div", { className: "flex flex-col gap-6" },
            React.createElement("div", { className: "flex flex-col gap-1" },
                React.createElement("p", { className: "modal-header" }, title),
                React.createElement("p", { className: "modal-description" }, description)),
            React.createElement("div", { className: "flex flex-col gap-2" },
                React.createElement("p", { className: "label" }, "Why are you cancelling your subscription?"),
                questions.map((q) => {
                    var _a;
                    return (React.createElement("div", { key: q.id, className: "flex flex-col gap-2 w-full" },
                        React.createElement("div", { key: q.name, className: "flex gap-2 items-center w-full" },
                            React.createElement("input", { className: "w-4 h-4 border checked:bg-th-brand checked:border-none checked:hover:bg-th-brand-second border-th-border-second hover:border-th-border transition bg-th-bg hover:bg-th-bg-secondary", type: "checkbox", onChange: () => onSelectQuestion(q.id), checked: ((_a = feedbackState[q.id]) === null || _a === void 0 ? void 0 : _a.isSelected) == true }),
                            React.createElement("p", { className: "text-base text-th-text-medium antialiased" }, q.name))));
                })),
            React.createElement("div", { className: "flex flex-col gap-2" },
                React.createElement("p", { className: "label" }, "Are there other ways we can improve?"),
                React.createElement("input", { className: "input", placeholder: "Enter feedback", onChange: (e) => {
                        if (!feedbackState[0]) {
                            setFeedbackState(Object.assign(Object.assign({}, feedbackState), { general: {
                                    isSelected: true,
                                    specificFeedback: e.target.value,
                                } }));
                        }
                        else {
                            onUpdateSpecificFeedback(0, e.target.value);
                        }
                    } }))),
        React.createElement("button", { disabled: Object.keys(feedbackState).length == 0, className: "secondary-button bg-th-bg-secondary", onClick: () => setStage("discount") }, "Continue")));
};

const Churn = ({ appId, customerId, onAcceptCoupon, onChurn, label = "Cancel", styles, debug = false, preview = false, children, // Destructure children from props
refresh, }) => {
    // The list of possible feedback categories, should prob rename this
    const [questions, setQuestions] = React.useState([]);
    // Manage modal state
    const [modalIsOpen, setModalIsOpen] = React.useState(false);
    const [stage, setStage] = React.useState("feedback");
    // Session object for sending to API
    const [session, setSession] = React.useState({});
    // Map of feedback user has selected
    const [feedbackState, setFeedbackState] = React.useState({});
    const resetState = () => {
        console.log("big reset");
        setSession({});
        setFeedbackState({});
        setStage("feedback");
        setModalIsOpen(false);
    };
    // config
    const [config, setConfig] = React.useState({});
    // When user toggles an option for feedback cateogry
    const toggleQuestion = (q) => {
        if (feedbackState[q]) {
            const newFeedbackState = Object.assign({}, feedbackState);
            newFeedbackState[q].isSelected = !newFeedbackState[q].isSelected;
            setFeedbackState(newFeedbackState);
        }
        else {
            setFeedbackState(Object.assign(Object.assign({}, feedbackState), { [q]: {
                    isSelected: true,
                    specificFeedback: "",
                } }));
        }
    };
    // Update if user adds text feedback to a specific category
    const updateSpecificFeedback = (questionId, feedback) => {
        const newFeedbackState = Object.assign({}, feedbackState);
        newFeedbackState[questionId].specificFeedback = feedback;
        setFeedbackState(newFeedbackState);
    };
    // Register a complete event when closing out the modal early
    function handleCloseModal() {
        return __awaiter(this, void 0, void 0, function* () {
            if (!preview) {
                fetch(`${process.env.API_URL}/api/v1/events/complete`, {
                    method: "POST",
                    body: JSON.stringify({
                        id: session.id,
                        endAction: "EXITED_SESSION_EARLY",
                        endStage: session.endStage,
                        couponOffered: session.couponOffered,
                        feedbackState,
                    }),
                    headers: {
                        "Content-Type": "application/json",
                    },
                })
                    .then(() => {
                    setModalIsOpen(false);
                    resetState();
                })
                    .catch((err) => {
                    console.log(err);
                });
            }
            else {
                setModalIsOpen(false);
                resetState();
            }
        });
    }
    // Initialize a churn session event and set the session ID
    React.useEffect(() => {
        if (modalIsOpen == true && !preview) {
            fetch(`${process.env.API_URL}/api/v1/events/start`, {
                method: "POST",
                body: JSON.stringify({
                    appId,
                    customerId,
                    uri: window.location.href,
                    startAction: "CANCEL",
                }),
                headers: {
                    "Content-Type": "application/json",
                },
            })
                .then((res) => res.json())
                .then(({ id }) => {
                setSession(createSession(id, appId, customerId));
                setFeedbackState({});
            })
                .catch((err) => {
                console.log(err);
            });
        }
    }, [modalIsOpen]);
    // TODO: Register a complete event when user completes the cancel flow
    // Submit feedback to API
    React.useEffect(() => {
    }, [stage]);
    const [loaded, setLoaded] = React.useState(false);
    React.useEffect(() => {
        if (refresh) {
            setLoaded(false);
        }
    }, [refresh]);
    // Fetch feedback categories from API
    React.useEffect(() => {
        if (appId && !loaded) {
            fetch(`${process.env.API_URL}/api/v1/config/getAppConfig`, {
                method: "POST",
                body: JSON.stringify({
                    code: appId,
                }),
                headers: {
                    "Content-Type": "application/json",
                },
            })
                .then((res) => res.json())
                .then((data) => {
                setConfig(data.data);
                setQuestions(data.feedbackCategories || []);
                setLoaded(true);
            })
                .catch((err) => console.log(err));
        }
    }, [appId, loaded]);
    return (React.createElement(React.Fragment, null,
        children ? ( // Check if children are provided
        React.cloneElement(children, {
            onClick: () => setModalIsOpen(true),
        }) // If so, clone the element and add the onClick handler
        ) : (React.createElement("button", { className: "primary-button", onClick: () => {
                setModalIsOpen(true);
                setStage("feedback");
            }, style: styles }, label ? label : "Cancel")),
        modalIsOpen && (React.createElement(Modal, { onDiscard: handleCloseModal },
            React.createElement("div", { onClick: (e) => e.stopPropagation(), className: "bg-th-bg rounded-none md:rounded-2xl border border-th-border shadow-xl flex flex-col justify-between gap-6 overflow-hidden w-full h-full md:h-auto md:max-w-[560px]" },
                React.createElement("div", { className: "px-4 md:px-10 pt-8 md:pt-10 flex flex-col justify-between md:justify-start h-full gap-6" },
                    stage === "feedback" && (React.createElement(Feedback, { title: config === null || config === void 0 ? void 0 : config.feedbackTitle, description: config === null || config === void 0 ? void 0 : config.feedbackDescription, preview: preview, feedbackState: feedbackState, setFeedbackState: setFeedbackState, setStage: setStage, questions: questions, onSelectQuestion: toggleQuestion, onUpdateSpecificFeedback: updateSpecificFeedback, resetState: resetState })),
                    stage === "discount" && (React.createElement(Discount, { title: config === null || config === void 0 ? void 0 : config.couponTitle, description: config === null || config === void 0 ? void 0 : config.couponDescription, preview: preview, session: session, setSession: setSession, setStage: setStage, feedbackState: feedbackState, setModalIsOpen: setModalIsOpen, onCompleteCoupon: onAcceptCoupon, resetState: resetState })),
                    stage === "confirm" && (React.createElement(Confirm, { title: config.confirmCancelTitle, description: config.confirmCancelDescription, preview: preview, session: session, setSession: setSession, setStage: setStage, feedbackState: feedbackState, setModalIsOpen: setModalIsOpen, onCompleteCancel: onChurn, resetState: resetState })),
                    stage === "cancelled" && React.createElement("div", null, "cancelled")),
                React.createElement("button", { className: "w-full group cursor-pointer text-th-text-light hover:text-th-text-dark hover:bg-th-bg-hover transition py-2 flex gap-2 items-center justify-center border-t border-th-border bg-th-bg-secondary", onClick: () => { } },
                    React.createElement(Logo, { className: "w-[14px] h-[14px] group-hover:animate-spin transition" }),
                    React.createElement("p", { className: "text-sm antialiased" }, "Powered by Appsloth")),
                debug && (React.createElement("p", { className: "whitespace-pre-wrap" }, JSON.stringify(session, null, 2))))))));
};

exports.Churn = Churn;