@layerfi/components 0.1.89-alpha → 0.1.91-alpha

package/dist/index.css

@@ -16,19 +16,19 @@
 #Layer__datepicker__portal {
   --color-black: #1a1a1a;
   --color-white: white;
-  --color-blue: hsl(217 100% 92%);
+  --color-blue: hsl(217deg 100% 92%);
   --color-info: #0968f8;
   --color-info-bg: #d6e6ff;
   --color-info-fg: #0056d7;
-  --color-info-success: hsl(145, 45%, 42%);
-  --color-info-success-bg: hsl(145, 59%, 86%);
-  --color-info-success-fg: hsl(145, 63%, 29%);
-  --color-info-warning: hsl(43, 100%, 44%);
-  --color-info-warning-bg: hsl(43, 100%, 84%);
-  --color-info-warning-fg: hsl(43, 88%, 26%);
-  --color-info-error: hsl(0 76% 50%);
-  --color-info-error-bg: hsl(0 83% 86%);
-  --color-info-error-fg: hsl(0 88% 32%);
+  --color-info-success: hsl(145deg 45% 42%);
+  --color-info-success-bg: hsl(145deg 59% 86%);
+  --color-info-success-fg: hsl(145deg 63% 29%);
+  --color-info-warning: hsl(43deg 100% 44%);
+  --color-info-warning-bg: hsl(43deg 100% 84%);
+  --color-info-warning-fg: hsl(43deg 88% 26%);
+  --color-info-error: hsl(0deg 76% 50%);
+  --color-info-error-bg: hsl(0deg 83% 86%);
+  --color-info-error-fg: hsl(0deg 88% 32%);
   --color-dark-h: 0;
   --color-dark-s: 0%;
   --color-dark-l: 7%;
@@ -50,23 +50,23 @@
   --color-base-900: var(--color-dark);
   --color-base-1000: hsl(var(--color-dark-h) 20% 7%);
   --max-component-width: 1408px;
-  --base-transparent-1: hsla(220, 43%, 11%, 0.01);
-  --base-transparent-2: hsla(220, 43%, 11%, 0.02);
-  --base-transparent-4: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.04 );
-  --base-transparent-5: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.05 );
-  --base-transparent-6: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.06 );
-  --base-transparent-8: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.08 );
-  --base-transparent-10: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.1 );
-  --base-transparent-12: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.12 );
-  --base-transparent-16: hsla( var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), 0.16 );
-  --base-transparent-16-light: hsla( var(--color-light-h), var(--color-light-s), var(--color-light-l), 0.16 );
+  --base-transparent-1: hsl(220deg 43% 11% / 1%);
+  --base-transparent-2: hsl(220deg 43% 11% / 2%);
+  --base-transparent-4: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 4% );
+  --base-transparent-5: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 5% );
+  --base-transparent-6: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 6% );
+  --base-transparent-8: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 8% );
+  --base-transparent-10: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 10% );
+  --base-transparent-12: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 12% );
+  --base-transparent-16: hsl( var(--color-dark-h) var(--color-dark-s) var(--color-dark-l) / 16% );
+  --base-transparent-16-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) / 16% );
   --color-primary: var(--color-dark);
   --color-accent: var(--color-light);
   --color-secondary: var(--color-base);
   --color-success: var(--color-info-success);
   --color-danger: var(--color-info-error);
-  --color-danger-dark: hsl(349, 30%, 30%);
-  --color-danger-light: hsla( var(--color-info-error-h), var(--color-info-error-s), var(--color-info-error-l), 0.4 );
+  --color-danger-dark: hsl(349deg 30% 30%);
+  --color-danger-light: hsl( var(--color-info-error-h) var(--color-info-error-s) var(--color-info-error-l) / 40% );
   --text-color-primary: var(--color-dark);
   --text-color-secondary: var(--color-base-600);
   --bg-element-focus: var(--color-base-50);
@@ -87,6 +87,7 @@
   --text-heading-page: var(--text-heading);
   --text-heading-view: var(--text-heading-secondary);
   --text-heading-sm: 16px;
+  --text-heading-xs: 14px;
   --font-weight-normal: 460;
   --font-weight-bold: 540;
   --spacing-4xs: 2px;
@@ -1065,7 +1066,7 @@
 .Layer__datepicker__wrapper,
 #Layer__datepicker__portal {
   position: relative;
-  z-index: 101;
+  z-index: 105;
   display: inline-flex;
   align-items: center;
   max-height: 36px;
@@ -1095,6 +1096,10 @@
   box-shadow: none;
   border-left: 1px solid var(--input-border-color);
 }
