@layerfi/components 0.1.128 → 0.1.129-alpha

package/dist/index.css

@@ -3247,6 +3247,10 @@
   border-radius: var(--spacing-sm);
   box-shadow: 0 4px 12px 0 var(--base-transparent-8), 0 2px 4px 0 var(--base-transparent-6), 0 0 0 1px var(--base-transparent-4);
   background: var(--color-base-0);
+}
+.Layer__card--reset {
+  border: 1px solid var(--color-base-200);
+  box-shadow: none;
 }.Layer__hover-menu {
   position: relative;
   display: flex;
@@ -5222,117 +5226,70 @@
   grid-template-columns: 16rem minmax(auto, 24rem);
 }.Layer__TaxBanner {
   max-width: 1406px;
-}.Layer__ExpandableCard {
-  border-radius: 0;
-  border: none;
-  box-shadow: none;
-}
-.Layer__ExpandableCard:not(:first-child) {
-  border-top: 1px solid var(--color-base-300);
-}
-.Layer__ExpandableCard__Header {
-  all: unset;
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  padding: var(--spacing-md);
-  cursor: pointer;
-}
-.Layer__ExpandableCard__Content {
-  padding-block-end: var(--spacing-md);
-  padding-inline: var(--spacing-md);
 }.Layer__ResponsiveDetailView {
   container-type: inline-size;
-}.Layer__TaxTable {
-  width: 100%;
-  table-layout: fixed;
+}.Layer__TaxSummaryCard--mobile {
+  border-block-start: 1px solid var(--color-base-200);
 }
