@layerfi/components 0.1.102-alpha.4 → 0.1.102-alpha.6

package/dist/index.css

@@ -39,15 +39,15 @@
   --color-light: hsl( var(--color-light-h) var(--color-light-s) var(--color-light-l) );
   --color-base-0: #fff;
   --color-base-50: hsl(var(--color-dark-h) 1% 98%);
-  --color-base-100: hsl(var(--color-dark-h) 1% 96%);
-  --color-base-200: hsl(var(--color-dark-h) 1% 94%);
-  --color-base-300: hsl(var(--color-dark-h) 2% 92%);
-  --color-base-400: var(--color-light);
-  --color-base-500: hsl(var(--color-dark-h) 2% 53%);
+  --color-base-100: hsl(var(--color-dark-h) 1% 94%);
+  --color-base-200: hsl(var(--color-dark-h) 1% 91%);
+  --color-base-300: hsl(var(--color-dark-h) 2% 88%);
+  --color-base-400: hsl(var(--color-dark-h) 2% 85%);
+  --color-base-500: hsl(var(--color-dark-h) 3% 53%);
   --color-base-600: hsl(var(--color-dark-h) 7% 40%);
   --color-base-700: hsl(var(--color-dark-h) 9% 27%);
   --color-base-800: hsl(var(--color-dark-h) 12% 20%);
-  --color-base-900: var(--color-dark);
+  --color-base-900: hsl(var(--color-dark-h) 15% 14%);
   --color-base-1000: hsl(var(--color-dark-h) 20% 7%);
   --max-component-width: 1408px;
   --base-transparent-1: hsl(220deg 43% 11% / 1%);
@@ -147,7 +147,7 @@
   --badge-color-warning: var(--color-info-warning);
   --badge-fg-color-warning: var(--color-info-warning-fg);
   --badge-bg-color-warning: var(--color-info-warning-bg);
-  --badge-bg-color-warning-dark: #CA9204;
+  --badge-bg-color-warning-dark: #ca9204;
   --badge-color-error: var(--color-info-error);
   --badge-fg-color-error: var(--color-info-error-fg);
   --badge-bg-color-error: var(--color-info-error-bg);
@@ -155,35 +155,15 @@
   --table-bg: var(--color-white);
   --tooltip-color: var(--color-white);
   --tooltip-bg-color: var(--color-base-800);
-  --bar-color-income: var(--color-base-400);
-  --bar-color-expenses: var(--color-base-900);
+  --bar-color-income: var(--color-light);
+  --bar-color-expenses: var(--color-dark);
   --chart-indicator-color: var(--color-base-700);
   --z-index-mobile-panel: 106;
-  --color-alabaster: #f9f9f9;
-  --color-athens-gray: #eaecf0;
-  --color-blue-ribbon: #0c48e5;
-  --color-comet: #57627a;
-  --color-cornflower-blue: #6d8ee7;
-  --color-ebony: #101828;
-  --color-fiord: #475467;
-  --color-green-haze: #039855;
-  --color-mine-shaft: #3c3c3c;
-  --color-mischke: #d0d5dd;
-  --color-zumthor: #e0e9ff;
-  --active: var(--color-zumthor);
-  --border-color: var(--color-athens-gray);
-  --buttons-border-color: var(--color-mischke);
-  --button-color-dark: var(--color-fiord);
-  --corner-radius: 0.5rem;
-  --table-border-color: var(--color-athens-gray);
-  --table-expanded-background-color: var(--color-alabaster);
-  --text-color: var(--color-ebony);
-  --text-skeleton-color: var(--color-comet);
   --transition-speed: 0.25s;
-  border: 0;
+  box-sizing: border-box;
   padding: 0;
+  border: 0;
   margin: 0;
-  box-sizing: border-box;
   font-family: var(--font-family);
   font-weight: var(--font-weight-normal);
   font-feature-settings:
@@ -200,20 +180,19 @@
   --bg-default: var(--color-base-0);
   --bg-subtle: var(--color-base-50);
   --bg-muted: var(--color-base-100);
-  --fg-default: var(--color-base-900);
+  --fg-default: var(--color-base-800);
   --fg-subtle: var(--color-base-500);
   --outline-subtle: var(--color-base-200);
   --outline-default: var(--color-base-300);
   --outline-active: var(--color-base-500);
-  --button-bg-default: var(--color-base-900);
-  --button-bg-active: var(--color-base-1000);
-  --button-bg-disabled: var(--color-base-700);
+  --button-bg-default: var(--color-base-1000);
   --button-fg-default: var(--color-base-0);
-  --button-fg-disabled: var(--color-base-200);
-  --button-bg-ghost-active: var(--color-base-50);
-  --button-outline-ghost-active: var(--color-base-100);
-  --button-fg-ghost: var(--color-base-900);
-  --button-fg-ghost-active: var(--color-base-1000);
+  --button-bg-active: var(--color-base-800);
+  --button-fg-disabled: var(--color-base-500);
+  --button-bg-disabled: var(--color-base-200);
+  --button-fg-ghost: var(--color-base-800);
+  --button-border-color-ghost: var(--color-base-300);
+  --button-border-color-ghost-active: var(--color-base-800);
   --checkbox-bg: var(--bg-subtle);
   --checkbox-size: 16px;
   --checkbox-radius: var(--border-radius-3xs);
