@layerfi/components 0.1.121 → 0.1.122-alpha

package/dist/index.css

@@ -2992,6 +2992,9 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__bank-transactions__header--with-date-picker.Layer__bank-transactions__header--mobile .Layer__MonthPicker__InputGroup {
   margin-right: 4px;
 }
+.Layer__bank-transactions__header__search-and-menu > :first-child {
+  flex: 1;
+}
 .Layer__bank-transaction-row {
   transition: all var(--transition-speed) ease-in-out;
   opacity: 0.3;
@@ -5853,6 +5856,27 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__Stack[data-overflow=visible] {
   overflow: visible;
 }
+.Layer__Stack[data-gap="4xs"] {
+  gap: var(--spacing-4xs);
+}
+.Layer__Stack[data-pb="4xs"] {
+  padding-block: var(--spacing-4xs);
+}
+.Layer__Stack[data-pbe="4xs"] {
+  padding-block-end: var(--spacing-4xs);
+}
+.Layer__Stack[data-pbs="4xs"] {
+  padding-block-start: var(--spacing-4xs);
+}
+.Layer__Stack[data-pi="4xs"] {
+  padding-inline: var(--spacing-4xs);
+}
+.Layer__Stack[data-pie="4xs"] {
+  padding-inline-end: var(--spacing-4xs);
+}
+.Layer__Stack[data-pis="4xs"] {
+  padding-inline-start: var(--spacing-4xs);
+}
 .Layer__Stack[data-gap="3xs"] {
   gap: var(--spacing-3xs);
 }
@@ -6230,6 +6254,24 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__Span[data-size=xl] {
   font-size: var(--text-xl);
 }
+.Layer__Header[data-pb="4xs"],
+.Layer__Label[data-pb="4xs"],
+.Layer__P[data-pb="4xs"],
+.Layer__Span[data-pb="4xs"] {
+  padding-block: var(--spacing-4xs);
+}
+.Layer__Header[data-pbe="4xs"],
+.Layer__Label[data-pbe="4xs"],
+.Layer__P[data-pbe="4xs"],
+.Layer__Span[data-pbe="4xs"] {
+  padding-block-end: var(--spacing-4xs);
+}
+.Layer__Header[data-pbs="4xs"],
+.Layer__Label[data-pbs="4xs"],
+.Layer__P[data-pbs="4xs"],
+.Layer__Span[data-pbs="4xs"] {
+  padding-block-start: var(--spacing-4xs);
+}
 .Layer__Header[data-pb="3xs"],
 .Layer__Label[data-pb="3xs"],
 .Layer__P[data-pb="3xs"],
@@ -6791,6 +6833,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   text-overflow: ellipsis;
   max-inline-size: min(60rem, 100%);
 }
+.Layer__UI__Heading[data-pbe="4xs"] {
+  padding-block-end: var(--spacing-4xs);
+}
+.Layer__UI__Heading[data-pie="4xs"] {
+  padding-inline-end: var(--spacing-4xs);
+}
 .Layer__UI__Heading[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
 }
@@ -6898,6 +6946,12 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   width: 100%;
   background-color: var(--color-base-300);
 }
+.Layer__separator[data-mbe="4xs"] {
+  margin-block-end: var(--spacing-4xs);
+}
+.Layer__separator[data-mbs="4xs"] {
+  margin-block-start: var(--spacing-4xs);
+}
 .Layer__separator[data-mbe="3xs"] {
   margin-block-end: var(--spacing-3xs);
 }
@@ -7003,7 +7057,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   --block-size: 2.25rem;
   block-size: var(--block-size);
   border-radius: var(--input-border-radius);
