@layerfi/components 0.1.99 → 0.1.101

package/dist/index.css

@@ -4380,12 +4380,12 @@ tbody .Layer__table__empty-row:first-child {
   position: relative;
 }
 .Layer__view .Layer__view-main {
-  padding: var(--spacing-lg);
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
+  padding: var(--spacing-lg);
   container-type: inline-size;
-  box-sizing: border-box;
 }
 .Layer__view .Layer__view-main .Layer__toggle {
   border-radius: 6px;
@@ -4397,16 +4397,15 @@ tbody .Layer__table__empty-row:first-child {
   border-radius: 6px;
 }
 .Layer__view .Layer__view-header {
+  box-sizing: border-box;
+  position: relative;
   display: flex;
+  overflow: auto;
   width: 100%;
   max-width: 100%;
-  overflow: auto;
-  container-type: inline-size;
-  position: relative;
-  z-index: 1;
-  border-bottom: 1px solid var(--border-color);
   padding: 0 var(--spacing-md);
-  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-color);
+  container-type: inline-size;
 }
 .Layer__view .Layer__view-header .Layer__header__row:last-child {
   border-width: 0;
@@ -4415,11 +4414,11 @@ tbody .Layer__table__empty-row:first-child {
   width: min-content;
 }
 .Layer__view .Layer__view-header__title {
-  padding: var(--spacing-md) var(--spacing-sm);
+  display: flex;
+  align-items: center;
   width: 100%;
   min-height: 44px;
-  align-items: center;
-  display: flex;
+  padding: var(--spacing-md) var(--spacing-sm);
 }
 .Layer__view .Layer__view-header__content {
   display: flex;
@@ -4435,15 +4434,14 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-md);
 }
 .Layer__view .Layer__view-header__children {
-  width: 100%;
   display: flex;
+  width: 100%;
 }
 .Layer__view.Layer__view--panel .Layer__view-main {
   padding: 0;
 }
 .Layer__view.Layer__view--panel .Layer__view-header {
   position: relative;
-  z-index: 1;
   padding: 0;
 }
 .Layer__view.Layer__view--panel .Layer__view-header__content {
@@ -4753,9 +4751,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ModalContextBar {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  column-gap: var(--spacing-md);
   grid-template-areas: "back logo close";
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  column-gap: var(--spacing-md);
   align-items: center;
 }
 .Layer__ModalContextBar > [slot=back] {
@@ -4769,8 +4767,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ModalContent {
   display: grid;
-  block-size: 100%;
   overflow-y: auto;
+  block-size: 100%;
 }
 .Layer__ModalContent > [slot=center] {
   align-self: center;
@@ -4991,18 +4989,18 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__MinimalSearchField {
   display: grid;
   grid-template-areas: "input clear-button";
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   border: none;
 }
 .Layer__MinimalSearchField > [slot=input] {
   grid-area: input;
-  font-family: var(--font-family);
-  border: none;
-  outline: none;
-  background: none;
   min-block-size: 1.5rem;
   padding-inline: var(--spacing-3xs);
+  outline: none;
+  background: none;
+  font-family: var(--font-family);
+  border: none;
 }
 .Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button,
 .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
@@ -5350,12 +5348,12 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-800);
 }
 .Layer__BasicLinkedAccountContainer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   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;
-  grid-template-columns: 1fr auto;
+  border: 1px solid var(--outline-subtle);
 }
 .Layer__BasicLinkedAccountContainer[data-selected] {
   background-color: var(--bg-subtle);
@@ -5367,9 +5365,9 @@ tbody .Layer__table__empty-row:first-child {
   width: 52px;
   height: 28px;
   padding: var(--spacing-3xs) 0;
+  border-radius: var(--border-radius-3xs);
   background: var(--color-base-0);
   color: var(--color-base-200);
-  border-radius: var(--border-radius-3xs);
 }
 .Layer__caobfb {
   padding-inline: var(--spacing-md);
@@ -5484,14 +5482,14 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__LinkAccountsListContainer {
   display: grid;
-  row-gap: var(--spacing-xs);
   grid-auto-rows: 1fr;
+  row-gap: var(--spacing-xs);
   overflow-y: auto;
   max-block-size: max(24rem, 60dvh);
 }
 @container (min-width: 48rem) {
   .Layer__LinkAccountsListContainer {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     column-gap: var(--spacing-xs);
   }
 }
@@ -9448,21 +9446,21 @@ tbody .Layer__table__empty-row:first-child {
   display: inline-block;
 }
 .Layer__date-picker .Layer__dropdown-toggle {
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
-  border-radius: var(--spacing-2xs);
-  padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
-  min-height: var(--spacing-2xl);
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  justify-content: space-between;
   min-width: 180px;
-  cursor: pointer;
-  text-align: left;
+  min-height: var(--spacing-2xl);
+  padding: var(--spacing-3xs) var(--spacing-xs) var(--spacing-3xs);
   padding-left: var(--spacing-lm);
-  gap: 20px;
-  border: 1px solid transparent;
+  border-radius: var(--spacing-2xs);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
   background-color: var(--color-white);
+  cursor: pointer;
   font-size: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  text-align: left;
+  border: 1px solid transparent;
 }
 .Layer__date-picker .Layer__dropdown-toggle .Layer__chevron {
   display: flex;
@@ -9472,15 +9470,15 @@ tbody .Layer__table__empty-row:first-child {
   transform: rotate(180deg);
 }
 .Layer__date-picker .Layer__dropdown-menu {
-  margin-top: 5px;
   position: absolute;
+  z-index: 1000;
   top: 100%;
   left: 0;
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+  width: 256px;
   border-radius: var(--spacing-2xs);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
+  margin-top: 5px;
   background-color: var(--color-white);
-  width: 256px;
-  z-index: 1000;
   opacity: 0;
   animation: fadeIn 0.3s forwards;
 }
@@ -9494,46 +9492,46 @@ tbody .Layer__table__empty-row:first-child {
   margin-bottom: var(--spacing-4xs);
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper {
-  border-top: 1px solid var(--color-base-200);
   padding: var(--spacing-md) var(--spacing-sm) var(--spacing-sm);
+  border-top: 1px solid var(--color-base-200);
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options-wrapper:first-child {
   border-top: transparent;
 }
 .Layer__date-picker .Layer__dropdown-menu .Layer__compare-options {
   display: grid;
-  grid-template-columns: 2fr 2fr;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .Layer__date-picker .Layer__option {
-  cursor: pointer;
   display: flex;
-  justify-content: space-between;
   align-items: center;
-  font-size: 14px;
-  padding: 0px var(--spacing-xs);
-  max-height: 28px;
+  justify-content: space-between;
   min-height: 28px;
+  max-height: 28px;
+  padding: 0 var(--spacing-xs);
+  cursor: pointer;
+  font-size: 14px;
 }
 .Layer__date-picker .Layer__option:hover {
+  max-width: max-content;
   border-radius: var(--spacing-3xs);
   background: var(--color-base-100);
-  max-width: max-content;
 }
 .Layer__date-picker .Layer__option.Layer__selected {
+  max-width: max-content;
   border-radius: var(--spacing-3xs);
   background: var(--color-base-100);
-  max-width: max-content;
 }
 .Layer__date-picker .Layer__option .Layer__tick {
-  margin-left: 10px;
   padding-top: 2px;
+  margin-left: 10px;
   color: var(--color-base-900);
 }
 .Layer__date-picker .Layer__compare-header {
-  color: var(--color-base-500);
-  font-size: 11px;
-  padding: 0 0 var(--spacing-sm) var(--spacing-xs);
   position: relative;
+  padding: 0 0 var(--spacing-sm) var(--spacing-xs);
+  font-size: 11px;
+  color: var(--color-base-500);
 }
 .Layer__ProfitAndLossSummariesListItem {
   all: unset;
@@ -9608,35 +9606,35 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__compare__options {
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: flex-start;
-  gap: var(--spacing-md);
 }
 .Layer__compare__options .Layer__input-tooltip {
   flex: 1;
 }
 .Layer__compare__options .Layer__compare__switch__options {
   display: flex;
+  gap: var(--spacing-md);
   align-items: center;
   justify-content: center;
-  gap: var(--spacing-md);
 }
 .Layer__profit-and-loss__main-panel {
   flex: 1;
 }
 .Layer__profit-and-loss__title {
-  font-size: 1.5rem;
-  font-weight: 600;
+  margin-right: 1.5rem;
   margin-bottom: 1.5rem;
   margin-left: 1.5rem;
-  margin-right: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: 600;
 }
 .Layer__profit-and-loss-table {
   display: grid;
-  grid-template-columns: 1fr auto;
+  grid-template-columns: minmax(0, 1fr) auto;
   overflow: hidden;
-  background-color: var(--color-base-100);
   border-radius: var(--border-radius-sm);
+  background-color: var(--color-base-100);
 }
 .Layer__profit-and-loss-table__loader-container {
   padding: var(--spacing-2xl);
@@ -9662,9 +9660,9 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__children {
   display: grid;
-  grid-column: span 2;
-  grid-template-columns: subgrid;
   grid-template-rows: 0fr;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
   overflow: hidden;
   transition: grid-template-rows var(--transition-speed);
 }
@@ -9672,25 +9670,25 @@ tbody .Layer__table__empty-row:first-child {
   grid-template-rows: 1fr;
 }
 .Layer__profit-and-loss-row__children--content {
-  min-height: 0;
   display: grid;
-  grid-column: span 2;
   grid-template-columns: subgrid;
+  grid-column: span 2;
+  min-height: 0;
 }
 .Layer__profit-and-loss-row__label {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 .Layer__profit-and-loss-row__label .Layer__profit-and-loss-row__label__title {
   display: flex;
   align-items: center;
 }
 .Layer__profit-and-loss-row__label svg.Layer__profit-and-loss-row__label__chevron {
-  color: var(--color-base-600);
   width: 1.25rem;
   height: 1.25rem;
   margin-right: 0.25rem;
+  color: var(--color-base-600);
   transition: transform var(--transition-speed);
   transform: rotate(-90deg);
 }
@@ -9708,8 +9706,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row__value {
   display: flex;
-  justify-content: flex-end;
   align-items: center;
+  justify-content: flex-end;
 }
 .Layer__profit-and-loss-row__label--display-children-true {
   cursor: pointer;
@@ -9722,8 +9720,8 @@ tbody .Layer__table__empty-row:first-child {
   font-weight: normal;
 }
 .Layer__profit-and-loss-row__label--display-children-false svg.Layer__profit-and-loss-row__label__chevron {
-  visibility: hidden;
   display: none;
+  visibility: hidden;
 }
 .Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label,
 .Layer__profit-and-loss-row__value--variant-summation.Layer__profit-and-loss-row__value + .Layer__profit-and-loss-row__label + .Layer__profit-and-loss-row__value {
@@ -9757,22 +9755,22 @@ tbody .Layer__table__empty-row:first-child {
   content: "-$";
 }
 .Layer__profit-and-loss-row__label .Layer__text {
-  color: var(--color-base-700);
-  font-weight: var(--font-weight-normal);
   margin: 0;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-700);
 }
 .Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--depth-0 .Layer__text {
-  color: var(--color-base-800);
-  font-weight: var(--font-weight-bold);
   margin: 0;
+  font-weight: var(--font-weight-bold);
+  color: var(--color-base-800);
 }
 .Layer__profit-and-loss-row__label--depth-1 {
   padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) calc(var(--spacing-5xl) + var(--spacing-md));
 }
 .Layer__profit-and-loss-row__label--depth-1 .Layer__text {
-  color: var(--color-base-700);
-  font-weight: var(--font-weight-normal);
   margin: 0;
+  font-weight: var(--font-weight-normal);
+  color: var(--color-base-700);
 }
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
   font-size: 0.75rem;
@@ -9811,27 +9809,27 @@ tbody .Layer__table__empty-row:first-child {
     0 0 0 1px rgba(16, 24, 40, 0.04),
     0 2px 4px 0 rgba(16, 24, 40, 0.06),
     0 4px 12px 0 rgba(16, 24, 40, 0.08);
-  margin-left: var(--spacing-xl);
   margin-right: var(--spacing-xl);
   margin-bottom: var(--spacing-xl);
+  margin-left: var(--spacing-xl);
 }
 .Layer__profit-and-loss__chart_with_summaries__summary-col {
   display: flex;
   flex-direction: column;
-  padding: var(--spacing-md);
   gap: var(--spacing-md) var(--spacing-md);
+  padding: var(--spacing-md);
 }
 .Layer__profit-and-loss__chart_with_summaries__chart-col {
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   padding: var(--spacing-md);
 }
 .Layer__profit-and-loss-row__children--content {
-  min-height: 0;
   display: grid;
-  grid-column: span 2;
   grid-template-columns: subgrid;
+  grid-column: span 2;
+  min-height: 0;
   background-color: var(--color-base-50);
 }
 .Layer__profit-and-loss-chart__bar--loading {
@@ -9928,40 +9926,40 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 1023px) and (min-width: 760px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: var(--spacing-md);
     margin-right: var(--spacing-md);
     margin-bottom: var(--spacing-md);
+    margin-left: var(--spacing-md);
   }
 }
 @container (max-width: 759px) and (min-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: 0;
+    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
-    box-shadow: none;
+    margin-left: 0;
   }
 }
 @container (max-width: 500px) {
   .Layer__profit-and-loss__chart_with_summaries {
     flex-direction: column;
-    margin-left: 0;
+    box-shadow: none;
     margin-right: 0;
     margin-bottom: var(--spacing-md);
-    box-shadow: none;
+    margin-left: 0;
   }
 }
 .Layer__profit-and-loss-row__detailed-chart-btn {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--color-base-100);
-  color: var(--color-base-600);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
   margin-left: auto;
+  background: var(--color-base-100);
   cursor: pointer;
+  color: var(--color-base-600);
   transition: color 150ms ease-out, background-color 150ms ease-out;
 }
 .Layer__profit-and-loss-row__detailed-chart-btn:hover {
@@ -9969,22 +9967,22 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-900);
 }
 .Layer__profit-and-loss-chart__state-card {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  gap: var(--spacing-md);
   align-items: center;
-  position: absolute;
-  background: #fff;
-  padding: var(--spacing-lg) var(--spacing-4xs);
+  justify-content: center;
   width: 260px;
   max-width: 70%;
   height: 120px;
-  left: 50%;
-  bottom: 0;
-  transform: translate(-50%, -60px);
+  padding: var(--spacing-lg) var(--spacing-4xs);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 0 1px var(--base-transparent-4);
-  gap: var(--spacing-md);
+  background: #fff;
+  transform: translate(-50%, -60px);
 }
 .Layer__profit-and-loss-chart__state-card .Layer__icon-box {
   background-color: var(--color-base-100);
@@ -9992,21 +9990,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-chart__state-card__text {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   gap: var(--spacing-4xs);
+  align-items: center;
+  justify-content: center;
 }
 .Layer__profit-and-loss-chart__state-card__description {
-  color: var(--text-color-secondary);
   text-align: center;
+  color: var(--text-color-secondary);
 }
 .Layer__compare__controls__wrapper {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
   flex-grow: 1;
   flex-wrap: wrap;
+  gap: var(--spacing-md);
+  align-items: center;
+  justify-content: space-between;
 }
 .Layer__compare__table__wrapper .Layer__table__wrapper {
   overflow: auto;
@@ -10451,11 +10449,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--color-base-0);
 }
 .Layer__toasts-container .Layer__toast.Layer__toast--success {
-  background: var(--color-info-success-bg);
+  background: var(--color-info-success);
   box-shadow: 0 0 0 1px var(--color-info-success);
 }
-.Layer__toasts-container .Layer__toast.Layer__toast--success p {
-  color: var(--color-info-success-fg);
+.Layer__toasts-container .Layer__toast.Layer__toast--error {
+  background: var(--color-info-error);
+  box-shadow: 0 0 0 1px var(--color-info-error);
 }
 .Layer__toast.enter {
   opacity: 1;