@pelcro/react-pelcro-js 2.4.0 → 2.6.0-beta.11

package/dist/pelcro.css

@@ -648,6 +648,10 @@ Add the correct display in Chrome and Safari.
   --plc-primary-lightness: 44%;
 }
 
+.grecaptcha-badge {
+  visibility: hidden;
+}
+
 /* sub-components and components */
 
 .pelcro-root .pelcro-badge-wrapper {
@@ -759,6 +763,19 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .pelcro-modal-close {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-modal-close:hover {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-modal-close:focus {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-modal-close {
+  border-width: 0px;
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
@@ -779,6 +796,11 @@ Add the correct display in Chrome and Safari.
   color: rgba(0, 0, 0, var(--tw-text-opacity));
 }
 
+.pelcro-root .pelcro-modal-close:focus {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
+
 .pelcro-root .pelcro-modal-close {
   width: 1.5rem;
   z-index: 999999;
@@ -933,6 +955,10 @@ Add the correct display in Chrome and Safari.
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
 }
 
+.pelcro-root .pelcro-button-solid:focus {
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
+}
+
 .pelcro-root .pelcro-button-solid:disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
@@ -940,6 +966,7 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .pelcro-button-solid {
   border-radius: 0.25rem;
+  border-width: 0px;
 }
 
 .pelcro-root .pelcro-button-solid:disabled {
@@ -981,6 +1008,24 @@ Add the correct display in Chrome and Safari.
 .pelcro-root .pelcro-button-solid {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.pelcro-root .pelcro-button-solid:hover {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.pelcro-root .pelcro-button-solid:focus {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.pelcro-root .pelcro-button-solid:disabled {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
+.pelcro-root .pelcro-button-solid {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   width: max-content;
@@ -994,6 +1039,10 @@ Add the correct display in Chrome and Safari.
   background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
 }
 
+.pelcro-root .pelcro-button-outline:focus {
+  background-color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 10%));
+}
+
 .pelcro-root .pelcro-button-outline:disabled {
   background-color: transparent;
 }
@@ -1057,6 +1106,11 @@ Add the correct display in Chrome and Safari.
   color: rgba(255, 255, 255, var(--tw-text-opacity));
 }
 
+.pelcro-root .pelcro-button-outline:focus {
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+}
+
 .pelcro-root .pelcro-button-outline:disabled {
   --tw-text-opacity: 1;
   color: rgba(107, 114, 128, var(--tw-text-opacity));
@@ -1075,6 +1129,7 @@ Add the correct display in Chrome and Safari.
 
 .pelcro-root .pelcro-button-icon {
   border-radius: 9999px;
+  border-width: 0px;
 }
 
 .pelcro-root .pelcro-button-icon:disabled {
@@ -1128,12 +1183,18 @@ Add the correct display in Chrome and Safari.
   background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
 }
 
+.pelcro-root .pelcro-button-ghost:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
+}
+
 .pelcro-root .pelcro-button-ghost:disabled {
   background-color: transparent;
 }
 
 .pelcro-root .pelcro-button-ghost {
   border-radius: 0.5rem;
+  border-width: 0px;
 }
 
 .pelcro-root .pelcro-button-ghost:disabled {
@@ -1176,6 +1237,16 @@ Add the correct display in Chrome and Safari.
   color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
+.pelcro-root .pelcro-button-ghost:hover {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
+.pelcro-root .pelcro-button-ghost:focus {
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+}
+
 .pelcro-root .pelcro-button-ghost:disabled {
   --tw-text-opacity: 1;
   color: rgba(209, 213, 219, var(--tw-text-opacity));
@@ -1300,8 +1371,33 @@ Add the correct display in Chrome and Safari.
 }
 
 .pelcro-root .pelcro-alert-close {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-alert-close:hover {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-alert-close:focus {
+  background-color: transparent;
+}
+
+.pelcro-root .pelcro-alert-close {
+  border-width: 0px;
   flex-shrink: 0;
   fill: currentColor;
+  color: currentColor;
+}
+
+.pelcro-root .pelcro-alert-close:hover {
+  color: currentColor;
+}
+
+.pelcro-root .pelcro-alert-close:focus {
+  color: currentColor;
+}
+
+.pelcro-root .pelcro-alert-close {
   width: 1rem;
 }
 
@@ -1724,11 +1820,25 @@ in order to scope selectors under pelcro-root
   background-color: rgba(209, 250, 229, var(--tw-bg-opacity));
 }
 
+.pelcro-root .plc-bg-blue-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgba(219, 234, 254, var(--tw-bg-opacity));
+}
+
 .pelcro-root .plc-bg-orange-100 {
   --tw-bg-opacity: 1;
   background-color: rgba(255, 237, 213, var(--tw-bg-opacity));
 }
 
+.pelcro-root .hover\:plc-bg-transparent:hover {
+  background-color: transparent;
+}
+
+.pelcro-root .hover\:plc-bg-white:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+
 .pelcro-root .hover\:plc-bg-gray-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(249, 250, 251, var(--tw-bg-opacity));
@@ -1759,6 +1869,10 @@ in order to scope selectors under pelcro-root
   background-color: rgba(139, 37, 33, var(--tw-bg-opacity));
 }
 
+.pelcro-root .focus\:plc-bg-transparent:focus {
+  background-color: transparent;
+}
+
 .pelcro-root .disabled\:plc-bg-gray-400:disabled {
   --tw-bg-opacity: 1;
   background-color: rgba(156, 163, 175, var(--tw-bg-opacity));
@@ -2099,6 +2213,10 @@ in order to scope selectors under pelcro-root
   margin-right: 0.25rem;
 }
 
+.pelcro-root .plc-mb-1 {
+  margin-bottom: 0.25rem;
+}
+
 .pelcro-root .plc-ml-1 {
   margin-left: 0.25rem;
 }
@@ -2544,6 +2662,11 @@ in order to scope selectors under pelcro-root
   color: rgba(96, 165, 250, var(--tw-text-opacity));
 }
 
+.pelcro-root .plc-text-blue-700 {
+  --tw-text-opacity: 1;
+  color: rgba(29, 78, 216, var(--tw-text-opacity));
+}
+
 .pelcro-root .plc-text-orange-700 {
   --tw-text-opacity: 1;
   color: rgba(194, 65, 12, var(--tw-text-opacity));
@@ -2561,6 +2684,11 @@ in order to scope selectors under pelcro-root
   color: hsl(var(--plc-primary-hue), var(--plc-primary-saturation), calc(var(--plc-primary-lightness) - 20%));
 }
 
+.pelcro-root .hover\:plc-text-black:hover {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
+
 .pelcro-root .hover\:plc-text-white:hover {
   --tw-text-opacity: 1;
   color: rgba(255, 255, 255, var(--tw-text-opacity));
@@ -2571,6 +2699,11 @@ in order to scope selectors under pelcro-root
   color: rgba(107, 114, 128, var(--tw-text-opacity));
 }
 
+.pelcro-root .focus\:plc-text-black:focus {
+  --tw-text-opacity: 1;
+  color: rgba(0, 0, 0, var(--tw-text-opacity));
+}
+
 .pelcro-root .plc-truncate {
   overflow: hidden;
   text-overflow: ellipsis;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "2.4.0",
+  "version": "2.6.0-beta.11",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",
@@ -59,7 +59,6 @@
     "browserslist": "^4.16.3",
     "cross-env": "^7.0.3",
     "css-loader": "^3.2.0",
-    "cssimportant-loader": "^0.4.0",
     "cz-conventional-changelog": "3.3.0",
     "eslint": "^7.19.0",
     "eslint-config-google": "^0.14.0",
@@ -74,7 +73,6 @@
     "html-webpack-plugin": "^3.2.0",
     "image-webpack-loader": "^7.0.1",
     "jest": "^26.6.3",
-    "node-sass": "^4.14.1",
     "postcss": "^8.2.4",
     "postcss-import": "^14.0.0",
     "postcss-loader": "4.2.0",
@@ -92,7 +90,6 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-visualizer": "^4.2.0",
-    "sass-loader": "^7.1.0",
     "semantic-release": "^17.4.4",
     "simple-zustand-devtools": "^1.0.0",
     "style-loader": "^2.0.0",
@@ -104,6 +101,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^0.3.0",
+    "@stripe/stripe-js": "^1.21.1",
     "i18next": "^19.1.0",
     "react-easy-crop": "^3.3.2",
     "react-facebook-login": "^4.1.1",