@layerfi/components 0.1.114-alpha.6 → 0.1.115-alpha

package/dist/index.css

@@ -5392,7 +5392,7 @@ tbody .Layer__table__empty-row:first-child {
   grid-auto-rows: minmax(0, 1fr);
   gap: var(--spacing-sm);
 }
-@container (min-width: 48rem) {
+@container (min-width: 60rem) {
   .Layer__ProfitAndLossSummariesList {
     --column-count: 3;
     grid-template-columns: repeat(var(--column-count), minmax(0, 1fr));
@@ -5845,9 +5845,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-charts__head > .Layer__text {
   margin: 0;
 }
-.Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker {
-  display: none;
-}
 .Layer__profit-and-loss-detailed-charts {
   width: 100%;
   border-radius: var(--border-radius-sm);
@@ -5886,58 +5883,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   fill: var(--text-color-primary);
   font-size: 14px;
 }
-.Layer__profit-and-loss-detailed-charts .filters {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--spacing-xs);
-  align-items: center;
-  padding: var(--spacing-2xs) var(--spacing-xs);
-  border-bottom: 1px solid var(--color-base-300);
-  margin: 0 var(--spacing-md);
-}
-.Layer__profit-and-loss-detailed-charts .type-select {
-  display: inline-flex;
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-normal);
-  border-color: transparent;
-  font-variant-numeric: lining-nums proportional-nums;
-  font-feature-settings: "cv10" on, "cv05" on, "cv08" on, "ss03" on;
-}
-.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__control {
-  box-shadow: none;
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-normal);
-  border-color: transparent;
-  font-variant-numeric: lining-nums proportional-nums;
-  font-feature-settings: "cv10" on, "cv05" on, "cv08" on, "ss03" on;
-}
-.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__placeholder {
-  font-size: 12px;
-  font-family: var(--font-family);
-  font-weight: var(--font-weight-normal);
-  font-variant-numeric: lining-nums proportional-nums;
-  font-feature-settings: "cv10" on, "cv05" on, "cv08" on, "ss03" on;
-}
-.Layer__profit-and-loss-detailed-charts .type-select .Layer__select__indicator-separator {
-  display: none;
-}
-.Layer__profit-and-loss-detailed-charts .Layer__select__menu {
-  z-index: 2;
-  width: min-content;
-  max-width: 300px;
-}
-.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option {
-  z-index: 999;
-  overflow: hidden;
-  width: 100%;
-  font-size: 12px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-.Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-focused, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option.Layer__select__option--is-selected, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:hover, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:active, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-visible, .Layer__profit-and-loss-detailed-charts .Layer__select__menu .Layer__select__option:focus-within {
-  background: var(--color-base-100);
-  color: var(--text-color-primary);
-}
 .Layer__profit-and-loss-detailed-charts .details-container {
   padding: var(--spacing-md);
   padding-top: var(--spacing-2xs);
@@ -5986,9 +5931,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   width: 12px;
   border-radius: 2px;
 }
-.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .Layer__value-icon--uncategorized {
-  background-image: repeating-linear-gradient(-45deg, var(--color-base-200) 0, var(--color-base-200) 2px, var(--color-base-500) 2px, var(--color-base-500) 3.5px, var(--color-base-200) 3.5px, var(--color-base-200) 4px);
-}
 .Layer__profit-and-loss .Layer__panel__sidebar .Layer__panel__sidebar-content {
   width: 100%;
 }
@@ -6063,12 +6005,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .header--tablet .title {
     font-size: 24px;
   }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__date-month-picker {
-    margin-top: var(--spacing-sm);
-  }
-  .Layer__profit-and-loss-detailed-charts .header--tablet .Layer__date-month-picker .Layer__date-month-picker__label {
-    font-size: 14px;
-  }
 }
 @container (max-width: 767px) {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content {
@@ -6082,12 +6018,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
     display: none;
   }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker {
-    display: flex;
-  }
-  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .Layer__date-month-picker .Layer__date-month-picker__label {
-    font-size: 14px;
-  }
 }
 .Layer__tooltip {
   box-sizing: border-box;
@@ -7462,6 +7392,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-inline-size: min(60rem, 100%);
 }
 .Layer__UI__Heading[data-pbe="3xs"] {
   padding-block-end: var(--spacing-3xs);
@@ -8107,6 +8038,57 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 }
 .Layer__UI__DatePicker[data-disabled] {
   color: var(--color-base-500);
+}.Layer__UI__Switch {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.Layer__UI__Switch [slot=indicator] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  height: 1.25rem;
+  width: 2.25rem;
+  border-radius: 1rem;
+  border: 1px solid var(--outline-default);
+  background: var(--color-base-0);
+  transition: all 200ms;
+}
+.Layer__UI__Switch [slot=indicator]::before {
+  height: 1rem;
+  width: 1rem;
+  border-radius: 0.5rem;
+  background: var(--color-base-1000);
+  content: "";
+  transition: all 200ms;
+}
+.Layer__UI__Switch[data-selected] [slot=indicator] {
+  border-color: var(--color-base-1000);
+  background: var(--color-base-1000);
+}
+.Layer__UI__Switch[data-selected] [slot=indicator]::before {
+  background: var(--color-base-0);
+  transform: translateX(1.125rem);
+}.Layer__FormSwitchField {
+  display: grid;
+  grid-template-areas: "label" "switch";
+}
+.Layer__FormSwitchField > [slot=switch] {
+  grid-area: switch;
+  justify-self: center;
+  margin-block: var(--spacing-2xs);
+}
+.Layer__FormSwitchField > [slot=label] {
+  grid-area: label;
+  padding-block-end: var(--spacing-3xs);
+}
+.Layer__FormSwitchField--inline {
+  grid-template-areas: "label switch";
+  gap: var(--spacing-3xs);
+  align-items: center;
+}
+.Layer__FormSwitchField--inline > [slot=label] {
+  padding-block-end: 0;
 }.Layer__UI__TextArea {
   box-sizing: content-box;
   min-block-size: 5lh;
@@ -8114,7 +8096,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-inline-start: var(--spacing-xs);
   padding-inline-end: var(--spacing-3xs);
   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);
   font-size: var(--input-font-size);
   line-height: 140%;