@@ -3225,8 +3204,8 @@
 }
 .Layer__textarea {
   box-sizing: border-box;
-  width: 100%;
   min-height: 100px;
+  width: 100%;
   padding: var(--spacing-xs);
   border-radius: var(--input-border-radius);
   border: 1px solid var(--border-color);
@@ -3304,18 +3283,18 @@
   position: relative;
   display: flex;
   align-items: center;
-  width: max-content;
   height: 38px;
+  width: max-content;
   padding: 2px;
   border-radius: 52px;
   box-shadow: 0 0 0 1px var(--color-base-300);
   margin: 1px;
   background: var(--color-base-100);
   cursor: pointer;
+  user-select: none;
   isolation: isolate;
   -webkit-tap-highlight-color: transparent;
   -webkit-touch-callout: none;
-  user-select: none;
 }
 .Layer__toggle .Layer__toggle-option-content {
   display: flex;
@@ -3393,8 +3372,8 @@
   z-index: 1;
   top: 1px;
   left: 0;
-  width: 100px;
   height: 36px;
+  width: 100px;
   padding: 8px 16px;
   border-radius: 52px;
   box-shadow:
@@ -3595,8 +3574,8 @@
   display: flex;
   flex: 1;
   align-items: center;
-  width: 100%;
   min-height: 36px;
+  width: 100%;
   padding: 8px;
   border-radius: var(--input-border-radius);
   border: 1px solid var(--border-color);
@@ -3656,7 +3635,7 @@
   background-color: var(--color-base-0);
 }
 .Layer__profit-and-loss-date-picker__button-icon path {
-  stroke: var(--text-color);
+  stroke: var(--color-base-900);
 }
 .Layer__profit-and-loss-date-picker__label {
   position: relative;
@@ -3681,8 +3660,8 @@
   z-index: 2;
   right: -10px;
   bottom: 1px;
-  width: 120px;
   height: 100%;
+  width: 120px;
   background:
     linear-gradient(
       -90deg,
@@ -4461,88 +4440,83 @@ tbody .Layer__table__empty-row:first-child {
   gap: 0.5rem;
   align-items: center;
   justify-content: center;
+  block-size: var(--size);
   min-inline-size: 0;
+  padding-inline: var(--spacing-md);
   border-radius: var(--btn-border-radius);
   outline: none;
   cursor: pointer;
   user-select: none;
+  font-size: var(--text-md);
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-normal);
   appearance: none;
   white-space: nowrap;
   vertical-align: middle;
+  --size: 2.25rem;
+}
+.Layer__UI__Button[data-inset] {
+  --size: 1.75rem;
 }
 .Layer__UI__Button[data-icon] {
+  min-inline-size: var(--size);
   padding-inline: 0;
 }
-.Layer__UI__Button[data-variant=solid] {
-  background-color: var(--button-bg-default);
-  color: var(--button-fg-default);
+.Layer__UI__Button[data-focus-visible] {
+  outline: 1px auto -webkit-focus-ring-color;
 }
-.Layer__UI__Button[data-variant=solid][data-hovered] {
-  background-color: var(--button-bg-active);
+.Layer__UI__Button[data-hovered]:not([data-pressed], [data-focus-visible]) {
+  outline: 1px solid var(--outline-default);
 }
-.Layer__UI__Button[data-focus-visible] {
-  outline-style: solid;
-  outline-offset: 0.12rem;
-  outline-color: var(--button-bg-default);
+.Layer__UI__Button[data-disabled] {
+  cursor: not-allowed;
+}
+.Layer__UI__Button[data-pending] {
+  cursor: progress;
 }
 .Layer__UI__Button[data-variant=ghost] {
+  border: none;
   background-color: transparent;
   color: var(--button-fg-ghost);
-  border: 1px solid transparent;
-}
-.Layer__UI__Button[data-variant=ghost][data-hovered] {
-  background-color: var(--button-bg-ghost-active);
-  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=sm] {
-  --min-size: 1.5rem;
-  min-block-size: var(--min-size);
-  font-size: var(--text-sm);
-}
-.Layer__UI__Button[data-size=sm][data-icon] {
-  min-inline-size: var(--min-size);
 }
-.Layer__UI__Button[data-size=sm]:not([data-icon]) {
-  padding-inline: var(--spacing-xs);
-}
-.Layer__UI__Button[data-size=md] {
-  --min-size: 2rem;
-  min-block-size: var(--min-size);
-  font-size: var(--text-md);
+.Layer__UI__Button[data-variant=ghost][data-pending],
+.Layer__UI__Button[data-variant=ghost][data-disabled] {
+  background-color: transparent;
+  color: var(--button-fg-disabled);
 }
-.Layer__UI__Button[data-size=md][data-icon] {
-  min-inline-size: var(--min-size);
+.Layer__UI__Button[data-variant=ghost][data-pressed]:not([data-focus-visible]) {
+  border-color: var(--button-border-color-ghost-active);
+  outline: 2px solid var(--outline-default);
 }
-.Layer__UI__Button[data-size=md]:not([data-icon]) {
-  padding-inline: var(--spacing-md);
+.Layer__UI__Button[data-variant=outlined] {
+  border: 1px solid var(--button-border-color-ghost);
+  background-color: transparent;
+  color: var(--button-fg-ghost);
 }
-.Layer__UI__Button[data-size=lg] {
-  --min-size: 2.25rem;
-  min-block-size: var(--min-size);
-  font-size: var(--text-lg);
+.Layer__UI__Button[data-variant=outlined][data-pending],
+.Layer__UI__Button[data-variant=outlined][data-disabled] {
+  background-color: transparent;
+  color: var(--button-fg-disabled);
 }
-.Layer__UI__Button[data-size=lg][data-icon] {
-  min-inline-size: var(--min-size);
+.Layer__UI__Button[data-variant=outlined][data-pressed]:not([data-focus-visible]) {
+  border-color: var(--button-border-color-ghost-active);
+  outline: 2px solid var(--outline-default);
 }
-.Layer__UI__Button[data-size=lg]:not([data-icon]) {
-  padding-inline: var(--spacing-lg);
+.Layer__UI__Button[data-variant=solid] {
+  background-color: var(--button-bg-default);
+  color: var(--button-fg-default);
 }
-.Layer__UI__Button[data-disabled] {
+.Layer__UI__Button[data-variant=solid][data-disabled],
+.Layer__UI__Button[data-variant=solid][data-pending] {
   background-color: var(--button-bg-disabled);
-  cursor: not-allowed;
   color: var(--button-fg-disabled);
 }
-.Layer__UI__Button[data-pending] {
-  background-color: var(--button-bg-disabled);
-  cursor: progress;
+.Layer__UI__Button[data-variant=solid][data-hovered]:not([data-pressed]) {
+  background-color: var(--button-bg-active);
 }
-.Layer__UI__Button[data-pending][data-variant=ghost] {
-  background-color: transparent;
+.Layer__UI__Button[data-variant=solid][data-pressed]:not([data-focus-visible]) {
+  outline: 2px solid var(--outline-default);
+  background-color: var(--button-bg-active);
 }
 .Layer__ButtonTransparentContent {
   opacity: 0;
@@ -4552,12 +4526,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__ButtonSpinnerContainer {
   grid-row: 1/-1;
   grid-column: 1/-1;
-  height: 16px;
+  height: 1rem;
   place-self: center;
 }
-.Layer__ButtonSpinnerContainer[data-size=lg] {
-  height: 20px;
-}
 .Layer__Checkbox {
   display: inline-flex;
   align-items: center;
@@ -4678,16 +4649,44 @@ tbody .Layer__table__empty-row:first-child {
   min-inline-size: 0;
   padding-inline: var(--spacing-xs);
   outline: none;
+  background-color: transparent;
   font-size: var(--input-font-size);
   line-height: 140%;
   font-family: var(--font-family);
   vertical-align: middle;
 }
-.Layer__UI__Input[data-placement=first-within-group] {
+.Layer__UI__Input[data-inset] {
+  padding-inline: 0;
   border: none;
+}
+.Layer__UI__Input[data-placement=first] {
   border-start-start-radius: inherit;
   border-end-start-radius: inherit;
 }
+.Layer__InputGroup {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--spacing-3xs);
+  align-items: center;
+  min-block-size: 2.25rem;
+  padding-inline-start: var(--spacing-xs);
+  padding-inline-end: var(--spacing-3xs);
+  border-radius: var(--input-border-radius);
+  border: 1px solid var(--outline-default);
+  background-color: var(--color-base-0);
+}
+.Layer__InputGroup[data-focus-within] {
+  border-color: var(--outline-active);
+}
+.Layer__InputGroup[data-focus-visible] {
+  outline: 1px solid var(--outline-default);
+}
+.Layer__InputGroup[data-action-count="2"] {
+  grid-template-columns: minmax(0, 1fr) auto auto;
+}
+.Layer__InputGroup[data-disabled] {
+  cursor: not-allowed;
+}
 .Layer__ListBox {
   display: flex;
   flex-direction: column;
@@ -4719,7 +4718,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__ListBoxItem[data-focus-visible] {
   outline-offset: -2px;
-  outline: 2px solid var(--outline-active);
+  outline: 2px solid var(--outline-default);
 }
 .Layer__ListBoxItem[data-selected] {
   background: var(--color-base-100);
@@ -4765,14 +4764,12 @@ tbody .Layer__table__empty-row:first-child {
   outline-offset: 1px;
 }
 .Layer__ModalOverlay {
-  display: grid;
-  place-items: center;
   position: fixed;
+  z-index: 100;
   inset: 0;
-  max-inline-size: 100dvi;
-  max-block-size: 100dvh;
+  display: grid;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 100;
+  place-items: center;
 }
 .Layer__ModalOverlay[data-entering] {
   animation-duration: 150ms;
@@ -4781,10 +4778,8 @@ tbody .Layer__table__empty-row:first-child {
   animation-duration: 150ms;
 }
 .Layer__Modal {
-  inline-size: min(36rem, 90dvi);
-  max-inline-size: 90dvi;
-  block-size: min(42rem, 90dvb);
-  max-block-size: 90dvb;
+  block-size: min(42rem, 90%);
+  inline-size: min(36rem, 90%);
 }
 .Layer__Modal[data-entering] {
   animation-duration: 300ms;
@@ -4796,34 +4791,34 @@ tbody .Layer__table__empty-row:first-child {
   block-size: auto;
 }
 .Layer__Modal[data-size=lg] {
-  inline-size: min(42rem, 90dvi);
+  inline-size: min(42rem, 90%);
 }
 .Layer__Dialog {
-  outline: none;
-  background-color: white;
+  display: flex;
+  flex-direction: column;
   block-size: 100%;
   padding: var(--spacing-md);
   border-radius: var(--border-radius-2xs);
-  display: flex;
-  flex-direction: column;
+  outline: none;
+  background-color: white;
 }
 .Layer__Dialog [slot=content] {
   flex: 1;
 }
-.Layer__ModalContextBar {
-  display: grid;
-  grid-template-areas: "back logo close";
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  column-gap: var(--spacing-md);
-  align-items: center;
+.Layer__ModalCloseButton--position-absolute {
+  position: absolute;
+  align-self: end;
 }
-.Layer__ModalContextBar > [slot=back] {
-  grid-area: back;
+.Layer__ModalTitleWithClose {
+  display: grid;
+  grid-template-areas: "title close";
+  grid-template-columns: 1fr auto;
+  gap: var(--spacing-sm);
 }
-.Layer__ModalContextBar > [slot=logo] {
-  grid-area: logo;
+.Layer__ModalTitleWithClose > [slot=title] {
+  grid-area: title;
 }
-.Layer__ModalContextBar > [slot=close] {
+.Layer__ModalTitleWithClose > [slot=close] {
   grid-area: close;
 }
 .Layer__ModalContent {
@@ -4866,13 +4861,13 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__Popover {
   display: grid;
-  inline-size: min(90svi, 40ch);
+  inline-size: min(90svi, 60ch);
   border-radius: var(--border-radius-xs);
   border: 2px solid var(--outline-default);
   background: var(--color-base-0);
 }
 .Layer__Popover[data-trigger=ComboBox] {
-  min-inline-size: min(var(--trigger-width), 90svi);
+  inline-size: clamp(min(var(--trigger-width), 90svi), var(--trigger-width) * 1.5, min(80ch, 90svi));
 }
 .Layer__Stack {
   display: flex;
@@ -5129,12 +5124,11 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__MinimalSearchField > [slot=input] {
   grid-area: input;
-  min-block-size: 1.5rem;
   padding-inline: var(--spacing-3xs);
+  border: none;
   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 {
@@ -5154,8 +5148,8 @@ tbody .Layer__table__empty-row:first-child {
   place-items: center;
   aspect-ratio: 1/1;
 }
-.Layer__Square[data-size=sm] {
-  --min-size: 1.5rem;
+.Layer__Square[data-inset] {
+  --min-size: 1.75rem;
   min-block-size: var(--min-size);
   min-inline-size: var(--min-size);
 }
@@ -5177,9 +5171,8 @@ tbody .Layer__table__empty-row:first-child {
   grid-template-columns: auto minmax(0, 1fr) auto;
   gap: var(--spacing-2xs);
   align-items: center;
-  min-block-size: 2.5rem;
+  block-size: 2.25rem;
   min-inline-size: 0;
-  padding-block: var(--spacing-3xs);
   padding-inline: var(--spacing-xs);
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--outline-default);
@@ -5197,12 +5190,13 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__Tag[data-focus-visible] {
   border-color: var(--outline-active);
-  outline: 1px solid var(--outline-active);
+  outline: 1px solid var(--outline-default);
 }
 .Layer__UI__Heading {
-  all: unset;
   max-inline-size: 60rem;
+  margin: 0;
   font-size: var(--text-heading-secondary);
+  font-family: var(--font-family);
   font-weight: var(--font-weight-bold);
   color: var(--color-base-700);
   text-wrap: pretty;
@@ -5213,33 +5207,63 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
 }
+.Layer__UI__Heading[data-pie="3xs"] {
+  padding-inline-end: var(--spacing-3xs);
+}
 .Layer__UI__Heading[data-pbe="2xs"] {
   padding-block-end: var(--spacing-2xs);
 }
+.Layer__UI__Heading[data-pie="2xs"] {
+  padding-inline-end: var(--spacing-2xs);
+}
 .Layer__UI__Heading[data-pbe=xs] {
   padding-block-end: var(--spacing-xs);
 }
+.Layer__UI__Heading[data-pie=xs] {
+  padding-inline-end: var(--spacing-xs);
+}
 .Layer__UI__Heading[data-pbe=sm] {
   padding-block-end: var(--spacing-sm);
 }
+.Layer__UI__Heading[data-pie=sm] {
+  padding-inline-end: var(--spacing-sm);
+}
 .Layer__UI__Heading[data-pbe=md] {
   padding-block-end: var(--spacing-md);
 }
+.Layer__UI__Heading[data-pie=md] {
+  padding-inline-end: var(--spacing-md);
+}
 .Layer__UI__Heading[data-pbe=lg] {
   padding-block-end: var(--spacing-lg);
 }
+.Layer__UI__Heading[data-pie=lg] {
+  padding-inline-end: var(--spacing-lg);
+}
 .Layer__UI__Heading[data-pbe=xl] {
   padding-block-end: var(--spacing-xl);
 }
+.Layer__UI__Heading[data-pie=xl] {
+  padding-inline-end: var(--spacing-xl);
+}
 .Layer__UI__Heading[data-pbe="2xl"] {
   padding-block-end: var(--spacing-2xl);
 }
+.Layer__UI__Heading[data-pie="2xl"] {
+  padding-inline-end: var(--spacing-2xl);
+}
 .Layer__UI__Heading[data-pbe="3xl"] {
   padding-block-end: var(--spacing-3xl);
 }
+.Layer__UI__Heading[data-pie="3xl"] {
+  padding-inline-end: var(--spacing-3xl);
+}
 .Layer__UI__Heading[data-pbe="5xl"] {
   padding-block-end: var(--spacing-5xl);
 }
+.Layer__UI__Heading[data-pie="5xl"] {
+  padding-inline-end: var(--spacing-5xl);
+}
 .Layer__UI__Heading[data-size="2xs"] {
   font-size: var(--text-heading-2xs);
 }
@@ -5252,6 +5276,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-size=lg] {
   font-size: var(--text-heading-secondary);
 }
+.Layer__UI__Heading[data-size=xl] {
+  font-size: var(--text-heading);
+}
 .Layer__UI__Heading[data-align=left] {
   text-align: left;
 }
@@ -5305,6 +5332,7 @@ tbody .Layer__table__empty-row:first-child {
   max-inline-size: min(80ch, 60rem);
   margin: 0;
   font-size: var(--text-md);
+  font-family: var(--font-family);
   color: var(--color-base-700);
   text-wrap: pretty;
 }
@@ -5580,14 +5608,21 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__InvisibleDownload {
   display: none;
 }
+.Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip {
+  display: flex;
+  flex: 1 1;
+}
+.Layer__custom-account-form .Layer__custom-account-form__field > .Layer__input-tooltip > .Layer__custom-account-form__input {
+  flex: 1 1;
+}
 .Layer__csv-upload {
+  position: relative;
   height: 6rem;
-  border-radius: var(--spacing-3xs);
   padding: var(--spacing-xs);
+  border-radius: var(--spacing-3xs);
+  border: 1px dashed var(--color-base-300);
   background: var(--color-base-100);
-  border: 1px dashed var(--color-base-400);
   transition: border-color 0.5s, background-color 0.5s;
-  position: relative;
 }
 .Layer__csv-upload--drag-active {
   background: var(--color-base-200);
@@ -5615,30 +5650,34 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__csv-upload__file-row {
   height: 2rem;
-  border-radius: var(--border-radius-3xs);
   padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-3xs);
+  border: 1px solid var(--color-base-300);
   background: var(--color-base-100);
-  border: 1px solid var(--color-base-400);
 }
 .Layer__csv-upload__file-row--drop-target {
   height: 6rem;
 }
 .Layer__csv-upload__copy-template-headers-button-group {
+  box-sizing: border-box;
   padding: var(--spacing-3xs);
   border-radius: var(--border-radius-3xs);
   background-color: var(--color-base-200);
 }
+.Layer__csv-upload__copy-template-headers-button-group .Layer__btn {
+  flex: 1 1 auto;
+}
 .Layer__csv-upload__validate-csv-table__container {
+  position: relative;
+  overflow: auto;
   border-radius: var(--border-radius-3xs);
   border: 1px solid var(--border-color);
-  overflow: auto;
-  position: relative;
   outline-offset: 1px;
 }
 .Layer__csv-upload__validate-csv-table__header {
-  top: 0;
   position: sticky;
   z-index: 1;
+  top: 0;
   background-color: var(--bg-subtle);
 }
 .Layer__csv-upload__validate-csv-table__header-row {
@@ -5646,12 +5685,12 @@ tbody .Layer__table__empty-row:first-child {
   width: 100%;
 }
 .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell {
-  padding: 0;
+  box-sizing: border-box;
   display: flex;
   flex: 1 1 0;
-  border-left: 1px solid var(--border-color);
+  padding: 0;
   border-bottom: 1px solid var(--border-color);
-  box-sizing: border-box;
+  border-left: 1px solid var(--border-color);
 }
 .Layer__table-header.Layer__csv-upload__validate-csv-table__header-cell--row {
   flex: 0 0 68px;
@@ -5664,9 +5703,9 @@ tbody .Layer__table__empty-row:first-child {
   margin-left: auto;
 }
 .Layer__table-row.Layer__csv-upload__validate-csv-table__row {
+  position: absolute;
   display: flex;
   width: 100%;
-  position: absolute;
 }
 .Layer__table-row.Layer__csv-upload__validate-csv-table__row--error {
   background-color: var(--color-info-error-bg);
@@ -5675,10 +5714,10 @@ tbody .Layer__table__empty-row:first-child {
   border-bottom: 1px solid var(--border-color);
 }
 .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell {
+  box-sizing: border-box;
   flex: 1 1 0%;
-  min-width: 0px;
+  min-width: 0;
   border-left: 1px solid var(--border-color);
-  box-sizing: border-box;
 }
 .Layer__table-cell.Layer__csv-upload__validate-csv-table__cell--row {
   flex: 0 0 68px;
@@ -5686,11 +5725,11 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content {
   display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
   align-content: center;
+  overflow: hidden;
   width: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 .Layer__table .Layer__table-cell .Layer__table-cell-content.Layer__csv-upload__validate-csv-table__cell-content--error {
   color: var(--color-info-error-fg);
@@ -5700,26 +5739,27 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__TransactionsActions {
   display: grid;
+  grid-template-areas: "toggle . download-upload" "search search search";
   grid-template-columns: auto minmax(0, 1fr) auto;
   gap: var(--spacing-xs);
-  grid-template-areas: "toggle . download" "search search search";
+  align-items: center;
 }
 @container (min-width: 640px) {
   .Layer__TransactionsActions {
-    grid-template-columns: auto minmax(0, 2fr) minmax(0, 3fr) auto;
-    grid-template-areas: "toggle . search download";
+    grid-template-areas: "toggle . search download-upload";
+    grid-template-columns: auto minmax(0, 2fr) minmax(15rem, 3fr) auto;
   }
 }
 @container (min-width: 780px) {
   .Layer__TransactionsActions {
-    grid-template-columns: auto minmax(0, 3fr) minmax(0, 2fr) auto;
-    grid-template-areas: "toggle . search download";
+    grid-template-areas: "toggle . search download-upload";
+    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 2fr) auto;
   }
 }
 @container (min-width: 1024px) {
   .Layer__TransactionsActions {
-    grid-template-columns: auto minmax(0, 3fr) minmax(0, 1fr) auto;
-    grid-template-areas: "toggle . search download";
+    grid-template-areas: "toggle . search download-upload";
+    grid-template-columns: auto minmax(0, 3fr) minmax(15rem, 1fr) auto;
   }
 }
 .Layer__TransactionsActions > [slot=toggle] {
@@ -5728,17 +5768,18 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__TransactionsActions > [slot=search] {
   grid-area: search;
 }
-.Layer__TransactionsActions > [slot=download] {
-  grid-area: download;
+.Layer__TransactionsActions > [slot=download-upload] {
+  grid-area: download-upload;
 }
 .Layer__TransactionsSearchField {
   display: grid;
   grid-template-areas: "icon search";
   grid-template-columns: auto minmax(0, 1fr);
   align-items: center;
-  background: var(--color-base-0);
+  height: 2.25rem;
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--border-color);
+  background: var(--color-base-0);
   padding-inline-end: var(--spacing-3xs);
 }
 .Layer__TransactionsSearchField[data-focus-within] {
@@ -5746,8 +5787,8 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__TransactionsSearchField > [slot=icon] {
   grid-area: icon;
-  inline-size: 2rem;
   block-size: 2rem;
+  inline-size: 2rem;
 }
 .Layer__TransactionsSearchField > [slot=search] {
   grid-area: search;
@@ -7435,73 +7476,85 @@ tbody .Layer__table__empty-row:first-child {
   flex: 1;
   padding: var(--spacing-lg);
 }
-.Layer__upload-transactions__select-account-name-field > .Layer__input-tooltip {
+.Layer__upload-transactions {
+  container-type: inline-size;
+}
+.Layer__upload-transactions .Layer__upload-transactions__select-account-name-field > .Layer__input-tooltip {
   flex: auto;
 }
-.Layer__upload-transactions__select-account-name-input .Layer__select__control {
-  width: 24rem;
-  min-height: 44px;
+.Layer__upload-transactions .Layer__upload-transactions__select-account-name-input .Layer__select__control {
+  max-width: 24rem;
 }
-.Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
+.Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__control {
   box-shadow: 0 0 0 1px var(--color-base-300), 0 0 0 2px var(--color-danger);
 }
-.Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
+.Layer__upload-transactions .Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
   color: var(--color-danger);
 }
-.Layer__upload-transactions__create-account-form {
+.Layer__upload-transactions .Layer__upload-transactions__create-account-form {
+  padding: var(--spacing-md);
   border-radius: var(--border-radius-3xs);
-  padding: var(--spacing-xs);
   background: var(--color-base-100);
 }
-.Layer__upload-transactions__parse-csv-error-message {
+.Layer__upload-transactions .Layer__upload-transactions__parse-csv-error-message {
   max-width: 29rem;
 }
-.Layer__upload-transactions__template-section {
-  border-radius: var(--border-radius-3xs);
-  border: 1px solid var(--color-base-400);
+.Layer__upload-transactions .Layer__upload-transactions__template-section {
   padding: var(--spacing-md);
+  border-radius: var(--border-radius-3xs);
+  border: 1px solid var(--color-base-300);
+}
+.Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
+  display: flex;
+  justify-content: space-between;
 }
-.Layer__upload-transactions__confirmation-step__data-state .Layer__data-state__description {
+@container (max-width: 36rem) {
+  .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row {
+    flex-direction: column;
+  }
+  .Layer__upload-transactions .Layer__upload-transactions__template-section__button-row > .Layer__upload-transactions__template-section__button-row-item {
+    width: 100%;
+  }
+}
+@container (max-width: 30rem) {
+  .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row {
+    flex-direction: column;
+  }
+  .Layer__upload-transactions .Layer__upload-transactions__confirmation-step__button-row > .Layer__upload-transactions__confirmation-step__button-row-item {
+    width: 100%;
+  }
+}
+.Layer__upload-transactions .Layer__upload-transactions__confirmation-step__data-state .Layer__data-state__description {
   margin-bottom: 0;
 }
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
-  min-width: 120px;
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--date,
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--date {
+  min-width: 7.5rem;
 }
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
-  min-width: 120px;
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount,
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount {
+  min-width: 7.5rem;
 }
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content,
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content {
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content,
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__header-cell-content {
   margin-left: auto;
 }
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__cell-content,
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__cell-content {
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--amount .Layer__csv-upload__validate-csv-table__cell-content,
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--amount .Layer__csv-upload__validate-csv-table__cell-content {
   text-align: right;
 }
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
-.Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__cell--description,
+.Layer__upload-transactions .Layer__upload-transactions__preview_table .Layer__csv-upload__validate-csv-table__header-cell--description {
   flex: 3 1 0;
+  min-width: 12rem;
 }
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--spacing-xs);
 }
-.Layer__TagSelectorInputGroup {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  min-block-size: 2.5rem;
-  border-radius: var(--input-border-radius);
-  border: 1px solid var(--outline-default);
-  background-color: var(--color-base-0);
-}
-.Layer__TagSelectorInputGroup[data-focus-within] {
-  border-color: var(--outline-active);
-}
-.Layer__TagSelectorInputGroup[data-focus-visible] {
-  outline: 1px solid var(--outline-active);
+.Layer__ListBoxItem:not([data-disabled]) .Layer__TagSelectorCheckIcon {
+  visibility: hidden;
 }
 .Layer__Public,
 .Layer__Public::before,
@@ -7511,6 +7564,14 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Public *::after {
   box-sizing: border-box;
 }
+.Layer__Portal,
+.Layer__Portal::before,
+.Layer__Portal::after,
+.Layer__Portal *,
+.Layer__Portal *::before,
+.Layer__Portal *::after {
+  box-sizing: border-box;
+}
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
   width: 100%;
@@ -7667,8 +7728,8 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__balance-sheet {
+  border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
   background-color: var(--background-color);
 }
 .Layer__balance-sheet * {
@@ -7683,12 +7744,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__balance-sheet .Layer__balance-sheet__title {
   display: inline;
   flex: 1;
-  font-size: var(--text-heading);
   margin: 0;
+  font-size: var(--text-heading);
 }
 .Layer__statement-of-cash-flow {
+  border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
-  border-radius: var(--corner-radius);
   background-color: var(--background-color);
 }
 .Layer__statement-of-cash-flow .Layer__panel_view-header__controls {
@@ -7706,8 +7767,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__title {
   display: inline;
   flex: 1;
-  font-size: var(--text-heading);
   margin: 0;
+  font-size: var(--text-heading);
 }
 @container (max-width: 800px) {
   .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
@@ -7718,8 +7779,8 @@ tbody .Layer__table__empty-row:first-child {
 @container (max-width: 540px) {
   .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header {
     flex-direction: row;
-    gap: var(--spacing-sm);
     flex-wrap: wrap;
+    gap: var(--spacing-sm);
   }
   .Layer__statement-of-cash-flow .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
     flex-wrap: wrap;
@@ -7741,8 +7802,8 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
   gap: var(--spacing-xs);
+  justify-content: space-between;
 }
 .Layer__statement-of-cash-flow__header .Layer__statement-of-cash-flow__actions .Layer__statement-of-cash-flow__actions__date-picker {
   display: flex;
@@ -7844,6 +7905,12 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transactions__header--with-date-picker.Layer__bank-transactions__header--mobile .Layer__datepicker__wrapper {
   margin-right: 4px;
 }
+.Layer__bank-transactions__header-menu__upload-transactions-icon {
+  color: var(--color-base-500);
+  background: var(--color-base-200);
+  border-radius: var(--spacing-3xs);
+  padding: var(--spacing-3xs);
+}
 .Layer__bank-transaction-row {
   transition: all var(--transition-speed) ease-in-out;
   opacity: 0.3;
@@ -9913,7 +9980,7 @@ tbody .Layer__table__empty-row:first-child {
   }
 }
 .Layer__chevron {
-  stroke: var(--text-color);
+  stroke: var(--color-base-900);
   transition: transform 0.33s;
 }
 .Layer__chevron__down {
@@ -9926,20 +9993,20 @@ tbody .Layer__table__empty-row:first-child {
   transform: rotate(-180deg);
 }
 .Layer__icon-box {
-  width: 32px;
-  height: 32px;
-  background-color: var(--color-base-0);
-  border-radius: var(--border-radius-3xs);
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  height: 32px;
+  width: 32px;
+  border-radius: var(--border-radius-3xs);
+  background-color: var(--color-base-0);
   color: var(--color-base-1000);
 }
 .Layer__linked-accounts {
-  min-height: 150px;
   box-sizing: border-box;
-  overflow: visible;
   z-index: 1;
+  overflow: visible;
+  min-height: 150px;
   max-width: var(--max-component-width);
 }
 .Layer__linked-accounts::-webkit-scrollbar {
@@ -9954,18 +10021,18 @@ tbody .Layer__table__empty-row:first-child {
   padding-top: 0;
 }
 .Layer__linked-accounts__header {
-  padding: var(--spacing-md);
   position: sticky;
   left: 0;
+  padding: var(--spacing-md);
 }
 .Layer__linked-accounts__list {
-  padding: var(--spacing-md);
   display: flex;
   flex-wrap: wrap;
-  align-items: stretch;
   gap: var(--spacing-md);
+  align-items: stretch;
+  padding: var(--spacing-md);
 }
-@media screen and (max-width: 650px) {
+@media screen and (width <= 650px) {
   .Layer__linked-accounts__list {
     flex-wrap: nowrap;
     overflow-x: scroll;
@@ -9985,19 +10052,19 @@ tbody .Layer__table__empty-row:first-child {
   padding: var(--spacing-lg);
 }
 .Layer__linked-accounts__new-account {
-  cursor: pointer;
+  box-sizing: border-box;
   display: flex;
+  flex: 1;
   align-items: center;
   justify-content: center;
-  flex: 1;
-  max-width: 272px;
   min-height: 136px;
+  min-width: 286px;
+  max-width: 272px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
   background: var(--base-transparent-1);
+  cursor: pointer;
   transition: all 0.15s ease-out;
-  min-width: 286px;
-  box-sizing: border-box;
 }
 .Layer__linked-accounts__new-account.--as-widget {
   min-height: 90px;
@@ -10013,12 +10080,12 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__linked-accounts__new-account .Layer__linked-accounts__new-account-label {
   display: flex;
-  align-items: center;
-  justify-content: center;
   flex-wrap: wrap;
   gap: var(--spacing-xs);
-  color: var(--color-base-500);
+  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 {
@@ -10031,77 +10098,74 @@ tbody .Layer__table__empty-row:first-child {
 }
 .skeleton-loader {
   position: relative;
+  overflow: hidden;
   padding: 1rem;
-  background: white;
   border-radius: var(--border-radius-base);
-  overflow: hidden;
+  background: white;
 }
 .skeleton-loader::after {
-  display: block;
-  content: "";
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
+  display: block;
   height: 100%;
-  transform: translateX(-100%);
+  width: 100%;
   background:
     linear-gradient(
       90deg,
       transparent,
       rgb(255, 255, 255),
       transparent);
+  content: "";
+  transform: translateX(-100%);
   animation: skeletonSweep 1.5s infinite;
 }
 .Layer__linked-account-thumb {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4xs);
+  gap: var(--spacing-3xs);
+  justify-content: space-between;
+  height: 136px;
+  width: 286px;
   padding: var(--spacing-2xs);
   border-radius: var(--border-radius-sm);
-  background: var(--color-base-0);
   border: 1px solid var(--color-base-100);
-  box-sizing: border-box;
-  width: 286px;
-  height: 136px;
-  justify-content: space-between;
+  background: var(--color-base-0);
 }
 .Layer__linked-account-thumb.Layer__integrations-quickbooks-item-thumb {
   box-shadow: none;
 }
-.Layer__linked-account-thumb.Layer__integrations-quickbooks-item-thumb .topbar {
-  flex: 1;
-  margin-bottom: var(--spacing-4xs);
-}
 .Layer__linked-account-thumb.--show-ledger-balance {
   height: 154px;
 }
 .Layer__linked-account-thumb .topbar {
-  min-width: 272px;
+  box-sizing: border-box;
   display: flex;
+  flex: 1;
   align-items: flex-start;
   justify-content: space-between;
-  background: var(--color-base-50);
-  color: var(--text-color-primary);
+  min-width: 272px;
+  padding: var(--spacing-xs);
   border-top-left-radius: var(--border-radius-xs);
   border-top-right-radius: var(--border-radius-xs);
-  border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  padding: var(--spacing-xs);
-  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  background: var(--color-base-50);
+  color: var(--text-color-primary);
 }
 .Layer__linked-account-thumb .topbar.--hide-ledger-balance {
   padding-bottom: var(--spacing-sm);
 }
 .Layer__linked-account-thumb .topbar.--is-syncing {
-  color: var(--color-base-500);
-  background: none;
   z-index: 50;
+  background: none;
+  color: var(--color-base-500);
 }
 .Layer__linked-account-thumb .topbar .account-institution {
+  overflow: hidden;
   color: var(--color-base-500);
   white-space: nowrap;
-  overflow: hidden;
   text-overflow: ellipsis;
 }
 .Layer__linked-account-thumb .topbar .topbar-details {
@@ -10115,57 +10179,57 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 52px;
   height: 28px;
+  width: 52px;
   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__linked-account-thumb .topbar .account-name {
   flex: 1;
+  overflow: hidden;
+  width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
-  width: 200px;
-  overflow: hidden;
 }
 .Layer__linked-account-thumb .middlebar {
   box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: var(--color-base-50);
   padding: 0 var(--spacing-xs);
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  border-bottom-left-radius: var(--border-radius-xs);
   border-bottom-right-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
+  background: var(--color-base-50);
 }
 .Layer__linked-account-thumb .middlebar .account-balance-text {
-  color: var(--color-base-500);
   padding: var(--spacing-sm) 0;
+  color: var(--color-base-500);
 }
 .Layer__linked-account-thumb .loadingbar {
+  z-index: 100;
   display: flex;
-  padding: var(--spacing-xs);
-  border-bottom-left-radius: var(--border-radius-xs);
-  border-bottom-right-radius: var(--border-radius-xs);
   gap: var(--spacing-xs);
   align-items: center;
-  z-index: 100;
+  padding: var(--spacing-xs);
+  border-bottom-right-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
 }
 .Layer__linked-account-thumb .loadingbar .loading-text {
   flex: 1;
   line-height: 140%;
 }
 .Layer__linked-account-thumb .loadingbar .loading-wrapper {
-  width: 28px;
-  height: 28px;
-  background: var(--color-blue);
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 28px;
+  width: 28px;
+  border-radius: 50%;
+  background: var(--color-blue);
 }
 .Layer__linked-account-thumb .loadingbar .syncing-data-description {
   color: var(--color-base-500);
@@ -10187,18 +10251,18 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-2xs);
 }
 .Layer__linked-account-thumb.--as-widget .topbar {
-  border-bottom-left-radius: var(--border-radius-xs);
   border-bottom-right-radius: var(--border-radius-xs);
+  border-bottom-left-radius: var(--border-radius-xs);
 }
 .Layer__linked-account-thumb.--as-widget .account-number {
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 20px;
   padding: var(--spacing-3xs) var(--spacing-xs);
+  border-radius: var(--border-radius-xs);
   background: var(--color-base-50);
   color: var(--color-base-500);
-  border-radius: var(--border-radius-xs);
-  height: 20px;
 }
 .Layer__linked-account-thumb.--as-widget .bottombar {
   padding: 0 var(--spacing-xs) 0 0;
@@ -10219,35 +10283,35 @@ tbody .Layer__table__empty-row:first-child {
   transform: translate3d(0, 0, 0);
 }
 .Layer__linked-accounts__options .Layer__linked-accounts__options-overlay {
-  opacity: 0;
-  touch-action: none;
   position: absolute;
   z-index: 99;
   top: var(--spacing-2xs);
   right: var(--spacing-2xs);
-  width: 74px;
-  height: 54px;
   display: flex;
   justify-content: flex-end;
-  transition: 0.15s all ease-out;
+  height: 54px;
+  width: 74px;
   border-top-right-radius: var(--border-radius-sm);
   background:
     linear-gradient(
       270deg,
       #f8f8fa 1.52%,
       rgba(248, 248, 250, 0) 99.75%);
+  opacity: 0;
+  touch-action: none;
+  transition: 0.15s all ease-out;
 }
 .Layer__linked-accounts__options .Layer__linked-accounts__options-overlay .Layer__linked-accounts__options-overlay-button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
   height: 24px;
+  width: 24px;
+  border-radius: var(--spacing-2xs);
+  border: none;
+  box-shadow: 0 0 8px 0 var(--base-transparent-12, rgba(16, 24, 40, 0.12));
   margin: var(--spacing-xs);
   background: var(--color-base-0);
-  border: none;
-  box-shadow: 0px 0px 8px 0px var(--base-transparent-12, rgba(16, 24, 40, 0.12));
-  border-radius: var(--spacing-2xs);
   cursor: pointer;
   transform: translate3d(5px, -5px, 0);
   transition: 0.15s all ease-out;
@@ -10753,11 +10817,9 @@ tbody .Layer__table__empty-row:first-child {
   border-radius: var(--border-radius-sm);
   background-color: var(--color-base-100);
 }
-.Layer__profit-and-loss-table__loader-container {
-  padding: var(--spacing-2xl);
-}
 .Layer__profit-and-loss-table__loader-container {
   min-height: 950px;
+  padding: var(--spacing-2xl);
 }
 .Layer__profit-and-loss-table__outflows {
   padding-top: var(--spacing-2xs);
@@ -10786,12 +10848,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-row__children--expanded {
   grid-template-rows: 1fr;
 }
-.Layer__profit-and-loss-row__children--content {
-  display: grid;
-  grid-template-columns: subgrid;
-  grid-column: span 2;
-  min-height: 0;
-}
 .Layer__profit-and-loss-row__label {
   display: flex;
   align-items: center;
@@ -10802,13 +10858,18 @@ tbody .Layer__table__empty-row:first-child {
   align-items: center;
 }
 .Layer__profit-and-loss-row__label svg.Layer__profit-and-loss-row__label__chevron {
-  width: 1.25rem;
   height: 1.25rem;
+  width: 1.25rem;
   margin-right: 0.25rem;
   color: var(--color-base-600);
   transition: transform var(--transition-speed);
   transform: rotate(-90deg);
 }
+.Layer__profit-and-loss-row__label .Layer__text {
+  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--display-children-true:hover,
 .Layer__profit-and-loss-row__label.Layer__profit-and-loss-row__label--display-children-true:hover + .Layer__profit-and-loss-row__value,
 .Layer__profit-and-loss-row__value.Layer__profit-and-loss-row__value--display-children-true:hover,
@@ -10871,11 +10932,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-row__value--amount-negative .Layer__text::before {
   content: "-$";
 }
-.Layer__profit-and-loss-row__label .Layer__text {
-  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 {
   margin: 0;
   font-weight: var(--font-weight-bold);
@@ -10987,16 +11043,16 @@ tbody .Layer__table__empty-row:first-child {
   stroke: var(--color-base-200);
 }
 #layer-bar-stripe-pattern rect {
-  fill: var(--color-base-400);
+  fill: var(--color-light);
 }
 #layer-bar-stripe-pattern line {
-  stroke: var(--color-base-400);
+  stroke: var(--color-light);
 }
 #layer-bar-stripe-pattern-dark rect {
-  fill: var(--color-base-900);
+  fill: var(--color-dark);
 }
 #layer-bar-stripe-pattern-dark line {
-  stroke: var(--color-base-900);
+  stroke: var(--color-dark);
 }
 #layer-pie-stripe-pattern rect {
   fill: var(--color-base-300);
@@ -11070,8 +11126,8 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
   height: 20px;
+  width: 20px;
   border-radius: 50%;
   margin-left: auto;
   background: var(--color-base-100);
@@ -11092,9 +11148,9 @@ tbody .Layer__table__empty-row:first-child {
   gap: var(--spacing-md);
   align-items: center;
   justify-content: center;
+  height: 120px;
   width: 260px;
   max-width: 70%;
-  height: 120px;
   padding: var(--spacing-lg) var(--spacing-4xs);
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 0 1px var(--base-transparent-4);
@@ -11454,50 +11510,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__project-view .Layer__select__menu {
   z-index: 2;
 }
-.Layer__radio-button-group {
-  display: flex;
-  font-size: 1rem;
-  align-items: center;
-  flex: 1;
-  justify-content: flex-end;
-  padding-top: 0.5rem;
-}
-.Layer__radio-button-group__radio-button {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-}
-.Layer__radio-button-group__radio-button input {
-  position: absolute;
-  opacity: 0;
-  width: 1px;
-}
-.Layer__radio-button-group__radio-button div {
-  padding: 0.6rem 1rem;
-  border: 1px solid var(--buttons-border-color);
-  border-right: 0;
-  border-radius: 0;
-  font-weight: 600;
-}
-.Layer__radio-button-group__radio-button--size-small div {
-  padding: 0.25rem 1rem;
-  font-size: 0.875rem;
-}
-.Layer__radio-button-group__radio-button--size-large div {
-  padding: 0.6rem 1rem;
-}
-.Layer__radio-button-group__radio-button:first-of-type div {
-  border-start-start-radius: var(--corner-radius);
-  border-end-start-radius: var(--corner-radius);
-}
-.Layer__radio-button-group__radio-button:last-of-type div {
-  border-right: 1px solid var(--buttons-border-color);
-  border-start-end-radius: var(--corner-radius);
-  border-end-end-radius: var(--corner-radius);
-}
-.Layer__radio-button-group__radio-button input:checked + div {
-  background: var(--active);
-}
 .Layer__tooltip {
   box-sizing: border-box;
   width: max-content;