@layerfi/components 0.1.128 → 0.1.129-alpha.1

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;
@@ -4119,15 +4123,6 @@
 
 .Layer__tabs--initialized .Layer__tabs__thumb {
   transition: left 150ms ease, width 150ms ease;
-}
-
-@container (width <= 400px) {
-  .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label {
-    display: none;
-  }
-  .Layer__tabs-option .Layer__tasks__badge .Layer__tasks__badge__label-short {
-    display: flex;
-  }
 }body .calendly-overlay .calendly-popup {
   max-height: 1024px;
 }
@@ -5222,117 +5217,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__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__TaxSummaryCard--mobile {
+  border-block-start: 1px solid var(--color-base-200);
 }
-.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 +5294,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 +5608,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;
 }
@@ -7805,7 +7809,7 @@ tbody .Layer__table__empty-row:first-child {
 .Layer__tasks-header__notification__button:hover {
   background: var(--color-base-1000);
 }
-.Layer__tasks__badge {
+.Layer__TasksBadge {
   display: flex;
   gap: var(--spacing-3xs);
   align-items: center;
@@ -7816,48 +7820,34 @@ tbody .Layer__table__empty-row:first-child {
   color: var(--color-info-warning-bg);
   white-space: nowrap;
 }
-.Layer__tasks__badge .Layer__tasks__badge__label-short {
-  display: none;
-}
-@container (width <= 130px) {
-  .Layer__tasks__badge .Layer__tasks__badge__label {
-    display: none;
-  }
-  .Layer__tasks__badge .Layer__tasks__badge__label-short {
-    display: flex;
-  }
-}
-.Layer__tasks__badge[data-icononly] {
+.Layer__TasksBadge[data-icononly] {
   gap: 0;
   height: 16px;
   width: 16px;
   padding: 0;
   border-radius: 50%;
 }
-.Layer__tasks__badge .Layer__text {
+.Layer__TasksBadge .Layer__text {
   line-height: 10px;
 }
-.Layer__tasks__badge .Layer__tasks__badge__icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.Layer__TasksBadge .Layer__TasksBadge__Icon {
   height: 16px;
   width: 16px;
   border-radius: 50%;
 }
-.Layer__tasks__badge[data-status=info] {
+.Layer__TasksBadge[data-status=info] {
   background: var(--color-info-bg);
   color: var(--color-info-fg);
 }
-.Layer__tasks__badge[data-status=warning] {
+.Layer__TasksBadge[data-status=warning] {
   background: var(--color-info-warning);
   color: var(--color-info-warning-bg);
 }
-.Layer__tasks__badge[data-status=success] {
+.Layer__TasksBadge[data-status=success] {
   background: var(--color-info-success-bg);
   color: var(--color-info-success-fg);
 }
-.Layer__tasks__badge[data-status=error] {
+.Layer__TasksBadge[data-status=error] {
   background: var(--color-info-error-bg);
   color: var(--color-info-error);
 }
@@ -7874,16 +7864,6 @@ tbody .Layer__table__empty-row:first-child {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-@container (max-width: 400px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-@container (max-width: 340px) {
-  .Layer__tasks-month-selector {
-    grid-template-columns: repeat(1, 1fr);
-  }
-}
 .Layer__tasks-month-selector__month {
   display: flex;
   flex: 1;

package/package.json

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