@layerfi/components 0.1.116-alpha → 0.1.116-alpha.1

package/dist/index.css

@@ -181,6 +181,20 @@
   font-weight: var(--font-weight-normal);
   font-feature-settings: "cv10" on, "cv01" on, "cv05" on, "cv08" on, "ss03" on;
 }
+@media (width <= 768px) {
+  .Layer__component,
+  .Layer__Portal,
+  .Layer__view,
+  .Layer__select__menu-portal,
+  .Layer__tooltip,
+  .Layer__UI__tooltip,
+  .Layer__toasts-container,
+  .Layer__drawer,
+  .Layer__variables,
+  .Layer__tasks-component {
+    --text-heading: 20px;
+  }
+}
 .Layer__view,
 .Layer__component,
 .Layer__Portal,
@@ -231,6 +245,9 @@
 .Layer__component *::-webkit-scrollbar-thumb:hover {
   background: #999;
 }
+.Layer__sortable-col.value-col {
+  text-align: right;
+}
 .Layer__sortable-col .Layer__sort-arrows .desc-arrow,
 .Layer__sortable-col .Layer__sort-arrows .asc-arrow {
   stroke: var(--color-base-500);
@@ -5595,10 +5612,10 @@ tbody .Layer__table__empty-row:first-child {
 #layer-pie-dots-pattern rect.bg {
   fill: var(--color-base-100);
 }
-#layer-pie-dots-pattern-legend rect {
+.Layer__charts__dots-pattern-legend__dot {
   fill: var(--color-base-500);
 }
-#layer-pie-dots-pattern-bg {
+.Layer__charts__dots-pattern-legend__bg {
   fill: var(--color-base-100);
 }
 @container (min-width: 1024px) {
@@ -5774,10 +5791,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding-bottom: var(--spacing-lg);
   padding-left: var(--spacing-md);
 }
-@container (max-width: 280px) {
-  .Layer__profit-and-loss-detailed-charts .chart-container {
-    width: 100%;
-  }
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart {
+  box-sizing: border-box;
+  height: 280px;
+  width: 100%;
+  padding-top: var(--spacing-2xl);
+  padding-right: var(--spacing-md);
+  padding-bottom: var(--spacing-lg);
+  padding-left: var(--spacing-md);
+}
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart-content {
+  height: 100%;
+}
+.Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__empty-chart-icon {
+  color: var(--color-base-400);
 }
 .Layer__profit-and-loss-detailed-charts .recharts-responsive-container {
   box-shadow: none;
@@ -5808,11 +5835,20 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   padding: var(--spacing-2xs) var(--spacing-xs);
   font-size: 12px;
   text-align: left;
-  transition: color 150ms ease-out;
 }
-.Layer__profit-and-loss-detailed-charts .details-container table th:last-child, .Layer__profit-and-loss-detailed-charts .details-container table th.value-col,
-.Layer__profit-and-loss-detailed-charts .details-container table td:last-child,
-.Layer__profit-and-loss-detailed-charts .details-container table td.value-col {
+.Layer__profit-and-loss-detailed-charts .details-container table th:first-child,
+.Layer__profit-and-loss-detailed-charts .details-container table td:first-child {
+  width: 20px;
+  padding-right: 0;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th:last-child,
+.Layer__profit-and-loss-detailed-charts .details-container table td:last-child {
+  text-align: right;
+}
+.Layer__profit-and-loss-detailed-charts .details-container table th.percent-col,
+.Layer__profit-and-loss-detailed-charts .details-container table td.percent-col {
+  width: 4ch;
+  padding-left: 0;
   text-align: right;
 }
 .Layer__profit-and-loss-detailed-charts .details-container table th {
@@ -5822,6 +5858,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--color-base-500);
   transition: color 150ms ease-out;
 }
+.Layer__profit-and-loss-detailed-charts .details-container table th:first-child {
+  cursor: default;
+}
 .Layer__profit-and-loss-detailed-charts .details-container table th:hover {
   color: var(--color-base-800);
 }
@@ -5832,22 +5871,18 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   position: relative;
   top: 1px;
 }
-.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content {
-  display: flex;
-  gap: var(--spacing-2xs);
-  align-items: center;
-  justify-content: flex-end;
-}
-.Layer__profit-and-loss-detailed-charts .details-container .share-cell-content .share-icon {
+.Layer__profit-and-loss-detailed-charts .details-container .color-col .share-icon {
   height: 12px;
   width: 12px;
   border-radius: 2px;
 }
-.Layer__profit-and-loss .Layer__panel__sidebar .Layer__panel__sidebar-content {
-  width: 100%;
+.Layer__profit-and-loss-detailed-charts .details-container .percent-col .share-text {
+  font-size: var(--text-sm);
+  line-height: 140%;
+  color: var(--color-base-600);
 }
-.Layer__profit-and-loss .Layer__panel__sidebar .Layer__profit-and-loss-detailed-charts {
-  width: 100%;
+.Layer__profit-and-loss-detailed-charts .details-container tbody tr {
+  height: 2.5rem;
 }
 .Layer__profit-and-loss-detailed-table__row {
   border-radius: 2px;
@@ -5859,7 +5894,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   color: var(--text-color-primary);
 }
 .Layer__profit-and-loss-detailed-table__row .type-col,
-.Layer__profit-and-loss-detailed-table__row .share-col {
+.Layer__profit-and-loss-detailed-table__row .percent-col {
   color: var(--color-base-500);
 }
 .Layer__profit-and-loss-detailed-table__row.active {
@@ -5868,7 +5903,7 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 .Layer__profit-and-loss-detailed-table__row.active .category-col,
 .Layer__profit-and-loss-detailed-table__row.active .value-col,
 .Layer__profit-and-loss-detailed-table__row.active .type-col,
-.Layer__profit-and-loss-detailed-table__row.active .share-col {
+.Layer__profit-and-loss-detailed-table__row.active .percent-col {
   color: var(--color-base-1000);
 }
 .Layer__profit-and-loss-detailed-charts__pie {
@@ -5900,6 +5935,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .chart-container {
     max-width: 300px;
   }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__content .Layer__profit-and-loss-detailed-charts__empty-chart {
+    max-width: 300px;
+  }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     display: flex;
     flex: 1;
@@ -5926,6 +5964,10 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper {
     width: 100%;
+    padding-inline: var(--spacing-md);
+  }
+  .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__table-wrapper .Layer__Span {
+    margin: 0 1rem;
   }
   .Layer__profit-and-loss-detailed-charts .Layer__profit-and-loss-detailed-charts__head .date {
     display: none;
@@ -7009,7 +7051,6 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
   z-index: 100;
   inset: 0;
   display: grid;
-  height: var(--visual-viewport-height);
   background: rgba(0, 0, 0, 0.5);
   place-items: center;
 }
@@ -8268,6 +8309,9 @@ header.Layer__profit-and-loss-detailed-charts__header--tablet {
 
 .Layer__MonthPicker__InputGroup {
   inline-size: 12rem;
+}
+.Layer__MonthPicker__InputGroup--mobile {
+  inline-size: 12ch;
 }.Layer__NewToggle {
   box-sizing: border-box;
   position: relative;

package/package.json

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