@@ -8755,36 +8737,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   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__Switch {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-.Layer__Switch [slot=indicator] {
-  display: flex;
-  align-items: center;
-  height: 1.25rem;
-  width: 2.25rem;
-  border-radius: 1rem;
-  border: 1px solid var(--outline-default);
-  background: var(--color-base-0);
-  transition: all 200ms;
-}
-.Layer__Switch [slot=indicator]::before {
-  height: 1rem;
-  width: 1rem;
-  border-radius: 0.5rem;
-  background: var(--color-base-1000);
-  content: "";
-  transition: all 200ms;
-}
-.Layer__Switch[data-selected] [slot=indicator] {
-  border-color: var(--color-base-1000);
-  background: var(--color-base-1000);
-}
-.Layer__Switch[data-selected] [slot=indicator]::before {
-  background: var(--color-base-0);
-  transform: translateX(1.125rem);
 }.Layer__BankTransactionsMobileBulkActionsHeader__checkbox-container {
   gap: 20px;
 }.Layer__BusinessFormMobile {
@@ -10504,10 +10456,11 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__UI__Table__TripsTable .Layer__UI__Table-Row,
 .Layer__UI__Table__TripsTable .Layer__UI__Table-TableHeader > tr {
   display: grid;
-  grid-template-columns: minmax(8rem, 10%) minmax(8rem, 15%) minmax(6rem, 10%) minmax(8rem, 10%) minmax(12rem, 25%) minmax(12rem, 30%) 3.75rem;
+  grid-template-columns: minmax(8rem, 10%) minmax(8rem, 15%) minmax(6rem, 10%) minmax(8rem, 10%) minmax(12rem, 25%) minmax(12rem, 30%) 6rem;
 }
-.Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Distance,
-.Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Distance {
+.Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Distance, .Layer__UI__Table__TripsTable .Layer__UI__Table-Column__TripsTable--Actions,
+.Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Distance,
+.Layer__UI__Table__TripsTable .Layer__UI__Table-Cell__TripsTable--Actions {
   justify-content: flex-end;
 }.Layer__VehicleForm {
   display: flex;
@@ -10526,9 +10479,24 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__VehicleForm .Layer__VehicleForm__Field__Year,
 .Layer__VehicleForm .Layer__VehicleForm__Field__LicensePlate,
 .Layer__VehicleForm .Layer__VehicleForm__Field__Vin,
-.Layer__VehicleForm .Layer__VehicleForm__Field__Description {
+.Layer__VehicleForm .Layer__VehicleForm__Field__Description,
+.Layer__VehicleForm .Layer__VehicleForm__Field__IsPrimary {
   grid-template-columns: 10rem auto;
   width: 100%;
+}.Layer__VehicleCard {
+  transition: box-shadow 0.2s ease;
+}
+.Layer__VehicleCard:hover {
+  box-shadow: 0 8px 16px 0 var(--base-transparent-8), 0 4px 8px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
+}
+.Layer__VehicleCard .Layer__VehicleCard__Header {
+  flex: 1;
+  min-width: 0;
+}
+.Layer__VehicleCard .Layer__VehicleCard__Icon {
+  min-height: 20px;
+  min-width: 20px;
+  color: var(--color-base-400);
 }.Layer__VehicleManagementGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
@@ -10539,16 +10507,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__VehicleManagementGrid {
     grid-template-columns: 1fr;
   }
-}.Layer__VehicleCard {
-  transition: box-shadow 0.2s ease;
-}
-.Layer__VehicleCard:hover {
-  box-shadow: 0 8px 16px 0 var(--base-transparent-8), 0 4px 8px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
-}
-.Layer__VehicleCard .Layer__VehicleCard__icon {
-  min-height: 20px;
-  min-width: 20px;
-  color: var(--color-base-400);
 }.Layer__project-view .Layer__category-menu {
   max-width: 300px;
 }

package/package.json

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