+.Layer__datepicker__wrapper .Layer__datepicker__next-button .Layer__btn-text,
+#Layer__datepicker__portal .Layer__datepicker__next-button .Layer__btn-text {
+  position: relative;
+}
 .Layer__datepicker__wrapper .Layer__datepicker__prev-button,
 #Layer__datepicker__portal .Layer__datepicker__prev-button {
   border-radius: 0;
@@ -1102,6 +1107,21 @@
   box-shadow: none;
   border-left: 1px solid var(--input-border-color);
 }
+.Layer__datepicker__wrapper .Layer__datepicker__prev-button .Layer__btn-text,
+#Layer__datepicker__portal .Layer__datepicker__prev-button .Layer__btn-text {
+  position: relative;
+}
+.Layer__datepicker__wrapper .Layer__datepicker__nav-arrow-highlight,
+#Layer__datepicker__portal .Layer__datepicker__nav-arrow-highlight {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-info-warning);
+  display: flex;
+  position: absolute;
+  top: -4px;
+  right: -5px;
+}
 .Layer__datepicker__wrapper .Layer__datepicker__current-button,
 #Layer__datepicker__portal .Layer__datepicker__current-button {
   border-top-left-radius: 0;
@@ -1143,7 +1163,7 @@
 #Layer__datepicker__portal .Layer__datepicker__popper {
   min-width: 275px;
   max-width: 275px;
-  z-index: 99;
+  z-index: 105;
   border-radius: 8px;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__popper.Layer__datepicker__time__popper,
@@ -2303,7 +2323,7 @@
   }
   #Layer__datepicker__portal .react-datepicker__portal {
     align-items: flex-end;
-    z-index: 99;
+    z-index: 105;
     background-color: rgba(36, 36, 36, 0);
     transition: all 180ms ease-in-out;
   }
@@ -2949,6 +2969,19 @@
     max-height: 36px;
   }
 }
+.Layer__datepicker__year-content {
+  position: relative;
+}
+.Layer__datepicker__date-dot {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: var(--color-info-warning);
+  right: -16px;
+  top: 50%;
+  transform: translateY(-50%);
+}
 .Layer__details-list {
   display: flex;
   flex-direction: column;
@@ -3678,16 +3711,40 @@
   padding: 0 calc(var(--spacing-xs) + 1px);
 }
 @media screen and (resolution >= 2dppx) {
+  .Layer__view .Layer__textarea,
+  .Layer__view .Layer__select__control,
+  .Layer__view .Layer__input,
   .Layer__component .Layer__textarea,
   .Layer__component .Layer__select__control,
   .Layer__component .Layer__input {
     font-size: 16px;
     min-height: 36px;
   }
+  .Layer__view .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control,
   .Layer__component .Layer__bank-transaction-list-item__expanded-row .Layer__select .Layer__select__control {
     min-height: 36px;
   }
 }
