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

package/dist/index.css

@@ -526,18 +526,12 @@
 .Layer__component .recharts-wrapper g:focus {
   outline: none;
 }
-.Layer__component .recharts-responsive-container.Layer__chart-container {
-  padding-top: 42px;
-}
 .Layer__UI__Chart--focusReset .recharts-wrapper:focus,
 .Layer__UI__Chart--focusReset .recharts-wrapper :focus,
 .Layer__UI__Chart--focusReset .recharts-surface:focus,
 .Layer__UI__Chart--focusReset .recharts-bar-rectangle:focus {
   outline: none;
 }
-.Layer__chart-wrapper {
-  position: relative;
-}
 .Layer__chart-container {
   min-height: 300px;
 }
@@ -3663,9 +3657,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-chart .recharts-cartesian-axis-tick-value tspan {
   font-size: 0.75rem;
 }
-.Layer__profit-and-loss-chart .recharts-legend-wrapper {
-  margin-top: -46px;
-}
 .Layer__profit-and-loss-chart .recharts-legend-item-text {
   font-size: 12px;
   color: var(--color-base-700);
@@ -3684,11 +3675,6 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__profit-and-loss-chart .legend-item-2 {
   fill: var(--base-transparent-16-light);
 }
-.Layer__profit-and-loss-chart__selection-indicator {
-  stroke: var(--chart-indicator-color);
-  fill: none;
-  transition: opacity 0.1s linear;
-}
 /** ---- */
 .Layer__profit-and-loss__chart_with_summaries {
   display: flex;
@@ -3953,26 +3939,6 @@ tbody .Layer__table__empty-row:first-child {
   justify-content: space-between;
   padding: var(--spacing-2xs) var(--spacing-xs);
 }
-.Layer__accounting-overview-profit-and-loss-charts {
-  max-width: 1406px;
-}
-.Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
-  margin-top: -42px;
-}
-@container (max-width: 1023px) {
-  .Layer__accounting-overview-profit-and-loss .recharts-legend-wrapper {
-    margin-top: -40px;
-  }
-}
-.Layer__accounting-overview-profit-and-loss-chart {
-  box-sizing: border-box;
-  width: 100%;
-}
-@container (max-width: 460px) {
-  .Layer__component.Layer__accounting-overview-profit-and-loss .recharts-responsive-container {
-    margin-top: -12px;
-  }
-}
 .Layer__bookkeeping-overview--view .Layer__panel .Layer__panel__content .Layer__component-header {
   z-index: 1;
 }
@@ -3995,21 +3961,6 @@ tbody .Layer__table__empty-row:first-child {
     padding-right: 0;
   }
 }
-.Layer__bookkeeping-overview-profit-and-loss-chart {
-  box-sizing: border-box;
-  width: 100%;
-}
-.Layer__bookkeeping-overview-profit-and-loss-charts {
-  max-width: 1406px;
-}
-.Layer__bookkeeping-overview-profit-and-loss .recharts-legend-wrapper {
-  top: 16px !important;
-}
-@container (max-width: 460px) {
-  .Layer__component.Layer__bookkeeping-overview-profit-and-loss .recharts-responsive-container {
-    margin-top: -12px;
-  }
-}
 .Layer__reports {
   overflow: hidden;
 }
@@ -7860,6 +7811,10 @@ tbody .Layer__table__empty-row:first-child {
   z-index: 101;
 }.Layer__ChartYAxis__tick tspan {
   font-size: var(--text-sm);
+}.Layer__ProfitAndLossChart__SelectionIndicator {
+  stroke: var(--chart-indicator-color);
+  fill: none;
+  transition: opacity 0.1s linear;
 }.Layer__ChartTooltip {
   padding: var(--spacing-2xs) var(--spacing-sm);
   border-radius: var(--border-radius-3xs);
@@ -7877,6 +7832,11 @@ tbody .Layer__table__empty-row:first-child {
   column-gap: var(--spacing-sm);
   justify-content: space-between;
   list-style: none;
+}.Layer__ProfitAndLossChart {
+  position: relative;
+}
+.Layer__ProfitAndLossChart__Container {
+  min-block-size: 18.75rem;
 }#layer-pie-dots-pattern rect {
   fill: var(--color-base-500);
 }
