@layerfi/components 0.1.124 → 0.1.126-alpha

package/dist/index.css

@@ -1156,6 +1156,7 @@
   flex: 1;
 }
 .Layer__Dialog[data-variant=drawer] {
+  block-size: 100%;
   padding: 0;
   border-radius: 0;
 }
@@ -1164,7 +1165,7 @@
   bottom: 0;
   overflow: hidden;
   block-size: auto;
-  max-block-size: 100%;
+  max-block-size: 80%;
   inline-size: 100%;
   padding: 0;
   border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
@@ -1175,6 +1176,9 @@
 .Layer__Dialog[data-variant=mobile-drawer][data-exiting] {
   animation: mobile-drawer-slide 250ms reverse ease-in;
 }
+.Layer__Dialog[data-variant=mobile-drawer][data-fixed] {
+  min-block-size: 80%;
+}
 .Layer__Dialog[data-variant=mobile-popover] {
   padding: 0;
 }
@@ -1626,17 +1630,6 @@
 }
 .Layer__ComboBoxPlaceholder--error {
   color: var(--color-danger);
-}.Layer__MoneySpan {
-  white-space: nowrap;
-}
-.Layer__MoneySpan[data-positive]::before {
-  content: "$";
-}
-.Layer__MoneySpan[data-negative]::before {
-  content: "-$";
-}
-.Layer__MoneySpan[data-display-plus-sign]::before {
-  content: "+$";
 }.Layer__datetime {
   display: inline-flex;
   gap: var(--spacing-md);
@@ -1699,7 +1692,7 @@
   border: 1px solid var(--color-info-success);
   background-color: var(--color-info-success-bg);
   color: var(--color-info-success);
-}.Layer__InputGroup {
+}.Layer__UI__InputGroup {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
@@ -1712,18 +1705,18 @@
   border: 1px solid var(--border-color);
   background-color: var(--color-base-0);
 }
