@tesouro/embedded-components-react 0.2.6 → 0.2.15

package/README.md

@@ -447,10 +447,11 @@ A self-contained team management surface for embedded integrators. It lists orga
 
 #### Props
 
-| Prop            | Type                               | Description                                                                          |
-| --------------- | ---------------------------------- | ------------------------------------------------------------------------------------ |
-| `labels`        | `Partial<TeamWidgetLabels>`        | Overrides table, detail, invite, edit, and dialog UI copy.                           |
-| `featureLabels` | `Partial<TeamWidgetFeatureLabels>` | Overrides role display names, validation messages, and deactivate confirmation copy. |
+| Prop            | Type                               | Description                                                                                             |
+| --------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `title`         | `string`                           | Optional page heading rendered above the team table. Omit when the host already provides its own title. |
+| `labels`        | `Partial<TeamWidgetLabels>`        | Overrides table, detail, invite, edit, and dialog UI copy.                                              |
+| `featureLabels` | `Partial<TeamWidgetFeatureLabels>` | Overrides role display names, validation messages, and deactivate confirmation copy.                    |
 
 ### TransfersWidget
 

package/dist/index.css

@@ -3,6 +3,8 @@
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
+    --ttw-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
     --ttw-color-red-50: oklch(97.1% 0.013 17.38);
     --ttw-color-red-100: oklch(93.6% 0.032 17.717);
     --ttw-color-red-200: oklch(88.5% 0.062 18.334);
@@ -120,7 +122,6 @@
     --ttw-font-weight-bold: 700;
     --ttw-font-weight-extrabold: 800;
     --ttw-tracking-tight: -0.025em;
-    --ttw-tracking-wide: 0.025em;
     --ttw-tracking-widest: 0.1em;
     --ttw-leading-tight: 1.25;
     --ttw-leading-snug: 1.375;
@@ -509,6 +510,9 @@
   .ttw\:block {
     display: block;
   }
+  .ttw\:contents {
+    display: contents;
+  }
   .ttw\:flex {
     display: flex;
   }
@@ -699,9 +703,6 @@
   .ttw\:h-28 {
     height: calc(var(--ttw-spacing) * 28);
   }
-  .ttw\:h-32 {
-    height: calc(var(--ttw-spacing) * 32);
-  }
   .ttw\:h-36\.5 {
     height: calc(var(--ttw-spacing) * 36.5);
   }
@@ -855,6 +856,9 @@
   .ttw\:min-h-24 {
     min-height: calc(var(--ttw-spacing) * 24);
   }
+  .ttw\:min-h-28 {
+    min-height: calc(var(--ttw-spacing) * 28);
+  }
   .ttw\:min-h-48 {
     min-height: calc(var(--ttw-spacing) * 48);
   }
@@ -969,15 +973,30 @@
   .ttw\:w-20 {
     width: calc(var(--ttw-spacing) * 20);
   }
+  .ttw\:w-20\.5 {
+    width: calc(var(--ttw-spacing) * 20.5);
+  }
+  .ttw\:w-21 {
+    width: calc(var(--ttw-spacing) * 21);
+  }
+  .ttw\:w-22 {
+    width: calc(var(--ttw-spacing) * 22);
+  }
   .ttw\:w-24 {
     width: calc(var(--ttw-spacing) * 24);
   }
+  .ttw\:w-26 {
+    width: calc(var(--ttw-spacing) * 26);
+  }
   .ttw\:w-28 {
     width: calc(var(--ttw-spacing) * 28);
   }
   .ttw\:w-29 {
     width: calc(var(--ttw-spacing) * 29);
   }
+  .ttw\:w-31 {
+    width: calc(var(--ttw-spacing) * 31);
+  }
   .ttw\:w-32 {
     width: calc(var(--ttw-spacing) * 32);
   }
@@ -1053,9 +1072,6 @@
   .ttw\:w-\[10\%\] {
     width: 10%;
   }
-  .ttw\:w-\[20\%\] {
-    width: 20%;
-  }
   .ttw\:w-\[20rem\] {
     width: 20rem;
   }
@@ -1065,9 +1081,6 @@
   .ttw\:w-\[27\.5rem\] {
     width: 27.5rem;
   }
-  .ttw\:w-\[30\%\] {
-    width: 30%;
-  }
   .ttw\:w-\[32rem\] {
     width: 32rem;
   }
