@layerfi/components 0.1.114-alpha.3 → 0.1.114-alpha.5

package/dist/index.css

@@ -5402,33 +5402,12 @@ tbody .Layer__table__empty-row:first-child {
     --column-count: 4;
   }
 }
-.Layer__ProfitAndLossSummariesSummary {
-  display: grid;
-  grid-template-areas: "chart heading" "chart amount";
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--spacing-3xs) var(--spacing-xs);
-  min-block-size: 3rem;
-}
-.Layer__ProfitAndLossSummariesSummary[data-size=lg] {
-  column-gap: var(--spacing-md);
-  min-block-size: 6rem;
-}
-.Layer__ProfitAndLossSummariesSummary [slot=heading] {
-  grid-area: heading;
-  align-self: end;
-}
-.Layer__ProfitAndLossSummariesSummary [slot=amount] {
-  grid-area: amount;
-  align-self: start;
-}
 .Layer__ProfitAndLossSummariesSummaryChartArea {
-  grid-area: chart;
-  align-content: center;
   border-radius: var(--border-radius-xs);
   background: var(--color-base-50);
 }
-.Layer__ProfitAndLossSummariesSummaryChartAreaEmptyFrame {
-  grid-area: chart;
+.Layer__ProfitAndLossSummariesSummary {
+  min-height: 40px;
 }
 .Layer__ProfitAndLossSummaries {
   display: grid;
@@ -6901,6 +6880,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__Span[data-status=error] {
   color: var(--color-info-error);
 }
+.Layer__Header[data-status=success],
+.Layer__Label[data-status=success],
+.Layer__P[data-status=success],
+.Layer__Span[data-status=success] {
+  color: var(--color-info-success);
+}
 .Layer__Header[data-no-wrap],
 .Layer__Label[data-no-wrap],
 .Layer__P[data-no-wrap],
@@ -6914,8 +6899,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__P[data-with-tooltip],
 .Layer__Span[data-ellipsis],
 .Layer__Span[data-with-tooltip] {
-  white-space: nowrap;
   overflow: hidden;
+  max-inline-size: min(80ch, 60rem, 100%);
+  white-space: nowrap;
   text-overflow: ellipsis;
 }
 .Layer__Header[data-size="2xs"],
@@ -7329,32 +7315,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__ComboBoxNoOptionsMessage {
   padding-block: var(--spacing-sm);
-}.Layer__MoneyText {
-  color: var(--color-base-800);
-}
-.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);
-}
-.Layer__MoneyText[data-size=sm] {
-  font-size: var(--text-sm);
-}
-.Layer__MoneyText[data-size=md] {
-  font-size: var(--text-md);
-}
-.Layer__MoneyText[data-size=lg] {
-  font-size: var(--text-lg);
-}
-.Layer__MoneyText[data-positive]::before {
+}.Layer__MoneySpan[data-positive]::before {
   content: "$";
 }
-.Layer__MoneyText[data-negative]::before {
+.Layer__MoneySpan[data-negative]::before {
   content: "-$";
 }
-.Layer__MoneyText[data-display-plus-sign]::before {
+.Layer__MoneySpan[data-display-plus-sign]::before {
   content: "+$";
 }.Layer__datetime {
   display: inline-flex;
@@ -7379,6 +7346,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   background: rgba(0, 0, 0, 0.5);
   place-items: center;
 }
+.Layer__ModalOverlay[data-variant=mobile-drawer][data-entering], .Layer__ModalOverlay[data-variant=drawer][data-entering] {
+  animation: overlay-fade 250ms;
+}
+.Layer__ModalOverlay[data-variant=mobile-drawer][data-exiting], .Layer__ModalOverlay[data-variant=drawer][data-exiting] {
+  animation: overlay-fade reverse 250ms;
+}
 .Layer__ModalOverlay[data-variant=drawer] {
   place-items: end;
 }
@@ -7400,10 +7373,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   block-size: 100%;
 }
 .Layer__Modal[data-variant=drawer][data-entering] {
-  animation: drawer-slide 300ms;
+  animation: drawer-slide 250ms;
 }
 .Layer__Modal[data-variant=drawer][data-exiting] {
-  animation: drawer-slide 300ms reverse ease-in;
+  animation: drawer-slide 250ms reverse ease-in;
 }
 .Layer__Modal[data-variant=mobile-drawer] {
   position: fixed;
@@ -7413,6 +7386,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   inline-size: 100%;
   border-radius: var(--border-radius-2xs) var(--border-radius-2xs) 0 0;
 }
+.Layer__Modal[data-variant=mobile-drawer][data-entering] {
+  animation: mobile-drawer-slide 250ms;
+}
+.Layer__Modal[data-variant=mobile-drawer][data-exiting] {
+  animation: mobile-drawer-slide 250ms reverse ease-in;
+}
 .Layer__Modal[data-flex-block] {
   block-size: auto;
 }
@@ -7452,15 +7431,21 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
     transform: translateX(0);
   }
 }
