@layerfi/components 0.1.112-alpha.5 → 0.1.113-alpha

package/dist/index.css

@@ -1883,12 +1883,11 @@
   position: relative;
   display: flex;
   align-items: center;
-  height: 38px;
+  height: 36px;
   width: max-content;
   padding: 2px;
   border-radius: 52px;
   box-shadow: 0 0 0 1px var(--color-base-300);
-  margin: 1px;
   background: var(--color-base-100);
   cursor: pointer;
   user-select: none;
@@ -1926,7 +1925,7 @@
 }.Layer__toggle-option input + span {
   box-sizing: border-box;
   justify-content: center;
-  height: 36px;
+  height: 32px;
   padding: 8px 16px;
   border-radius: 52px;
   cursor: pointer;
@@ -1952,9 +1951,8 @@
   box-sizing: border-box;
   position: absolute;
   z-index: 1;
-  top: 1px;
   left: 0;
-  height: 36px;
+  height: 32px;
   width: 100px;
   padding: 8px 16px;
   border-radius: 52px;
@@ -3372,6 +3370,11 @@
   gap: var(--spacing-sm);
   min-width: 40rem;
   max-width: 76rem;
+}@container (max-width: 768px) {
+  .Layer__bank-transaction-list-item__content,
+  .Layer__expanded-bank-transaction-row__content {
+    min-width: 30rem;
+  }
 }.Layer__expanded-bank-transaction-row__content-panels {
   box-sizing: border-box;
   display: flex;
@@ -3484,7 +3487,13 @@
   border-left: 1px solid var(--border-color);
   transition: border 5s ease-out;
 }.Layer__bank-transaction-row__expand-button {
-  min-width: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.25rem;
+  width: 2.25rem;
+}.Layer__bank-transaction-row__expand-button:hover {
+  cursor: pointer;
 }.Layer__bank-transaction-row__expand-button--mobile {
   width: fit-content;
   vertical-align: middle;
@@ -3515,8 +3524,9 @@
   .Layer__expanded-bank-transaction-row__table-cell--split-entry {
     display: grid;
     grid-template-areas: "amount category button";
-    grid-template-columns: minmax(8rem, 12rem) minmax(12rem, 24.5rem) 2.25rem;
-    max-width: 40rem;
+    grid-template-columns: 12rem minmax(12rem, 24.5rem) 2.25rem;
+    min-width: 27.5rem;
+    max-width: min(40rem, 100%);
   }
   .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__customer), .Layer__expanded-bank-transaction-row__table-cell--split-entry:has(> .Layer__expanded-bank-transaction-row__table-cell--split-entry__tags) {
     grid-template-areas: "amount category button" "customer tags .";
@@ -3597,26 +3607,12 @@
   gap: 4px;
   align-items: center;
 }.Layer__bank-transaction-list-item__body {
-  box-sizing: border-box;
-  display: flex;
-  gap: 4px;
+  justify-content: space-between;
   width: 100%;
   padding: var(--spacing-sm) var(--spacing-md);
   color: var(--text-color-primary);
-}.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__checkbox {
-  padding-top: var(--spacing-4xs);
-  padding-right: var(--spacing-sm);
-}.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name {
-  flex: 1;
-  max-width: calc(100% - 120px);
-}.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name .Layer__tooltip-trigger {
-  display: flex;
-}.Layer__bank-transaction-list-item__body .Layer__bank-transaction-list-item__body__name .Layer__text {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}.Layer__bank-transaction-list-item__body .Layer__bank-transaction-row__expand-button {
-  margin: 0 var(--spacing-xs);
+}.Layer__bank-transaction-list-item__body__name {
+  max-width: 70%;
 }.Layer__bank-transaction-list-item__processing-info {
   box-sizing: border-box;
   display: flex;
@@ -3638,6 +3634,10 @@
 }.Layer__table.Layer__bank-transactions__table .Layer__bank-transaction__submit-btn,
 .Layer__table.Layer__bank-transactions__table .Layer__bank-transaction__retry-btn {
   width: 122px;
+}.Layer__table .Layer__table-header.Layer__bank-transactions__documents-col {
+  --right-adjust: calc(65ch + 2px);
+}.Layer__table .Layer__table-header.Layer__table-cell--amount.Layer__table-cell__amount-col {
+  --right-adjust: calc(65ch + 2px);
 }.Layer__table.Layer__bank-transactions__table .Layer__table-cell__amount-col {
   box-sizing: border-box;
   position: sticky;
@@ -3660,7 +3660,7 @@
   box-sizing: border-box;
   position: sticky;
   z-index: 2;
-  right: 56ch;
+  right: var(--right-adjust);
   width: 0;
   min-width: 0;
   max-width: 0;
@@ -3690,7 +3690,10 @@
   max-width: 140px;
 }.Layer__bank-transactions__tx-col {
   box-sizing: border-box;
-  color: var(--color-base-1000);
+  overflow: hidden;
+  max-width: 40ch;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }.Layer__bank-transactions__account-col {
   box-sizing: border-box;
   width: 30ch;
@@ -3698,6 +3701,7 @@
   max-width: 30ch;
 }.Layer__bank-transactions__documents-col {
   box-sizing: border-box;
+  --right-adjust: 56ch;
   width: 64px;
   min-width: 64px;
   max-width: 64px;
@@ -6859,7 +6863,11 @@
 
 .Layer__Spacer {
   flex: 1 1 0%;
-}.Layer__UI__tooltip-content {
+}.Layer__UI__tooltip {
+  z-index: 50;
+}
+
+.Layer__UI__tooltip-content {
   box-sizing: border-box;
   display: block;
   max-width: 20rem;
@@ -6875,6 +6883,11 @@
   color: var(--color-base-300);
   word-break: break-all;
   white-space: normal;
+}
+
+.Layer__UI__tooltip-trigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }.Layer__ModalOverlay {
   position: fixed;
   z-index: 100;
@@ -7244,6 +7257,10 @@
   grid-area: close;
 }
 