@@ -1143,6 +1156,12 @@
   .ttw\:max-w-40 {
     max-width: calc(var(--ttw-spacing) * 40);
   }
+  .ttw\:max-w-41 {
+    max-width: calc(var(--ttw-spacing) * 41);
+  }
+  .ttw\:max-w-56 {
+    max-width: calc(var(--ttw-spacing) * 56);
+  }
   .ttw\:max-w-60 {
     max-width: calc(var(--ttw-spacing) * 60);
   }
@@ -1164,9 +1183,6 @@
   .ttw\:max-w-\[21cm\] {
     max-width: 21cm;
   }
-  .ttw\:max-w-\[50\%\] {
-    max-width: 50%;
-  }
   .ttw\:max-w-\[70\%\] {
     max-width: 70%;
   }
@@ -1221,9 +1237,27 @@
   .ttw\:min-w-5 {
     min-width: calc(var(--ttw-spacing) * 5);
   }
+  .ttw\:min-w-10 {
+    min-width: calc(var(--ttw-spacing) * 10);
+  }
+  .ttw\:min-w-12 {
+    min-width: calc(var(--ttw-spacing) * 12);
+  }
   .ttw\:min-w-16 {
     min-width: calc(var(--ttw-spacing) * 16);
   }
+  .ttw\:min-w-20\.5 {
+    min-width: calc(var(--ttw-spacing) * 20.5);
+  }
+  .ttw\:min-w-21 {
+    min-width: calc(var(--ttw-spacing) * 21);
+  }
+  .ttw\:min-w-24 {
+    min-width: calc(var(--ttw-spacing) * 24);
+  }
+  .ttw\:min-w-26 {
+    min-width: calc(var(--ttw-spacing) * 26);
+  }
   .ttw\:min-w-29 {
     min-width: calc(var(--ttw-spacing) * 29);
   }
@@ -1296,9 +1330,6 @@
   .ttw\:grow-0 {
     flex-grow: 0;
   }
-  .ttw\:basis-1\/2 {
-    flex-basis: calc(1 / 2 * 100%);
-  }
   .ttw\:table-fixed {
     table-layout: fixed;
   }
@@ -1849,10 +1880,6 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 1px;
   }
-  .ttw\:border-y-0 {
-    border-block-style: var(--tw-border-style);
-    border-block-width: 0px;
-  }
   .ttw\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -1861,10 +1888,6 @@
     border-right-style: var(--tw-border-style);
     border-right-width: 1px;
   }
-  .ttw\:border-r-0 {
-    border-right-style: var(--tw-border-style);
-    border-right-width: 0px;
-  }
   .ttw\:border-b {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
@@ -2398,6 +2421,9 @@
   .ttw\:p-1 {
     padding: var(--ttw-spacing);
   }
+  .ttw\:p-1\.5 {
+    padding: calc(var(--ttw-spacing) * 1.5);
+  }
   .ttw\:p-2 {
     padding: calc(var(--ttw-spacing) * 2);
   }
@@ -2587,6 +2613,9 @@
   .ttw\:pr-8 {
     padding-right: calc(var(--ttw-spacing) * 8);
   }
+  .ttw\:pr-9 {
+    padding-right: calc(var(--ttw-spacing) * 9);
+  }
   .ttw\:pr-14 {
     padding-right: calc(var(--ttw-spacing) * 14);
   }
@@ -2668,6 +2697,9 @@
   .ttw\:align-middle {
     vertical-align: middle;
   }
+  .ttw\:font-mono {
+    font-family: var(--ttw-font-mono);
+  }
   .ttw\:font-sans {
     font-family: var(--ttw-font-family);
   }
@@ -2796,14 +2828,14 @@
     --tw-font-weight: var(--ttw-font-weight-semibold);
     font-weight: var(--ttw-font-weight-semibold);
   }
+  .ttw\:tracking-\[0\.125rem\] {
+    --tw-tracking: 0.125rem;
+    letter-spacing: 0.125rem;
+  }
   .ttw\:tracking-tight {
     --tw-tracking: var(--ttw-tracking-tight);
     letter-spacing: var(--ttw-tracking-tight);
   }