-.Layer__ModalContentFadeMotionContent {
-  display: contents;
-  height: 100%;
-  width: 100%;
+@keyframes mobile-drawer-slide {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
-
-.Layer__ModalContentSlideUpMotionContent {
-  height: 100%;
-  width: 100%;
+@keyframes overlay-fade {
+  from {
+    background: rgba(0, 0, 0, 0);
+  }
+  to {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }.Layer__UI__Heading {
   max-inline-size: 60rem;
   margin: 0;
@@ -7680,6 +7665,134 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__ModalActions {
   margin-block-start: var(--spacing-3xl);
+}.Layer__actionable-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.Layer__actionable-list li {
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--spacing-2xs);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
+  border-radius: var(--spacing-xs);
+  cursor: pointer;
+  font-size: 12px;
+}
+.Layer__actionable-list li .Layer__actionable-list__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2xs);
+  align-items: flex-start;
+  max-width: 36ch;
+}
+.Layer__actionable-list li .Layer__actionable-list__content .Layer__actionable-list__content-description {
+  color: var(--color-base-500);
+}
+.Layer__actionable-list li.Layer__actionable-list-item--secondary {
+  color: var(--color-base-500);
+}
+.Layer__actionable-list li.Layer__actionable-list-item--secondary.Layer__actionable-list-item--as-link:hover {
+  color: var(--color-base-1000);
+}
+.Layer__actionable-list li.Layer__actionable-list__item--selected {
+  background-color: var(--color-base-50);
+}
+.Layer__actionable-list .Layer__actionable-list__select {
+  display: flex;
+  height: 18px;
+  width: 18px;
+  border-radius: 50%;
+  border: 1px solid var(--color-base-300);
+}
+.Layer__actionable-list .Layer__actionable-list__select.Layer__actionable-list__select--selected {
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--color-info-success);
+  background-color: var(--color-info-success-bg);
+  color: var(--color-info-success);
+}.Layer__InputGroup {
+  box-sizing: border-box;
+  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(--border-color);
+  background-color: var(--color-base-0);
+}
+.Layer__InputGroup[data-focus-within], .Layer__InputGroup[data-focus-visible] {
+  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;
+}
+.Layer__InputGroup[data-disabled] {
+  cursor: not-allowed;
+}.Layer__MinimalSearchField {
+  display: grid;
+  grid-template-areas: "input clear-button";
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  border: none;
+}
+.Layer__MinimalSearchField > [slot=input] {
+  grid-area: input;
+  padding-inline: var(--spacing-3xs);
+  border: none;
+  outline: none;
+  /*
+   * The background on mobile is grey by default.
+   */
+  background: none;
+  font-family: var(--font-family);
+}
+.Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button, .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
+  appearance: none;
+}
+.Layer__MinimalSearchField[data-empty] > [slot=input] {
+  grid-column: 1/-1;
+}
+.Layer__MinimalSearchField > [slot=clear-button] {
+  grid-area: clear-button;
+}
+.Layer__MinimalSearchField[data-empty] > [slot=clear-button] {
+  display: none;
+}
+.Layer__MinimalSearchField[data-disabled] {
+  cursor: not-allowed;
+}
+.Layer__MinimalSearchField[data-disabled] > [slot=input] {
+  cursor: not-allowed;
+}.Layer__SearchField.Layer__InputGroup {
+  display: grid;
+  grid-template-areas: "icon search";
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0;
+  padding-inline-start: 0;
+  padding-inline-end: var(--spacing-3xs);
+}
+.Layer__SearchField.Layer__InputGroup > [slot=icon] {
+  grid-area: icon;
+  block-size: 2rem;
+  inline-size: 2rem;
+}
+.Layer__SearchField.Layer__InputGroup > [slot=search] {
+  grid-area: search;
+}
+.Layer__SearchField.Layer__InputGroup .Layer__SearchField__Icon[data-disabled] {
+  cursor: not-allowed;
+  color: var(--color-base-500);
 }.Layer__csv-upload {
   position: relative;
   height: 6rem;
@@ -7864,32 +7977,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__UI__DateInput[data-placement=first] {
   border-start-start-radius: inherit;
   border-end-start-radius: inherit;
-}.Layer__InputGroup {
-  box-sizing: border-box;
-  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(--border-color);
-  background-color: var(--color-base-0);
-}
-.Layer__InputGroup[data-focus-within], .Layer__InputGroup[data-focus-visible] {
-  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;
-}
-.Layer__InputGroup[data-disabled] {
-  cursor: not-allowed;
 }.Layer__Checkbox {
   position: relative;
   display: inline-flex;
@@ -8287,60 +8374,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__MonthPicker__InputGroup {
   inline-size: 12rem;
-}.Layer__MinimalSearchField {
-  display: grid;
-  grid-template-areas: "input clear-button";
-  grid-template-columns: minmax(0, 1fr) auto;
-  align-items: center;
-  border: none;
-}
-.Layer__MinimalSearchField > [slot=input] {
-  grid-area: input;
-  padding-inline: var(--spacing-3xs);
-  border: none;
-  outline: none;
-  /*
-   * The background on mobile is grey by default.
-   */
-  background: none;
-  font-family: var(--font-family);
-}
-.Layer__MinimalSearchField > [slot=input]::-webkit-search-cancel-button, .Layer__MinimalSearchField > [slot=input]::-webkit-search-decoration {
-  appearance: none;
-}
-.Layer__MinimalSearchField[data-empty] > [slot=input] {
-  grid-column: 1/-1;
-}
-.Layer__MinimalSearchField > [slot=clear-button] {
-  grid-area: clear-button;
-}
-.Layer__MinimalSearchField[data-empty] > [slot=clear-button] {
-  display: none;
-}
-.Layer__MinimalSearchField[data-disabled] {
-  cursor: not-allowed;
-}
-.Layer__MinimalSearchField[data-disabled] > [slot=input] {
-  cursor: not-allowed;
-}.Layer__SearchField.Layer__InputGroup {
-  display: grid;
-  grid-template-areas: "icon search";
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0;
-  padding-inline-start: 0;
-  padding-inline-end: var(--spacing-3xs);
-}
-.Layer__SearchField.Layer__InputGroup > [slot=icon] {
-  grid-area: icon;
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-.Layer__SearchField.Layer__InputGroup > [slot=search] {
-  grid-area: search;
-}
-.Layer__SearchField.Layer__InputGroup .Layer__SearchField__Icon[data-disabled] {
-  cursor: not-allowed;
-  color: var(--color-base-500);
 }.Layer__InvisibleDownload {
   display: none;
 }.Layer__UI__Table-Table {
@@ -8510,6 +8543,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__bookkeeping-status[data-status=error] .Layer__bookkeeping-status__icon-wrapper {
   background: var(--color-info-error-bg);
   color: var(--color-info-error-fg);
+}.Layer__BankTransactionsProcessingInfo {
+  padding-block: var(--spacing-xs);
+  padding-inline: var(--spacing-md);
+  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
+  border-top: 1px solid var(--color-base-400);
+  background-color: var(--color-base-100);
 }.Layer__file-thumb {
   box-sizing: border-box;
   position: relative;
@@ -8696,54 +8735,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   border: 1px solid var(--color-base-300);
 }.Layer__BusinessFormMobileItem[data-selected] {
   background: var(--color-base-100);
-}.Layer__actionable-list {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-.Layer__actionable-list li {
-  box-sizing: border-box;
-  display: flex;
-  gap: var(--spacing-2xs);
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
-  border-radius: var(--spacing-xs);
-  cursor: pointer;
-  font-size: 12px;
-}
-.Layer__actionable-list li .Layer__actionable-list__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-2xs);
-  align-items: flex-start;
-  max-width: 36ch;
-}
-.Layer__actionable-list li .Layer__actionable-list__content .Layer__actionable-list__content-description {
-  color: var(--color-base-500);
-}
-.Layer__actionable-list li.Layer__actionable-list-item--secondary {
-  color: var(--color-base-500);
-}
-.Layer__actionable-list li.Layer__actionable-list-item--secondary.Layer__actionable-list-item--as-link:hover {
-  color: var(--color-base-1000);
-}
-.Layer__actionable-list li.Layer__actionable-list__item--selected {
-  background-color: var(--color-base-50);
-}
-.Layer__actionable-list .Layer__actionable-list__select {
-  display: flex;
-  height: 18px;
-  width: 18px;
-  border-radius: 50%;
-  border: 1px solid var(--color-base-300);
-}
-.Layer__actionable-list .Layer__actionable-list__select.Layer__actionable-list__select--selected {
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--color-info-success);
-  background-color: var(--color-info-success-bg);
-  color: var(--color-info-success);
 }.Layer__MatchFormMobile {
   border-radius: var(--border-radius-2xs);
   border: 1px solid var(--color-base-300);
@@ -8754,11 +8745,68 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-inline-end: var(--spacing-md);
 }.Layer__BankTransactionsMobileSplitForm__AmountInput {
   inline-size: 6rem;
-}.Layer__bankTransactionsMobileListItem__categorizedValue {
+}.Layer__NewToggle {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  width: max-content;
+  padding: 2px;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px var(--color-base-300);
+  background: var(--color-base-100);
+  cursor: pointer;
+  user-select: none;
+  isolation: isolate;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}.Layer__NewToggleOption {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 32px;
+  padding: 8px 16px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--text-color-secondary);
+}
+.Layer__NewToggleOption::before {
+  position: absolute;
+  z-index: -2;
+  inset: 0;
+  border-radius: 6px;
+  background: transparent;
+  content: "";
+  transition: background-color 150ms;
+}
+.Layer__NewToggleOption[data-hovered]:not([data-disabled], [data-selected]) {
+  color: var(--text-color-primary);
+}
+.Layer__NewToggleOption[data-hovered]:not([data-disabled], [data-selected])::before {
+  background-color: var(--color-base-200);
+}
+
+.Layer__NewToggleOption-SelectionIndicator {
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  border-radius: 6px;
+  box-shadow: 0 0 0 1px var(--color-base-300), 0 1px 1px 0 rgba(0, 0, 0, 0.04), 0 2px 3px 0 rgba(0, 0, 0, 0.04), 0 3px 4px 0 rgba(0, 0, 0, 0.02), 0 4px 5px 0 rgba(0, 0, 0, 0.01);
+  background: var(--color-white);
+  transition-property: translate, width;
+  transition-duration: 200ms;
+}.Layer__BankTransactionsMobileListItem__CategorizedValue {
   color: var(--color-base-500);
 }
 
-.Layer__bankTransactionsMobileListItem__headingContentLeft {
+.Layer__BankTransactionsMobileListItem__HeadingContentLeft {
   overflow: hidden;
   min-width: 0;
 }.Layer__BaseDetailView {
@@ -9357,6 +9405,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__panel.Layer__panel--open .Layer__panel__content {
     width: 100%;
   }
+}.Layer__ProfitAndLossSummariesSummaryChartArea {
+  border-radius: var(--border-radius-xs);
+  background: var(--color-base-50);
+}
+
+.Layer__ProfitAndLossSummariesSummary {
+  min-height: 40px;
 }.Layer__DateSelection {
   display: grid;
   grid-template-columns: repeat(2, minmax(10rem, 12rem));
@@ -10467,8 +10522,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   align-items: flex-end;
   padding-block-start: 1rem;
 }
-.Layer__VehicleForm .Layer__VehicleForm__Field__Make,
-.Layer__VehicleForm .Layer__VehicleForm__Field__Model,
+.Layer__VehicleForm .Layer__VehicleForm__Field__MakeAndModel,
 .Layer__VehicleForm .Layer__VehicleForm__Field__Year,
 .Layer__VehicleForm .Layer__VehicleForm__Field__LicensePlate,
 .Layer__VehicleForm .Layer__VehicleForm__Field__Vin,

package/dist/index.d.ts

@@ -475,7 +475,7 @@ declare type EnumWithUnknownValues<T extends string> = T | UnknownEnumValue;
 declare type Environment = 'production' | 'sandbox' | 'staging' | 'internalStaging';
 
 declare type EventCallbacks = {
-    onTransactionCategorized?: (bankTransactionId: string) => void;
+    onTransactionCategorized?: () => void;
     onTransactionsFetched?: () => void;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.114-alpha.3",
+  "version": "0.1.114-alpha.5",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -103,7 +103,7 @@
     "lucide-react": "^0.507.0",
     "motion": "^12.23.11",
     "pluralize": "^8.0.0",
-    "react-aria-components": "^1.8.0",
+    "react-aria-components": "^1.13.0",
     "react-calendly": "^4.4.0",
     "react-currency-input-field": "^3.10.0",
     "react-dropzone": "^14.3.8",