-  border: 1px solid var(--color-base-300);
+  border: 1px solid var(--border-color);
   background-color: var(--color-base-0);
 }
 .Layer__ComboBoxControl--focused {
@@ -7015,6 +7069,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__ComboBoxControl--readonly {
   background-color: var(--bg-muted);
 }
+.Layer__ComboBoxControl--error {
+  border-color: var(--color-danger);
+}
 
 .Layer__ComboBoxContainer > .Layer__ComboBoxControl {
   /*
@@ -7034,6 +7091,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
    */
   outline: 2px solid var(--outline-default) !important;
 }
+.Layer__ComboBoxContainer > .Layer__ComboBoxControl--focused.Layer__ComboBoxControl--error {
+  outline-color: var(--color-info-error-bg) !important;
+}
 
 .Layer__ComboBoxValueContainer {
   padding-inline-start: var(--spacing-xs);
@@ -7156,6 +7216,13 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__ComboBoxNoOptionsMessage {
   padding-block: var(--spacing-sm);
+}
+
+.Layer__ComboBoxPlaceholder {
+  color: var(--color-base-600);
+}
+.Layer__ComboBoxPlaceholder--error {
+  color: var(--color-danger);
 }.Layer__MoneySpan {
   white-space: nowrap;
 }
@@ -7623,6 +7690,91 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__UI__DatePicker[data-disabled] {
   color: var(--color-base-500);
+}
+.Layer__UI__DatePicker[data-readonly] [slot=input] {
+  background-color: var(--bg-muted);
+}.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[data-size=md],
+.Layer__UI__CalendarHeaderCell[data-size=md] {
+  height: 2.75rem;
+  width: 2.75rem;
+  font-size: var(--text-md);
+  line-height: 2.75rem;
+}
+
+.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__DateCalendar__Header {
+  border-bottom: 1px solid var(--border-color);
+}.Layer__PickerDropdownIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--size);
+  min-inline-size: var(--size);
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  color: var(--color-base-600);
+  --size: 1.25rem;
+}.Layer__Popover {
+  display: grid;
+  inline-size: min(90svi, 60ch);
+  border-radius: var(--border-radius-xs);
+  border: 1px solid var(--outline-default);
+  background: var(--color-base-0);
+}
+.Layer__Popover[data-flex-inline] {
+  inline-size: auto;
+}.Layer__UI__DatePicker > .Layer__Label {
+  display: block;
+}.Layer__FormDatePickerField {
+  display: grid;
+  grid-template-areas: "label" "datepicker";
+}
+.Layer__FormDatePickerField--inline {
+  grid-template-areas: "label datepicker";
+  align-items: center;
+}
+.Layer__FormDatePickerField--inline .Layer__UI__DatePicker {
+  display: contents;
+}
+.Layer__FormDatePickerField--inline .Layer__UI__DatePicker > .Layer__UI__Label {
+  grid-area: label;
+}
+.Layer__FormDatePickerField .Layer__UI__DatePicker {
+  grid-area: datepicker;
 }.Layer__RadioGroup {
   display: flex;
   flex-direction: column;
@@ -7630,7 +7782,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__RadioGroup[data-orientation=horizontal] {
   flex-direction: row;
-  gap: var(--spacing-md);
+  gap: var(--spacing-sm);
 }
 
 .Layer__Radio {
@@ -7652,7 +7804,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   background-color: var(--color-base-50);
   color: transparent;
   transition: all 100ms ease-out;
-  --size: 1rem;
+  --size: 1.25rem;
 }
 .Layer__Radio [slot=radio][data-pressed] {
   border-color: var(--outline-active);
@@ -7662,12 +7814,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   stroke: none;
   transition: all 100ms ease-out;
 }
-.Layer__Radio[data-size=md] [slot=radio] {
-  --size: 1.25rem;
-}
-.Layer__Radio[data-size=lg] [slot=radio] {
-  --size: 1.5rem;
-}
 .Layer__Radio[data-readonly] [slot=radio] {
   background-color: var(--bg-muted);
 }
@@ -7692,45 +7838,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__Radio[data-disabled] [slot=radio] {
   background-color: var(--color-base-200);
-}
-.Layer__Radio[data-labeled] {
-  gap: var(--spacing-xs);
-}
-.Layer__Radio[data-invalid] [slot=radio] {
-  border-color: var(--color-info-error);
-}
-.Layer__Radio[data-selected][data-invalid] [slot=radio] {
-  background-color: var(--color-info-error);
-}.Layer__FormRadioGroupField {
+}.Layer__FormRadioGroupField.Layer__RadioGroup {
   display: grid;
-  grid-template-areas: "label" "radiogroup" "error";
-}
-.Layer__FormRadioGroupField > [slot=label] {
-  grid-area: label;
-  padding-block-end: var(--spacing-3xs);
-}
-.Layer__FormRadioGroupField > [slot=radiogroup] {
-  grid-area: radiogroup;
-  margin-block: var(--spacing-2xs);
-}
-.Layer__FormRadioGroupField > [slot=error] {
-  grid-area: error;
-}
-.Layer__FormRadioGroupField__Error {
-  font-size: var(--font-size-xs);
-  color: var(--color-info-error);
+  grid-template-areas: "label" "options";
+  gap: var(--spacing-3xs);
 }
-.Layer__FormRadioGroupField--inline {
-  grid-template-areas: "label radiogroup";
-  grid-template-columns: auto 1fr;
-  align-items: start;
+.Layer__FormRadioGroupField.Layer__RadioGroup.Layer__FormRadioGroupField--inline {
+  grid-template-areas: "label options";
+  gap: 0;
 }
-.Layer__FormRadioGroupField--inline > [slot=label] {
-  padding-block-start: var(--spacing-3xs);
-  padding-block-end: 0;
+.Layer__FormRadioGroupField.Layer__RadioGroup > [slot=label] {
+  grid-area: label;
 }
-.Layer__FormRadioGroupField--inline > [slot=radiogroup] {
-  margin-block: 0;
+.Layer__FormRadioGroupField.Layer__RadioGroup > [slot=options] {
+  grid-area: options;
 }.Layer__UI__Switch {
   display: flex;
   gap: 0.5rem;
@@ -7825,18 +7946,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }.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 .Layer__upload-transactions__select-account-name-input .Layer__select__control {
+.Layer__upload-transactions .Layer__upload-transactions__select-account-name-input__Container {
   max-width: 24rem;
 }
-.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 .Layer__upload-transactions__select-account-name-input--error .Layer__select__placeholder {
-  color: var(--color-danger);
-}
 .Layer__upload-transactions .Layer__upload-transactions__create-account-form {
   padding: var(--spacing-md);
   border-radius: var(--border-radius-3xs);
@@ -8034,15 +8146,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   block-size: 2.75rem;
   inline-size: 6.5rem;
   font-size: var(--text-md);
-}.Layer__Popover {
-  display: grid;
-  inline-size: min(90svi, 60ch);
-  border-radius: var(--border-radius-xs);
-  border: 1px solid var(--outline-default);
-  background: var(--color-base-0);
-}
-.Layer__Popover[data-flex-inline] {
-  inline-size: auto;
 }.Layer__MonthPicker__Popover {
   inline-size: auto;
 }
@@ -8849,49 +8952,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__Pill[data-status=error][data-focus-visible] {
   outline: 1px solid var(--color-info-error-bg);
   outline-offset: 1px;
-}.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[data-size=md],
-.Layer__UI__CalendarHeaderCell[data-size=md] {
-  height: 2.75rem;
-  width: 2.75rem;
-  font-size: var(--text-md);
-  line-height: 2.75rem;
-}
-
-.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__DateCalendar__Header {
-  border-bottom: 1px solid var(--border-color);
 }.Layer__caobfb {
   position: relative;
   display: flex;
@@ -10062,12 +10122,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }.Layer__InvoiceForm__LineItem {
   display: grid;
   --grid-cols-base:
-    minmax(10rem, 3fr)
-    minmax(10rem, 3fr)
     minmax(12rem, 4fr)
     minmax(4rem, 1fr)
-    minmax(6rem, 2fr)
-    minmax(6rem, 2fr)
+    minmax(6rem, 1fr)
+    minmax(6rem, 1fr)
     minmax(3rem, 0fr);
   grid-template-columns: var(--grid-cols-base) auto;
   width: 100%;

package/dist/index.d.ts

@@ -538,10 +538,9 @@ declare interface IntegrationsProps {
     };
 }
 
-export declare const Invoices: ({ showTitle, stringOverrides, onSendInvoice, }: InvoicesProps) => JSX_2.Element;
+export declare const Invoices: ({ stringOverrides, onSendInvoice }: InvoicesProps) => JSX_2.Element;
 
 declare interface InvoicesProps {
-    showTitle?: boolean;
     stringOverrides?: InvoicesStringOverrides;
     onSendInvoice?: (invoiceId: string) => Awaitable<void>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.121",
+  "version": "0.1.122-alpha",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",