-.Layer__InputGroup[data-focus-within], .Layer__InputGroup[data-focus-visible] {
+.Layer__UI__InputGroup[data-focus-within], .Layer__UI__InputGroup[data-focus-visible] {
   border-color: var(--color-base-800);
   outline: 2px solid var(--outline-default);
 }
-.Layer__InputGroup[data-invalid] {
+.Layer__UI__InputGroup[data-invalid] {
   border-color: var(--color-danger);
   outline: none;
 }
-.Layer__InputGroup[data-action-count="2"] {
+.Layer__UI__InputGroup[data-action-count="2"] {
   grid-template-columns: minmax(0, 1fr) auto auto;
 }
-.Layer__InputGroup[data-disabled] {
+.Layer__UI__InputGroup[data-disabled] {
   cursor: not-allowed;
 }.Layer__MinimalSearchField {
   display: grid;
@@ -1760,7 +1753,7 @@
 }
 .Layer__MinimalSearchField[data-disabled] > [slot=input] {
   cursor: not-allowed;
-}.Layer__SearchField.Layer__InputGroup {
+}.Layer__SearchField.Layer__UI__InputGroup {
   display: grid;
   grid-template-areas: "icon search";
   grid-template-columns: auto minmax(0, 1fr);
@@ -1768,15 +1761,15 @@
   padding-inline-start: 0;
   padding-inline-end: var(--spacing-3xs);
 }
-.Layer__SearchField.Layer__InputGroup > [slot=icon] {
+.Layer__SearchField.Layer__UI__InputGroup > [slot=icon] {
   grid-area: icon;
   block-size: 2rem;
   inline-size: 2rem;
 }
-.Layer__SearchField.Layer__InputGroup > [slot=search] {
+.Layer__SearchField.Layer__UI__InputGroup > [slot=search] {
   grid-area: search;
 }
-.Layer__SearchField.Layer__InputGroup .Layer__SearchField__Icon[data-disabled] {
+.Layer__SearchField.Layer__UI__InputGroup .Layer__SearchField__Icon[data-disabled] {
   cursor: not-allowed;
   color: var(--color-base-500);
 }.Layer__CategorySelectDrawerWithTrigger .Layer__UI__Button {
@@ -2683,6 +2676,9 @@
   border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
   border-top: 1px solid var(--color-base-400);
   background-color: var(--color-base-100);
+}.Layer__BankTransactionMemo .Layer__BankTransactionMemo__InputTextArea > .Layer__UI__InputGroup,
+.Layer__BankTransactionMemo .Layer__BankTransactionMemo__InputTextArea > .Layer__UI__TextArea {
+  width: 100%;
 }.Layer__TagDimensionsGroup__TagComboBox {
   width: 100%;
   min-width: 10rem;
@@ -3016,14 +3012,14 @@
   border: 1px solid var(--color-base-300);
 }.Layer__BusinessFormMobileItem[data-selected] {
   background: var(--color-base-100);
+}.Layer__MatchFormMobileItem__Checkbox {
+  padding-inline-end: var(--spacing-md);
 }.Layer__MatchFormMobile {
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);
 }
 .Layer__MatchFormMobile [data-selected] {
   background: var(--color-base-100);
-}.Layer__MatchFormMobileItem__Checkbox {
-  padding-inline-end: var(--spacing-md);
 }.Layer__BankTransactionsMobileSplitForm__SplitRow {
   max-inline-size: 100%;
 }
@@ -4082,277 +4078,6 @@
   flex-direction: column;
   gap: var(--spacing-md);
   container-type: inline-size;
-}.Layer__platform-onboarding__book-onboarding-call .Layer__platform-onboarding__error {
-  height: 6rem;
-}
-.Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget--success, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget--success {
-  height: 36rem;
-}
-.Layer__platform-onboarding__book-onboarding-call.is-tablet .Layer__calendly-inline-widget, .Layer__platform-onboarding__book-onboarding-call.is-desktop .Layer__calendly-inline-widget {
-  height: 56rem;
-}.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__progress-steps {
-  display: flex;
-  align-items: center;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  min-width: 50px;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step[data-active=true] .Layer__progress-steps--circle::after {
-  border-color: var(--color-base-800);
-  transform: rotate(65deg);
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step[data-active=true]:not([data-complete=true]) .Layer__progress-steps--label p::after {
-  opacity: 1;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step[data-complete=true] .Layer__progress-steps--circle {
-  border-color: var(--color-info-success-fg);
-  background-color: var(--color-info-success-bg);
-  border-style: solid;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step[data-complete=true] .Layer__progress-steps--circle::after {
-  border-color: var(--color-info-success-fg);
-}
-.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;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--label p::after {
-  position: absolute;
-  z-index: -1;
-  top: -2px;
-  left: -8px;
-  height: 100%;
-  width: 100%;
-  padding: 2px 8px;
-  border-radius: 30px;
-  background-color: var(--color-base-300);
-  content: "";
-  opacity: 0;
-  transition: all 200ms ease;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 12px;
-  width: 12px;
-  border-radius: 100%;
-  border: 1px var(--color-base-500);
-  background-color: var(--color-base-50);
-  border-style: dashed;
-  transition: all 200ms ease;
-}
-.Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--step .Layer__progress-steps--circle::after {
-  position: absolute;
-  top: -1px;
-  left: -1px;
-  display: block;
-  height: 12px;
-  width: 12px;
-  border-radius: 100%;
-  border: 1px var(--color-base-500);
-  content: "";
-  border-style: dashed;
-  transition: all 200ms ease;
-}
-
-.Layer__progress-steps--step-line {
-  position: absolute;
-  top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 2px;
-  width: 100%;
-  background-color: var(--color-base-300);
-}
-.Layer__progress-steps--step-line::after {
-  position: absolute;
-  height: 2px;
-  width: 0%;
-  background-color: var(--color-base-800);
-  content: "";
-  transition: all 200ms ease;
-}
-
-.Layer__progress-steps--step[data-complete=true] .Layer__progress-steps--step-line::after {
-  width: 100%;
-}
-
-@container (width < 530px) {
-  .Layer__progress-steps .Layer__progress-steps--step-wrapper .Layer__progress-steps--label {
-    display: none;
-  }
-}.Layer__platform-onboarding {
-  container-type: inline-size;
-}
-
-.Layer__platform-onboarding-layout {
-  box-sizing: border-box;
-  position: relative;
-  padding: var(--spacing-lg);
-}
-
-.Layer__platform-onboarding__back-button-container {
-  position: absolute;
-  top: var(--spacing-lg);
-  left: var(--spacing-lg);
-  max-width: calc(672px + 2 * var(--spacing-xl));
-  margin: auto;
-  margin-bottom: var(--spacing-lg);
-}
-@container (width < 969px) {
-  .Layer__platform-onboarding__back-button-container {
-    position: static;
-  }
-}
-
-.Layer__platfom-onboarding-layout__box {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  max-width: 672px;
-  padding: var(--spacing-xl);
-  border-radius: var(--border-radius-xs);
-  box-shadow: 0 0 0 1px var(--base-transparent-4);
-  margin: auto;
-  margin-bottom: var(--spacing-md);
-  background: var(--color-base-0);
-}
-@container (width < 500px) {
-  .Layer__platfom-onboarding-layout__box {
-    padding: var(--spacing-md);
-  }
-}
-
-.Layer__platform-onboarding-layout__footer {
-  max-width: 1200px;
-  padding: var(--spacing-lg) 0;
-  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 {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-lg);
-  align-items: flex-start;
-  max-width: 672px;
-  padding: 0 var(--spacing-xl);
-  margin: auto;
-}
-@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;
-  padding-top: var(--spacing-5xl);
-  margin: auto;
-}
-@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: 1 0 0;
-  flex-direction: column;
-  gap: var(--spacing-2xl);
-  align-items: center;
-  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 {
-  height: 100%;
-  width: 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;
-  max-width: 27ch;
-  padding: 36px 0;
-  margin: auto;
-  text-align: center;
 }.Layer__bar-banner {
   display: flex;
   align-items: center;
@@ -5802,7 +5527,7 @@
   align-items: center;
   color: var(--color-danger);
 }
-.Layer__expand-collpase-all-rows-btn {
+.Layer__expand-collapse-all-rows-btn {
   min-width: 152px;
 }
 .Layer__btn.Layer__btn--with-tooltip {
@@ -6064,12 +5789,6 @@
   padding: var(--spacing-2xs);
   color: var(--label-color);
 }
-.Layer__amount-input--align-left {
-  text-align: left;
-}
-.Layer__amount-input--align-right {
-  text-align: right;
-}
 .Layer__textarea {
   box-sizing: border-box;
   min-height: 100px;
@@ -6325,61 +6044,6 @@
   border: 1px solid var(--input-border-color);
   font-size: 14px;
 }
-.Layer__profit-and-loss-date-picker__button {
-  position: relative;
-  z-index: 3;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem;
-  border-radius: var(--input-border-radius);
-  border: 0;
-  background-color: var(--color-base-0);
-  text-align: center;
-}
-.Layer__profit-and-loss-date-picker__button:active {
-  background-color: var(--color-base-0);
-}
-.Layer__profit-and-loss-date-picker__button-icon path {
-  stroke: var(--color-base-900);
-}
-.Layer__profit-and-loss-date-picker__label {
-  position: relative;
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: flex-start;
-  width: 33%;
-  padding: 0 var(--spacing-xs);
-  padding-left: 20px;
-  font-size: 14px;
-  text-align: center;
-  transition: opacity 0.7s ease-in-out, transform 0.4s ease-in-out;
-}
-.Layer__profit-and-loss-date-picker__labels-container {
-  position: absolute;
-  display: flex;
-  width: 660px;
-}
-.Layer__profit-and-loss-date-picker__effect-blur {
-  position: absolute;
-  z-index: 2;
-  right: -10px;
-  bottom: 1px;
-  height: 100%;
-  width: 120px;
-  background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
-}
-.Layer__input-with-badge {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.Layer__input-with-badge .Layer__badge {
-  position: absolute;
-  z-index: 1;
-  right: 8px;
-}
 .Layer__input--static-value {
   padding: 0 calc(var(--spacing-xs) + 1px);
 }
@@ -6402,26 +6066,6 @@
     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__table {
   width: 100%;
   border-collapse: separate;
@@ -6609,14 +6253,6 @@
   justify-content: flex-end;
   text-align: right;
 }
-.Layer__table .Layer__table-cell.Layer__table-cell-amount--positive .Layer__table-cell-content::before {
-  content: "$";
-  flex-shrink: 0;
-}
-.Layer__table .Layer__table-cell.Layer__table-cell-amount--negative .Layer__table-cell-content::before {
-  content: "-$";
-  flex-shrink: 0;
-}
 .Layer__table .Layer__table-cell .Layer__table-cell-content {
   box-sizing: border-box;
   position: relative;
@@ -8091,10 +7727,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__table.Layer__bank-transactions__table {
   overflow: auto;
 }
-.Layer__table.Layer__bank-transactions__table .Layer__bank-transaction__submit-btn,
-.Layer__table.Layer__bank-transactions__table .Layer__bank-transaction__retry-btn {
-  width: 122px;
-}
 .Layer__table .Layer__table-header.Layer__bank-transactions__documents-col {
   --right-adjust: calc(65ch + 2px);
 }
@@ -9154,8 +8786,10 @@ tbody .Layer__table__empty-row:first-child {
   max-width: 272px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
+  border: 1px solid var(--border-color);
   background: var(--base-transparent-1);
   cursor: pointer;
+  color: var(--color-base-700);
   transition: all 0.15s ease-out;
 }
 .Layer__linked-accounts__new-account.--as-widget {
@@ -9167,22 +8801,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__linked-accounts__new-account:hover {
   background: var(--base-transparent-2);
 }
-.Layer__linked-accounts__new-account:hover .Layer__linked-accounts__new-account-label {
-  color: var(--color-base-800);
-}
-.Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  color: var(--color-base-500);
-  transition: all 0.15s ease-out;
-}
-.Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label span {
-  line-height: normal;
-}
 /* stylelint-disable-next-line keyframes-name-pattern */
 @keyframes skeletonSweep {
   100% {
@@ -9218,7 +8836,7 @@ tbody .Layer__table__empty-row:first-child {
   width: 286px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
-  border: 1px solid var(--color-base-100);
+  border: 1px solid var(--border-color);
   background: var(--color-base-0);
 }
 .Layer__linked-account-thumb.Layer__integrations-quickbooks-item-thumb {
@@ -10030,13 +9648,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding: var(--spacing-2xs) var(--spacing-xs);
 }
 .Layer__accounting-overview-profit-and-loss-charts {
-  display: flex;
-  gap: var(--spacing-md);
   max-width: 1406px;
 }
-.Layer__accounting-overview-profit-and-loss-charts > .Layer__UI__Toggle {
-  display: none;
-}
 .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
   margin-top: -42px;
 }
@@ -10045,17 +9658,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     margin-top: -40px;
   }
 }
-@container (max-width: 796px) {
-  .Layer__accounting-overview-profit-and-loss-charts {
-    flex-direction: column;
-  }
-  .Layer__accounting-overview-profit-and-loss-charts > .Layer__UI__Toggle {
-    display: flex;
-  }
-  .Layer__component.Layer__accounting-overview-profit-and-loss-chart.accounting-overview-profit-and-loss-chart--hidden {
-    display: none;
-  }
-}
 .Layer__accounting-overview-profit-and-loss-chart {
   box-sizing: border-box;
   width: 100%;
@@ -10088,33 +9690,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
 }
 .Layer__bookkeeping-overview-profit-and-loss-chart {
-  width: calc(50% - var(--spacing-md) / 2);
+  box-sizing: border-box;
+  width: 100%;
 }
 .Layer__bookkeeping-overview-profit-and-loss-charts {
-  display: flex;
-  gap: var(--spacing-md);
   max-width: 1406px;
 }
-.Layer__bookkeeping-overview-profit-and-loss-charts > .Layer__UI__Toggle {
-  display: none;
-}
 .Layer__bookkeeping-overview-profit-and-loss .recharts-legend-wrapper {
   top: 16px !important;
 }
-@container (max-width: 796px) {
-  .Layer__bookkeeping-overview-profit-and-loss-chart {
-    width: 100%;
-  }
-  .Layer__bookkeeping-overview-profit-and-loss-charts {
-    flex-direction: column;
-  }
-  .Layer__bookkeeping-overview-profit-and-loss-charts > .Layer__UI__Toggle {
-    display: flex;
-  }
-  .Layer__component.Layer__bookkeeping-overview-profit-and-loss-chart.bookkeeping-overview-profit-and-loss-chart--hidden {
-    display: none;
-  }
-}
 @container (max-width: 460px) {
   .Layer__component.Layer__bookkeeping-overview-profit-and-loss .recharts-responsive-container {
     margin-top: -12px;