+.Layer__form .Layer__form-section {
+  padding: var(--spacing-xl) 0;
+}
+.Layer__form .Layer__form-section .Layer__form-section__title {
+  padding: 0 var(--spacing-2xs);
+}
+.Layer__form .Layer__form-section .Layer__input-group {
+  width: 100%;
+}
+.Layer__form .Layer__form-section .Layer__input {
+  width: 100%;
+}
+@container (width > 500px) {
+  .Layer__form .Layer__form-section > * {
+    max-width: 560px;
+  }
+}
+.Layer__form .Layer__form-section:not(:last-of-type) {
+  border-bottom: 1px solid var(--color-base-300);
+}
 .Layer__onboarding {
   transition:
     max-height 500ms ease-out,
@@ -4194,6 +4251,15 @@ tbody .Layer__table__empty-row:first-child {
   font-weight: var(--font-weight-bold);
   font-variation-settings: "wght" var(--font-weight-bold);
 }
+.Layer__heading--left {
+  align-self: flex-start;
+}
+.Layer__heading--center {
+  align-self: center;
+}
+.Layer__heading--right {
+  align-self: flex-end;
+}
 .Layer__text {
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
@@ -4278,33 +4344,17 @@ tbody .Layer__table__empty-row:first-child {
 }
 @keyframes rotating {
   from {
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
-    -ms-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }
 @keyframes rotating-ccw {
   from {
-    -ms-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   to {
-    -ms-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-    -webkit-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
     transform: rotate(-360deg);
   }
 }
@@ -4329,10 +4379,6 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__anim--rotating {
-  -webkit-animation: rotating 2s linear infinite;
-  -moz-animation: rotating 2s linear infinite;
-  -ms-animation: rotating 2s linear infinite;
-  -o-animation: rotating 2s linear infinite;
   animation: rotating 2s linear infinite;
 }
 @container (min-width: 1401px) {
@@ -4366,6 +4412,42 @@ tbody .Layer__table__empty-row:first-child {
     display: none;
   }
 }
+[data-pb="4xs"] {
+  padding-block: var(--spacing-4xs);
+}
+[data-pb="3xs"] {
+  padding-block: var(--spacing-3xs);
+}
+[data-pb="2xs"] {
+  padding-block: var(--spacing-2xs);
+}
+[data-pb=xs] {
+  padding-block: var(--spacing-xs);
+}
+[data-pb=sm] {
+  padding-block: var(--spacing-sm);
+}
+[data-pb=md] {
+  padding-block: var(--spacing-md);
+}
+[data-pb=lm] {
+  padding-block: var(--spacing-lm);
+}
+[data-pb=lg] {
+  padding-block: var(--spacing-lg);
+}
+[data-pb=xl] {
+  padding-block: var(--spacing-xl);
+}
+[data-pb="2xl"] {
+  padding-block: var(--spacing-2xl);
+}
+[data-pb="3xl"] {
+  padding-block: var(--spacing-3xl);
+}
+[data-pb="5xl"] {
+  padding-block: var(--spacing-5xl);
+}
 .Layer__view .Layer__view-main {
   padding: var(--spacing-lg);
   display: flex;
@@ -4754,8 +4836,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UI__Heading {
   all: unset;
-  color: var(--color-base-700);
+  color: var(--color-base-800);
   font-weight: var(--font-weight-bold);
+  font-variation-settings: "wght" var(--font-weight-bold);
   font-size: var(--text-heading-secondary);
   max-inline-size: 60rem;
   text-wrap: pretty;
@@ -4790,6 +4873,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-pbe="5xl"] {
   padding-block-end: var(--spacing-5xl);
 }
+.Layer__UI__Heading[data-size=xs] {
+  font-size: var(--text-heading-xs);
+}
 .Layer__UI__Heading[data-size=sm] {
   font-size: var(--text-heading-sm);
 }
@@ -4958,8 +5044,8 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-800);
 }
 .Layer__BasicLinkedAccountContainer {
-  padding-inline: var(--spacing-md);
-  padding-block: var(--spacing-sm);
+  padding-inline: var(--spacing-xs) var(--spacing-md);
+  padding-block: var(--spacing-xs);
   border: 1px solid var(--outline-subtle);
   border-radius: var(--border-radius-xs);
   display: grid;
@@ -4968,6 +5054,17 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__BasicLinkedAccountContainer[data-selected] {
   background-color: var(--bg-subtle);
 }
+.Layer__BasicLinkedAccountLogo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 28px;
+  padding: var(--spacing-3xs) 0;
+  background: var(--color-base-0);
+  color: var(--color-base-200);
+  border-radius: var(--border-radius-3xs);
+}
 .Layer__caobfb {
   padding-inline: var(--spacing-md);
   padding-block: var(--spacing-sm);
@@ -5206,6 +5303,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--label {
   padding-right: var(--spacing-lg);
+  white-space: nowrap;
 }
 .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--label p {
   position: relative;
@@ -5276,6 +5374,219 @@ tbody .Layer__table__empty-row:first-child {
     display: none;
   }
 }
+.Layer__business-form {
+  width: 100%;
+  max-width: 620px;
+}
+.Layer__business-form__name-fields {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+@container (width < 400px) {
+  .Layer__business-form__name-fields {
+    flex-direction: column;
+  }
+}
+.Layer__business-form__state-tin-fields {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+.Layer__business-form__state-tin-fields .Layer__business-form__state {
+  max-width: 200px;
+}
+@container (width < 400px) {
+  .Layer__business-form__state-tin-fields {
+    flex-direction: column;
+  }
+  .Layer__business-form__state-tin-fields .Layer__business-form__state {
+    max-width: 100%;
+  }
+}
+.Layer__platform-onboarding {
+  container-type: inline-size;
+}
+.Layer__platform-onboarding-layout {
+  position: relative;
+  box-sizing: border-box;
+  padding: var(--spacing-lg);
+}
+.Layer__platform-onboarding__back-button-container {
+  max-width: calc(672px + 2 * var(--spacing-xl));
+  margin: auto;
+  margin-bottom: var(--spacing-lg);
+  position: absolute;
+  top: var(--spacing-lg);
+  left: var(--spacing-lg);
+}
+@container (width < 969px) {
+  .Layer__platform-onboarding__back-button-container {
+    position: static;
+  }
+}
+.Layer__platfom-onboarding-layout__box {
+  padding: var(--spacing-xl);
+  max-width: 672px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-lg);
+  border-radius: var(--border-radius-xs);
+  background: var(--color-base-0);
+  box-shadow: 0 0 0 1px var(--base-transparent-4);
+  margin-bottom: var(--spacing-md);
+}
+@container (width < 500px) {
+  .Layer__platfom-onboarding-layout__box {
+    padding: var(--spacing-md);
+  }
+}
+.Layer__platform-onboarding-layout__footer {
+  padding: var(--spacing-lg) 0;
+  max-width: 1200px;
+  margin: auto;
+}
+@container (width < 500px) {
+  .Layer__platform-onboarding-layout__footer {
+    padding: var(--spacing-md) 0;
+  }
+}
+.Layer__platform-onboarding__welcome,
+.Layer__platform-onboarding__summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  max-width: 510px;
+  margin-bottom: var(--spacing-lg);
+}
+.Layer__platform-onboarding__welcome-footer__content {
+  max-width: 672px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-lg);
+  padding: 0 var(--spacing-xl);
+}
+@container (width < 500px) {
+  .Layer__platform-onboarding__welcome-footer__content {
+    padding: 0 var(--spacing-md);
+  }
+}
+.Layer__platform-onboarding__welcome-footer__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+.Layer__platform-onboarding__welcome-footer__images {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-lg);
+  align-items: flex-start;
+  max-width: 1200px;
+  margin: auto;
+  padding-top: var(--spacing-5xl);
+}
+@container (width < 640px) {
+  .Layer__platform-onboarding__welcome-footer__images {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+.Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image {
+  flex: 1;
+  max-width: 360px;
+}
+.Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2xl);
+  flex: 1 0 0;
+  border-radius: 12px;
+  box-shadow: 0 0 0 1px var(--base-transparent-4, rgba(16, 24, 40, 0.04));
+}
+.Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+.Layer__platform-onboarding__welcome-footer__images .Layer__platform-onboarding__welcome-footer__image .Layer__platform__onboarding__welcome-footer__image-text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: center;
+  padding: 36px 0;
+  max-width: 27ch;
+  margin: auto;
+  text-align: center;
+}
+.Layer__separator {
+  width: 100%;
+  height: 1px;
+  background-color: var(--color-base-300);
+}
+.Layer__separator[data-mbe="3xs"] {
+  margin-block-end: var(--spacing-3xs);
+}
+.Layer__separator[data-mbs="3xs"] {
+  margin-block-start: var(--spacing-3xs);
+}
+.Layer__separator[data-mbe="2xs"] {
+  margin-block-end: var(--spacing-2xs);
+}
+.Layer__separator[data-mbs="2xs"] {
+  margin-block-start: var(--spacing-2xs);
+}
+.Layer__separator[data-mbe=xs] {
+  margin-block-end: var(--spacing-xs);
+}
+.Layer__separator[data-mbs=xs] {
+  margin-block-start: var(--spacing-xs);
+}
+.Layer__separator[data-mbe=sm] {
+  margin-block-end: var(--spacing-sm);
+}
+.Layer__separator[data-mbs=sm] {
+  margin-block-start: var(--spacing-sm);
+}
+.Layer__separator[data-mbe=md] {
+  margin-block-end: var(--spacing-md);
+}
+.Layer__separator[data-mbs=md] {
+  margin-block-start: var(--spacing-md);
+}
+.Layer__separator[data-mbe=lg] {
+  margin-block-end: var(--spacing-lg);
+}
+.Layer__separator[data-mbs=lg] {
+  margin-block-start: var(--spacing-lg);
+}
+.Layer__separator[data-mbe=xl] {
+  margin-block-end: var(--spacing-xl);
+}
+.Layer__separator[data-mbs=xl] {
+  margin-block-start: var(--spacing-xl);
+}
+.Layer__separator[data-mbe="2xl"] {
+  margin-block-end: var(--spacing-2xl);
+}
+.Layer__separator[data-mbs="2xl"] {
+  margin-block-start: var(--spacing-2xl);
+}
+.Layer__separator[data-mbe="3xl"] {
+  margin-block-end: var(--spacing-3xl);
+}
+.Layer__separator[data-mbs="3xl"] {
+  margin-block-start: var(--spacing-3xl);
+}
+.Layer__separator[data-mbe="5xl"] {
+  margin-block-end: var(--spacing-5xl);
+}
+.Layer__separator[data-mbs="5xl"] {
+  margin-block-start: var(--spacing-5xl);
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;