-  .ttw\:tracking-wide {
-    --tw-tracking: var(--ttw-tracking-wide);
-    letter-spacing: var(--ttw-tracking-wide);
-  }
   .ttw\:tracking-widest {
     --tw-tracking: var(--ttw-tracking-widest);
     letter-spacing: var(--ttw-tracking-widest);
@@ -2994,6 +3026,9 @@
   .ttw\:text-rose-700 {
     color: var(--ttw-color-rose-700);
   }
+  .ttw\:text-secondary-foreground {
+    color: var(--ttw-secondary-foreground);
+  }
   .ttw\:text-sidebar-accent-foreground {
     color: var(--ttw-sidebar-accent-foreground);
   }
@@ -3045,9 +3080,6 @@
   .ttw\:normal-case {
     text-transform: none;
   }
-  .ttw\:uppercase {
-    text-transform: uppercase;
-  }
   .ttw\:not-italic {
     font-style: normal;
   }
@@ -3169,9 +3201,6 @@
       --tw-ring-color: color-mix(in oklab, var(--ttw-foreground) 10%, transparent);
     }
   }
-  .ttw\:ring-primary {
-    --tw-ring-color: var(--ttw-primary);
-  }
   .ttw\:ring-primary\/20 {
     --tw-ring-color: var(--ttw-primary);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3757,6 +3786,11 @@
       top: var(--ttw-spacing);
     }
   }
+  .ttw\:first-letter\:uppercase {
+    &::first-letter {
+      text-transform: uppercase;
+    }
+  }
   .ttw\:selection\:bg-primary {
     & *::selection {
       background-color: var(--ttw-primary);
@@ -4130,6 +4164,13 @@
       }
     }
   }
+  .ttw\:hover\:bg-muted {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--ttw-muted);
+      }
+    }
+  }
   .ttw\:hover\:bg-muted\/30 {
     &:hover {
       @media (hover: hover) {
@@ -4390,6 +4431,14 @@
       }
     }
   }
+  .ttw\:hover\:brightness-95 {
+    &:hover {
+      @media (hover: hover) {
+        --tw-brightness: brightness(95%);
+        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+      }
+    }
+  }
   .ttw\:hover\:brightness-105 {
     &:hover {
       @media (hover: hover) {
@@ -4922,6 +4971,11 @@
       padding-inline: calc(var(--ttw-spacing) * 4);
     }
   }
+  .ttw\:has-\[\>svg\]\:pr-0 {
+    &:has(>svg) {
+      padding-right: 0;
+    }
+  }
   .ttw\:has-\[\>textarea\]\:h-auto {
     &:has(>textarea) {
       height: auto;
@@ -5027,6 +5081,11 @@
       }
     }
   }
+  .ttw\:data-\[active\=true\]\:bg-muted {
+    &[data-active="true"] {
+      background-color: var(--ttw-muted);
+    }
+  }
   .ttw\:data-\[active\=true\]\:bg-sidebar-accent {
     &[data-active="true"] {
       background-color: var(--ttw-sidebar-accent);
@@ -5480,6 +5539,20 @@
       }
     }
   }
+  .ttw\:\*\:data-\[slot\=select-value\]\:min-w-0 {
+    :is(& > *) {
+      &[data-slot="select-value"] {
+        min-width: 0;
+      }
+    }
+  }
+  .ttw\:\*\:data-\[slot\=select-value\]\:flex-1 {
+    :is(& > *) {
+      &[data-slot="select-value"] {
+        flex: 1;
+      }
+    }
+  }
   .ttw\:\*\:data-\[slot\=select-value\]\:items-center {
     :is(& > *) {
       &[data-slot="select-value"] {
@@ -6129,16 +6202,6 @@
       width: calc(1 / 2 * 100%);
     }
   }
-  .ttw\:xl\:w-\[20\%\] {
-    @media (width >= 80rem) {
-      width: 20%;
-    }
-  }
-  .ttw\:xl\:w-\[40\%\] {
-    @media (width >= 80rem) {
-      width: 40%;
-    }
-  }
   .ttw\:xl\:max-w-3xl {
     @media (width >= 80rem) {
       max-width: var(--ttw-container-3xl);
@@ -6149,6 +6212,11 @@
       max-width: calc(var(--ttw-spacing) * 300);
     }
   }
+  .ttw\:xl\:flex-row {
+    @media (width >= 80rem) {
+      flex-direction: row;
+    }
+  }
   .ttw\:2xl\:\!w-\[56rem\] {
     @media (width >= 96rem) {
       width: 56rem !important;
@@ -6672,6 +6740,24 @@
       }
     }
   }
