@layerfi/components 0.1.112-alpha → 0.1.112-alpha.2

package/dist/index.css

@@ -4049,11 +4049,13 @@
 }
 @container (min-width: 1400px) {
   .Layer__table tr td:first-child .Layer__table-cell-content,
-  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content {
+  .Layer__table tr th:first-child.Layer__table-cell .Layer__table-cell-content,
+  .Layer__table tr th:first-child.Layer__table-header .Layer__table-cell-content {
     padding-left: var(--spacing-xl);
   }
   .Layer__table tr td:last-child .Layer__table-cell-content,
-  .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content {
+  .Layer__table tr th:last-child.Layer__table-cell .Layer__table-cell-content,
+  .Layer__table tr th:last-child.Layer__table-header .Layer__table-cell-content {
     padding-right: var(--spacing-xl);
   }
 }
@@ -4498,6 +4500,38 @@ tbody .Layer__table__empty-row:first-child {
   height: 1rem;
   place-self: center;
 }
+.Layer__UI__Calendar {
+  width: min-content;
+}
+.Layer__UI__CalendarGrid {
+  border-collapse: collapse;
+}
+.Layer__UI__CalendarCell,
+.Layer__UI__CalendarHeaderCell {
+  height: 2rem;
+  width: 2rem;
+  border-radius: var(--border-radius-3xs);
+  font-size: var(--text-sm);
+  line-height: 2rem;
+  text-align: center;
+}
+.Layer__UI__CalendarCell {
+  transition: background-color 0.2s ease, color 0.2s ease;
+}
+.Layer__UI__CalendarCell[data-hovered] {
+  background-color: var(--color-base-400);
+}
+.Layer__UI__CalendarCell[data-selected] {
+  background-color: var(--color-base-900);
+  color: var(--color-base-0);
+}
+.Layer__UI__CalendarCell[data-disabled] {
+  color: var(--color-base-400);
+}
+.Layer__UI__CalendarCell[data-outside-month] {
+  color: var(--color-base-0);
+  transition: none;
+}
 .Layer__Checkbox {
   position: relative;
   display: inline-flex;
@@ -4539,7 +4573,8 @@ tbody .Layer__table__empty-row:first-child {
   outline: 1px solid var(--outline-active);
   outline-offset: 2px;
 }
-.Layer__Checkbox[data-selected] [slot=checkbox] {
+.Layer__Checkbox[data-selected] [slot=checkbox],
+.Layer__Checkbox[data-indeterminate] [slot=checkbox] {
   background-color: var(--fg-default);
   color: var(--bg-default);
   border-color: var(--fg-default);
@@ -4705,6 +4740,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__DateSegment:not([data-interactive]) {
   background-color: transparent;
 }
+.Layer__UI__DatePicker .Layer__UI__FieldError {
+  padding-block-start: 0;
+}
 .Layer__UI__DropdownMenu__Popover[data-entering] {
   animation: popover-slide 120ms;
 }
@@ -4828,6 +4866,10 @@ tbody .Layer__table__empty-row:first-child {
   border-color: var(--color-base-800);
   outline: 2px solid var(--outline-default);
 }
+.Layer__InputGroup[data-invalid] {
+  border-color: var(--color-danger);
+  outline: none;
+}
 .Layer__InputGroup[data-action-count="2"] {
   grid-template-columns: minmax(0, 1fr) auto auto;
 }
@@ -4986,9 +5028,6 @@ tbody .Layer__table__empty-row:first-child {
   block-size: min(42rem, 90%);
   inline-size: min(36rem, 90%);
 }
-.Layer__Modal[data-flex-block] {
-  block-size: auto;
-}
 .Layer__Modal[data-size=lg] {
   inline-size: min(42rem, 90%);
 }
@@ -5018,6 +5057,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__Modal[data-variant=mobile-drawer][data-exiting] {
   animation: mobile-drawer-slide 200ms reverse ease-in;
 }
+.Layer__Modal[data-flex-block] {
+  block-size: auto;
+}
 .Layer__Dialog {
   display: flex;
   flex-direction: column;
@@ -5121,12 +5163,15 @@ tbody .Layer__table__empty-row:first-child {
   display: grid;
   inline-size: min(90svi, 60ch);
   border-radius: var(--border-radius-xs);
-  border: 2px solid var(--outline-default);
+  border: 1px solid var(--outline-default);
   background: var(--color-base-0);
 }
 .Layer__Popover[data-trigger=ComboBox] {
   inline-size: clamp(min(var(--trigger-width), 90svi), var(--trigger-width) * 1.5, min(80ch, 90svi));
 }
+.Layer__Popover[data-trigger=DatePicker] {
+  inline-size: unset;
+}
 .Layer__Stack {
   display: flex;
 }
@@ -5441,12 +5486,25 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UI__Table-TableHeader > tr {
   height: inherit;
 }
+.Layer__UI__Table-TableHeader--hidden {
+  display: none;
+}
 .Layer__UI__Table-Row {
   height: 3.25rem;
+  background-color: var(--color-base-200);
 }
 .Layer__UI__Table-Row:not(:last-child) .Layer__UI__Table-Cell {
   border-bottom: 1px solid var(--color-base-300);
 }
+.Layer__UI__Table-Row[data-depth="0"] {
+  background-color: var(--color-base-0);
+}
+.Layer__UI__Table-Row[data-depth="1"] {
+  background-color: var(--color-base-50);
+}
+.Layer__UI__Table-Row[data-depth="2"] {
+  background-color: var(--color-base-100);
+}
 .Layer__UI__Table-Column {
   box-sizing: border-box;
   display: flex;
@@ -5537,6 +5595,9 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-base-700);
   text-wrap: pretty;
 }
+.Layer__UI__Heading[data-variant=dark] {
+  color: var(--color-base-900);
+}
 .Layer__UI__Heading[data-variant=subtle] {
   color: var(--fg-subtle);
 }
@@ -6800,6 +6861,28 @@ tbody .Layer__table__empty-row:first-child {
     font-size: var(--text-md);
   }
 }
+.Layer__CategorizationRulesTable {
+  border: none;
+}
+.Layer__UI__Table__CategorizationRulesTable {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row,
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(8rem, 45%) minmax(8rem, 45%) auto;
+}
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-Row > *:last-child,
+.Layer__UI__Table__CategorizationRulesTable .Layer__UI__Table-TableHeader > tr > *:last-child {
+  justify-content: end;
+}
+.Layer__bulk-actions-header__selection-container {
+  height: 2.25rem;
+  min-width: 11rem;
+  border-radius: var(--border-radius-2xs);
+  border: 1px solid var(--color-base-300);
+}
 .Layer__InvoiceTable {
   width: clamp(48rem, 100%, 1406px);
 }
@@ -7961,6 +8044,41 @@ tbody .Layer__table__empty-row:first-child {
   background: var(--color-info-error-bg);
   color: var(--color-info-error-fg);
 }
+.Layer__suggested-categorization-rule-updates-drawer {
+  padding: var(--spacing-sm);
+}
+.Layer__suggested-categorization-rule-updates .Layer__UI__Button {
+  width: 100%;
+}
+.Layer__suggested-categorization-rule-updates-header {
+  padding-bottom: var(--spacing-sm);
+}
+.Layer__AffectedTransactionsTable {
+  container-type: inline-size;
+  --affected-transactions-table-cols: minmax(10rem, 25%) minmax(20rem, 50%) minmax(10rem, 25%);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable {
+  table-layout: fixed;
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+  display: grid;
+  grid-template-columns: var(--affected-transactions-table-cols);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Date,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Date {
+  color: var(--color-base-600);
+}
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Column__AffectedTransactionsTable--Amount,
+.Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__Table-Cell__AffectedTransactionsTable--Amount {
+  justify-content: flex-end;
+}
+@container (width <= 840px) {
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__row,
+  .Layer__AffectedTransactionsTable .Layer__UI__Table__AffectedTransactionsTable .Layer__UI__VirtualizedTable__header > tr {
+    grid-template-columns: minmax(4rem, 25%) minmax(8rem, 50%) minmax(4rem, 25%);
+  }
+}
 .Layer__tabs__container {
   overflow: auto hidden;
   min-height: 50px;
@@ -8248,6 +8366,56 @@ tbody .Layer__table__empty-row:first-child {
     max-width: 16rem;
   }
 }
+.Layer__ExpandButton {
+  height: 16px;
+  min-width: 16px;
+  transition: transform 0.1s ease-in-out;
+}
+.Layer__ExpandButton--collapsed {
+  transform: rotate(-90deg);
+}
+.Layer__ExpandButton--expanded {
+  transform: rotate(0deg);
+}
+.Layer__UnifiedReport {
+  overflow: hidden;
+  width: clamp(24rem, 100%, 1406px);
+}
+.Layer__UnifiedReport__Header {
+  height: 4.75rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__UI__Table__UnifiedReport {
+  table-layout: fixed;
+  width: 100%;
+}
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Row,
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(16rem, 80%) minmax(8rem, 20%);
+}
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Column__UnifiedReport--Value,
+.Layer__UI__Table__UnifiedReport .Layer__UI__Table-Cell__UnifiedReport--Value {
+  justify-content: flex-end;
+}
+.Layer__DateCalendar__Header {
+  border-bottom: 1px solid var(--border-color);
+}
+.Layer__DateSelection {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(10rem, 12rem));
+  min-width: 18.5rem;
+}
+.Layer__DateSelection .Layer__tooltip-trigger {
+  padding-top: 0;
+}
+.Layer__DateRangeSelection {
+  display: grid;
+  grid-template-columns: 9rem repeat(2, minmax(10rem, 12rem));
+}
+.Layer__DateRangeSelection .Layer__tooltip-trigger {
+  padding-top: 0;
+}
 .Layer__TagSelectorLayoutGroup {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -8587,6 +8755,7 @@ tbody .Layer__table__empty-row:first-child {
   left: 0;
   display: flex;
   flex-direction: column;
+  gap: var(--spacing-xs);
   align-items: stretch;
   width: 100%;
 }
@@ -8614,7 +8783,7 @@ 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 {
+.Layer__bank-transactions__header-menu__icon {
   padding: var(--spacing-3xs);
   border-radius: var(--spacing-3xs);
   background: var(--color-base-200);
@@ -8675,7 +8844,7 @@ tbody .Layer__table__empty-row:first-child {
 }
 .Layer__bank-transaction-row .Layer__table-cell {
   background-color: var(--table-bg);
-  color: var(--text-color-primary);
+  color: var(--color-base-900);
   transition: background-color var(--transition-speed) ease-out;
 }
 .Layer__bank-transaction-row .Layer__table-cell-content {
@@ -8911,8 +9080,8 @@ tbody .Layer__table__empty-row:first-child {
   transition: border 5s ease-out;
 }
 .Layer__bank-transaction-row__expand-button {
-  width: 36px;
-  min-width: 36px;
+  width: fit-content;
+  vertical-align: middle;
 }
 .Layer__bank-transaction-row__actions-cell--open {
   border-left: 1px solid transparent;
@@ -8976,6 +9145,9 @@ tbody .Layer__table__empty-row:first-child {
   opacity: 1;
   transition: max-height 350ms ease-out, opacity 200ms ease-out;
 }
+.Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__base-row .Layer__tooltip-trigger {
+  padding: 0;
+}
 .Layer__bank-transaction-list-item .Layer__bank-transaction-list-item__expanded-row {
   overflow: hidden;
   max-height: 0;
@@ -9132,6 +9304,12 @@ tbody .Layer__table__empty-row:first-child {
   min-width: var(--width);
   max-width: var(--width);
 }
+.Layer__bank-transactions__checkbox-col {
+  width: 48px;
+}
+.Layer__bank-transactions__checkbox-col .Layer__table-cell-content {
+  justify-content: center;
+}
 .Layer__bank-transactions__date-col {
   box-sizing: border-box;
   width: 140px;
@@ -9166,6 +9344,9 @@ tbody .Layer__table__empty-row:first-child {
     padding-right: var(--spacing-md);
     padding-left: var(--spacing-xl);
   }
+  .Layer__table.Layer__bank-transactions__table .Layer__bank-transactions__checkbox-col + .Layer__table-header.Layer__bank-transactions__date-col {
+    padding-left: var(--spacing-md);
+  }
   .Layer__table.Layer__bank-transactions__table .Layer__table-header.Layer__table-cell__category-col {
     padding-right: var(--spacing-xl);
     padding-left: var(--spacing-md);
@@ -10229,7 +10410,6 @@ tbody .Layer__table__empty-row:first-child {
   position: relative;
   display: flex;
   align-items: stretch;
-  overflow: auto;
 }
 .Layer__component-container.Layer__journal .Layer__table-state-container {
   height: calc(100% - 160px);
@@ -12072,9 +12252,8 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__service-offering-options__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
+  gap: var(--spacing-2xl);
   justify-items: center;
-  width: fit-content;
   margin: 0 auto;
 }
 @media (width <= 720px) {
@@ -12087,13 +12266,15 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
-  max-width: 420px;
-  padding: var(--spacing-md);
   border-radius: 16px;
-  border: none;
+  border: 1px solid var(--color-base-100);
   box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   margin: 0;
   background: white;
+  overflow-wrap: break-word;
+}
+.Layer__service-offering-options__feature-check {
+  color: var(--fg-subtle);
 }
 .Layer__service-offering__content {
   display: flex;
@@ -12101,15 +12282,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   gap: var(--spacing-xl);
 }
 .Layer__service-offering__offers {
-  flex-shrink: 0;
-  min-width: 0;
+  width: 100%;
   background-color: transparent;
 }
-@media (width <= 1440px) {
-  .Layer__service-offering__offers {
-    padding: 0 var(--spacing-lg);
-  }
-}
 .Layer__service-offering__responsive-layout {
   display: flex;
   flex-direction: row;
@@ -12118,25 +12293,24 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 @media (width <= 1440px) {
   .Layer__service-offering__responsive-layout {
     flex-direction: column;
-    gap: var(--spacing-xl);
   }
 }
 .Layer__service-offering__responsive-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xl);
-  padding: var(--spacing-3xl);
-  padding-bottom: var(--spacing-3xl);
+  max-width: 420px;
 }
 @media (width <= 1440px) {
   .Layer__service-offering__responsive-content {
-    padding: var(--spacing-xl);
+    max-width: 100%;
   }
 }
 .Layer__service-offering__responsive-image {
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 @media (width <= 1440px) {
   .Layer__service-offering__responsive-image {
@@ -12145,23 +12319,19 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__service-offering__responsive-image img {
   height: auto;
+  max-height: 480px;
   max-width: 100%;
+  object-fit: cover;
+  opacity: 0;
+  animation: fade-in-image 0.4s ease-in forwards;
+  animation-delay: 0.1s;
 }
-.Layer__service-offering__value-props-responsive {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: var(--spacing-5xl);
-  justify-items: center;
-}
-@media (width <= 1440px) {
-  .Layer__service-offering__value-props-responsive {
-    grid-template-columns: repeat(2, 1fr);
+@keyframes fade-in-image {
+  from {
+    opacity: 0;
   }
-}
-@media (width <= 768px) {
-  .Layer__service-offering__value-props-responsive {
-    grid-template-columns: 1fr;
-    gap: var(--spacing-xl);
+  to {
+    opacity: 1;
   }
 }
 .Layer__mobile-feature-section {