groovinads-ui 1.0.4 → 1.0.6

package/.storybook/preview-head.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="http://ui.groovinads.com/styles.min.css">
+<!-- Fontawesome kit -->
+<script src="https://kit.fontawesome.com/79f14073fb.js" crossorigin="anonymous"></script>

package/dist/index.es.js

@@ -1 +1 @@
-import n from"react";!function(n,t){void 0===t&&(t={});var o=t.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}(".btn{align-items:center;background-color:#3930b1;border-color:transparent;border-radius:.375rem;box-shadow:0 0 0 rgba(57,48,177,.35);color:#fff;display:flex;flex-direction:row;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;height:3rem;justify-content:center;line-height:1rem;padding:1em 1.5em;transform:translateY(0);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out;white-space:nowrap;width:100%}@media (min-width:768px){.btn{width:auto}}.btn:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:0 6px 16px rgba(57,48,177,.35);color:#fff;transform:translateY(-.146rem)}.btn:active,.btn:first-child:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn:not(:has(span)){padding:1em;width:auto}.btn .icon,.btn i{height:1em;width:1em}.btn i,.btn span{transition:color .15s ease-in-out}.btn.btn-secondary{background-color:#e9e7f9;border-color:#e9e7f9;color:#3930b1}.btn.btn-secondary:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:none;color:#fff;transform:translate(0)}.btn.btn-terciary{background-color:transparent;border-color:transparent;color:#3930b1}.btn.btn-terciary .icon path,.btn.btn-terciary .icon.caret path{fill:#3930b1}.btn.btn-terciary.show,.btn.btn-terciary:active,.btn.btn-terciary:hover{background-color:rgba(0,0,75,.1)!important;border-color:rgba(0,0,75,.05);box-shadow:none;color:#3930b1!important;transform:translate(0)}.btn.btn-terciary.show span,.btn.btn-terciary:active span,.btn.btn-terciary:hover span{color:#3930b1}.btn.btn-terciary.show .icon path,.btn.btn-terciary:active .icon path,.btn.btn-terciary:hover .icon path{fill:#3930b1}.btn.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(0,0,75,.5)}.btn.btn-terciary.danger,.btn.btn-terciary.danger i,.btn.btn-terciary.danger span{color:#e63137}.btn.btn-terciary.danger:active,.btn.btn-terciary.danger:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-terciary.danger:active i,.btn.btn-terciary.danger:active span,.btn.btn-terciary.danger:hover i,.btn.btn-terciary.danger:hover span{color:#e63137}.btn.btn-outline{background-color:transparent;border:1px solid #3930b1;color:#3930b1}.btn.btn-outline .icon,.btn.btn-outline i,.btn.btn-outline span{color:#3930b1}.btn.btn-outline .icon path,.btn.btn-outline i path,.btn.btn-outline span path{fill:#3930b1}.btn.btn-outline:hover{background-color:#e9e7f9;border-color:#3930b1;box-shadow:none;color:#3930b1;transform:translate(0)}.btn.btn-outline:hover .icon,.btn.btn-outline:hover i,.btn.btn-outline:hover span{color:#3930b1}.btn.btn-outline:hover .icon path,.btn.btn-outline:hover i path,.btn.btn-outline:hover span path{fill:#3930b1}.btn.btn-outline.show,.btn.btn-outline:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.show .icon,.btn.btn-outline.show i,.btn.btn-outline.show span,.btn.btn-outline:active .icon,.btn.btn-outline:active i,.btn.btn-outline:active span{color:#fff}.btn.btn-outline.show .icon path,.btn.btn-outline.show i path,.btn.btn-outline.show span path,.btn.btn-outline:active .icon path,.btn.btn-outline:active i path,.btn.btn-outline:active span path{fill:#fff}.btn.btn-outline.grey{border-color:#767676}.btn.btn-outline.grey .icon,.btn.btn-outline.grey i,.btn.btn-outline.grey span{color:#767676}.btn.btn-outline.grey .icon path,.btn.btn-outline.grey i path,.btn.btn-outline.grey span path{fill:#767676}.btn.btn-outline.grey:active,.btn.btn-outline.grey:hover{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span,.btn.btn-outline.grey:hover .icon,.btn.btn-outline.grey:hover i,.btn.btn-outline.grey:hover span{color:#fff}.btn.btn-outline.grey:active .icon path,.btn.btn-outline.grey:active i path,.btn.btn-outline.grey:active span path,.btn.btn-outline.grey:hover .icon path,.btn.btn-outline.grey:hover i path,.btn.btn-outline.grey:hover span path{fill:#fff}.btn.btn-outline.grey:active:hover,.btn.btn-outline.grey:hover:hover{background-color:#3930b1;border-color:#3930b1;color:#fff}.btn.btn-outline.grey.show{border-color:#3930b1}.btn.btn-outline.grey.show .icon,.btn.btn-outline.grey.show i,.btn.btn-outline.grey.show span{color:#fff}.btn.btn-outline.grey.show .icon path,.btn.btn-outline.grey.show i path,.btn.btn-outline.grey.show span path{fill:#fff}.btn.btn-outline.grey:active{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span{color:#fff}.btn.oauth{align-items:center;height:inherit;justify-content:flex-start;margin-bottom:1rem;max-width:300px;padding:.5rem 1.5rem;width:100%}.btn.oauth.google{align-items:center;background-color:#fff;border:1px solid #efefef;display:flex;justify-content:center}.btn.oauth.google span{color:#767676}.btn.oauth.google:hover{background-color:#fff;border:1px solid #efefef}.btn.oauth.linkedin{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.linkedin span{color:#fff}.btn.oauth.linkedin:hover{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.facebook{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.facebook span{color:#fff}.btn.oauth.facebook:hover{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.microsoft{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.microsoft span{color:#5e5e5e}.btn.oauth.microsoft:hover{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.apple{background-color:#000;border:1px solid #000}.btn.oauth.apple span{color:#fff}.btn.oauth.apple:hover{background-color:#000;border:1px solid #000}.btn.oauth .logo{height:1.5rem;margin-right:1rem;width:1.5rem}.btn.btn-input{align-items:flex-start;background-color:#fff;border:1px solid #767676;color:#767676;font-weight:400;height:auto;justify-content:space-between;min-height:3rem;padding:1em .75em}.btn.btn-input:active,.btn.btn-input:hover{background-color:#fff!important;box-shadow:none;color:#767676!important;transform:translate(0)}.btn.btn-input .highlighted{color:#091a12;font-weight:700}.btn.btn-input.not-validated{background-color:#fce7e8!important;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E\");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);border-color:#e63137;border-top-right-radius:0;padding-right:calc(1.5em + .75rem)}.btn.btn-input.not-validated:focus{border-color:#e63137;box-shadow:0 0 0 .25rem rgba(230,49,55,.25)}.btn.btn-input.not-validated:focus~.label{color:#e63137}.btn.btn-input.not-validated~.label{color:#e63137}.btn.btn-input .label{transition:transform .2s cubic-bezier(0,0,.2,1),color .2s cubic-bezier(0,0,.2,1),top .2s cubic-bezier(0,0,.2,1)}.btn.btn-input .wrapper{display:flex;flex-wrap:wrap;gap:.5rem}.btn.btn-input:has(.wrapper) .label{position:absolute;text-shadow:2px 2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff,-2px -2px 1px #fff,2px 0 1px #fff,0 2px 1px #fff,-2px 0 1px #fff,0 -2px 1px #fff;top:-.5em;transform:scale(.85) translateX(-.5em)}.btn.btn-input.show{border-color:#746ec8;box-shadow:0 0 0 2px #746ec8}.btn.btn-input.show .label{color:#746ec8}.btn:has(.avatar){padding:.375em}.btn:has(.avatar) .avatar{border-radius:100%;box-shadow:none;overflow:hidden;transition:box-shadow .15s ease-in-out}.btn:has(.avatar) .avatar img{height:2.375em;width:2.375em}.btn:has(.avatar) span{color:#767676;display:none;max-width:144px;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-in-out;white-space:nowrap}@media (min-width:768px){.btn:has(.avatar) span{display:block}}.btn:has(.avatar).show{background-color:#e9e7f9;border-color:#e9e7f9}.btn:has(.avatar).show .avatar{box-shadow:0 0 0 3px #3930b1}.btn.btn-xs{border-radius:.1875rem;font-size:.875rem;height:2.375rem;line-height:1em;padding:.75em 1.375em}.btn.btn-xs:not(:has(span)){padding:.75em}.btn.btn-lg{border-radius:.5rem;font-size:1.25rem;height:3.75rem;line-height:1em;padding:1.25em 2.25em}.btn.btn-lg:not(:has(span)){padding:1.25em}.btn.btn-success{background-color:#5bbb84;border-color:#5bbb84}.btn.btn-success.btn-secondary{background-color:#d6eee0;border-color:#d6eee0;color:#31754e}.btn.btn-success.btn-secondary:active,.btn.btn-success.btn-secondary:first-child:active,.btn.btn-success.btn-secondary:hover{background-color:#5bbb84!important;border-color:#5bbb84!important;color:#fff!important}.btn.btn-success.btn-terciary{background-color:transparent;border-color:transparent;color:#5bbb84}.btn.btn-success.btn-terciary .icon path,.btn.btn-success.btn-terciary .icon.caret path{fill:#5bbb84}.btn.btn-success.btn-terciary.show,.btn.btn-success.btn-terciary:active,.btn.btn-success.btn-terciary:hover{background-color:#d6eee0!important;border-color:rgba(49,117,78,.05)!important;color:#31754e!important}.btn.btn-success.btn-terciary.show span,.btn.btn-success.btn-terciary:active span,.btn.btn-success.btn-terciary:hover span{color:#31754e}.btn.btn-success.btn-terciary.show .icon path,.btn.btn-success.btn-terciary:active .icon path,.btn.btn-success.btn-terciary:hover .icon path{fill:#31754e}.btn.btn-success.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(49,117,78,.5)}.btn.btn-success.btn-outline{background-color:transparent;border:1px solid #5bbb84;color:#31754e}.btn.btn-success.btn-outline .icon,.btn.btn-success.btn-outline i,.btn.btn-success.btn-outline span{color:#5bbb84}.btn.btn-success.btn-outline .icon path,.btn.btn-success.btn-outline i path,.btn.btn-success.btn-outline span path{fill:#5bbb84}.btn.btn-success.btn-outline:active,.btn.btn-success.btn-outline:hover{background-color:rgba(91,187,132,.2)!important;border-color:#5bbb84!important;color:#5bbb84}.btn.btn-success.btn-outline:active .icon,.btn.btn-success.btn-outline:active i,.btn.btn-success.btn-outline:active span,.btn.btn-success.btn-outline:hover .icon,.btn.btn-success.btn-outline:hover i,.btn.btn-success.btn-outline:hover span{color:#5bbb84}.btn.btn-success.btn-outline:active .icon path,.btn.btn-success.btn-outline:active i path,.btn.btn-success.btn-outline:active span path,.btn.btn-success.btn-outline:hover .icon path,.btn.btn-success.btn-outline:hover i path,.btn.btn-success.btn-outline:hover span path{fill:#5bbb84}.btn.btn-danger{background-color:#e63137;border-color:#e63137}.btn.btn-danger.btn-secondary{background-color:#fce7e8;border-color:#fce7e8;color:#e63137}.btn.btn-danger.btn-secondary:active,.btn.btn-danger.btn-secondary:first-child:active,.btn.btn-danger.btn-secondary:hover{background-color:#e63137!important;border-color:#e63137!important;color:#fff!important}.btn.btn-danger.btn-terciary{background-color:transparent;border-color:transparent;color:#e63137}.btn.btn-danger.btn-terciary .icon path,.btn.btn-danger.btn-terciary .icon.caret path{fill:#e63137}.btn.btn-danger.btn-terciary.show,.btn.btn-danger.btn-terciary:active,.btn.btn-danger.btn-terciary:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-danger.btn-terciary.show span,.btn.btn-danger.btn-terciary:active span,.btn.btn-danger.btn-terciary:hover span{color:#e63137}.btn.btn-danger.btn-terciary.show .icon path,.btn.btn-danger.btn-terciary:active .icon path,.btn.btn-danger.btn-terciary:hover .icon path{fill:#e63137}.btn.btn-danger.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(230,49,55,.5)}.btn.btn-danger.btn-outline{background-color:transparent;border:1px solid #e63137;color:#e63137}.btn.btn-danger.btn-outline .icon,.btn.btn-danger.btn-outline i,.btn.btn-danger.btn-outline span{color:#e63137}.btn.btn-danger.btn-outline .icon path,.btn.btn-danger.btn-outline i path,.btn.btn-danger.btn-outline span path{fill:#e63137}.btn.btn-danger.btn-outline:active,.btn.btn-danger.btn-outline:hover{background-color:rgba(230,49,55,.2)!important;border-color:#e63137!important;color:#e63137}.btn.btn-danger.btn-outline:active .icon,.btn.btn-danger.btn-outline:active i,.btn.btn-danger.btn-outline:active span,.btn.btn-danger.btn-outline:hover .icon,.btn.btn-danger.btn-outline:hover i,.btn.btn-danger.btn-outline:hover span{color:#e63137}.btn.btn-danger.btn-outline:active .icon path,.btn.btn-danger.btn-outline:active i path,.btn.btn-danger.btn-outline:active span path,.btn.btn-danger.btn-outline:hover .icon path,.btn.btn-danger.btn-outline:hover i path,.btn.btn-danger.btn-outline:hover span path{fill:#e63137}.btn.btn-warning{background-color:#f3a905;border-color:#f3a905}.btn.btn-warning.btn-secondary{background-color:#feedc6;border-color:#feedc6;color:#aa5509}.btn.btn-warning.btn-secondary:active,.btn.btn-warning.btn-secondary:first-child:active,.btn.btn-warning.btn-secondary:hover{background-color:#f3a905!important;border-color:#f3a905!important;color:#fff!important}.btn.btn-warning.btn-terciary{background-color:transparent;border-color:transparent;color:#f3a905}.btn.btn-warning.btn-terciary .icon path,.btn.btn-warning.btn-terciary .icon.caret path{fill:#f3a905}.btn.btn-warning.btn-terciary.show,.btn.btn-warning.btn-terciary:active,.btn.btn-warning.btn-terciary:hover{background-color:#feedc6!important;border-color:rgba(170,85,9,.05)!important;color:#aa5509!important}.btn.btn-warning.btn-terciary.show span,.btn.btn-warning.btn-terciary:active span,.btn.btn-warning.btn-terciary:hover span{color:#aa5509}.btn.btn-warning.btn-terciary.show .icon path,.btn.btn-warning.btn-terciary:active .icon path,.btn.btn-warning.btn-terciary:hover .icon path{fill:#aa5509}.btn.btn-warning.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(170,85,9,.5)}.btn.btn-warning.btn-outline{background-color:transparent;border:1px solid #f3a905;color:#aa5509}.btn.btn-warning.btn-outline .icon,.btn.btn-warning.btn-outline i,.btn.btn-warning.btn-outline span{color:#f3a905}.btn.btn-warning.btn-outline .icon path,.btn.btn-warning.btn-outline i path,.btn.btn-warning.btn-outline span path{fill:#f3a905}.btn.btn-warning.btn-outline:active,.btn.btn-warning.btn-outline:hover{background-color:rgba(243,169,5,.2)!important;border-color:#f3a905!important;color:#f3a905}.btn.btn-warning.btn-outline:active .icon,.btn.btn-warning.btn-outline:active i,.btn.btn-warning.btn-outline:active span,.btn.btn-warning.btn-outline:hover .icon,.btn.btn-warning.btn-outline:hover i,.btn.btn-warning.btn-outline:hover span{color:#f3a905}.btn.btn-warning.btn-outline:active .icon path,.btn.btn-warning.btn-outline:active i path,.btn.btn-warning.btn-outline:active span path,.btn.btn-warning.btn-outline:hover .icon path,.btn.btn-warning.btn-outline:hover i path,.btn.btn-warning.btn-outline:hover span path{fill:#f3a905}.btn.btn-link{background-color:transparent;border-color:transparent;color:#24b8ce;font-weight:400;transition-duration:0}.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{background-color:transparent!important;border-color:transparent!important;box-shadow:none;color:#3930b1!important;transform:none}.btn.btn-link span{transition:none}.btn.btn-processing{pointer-events:none}.btn.btn-processing .fa-spin{animation-duration:.75s}.btn:disabled{opacity:.4;pointer-events:none}");const t=({variant:t,size:o,onClick:e,children:r,icon:b,iconPosition:a,className:i,style:c,processing:l})=>{let s=`btn ${i}`;"default"!==t&&(s+=` btn-${t}`),"md"!==o&&(s+=` btn-${o}`),"default"!==c&&(s+=` btn-${c}`),l&&(s+=" btn-processing");const d=l?n.createElement(n.Fragment,null,n.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),r&&n.createElement("span",null,r,"…")):b?"end"===a?n.createElement(n.Fragment,null,r&&n.createElement("span",null,r),n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"})):n.createElement(n.Fragment,null,n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"}),r&&n.createElement("span",null,r)):r&&n.createElement("span",null,r);return n.createElement("button",{className:s,onClick:e},d)};export{t as Button};
+import e from"react";const n=({variant:n,size:a,onClick:t,children:i,icon:l,iconPosition:s,className:r,style:o,processing:c})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==a&&(d+=` btn-${a}`),"default"!==o&&(d+=` btn-${o}`),c&&(d+=" btn-processing");const m=c?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:t},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1};export{n as Button};

