@layerfi/components 0.1.85 → 0.1.86

package/dist/index.css

@@ -83,8 +83,9 @@
   --text-md: 14px;
   --text-lg: 16px;
   --text-heading: 24px;
+  --text-heading-secondary: 20px;
   --text-heading-page: var(--text-heading);
-  --text-heading-view: 20px;
+  --text-heading-view: var(--text-heading-secondary);
   --text-heading-sm: 16px;
   --font-weight-normal: 460;
   --font-weight-bold: 540;
@@ -1047,6 +1048,8 @@
 }
 .Layer__datepicker__wrapper,
 #Layer__datepicker__portal {
+  position: relative;
+  z-index: 101;
   display: inline-flex;
   align-items: center;
   max-height: 36px;
@@ -1066,6 +1069,7 @@
 .Layer__datepicker__wrapper > div,
 #Layer__datepicker__portal > div {
   max-width: 100%;
+  width: 100%;
 }
 .Layer__datepicker__wrapper .Layer__datepicker__next-button,
 #Layer__datepicker__portal .Layer__datepicker__next-button {
@@ -3146,6 +3150,9 @@
   padding: var(--spacing-2xs);
   color: var(--label-color);
 }
+.Layer__amount-input {
+  text-align: right;
+}
 .Layer__textarea {
   width: 100%;
   resize: none;
@@ -3622,7 +3629,11 @@
   position: absolute;
   right: -10px;
   bottom: 1px;
-  background: linear-gradient(-90deg, #fff 50%, rgba(255, 255, 255, 0) 100%);
+  background:
+    linear-gradient(
+      -90deg,
+      #fff 50%,
+      rgba(255, 255, 255, 0) 100%);
   z-index: 2;
 }
 .Layer__input-with-badge {
@@ -4492,6 +4503,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Button[data-variant=solid][data-hovered] {
   background-color: var(--button-bg-active);
 }
+.Layer__UI__Button[data-focus-visible] {
+  outline-style: solid;
+  outline-offset: 0.12rem;
+  outline-color: var(--button-bg-default);
+}
 .Layer__UI__Button[data-variant=ghost] {
   background-color: transparent;
   color: var(--button-fg-ghost);
@@ -4502,6 +4518,10 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--button-fg-ghost-active);
   border-color: var(--button-outline-ghost-active);
 }
+.Layer__UI__Button[data-variant=ghost][data-focus-visible] {
+  outline-style: solid;
+  outline-color: var(--button-outline-ghost-active);
+}
 .Layer__UI__Button[data-size=lg] {
   min-block-size: 2.25rem;
   font-size: var(--text-lg);
@@ -4515,17 +4535,9 @@ tbody .Layer__table__empty-row:first-child {
   cursor: progress;
   background-color: var(--button-bg-disabled);
 }
-.Layer__LoadingSpinner {
-  animation-name: Layer__rotate;
-  animation-duration: 2s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-}
 .Layer__Checkbox {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  display: inline-flex;
   align-items: center;
-  gap: var(--spacing-xs);
   cursor: pointer;
 }
 .Layer__Checkbox [slot=checkbox] {
@@ -4551,10 +4563,13 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--bg-default);
   background-color: var(--fg-default);
 }
+.Layer__Checkbox[data-labeled] {
+  gap: var(--spacing-xs);
+}
 .Layer__UI__Heading {
   all: unset;
   font-weight: bold;
-  font-size: var(--text-heading);
+  font-size: var(--text-heading-secondary);
 }
 .Layer__UI__Heading[data-size=sm] {
   font-size: var(--text-heading-sm);
@@ -4574,6 +4589,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-pbe=lg] {
   padding-block-end: var(--spacing-lg);
 }
+.Layer__LoadingSpinner {
+  animation-name: Layer__rotate;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
 .Layer__P {
   margin: 0;
   font-size: var(--text-md);
@@ -4633,7 +4654,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__Modal {
   inline-size: min(24rem, 90dvi);
-  block-size: min(36rem, 90dvb);
+  block-size: min(24rem, 90dvb);
 }
 .Layer__Modal[data-entering] {
   animation-duration: 300ms;
@@ -4641,6 +4662,11 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Modal[data-exiting] {
   animation-duration: 300ms;
 }
+.Layer__Modal[data-size=lg] {
+  inline-size: min(42rem, 90dvi);
+  block-size: auto;
+  max-block-size: 90dvb;
+}
 .Layer__Dialog {
   outline: none;
   background-color: white;
@@ -4748,6 +4774,111 @@ tbody .Layer__table__empty-row:first-child {
   display: grid;
   grid-template-columns: 1fr auto;
 }
+.Layer__caobfb {
+  padding-inline: var(--spacing-md);
+  padding-block: var(--spacing-sm);
+  position: relative;
+  display: flex;
+  gap: var(--spacing-sm);
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--color-base-100);
+  container-type: inline-size;
+  transition: all 0.25s ease-in-out;
+  transition-delay: 0.8s;
+  max-height: 280px;
+}
+.Layer__caobfb[data-confirmed=true] {
+  background-color: var(--color-base-50);
+}
+.Layer__caobfb__icon-col {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+.Layer__caobfb__details-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  color: var(--color-base-700);
+  flex: 1;
+}
+.Layer__caobfb__details-col__details {
+  padding-bottom: var(--spacing-sm);
+}
+.Layer__caobfb__details-col__name {
+  display: flex;
+  gap: var(--spacing-3xs);
+  width: 100%;
+  max-width: 500px;
+}
+.Layer__caobfb__details-col__name__institution-name {
+  color: var(--color-base-500);
+  max-width: 50%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.Layer__caobfb__details-col__name__account-name {
+  color: var(--color-base-1000);
+  max-width: 50%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.Layer__caobfb__details-col__inputs {
+  display: flex;
+  gap: var(--spacing-sm);
+  align-items: center;
+  padding: var(--spacing-sm) 0;
+  border-top: 1px solid var(--color-base-200);
+}
+.Layer__caobfb__details-col__inputs .Layer__input-group {
+  width: 100%;
+}
+.Layer__caobfb__details-col__inputs .Layer__input-group .Layer__input {
+  width: 100%;
+}
+.Layer__caobfb__details-col__inputs .Layer__input-group .Layer__datepicker {
+  width: 100%;
+}
+.Layer__caobfb__details-col__inputs .Layer__input-group .react-datepicker__input-container input {
+  width: calc(100% - 2px);
+  max-width: unset;
+}
+@container (max-width: 440px) {
+  .Layer__caobfb__details-col__inputs {
+    flex-direction: column;
+  }
+}
+.Layer__caobfb__confirm-col {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+.Layer__caobfb__success-banner {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  z-index: -1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-sm);
+  background-color: var(--color-base-50);
+  transition: opacity 0.12s ease-in-out;
+  color: var(--color-info-success-fg);
+}
+.Layer__caobfb[data-saved] {
+  max-height: 0;
+  padding: 0;
+  border-width: 0;
+  overflow: hidden;
+}
+.Layer__caobfb[data-saved] .Layer__caobfb__success-banner {
+  opacity: 1;
+  z-index: 101;
+}
 .Layer__tasks-month-selector {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -5732,7 +5863,11 @@ tbody .Layer__table__empty-row:first-child {
     content: "";
     width: 50px;
     height: 100%;
-    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 120%);
+    background:
+      linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgb(255, 255, 255) 120%);
     position: absolute;
     left: -51px;
     top: 0px;
@@ -7405,7 +7540,12 @@ tbody .Layer__table__empty-row:first-child {
   width: 100%;
   height: 100%;
   transform: translateX(-100%);
-  background: linear-gradient(90deg, transparent, rgb(255, 255, 255), transparent);
+  background:
+    linear-gradient(
+      90deg,
+      transparent,
+      rgb(255, 255, 255),
+      transparent);
   animation: skeletonSweep 1.5s infinite;
 }
 .Layer__linked-account-thumb {
@@ -7448,6 +7588,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__linked-account-thumb .topbar .account-institution {
   color: var(--color-base-500);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .Layer__linked-account-thumb .topbar .topbar-details {
   display: flex;
@@ -7575,7 +7718,11 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: flex-end;
   transition: 0.15s all ease-out;
   border-top-right-radius: var(--border-radius-sm);
-  background: linear-gradient(270deg, #f8f8fa 1.52%, rgba(248, 248, 250, 0) 99.75%);
+  background:
+    linear-gradient(
+      270deg,
+      #f8f8fa 1.52%,
+      rgba(248, 248, 250, 0) 99.75%);
 }
 .Layer__linked-accounts__options .Layer__linked-accounts__options-overlay .Layer__linked-accounts__options-overlay-button {
   display: flex;
@@ -7653,7 +7800,13 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__anim--skeleton-loading {
   background: var(--color-base-100);
-  background: linear-gradient(110deg, var(--color-base-50) 0%, var(--color-base-0) 28%, var(--color-base-50) 50%, var(--color-base-50) 100%);
+  background:
+    linear-gradient(
+      110deg,
+      var(--color-base-50) 0%,
+      var(--color-base-0) 28%,
+      var(--color-base-50) 50%,
+      var(--color-base-50) 100%);
   border-radius: 4px;
   background-size: 200% 100%;
   animation: 1.5s shine linear infinite;
@@ -8226,6 +8379,16 @@ tbody .Layer__table__empty-row:first-child {
   background-color: var(--color-info-error-bg);
   color: var(--color-info-error-fg);
 }
+.Layer__pill--info {
+  background-color: var(--color-info-bg);
+  color: var(--color-info-fg);
+}
+.Layer__pill--actionable {
+  cursor: pointer;
+}
+.Layer__pill--actionable:hover {
+  opacity: 0.7;
+}
 .Layer__ProfitAndLossSummariesListItem {
   all: unset;
   display: grid;
@@ -8934,7 +9097,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border-radius: 2px;
 }
 .Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .Layer__value-icon--uncategorized {
-  background-image: repeating-linear-gradient(-45deg, var(--color-base-200) 0px, var(--color-base-200) 2px, var(--color-base-500) 2px, var(--color-base-500) 3.5px, var(--color-base-200) 3.5px, var(--color-base-200) 4px);
+  background-image:
+    repeating-linear-gradient(
+      -45deg,
+      var(--color-base-200) 0px,
+      var(--color-base-200) 2px,
+      var(--color-base-500) 2px,
+      var(--color-base-500) 3.5px,
+      var(--color-base-200) 3.5px,
+      var(--color-base-200) 4px);
 }
 .Layer__profit-and-loss .Layer__panel__sidebar .Layer__panel__sidebar-content {
   width: 100%;