react-kofi-overlay 0.1.1 → 1.0.0

package/README.md

@@ -2,9 +2,9 @@
 
 [**Jump to usage**](#usage)
 
-React component for accepting donations though Ko-fi without leaving your website:
-
+A React component for accepting donations though Ko-fi without leaving your website:
 
+![react-kofi-overlay example](img/example.gif)
 
 ## Features
 
@@ -21,17 +21,17 @@ To set up what Ko-fi calls their "[Floating Button Donation Widget](https://ko-f
 
 This has some limitations:
 
-- It only allows you to choose from a handful of button calls-to-action, which may not meet your needs.
-- It provides a limited selection of background color choices, which may not match your website theme.
-- It requires you to load a `<script>` tag from their CDN, which creates a global variable, and you then need to call a method on that global to render the donate button. Few potential issues with that:
-  - Requires an extra network request on every page load.
-  - Doesn't work well with modern JS bundling + import/export systems like Webpack.
-  - Doesn't work well with a React component-based frontend.
+- Only a few choices for button CTA (call-to-action text)
+- Limited selection of background color choices
+- Requires you to load a `<script>` tag from their CDN, which creates a global variable, and you then need to call a method on that global to render the donate button. Few potential issues with that:
+  - Requires an extra network request on every page load
+  - Doesn't work well with modern JS bundling + import/export syntax
+  - Doesn't work well with a React component-based frontend
   - Doesn't play nice with web frameworks like Next.js. Next.js makes it difficult to inject an arbitrary script like `kofiWidgetOverlay.draw(...)` – and to only run that code after the external `overlay-widget.js` script is loaded.
 
 This component is designed to address those limitations.
 
-## Installation
+## Install
 
 ```bash
 npm install react-kofi-overlay
@@ -63,12 +63,14 @@ import { Donate } from 'react-kofi-overlay'
 </Donate>
 ```
 
+**[Full example on CodePen](https://codepen.io/liddiard/pen/eYXNVXy)**
+
 ### Props
 
 | Prop | Required | Type | Description |
 | ------------- | ------------- | ------------- | ------------- |
 | (children) | required | ReactNode | Contents of the donation button. Can be plain text or any React nodes that are valid children of a `<button>` element. |
-| `username` | required | string | Ko-fi profile to display in the donation panel. Corresponds to the Ko-fi page at `ko-fi.com/<username>` |
+| `username` | required | string | Ko-fi profile to display in the donation panel. Corresponds to the page at `ko-fi.com/<username>` |
 | `classNames` | optional | object | Class names to apply to different parts of the component for styling. See [Styling](#styling) for more info. |
 | `styles` | optional | object | Inline styles to apply to different parts of the component for styling. See [Styling](#styling) for more info. |
 | `onToggle` | optional | function | Function to call when the donate panel is opened or closed. It receives one argument: a boolean `open` value that indicates if the panel was opened or closed. |
@@ -87,5 +89,16 @@ Note: While you could provide both `classNames` and `styles`, it isn't recommend
 | `closeIcon` | (X) icon within the panel close button. |
 | `profileLink` | Wrapper `<div>` around the link to your Ko-fi profile. By default, it's anchored to the bottom of the donate panel. |
 
+#### Visual reference
+
+![Styling reference diagram](img/styling_reference.png)
+
+## Development
+
+For local development of this plugin:
+
+1. Clone the repository
+2. `npm install`
+
+To build: `npm run build`
 
-## Development

package/dist/bundle.js

@@ -1,2 +1,2 @@
 /*! For license information please see bundle.js.LICENSE.txt */
-"use client";!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("KofiDonate",["react"],t):"object"==typeof exports?exports.KofiDonate=t(require("react")):e.KofiDonate=t(e.react)}(this,(e=>(()=>{var t={184:(e,t)=>{var r;!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var i=o.apply(null,r);i&&e.push(i)}}else if("object"===a){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){e.push(r.toString());continue}for(var c in r)n.call(r,c)&&r[c]&&e.push(c)}}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},800:(e,t,r)=>{"use strict";r.d(t,{Z:()=>c});var n=r(81),o=r.n(n),a=r(645),i=r.n(a)()(o());i.push([e.id,"@keyframes kF0g9az8fVG6kOqOMufc{from{translate:0 200%;opacity:0}to{translate:0;opacity:1}}.QSEpZEcKR0JDQr2RBSst{display:inline-block;background-color:#29abe0;color:white;padding:0.5em 1em;border-radius:2em;font-weight:bold}.QSEpZEcKR0JDQr2RBSst:hover{background-color:#3eb3e3}.QSEpZEcKR0JDQr2RBSst:active{background-color:#259aca}.xki8toDJW1V5T6Q2baKK{position:fixed;z-index:100;width:calc(min(320px, 100%));height:calc(min(580px, 95%));bottom:0;right:2em;animation:kF0g9az8fVG6kOqOMufc 1s forwards ease-in-out;box-shadow:0 0 10px rgba(0,0,0,0.5)}.xki8toDJW1V5T6Q2baKK iframe{width:100%;height:100%;border:0;border-radius:1em 1em 0 0;background-color:white}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA{position:absolute;right:0;top:0;background-color:white;border-color:#ddd;border-width:1px;box-shadow:0 0 5px rgba(0,0,0,0.1);aspect-ratio:1;translate:33% -33%;border-radius:100%;line-height:0}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA:hover{background-color:#e6e6e6}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA:active{background-color:#ccc}.xki8toDJW1V5T6Q2baKK .XH4Q6flr1ggDa4pjIu7O{color:gray;width:1.5rem;height:1.5rem}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U{position:absolute;bottom:0;left:0;width:100%;background-color:white;text-align:center;padding:0.75rem;font-size:0.9rem;border-top:1px solid #ddd;font-weight:600;box-shadow:0 0 5px rgba(0,0,0,0.1)}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U a{color:black;text-shadow:none;text-decoration:none}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U a:hover{color:#29abe0}@media (max-width: 480px){.xki8toDJW1V5T6Q2baKK{right:0;width:100%;height:100%}.xki8toDJW1V5T6Q2baKK iframe{border-radius:0}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA{translate:initial;margin:0.5rem}}\n",""]),i.locals={donateBtn:"QSEpZEcKR0JDQr2RBSst",panel:"xki8toDJW1V5T6Q2baKK",open:"kF0g9az8fVG6kOqOMufc",closeBtn:"IBUCc6fCjyxRl3Ek8DQA",closeIcon:"XH4Q6flr1ggDa4pjIu7O",profileLink:"efoQ9WoiKsTaNnaKB03U"};const c=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(i[l]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);n&&i[u[0]]||(void 0!==a&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},81:e=>{"use strict";e.exports=function(e){return e[1]}},379:e=>{"use strict";var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var a={},i=[],c=0;c<e.length;c++){var l=e[c],s=n.base?l[0]+n.base:l[0],u=a[s]||0,f="".concat(s," ").concat(u);a[s]=u+1;var d=r(f),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var m=o(p,n);n.byIndex=c,t.splice(c,0,{identifier:f,updater:m,references:1})}i.push(f)}return i}function o(e,t){var r=t.domAPI(t);r.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,o){var a=n(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=r(a[i]);t[c].references--}for(var l=n(e,o),s=0;s<a.length;s++){var u=r(a[s]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}a=l}}},569:e=>{"use strict";var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},216:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,r)=>{"use strict";e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},795:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{"use strict";e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},156:t=>{"use strict";t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={id:e,exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var o={};return(()=>{"use strict";n.r(o),n.d(o,{Donate:()=>C});var e=n(156),t=n.n(e),r=n(184),a=n.n(r),i=n(379),c=n.n(i),l=n(795),s=n.n(l),u=n(569),f=n.n(u),d=n(565),p=n.n(d),m=n(216),v=n.n(m),h=n(589),b=n.n(h),y=n(800),g={};g.styleTagTransform=b(),g.setAttributes=p(),g.insert=f().bind(null,"head"),g.domAPI=s(),g.insertStyleElement=v();c()(y.Z,g);const x=y.Z&&y.Z.locals?y.Z.locals:void 0;var k={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},w=t().createContext&&t().createContext(k),K=function(){return K=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},K.apply(this,arguments)},E=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r};function S(e){return e&&e.map((function(e,r){return t().createElement(e.tag,K({key:r},e.attr),S(e.child))}))}function O(e){return function(r){return t().createElement(Q,K({attr:K({},e.attr)},r),S(e.child))}}function Q(e){var r=function(r){var n,o=e.attr,a=e.size,i=e.title,c=E(e,["attr","size","title"]),l=a||r.size||"1em";return r.className&&(n=r.className),e.className&&(n=(n?n+" ":"")+e.className),t().createElement("svg",K({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,o,c,{className:n,style:K(K({color:e.color||r.color},r.style),e.style),height:l,width:l,xmlns:"http://www.w3.org/2000/svg"}),i&&t().createElement("title",null,i),e.children)};return void 0!==w?t().createElement(w.Consumer,null,(function(e){return r(e)})):r(k)}function j(e){return O({tag:"svg",attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"}}]})(e)}function T(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,c=[],l=!0,s=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(c.push(n.value),c.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return c}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return D(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return D(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function D(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var C=function(r){var n=r.children,o=r.username,i=r.classNames,c=void 0===i?{}:i,l=r.styles,s=void 0===l?{}:l,u=r.onToggle,f=void 0===u?function(){}:u,d="https://ko-fi.com/".concat(o),p=T((0,e.useState)(!1),2),m=p[0],v=p[1],h=function(e){v(e),f(e)};return t().createElement(t().Fragment,null,t().createElement("button",{className:a()(x.donateBtn,c.donateBtn),style:s.donateBtn,onClick:function(){return h(!0)}},n),m?t().createElement("div",{className:a()(x.panel,c.panel),style:s.panel},t().createElement("button",{className:a()(x.closeBtn,c.closeBtn),style:s.closeBtn,onClick:function(){return h(!1)}},t().createElement(w.Provider,{value:{className:a()(x.closeIcon,c.closeIcon),style:s.closeIcon}},t().createElement(j,{title:"Close"}))),t().createElement("iframe",{src:"".concat(d,"?hidefeed=true&widget=true&embed=true")}),t().createElement("div",{className:a()(x.profileLink,c.profileLink),style:s.profileLink},t().createElement("a",{href:d,target:"_blank",rel:"noreferrer"},"ko-fi.com/",o))):null)}})(),o})()));
+"use client";!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("KofiDonate",["react"],t):"object"==typeof exports?exports.KofiDonate=t(require("react")):e.KofiDonate=t(e.react)}(this,(e=>(()=>{var t={184:(e,t)=>{var r;!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var a=typeof r;if("string"===a||"number"===a)e.push(r);else if(Array.isArray(r)){if(r.length){var i=o.apply(null,r);i&&e.push(i)}}else if("object"===a){if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]")){e.push(r.toString());continue}for(var c in r)n.call(r,c)&&r[c]&&e.push(c)}}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},800:(e,t,r)=>{"use strict";r.d(t,{Z:()=>c});var n=r(81),o=r.n(n),a=r(645),i=r.n(a)()(o());i.push([e.id,"@keyframes kF0g9az8fVG6kOqOMufc{from{translate:0 200%;opacity:0}to{translate:0;opacity:1}}.QSEpZEcKR0JDQr2RBSst{display:inline-block;background-color:#027CB1;color:white;border:0;padding:0.5em 1em;border-radius:2em;font-weight:bold}.QSEpZEcKR0JDQr2RBSst:hover{background-color:#1b89b9}.QSEpZEcKR0JDQr2RBSst:active{background-color:#02709f}.xki8toDJW1V5T6Q2baKK{position:fixed;z-index:100;width:calc(min(320px, 100%));height:calc(min(580px, 95%));bottom:0;right:2em;animation:kF0g9az8fVG6kOqOMufc 1s forwards ease-in-out}.xki8toDJW1V5T6Q2baKK iframe{width:100%;height:100%;border:0;box-shadow:0 0 10px rgba(0,0,0,0.5);border-radius:1em 1em 0 0;background-color:white}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA{position:absolute;right:0;top:0;background-color:white;border:1px solid #ddd;box-shadow:0 0 5px rgba(0,0,0,0.1);aspect-ratio:1;translate:33% -33%;border-radius:100%;line-height:0}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA:hover{background-color:#e6e6e6}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA:active{background-color:#ccc}.xki8toDJW1V5T6Q2baKK .XH4Q6flr1ggDa4pjIu7O{color:gray;width:1.5rem;height:1.5rem}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U{position:absolute;bottom:0;left:0;right:0;background-color:white;text-align:center;padding:0.75rem;font-size:0.9rem;border-top:1px solid #ddd;font-weight:600;box-shadow:0 0 5px rgba(0,0,0,0.1)}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U a{color:black;text-shadow:none;text-decoration:none}.xki8toDJW1V5T6Q2baKK .efoQ9WoiKsTaNnaKB03U a:hover{color:#027CB1}@media (max-width: 480px){.xki8toDJW1V5T6Q2baKK{right:0;width:100%;height:100%}.xki8toDJW1V5T6Q2baKK iframe{border-radius:0}.xki8toDJW1V5T6Q2baKK .IBUCc6fCjyxRl3Ek8DQA{translate:initial;margin:0.5rem}}\n",""]),i.locals={donateBtn:"QSEpZEcKR0JDQr2RBSst",panel:"xki8toDJW1V5T6Q2baKK",open:"kF0g9az8fVG6kOqOMufc",closeBtn:"IBUCc6fCjyxRl3Ek8DQA",closeIcon:"XH4Q6flr1ggDa4pjIu7O",profileLink:"efoQ9WoiKsTaNnaKB03U"};const c=i},645:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r="",n=void 0!==t[5];return t[4]&&(r+="@supports (".concat(t[4],") {")),t[2]&&(r+="@media ".concat(t[2]," {")),n&&(r+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),r+=e(t),n&&(r+="}"),t[2]&&(r+="}"),t[4]&&(r+="}"),r})).join("")},t.i=function(e,r,n,o,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(n)for(var c=0;c<this.length;c++){var l=this[c][0];null!=l&&(i[l]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);n&&i[u[0]]||(void 0!==a&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),r&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=r):u[2]=r),o&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=o):u[4]="".concat(o)),t.push(u))}},t}},81:e=>{"use strict";e.exports=function(e){return e[1]}},379:e=>{"use strict";var t=[];function r(e){for(var r=-1,n=0;n<t.length;n++)if(t[n].identifier===e){r=n;break}return r}function n(e,n){for(var a={},i=[],c=0;c<e.length;c++){var l=e[c],s=n.base?l[0]+n.base:l[0],u=a[s]||0,f="".concat(s," ").concat(u);a[s]=u+1;var d=r(f),p={css:l[1],media:l[2],sourceMap:l[3],supports:l[4],layer:l[5]};if(-1!==d)t[d].references++,t[d].updater(p);else{var m=o(p,n);n.byIndex=c,t.splice(c,0,{identifier:f,updater:m,references:1})}i.push(f)}return i}function o(e,t){var r=t.domAPI(t);r.update(e);return function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;r.update(e=t)}else r.remove()}}e.exports=function(e,o){var a=n(e=e||[],o=o||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var c=r(a[i]);t[c].references--}for(var l=n(e,o),s=0;s<a.length;s++){var u=r(a[s]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}a=l}}},569:e=>{"use strict";var t={};e.exports=function(e,r){var n=function(e){if(void 0===t[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}t[e]=r}return t[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(r)}},216:e=>{"use strict";e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,r)=>{"use strict";e.exports=function(e){var t=r.nc;t&&e.setAttribute("nonce",t)}},795:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(r){!function(e,t,r){var n="";r.supports&&(n+="@supports (".concat(r.supports,") {")),r.media&&(n+="@media ".concat(r.media," {"));var o=void 0!==r.layer;o&&(n+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),n+=r.css,o&&(n+="}"),r.media&&(n+="}"),r.supports&&(n+="}");var a=r.sourceMap;a&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(n,e,t.options)}(t,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{"use strict";e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},156:t=>{"use strict";t.exports=e}},r={};function n(e){var o=r[e];if(void 0!==o)return o.exports;var a=r[e]={id:e,exports:{}};return t[e](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var o={};return(()=>{"use strict";n.r(o),n.d(o,{Donate:()=>D});var e=n(156),t=n.n(e),r=n(184),a=n.n(r),i=n(379),c=n.n(i),l=n(795),s=n.n(l),u=n(569),f=n.n(u),d=n(565),p=n.n(d),m=n(216),v=n.n(m),h=n(589),b=n.n(h),y=n(800),g={};g.styleTagTransform=b(),g.setAttributes=p(),g.insert=f().bind(null,"head"),g.domAPI=s(),g.insertStyleElement=v();c()(y.Z,g);const x=y.Z&&y.Z.locals?y.Z.locals:void 0;var k={color:void 0,size:void 0,className:void 0,style:void 0,attr:void 0},K=t().createContext&&t().createContext(k),w=function(){return w=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},w.apply(this,arguments)},E=function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r};function S(e){return e&&e.map((function(e,r){return t().createElement(e.tag,w({key:r},e.attr),S(e.child))}))}function O(e){return function(r){return t().createElement(Q,w({attr:w({},e.attr)},r),S(e.child))}}function Q(e){var r=function(r){var n,o=e.attr,a=e.size,i=e.title,c=E(e,["attr","size","title"]),l=a||r.size||"1em";return r.className&&(n=r.className),e.className&&(n=(n?n+" ":"")+e.className),t().createElement("svg",w({stroke:"currentColor",fill:"currentColor",strokeWidth:"0"},r.attr,o,c,{className:n,style:w(w({color:e.color||r.color},r.style),e.style),height:l,width:l,xmlns:"http://www.w3.org/2000/svg"}),i&&t().createElement("title",null,i),e.children)};return void 0!==K?t().createElement(K.Consumer,null,(function(e){return r(e)})):r(k)}function j(e){return O({tag:"svg",attr:{fill:"currentColor",viewBox:"0 0 16 16"},child:[{tag:"path",attr:{d:"M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"}}]})(e)}function C(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,i,c=[],l=!0,s=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;l=!1}else for(;!(l=(n=a.call(r)).done)&&(c.push(n.value),c.length!==t);l=!0);}catch(e){s=!0,o=e}finally{try{if(!l&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(s)throw o}}return c}}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return T(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return T(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function T(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var D=function(r){var n=r.children,o=r.username,i=r.classNames,c=void 0===i?{}:i,l=r.styles,s=void 0===l?{}:l,u=r.onToggle,f=void 0===u?function(){}:u,d="https://ko-fi.com/".concat(o),p=C((0,e.useState)(!1),2),m=p[0],v=p[1],h=function(e){v(e),f(e)};return t().createElement(t().Fragment,null,t().createElement("button",{className:a()(x.donateBtn,c.donateBtn),style:s.donateBtn,onClick:function(){return h(!0)}},n),m?t().createElement("div",{className:a()(x.panel,c.panel),style:s.panel},t().createElement("button",{className:a()(x.closeBtn,c.closeBtn),style:s.closeBtn,onClick:function(){return h(!1)}},t().createElement(K.Provider,{value:{className:a()(x.closeIcon,c.closeIcon),style:s.closeIcon}},t().createElement(j,{title:"Close"}))),t().createElement("iframe",{src:"".concat(d,"?hidefeed=true&widget=true&embed=true")}),t().createElement("div",{className:a()(x.profileLink,c.profileLink),style:s.profileLink},t().createElement("a",{href:d,target:"_blank",rel:"noreferrer"},"ko-fi.com/",o))):null)}})(),o})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-kofi-overlay",
-  "version": "0.1.1",
+  "version": "1.0.0",
   "description": "React component for accepting donations though Ko-fi without leaving your website",
   "main": "dist/bundle.js",
   "types": "dist/index.d.ts",

package/src/Donate.module.scss

@@ -1,4 +1,4 @@
-$kofi-default-color: #29abe0;
+$default-color: #027CB1;
 
 @keyframes open {
   from {
@@ -13,18 +13,19 @@ $kofi-default-color: #29abe0;
 
 .donateBtn {
   display: inline-block;
-  background-color: $kofi-default-color;
+  background-color: $default-color;
   color: white;
+  border: 0;
   padding: 0.5em 1em;
   border-radius: 2em;
   font-weight: bold;
 
   &:hover {
-    background-color: mix($kofi-default-color, white, 90%);
+    background-color: mix($default-color, white, 90%);
   }
 
   &:active {
-    background-color: mix($kofi-default-color, black, 90%);
+    background-color: mix($default-color, black, 90%);
   }
 }
 
@@ -41,12 +42,12 @@ $kofi-default-color: #29abe0;
   bottom: 0;
   right: 2em;
   animation: open 1s forwards ease-in-out;
-  box-shadow: 0 0 10px rgba(0,0,0, 0.5);
 
   iframe {
     width: 100%;
     height: 100%;
     border: 0;
+    box-shadow: 0 0 10px rgba(0,0,0, 0.5);
     border-radius: 1em 1em 0 0;
     background-color: white;
   }
@@ -56,8 +57,7 @@ $kofi-default-color: #29abe0;
     right: 0;
     top: 0;
     background-color: white;
-    border-color: $border-color;
-    border-width: 1px;
+    border: 1px solid $border-color;
     box-shadow: $overlay-shadow;
     aspect-ratio: 1;
     translate: 33% -33%;
@@ -83,7 +83,7 @@ $kofi-default-color: #29abe0;
     position: absolute;
     bottom: 0;
     left: 0;
-    width: 100%;
+    right: 0;
     background-color: white;
     text-align: center;
     padding: 0.75rem;
@@ -98,7 +98,7 @@ $kofi-default-color: #29abe0;
       text-decoration: none;
 
       &:hover {
-        color: $kofi-default-color;
+        color: $default-color;
       }
     }
   }