@@ -9520,6 +9480,40 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__UnifiedReports__Content {
   overflow-y: auto;
   min-width: 0;
+}.Layer__PnlLegend__Swatch {
+  display: inline-block;
+  flex-shrink: 0;
+  block-size: 0.625rem;
+  inline-size: 0.625rem;
+  border-radius: 50%;
+}
+
+.Layer__PnlLegend__Swatch--income {
+  background-color: var(--bar-color-income);
+}
+
+.Layer__PnlLegend__Swatch--expenses {
+  background-color: var(--bar-color-expenses);
+}
+
+.Layer__PnlLegend__Swatch--uncategorized {
+  background-image: linear-gradient(45deg, var(--color-base-500) 25%, transparent 25%, transparent 50%, var(--color-base-500) 50%, var(--color-base-500) 75%, transparent 75%, transparent);
+  background-size: 4px 4px;
+}.Layer__AccountingOverview__ProfitAndLossHeader {
+  padding-block-start: var(--spacing-lg);
+  padding-block-end: 0;
+  padding-inline: var(--spacing-lg);
+}
+.Layer__AccountingOverview__ProfitAndLossContainer {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__AccountingOverview__ProfitAndLossCharts {
+  max-inline-size: 1406px;
+}
+.Layer__AccountingOverview__ProfitAndLossChart {
+  box-sizing: border-box;
+  inline-size: 100%;
 }.Layer__UI__DateTile {
   width: 5.5rem;
   border-radius: var(--border-radius-xs);
@@ -9596,6 +9590,16 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__CallBooking__JoinAction {
     flex: 1 1 100%;
   }
+}.Layer__BookkeepingOverview__ProfitAndLossContainer {
+  display: flex;
+  flex-direction: column;
+}
+.Layer__BookkeepingOverview__ProfitAndLossCharts {
+  max-inline-size: 1406px;
+}
+.Layer__BookkeepingOverview__ProfitAndLossChart {
+  box-sizing: border-box;
+  inline-size: 100%;
 }.Layer__MileageDeductionChart .recharts-wrapper:focus,
 .Layer__MileageDeductionChart .recharts-wrapper :focus,
 .Layer__MileageDeductionChart .recharts-surface:focus,
@@ -9852,37 +9856,8 @@ tbody .Layer__table__empty-row:first-child {
   .Layer__MileageTrackingSummary__Cards .Layer__MileageTrackingSummary__StatCardSlot > * {
     flex: 1;
   }
-}.Layer__PnlLegend__Swatch {
-  display: inline-block;
-  flex-shrink: 0;
-  block-size: 0.625rem;
-  inline-size: 0.625rem;
-  border-radius: 50%;
-}
-
-.Layer__PnlLegend__Swatch--income {
-  background-color: var(--bar-color-income);
-}
-
-.Layer__PnlLegend__Swatch--expenses {
-  background-color: var(--bar-color-expenses);
-}
-
-.Layer__PnlLegend__Swatch--uncategorized {
-  background-image: linear-gradient(45deg, var(--color-base-500) 25%, transparent 25%, transparent 50%, var(--color-base-500) 50%, var(--color-base-500) 75%, transparent 75%, transparent);
-  background-size: 4px 4px;
-}.Layer__ProfitAndLossSummaryCard .Layer__chart-wrapper,
-.Layer__ProfitAndLossSummaryCard .Layer__chart-container {
-  height: 100%;
-  min-block-size: 15.625rem;
-}
-.Layer__ProfitAndLossSummaryCard div.recharts-responsive-container.Layer__chart-container {
-  padding-block-start: var(--spacing-xs);
-}
-@media (width <= 760px) {
-  .Layer__ProfitAndLossSummaryCard .Layer__chart-wrapper {
-    height: unset;
-  }
+}.Layer__ProfitAndLossSummaryCard {
+  position: relative;
 }.Layer__SolopreneurLayout__OnboardingBanner {
   max-width: 1406px;
 }.Layer__Swatch {

package/dist/index.d.ts

@@ -825,7 +825,7 @@ export declare const ProfitAndLoss: {
         stringOverrides?: ProfitAndLossDetailedChartsStringOverrides;
         slotProps?: ProfitAndLossDetailedChartsSlotProps;
     }) => JSX_2.Element;
-    Header: ({ text, className, headingClassName, withDatePicker, withDownloadButton, withStatus, stringOverrides, dateSelectionMode, }: ProfitAndLossHeaderProps) => JSX_2.Element;
+    Header: ({ text, className, headingClassName, withDatePicker, withDownloadButton, withStatus, stringOverrides, dateSelectionMode, trailingContent, }: ProfitAndLossHeaderProps) => JSX_2.Element;
     Report: ({ stringOverrides, dateSelectionMode, csvMoneyFormat, view, renderInAppLink, hideHeader, }: ProfitAndLossReportProps) => JSX_2.Element;
 };
 
@@ -903,6 +903,7 @@ declare interface ProfitAndLossHeaderProps {
     withDownloadButton?: boolean;
     withStatus?: boolean;
     dateSelectionMode?: DateSelectionMode;
+    trailingContent?: ReactNode;
 }
 
 declare interface ProfitAndLossHeaderStringOverrides {

package/package.json

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