+  .ttw\:\*\:\[span\]\:last\:min-w-0 {
+    :is(& > *) {
+      &:is(span) {
+        &:last-child {
+          min-width: 0;
+        }
+      }
+    }
+  }
+  .ttw\:\*\:\[span\]\:last\:flex-1 {
+    :is(& > *) {
+      &:is(span) {
+        &:last-child {
+          flex: 1;
+        }
+      }
+    }
+  }
   .ttw\:\*\:\[span\]\:last\:items-center {
     :is(& > *) {
       &:is(span) {
@@ -6808,6 +6894,13 @@
       }
     }
   }
+  .ttw\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-0 {
+    &:has(>[data-align=inline-end]) {
+      &>input {
+        padding-right: 0;
+      }
+    }
+  }
   .ttw\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pr-2 {
     &:has(>[data-align=inline-end]) {
       &>input {
@@ -6815,6 +6908,13 @@
       }
     }
   }
+  .ttw\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-0 {
+    &:has(>[data-align=inline-start]) {
+      &>input {
+        padding-left: 0;
+      }
+    }
+  }
   .ttw\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:pl-2 {
     &:has(>[data-align=inline-start]) {
       &>input {

package/dist/index.d.ts

@@ -2887,6 +2887,8 @@ interface Labels {
     title: string;
     nameColumn: string;
     roleColumn: string;
+    /** Placeholder shown in the role cell for deactivated members (no role). */
+    inactiveRolePlaceholder: string;
     departmentColumn: string;
     statusColumn: string;
     loadingLabel: string;
@@ -2898,46 +2900,102 @@ interface Labels {
     previousPageButton: string;
     nextPageButton: string;
     detailsBackButton: string;
+    /** "Member details" section heading on the detail view. */
+    detailsMemberDetailsHeading: string;
+    detailsNameLabel: string;
     detailsEmailLabel: string;
     detailsRoleLabel: string;
     detailsStatusLabel: string;
     detailsLastSignInLabel: string;
     detailsDepartmentLabel: string;
     detailsLocationLabel: string;
+    /** "Reporting manager" section heading on the detail view. */
+    detailsReportingManagerLabel: string;
+    /** Shown in the reporting-manager section when the member has no manager. */
+    detailsReportingManagerNone: string;
+    /** "Approves expenses for" section heading (the member's direct reports). */
+    detailsApprovesExpensesHeading: string;
     detailsAccountAccessLabel: string;
     rolesSectionHeading: string;
     rolesSectionDescription: string;
     roleLoadingLabel: string;
     detailsEditButton: string;
     detailsDeactivateButton: string;
+    /** Resend-invite action on the detail view (pending members only). */
+    detailsResendButton: string;
     inviteButton: string;
     inviteTitle: string;
     inviteBackToTeamButton: string;
     inviteDetailsSectionHeading: string;
-    inviteFirstNameLabel: string;
-    inviteLastNameLabel: string;
+    /** Single full-name field — the create endpoint takes one `name`. */
+    inviteNameLabel: string;
     inviteWorkEmailLabel: string;
     inviteDepartmentLabel: string;
     inviteDepartmentPlaceholder: string;
     inviteDepartmentEmpty: string;
+    /** Error placeholder + helper when the department list fails to load. */
+    inviteDepartmentLoadError: string;
+    inviteDepartmentLoadErrorHelper: string;
+    /** Helper shown when the department list loaded but is empty. */
+    inviteDepartmentEmptyHelper: string;
     inviteLocationLabel: string;
     inviteLocationPlaceholder: string;
     inviteLocationEmpty: string;
+    inviteLocationLoadError: string;
+    inviteLocationLoadErrorHelper: string;
+    inviteLocationEmptyHelper: string;
     inviteReportingManagerLabel: string;
     inviteReportingManagerPlaceholder: string;
     inviteReportingManagerEmpty: string;
+    inviteReportingManagerLoadError: string;
+    inviteReportingManagerLoadErrorHelper: string;
+    inviteReportingManagerEmptyHelper: string;
+    /** Explainer shown under the reporting-manager select when managers exist. */
+    inviteReportingManagerHelper: string;
     inviteOptionsLoading: string;
     /** Clears an optional select (department/location/reporting manager). */
     inviteOptionNone: string;
     inviteRoleSectionHeading: string;
     inviteRoleSectionDescription: string;
+    inviteAccountAccessSectionHeading: string;
+    inviteAccountAccessSectionDescription: string;
+    inviteAccountAccessPlaceholder: string;
+    inviteAccountAccessEmpty: string;
+    /** Account-access table column headers, shared by the invite section and the
+     * view/change access modal. */
+    accountAccessNameColumn: string;
+    accountAccessAccessColumn: string;
+    /** aria-label for an account row's access checkbox; the name is appended. */
+    accountAccessToggleLabel: string;
+    /** Read-only account table columns on the member detail view. */
+    accountAccessNumberColumn: string;
+    accountAccessTypeColumn: string;
+    accountAccessSourceColumn: string;
+    /** Shown in place of the picker when the selected role is an admin. */
+    inviteAccountAccessAdminNote: string;
+    /** Shown when the account list failed to load, blocking the invite. */
+    inviteAccountAccessLoadError: string;
     inviteCancelButton: string;
     inviteSubmitButton: string;
+    /** Empty state for the account-access checklist (no accounts in the org). */
+    manageAccessAccountsEmpty: string;
+    /** Loading placeholder for the account-access checklist. */
+    manageAccessLoadingLabel: string;
+    /** Shown in place of the checklist when the selected role is an admin. */
+    manageAccessAdminNote: string;
+    /** Shown in place of the checklist when the selected role is an employee. */
+    manageAccessEmployeeNote: string;
     editTitle: string;
     editDescription: string;
+    /** Back gesture on the full-page edit form (returns to the member detail). */
+    editBackButton: string;
     editNameLabel: string;
+    /** Work email in edit — read-only, so no required asterisk. */
+    editEmailLabel: string;
     editRoleLabel: string;
     editRolePlaceholder: string;
+    /** Section heading for the account-access checklist on the edit page. */
+    editAccountAccessLabel: string;
     editCancelButton: string;
     editSaveButton: string;
     actionDialogCancelButton: string;
@@ -2962,10 +3020,35 @@ interface FeatureLabels$1 {
     inviteFailedError: string;
     editFailedError: string;
     deactivateFailedError: string;
+    manageAccessFailedError: string;
+    /** Shown when a member's per-account access could not be loaded. */
+    loadAccessFailedError: string;
+    /** Shown when an Admin/Employee role change can't reconcile account access
+     * (the token lacks the account-access scopes). */
+    roleNeedsAccountAccessError: string;
+    /** Account-access detail summary building blocks. */
+    accountAccessAll: string;
+    /** Shown for a non-admin member with zero granted accounts (distinct from the
+     * not-available placeholder used while access is still loading). */
+    accountAccessNone: string;
+    accountAccessCountSingular: string;
+    accountAccessCountPlural: string;
+    accountAccessOf: string;
+    /** Account type labels shown in the account-access table. */
+    accountTypeChecking: string;
+    accountTypeSavings: string;
+    /** Account source labels shown in the detail view's account table. */
+    accountSourceInternal: string;
+    accountSourceExternal: string;
     /** Deactivate confirmation copy. */
     deactivateDialogTitle: string;
     deactivateDialogDescription: string;
     deactivateConfirmButton: string;
+    /** Resend-invite confirmation copy (pending members). */
+    resendDialogTitle: string;
+    resendDialogDescription: string;
+    resendConfirmButton: string;
+    resendFailedError: string;
     /** Tabs. */
     teamMembersTab: string;
     departmentsTab: string;
@@ -3025,6 +3108,9 @@ interface FeatureLabels$1 {
 interface TeamWidgetProps extends WidgetProviderProps {
     labels?: Partial<Labels>;
     featureLabels?: Partial<FeatureLabels$1>;
+    /** Optional page heading rendered above the widget. Embedders that already
+     * provide their own page title should omit this. */
+    title?: string;
 }
 declare function TeamWidget({ baseUrl, widgetToken, organizationId, configClient, linkComponent, implementation, uiFramework, errorFallback, onError, analytics, ...innerProps }: TeamWidgetProps): React.JSX.Element;