+.Layer__ModalTitleWithClose > .Layer__UI__Button {
+  margin: 0 0 auto;
+}
+
 .Layer__ModalContent {
   display: grid;
   overflow-y: auto;
@@ -9659,15 +9676,13 @@
   padding-block: var(--spacing-sm);
 }.Layer__TagDimensionsGroup__TagComboBox {
   width: 100%;
-  min-width: 12rem;
+  min-width: 10rem;
 }.Layer__datetime {
   display: inline-flex;
   gap: var(--spacing-md);
   align-items: center;
 }.Layer__MoneyText {
-  overflow-x: hidden;
   color: var(--color-base-800);
-  text-overflow: ellipsis;
 }
 .Layer__MoneyText[data-bold] {
   font-weight: var(--font-weight-bold);
@@ -9887,7 +9902,6 @@
   grid-template-columns: auto minmax(0, 1fr) auto;
   gap: var(--spacing-xs);
   align-items: center;
-  min-height: 2.5rem;
 }
 @container (min-width: 840px) {
   .Layer__BankTransactionsActions {
@@ -10904,7 +10918,11 @@
   display: grid;
   place-items: center;
   min-block-size: 20rem;
-}.Layer__service-offering {
+}body .calendly-overlay .calendly-popup {
+  max-height: 1024px;
+}
+
+.Layer__LandingPage {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -10917,30 +10935,30 @@
   background: var(--color-white);
 }
 
-.Layer__service-offering__calendly-container {
+.Layer__LandingPage__calendly-container {
   overflow: hidden;
   max-height: 0;
   margin: 0;
   transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 }
-.Layer__service-offering__calendly-container.visible {
+.Layer__LandingPage__calendly-container.visible {
   max-height: 800px;
   margin: var(--spacing-lg) 0;
 }
-.Layer__service-offering__calendly-container .Layer__calendly-inline-widget {
+.Layer__LandingPage__calendly-container .Layer__calendly-inline-widget {
   min-height: 630px;
   width: 100%;
   margin-bottom: var(--spacing-lg);
   transition: opacity 0.3s ease-in-out 0.8s;
 }
 
-.Layer__service-offering-options {
+.Layer__LandingPage-options {
   max-width: 1200px;
   padding: var(--spacing-xl) var(--spacing-lg);
   margin: 0 auto;
 }
 
-.Layer__service-offering-options__grid {
+.Layer__LandingPage-options__grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--spacing-2xl);
@@ -10948,12 +10966,12 @@
   margin: 0 auto;
 }
 @media (width <= 720px) {
-  .Layer__service-offering-options__grid {
+  .Layer__LandingPage-options__grid {
     grid-template-columns: 1fr;
   }
 }
 
-.Layer__service-offering-options__card {
+.Layer__LandingPage-options__card {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -10966,61 +10984,61 @@
   overflow-wrap: break-word;
 }
 
-.Layer__service-offering-options__feature-check {
+.Layer__LandingPage-options__feature-check {
   color: var(--fg-subtle);
 }
 
-.Layer__service-offering__content {
+.Layer__LandingPage__content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xl);
 }
 
-.Layer__service-offering__offers {
+.Layer__LandingPage__offers {
   width: 100%;
   background-color: transparent;
 }
 
-.Layer__service-offering__layout {
+.Layer__LandingPage__layout {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 @media (width <= 1440px) {
-  .Layer__service-offering__layout {
+  .Layer__LandingPage__layout {
     flex-direction: column;
   }
 }
 @media (width > 1440px) {
-  .Layer__service-offering__layout {
+  .Layer__LandingPage__layout {
     max-width: 1440px;
     margin: 0 auto;
   }
 }
 
-.Layer__service-offering__responsive-content {
+.Layer__LandingPage__responsive-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2xl);
 }
 @media (width <= 1440px) {
-  .Layer__service-offering__responsive-content {
+  .Layer__LandingPage__responsive-content {
     max-width: 100%;
   }
 }
 
-.Layer__service-offering__media-container {
+.Layer__LandingPage__media-container {
   display: flex;
   align-items: center;
   justify-content: center;
   transition: margin-top 0.3s ease-in-out, opacity 0.3s ease-in-out;
 }
 @media (width <= 1440px) {
-  .Layer__service-offering__media-container {
+  .Layer__LandingPage__media-container {
     margin-top: var(--spacing-lg);
   }
 }
-.Layer__service-offering__media-container img {
+.Layer__LandingPage__media-container img {
   height: auto;
   max-width: 100%;
   object-fit: cover;

package/dist/index.d.ts

@@ -118,7 +118,7 @@ declare type BankTransactionFilters = {
     tagFilter?: TagFilterInput;
 };
 
-export declare const BankTransactions: ({ onError, showTags, showCustomerVendor, monthlyView, applyGlobalDateRange, mode, renderInAppLink, _showBulkSelection, ...props }: BankTransactionsWithErrorProps) => JSX_2.Element;
+export declare const BankTransactions: ({ onError, showTags, showCustomerVendor, monthlyView, applyGlobalDateRange, mode, renderInAppLink, ...props }: BankTransactionsWithErrorProps) => JSX_2.Element;
 
 declare interface BankTransactionsHeaderStringOverrides {
     header?: string;
@@ -149,8 +149,7 @@ declare interface BankTransactionsProps {
     collapseHeader?: boolean;
     stringOverrides?: BankTransactionsStringOverrides;
     renderInAppLink?: (details: LinkingMetadata) => ReactNode;
-    _showCategorizationRules?: boolean;
-    _showBulkSelection?: boolean;
+    showCategorizationRules?: boolean;
 }
 
 declare interface BankTransactionsStringOverrides {
@@ -173,7 +172,7 @@ declare interface BankTransactionsWithErrorProps extends BankTransactionsProps {
     showTags?: boolean;
 }
 
-export declare const BankTransactionsWithLinkedAccounts: ({ title, showTitle, elevatedLinkedAccounts, mode, showBreakConnection, showCustomerVendor, showDescriptions, showLedgerBalance, showReceiptUploads, showTags, showTooltips, showUnlinkItem, showUploadOptions, mobileComponent, stringOverrides, renderInAppLink, _showCategorizationRules, _showBulkSelection, }: BankTransactionsWithLinkedAccountsProps) => JSX_2.Element;
+export declare const BankTransactionsWithLinkedAccounts: ({ title, showTitle, elevatedLinkedAccounts, mode, showBreakConnection, showCustomerVendor, showDescriptions, showLedgerBalance, showReceiptUploads, showTags, showTooltips, showUnlinkItem, showUploadOptions, mobileComponent, stringOverrides, renderInAppLink, showCategorizationRules, }: BankTransactionsWithLinkedAccountsProps) => JSX_2.Element;
 
 declare interface BankTransactionsWithLinkedAccountsProps {
     title?: string;
@@ -195,8 +194,7 @@ declare interface BankTransactionsWithLinkedAccountsProps {
     mobileComponent?: MobileComponentType;
     stringOverrides?: BankTransactionsWithLinkedAccountsStringOverrides;
     renderInAppLink?: (details: LinkingMetadata) => ReactNode;
-    _showCategorizationRules?: boolean;
-    _showBulkSelection?: boolean;
+    showCategorizationRules?: boolean;
 }
 
 declare interface BankTransactionsWithLinkedAccountsStringOverrides {
@@ -498,7 +496,7 @@ declare interface GeneralLedgerStringOverrides {
 export declare const GeneralLedgerView: ({ title, showTitle, showTags, showCustomerVendor, stringOverrides, chartOfAccountsOptions, renderInAppLink, }: GeneralLedgerProps) => JSX_2.Element;
 
 /**
- * Configuration for the hero/main content section of the service offering page
+ * Configuration for the hero/main content section of the Landing Page page
  */
 declare type HeroContentConfig = {
     stringOverrides: {
@@ -513,8 +511,8 @@ declare type HeroContentConfig = {
         topOfFoldImage: string;
     };
     cta: {
-        primary: ServiceOfferingLink;
-        secondary: ServiceOfferingLink;
+        primary: LandingPageLink;
+        secondary: LandingPageLink;
     };
 };
 
@@ -572,6 +570,92 @@ declare interface JournalTableStringOverrides {
     creditColumnHeader?: string;
 }
 
+/**
+ * The LandingPage component provides a page-level component that surfaces the Layer accounting
+ * and bookkeeping services. It acts as a landing page allowing platforms to showcase the core value proposition
+ * and offers/pricing for the platform's end users.
+ * @see LandingPageMainConfig
+ @param config Allows you to customize the page component.
+ @returns A React JSX component
+ */
+export declare const LandingPage: ({ platform, availableOffers, heroOverrides, offeringOverrides, }: LandingPageProps) => JSX_2.Element;
+
+/**
+ * Configuration for individual Landing Page cards (accounting or bookkeeping)
+ */
+declare type LandingPageCardConfig = {
+    offerType: 'accounting' | 'bookkeeping';
+    stringOverrides: {
+        badge: string;
+        title: string;
+        subtitle: string;
+        priceAmount: string;
+        priceUnit: string;
+    };
+    mediaUrls: {
+        offerImage: string;
+    };
+    cta: {
+        primary: LandingPageLink;
+    };
+    showStartingAtLabel: boolean;
+};
+
+/**
+ * A Link acts as a call-to-action for users interacting with the LandingPage component.
+ * @see LandingPage
+ */
+declare type LandingPageLink = {
+    /** Text label displayed for the link. */
+    label: string;
+    /** Destination for the link. If calendly URL, opens a Calendly modal. Otherwise, opens a new tab. */
+    url: string;
+};
+
+/**
+ * The PlatformConfig holds on to the name of the platform integrating with Layer, the primary
+ * top-of-fold image shown on the LandingPage component, and the name of the platform's
+ * niche or industry.
+ @see LandingPage
+ */
+declare interface LandingPagePlatformConfig {
+    /**
+     * The platform/brand name displayed throughout the component (e.g., "Shopify", "WooCommerce").
+     * Used in titles, descriptions, and feature text to customize the content.
+     */
+    platformName: string;
+    /**
+     * The target industry for customization (e.g., "e-commerce", "SaaS", "retail").
+     * Used to tailor feature descriptions and messaging to the specific industry.
+     *
+     * In cases where the industry name substitution does not work well for the value
+     * propositions or features, we recommended you overwrite the value propositions directly.
+     *
+     @see LandingPageValueProposition
+     */
+    industry: string;
+}
+
+/**
+ * Props for the LandingPage component.
+ *
+ * Requires only a single parameter, which is `config` which holds on to all the customizable
+ * settings for the landing page component such as textual content on the accounting and bookkeeping
+ * services, with varied pricing options and book-a-call calendly integration.
+ */
+declare interface LandingPageProps {
+    platform: LandingPagePlatformConfig;
+    availableOffers: ('accounting' | 'bookkeeping')[];
+    heroOverrides: DeepPartial<HeroContentConfig>;
+    offeringOverrides: {
+        stringOverrides?: {
+            sectionTitle: string;
+        };
+        accounting: DeepPartial<LandingPageCardConfig>;
+        bookkeeping: DeepPartial<LandingPageCardConfig>;
+    };
+}
+
 declare type LayerContextDateRange = {
     dateRange: {
         range: DateRange;
@@ -917,92 +1001,6 @@ declare type ReportType = 'profitAndLoss' | 'balanceSheet' | 'statementOfCashFlo
 
 declare type Scope = 'expenses' | 'revenue';
 
-/**
- * The ServiceOffering component provides a page-level component that surfaces the Layer accounting
- * and bookkeeping services. It acts as a landing page allowing platforms to showcase the core value proposition
- * and offers/pricing for the platform's end users.
- @see ServiceOfferingMainConfig
- @param config Allows you to customize the page component.
- @returns A React JSX component
- */
-export declare const ServiceOffering: ({ platform, availableOffers, heroOverrides, offeringOverrides, }: ServiceOfferingProps) => JSX_2.Element;
-
-/**
- * Configuration for individual service offering cards (accounting or bookkeeping)
- */
-declare type ServiceOfferingCardConfig = {
-    offerType: 'accounting' | 'bookkeeping';
-    stringOverrides: {
-        badge: string;
-        title: string;
-        subtitle: string;
-        priceAmount: string;
-        priceUnit: string;
-    };
-    mediaUrls: {
-        offerImage: string;
-    };
-    cta: {
-        primary: ServiceOfferingLink;
-    };
-    showStartingAtLabel: boolean;
-};
-
-/**
- * A Link acts as a call-to-action for users interacting with the ServiceOffering component.
- @see ServiceOffering
- */
-declare type ServiceOfferingLink = {
-    /** Text label displayed for the link. */
-    label: string;
-    /** Destination for the link. If calendly URL, opens a Calendly modal. Otherwise, opens a new tab. */
-    url: string;
-};
-
-/**
- * The PlatformConfig holds on to the name of the platform integrating with Layer, the primary
- * top-of-fold image shown on the ServiceOffering component, and the name of the platform's
- * niche or industry.
- @see ServiceOffering
- */
-declare interface ServiceOfferingPlatformConfig {
-    /**
-     * The platform/brand name displayed throughout the component (e.g., "Shopify", "WooCommerce").
-     * Used in titles, descriptions, and feature text to customize the content.
-     */
-    platformName: string;
-    /**
-     * The target industry for customization (e.g., "e-commerce", "SaaS", "retail").
-     * Used to tailor feature descriptions and messaging to the specific industry.
-     *
-     * In cases where the industry name substitution does not work well for the value
-     * propositions or features, we recommended you overwrite the value propositions directly.
-     *
-     @see ServiceOfferingValueProposition
-     */
-    industry: string;
-}
-
-/**
- * Props for the ServiceOffering component.
- *
- * Requires only a single parameter, which is `config` which holds on to all the customizable
- * settings for the service offering component such as textual content on the accounting and bookkeeping
- * services, with varied pricing options and book-a-call calendly integration.
- */
-declare interface ServiceOfferingProps {
-    platform: ServiceOfferingPlatformConfig;
-    availableOffers: ('accounting' | 'bookkeeping')[];
-    heroOverrides: DeepPartial<HeroContentConfig>;
-    offeringOverrides: {
-        stringOverrides?: {
-            sectionTitle: string;
-        };
-        accounting: DeepPartial<ServiceOfferingCardConfig>;
-        bookkeeping: DeepPartial<ServiceOfferingCardConfig>;
-    };
-}
-
 declare type SidebarScope = Scope | undefined;
 
 declare const _SIZE_VARIANTS: readonly ["sm", "lg"];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layerfi/components",
-  "version": "0.1.112-alpha.5",
+  "version": "0.1.113-alpha",
   "description": "Layer React Components",
   "main": "dist/cjs/index.cjs",
   "module": "dist/esm/index.mjs",
@@ -53,7 +53,7 @@
     "@stylistic/eslint-plugin": "^4.2.0",
     "@stylistic/stylelint-config": "^2.0.0",
     "@stylistic/stylelint-plugin": "^3.1.2",
-    "@types/lodash": "^4.17.16",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.9.0",
     "@types/pluralize": "^0.0.33",
     "@types/react": "^18.2.0",
@@ -66,7 +66,6 @@
     "eslint-plugin-unused-imports": "^4.1.4",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.3",
-    "lodash": "^4.17.21",
     "npm-dts": "^1.3.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -94,7 +93,7 @@
     "date-fns": "^4.1.0",
     "effect": "^3.16.3",
     "libphonenumber-js": "^1.12.7",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "lucide-react": "^0.507.0",
     "pluralize": "^8.0.0",
     "react-aria-components": "^1.8.0",