@lockerverse/react 0.2.69 → 0.2.70

package/dist/styles.css

@@ -1,3 +1,5 @@
+@import "./form-ui.css";
+
 .lockerverse-payment {
   --lockerverse-accent: #38d77a;
   --lockerverse-accent-contrast: #000;
@@ -298,16 +300,6 @@
   margin-top: 4px;
 }
 
-.lockerverse-payment label:not(.lockerverse-payment__check-row),
-.lockerverse-payment__field,
-.lockerverse-payment fieldset {
-  display: grid;
-  gap: 8px;
-}
-
-.lockerverse-payment label > span,
-.lockerverse-payment .lockerverse-payment__field > span,
-.lockerverse-payment legend,
 .lockerverse-payment h2 {
   font-size: 14px;
   font-weight: 500;
@@ -320,81 +312,18 @@
   color: var(--lockerverse-text);
 }
 
-.lockerverse-payment fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]),
-.lockerverse-payment select,
-.lockerverse-payment textarea {
-  width: 100%;
-  min-height: 48px;
-  padding: 11px 13px;
-  font: inherit;
-  font-size: 16px;
-  line-height: 1.5;
-  color: var(--lockerverse-text);
-  appearance: none;
-  outline: none;
-  background-color: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-border);
-  border-radius: var(--lockerverse-radius);
-  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
-  transition:
-    border-color 140ms ease,
-    box-shadow 140ms ease;
-}
-
-.lockerverse-payment select {
-  padding-right: 38px;
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentcolor 50%),
-    linear-gradient(135deg, currentcolor 50%, transparent 50%);
-  background-repeat: no-repeat;
-  background-position:
-    calc(100% - 17px) calc(50% - 2px),
-    calc(100% - 12px) calc(50% - 2px);
-  background-size:
-    5px 5px,
-    5px 5px;
-}
-
-.lockerverse-payment textarea {
-  min-height: 112px;
-  padding-top: 12px;
-  resize: vertical;
-}
-
-.lockerverse-payment input::placeholder,
-.lockerverse-payment textarea::placeholder {
-  color: var(--lockerverse-placeholder);
-  opacity: 1;
-}
-
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
 .lockerverse-payment__check-row input:focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
-.lockerverse-payment button:focus {
+.lockerverse-payment__select-trigger:focus {
   outline: none;
   border-color: var(--lockerverse-accent);
 }
 
-.lockerverse-payment input:not([type="checkbox"]):not([type="radio"]):focus,
-.lockerverse-payment select:focus,
-.lockerverse-payment textarea:focus,
 .lockerverse-payment__select-trigger:focus {
   box-shadow: 0 0 0 1px var(--lockerverse-accent);
 }
 
-.lockerverse-payment
-  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
 .lockerverse-payment__check-row input:focus-visible,
-.lockerverse-payment select:focus-visible,
-.lockerverse-payment textarea:focus-visible,
-.lockerverse-payment button:focus-visible {
+.lockerverse-payment__select-trigger:focus-visible {
   box-shadow: 0 0 0 2px
     color-mix(in srgb, var(--lockerverse-accent) 24%, transparent);
 }
@@ -817,7 +746,7 @@
   height: 36px;
   background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
   border-radius: 6px;
-  animation: lockerverse-pulse 1.5s ease-in-out infinite;
+  animation: lockerverse-form-pulse 1.5s ease-in-out infinite;
 }
 
 .lockerverse-payment__stripe-loader span:first-child {
@@ -837,128 +766,6 @@
   clip: rect(0, 0, 0, 0);
 }
 
-.lockerverse-payment__skeleton {
-  display: grid;
-  gap: 16px;
-}
-
-.lockerverse-payment__skeleton-branding {
-  display: flex;
-  gap: 14px;
-  align-items: center;
-}
-
-.lockerverse-payment__skeleton-avatar,
-.lockerverse-payment__skeleton-community,
-.lockerverse-payment__skeleton-label,
-.lockerverse-payment__skeleton-input,
-.lockerverse-payment__skeleton-loader-label,
-.lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half,
-.lockerverse-payment__skeleton-check-line,
-.lockerverse-payment__skeleton-button {
-  display: block;
-  background: color-mix(in srgb, var(--lockerverse-text) 8%, transparent);
-  animation: lockerverse-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.lockerverse-payment__skeleton-avatar {
-  flex: none;
-  width: 48px;
-  height: 48px;
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-community {
-  width: 176px;
-  height: 20px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-contact {
-  display: grid;
-  gap: 12px;
-  padding-top: 14px;
-  border-top: 1px solid var(--lockerverse-subtle);
-}
-
-.lockerverse-payment__skeleton-field {
-  display: grid;
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-label {
-  width: 48px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-input {
-  width: 100%;
-  height: 48px;
-  background: var(--lockerverse-control);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-loader-block {
-  padding: 12px;
-  background: color-mix(in srgb, var(--lockerverse-text) 2.5%, transparent);
-  border: 1px solid var(--lockerverse-subtle);
-  border-radius: var(--lockerverse-radius);
-}
-
-.lockerverse-payment__skeleton-loader-label {
-  width: 144px;
-  height: 16px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-loader-content {
-  display: grid;
-  gap: 8px;
-  margin-top: 12px;
-}
-
-.lockerverse-payment__skeleton-loader-full,
-.lockerverse-payment__skeleton-loader-half {
-  height: 36px;
-  border-radius: 6px;
-}
-
-.lockerverse-payment__skeleton-loader-full {
-  background: color-mix(in srgb, var(--lockerverse-text) 6%, transparent);
-}
-
-.lockerverse-payment__skeleton-loader-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.lockerverse-payment__skeleton-loader-half {
-  background: color-mix(in srgb, var(--lockerverse-text) 4.5%, transparent);
-}
-
-.lockerverse-payment__skeleton-actions {
-  display: grid;
-  gap: 16px;
-  padding: 20px 0 4px;
-}
-
-.lockerverse-payment__skeleton-check-line {
-  width: min(256px, 70%);
-  height: 20px;
-  border-radius: 4px;
-}
-
-.lockerverse-payment__skeleton-button {
-  width: 100%;
-  height: 48px;
-  background: color-mix(in srgb, var(--lockerverse-text) 12%, transparent);
-  border-radius: var(--lockerverse-radius);
-}
-
 .lockerverse-payment button[type="submit"] {
   width: 100%;
   min-height: 48px;
@@ -1003,12 +810,6 @@
   display: none;
 }
 
-@keyframes lockerverse-pulse {
-  50% {
-    opacity: 0.55;
-  }
-}
-
 @container (max-width: 360px) {
   .lockerverse-payment__tip-box [role="radiogroup"] {
     grid-template-columns: repeat(6, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lockerverse/react",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "description": "Tree-shakable React payment and signup UI for Lockerverse",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
     "directory": "packages/react"
   },
   "sideEffects": [
+    "./dist/form-ui.css",
     "./dist/styles.css",
     "./dist/signup.css"
   ],