@tesouro/embedded-components-react 0.2.206 → 0.2.211

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index2.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as p, jsxs as I, Fragment as x } from "react/jsx-runtime";
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import { useEffect as L, useMemo as h, useCallback as P } from "react";
+import { useCreditCardDetailsQuery as A } from "../../data-access/dist/index3.js";
+import { useDebitCardDetailsQuery as M } from "../../data-access/dist/index4.js";
+import { CardDetailsPanel as V } from "../../ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "lucide-react";
+import "../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "@radix-ui/react-use-controllable-state";
+import { EmbeddedToaster as U } from "../../../shared/ui/dist/lib/EmbeddedToaster.js";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import { WidgetProvider as j } from "../../../shared/feature/dist/lib/WidgetProvider/WidgetProvider.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { useWidgetError as z, useRefetchWidget as J } from "../../../shared/feature/dist/lib/WidgetProvider/hooks.js";
+import { CardProgram as c } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import { useAnalyticsTrack as Q } from "../../../shared/feature/dist/lib/analytics/hooks.js";
+import { WIDGET_NAME as R, CardDetailsWidgetAnalyticsEvent as T } from "./index4.js";
+import { CardProgramValidity as k, resolveCardDetailsPresentation as _, resolveCardProgramValidity as q, resolveCardDetailsPanelState as G } from "./index5.js";
+import { copyTextToClipboard as O } from "./index6.js";
+import { resolveCardDetailsFeatureLabels as B } from "./index3.js";
+import { toast as H } from "sonner";
+function K({
+  cardId: s,
+  cardProgram: r,
+  onClose: u,
+  labels: f,
+  featureLabels: d,
+  bankLogoSrc: g,
+  bankLogoAlt: b
+}) {
+  const o = Q(), t = z(), m = J();
+  L(() => {
+    o(T.Mounted);
+  }, [o]);
+  const e = h(
+    () => B(d),
+    [d]
+  ), i = q(r), y = r === c.Credit, w = r === c.Debit, F = A({ cardId: s, enabled: y }), N = M({ cardId: s, enabled: w }), E = y ? F : N, { data: n, isError: S, isNotFound: v, refetch: D } = E, C = G({
+    programValidity: i,
+    isNotFound: v,
+    isError: !!t || S,
+    hasCard: !!n
+  });
+  L(() => {
+    if (i === k.Supported)
+      return;
+    const l = `"${c.Credit}" or "${c.Debit}"`;
+    console.error(
+      i === k.Missing ? `[CardDetailsWidget] cardProgram is required and was not set. Pass ${l} — it selects which card program to read, so there is no default. No card was fetched.` : `[CardDetailsWidget] cardProgram must be ${l}, received ${JSON.stringify(r)}. No card was fetched.`
+    );
+  }, [r, i]);
+  const a = h(
+    () => (
+      // Gated on the resolved state rather than on `card` alone: with an
+      // unsupported program both queries are disabled, but React Query still
+      // hands back a card cached under an earlier valid program — formatting it
+      // would put a real card's details behind the error screen.
+      C === "loaded" && n ? _({
+        card: n,
+        cardProgram: r,
+        labels: e
+      }) : void 0
+    ),
+    [n, r, e, C]
+  ), W = P(
+    async (l) => {
+      await O(l) && (H.success(e.copySuccessToast), o(T.ValueCopied));
+    },
+    [e.copySuccessToast, o]
+  ), $ = P(() => {
+    if (t) {
+      m();
+      return;
+    }
+    D();
+  }, [D, m, t]);
+  return /* @__PURE__ */ I(x, { children: [
+    /* @__PURE__ */ p(U, {}),
+    /* @__PURE__ */ p(
+      V,
+      {
+        labels: f,
+        state: C,
+        nickname: a?.nickname,
+        statusLabel: a?.statusLabel,
+        statusTone: a?.statusTone,
+        formFactorLabel: a?.formFactorLabel,
+        onClose: u,
+        bankLogoSrc: g,
+        bankLogoAlt: b,
+        cardholderName: a?.cardholderName,
+        maskedCardNumber: a?.maskedCardNumber,
+        programLabel: a?.programLabel,
+        onCopy: W,
+        onRetry: i === k.Supported ? $ : void 0
+      }
+    )
+  ] });
+}
+function wr({
+  baseUrl: s,
+  widgetToken: r,
+  organizationId: u,
+  configClient: f,
+  linkComponent: d,
+  implementation: g,
+  uiFramework: b,
+  errorFallback: o,
+  onError: t,
+  analytics: m,
+  ...e
+}) {
+  return /* @__PURE__ */ p(
+    j,
+    {
+      widgetName: R,
+      baseUrl: s,
+      widgetToken: r,
+      organizationId: u,
+      configClient: f,
+      linkComponent: d,
+      implementation: g,
+      uiFramework: b,
+      errorFallback: o,
+      onError: t,
+      analytics: m,
+      children: /* @__PURE__ */ p(K, { ...e })
+    }
+  );
+}
+export {
+  wr as CardDetailsWidget
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index3.js

@@ -0,0 +1,53 @@
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+import "../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "react/jsx-runtime";
+import "@radix-ui/react-use-controllable-state";
+import "lucide-react";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import "react-error-boundary";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { CardProgram as t } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import { CARD_TYPE_LABELS_EN as s, CARD_STATUS_LABELS_EN as a } from "../../../shared/feature/dist/lib/card/cardPresentation.js";
+const o = {
+  copySuccessToast: "Copied to clipboard",
+  programLabels: {
+    [t.Credit]: "Business credit",
+    [t.Debit]: "Business debit"
+  },
+  // Sourced from `shared/feature` rather than restated: `CardsWidget` reads the
+  // same two maps for its list badges (EMBD-4610), and a local copy would let
+  // the list badge and the panel badge word the same status differently on the
+  // same screen.
+  statusLabels: a,
+  formFactorLabels: s
+};
+function F(r) {
+  return {
+    ...o,
+    ...r,
+    programLabels: {
+      ...o.programLabels,
+      ...r?.programLabels
+    },
+    statusLabels: {
+      ...o.statusLabels,
+      ...r?.statusLabels
+    },
+    formFactorLabels: {
+      ...o.formFactorLabels,
+      ...r?.formFactorLabels
+    }
+  };
+}
+export {
+  o as CARD_DETAILS_FEATURE_LABELS_EN,
+  F as resolveCardDetailsFeatureLabels
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index4.js

@@ -0,0 +1,20 @@
+const e = {
+  Mounted: "card_details.mounted",
+  /**
+   * A copy affordance in the details table was used and the clipboard write
+   * succeeded.
+   *
+   * This is the only product event beyond `Mounted` that this widget may emit.
+   * The read path is a single `GET`, and every other gesture the panel offers is
+   * an API call whose success and failure the analytics interceptor already
+   * reports as `api.request.completed` / `api.request.failed` — duplicating that
+   * is banned. A copy is the one interaction with no HTTP call behind it, so it
+   * is invisible to the interceptor and nothing else would record that the
+   * affordance gets used.
+   */
+  ValueCopied: "card_details.value_copied"
+}, a = "card_details";
+export {
+  e as CardDetailsWidgetAnalyticsEvent,
+  a as WIDGET_NAME
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index5.js

@@ -0,0 +1,82 @@
+import "../../../shared/data-access/dist/lib/rest/client/utils.gen.js";
+import "../../../shared/data-access/dist/lib/EmbedApiContext.js";
+import "../../../shared/data-access/dist/lib/rest/client.gen.js";
+import "@tanstack/react-query";
+import "../../../shared/data-access/dist/lib/rest/zod.gen.js";
+import "react";
+import "../../../shared/feature/dist/lib/WidgetProvider/types.js";
+import "react/jsx-runtime";
+import "@radix-ui/react-use-controllable-state";
+import "lucide-react";
+import "../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import "../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetContext.js";
+import "react-error-boundary";
+import "../../../shared/feature/dist/lib/WidgetProvider/WidgetTokenRefreshContext.js";
+import { CardProgram as e } from "../../../shared/feature/dist/lib/card/cardProgram.js";
+import { CARD_STATUS_TONE as m } from "../../../shared/feature/dist/lib/card/cardPresentation.js";
+import { maskCardNumber as p } from "./index6.js";
+const t = {
+  /** Explicitly one of the two programs this widget can fetch. */
+  Supported: "supported",
+  /**
+   * Not supplied (`undefined` / `null`).
+   *
+   * Deliberately **not** treated as "not resolved yet". `cardProgram` is static
+   * in the host's markup for effectively every mount — it says which product the
+   * screen is about — so an absent one is a coding error, and sitting on a
+   * skeleton would hide it indefinitely. A host that genuinely resolves the
+   * program asynchronously should gate its own render on it rather than mounting
+   * the widget without it.
+   */
+  Missing: "missing",
+  /** Supplied, but not a program this widget can fetch. */
+  Unsupported: "unsupported"
+};
+function h(r) {
+  return r === e.Credit || r === e.Debit ? t.Supported : r == null ? t.Missing : t.Unsupported;
+}
+function A({
+  programValidity: r,
+  isNotFound: a,
+  isError: o,
+  hasCard: i
+}) {
+  return r !== t.Supported ? "error" : a ? "notFound" : i ? "loaded" : o ? "error" : "loading";
+}
+function U({
+  card: r,
+  cardProgram: a,
+  labels: o
+}) {
+  const i = r.cardholderName.trim(), s = r.nickname?.trim();
+  return {
+    statusLabel: o.statusLabels[r.cardStatus],
+    // Tone is not overridable through labels: it carries no identity, only
+    // colour. `statusLabels` is what names the state.
+    statusTone: m[r.cardStatus],
+    formFactorLabel: o.formFactorLabels[r.cardType],
+    // The program is the widget's prop, not a field on the card — neither
+    // response carries a credit/debit discriminant, since the endpoint that
+    // returned it is the discriminant.
+    programLabel: o.programLabels[a],
+    maskedCardNumber: p(r.lastFourDigits),
+    // Both of these are `undefined` when absent rather than a placeholder
+    // string, because each panel row gates its copy affordance on the value
+    // being present. Substituting "—" here would fill the row *and* enable its
+    // Copy button, putting the placeholder on the clipboard and reporting a
+    // successful copy of a value the card does not have. The panel owns the
+    // display fallbacks (`header.untitledCard`, `fields.emptyValue`), which are
+    // separately overridable there — resolving one here would also collapse two
+    // distinct strings into one.
+    cardholderName: i || void 0,
+    nickname: s || void 0
+  };
+}
+export {
+  t as CardProgramValidity,
+  A as resolveCardDetailsPanelState,
+  U as resolveCardDetailsPresentation,
+  h as resolveCardProgramValidity
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/feature/dist/index6.js

@@ -0,0 +1,18 @@
+const r = "••••";
+function e(t) {
+  const a = t.trim().slice(-4);
+  return a ? `${r} ${r} ${r} ${a}` : "";
+}
+async function n(t) {
+  if (!t.trim())
+    return !1;
+  try {
+    return await navigator.clipboard.writeText(t), !0;
+  } catch {
+    return !1;
+  }
+}
+export {
+  n as copyTextToClipboard,
+  e as maskCardNumber
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsHeader.js

@@ -0,0 +1,56 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { Skeleton as m, Badge as u, DropdownMenu as p, DropdownMenuTrigger as g, Button as o, DropdownMenuContent as f } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { EllipsisVerticalIcon as h, XIcon as x } from "lucide-react";
+import { cardStatusToneClassName as b } from "./statusBadge.js";
+import { cardDetailsWidgetUiTestIds as c } from "./testIds.js";
+function v({
+  labels: a,
+  title: s,
+  isTitlePending: d,
+  statusLabel: l,
+  statusTone: w,
+  formFactorLabel: i,
+  cardMenu: n,
+  onClose: r
+}) {
+  return /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-start ttw:gap-1.5 ttw:px-4 ttw:pt-4 ttw:pb-3", children: [
+    /* @__PURE__ */ e("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-1.5", children: [
+      /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:gap-1.5", children: [
+        d ? /* @__PURE__ */ t(m, { className: "ttw:h-8 ttw:w-48" }) : s ? /* @__PURE__ */ t("h2", { className: "ttw:truncate ttw:text-2xl ttw:font-semibold ttw:tracking-[-0.6px] ttw:text-foreground", children: s }) : null,
+        l ? /* @__PURE__ */ t(u, { className: b(w ?? "neutral"), children: l }) : null
+      ] }),
+      i ? /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:text-muted-foreground", children: i }) : null
+    ] }),
+    n ? /* @__PURE__ */ e(p, { children: [
+      /* @__PURE__ */ t(g, { asChild: !0, children: /* @__PURE__ */ t(
+        o,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "ttw:size-8 ttw:shrink-0 ttw:bg-muted",
+          "aria-label": a.menuTriggerAriaLabel,
+          "data-testid": c.menuTrigger,
+          children: /* @__PURE__ */ t(h, { className: "ttw:size-4" })
+        }
+      ) }),
+      /* @__PURE__ */ t(f, { align: "end", children: n })
+    ] }) : null,
+    r ? /* @__PURE__ */ t(
+      o,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: "ttw:size-8 ttw:shrink-0",
+        "aria-label": a.closeAriaLabel,
+        "data-testid": c.closeButton,
+        onClick: r,
+        children: /* @__PURE__ */ t(x, { className: "ttw:size-4" })
+      }
+    ) : null
+  ] });
+}
+export {
+  v as CardDetailsHeader
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardDetailsPanel.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsxs as d, jsx as e } from "react/jsx-runtime";
+import { Skeleton as p, Badge as k, cn as D } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import "@radix-ui/react-use-controllable-state";
+import { CreditCardIcon as F } from "lucide-react";
+import { useMemo as T } from "react";
+import "../../../../../shared/ui/dist/lib/UIContext/UIContext.js";
+import { EmptyState as S } from "../../../../../shared/ui/dist/lib/EmptyState/EmptyState.js";
+import { ErrorState as M } from "../../../../../shared/ui/dist/lib/ErrorState/ErrorState.js";
+import "../../../../../shared/ui/dist/lib/OnboardingShell/OnboardingShellOverlayPortal.js";
+import { CardDetailsHeader as P } from "./CardDetailsHeader.js";
+import { CardFace as R } from "./CardFace.js";
+import { DetailCopyRow as i } from "./DetailCopyRow.js";
+import { resolveCardDetailsPanelLabels as j } from "./labels.js";
+import { cardDetailsWidgetUiTestIds as b } from "./testIds.js";
+function X({
+  labels: c,
+  state: r,
+  nickname: o,
+  statusLabel: f,
+  statusTone: u,
+  formFactorLabel: g,
+  cardMenu: y,
+  onClose: L,
+  bankLogoSrc: h,
+  bankLogoAlt: x,
+  cardholderName: l,
+  maskedCardNumber: v,
+  programLabel: C,
+  billingAddress: s,
+  allowedCategories: m,
+  onCopy: a,
+  onRetry: N,
+  className: A
+}) {
+  const t = T(
+    () => j(c),
+    [c]
+  ), n = !!m?.length;
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      "data-testid": b.panel,
+      className: D("ttw:flex ttw:w-full ttw:flex-col", A),
+      children: [
+        /* @__PURE__ */ e(
+          P,
+          {
+            labels: t.header,
+            title: r === "loaded" ? o ?? t.header.untitledCard : void 0,
+            isTitlePending: r === "loading",
+            statusLabel: r === "loaded" ? f : void 0,
+            statusTone: u,
+            formFactorLabel: r === "loaded" ? g : void 0,
+            cardMenu: r === "loaded" ? y : void 0,
+            onClose: L
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "ttw:px-4 ttw:pb-4", children: r === "loading" ? /* @__PURE__ */ d(
+          "div",
+          {
+            "data-testid": b.loading,
+            role: "status",
+            "aria-label": t.status.loadingAriaLabel,
+            className: "ttw:space-y-4",
+            children: [
+              /* @__PURE__ */ e(p, { className: "ttw:h-8 ttw:w-56" }),
+              /* @__PURE__ */ e(p, { className: "ttw:h-64 ttw:w-full ttw:rounded-xl" })
+            ]
+          }
+        ) : r === "error" ? /* @__PURE__ */ e(
+          M,
+          {
+            title: t.status.errorTitle,
+            description: t.status.errorDescription,
+            retryLabel: t.status.errorRetry,
+            onRetry: N
+          }
+        ) : r === "notFound" ? (
+          // First-class, not an error variant: standalone use makes a bad
+          // `cardId` a routine outcome rather than a failure.
+          /* @__PURE__ */ e(
+            S,
+            {
+              icon: /* @__PURE__ */ e(F, { className: "ttw:size-6 ttw:text-muted-foreground" }),
+              title: t.status.notFoundTitle,
+              description: t.status.notFoundDescription
+            }
+          )
+        ) : /* @__PURE__ */ d("div", { className: "ttw:flex ttw:flex-col ttw:overflow-hidden ttw:rounded-xl ttw:border ttw:border-border ttw:sm:flex-row", children: [
+          /* @__PURE__ */ e("div", { className: "ttw:flex ttw:items-center ttw:justify-center ttw:bg-muted ttw:px-4 ttw:py-5", children: /* @__PURE__ */ e(
+            R,
+            {
+              bankLogoSrc: h,
+              bankLogoAlt: x ?? t.cardFace.bankLogoAlt,
+              cardholderName: l ?? "",
+              maskedCardNumber: v ?? "",
+              programLabel: C ?? ""
+            }
+          ) }),
+          /* @__PURE__ */ d("div", { className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:border-t ttw:border-border ttw:sm:border-t-0 ttw:sm:border-l", children: [
+            /* @__PURE__ */ e(
+              i,
+              {
+                label: t.fields.cardholder,
+                copyAriaLabel: l && a ? t.fields.copyCardholderAriaLabel : void 0,
+                onCopy: l && a ? () => a(l) : void 0,
+                children: l ?? t.fields.emptyValue
+              }
+            ),
+            /* @__PURE__ */ e(
+              i,
+              {
+                label: t.fields.nickname,
+                copyAriaLabel: o && a ? t.fields.copyNicknameAriaLabel : void 0,
+                onCopy: o && a ? () => a(o) : void 0,
+                isLast: !s && !n,
+                children: o ?? t.fields.emptyValue
+              }
+            ),
+            s ? /* @__PURE__ */ e(
+              i,
+              {
+                label: t.fields.billingAddress,
+                copyAriaLabel: a ? t.fields.copyBillingAddressAriaLabel : void 0,
+                onCopy: a ? () => a(s) : void 0,
+                isLast: !n,
+                children: s
+              }
+            ) : null,
+            n ? /* @__PURE__ */ e(i, { label: t.fields.allowedCategories, isLast: !0, children: /* @__PURE__ */ e("div", { className: "ttw:flex ttw:flex-wrap ttw:gap-2", children: m?.map((w) => (
+              // Not `variant="secondary"`: that variant is written
+              // against `bg-neutral` / `text-neutral-foreground`, and
+              // no `--color-neutral` token exists in
+              // `shared-ui-shadcn/src/theme-tokens.css` — so the pill
+              // compiles to a transparent background and renders as
+              // bare text. Naming the `secondary` tokens directly gets
+              // the grey pill the comp shows.
+              /* @__PURE__ */ e(
+                k,
+                {
+                  className: "ttw:bg-secondary ttw:text-secondary-foreground",
+                  children: w
+                },
+                w
+              )
+            )) }) }) : null
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  X as CardDetailsPanel
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/CardFace.js

@@ -0,0 +1,49 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { cn as l } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { cardDetailsWidgetUiTestIds as d } from "./testIds.js";
+function x({
+  bankLogoSrc: a,
+  bankLogoAlt: w,
+  cardholderName: r,
+  maskedCardNumber: i,
+  programLabel: s,
+  className: n
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-testid": d.cardFace,
+      className: l(
+        "ttw:relative ttw:flex ttw:h-[190px] ttw:w-[300px] ttw:flex-col ttw:justify-between ttw:overflow-hidden ttw:rounded-xl ttw:bg-[#101317] ttw:p-4",
+        n
+      ),
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "ttw:pointer-events-none ttw:absolute ttw:inset-0 ttw:bg-[radial-gradient(120%_120%_at_85%_100%,rgba(45,212,191,0.22)_0%,transparent_55%)]"
+          }
+        ),
+        a ? /* @__PURE__ */ t(
+          "img",
+          {
+            src: a,
+            alt: w,
+            className: "ttw:relative ttw:h-8 ttw:w-auto ttw:max-w-[60%] ttw:object-contain ttw:object-left"
+          }
+        ) : /* @__PURE__ */ t("span", { className: "ttw:relative ttw:h-8" }),
+        /* @__PURE__ */ e("div", { className: "ttw:relative ttw:flex ttw:items-end ttw:justify-between ttw:gap-3", children: [
+          /* @__PURE__ */ e("div", { className: "ttw:min-w-0", children: [
+            /* @__PURE__ */ t("p", { className: "ttw:truncate ttw:text-base ttw:font-medium ttw:text-white", children: r }),
+            /* @__PURE__ */ t("p", { className: "ttw:mt-1 ttw:truncate ttw:text-lg ttw:tracking-wide ttw:text-white/90", children: i })
+          ] }),
+          /* @__PURE__ */ t("p", { className: "ttw:shrink-0 ttw:text-[10px] ttw:font-medium ttw:text-white/90", children: s })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  x as CardFace
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/DetailCopyRow.js

@@ -0,0 +1,38 @@
+import { jsxs as o, jsx as t } from "react/jsx-runtime";
+import { Button as n } from "../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { CopyIcon as l } from "lucide-react";
+function d({
+  label: s,
+  children: i,
+  copyAriaLabel: e,
+  onCopy: r,
+  isLast: a
+}) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-3 ttw:px-4 ttw:py-3" + (a ? "" : " ttw:border-b ttw:border-border"),
+      children: [
+        /* @__PURE__ */ o("div", { className: "ttw:min-w-0 ttw:space-y-1", children: [
+          /* @__PURE__ */ t("p", { className: "ttw:text-sm ttw:font-medium ttw:text-foreground", children: s }),
+          /* @__PURE__ */ t("div", { className: "ttw:text-sm ttw:text-foreground", children: i })
+        ] }),
+        e && r ? /* @__PURE__ */ t(
+          n,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: "ttw:size-8 ttw:shrink-0 ttw:text-muted-foreground",
+            "aria-label": e,
+            onClick: r,
+            children: /* @__PURE__ */ t(l, { className: "ttw:size-4" })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  d as DetailCopyRow
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/labels.js

@@ -0,0 +1,43 @@
+const a = {
+  header: {
+    untitledCard: "Untitled card",
+    menuTriggerAriaLabel: "Card actions",
+    closeAriaLabel: "Close card details"
+  },
+  cardFace: {
+    bankLogoAlt: "Bank logo"
+  },
+  fields: {
+    cardholder: "Cardholder",
+    nickname: "Nickname",
+    billingAddress: "Billing address",
+    allowedCategories: "Allowed categories",
+    emptyValue: "—",
+    copyCardholderAriaLabel: "Copy cardholder",
+    copyNicknameAriaLabel: "Copy nickname",
+    copyBillingAddressAriaLabel: "Copy billing address"
+  },
+  status: {
+    loadingAriaLabel: "Loading card details",
+    errorTitle: "We couldn't load this card",
+    errorDescription: "Something went wrong on our end. Please try again.",
+    errorRetry: "Try again",
+    notFoundTitle: "Card not found",
+    notFoundDescription: "This card may have been closed, or you may not have access to it."
+  }
+};
+function r(e) {
+  return {
+    header: { ...a.header, ...e?.header },
+    cardFace: {
+      ...a.cardFace,
+      ...e?.cardFace
+    },
+    fields: { ...a.fields, ...e?.fields },
+    status: { ...a.status, ...e?.status }
+  };
+}
+export {
+  a as CARD_DETAILS_PANEL_LABELS_EN,
+  r as resolveCardDetailsPanelLabels
+};

package/dist/libs/tesouro-embedded-components-react/card-details-widget/ui/dist/lib/CardDetailsPanel/statusBadge.js

@@ -0,0 +1,12 @@
+const e = {
+  success: "ttw:bg-[#ECFDF5] ttw:text-[#027A48]",
+  info: "ttw:bg-[#EFF8FF] ttw:text-[#175CD3]",
+  warning: "ttw:bg-[#FFFAEB] ttw:text-[#B54708]",
+  neutral: "ttw:bg-[#F2F4F7] ttw:text-[#344054]"
+}, w = "ttw:rounded ttw:border-transparent ttw:px-2 ttw:py-0.5 ttw:text-xs ttw:font-medium";
+function n(t) {
+  return `${w} ${e[t]}`;
+}
+export {
+  n as cardStatusToneClassName
+};