-.Layer__TaxTable__Header {
-  display: none;
-}
-.Layer__TaxTable .Layer__UI__Table-Row {
-  display: grid;
-  grid-template-columns: minmax(6rem, 60%) minmax(4rem, 40%);
-}
-.Layer__TaxTable .Layer__UI__Table-Row--mobile {
-  height: auto;
-}
-.Layer__TaxTable .Layer__UI__Table-Cell:nth-child(2) {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.Layer__UI__Table-Row.Layer__TaxTable__Row--nested {
-  background-color: var(--color-base-50);
-}
-.Layer__UI__Table-Row.Layer__TaxTable__Row--nested .Layer__UI__Table-Cell:first-child {
-  padding-left: var(--spacing-lg);
-}
-.Layer__UI__Table-Row.Layer__TaxTable__Row--empty {
-  height: var(--spacing-md);
-}
-.Layer__UI__Table-Row.Layer__TaxTable__Row--section-total {
-  border-bottom: 1px solid var(--color-border);
-}
-.Layer__UI__Table-Row.Layer__TaxTable__Row--total {
-  border-top: 2px solid var(--color-border);
-}.Layer__TaxDetailsExpandableCardHeading {
-  width: 100%;
+@media (width > 760px) {
+  .Layer__TaxSummaryCard--mobile {
+    border: none;
+  }
 }
 
-.Layer__TaxDetailsExpandableCardHeading > .Layer__Span.Layer__MoneySpan {
-  height: fit-content;
-  margin-block: auto;
+.Layer__TaxSummaryCard__MobileToggleWrapper {
+  margin-top: var(--spacing-md);
 }.Layer__TaxSummaryCard {
+  display: grid;
+  grid-template-columns: 20% 40% 40%;
   width: 100%;
   border-block-end: 1px solid var(--color-base-200);
 }
-.Layer__TaxSummaryCard__Overview {
-  min-width: 200px;
+.Layer__TaxSummaryCard__Cell {
+  position: relative;
   padding: var(--spacing-lg);
-  border-inline-end: 1px solid var(--color-base-200);
 }
-.Layer__TaxSummaryCard__Breakdown {
-  flex: 1;
-  padding: var(--spacing-lg);
-  padding-block-end: var(--spacing-xl);
+.Layer__TaxSummaryCard__Cell--header {
+  border-block-end: 1px solid var(--color-base-200);
 }
-.Layer__TaxSummaryCard__Grid {
-  display: grid;
-  grid-template-columns: repeat(5, auto);
-  row-gap: var(--spacing-3xs);
-  column-gap: var(--spacing-md);
-  align-items: baseline;
-  width: fit-content;
+.Layer__TaxSummaryCard__Cell--bordered {
+  border-inline-start: 1px solid var(--color-base-200);
 }
-.Layer__TaxSummaryCard__Grid > .Layer__Span {
-  text-align: right;
+.Layer__TaxSummaryCard__OperatorIconAnchor {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--color-base-0);
+  transform: translate(-50%, -50%);
 }
-.Layer__TaxSummaryCard__Grid--mobile {
-  grid-template-columns: 1fr auto 1fr auto 1fr;
-  column-gap: var(--spacing-sm);
-  width: 100%;
+.Layer__TaxSummaryCard__OperatorCircle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-base-500);
 }
-.Layer__TaxSummaryCard__SectionGroup {
-  display: contents;
+.Layer__TaxSummaryCard__Equation {
+  flex-wrap: wrap;
 }
-.Layer__TaxSummaryCard__SectionGroup > .Layer__Span:first-child {
-  grid-column: 1/-1;
-  text-align: left;
+.Layer__TaxSummaryCard__AmountWithLabel {
+  min-width: 0;
 }
-.Layer__TaxSummaryCard__SectionGroup:not(:first-child) > .Layer__Span:first-child {
-  padding-block-start: var(--spacing-md);
-  margin-block-start: var(--spacing-3xs);
-  border-block-start: 1px solid var(--color-base-100);
+.Layer__TaxSummaryCard__Operator {
+  align-self: center;
 }
 .Layer__TaxSummaryCard--mobile {
   width: 100%;
 }
-.Layer__TaxSummaryCard__OverviewCard {
+.Layer__TaxSummaryCard__MobileCard {
   padding: var(--spacing-lg);
 }
-.Layer__TaxSummaryCard__BreakdownCard {
-  padding: var(--spacing-lg);
+.Layer__TaxSummaryCard__MobileSections {
+  padding-block-start: var(--spacing-sm);
+  border-block-start: 1px solid var(--color-base-200);
 }.Layer__FullYearProjectionComboBox__Container {
   inline-size: 11rem;
   max-inline-size: 11rem;
@@ -5346,15 +5303,52 @@
   .Layer__TaxEstimatesHeader__ComboBoxContainer {
     width: 100%;
   }
-}.Layer__TaxDetails--mobile .Layer__TaxSummaryCard--mobile > .Layer__card,
-.Layer__TaxDetails--mobile .Layer__TaxDetails__ExpandableCardsWrapper {
-  border: 1px solid var(--color-base-200);
-  box-shadow: none;
+}.Layer__UI__Table__TaxDetails {
+  width: 100%;
+}
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-TableHeader {
+  display: none;
+}
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-Row,
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-TableHeader > tr {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(4rem, 8rem);
+}
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-Row[data-depth="0"] .Layer__Span,
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-TableHeader > tr[data-depth="0"] .Layer__Span {
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-bold);
+}
+@media (width <= 500px) {
+  .Layer__UI__Table__TaxDetails .Layer__UI__Table-Row[data-depth="0"] .Layer__Span,
+  .Layer__UI__Table__TaxDetails .Layer__UI__Table-TableHeader > tr[data-depth="0"] .Layer__Span {
+    font-size: var(--text-md);
+  }
+}
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-Column__TaxDetails--Amount,
+.Layer__UI__Table__TaxDetails .Layer__UI__Table-Cell__TaxDetails--Amount {
+  justify-content: flex-end;
+  text-align: right;
 }
 
 .Layer__TaxDetails__ExpandableCardsWrapper {
   overflow: hidden;
   border-radius: var(--spacing-sm);
+}
+
+@media (width >= 760px) {
+  .Layer__TaxDetails .Layer__card {
+    border-radius: 0;
+  }
+  .Layer__TaxDetails__ExpandableCardsWrapper {
+    border-radius: 0;
+  }
+}.Layer__TaxDetails__Operator {
+  display: inline-flex;
+  align-items: center;
+  align-self: stretch;
+  padding-inline-end: var(--spacing-md);
+  border-inline-end: 1px solid var(--color-base-500);
 }.Layer__SummaryCard__ContainerHeader {
   box-sizing: border-box;
   border-bottom: 1px solid var(--color-base-300);
@@ -5623,6 +5617,25 @@
 }
 .Layer__UI__Table__TaxPaymentsTable .Layer__DataTable__EmptyState__Row {
   background-color: var(--color-base-0);
+}.Layer__ExpandableCard {
+  border-radius: 0;
+  border: none;
+  box-shadow: none;
+}
+.Layer__ExpandableCard:not(:first-child) {
+  border-top: 1px solid var(--color-base-300);
+}
+.Layer__ExpandableCard__Header {
+  all: unset;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  padding: var(--spacing-md);
+  cursor: pointer;
+}
+.Layer__ExpandableCard__Content {
+  padding-block-end: var(--spacing-md);
+  padding-inline: var(--spacing-md);
 }.Layer__TimeTrackingServicesDrawer {
   box-sizing: border-box;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.128",
+  "version": "0.1.129-alpha",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -124,4 +124,4 @@
     "uuid": "^11.1.0",
     "zustand": "^5.0.4"
   }
-}
+}