package/dist/index.js

@@ -1 +1 @@
-"use strict";var n=require("react");!function(n,t){void 0===t&&(t={});var o=t.insertAt;if(n&&"undefined"!=typeof document){var e=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&e.firstChild?e.insertBefore(r,e.firstChild):e.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}(".btn{align-items:center;background-color:#3930b1;border-color:transparent;border-radius:.375rem;box-shadow:0 0 0 rgba(57,48,177,.35);color:#fff;display:flex;flex-direction:row;font-family:Roboto,sans-serif;font-size:1rem;font-weight:700;gap:.5rem;height:3rem;justify-content:center;line-height:1rem;padding:1em 1.5em;transform:translateY(0);transition:color .15s ease-in-out,background-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out;white-space:nowrap;width:100%}@media (min-width:768px){.btn{width:auto}}.btn:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:0 6px 16px rgba(57,48,177,.35);color:#fff;transform:translateY(-.146rem)}.btn:active,.btn:first-child:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn:not(:has(span)){padding:1em;width:auto}.btn .icon,.btn i{height:1em;width:1em}.btn i,.btn span{transition:color .15s ease-in-out}.btn.btn-secondary{background-color:#e9e7f9;border-color:#e9e7f9;color:#3930b1}.btn.btn-secondary:hover{background-color:#3930b1;border-color:#3930b1;box-shadow:none;color:#fff;transform:translate(0)}.btn.btn-terciary{background-color:transparent;border-color:transparent;color:#3930b1}.btn.btn-terciary .icon path,.btn.btn-terciary .icon.caret path{fill:#3930b1}.btn.btn-terciary.show,.btn.btn-terciary:active,.btn.btn-terciary:hover{background-color:rgba(0,0,75,.1)!important;border-color:rgba(0,0,75,.05);box-shadow:none;color:#3930b1!important;transform:translate(0)}.btn.btn-terciary.show span,.btn.btn-terciary:active span,.btn.btn-terciary:hover span{color:#3930b1}.btn.btn-terciary.show .icon path,.btn.btn-terciary:active .icon path,.btn.btn-terciary:hover .icon path{fill:#3930b1}.btn.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(0,0,75,.5)}.btn.btn-terciary.danger,.btn.btn-terciary.danger i,.btn.btn-terciary.danger span{color:#e63137}.btn.btn-terciary.danger:active,.btn.btn-terciary.danger:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-terciary.danger:active i,.btn.btn-terciary.danger:active span,.btn.btn-terciary.danger:hover i,.btn.btn-terciary.danger:hover span{color:#e63137}.btn.btn-outline{background-color:transparent;border:1px solid #3930b1;color:#3930b1}.btn.btn-outline .icon,.btn.btn-outline i,.btn.btn-outline span{color:#3930b1}.btn.btn-outline .icon path,.btn.btn-outline i path,.btn.btn-outline span path{fill:#3930b1}.btn.btn-outline:hover{background-color:#e9e7f9;border-color:#3930b1;box-shadow:none;color:#3930b1;transform:translate(0)}.btn.btn-outline:hover .icon,.btn.btn-outline:hover i,.btn.btn-outline:hover span{color:#3930b1}.btn.btn-outline:hover .icon path,.btn.btn-outline:hover i path,.btn.btn-outline:hover span path{fill:#3930b1}.btn.btn-outline.show,.btn.btn-outline:active{background-color:#3930b1!important;border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.show .icon,.btn.btn-outline.show i,.btn.btn-outline.show span,.btn.btn-outline:active .icon,.btn.btn-outline:active i,.btn.btn-outline:active span{color:#fff}.btn.btn-outline.show .icon path,.btn.btn-outline.show i path,.btn.btn-outline.show span path,.btn.btn-outline:active .icon path,.btn.btn-outline:active i path,.btn.btn-outline:active span path{fill:#fff}.btn.btn-outline.grey{border-color:#767676}.btn.btn-outline.grey .icon,.btn.btn-outline.grey i,.btn.btn-outline.grey span{color:#767676}.btn.btn-outline.grey .icon path,.btn.btn-outline.grey i path,.btn.btn-outline.grey span path{fill:#767676}.btn.btn-outline.grey:active,.btn.btn-outline.grey:hover{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span,.btn.btn-outline.grey:hover .icon,.btn.btn-outline.grey:hover i,.btn.btn-outline.grey:hover span{color:#fff}.btn.btn-outline.grey:active .icon path,.btn.btn-outline.grey:active i path,.btn.btn-outline.grey:active span path,.btn.btn-outline.grey:hover .icon path,.btn.btn-outline.grey:hover i path,.btn.btn-outline.grey:hover span path{fill:#fff}.btn.btn-outline.grey:active:hover,.btn.btn-outline.grey:hover:hover{background-color:#3930b1;border-color:#3930b1;color:#fff}.btn.btn-outline.grey.show{border-color:#3930b1}.btn.btn-outline.grey.show .icon,.btn.btn-outline.grey.show i,.btn.btn-outline.grey.show span{color:#fff}.btn.btn-outline.grey.show .icon path,.btn.btn-outline.grey.show i path,.btn.btn-outline.grey.show span path{fill:#fff}.btn.btn-outline.grey:active{border-color:#3930b1!important;color:#fff!important}.btn.btn-outline.grey:active .icon,.btn.btn-outline.grey:active i,.btn.btn-outline.grey:active span{color:#fff}.btn.oauth{align-items:center;height:inherit;justify-content:flex-start;margin-bottom:1rem;max-width:300px;padding:.5rem 1.5rem;width:100%}.btn.oauth.google{align-items:center;background-color:#fff;border:1px solid #efefef;display:flex;justify-content:center}.btn.oauth.google span{color:#767676}.btn.oauth.google:hover{background-color:#fff;border:1px solid #efefef}.btn.oauth.linkedin{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.linkedin span{color:#fff}.btn.oauth.linkedin:hover{background-color:#1877f2;border:1px solid #1877f2}.btn.oauth.facebook{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.facebook span{color:#fff}.btn.oauth.facebook:hover{background-color:#0077b5;border:1px solid #0077b5}.btn.oauth.microsoft{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.microsoft span{color:#5e5e5e}.btn.oauth.microsoft:hover{background-color:#fff;border:1px solid #8c8c8c}.btn.oauth.apple{background-color:#000;border:1px solid #000}.btn.oauth.apple span{color:#fff}.btn.oauth.apple:hover{background-color:#000;border:1px solid #000}.btn.oauth .logo{height:1.5rem;margin-right:1rem;width:1.5rem}.btn.btn-input{align-items:flex-start;background-color:#fff;border:1px solid #767676;color:#767676;font-weight:400;height:auto;justify-content:space-between;min-height:3rem;padding:1em .75em}.btn.btn-input:active,.btn.btn-input:hover{background-color:#fff!important;box-shadow:none;color:#767676!important;transform:translate(0)}.btn.btn-input .highlighted{color:#091a12;font-weight:700}.btn.btn-input.not-validated{background-color:#fce7e8!important;background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E\");background-position:right calc(.375em + .1875rem) center;background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);border-color:#e63137;border-top-right-radius:0;padding-right:calc(1.5em + .75rem)}.btn.btn-input.not-validated:focus{border-color:#e63137;box-shadow:0 0 0 .25rem rgba(230,49,55,.25)}.btn.btn-input.not-validated:focus~.label{color:#e63137}.btn.btn-input.not-validated~.label{color:#e63137}.btn.btn-input .label{transition:transform .2s cubic-bezier(0,0,.2,1),color .2s cubic-bezier(0,0,.2,1),top .2s cubic-bezier(0,0,.2,1)}.btn.btn-input .wrapper{display:flex;flex-wrap:wrap;gap:.5rem}.btn.btn-input:has(.wrapper) .label{position:absolute;text-shadow:2px 2px 1px #fff,2px -2px 1px #fff,-2px 2px 1px #fff,-2px -2px 1px #fff,2px 0 1px #fff,0 2px 1px #fff,-2px 0 1px #fff,0 -2px 1px #fff;top:-.5em;transform:scale(.85) translateX(-.5em)}.btn.btn-input.show{border-color:#746ec8;box-shadow:0 0 0 2px #746ec8}.btn.btn-input.show .label{color:#746ec8}.btn:has(.avatar){padding:.375em}.btn:has(.avatar) .avatar{border-radius:100%;box-shadow:none;overflow:hidden;transition:box-shadow .15s ease-in-out}.btn:has(.avatar) .avatar img{height:2.375em;width:2.375em}.btn:has(.avatar) span{color:#767676;display:none;max-width:144px;overflow:hidden;text-overflow:ellipsis;transition:color .15s ease-in-out;white-space:nowrap}@media (min-width:768px){.btn:has(.avatar) span{display:block}}.btn:has(.avatar).show{background-color:#e9e7f9;border-color:#e9e7f9}.btn:has(.avatar).show .avatar{box-shadow:0 0 0 3px #3930b1}.btn.btn-xs{border-radius:.1875rem;font-size:.875rem;height:2.375rem;line-height:1em;padding:.75em 1.375em}.btn.btn-xs:not(:has(span)){padding:.75em}.btn.btn-lg{border-radius:.5rem;font-size:1.25rem;height:3.75rem;line-height:1em;padding:1.25em 2.25em}.btn.btn-lg:not(:has(span)){padding:1.25em}.btn.btn-success{background-color:#5bbb84;border-color:#5bbb84}.btn.btn-success.btn-secondary{background-color:#d6eee0;border-color:#d6eee0;color:#31754e}.btn.btn-success.btn-secondary:active,.btn.btn-success.btn-secondary:first-child:active,.btn.btn-success.btn-secondary:hover{background-color:#5bbb84!important;border-color:#5bbb84!important;color:#fff!important}.btn.btn-success.btn-terciary{background-color:transparent;border-color:transparent;color:#5bbb84}.btn.btn-success.btn-terciary .icon path,.btn.btn-success.btn-terciary .icon.caret path{fill:#5bbb84}.btn.btn-success.btn-terciary.show,.btn.btn-success.btn-terciary:active,.btn.btn-success.btn-terciary:hover{background-color:#d6eee0!important;border-color:rgba(49,117,78,.05)!important;color:#31754e!important}.btn.btn-success.btn-terciary.show span,.btn.btn-success.btn-terciary:active span,.btn.btn-success.btn-terciary:hover span{color:#31754e}.btn.btn-success.btn-terciary.show .icon path,.btn.btn-success.btn-terciary:active .icon path,.btn.btn-success.btn-terciary:hover .icon path{fill:#31754e}.btn.btn-success.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(49,117,78,.5)}.btn.btn-success.btn-outline{background-color:transparent;border:1px solid #5bbb84;color:#31754e}.btn.btn-success.btn-outline .icon,.btn.btn-success.btn-outline i,.btn.btn-success.btn-outline span{color:#5bbb84}.btn.btn-success.btn-outline .icon path,.btn.btn-success.btn-outline i path,.btn.btn-success.btn-outline span path{fill:#5bbb84}.btn.btn-success.btn-outline:active,.btn.btn-success.btn-outline:hover{background-color:rgba(91,187,132,.2)!important;border-color:#5bbb84!important;color:#5bbb84}.btn.btn-success.btn-outline:active .icon,.btn.btn-success.btn-outline:active i,.btn.btn-success.btn-outline:active span,.btn.btn-success.btn-outline:hover .icon,.btn.btn-success.btn-outline:hover i,.btn.btn-success.btn-outline:hover span{color:#5bbb84}.btn.btn-success.btn-outline:active .icon path,.btn.btn-success.btn-outline:active i path,.btn.btn-success.btn-outline:active span path,.btn.btn-success.btn-outline:hover .icon path,.btn.btn-success.btn-outline:hover i path,.btn.btn-success.btn-outline:hover span path{fill:#5bbb84}.btn.btn-danger{background-color:#e63137;border-color:#e63137}.btn.btn-danger.btn-secondary{background-color:#fce7e8;border-color:#fce7e8;color:#e63137}.btn.btn-danger.btn-secondary:active,.btn.btn-danger.btn-secondary:first-child:active,.btn.btn-danger.btn-secondary:hover{background-color:#e63137!important;border-color:#e63137!important;color:#fff!important}.btn.btn-danger.btn-terciary{background-color:transparent;border-color:transparent;color:#e63137}.btn.btn-danger.btn-terciary .icon path,.btn.btn-danger.btn-terciary .icon.caret path{fill:#e63137}.btn.btn-danger.btn-terciary.show,.btn.btn-danger.btn-terciary:active,.btn.btn-danger.btn-terciary:hover{background-color:#fce7e8!important;border-color:#fce7e8!important;color:#e63137!important}.btn.btn-danger.btn-terciary.show span,.btn.btn-danger.btn-terciary:active span,.btn.btn-danger.btn-terciary:hover span{color:#e63137}.btn.btn-danger.btn-terciary.show .icon path,.btn.btn-danger.btn-terciary:active .icon path,.btn.btn-danger.btn-terciary:hover .icon path{fill:#e63137}.btn.btn-danger.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(230,49,55,.5)}.btn.btn-danger.btn-outline{background-color:transparent;border:1px solid #e63137;color:#e63137}.btn.btn-danger.btn-outline .icon,.btn.btn-danger.btn-outline i,.btn.btn-danger.btn-outline span{color:#e63137}.btn.btn-danger.btn-outline .icon path,.btn.btn-danger.btn-outline i path,.btn.btn-danger.btn-outline span path{fill:#e63137}.btn.btn-danger.btn-outline:active,.btn.btn-danger.btn-outline:hover{background-color:rgba(230,49,55,.2)!important;border-color:#e63137!important;color:#e63137}.btn.btn-danger.btn-outline:active .icon,.btn.btn-danger.btn-outline:active i,.btn.btn-danger.btn-outline:active span,.btn.btn-danger.btn-outline:hover .icon,.btn.btn-danger.btn-outline:hover i,.btn.btn-danger.btn-outline:hover span{color:#e63137}.btn.btn-danger.btn-outline:active .icon path,.btn.btn-danger.btn-outline:active i path,.btn.btn-danger.btn-outline:active span path,.btn.btn-danger.btn-outline:hover .icon path,.btn.btn-danger.btn-outline:hover i path,.btn.btn-danger.btn-outline:hover span path{fill:#e63137}.btn.btn-warning{background-color:#f3a905;border-color:#f3a905}.btn.btn-warning.btn-secondary{background-color:#feedc6;border-color:#feedc6;color:#aa5509}.btn.btn-warning.btn-secondary:active,.btn.btn-warning.btn-secondary:first-child:active,.btn.btn-warning.btn-secondary:hover{background-color:#f3a905!important;border-color:#f3a905!important;color:#fff!important}.btn.btn-warning.btn-terciary{background-color:transparent;border-color:transparent;color:#f3a905}.btn.btn-warning.btn-terciary .icon path,.btn.btn-warning.btn-terciary .icon.caret path{fill:#f3a905}.btn.btn-warning.btn-terciary.show,.btn.btn-warning.btn-terciary:active,.btn.btn-warning.btn-terciary:hover{background-color:#feedc6!important;border-color:rgba(170,85,9,.05)!important;color:#aa5509!important}.btn.btn-warning.btn-terciary.show span,.btn.btn-warning.btn-terciary:active span,.btn.btn-warning.btn-terciary:hover span{color:#aa5509}.btn.btn-warning.btn-terciary.show .icon path,.btn.btn-warning.btn-terciary:active .icon path,.btn.btn-warning.btn-terciary:hover .icon path{fill:#aa5509}.btn.btn-warning.btn-terciary:focus{box-shadow:0 0 0 .25rem rgba(170,85,9,.5)}.btn.btn-warning.btn-outline{background-color:transparent;border:1px solid #f3a905;color:#aa5509}.btn.btn-warning.btn-outline .icon,.btn.btn-warning.btn-outline i,.btn.btn-warning.btn-outline span{color:#f3a905}.btn.btn-warning.btn-outline .icon path,.btn.btn-warning.btn-outline i path,.btn.btn-warning.btn-outline span path{fill:#f3a905}.btn.btn-warning.btn-outline:active,.btn.btn-warning.btn-outline:hover{background-color:rgba(243,169,5,.2)!important;border-color:#f3a905!important;color:#f3a905}.btn.btn-warning.btn-outline:active .icon,.btn.btn-warning.btn-outline:active i,.btn.btn-warning.btn-outline:active span,.btn.btn-warning.btn-outline:hover .icon,.btn.btn-warning.btn-outline:hover i,.btn.btn-warning.btn-outline:hover span{color:#f3a905}.btn.btn-warning.btn-outline:active .icon path,.btn.btn-warning.btn-outline:active i path,.btn.btn-warning.btn-outline:active span path,.btn.btn-warning.btn-outline:hover .icon path,.btn.btn-warning.btn-outline:hover i path,.btn.btn-warning.btn-outline:hover span path{fill:#f3a905}.btn.btn-link{background-color:transparent;border-color:transparent;color:#24b8ce;font-weight:400;transition-duration:0}.btn.btn-link:active,.btn.btn-link:focus,.btn.btn-link:hover{background-color:transparent!important;border-color:transparent!important;box-shadow:none;color:#3930b1!important;transform:none}.btn.btn-link span{transition:none}.btn.btn-processing{pointer-events:none}.btn.btn-processing .fa-spin{animation-duration:.75s}.btn:disabled{opacity:.4;pointer-events:none}");exports.Button=({variant:t,size:o,onClick:e,children:r,icon:b,iconPosition:a,className:i,style:c,processing:l})=>{let s=`btn ${i}`;"default"!==t&&(s+=` btn-${t}`),"md"!==o&&(s+=` btn-${o}`),"default"!==c&&(s+=` btn-${c}`),l&&(s+=" btn-processing");const d=l?n.createElement(n.Fragment,null,n.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),r&&n.createElement("span",null,r,"…")):b?"end"===a?n.createElement(n.Fragment,null,r&&n.createElement("span",null,r),n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"})):n.createElement(n.Fragment,null,n.createElement("i",{className:`fa-solid ${b}`,"aria-hidden":"true"}),r&&n.createElement("span",null,r)):r&&n.createElement("span",null,r);return n.createElement("button",{className:s,onClick:e},d)};
+"use strict";var e=require("react");const n=({variant:n,size:t,onClick:a,children:i,icon:l,iconPosition:s,className:r,style:c,processing:o})=>{let d=`btn ${r}`;"default"!==n&&(d+=` btn-${n}`),"md"!==t&&(d+=` btn-${t}`),"default"!==c&&(d+=` btn-${c}`),o&&(d+=" btn-processing");const m=o?e.createElement(e.Fragment,null,e.createElement("i",{className:"fa-solid fa-spinner-third fa-spin","aria-hidden":"true"}),i&&e.createElement("span",null,i,"…")):l?"end"===s?e.createElement(e.Fragment,null,i&&e.createElement("span",null,i),e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"})):e.createElement(e.Fragment,null,e.createElement("i",{className:`fa-solid ${l}`,"aria-hidden":"true"}),i&&e.createElement("span",null,i)):i&&e.createElement("span",null,i);return e.createElement("button",{className:d,onClick:a},m)};n.propTypes={variant:(void 0)(["primary","secondary","terciary","outline"]),size:(void 0)(["xs","md","lg"]),onClick:void 0,children:void 0,icon:void 0,iconPosition:(void 0)(["start","end"]),className:void 0,style:(void 0)(["default","success","danger","warning","link"]),processing:void 0},n.defaultProps={variant:"primary",size:"md",onClick:null,icon:null,iconPosition:"start",className:"",style:"default",processing:!1},exports.Button=n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "groovinads-ui",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "repository": "git@bitbucket.org:groovinads/react-components.git",
@@ -29,8 +29,10 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.72.0",
     "storybook": "^8.0.4",
+    "typescript": "^5.4.4",
     "vite": "^5.2.2"
   },
   "peerDependencies": {

package/rollup.config.mjs

@@ -3,6 +3,7 @@ import resolve from '@rollup/plugin-node-resolve';
 import external from 'rollup-plugin-peer-deps-external';
 import { terser } from 'rollup-plugin-terser';
 import postcss from 'rollup-plugin-postcss';
+import typescript from 'rollup-plugin-typescript2';
 
 export default [
   {
@@ -28,7 +29,8 @@ export default [
         presets: ['@babel/preset-react']
       }),
       external(),
-      resolve({extensions: ['.mjs', '.js', '.jsx', '.json']}),
+      typescript(), // Añade esto para procesar archivos TypeScript
+      resolve({extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json']}),
       terser(),
     ]
   }

package/src/components/Button/Button.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+
+type ButtonProps = {
+	variant?: 'primary' | 'secondary' | 'terciary' | 'outline';
+	size?: 'xs' | 'md' | 'lg';
+	onClick?: () => void;
+	children: React.ReactNode;
+	icon?: string | undefined;
+	iconPosition?: 'start' | 'end';
+	className?: string;
+	style?: 'default' | 'success' | 'danger' | 'warning' | 'link';
+	processing?: boolean;
+}
+  
+  const Button = ({
+	variant = 'primary',
+	size = 'md',
+	onClick = () => {},
+	children = null,
+	icon,
+	iconPosition = 'start',
+	className = '',
+	style = 'default',
+	processing = false,
+  }: ButtonProps) => {
+	let classes = `btn ${className}`;
+
+	// Variant
+	if (variant !== 'primary') {
+		classes += ` btn-${variant}`;
+	}
+
+	// Size
+	if (size !== 'md') {
+		classes += ` btn-${size}`;
+	}
+
+	// Style
+	if (style !== 'default') {
+		classes += ` btn-${style}`;
+	}
+
+	// Processing
+	if (processing) {
+		classes += ` btn-processing`;
+	}
+
+	// Icon
+    const content = processing ? (
+        <>
+            <i className='fa-solid fa-spinner-third fa-spin' aria-hidden='true'></i>
+            {children && <span>{children}…</span>}
+        </>
+    ) : icon ? (
+        iconPosition === 'end' ? (
+            <>
+                {children && <span>{children}</span>}
+                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+            </>
+        ) : (
+            <>
+                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
+                {children && <span>{children}</span>}
+            </>
+        )
+    ) : (
+        children && <span>{children}</span>
+    );
+
+	return (
+		<button className={classes} onClick={onClick}>
+			{content}
+		</button>
+	);
+};
+
+
+export default Button;

package/src/components/Button/Button.jsx

@@ -1,104 +0,0 @@
-/* import React from 'react';
-
-//STYLES
-//import 'https://brands.groovinads.com/css/scss/components/_buttons.scss';
-
-const Button = ({ children, ...props }) => {
-	return <button {...props}>{children}</button>;
-}
-
-export default Button;
- */
-
-import React from 'react';
-// import PropTypes from 'prop-types';
-
-// STYLES
-import '../../scss/components/_buttons.scss';
-
-const Button = ({
-	variant,
-	size,
-	onClick,
-	children,
-	icon,
-	iconPosition,
-	className,
-	style,
-	processing,
-}) => {
-	let classes = `btn ${className}`;
-
-	// Variant
-	if (variant !== 'default') {
-		classes += ` btn-${variant}`;
-	}
-
-	// Size
-	if (size !== 'md') {
-		classes += ` btn-${size}`;
-	}
-
-	// Style
-	if (style !== 'default') {
-		classes += ` btn-${style}`;
-	}
-
-	// Processing
-	if (processing) {
-		classes += ` btn-processing`;
-	}
-
-	// Icon
-    const content = processing ? (
-        <>
-            <i className='fa-solid fa-spinner-third fa-spin' aria-hidden='true'></i>
-            {children && <span>{children}…</span>}
-        </>
-    ) : icon ? (
-        iconPosition === 'end' ? (
-            <>
-                {children && <span>{children}</span>}
-                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
-            </>
-        ) : (
-            <>
-                <i className={`fa-solid ${icon}`} aria-hidden='true'></i>
-                {children && <span>{children}</span>}
-            </>
-        )
-    ) : (
-        children && <span>{children}</span>
-    );
-
-	return (
-		<button className={classes} onClick={onClick}>
-			{content}
-		</button>
-	);
-};
-
-// Button.propTypes = {
-// 	variant: PropTypes.oneOf(['primary', 'secondary', 'terciary', 'outline']),
-// 	size: PropTypes.oneOf(['xs', 'md', 'lg']),
-// 	onClick: PropTypes.func,
-// 	children: PropTypes.node,
-// 	icon: PropTypes.node,
-// 	iconPosition: PropTypes.oneOf(['start', 'end']),
-// 	className: PropTypes.string,
-// 	style: PropTypes.oneOf(['default', 'success', 'danger', 'warning', 'link']),
-// 	processing: PropTypes.bool,
-// };
-
-// Button.defaultProps = {
-// 	variant: 'primary',
-// 	size: 'md',
-// 	onClick: null,
-// 	icon: null,
-// 	iconPosition: 'start',
-// 	className: '',
-// 	style: 'default',
-// 	processing: false,
-// };
-
-export default Button;

package/src/scss/abstracts/_borders-radius.scss

@@ -1,6 +0,0 @@
-// Borders radius
-$border-radius-xs: 0.1875rem;
-$border-radius-sm: 0.375rem;
-$border-radius-md: 0.5rem;
-$border-radius-lg: 0.75rem;
-$border-radius-xl: 1rem;

package/src/scss/abstracts/_colors.scss

@@ -1,33 +0,0 @@
-// Groovinads colors
-$ga-brand-dark: #00004b;
-$ga-brand-midtone: #3930b1;
-$ga-brand-light: #24b8ce;
-
-// Neutrals
-$grey-dark: #767676;
-$grey-light: #efefef;
-$white: #ffffff;
-$black: #000000;
-
-// Secondary colors
-$secondary-blue-light: #2d85e5;
-$secondary-blue: #12355b;
-$secondary-violet-light: #9191db;
-$secondary-violet: #746ec8;
-$secondary-dark: #091a12;
-
-// Messaging
-$error: #e63137;
-$warning: #f3a905;
-$safeWarning: #aa5509;
-$warning-bg: #FEEDC6;
-$success: #5bbb84;
-$safeSuccess: #31754e;
-$success-bg: #D6EEE0;
-
-// Brands
-$linkedin-brand: #1877f2;
-$facebook-brand: #0077B5;
-$microsoft-font: #5e5e5e;
-$microsoft-border: #8c8c8c;
-$google-brand: #70757a;

package/src/scss/abstracts/_fonts.scss

@@ -1,8 +0,0 @@
-// Fonts family
-$font-family-primary: 'Baloo 2';
-$font-family-secondary: 'Roboto';
-$font-family-code: 'Roboto Mono';
-$font-family-icon: 'Font Awesome 6 Pro';
-
-// Font size
-$font-size: 16px;

package/src/scss/abstracts/_helpers.scss

@@ -1,7 +0,0 @@
-@forward 'variables';
-@forward 'fonts';
-@forward 'borders-radius';
-@forward 'media-queries';
-@forward 'colors';
-@forward 'mixins';
-@forward 'spinner-duration';

package/src/scss/abstracts/_media-queries.scss

@@ -1,6 +0,0 @@
-// Media Queries
-$xxl: '(min-width: 1400px)';
-$xl: '(min-width: 1200px)';
-$lg: '(min-width: 992px)';
-$md: '(min-width: 768px)';
-$sm: '(min-width: 576px)';

package/src/scss/abstracts/_mixins.scss

@@ -1,143 +0,0 @@
-@use 'fonts' as f;
-@use 'borders-radius' as br;
-
-@mixin font-family($font_family, $font_size, $font_color, $font_weight) {
-	@if $font_family == f.$font-family-primary {
-		font-family: f.$font-family-primary, sans-serif;
-	}
-
-	@if $font_family == f.$font-family-secondary {
-		font-family: f.$font-family-secondary, sans-serif;
-	}
-
-	@if $font_family == f.$font-family-code {
-		font-family: f.$font-family-code, monospace;
-	}
-
-	font: {
-		size: $font_size;
-		weight: $font_weight;
-	}
-	color: $font_color;
-}
-
-@mixin transition($properties, $duration, $easing) {
-	$value: ();
-	@each $property in $properties {
-		@if length($value) > 0 {
-			$value: append($value, unquote(',') #{$property} $duration $easing);
-		} @else {
-			$value: append($value, #{$property} $duration $easing);
-		}
-	}
-	transition: $value;
-}
-
-@mixin respond-to($media) {
-	@media #{$media} {
-		@content;
-	}
-}
-
-@mixin shadow($depth, $color, $direction) {
-	@if $depth == 1 {
-		@if $direction != x {
-			box-shadow: 0px 1px 1px rgba($color, 0.25),
-				0px 1px 3px 1px rgba($color, 0.2);
-		} @else {
-			box-shadow: 1px 0px 1px rgba($color, 0.25),
-				1px 0px 3px 1px rgba($color, 0.2);
-		}
-	}
-
-	@if $depth == 2 {
-		@if $direction != x {
-			box-shadow: 0 10px 20px rgba($color, 0.19), 0px 6px 6px rgba($color, 0.23);
-		} @else {
-			box-shadow: 10px 0px 20px rgba($color, 0.19),
-				6px 0px 6px rgba($color, 0.23);
-		}
-	}
-
-	@if $depth == 3 {
-		@if $direction != x {
-			box-shadow: 0px 14px 28px rgba($color, 0.25),
-				0px 10px 10px rgba($color, 0.22);
-		} @else {
-			box-shadow: 14px 0px 28px rgba($color, 0.25),
-				10px 0px 10px rgba($color, 0.22);
-		}
-	}
-
-	@if $depth == 4 {
-		@if $direction != x {
-			box-shadow: 0px 19px 38px rgba($color, 0.3),
-				0px 15px 12px rgba($color, 0.22);
-		} @else {
-			box-shadow: 19px 0px 38px rgba($color, 0.3),
-				15px 0px 12px rgba($color, 0.22);
-		}
-	}
-}
-
-@mixin scrollbars(
-	$size,
-	$foreground-color,
-	$background-color: mix($foreground-color, white, 50%)
-) {
-	// For Google Chrome
-	&::-webkit-scrollbar {
-		width: $size;
-		height: $size;
-	}
-
-	&::-webkit-scrollbar-thumb {
-		background: $foreground-color;
-		border-radius: br.$border-radius-sm;
-		@include transition(background-color, 0.15s, ease-in-out);
-
-		&:hover {
-			background-color: mix($foreground-color, black, 75%);
-		}
-	}
-
-	&::-webkit-scrollbar-track {
-		background: $background-color;
-		padding: 10px;
-	}
-
-	// For Internet Explorer
-	& {
-		scrollbar-face-color: $foreground-color;
-		scrollbar-track-color: $background-color;
-	}
-}
-
-@mixin multipleEllipsisText($lineCount, $maxHeight, $lineHeight) {
-	max-height: $maxHeight;
-	-webkit-line-clamp: $lineCount;
-	-moz-line-clamp: $lineCount;
-	-ms-line-clamp: $lineCount;
-	line-clamp: $lineCount;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	line-height: $lineHeight;
-	display: -webkit-box;
-	-webkit-box-orient: vertical;
-	word-break: break-word;
-}
-
-@mixin simpleEllipsisText {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-@mixin setLabelTo($properties) {
-	transform: nth($properties, 1) nth($properties, 2) nth($properties, 3);
-	padding: nth($properties, 4) nth($properties, 5);
-}
-
-@function commonTextShadow($color) {
-	@return 2px 2px 1px $color, 2px -2px 1px $color, -2px 2px 1px $color, -2px -2px 1px $color, 2px 0px 1px $color, 0px 2px 1px $color, -2px 0px 1px $color, 0px -2px 1px $color;
-}

package/src/scss/abstracts/_spinner-duration.scss

@@ -1 +0,0 @@
-$spinner-duration: 0.75s;

package/src/scss/abstracts/_variables.scss

@@ -1,2 +0,0 @@
-// App logo
-$logo-width: 114px;

package/src/scss/animations/_alertToUp.scss

@@ -1,10 +0,0 @@
-@keyframes alertToUp {
-    0% {
-        transform: translate3d(0,-100%,0);
-        visibility: visible;
-    }
-
-    to {
-        transform: translateZ(0);
-    }
-}

package/src/scss/animations/_aurora.scss

@@ -1,17 +0,0 @@
-@keyframes aurora {
-	0% {
-		background-position: left top;
-	}
-	25% {
-		background-position: right top;
-	}
-	50% {
-		background-position: right bottom;
-	}
-	75% {
-		background-position: left bottom;
-	}
-	100% {
-		background-position: left top;
-	}
-}

package/src/scss/animations/_colors.scss

@@ -1,15 +0,0 @@
-//Use
-@use '../abstracts/helpers' as h;
-
-@keyframes colors {
-	0%,
-	100% {
-		stroke: h.$secondary-blue-light;
-	}
-	25% {
-		stroke: h.$ga-brand-light;
-	}
-	75% {
-		stroke: h.$ga-brand-midtone;
-	}
-}

package/src/scss/animations/_dash.scss

@@ -1,13 +0,0 @@
-@keyframes dash {
-	0% {
-		stroke-dashoffset: 187;
-	}
-	50% {
-		stroke-dashoffset: 46.75;
-		transform: rotate(135deg);
-	}
-	100% {
-		stroke-dashoffset: 187;
-		transform: rotate(450deg);
-	}
-}

package/src/scss/animations/_fadeCopyFromLeft.scss

@@ -1,10 +0,0 @@
-@keyframes fadeCopyFromLeft {
-	0% {
-		opacity: 0;
-		transform: translateX(0) translateY(-50%);
-	}
-	100% {
-		opacity: 1;
-		transform: translateX(0) translateY(20%);
-	}
-}

package/src/scss/animations/_goAndBack.scss

@@ -1,8 +0,0 @@
-@keyframes goAndBack {
-	0% {
-		transform: translateX(-100%);
-	}
-	100% {
-		transform: translate(100%);
-	}
-}

package/src/scss/animations/_inputUp.scss

@@ -1,10 +0,0 @@
-@keyframes inputUp {
-	0% {
-		opacity: 0;
-		transform: translateY(30%);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}

package/src/scss/animations/_shake.scss

@@ -1,22 +0,0 @@
-@keyframes shakeIt {
-	10%,
-	90% {
-		transform: translate3d(-2px, 0, 0);
-	}
-
-	20%,
-	80% {
-		transform: translate3d(4px, 0, 0);
-	}
-
-	30%,
-	50%,
-	70% {
-		transform: translate3d(-6px, 0, 0);
-	}
-
-	40%,
-	60% {
-		transform: translate3d(6px, 0, 0);
-	}
-}

package/src/scss/animations/_showIn.scss

@@ -1,8 +0,0 @@
-@keyframes showIn {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
-}