@layerfi/components 0.1.91 → 0.1.92-alpha

package/dist/index.css

@@ -88,6 +88,7 @@
   --text-heading-view: var(--text-heading-secondary);
   --text-heading-sm: 16px;
   --text-heading-xs: 14px;
+  --text-heading-2xs: 12px;
   --font-weight-normal: 460;
   --font-weight-bold: 540;
   --spacing-4xs: 2px;
@@ -146,6 +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-color-error: var(--color-info-error);
   --badge-fg-color-error: var(--color-info-error-fg);
   --badge-bg-color-error: var(--color-info-error-bg);
@@ -1015,6 +1017,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
+  position: relative;
 }
 .Layer__header__actions {
   display: flex;
@@ -4135,91 +4138,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__table-wrapper--bottom-spacing .Layer__table {
   border-bottom: 1px solid var(--border-color);
 }
-.Layer__tabs {
-  display: flex;
-  width: max-content;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 2px;
-  height: 38px;
-  margin: 1px;
-  cursor: pointer;
-  position: relative;
-  isolation: isolate;
-  gap: var(--spacing-xs);
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.Layer__tabs .Layer__tabs-option-content {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-.Layer__tabs-option__icon {
-  line-height: 11px;
-}
-.Layer__tabs-option {
-  position: relative;
-  cursor: pointer;
-  z-index: 2;
-}
-.Layer__tabs-option input {
-  position: absolute;
-  opacity: 0;
-  width: 1px;
-}
-.Layer__tabs-option input + span {
-  box-sizing: border-box;
-  padding: var(--spacing-xs) var(--spacing-3xs);
-  height: 36px;
-  color: var(--text-color-secondary);
-  font-family: var(--font-family);
-  font-size: var(--btn-font-size);
-  cursor: pointer;
-  transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
-  justify-content: center;
-  border-bottom: 2px solid transparent;
-}
-.Layer__tabs-option input + span:hover {
-  color: var(--text-color-primary);
-}
-.Layer__tabs-option input:checked + span {
-  color: var(--text-color-primary);
-}
-.Layer__tabs-option input:disabled + span {
-  cursor: not-allowed;
-  color: var(--text-color-secondary);
-}
-.Layer__tabs-option:hover input + span {
-  border-bottom: 2px solid var(--color-base-200);
-}
-.Layer__tabs-option:hover input:disabled + span,
-.Layer__tabs-option:hover input:checked + span {
-  background-color: transparent;
-}
-.Layer__tabs.Layer__tabs--small .Layer__tabs-option input + span {
-  height: 32px;
-  border-radius: 6px;
-}
-.Layer__tabs__thumb {
-  position: absolute;
-  width: 100px;
-  left: 0;
-  bottom: 1px;
-  z-index: 3;
-  box-sizing: border-box;
-  height: 2px;
-  border-radius: 2px;
-  background: var(--color-base-400);
-}
-.Layer__tabs--initialized .Layer__tabs__thumb {
-  transition: left 150ms ease, width 150ms ease;
-}
 .Layer__heading {
   color: var(--text-color-primary);
   font-size: var(--text-heading);
@@ -4292,15 +4210,30 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__text[data-status=error] {
   color: var(--color-danger);
 }
+.Layer__text[data-status=error][data-inverted] {
+  color: var(--color-info-error);
+}
 .Layer__text[data-status=warning] {
-  color: var(--color-info-warning);
+  color: var(--color-info-warning-fg);
+}
+.Layer__text[data-status=warning][data-inverted] {
+  color: var(--color-info-warning-bg);
 }
 .Layer__text[data-status=success] {
   color: var(--color-success);
 }
+.Layer__text[data-status=success][data-inverted] {
+  color: var(--color-info-success-bg);
+}
 .Layer__text[data-status=disabled] {
   color: var(--color-base-500);
 }
+.Layer__text[data-status=info] {
+  color: var(--color-info-fg);
+}
+.Layer__text[data-status=info][data-inverted] {
+  color: var(--color-info-bg);
+}
 .Layer__text[data-ellipsis] {
   white-space: nowrap;
   overflow: hidden;
@@ -4578,6 +4511,20 @@ tbody .Layer__table__empty-row:first-child {
   cursor: progress;
   background-color: var(--button-bg-disabled);
 }
+.Layer__ButtonTransparentContent {
+  opacity: 0;
+  grid-row: 1/-1;
+  grid-column: 1/-1;
+}
+.Layer__ButtonSpinnerContainer {
+  grid-column: 1/-1;
+  grid-row: 1/-1;
+  place-self: center;
+  height: 16px;
+}
+.Layer__ButtonSpinnerContainer[data-size=lg] {
+  height: 20px;
+}
 .Layer__Checkbox {
   display: inline-flex;
   align-items: center;
@@ -4836,7 +4783,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__UI__Heading {
   all: unset;
-  color: var(--color-base-800);
+  color: var(--color-base-700);
   font-weight: var(--font-weight-bold);
   font-variation-settings: "wght" var(--font-weight-bold);
   font-size: var(--text-heading-secondary);
@@ -4873,6 +4820,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Heading[data-pbe="5xl"] {
   padding-block-end: var(--spacing-5xl);
 }
+.Layer__UI__Heading[data-size="2xs"] {
+  font-size: var(--text-heading-2xs);
+}
 .Layer__UI__Heading[data-size=xs] {
   font-size: var(--text-heading-xs);
 }
@@ -4896,12 +4846,13 @@ tbody .Layer__table__empty-row:first-child {
   max-inline-size: unset;
 }
 .Layer__MoneyText {
-  color: var(--color-base-700);
+  color: var(--color-base-900);
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 .Layer__MoneyText[data-bold] {
   font-weight: var(--font-weight-bold);
+  font-variation-settings: "wght" var(--font-weight-bold);
 }
 .Layer__MoneyText[data-size=xs] {
   font-size: var(--text-xs);
@@ -5197,104 +5148,383 @@ tbody .Layer__table__empty-row:first-child {
   align-self: center;
   justify-self: center;
 }
-.Layer__tasks-month-selector {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: var(--spacing-xs);
+.Layer__tasks-component {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px var(--color-base-300);
+  background-color: var(--color-base-0);
+}
+.Layer__tasks-component.Layer__tasks-component--collapsable {
+  overflow-y: hidden;
+}
+.Layer__tasks-component .Layer__tasks-pending {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  border-top: 1px solid var(--color-base-300);
   padding: var(--spacing-md);
-  container-type: inline-size;
+  gap: var(--spacing-xs);
 }
-@container (min-width: 800px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(6, 1fr);
-  }
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  box-sizing: border-box;
+  min-height: 36px;
 }
-@container (max-width: 400px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(3, 1fr);
-  }
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-main {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+  box-sizing: border-box;
+  width: 100%;
 }
-@container (max-width: 300px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(2, 1fr);
-  }
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-weight: 540;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  background-color: var(--color-base-50);
+  border-radius: 8px;
 }
-.Layer__tasks-month-selector__month {
-  min-height: 32px;
-  flex: 1;
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
+  transform: rotate(90deg);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--done {
+  color: var(--color-success);
+}
+.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--pending {
+  color: var(--color-warning);
+}
+.Layer__tasks-component .Layer__tasks-header {
+  min-height: 36px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  cursor: pointer;
-  border-radius: var(--border-radius-xs);
-  padding: 0 var(--spacing-sm);
-  background: var(--color-base-0);
-  box-shadow: 0px 1px 2px 0px var(--base-transparent-6), 0px 0px 0px 1px var(--color-base-300);
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  container-type: inline-size;
 }
-.Layer__tasks-month-selector__month.Layer__tasks-month-selector__month--completed {
-  background-color: var(--color-base-50);
-  color: var(--color-base-600);
+.Layer__tasks-component .Layer__tasks__content {
+  max-height: 1000px;
+  opacity: 1;
+  transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
 }
-.Layer__tasks-month-selector__month.Layer__tasks-month-selector__month--active {
-  box-shadow: 0px 0px 0px 1px var(--color-base-800), 0px 0px 0px 3px var(--color-base-300);
+.Layer__tasks-component .Layer__tasks__content.Layer__tasks__content--collapsed {
+  opacity: 0.3;
+  max-height: 0;
 }
-.Layer__tasks-month-selector__month.Layer__tasks-month-selector__month--disabled {
-  color: var(--color-base-500);
-  cursor: not-allowed;
+.Layer__tasks-component .Layer__tasks-list {
+  background-color: var(--color-base-0);
+  box-shadow: 0 0 0 1px var(--color-base-300);
 }
-.Layer__tasks-month-selector__month:hover {
-  box-shadow: 0px 0px 0px 1px var(--color-base-500), 0px 0px 0px 3px var(--color-base-300);
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
+  padding: var(--spacing-2xs);
 }
-.Layer__tasks-month-selector__month .Layer__tasks-month-selector__month__str {
-  min-width: 24px;
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
+  border-bottom: 1px solid var(--color-base-300);
 }
-.Layer__tasks-month-selector__month__completed {
-  width: 16px;
-  height: 16px;
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--color-info-success-bg);
-  color: var(--color-info-success-fg);
-  border-radius: 50%;
+  flex-direction: column;
+  transition: all 0.1s ease-in-out;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item:hover,
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item.Layer__tasks-list-item__expanded {
+  background: var(--color-base-50);
+  border-radius: 6px;
 }
-.Layer__tasks-month-selector__month__incompleted {
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-4xs);
-  height: 16px;
-  padding: 0 var(--spacing-3xs);
-  background-color: var(--color-info-warning-bg);
-  color: var(--color-info-warning-fg);
-  border-radius: var(--border-radius-3xs);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md);
+  cursor: pointer;
 }
-.Layer__progress-steps {
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
   display: flex;
   align-items: center;
+  gap: var(--spacing-xs);
 }
-.Layer__progress-steps .Layer__progress-steps--step-wrapper {
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info .Layer__tasks-list-item__head-info__status {
   display: flex;
-  align-items: flex-start;
-  position: relative;
-  min-width: 50px;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-3xs);
+  border-radius: 100%;
 }
-.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__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed {
+  color: var(--color-base-500);
+  text-decoration: line-through;
 }
-.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__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed .Layer__tasks-list-item__head-info__status {
+  color: var(--color-info-success);
 }
-.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__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--pending .Layer__tasks-list-item__head-info__status {
+  color: var(--color-info-warning-fg);
+  background: var(--color-info-warning-bg);
 }
-.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);
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
+  padding-right: var(--spacing-md);
+  padding-left: var(--spacing-3xl);
+  margin-left: var(--spacing-3xs);
+  padding-bottom: 0;
+  height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: all 0.2s ease-out;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__text {
+  margin-bottom: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__actions {
+  margin-top: var(--spacing-xs);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__link-list {
+  padding-top: var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__link-list-header {
+  font-size: var(--text-sm);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__link {
+  color: var(--color-primary);
+  font-size: var(--text-sm);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__links-list {
+  margin: 0;
+  padding: var(--spacing-3xs) 0 var(--spacing-sm) var(--spacing-md);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item--completed {
+  color: var(--color-base-500);
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item__body--expanded {
+  padding-bottom: var(--spacing-sm);
+  height: auto;
+  opacity: 1;
+}
+.Layer__tasks-component .Layer__tasks-list .Layer__tasks-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-md);
+  text-align: center;
+  padding: var(--spacing-md);
+  color: var(--color-base-500);
+}
+.Layer__tasks-component .Layer__tasks-list-item__actions {
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: center;
+  justify-content: flex-end;
+}
+.Layer__tasks-component .Layer__tasks-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 4px;
+  background-color: var(--color-base-50);
+  box-shadow: 0 0 0 1px var(--color-base-300);
+}
+.Layer__tasks__expand-icon {
+  transition: transform 150ms ease-out;
+  color: var(--color-base-600);
+  margin-left: -15px;
+}
+@container (width <= 400px) {
+  .Layer__tasks-component .Layer__tasks-pending {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--spacing-xs);
+  }
+  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
+    justify-content: space-between;
+  }
+  .Layer__tasks-component .Layer__badge {
+    white-space: nowrap;
+  }
+  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
+    padding: var(--spacing-xs);
+  }
+  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
+    padding-right: var(--spacing-xs);
+    padding-left: var(--spacing-xs);
+  }
+}
+.Layer__tasks-header__notification {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs) var(--spacing-md);
+  background:
+    linear-gradient(
+      0deg,
+      var(--base-transparent-10) 0%,
+      var(--base-transparent-10) 100%),
+    var(--color-info-warning);
+}
+.Layer__tasks-header__notification__text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-xs);
+  white-space: nowrap;
+}
+.Layer__tasks-header__notification__button {
+  background: var(--color-info-warning-fg);
+  color: var(--color-info-warning-bg);
+  border: none;
+  padding: var(--spacing-3xs) var(--spacing-xs);
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-bold);
+  font-variation-settings: "wght" var(--font-weight-bold);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  transition: all 0.12s ease-in-out;
+  white-space: nowrap;
+}
+.Layer__tasks-header__notification__button:hover {
+  background: var(--color-base-1000);
+}
+.Layer__tasks__badge {
+  display: flex;
+  align-items: center;
+  font-size: var(--text-xs);
+  background: var(--color-info-warning);
+  color: var(--color-info-warning-bg);
+  padding: var(--spacing-3xs) var(--border-radius-2xs);
+  border-radius: var(--border-radius-3xs);
+  gap: var(--spacing-3xs);
+  white-space: nowrap;
+}
+.Layer__tasks__badge[data-icononly] {
+  border-radius: 50%;
+  gap: 0;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+}
+.Layer__tasks__badge .Layer__text {
+  line-height: 10px;
+}
+.Layer__tasks__badge .Layer__tasks__badge__icon-wrapper {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.Layer__tasks__badge[data-status=info] {
+  color: var(--color-info-fg);
+  background: var(--color-info-bg);
+}
+.Layer__tasks__badge[data-status=warning] {
+  color: var(--color-info-warning-bg);
+  background: var(--color-info-warning);
+}
+.Layer__tasks__badge[data-status=success] {
+  color: var(--color-info-success-fg);
+  background: var(--color-info-success-bg);
+}
+.Layer__tasks__badge[data-status=error] {
+  color: var(--color-info-error);
+  background: var(--color-info-error-bg);
+}
+.Layer__tasks-month-selector {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--spacing-xs);
+  padding: var(--spacing-md);
+  container-type: inline-size;
+}
+@container (min-width: 680px) {
+  .Layer__tasks-month-selector {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@container (max-width: 400px) {
+  .Layer__tasks-month-selector {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@container (max-width: 340px) {
+  .Layer__tasks-month-selector {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+.Layer__tasks-month-selector__month {
+  min-height: 32px;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  padding: 0 var(--spacing-sm);
+  background: var(--color-base-0);
+  box-shadow: 0 1px 2px 0 var(--base-transparent-6), 0 0 0 1px var(--color-base-300);
+}
+.Layer__tasks-month-selector__month[data-active] {
+  box-shadow: 0 0 0 1px var(--color-base-800), 0 0 0 3px var(--color-base-300);
+}
+.Layer__tasks-month-selector__month[data-disabled] {
+  color: var(--color-base-500);
+  cursor: not-allowed;
+}
+.Layer__tasks-month-selector__month:hover {
+  box-shadow: 0 0 0 1px var(--color-base-500), 0 0 0 3px var(--color-base-300);
+}
+.Layer__tasks-month-selector__month .Layer__tasks-month-selector__month__str {
+  min-width: 24px;
+}
+.Layer__progress-steps {
+  display: flex;
+  align-items: center;
+}
+.Layer__progress-steps .Layer__progress-steps--step-wrapper {
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  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;
 }
@@ -5584,8 +5814,153 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__separator[data-mbe="5xl"] {
   margin-block-end: var(--spacing-5xl);
 }
-.Layer__separator[data-mbs="5xl"] {
-  margin-block-start: var(--spacing-5xl);
+.Layer__separator[data-mbs="5xl"] {
+  margin-block-start: var(--spacing-5xl);
+}
+.Layer__profit-and-loss-header__bookkeeping-status {
+  position: absolute;
+  bottom: -20px;
+  left: 0;
+}
+.Layer__bookkeping-status {
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3xs);
+}
+.Layer__bookkeping-status .Layer__bookkeping-status__icon-wrapper {
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-info-fg);
+  background: var(--color-info-bg);
+  margin-top: -1px;
+}
+.Layer__bookkeping-status[data-status=warning] .Layer__bookkeping-status__icon-wrapper {
+  color: var(--color-info-warning-fg);
+  background: var(--color-info-warning-bg);
+}
+.Layer__bookkeping-status[data-status=success] .Layer__bookkeping-status__icon-wrapper {
+  color: var(--color-info-success-fg);
+  background: var(--color-info-success-bg);
+}
+.Layer__bookkeping-status[data-status=error] .Layer__bookkeping-status__icon-wrapper {
+  color: var(--color-info-error-fg);
+  background: var(--color-info-error-bg);
+}
+.Layer__bookkeping-status[data-emphasize=true][data-status=warning] {
+  padding: var(--spacing-xs);
+  padding-bottom: var(--spacing-2xs);
+  border-radius: var(--border-radius-3xs);
+  color: var(--color-info-warning-bg);
+  background: var(--badge-bg-color-warning-dark);
+}
+.Layer__bookkeping-status[data-emphasize=true][data-status=warning] .Layer__bookkeping-status__icon-wrapper {
+  color: var(--color-info-warning-bg);
+  background: var(--badge-bg-color-warning-dark);
+}
+.Layer__tabs {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 var(--spacing-sm);
+  height: 38px;
+  cursor: pointer;
+  position: relative;
+  isolation: isolate;
+  gap: var(--spacing-xs);
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  user-select: none;
+  border-bottom: 2px solid var(--color-base-100);
+}
+.Layer__tabs .Layer__tabs-option-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+.Layer__tabs-option__icon {
+  line-height: 11px;
+}
+.Layer__tabs-option {
+  position: relative;
+  cursor: pointer;
+  z-index: 2;
+}
+.Layer__tabs-option input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+}
+.Layer__tabs-option input + span {
+  box-sizing: border-box;
+  padding: var(--spacing-xs);
+  min-width: 40px;
+  height: 36px;
+  color: var(--text-color-secondary);
+  font-family: var(--font-family);
+  font-size: var(--btn-font-size);
+  font-weight: var(--font-weight-bold);
+  font-variation-settings: "wght" 460;
+  cursor: pointer;
+  transition: color var(--transition-speed) ease-in-out, background-color 150ms ease-in-out;
+  justify-content: center;
+  border-bottom: 2px solid transparent;
+  position: relative;
+}
+.Layer__tabs-option input + span:hover {
+  color: var(--text-color-primary);
+}
+.Layer__tabs-option input + span::after {
+  content: "";
+  position: absolute;
+  bottom: -4px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  opacity: 0;
+  background-color: var(--color-base-300);
+  transition: opacity 120ms ease-out;
+}
+.Layer__tabs-option input:checked + span {
+  color: var(--text-color-primary);
+}
+.Layer__tabs-option input:disabled + span {
+  cursor: not-allowed;
+  color: var(--text-color-secondary);
+}
+.Layer__tabs-option:hover input + span::after {
+  opacity: 1;
+}
+.Layer__tabs-option:hover input:disabled + span,
+.Layer__tabs-option:hover input:checked + span {
+  background-color: transparent;
+}
+.Layer__tabs-option:hover input:disabled + span::after,
+.Layer__tabs-option:hover input:checked + span::after {
+  display: none;
+}
+.Layer__tabs.Layer__tabs--small .Layer__tabs-option input + span {
+  height: 32px;
+  border-radius: 6px;
+}
+.Layer__tabs__thumb {
+  position: absolute;
+  width: 100px;
+  left: 0;
+  bottom: -2px;
+  z-index: 3;
+  box-sizing: border-box;
+  height: 2px;
+  border-radius: 2px;
+  background: var(--color-base-900);
+}
+.Layer__tabs--initialized .Layer__tabs__thumb {
+  transition: left 150ms ease, width 150ms ease;
 }
 .Layer__ledger-account__index {
   background-color: var(--color-base-0);
@@ -8424,260 +8799,6 @@ tbody .Layer__table__empty-row:first-child {
   padding-left: var(--spacing-sm);
   margin-left: 0;
 }
-.Layer__tasks-component {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-y: auto;
-  border-radius: 8px;
-  box-shadow: 0 0 0 1px var(--color-base-300);
-  background-color: var(--color-base-0);
-}
-.Layer__tasks-component.Layer__tasks-component--collapsable {
-  overflow-y: hidden;
-}
-.Layer__tasks-component .Layer__tasks-pending {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-md);
-  box-sizing: border-box;
-  min-height: 72px;
-  border-top: 1px solid var(--color-base-300);
-}
-.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  font-weight: 540;
-  padding: var(--spacing-xs);
-  background-color: var(--color-base-50);
-  border-radius: 8px;
-}
-.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .mini-chart {
-  transform: rotate(90deg);
-}
-.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--done {
-  color: var(--color-success);
-}
-.Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar .Layer__tasks-pending-bar__status--pending {
-  color: var(--color-warning);
-}
-.Layer__tasks-component .Layer__tasks-header {
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  padding: var(--spacing-md);
-  border-bottom: 1px solid var(--color-base-300);
-  container-type: inline-size;
-}
-.Layer__tasks-component .Layer__tasks-header .Layer__expand {
-  min-width: 36px;
-  min-height: 36px;
-}
-.Layer__tasks-component .Layer__tasks-header--collapsable .Layer__tasks-header__left-col__title {
-  width: 100%;
-}
-.Layer__tasks-component .Layer__tasks-header--collapsable .Layer__tasks-header__left-col__controls {
-  width: 100%;
-}
-.Layer__tasks-component .Layer__tasks-header--collapsable .Layer__tasks-header__left-col .Layer__tasks-header__left-col__title {
-  justify-content: space-between;
-}
-.Layer__tasks-component .Layer__tasks-header__left-col {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-  flex: 1;
-}
-.Layer__tasks-component .Layer__tasks-header__left-col .Layer__tasks-header__left-col__title {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--spacing-md);
-  flex-wrap: wrap;
-  min-height: 27px;
-}
-.Layer__tasks-component .Layer__tasks-header__left-col .Layer__tasks-header__left-col__title > .Layer__text {
-  white-space: nowrap;
-}
-.Layer__tasks-component .Layer__tasks-header__left-col .Layer__datepicker__wrapper--arrows .react-datepicker__input-container {
-  max-width: 80px;
-}
-.Layer__tasks-component .Layer__tasks-header__left-col__controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks-header__right-col {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks__content {
-  max-height: 1000px;
-  opacity: 1;
-  transition: max-height 0.18s ease-out, opacity 0.2s ease-out;
-}
-.Layer__tasks-component .Layer__tasks__content.Layer__tasks__content--collapsed {
-  opacity: 0.3;
-  max-height: 0;
-}
-.Layer__tasks-component .Layer__tasks-list {
-  background-color: var(--color-base-0);
-  box-shadow: 0 0 0 1px var(--color-base-300);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper {
-  padding: var(--spacing-2xs);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper:not(:last-child) {
-  border-bottom: 1px solid var(--color-base-300);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item {
-  display: flex;
-  flex-direction: column;
-  transition: all 0.1s ease-in-out;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item.Layer__tasks-list-item__expanded {
-  background: var(--color-base-50);
-  border-radius: 6px;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-xs);
-  padding: var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info .Layer__tasks-list-item__head-info__status {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: var(--spacing-3xs);
-  border-radius: 100%;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed {
-  color: var(--color-base-500);
-  text-decoration: line-through;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--completed .Layer__tasks-list-item__head-info__status {
-  color: var(--color-info-success);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head .Layer__tasks-list-item__head-info.Layer__tasks-list-item--pending .Layer__tasks-list-item__head-info__status {
-  color: var(--color-info-warning-fg);
-  background: var(--color-info-warning-bg);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
-  padding-right: var(--spacing-md);
-  padding-left: var(--spacing-3xl);
-  margin-left: var(--spacing-3xs);
-  padding-bottom: 0;
-  height: 0;
-  opacity: 0;
-  overflow: hidden;
-  transition: all 0.2s ease-out;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info {
-  display: flex;
-  flex-direction: column;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__text {
-  margin-bottom: var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__actions {
-  margin-top: var(--spacing-xs);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__link-list {
-  padding-top: var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__link-list-header {
-  font-size: var(--text-sm);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list-item__link {
-  color: var(--color-primary);
-  font-size: var(--text-sm);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body .Layer__tasks-list-item__body-info .Layer__tasks-list__links-list {
-  margin: 0;
-  padding: var(--spacing-3xs) 0 var(--spacing-sm) var(--spacing-md);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item--completed {
-  color: var(--color-base-500);
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body.Layer__tasks-list-item__body--expanded {
-  padding-bottom: var(--spacing-sm);
-  height: auto;
-  opacity: 1;
-}
-.Layer__tasks-component .Layer__tasks-list .Layer__tasks-empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-md);
-  text-align: center;
-  padding: var(--spacing-md);
-  color: var(--color-base-500);
-}
-.Layer__tasks-component .Layer__tasks-list-item__actions {
-  display: flex;
-  gap: var(--spacing-xs);
-  align-items: center;
-  justify-content: flex-end;
-}
-.Layer__tasks-component .Layer__tasks-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  background-color: var(--color-base-50);
-  box-shadow: 0 0 0 1px var(--color-base-300);
-}
-.Layer__tasks__expand-icon {
-  transition: transform 150ms ease-out;
-  color: var(--color-base-600);
-  margin-left: -15px;
-}
-@container (width <= 400px) {
-  .Layer__tasks-component {
-    padding: var(--spacing-xs) var(--spacing-sm);
-  }
-  .Layer__tasks-component .Layer__tasks-pending {
-    flex-direction: column;
-    align-items: stretch;
-    gap: var(--spacing-xs);
-    padding: var(--spacing-md) 0;
-  }
-  .Layer__tasks-component .Layer__tasks-pending .Layer__tasks-pending-bar {
-    justify-content: space-between;
-  }
-  .Layer__tasks-component .Layer__badge {
-    white-space: nowrap;
-  }
-  .Layer__tasks-component .Layer__tasks-header {
-    padding: var(--spacing-md) 0;
-  }
-  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__head {
-    padding: var(--spacing-xs);
-  }
-  .Layer__tasks-list .Layer__tasks-list-item-wrapper .Layer__tasks-list-item .Layer__tasks-list-item__body {
-    padding-right: var(--spacing-xs);
-    padding-left: var(--spacing-xs);
-  }
-}
 .Layer__pagination-container {
   display: flex;
   justify-content: flex-end;
@@ -9014,8 +9135,7 @@ tbody .Layer__table__empty-row:first-child {
   display: grid;
   min-block-size: 3rem;
   grid-template-columns: auto minmax(0, 1fr);
-  column-gap: var(--spacing-xs);
-  row-gap: var(--spacing-3xs);
+  gap: var(--spacing-3xs) var(--spacing-xs);
   grid-template-areas: "chart heading" "chart amount";
 }
 .Layer__ProfitAndLossSummariesSummary[data-size=lg] {
@@ -9036,6 +9156,9 @@ tbody .Layer__table__empty-row:first-child {
   border-radius: var(--border-radius-xs);
   background: var(--color-base-50);
 }
+.Layer__ProfitAndLossSummariesSummaryChartAreaEmptyFrame {
+  grid-area: chart;
+}
 .Layer__ProfitAndLossSummaries {
   display: grid;
   container-type: inline-size;
@@ -9097,7 +9220,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__profit-and-loss-row:not(.Layer__profit-and-loss-row__value--depth-0),
 .Layer__profit-and-loss-row:not(.Layer__profit-and-loss-row__label--depth-0) {
-  box-shadow: 0px -1px 0px 0px var(--color-base-300) inset;
+  box-shadow: 0 -1px 0 0 var(--color-base-300) inset;
 }
 .Layer__profit-and-loss-row__children {
   display: grid;
@@ -9206,10 +9329,7 @@ tbody .Layer__table__empty-row:first-child {
   margin: 0;
 }
 .Layer__profit-and-loss-row__label--depth-1 {
-  padding-right: var(--spacing-md);
-  padding-left: calc(var(--spacing-5xl) + var(--spacing-md));
-  padding-top: var(--spacing-sm);
-  padding-bottom: var(--spacing-sm);
+  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);
@@ -9250,9 +9370,9 @@ tbody .Layer__table__empty-row:first-child {
   align-items: stretch;
   border-radius: var(--border-radius-sm);
   box-shadow:
-    0px 0px 0px 1px rgba(16, 24, 40, 0.04),
-    0px 2px 4px 0px rgba(16, 24, 40, 0.06),
-    0px 4px 12px 0px rgba(16, 24, 40, 0.08);
+    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);
@@ -9261,8 +9381,7 @@ tbody .Layer__table__empty-row:first-child {
   display: flex;
   flex-direction: column;
   padding: var(--spacing-md);
-  column-gap: var(--spacing-md);
-  row-gap: var(--spacing-md);
+  gap: var(--spacing-md) var(--spacing-md);
 }
 .Layer__profit-and-loss__chart_with_summaries__chart-col {
   display: flex;
@@ -9426,7 +9545,7 @@ tbody .Layer__table__empty-row:first-child {
   bottom: 0;
   transform: translate(-50%, -60px);
   border-radius: var(--border-radius-sm);
-  box-shadow: 0px 0px 0px 1px var(--base-transparent-4);
+  box-shadow: 0 0 0 1px var(--base-transparent-4);
   gap: var(--spacing-md);
 }
 .Layer__profit-and-loss-chart__state-card .Layer__icon-box {
@@ -9970,6 +10089,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border-left: none;
   background: none;
 }
+.Layer__bookkeeping-overview--view .Layer__panel.Layer__panel--open .Layer__panel__sidebar {
+  max-width: 560px;
+}
 @media screen and (width >= 1100px) {
   .Layer__bookkeeping-overview--view .Layer__panel__content {
     max-width: 1406px;