@tesouro/embedded-components-react 0.2.339 → 0.2.341

package/README.md

@@ -293,15 +293,15 @@ sonner toasts.
 
 #### Props
 
-| Prop            | Type                                  | Default        | Description                                                                                                        |
-| --------------- | ------------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `cardArtSrc`    | `string`                              | **Required**   | Static card plastic image URL (no name overlays).                                                                  |
-| `labels`        | `PartialDeep<CreateCardWidgetLabels>` | English labels | Overrides presentational copy (header, setup, mailing, preparing, success, footer). Nested groups merge per group. |
-| `featureLabels` | toast / untitled-funding overrides    | English labels | Overrides mutation toast strings and the funding-account fallback name.                                            |
-| `className`     | `string`                              | —              | Optional class on the presentational root.                                                                         |
-| `onClose`       | `() => void`                          | —              | Header close control. Omit and no close control is rendered.                                                       |
-| `onCancel`      | `() => void`                          | —              | Called when Cancel is pressed (also invokes `onClose` when both are set).                                          |
-| `onViewCard`    | `(cardId: string) => void`            | —              | Called with the new debit card id after a successful create when the user presses **View card**.                   |
+| Prop            | Type                                  | Default        | Description                                                                                                                       |
+| --------------- | ------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `cardArtSrc`    | `string`                              | **Required**   | Static card plastic image URL (no name overlays).                                                                                 |
+| `labels`        | `PartialDeep<CreateCardWidgetLabels>` | English labels | Overrides presentational copy (header, setup, mailing, card controls, preparing, success, footer). Nested groups merge per group. |
+| `featureLabels` | toast / untitled-funding overrides    | English labels | Overrides mutation toast strings and the funding-account fallback name.                                                           |
+| `className`     | `string`                              | —              | Optional class on the presentational root.                                                                                        |
+| `onClose`       | `() => void`                          | —              | Header close control. Omit and no close control is rendered.                                                                      |
+| `onCancel`      | `() => void`                          | —              | Called when Cancel is pressed (also invokes `onClose` when both are set).                                                         |
+| `onViewCard`    | `(cardId: string) => void`            | —              | Called with the new debit card id after a successful create when the user presses **View card**.                                  |
 
 ### CounterpartsWidget
 

package/dist/index.css

@@ -1327,6 +1327,9 @@
   .ttw\:max-w-41 {
     max-width: calc(var(--ttw-spacing) * 41);
   }
+  .ttw\:max-w-48 {
+    max-width: calc(var(--ttw-spacing) * 48);
+  }
   .ttw\:max-w-56 {
     max-width: calc(var(--ttw-spacing) * 56);
   }
@@ -1531,6 +1534,9 @@
   .ttw\:grow-0 {
     flex-grow: 0;
   }
+  .ttw\:basis-36 {
+    flex-basis: calc(var(--ttw-spacing) * 36);
+  }
   .ttw\:basis-56 {
     flex-basis: calc(var(--ttw-spacing) * 56);
   }
@@ -2433,6 +2439,12 @@
   .ttw\:bg-destructive {
     background-color: var(--ttw-destructive);
   }
+  .ttw\:bg-destructive\/5 {
+    background-color: var(--ttw-destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--ttw-destructive) 5%, transparent);
+    }
+  }
   .ttw\:bg-destructive\/10 {
     background-color: var(--ttw-destructive);
     @supports (color: color-mix(in lab, red, red)) {

package/dist/index.d.ts

@@ -2238,6 +2238,32 @@ interface CardDetailsWidgetProps extends WidgetProviderProps {
  */
 declare function CardDetailsWidget({ baseUrl, widgetToken, organizationId, configClient, gatewayRouting, linkComponent, implementation, uiFramework, errorFallback, onError, analytics, disclosuresAcceptance, ...innerProps }: CardDetailsWidgetProps): React.JSX.Element;
 
+/**
+ * Reset-period tab labels and notice copy are deliberately absent: the owner
+ * supplies those through `spendLimitPeriodOptions` / `spendLimitPeriodNotices`,
+ * so declaring them here would give consumers override keys that no component
+ * ever reads.
+ */
+interface CardControlsLabels {
+    currencySymbol: string;
+    spendLimit: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+    merchantCategories: {
+        title: string;
+        description: string;
+    };
+    perTransactionMaximum: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+}
+
 type PartialDeep$2<T> = {
     [K in keyof T]?: T[K] extends object ? PartialDeep$2<T[K]> : T[K];
 };
@@ -2273,6 +2299,7 @@ interface CreateCardWidgetLabels {
         statePlaceholder: string;
         zipLabel: string;
     };
+    cardControls: CardControlsLabels;
     preparing: {
         title: string;
         description: string;

package/dist/lib/CardsWidget.d.ts

@@ -875,6 +875,32 @@ interface CardDetailsWidgetProps extends WidgetProviderProps {
     bankLogoAlt?: string;
 }
 
+/**
+ * Reset-period tab labels and notice copy are deliberately absent: the owner
+ * supplies those through `spendLimitPeriodOptions` / `spendLimitPeriodNotices`,
+ * so declaring them here would give consumers override keys that no component
+ * ever reads.
+ */
+interface CardControlsLabels {
+    currencySymbol: string;
+    spendLimit: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+    merchantCategories: {
+        title: string;
+        description: string;
+    };
+    perTransactionMaximum: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+}
+
 type PartialDeep$1<T> = {
     [K in keyof T]?: T[K] extends object ? PartialDeep$1<T[K]> : T[K];
 };
@@ -910,6 +936,7 @@ interface CreateCardWidgetLabels {
         statePlaceholder: string;
         zipLabel: string;
     };
+    cardControls: CardControlsLabels;
     preparing: {
         title: string;
         description: string;

package/dist/lib/CreateCardWidget.d.ts

@@ -2,6 +2,32 @@ import * as React from 'react';
 import { ComponentType, AnchorHTMLAttributes, ReactNode, ErrorInfo } from 'react';
 import { FallbackProps } from 'react-error-boundary';
 
+/**
+ * Reset-period tab labels and notice copy are deliberately absent: the owner
+ * supplies those through `spendLimitPeriodOptions` / `spendLimitPeriodNotices`,
+ * so declaring them here would give consumers override keys that no component
+ * ever reads.
+ */
+interface CardControlsLabels {
+    currencySymbol: string;
+    spendLimit: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+    merchantCategories: {
+        title: string;
+        description: string;
+    };
+    perTransactionMaximum: {
+        title: string;
+        description: string;
+        amountPlaceholder: string;
+        amountAriaLabel: string;
+    };
+}
+
 type PartialDeep<T> = {
     [K in keyof T]?: T[K] extends object ? PartialDeep<T[K]> : T[K];
 };
@@ -37,6 +63,7 @@ interface CreateCardWidgetLabels {
         statePlaceholder: string;
         zipLabel: string;
     };
+    cardControls: CardControlsLabels;
     preparing: {
         title: string;
         description: string;

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/CardControlRow.js

@@ -0,0 +1,41 @@
+import { Collapsible as e, CollapsibleContent as t, Switch as n } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/CardControlRow.js
+function o({ title: o, description: s, checked: c, onCheckedChange: l, children: u }) {
+	let d = r(), f = `${d}-title`, p = `${d}-description`, m = `${d}-drawer`;
+	return /* @__PURE__ */ a("div", {
+		className: "ttw:flex ttw:flex-col ttw:gap-4 ttw:p-4",
+		children: [/* @__PURE__ */ a("div", {
+			className: "ttw:flex ttw:items-start ttw:justify-between ttw:gap-4",
+			children: [/* @__PURE__ */ a("div", {
+				className: "ttw:flex ttw:min-w-0 ttw:flex-col ttw:gap-1",
+				children: [/* @__PURE__ */ i("span", {
+					id: f,
+					className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+					children: o
+				}), /* @__PURE__ */ i("span", {
+					id: p,
+					className: "ttw:text-sm ttw:text-muted-foreground",
+					children: s
+				})]
+			}), /* @__PURE__ */ i(n, {
+				checked: c,
+				onCheckedChange: l,
+				"aria-labelledby": f,
+				"aria-describedby": p,
+				"aria-controls": m,
+				"aria-expanded": c,
+				className: "ttw:mt-0.5 ttw:shrink-0"
+			})]
+		}), /* @__PURE__ */ i(e, {
+			open: c,
+			children: /* @__PURE__ */ i(t, {
+				id: m,
+				children: u
+			})
+		})]
+	});
+}
+//#endregion
+export { o as CardControlRow };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/CardControls.js

@@ -0,0 +1,46 @@
+import { cn as e } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { resolveCardControlsLabels as t } from "./labels.js";
+import { MerchantCategoriesControl as n } from "./MerchantCategoriesControl.js";
+import { PerTransactionMaximumControl as r } from "./PerTransactionMaximumControl.js";
+import { SpendLimitControl as i } from "./SpendLimitControl.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/CardControls.js
+var s = () => void 0;
+function c({ labels: c, className: l, isSpendLimitEnabled: u = !1, onSpendLimitEnabledChange: d = s, spendLimitAmount: f = "", onSpendLimitAmountChange: p = s, spendLimitPeriodOptions: m = [], selectedSpendLimitPeriod: h = null, onSpendLimitPeriodSelect: g = s, spendLimitPeriodNotices: _, isMerchantCategoriesEnabled: v = !1, onMerchantCategoriesEnabledChange: y = s, merchantCategoryOptions: b = [], selectedMerchantCategories: x = [], onMerchantCategoryToggle: S = s, isPerTransactionMaximumEnabled: C = !1, onPerTransactionMaximumEnabledChange: w = s, perTransactionMaximumAmount: T = "", onPerTransactionMaximumAmountChange: E = s }) {
+	let D = t(c);
+	return /* @__PURE__ */ o("div", {
+		className: e("ttw:flex ttw:flex-col ttw:divide-y ttw:divide-border ttw:overflow-hidden ttw:rounded-lg ttw:border ttw:border-border", l),
+		children: [
+			/* @__PURE__ */ a(i, {
+				labels: D.spendLimit,
+				currencySymbol: D.currencySymbol,
+				isEnabled: u,
+				onEnabledChange: d,
+				amount: f,
+				onAmountChange: p,
+				periodOptions: m,
+				selectedPeriod: h,
+				onPeriodSelect: g,
+				periodNotices: _
+			}),
+			/* @__PURE__ */ a(n, {
+				labels: D.merchantCategories,
+				isEnabled: v,
+				onEnabledChange: y,
+				categoryOptions: b,
+				selectedCategories: x,
+				onCategoryToggle: S
+			}),
+			/* @__PURE__ */ a(r, {
+				labels: D.perTransactionMaximum,
+				currencySymbol: D.currencySymbol,
+				isEnabled: C,
+				onEnabledChange: w,
+				amount: T,
+				onAmountChange: E
+			})
+		]
+	});
+}
+//#endregion
+export { c as CardControls };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/MerchantCategoriesControl.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { CardControlRow as t } from "./CardControlRow.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { CheckIcon as i } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/MerchantCategoriesControl.js
+function a({ labels: a, isEnabled: o, onEnabledChange: s, categoryOptions: c, selectedCategories: l, onCategoryToggle: u }) {
+	return /* @__PURE__ */ n(t, {
+		title: a.title,
+		description: a.description,
+		checked: o,
+		onCheckedChange: s,
+		children: /* @__PURE__ */ n("div", {
+			className: "ttw:flex ttw:flex-wrap ttw:gap-2",
+			children: c.map((t) => {
+				let a = l.includes(t.value);
+				return /* @__PURE__ */ r("button", {
+					type: "button",
+					"aria-pressed": a,
+					onClick: () => u(t.value),
+					className: e("ttw:inline-flex ttw:items-center ttw:gap-1.5 ttw:rounded-full ttw:border ttw:px-4 ttw:py-2 ttw:text-sm ttw:transition-colors", "ttw:focus-visible:outline-none ttw:focus-visible:ring-2 ttw:focus-visible:ring-ring ttw:focus-visible:ring-offset-2 ttw:focus-visible:ring-offset-background", a ? "ttw:border-primary ttw:bg-primary/5 ttw:font-semibold ttw:text-primary" : "ttw:border-border ttw:bg-background ttw:text-foreground ttw:hover:bg-accent"),
+					children: [a ? /* @__PURE__ */ n(i, {
+						"aria-hidden": !0,
+						className: "ttw:size-3.5"
+					}) : null, t.label]
+				}, t.value);
+			})
+		})
+	});
+}
+//#endregion
+export { a as MerchantCategoriesControl };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/PerTransactionMaximumControl.js

@@ -0,0 +1,31 @@
+import { InputGroup as e, InputGroupAddon as t, InputGroupInput as n } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { formatAmountAriaLabel as r } from "./labels.js";
+import { CardControlRow as i } from "./CardControlRow.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/PerTransactionMaximumControl.js
+function s({ labels: s, currencySymbol: c, isEnabled: l, onEnabledChange: u, amount: d, onAmountChange: f }) {
+	return /* @__PURE__ */ a(i, {
+		title: s.title,
+		description: s.description,
+		checked: l,
+		onCheckedChange: u,
+		children: /* @__PURE__ */ o(e, {
+			className: "ttw:h-9 ttw:max-w-48 ttw:rounded-md ttw:border ttw:border-input ttw:shadow-xs ttw:has-[:focus-visible]:border-ring ttw:has-[:focus-visible]:ring-[3px] ttw:has-[:focus-visible]:ring-ring/50",
+			children: [/* @__PURE__ */ a(t, {
+				align: "inline-start",
+				"aria-hidden": !0,
+				children: c
+			}), /* @__PURE__ */ a(n, {
+				"data-has-start-addon": !0,
+				inputMode: "decimal",
+				value: d,
+				onChange: (e) => f(e.target.value),
+				placeholder: s.amountPlaceholder,
+				"aria-label": r(s.amountAriaLabel, c),
+				className: "ttw:rounded-md ttw:border-0 ttw:shadow-none ttw:focus-visible:ring-0"
+			})]
+		})
+	});
+}
+//#endregion
+export { s as PerTransactionMaximumControl };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/SpendLimitControl.js

@@ -0,0 +1,63 @@
+import { Alert as e, AlertDescription as t, InputGroup as n, InputGroupAddon as r, InputGroupInput as i, Tabs as a, TabsContent as o, TabsList as s, TabsTrigger as c } from "../../../../../../../../packages/shared-ui-shadcn/dist/index.js";
+import { formatAmountAriaLabel as l } from "./labels.js";
+import { CardControlRow as u } from "./CardControlRow.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { InfoIcon as p, TriangleAlertIcon as m } from "lucide-react";
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/SpendLimitControl.js
+function h({ notice: n }) {
+	if (!n) return null;
+	let r = n.variant === "warning";
+	return /* @__PURE__ */ f(e, {
+		className: r ? "ttw:border-destructive/30 ttw:bg-destructive/5 ttw:text-destructive" : "ttw:border-border ttw:bg-muted ttw:text-foreground",
+		children: [/* @__PURE__ */ d(r ? m : p, { "aria-hidden": !0 }), /* @__PURE__ */ d(t, {
+			className: "ttw:text-current",
+			children: /* @__PURE__ */ f("p", { children: [n.title ? /* @__PURE__ */ f("span", {
+				className: "ttw:font-semibold",
+				children: [n.title, " "]
+			}) : null, n.description] })
+		})]
+	});
+}
+function g({ labels: e, currencySymbol: t, isEnabled: p, onEnabledChange: m, amount: g, onAmountChange: _, periodOptions: v, selectedPeriod: y, onPeriodSelect: b, periodNotices: x }) {
+	return /* @__PURE__ */ d(u, {
+		title: e.title,
+		description: e.description,
+		checked: p,
+		onCheckedChange: m,
+		children: /* @__PURE__ */ f(a, {
+			value: y ?? "",
+			onValueChange: b,
+			children: [/* @__PURE__ */ f("div", {
+				className: "ttw:flex ttw:min-w-0 ttw:flex-wrap ttw:items-center ttw:gap-3",
+				children: [/* @__PURE__ */ f(n, {
+					className: "ttw:h-9 ttw:min-w-0 ttw:flex-1 ttw:basis-36 ttw:rounded-md ttw:border ttw:border-input ttw:shadow-xs ttw:has-[:focus-visible]:border-ring ttw:has-[:focus-visible]:ring-[3px] ttw:has-[:focus-visible]:ring-ring/50",
+					children: [/* @__PURE__ */ d(r, {
+						align: "inline-start",
+						"aria-hidden": !0,
+						children: t
+					}), /* @__PURE__ */ d(i, {
+						"data-has-start-addon": !0,
+						inputMode: "decimal",
+						value: g,
+						onChange: (e) => _(e.target.value),
+						placeholder: e.amountPlaceholder,
+						"aria-label": l(e.amountAriaLabel, t),
+						className: "ttw:rounded-md ttw:border-0 ttw:shadow-none ttw:focus-visible:ring-0"
+					})]
+				}), v.length > 0 ? /* @__PURE__ */ d(s, {
+					className: "ttw:max-w-full",
+					children: v.map((e) => /* @__PURE__ */ d(c, {
+						value: e.value,
+						children: e.label
+					}, e.value))
+				}) : null]
+			}), v.map((e) => /* @__PURE__ */ d(o, {
+				value: e.value,
+				className: "ttw:mt-4",
+				children: /* @__PURE__ */ d(h, { notice: x?.find((t) => t.value === e.value) })
+			}, e.value))]
+		})
+	});
+}
+//#endregion
+export { g as SpendLimitControl };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/labels.js

@@ -0,0 +1,43 @@
+//#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CardControls/labels.js
+var e = {
+	currencySymbol: "$",
+	spendLimit: {
+		title: "Spend limit",
+		description: "Cap total spend on this card. Choose how the limit resets.",
+		amountPlaceholder: "0",
+		amountAriaLabel: "Spend limit amount in {currency}"
+	},
+	merchantCategories: {
+		title: "Merchant categories",
+		description: "Only allow purchases at selected category groups. Everything else is declined."
+	},
+	perTransactionMaximum: {
+		title: "Per-transaction maximum",
+		description: "Decline any single purchase above this amount.",
+		amountPlaceholder: "0",
+		amountAriaLabel: "Per-transaction maximum amount in {currency}"
+	}
+};
+function t(e, t) {
+	return e.replaceAll("{currency}", t);
+}
+function n(t) {
+	return {
+		...e,
+		...t,
+		spendLimit: {
+			...e.spendLimit,
+			...t?.spendLimit
+		},
+		merchantCategories: {
+			...e.merchantCategories,
+			...t?.merchantCategories
+		},
+		perTransactionMaximum: {
+			...e.perTransactionMaximum,
+			...t?.perTransactionMaximum
+		}
+	};
+}
+//#endregion
+export { e as CARD_CONTROLS_LABELS_EN, t as formatAmountAriaLabel, n as resolveCardControlsLabels };

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/CreateCardWidget.js

@@ -6,6 +6,7 @@ import { Button as e, cn as t } from "../../../../../../../packages/shared-ui-sh
 import { resolveCreateCardWidgetLabels as n } from "./labels.js";
 import { CreateCardView as r } from "./types.js";
 import { PreparingView as i } from "./PreparingView.js";
+import "./CardControls/CardControls.js";
 import { SetupView as a } from "./SetupView.js";
 import { SuccessView as o } from "./SuccessView.js";
 import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
@@ -20,30 +21,30 @@ var f = {
 function m(e) {
 	return e === r.Setup || e === r.Preparing || e === r.Success ? e : (console.error(`[CreateCardWidget] unexpected view ${JSON.stringify(e)}; falling back to "${r.Setup}"`), r.Setup);
 }
-function h({ view: h, cardArtSrc: g, labels: _, className: v, cardholderOptions: y = [], selectedCardholder: b = null, onCardholderSelect: x = p, isCardholderError: S = !1, onCardholderRetry: C, cardFormatOptions: w = [], selectedCardFormat: T = null, onCardFormatSelect: E = p, isFundingAccountVisible: D = !1, fundingAccountOptions: O = [], selectedFundingAccount: k = null, onFundingAccountSelect: A = p, isFundingAccountError: j = !1, onFundingAccountRetry: M, isMailingSectionVisible: N = !1, selectedMailingOption: P = null, onMailingOptionSelect: F = p, businessAddress: I = "", isBusinessAddressVisible: L = !1, isManualAddressVisible: R = !1, manualAddress: z = f, onManualAddressChange: B = p, stateOptions: V = [], isCreateDisabled: H = !1, onCreateClick: U = p, onCancelClick: W = p, onClose: G, onCreateAnotherClick: K = p, onViewCardClick: q }) {
-	let J = n(_), Y = m(h), X = Y === r.Setup;
+function h({ view: h, cardArtSrc: g, labels: _, className: v, cardholderOptions: y = [], selectedCardholder: b = null, onCardholderSelect: x = p, isCardholderError: S = !1, onCardholderRetry: C, cardFormatOptions: w = [], selectedCardFormat: T = null, onCardFormatSelect: E = p, isFundingAccountVisible: D = !1, fundingAccountOptions: O = [], selectedFundingAccount: k = null, onFundingAccountSelect: A = p, isFundingAccountError: j = !1, onFundingAccountRetry: M, isMailingSectionVisible: N = !1, selectedMailingOption: P = null, onMailingOptionSelect: F = p, businessAddress: I = "", isBusinessAddressVisible: L = !1, isManualAddressVisible: R = !1, manualAddress: z = f, onManualAddressChange: B = p, stateOptions: V = [], isCardControlsSectionVisible: H = !1, cardControls: U, isCreateDisabled: W = !1, onCreateClick: G = p, onCancelClick: K = p, onClose: q, onCreateAnotherClick: J = p, onViewCardClick: Y }) {
+	let X = n(_), Z = m(h), Q = Z === r.Setup;
 	return /* @__PURE__ */ l("div", {
 		className: t("ttw:relative ttw:flex ttw:h-full ttw:w-full ttw:min-h-0 ttw:flex-col ttw:bg-background", v),
 		children: [
 			/* @__PURE__ */ l("div", {
-				className: t("ttw:flex ttw:shrink-0 ttw:items-center ttw:gap-3 ttw:px-6 ttw:pt-4", X ? "ttw:bg-primary/5 ttw:pb-2" : "ttw:absolute ttw:inset-x-0 ttw:top-0 ttw:z-10 ttw:bg-transparent ttw:pb-0"),
-				children: [X ? /* @__PURE__ */ c("h2", {
+				className: t("ttw:flex ttw:shrink-0 ttw:items-center ttw:gap-3 ttw:px-6 ttw:pt-4", Q ? "ttw:bg-primary/5 ttw:pb-2" : "ttw:absolute ttw:inset-x-0 ttw:top-0 ttw:z-10 ttw:bg-transparent ttw:pb-0"),
+				children: [Q ? /* @__PURE__ */ c("h2", {
 					className: "ttw:min-w-0 ttw:flex-1 ttw:text-lg ttw:font-semibold ttw:text-primary",
-					children: J.header.title
-				}) : /* @__PURE__ */ c("span", { className: "ttw:flex-1" }), G ? /* @__PURE__ */ c(e, {
+					children: X.header.title
+				}) : /* @__PURE__ */ c("span", { className: "ttw:flex-1" }), q ? /* @__PURE__ */ c(e, {
 					type: "button",
 					variant: "ghost",
 					size: "icon",
-					"aria-label": J.header.closeAriaLabel,
-					onClick: G,
+					"aria-label": X.header.closeAriaLabel,
+					onClick: q,
 					children: /* @__PURE__ */ c(d, { className: "ttw:size-4" })
 				}) : null]
 			}),
-			X ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+			Q ? /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
 				className: "ttw:min-h-0 ttw:flex-1 ttw:overflow-y-auto",
 				children: /* @__PURE__ */ c(a, {
 					cardArtSrc: g,
-					labels: J,
+					labels: X,
 					cardholderOptions: y,
 					selectedCardholder: b,
 					onCardholderSelect: x,
@@ -66,31 +67,33 @@ function h({ view: h, cardArtSrc: g, labels: _, className: v, cardholderOptions:
 					isManualAddressVisible: R,
 					manualAddress: z,
 					onManualAddressChange: B,
-					stateOptions: V
+					stateOptions: V,
+					isCardControlsSectionVisible: H,
+					cardControls: U
 				})
 			}), /* @__PURE__ */ l("div", {
 				className: "ttw:flex ttw:shrink-0 ttw:justify-end ttw:gap-3 ttw:border-t ttw:border-border ttw:bg-muted/40 ttw:px-6 ttw:py-4",
 				children: [/* @__PURE__ */ c(e, {
 					type: "button",
 					variant: "outline",
-					onClick: W,
-					children: J.footer.cancel
+					onClick: K,
+					children: X.footer.cancel
 				}), /* @__PURE__ */ l(e, {
 					type: "button",
-					disabled: H,
-					onClick: U,
-					children: [J.footer.createCard, /* @__PURE__ */ c(u, { className: "ttw:size-4" })]
+					disabled: W,
+					onClick: G,
+					children: [X.footer.createCard, /* @__PURE__ */ c(u, { className: "ttw:size-4" })]
 				})]
 			})] }) : null,
-			Y === r.Preparing ? /* @__PURE__ */ c(i, {
+			Z === r.Preparing ? /* @__PURE__ */ c(i, {
 				cardArtSrc: g,
-				labels: J
+				labels: X
 			}) : null,
-			Y === r.Success ? /* @__PURE__ */ c(o, {
+			Z === r.Success ? /* @__PURE__ */ c(o, {
 				cardArtSrc: g,
-				labels: J,
-				onCreateAnotherClick: K,
-				onViewCardClick: q
+				labels: X,
+				onCreateAnotherClick: J,
+				onViewCardClick: Y
 			}) : null
 		]
 	});

package/dist/libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/SetupView.js

@@ -3,164 +3,175 @@ import { ErrorState as l } from "../../../../../shared/ui/dist/lib/ErrorState/Er
 import "../../../../../shared/ui/dist/index.js";
 import { MailingOptionValue as u } from "./types.js";
 import { CardArt as d } from "./CardArt.js";
-import { ManualAddressFields as f } from "./ManualAddressFields.js";
-import { useId as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { CardControls as f } from "./CardControls/CardControls.js";
+import { ManualAddressFields as p } from "./ManualAddressFields.js";
+import { useId as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/SetupView.js
-function _({ cardArtSrc: _, labels: v, cardholderOptions: y, selectedCardholder: b, onCardholderSelect: x, isCardholderError: S = !1, onCardholderRetry: C, cardFormatOptions: w, selectedCardFormat: T, onCardFormatSelect: E, isFundingAccountVisible: D, fundingAccountOptions: O, selectedFundingAccount: k, onFundingAccountSelect: A, isFundingAccountError: j = !1, onFundingAccountRetry: M, isMailingSectionVisible: N, selectedMailingOption: P, onMailingOptionSelect: F, businessAddress: I, isBusinessAddressVisible: L, isManualAddressVisible: R, manualAddress: z, onManualAddressChange: B, stateOptions: V }) {
-	let H = p(), U = `${H}-cardholder`, W = `${H}-card-format`, G = `${H}-funding-account`, K = `${H}-mailing-business`, q = `${H}-mailing-custom`;
-	return /* @__PURE__ */ g("div", {
+function v({ cardArtSrc: v, labels: y, cardholderOptions: b, selectedCardholder: x, onCardholderSelect: S, isCardholderError: C = !1, onCardholderRetry: w, cardFormatOptions: T, selectedCardFormat: E, onCardFormatSelect: D, isFundingAccountVisible: O, fundingAccountOptions: k, selectedFundingAccount: A, onFundingAccountSelect: j, isFundingAccountError: M = !1, onFundingAccountRetry: N, isMailingSectionVisible: P, selectedMailingOption: F, onMailingOptionSelect: I, businessAddress: L, isBusinessAddressVisible: R, isManualAddressVisible: z, manualAddress: B, onManualAddressChange: V, stateOptions: H, isCardControlsSectionVisible: U, cardControls: W }) {
+	let G = m(), K = `${G}-cardholder`, q = `${G}-card-format`, J = `${G}-funding-account`, Y = `${G}-mailing-business`, X = `${G}-mailing-custom`;
+	return /* @__PURE__ */ _("div", {
 		className: "ttw:flex ttw:flex-col",
-		children: [/* @__PURE__ */ h("div", {
+		children: [/* @__PURE__ */ g("div", {
 			className: "ttw:bg-primary/5 ttw:px-6 ttw:pt-2 ttw:pb-6",
-			children: /* @__PURE__ */ h(d, {
-				src: _,
-				alt: v.cardArtAlt
+			children: /* @__PURE__ */ g(d, {
+				src: v,
+				alt: y.cardArtAlt
 			})
-		}), /* @__PURE__ */ g("div", {
+		}), /* @__PURE__ */ _("div", {
 			className: "ttw:flex ttw:flex-col ttw:gap-6 ttw:px-6 ttw:py-6",
-			children: [/* @__PURE__ */ g("section", {
-				className: "ttw:flex ttw:flex-col ttw:gap-4",
-				children: [
-					/* @__PURE__ */ h("h3", {
-						className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
-						children: v.setup.sectionTitle
-					}),
-					/* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-						children: [/* @__PURE__ */ h(e, {
-							htmlFor: U,
-							children: v.setup.cardholderLabel
-						}), S ? /* @__PURE__ */ h(l, {
-							title: v.cardholderError.title,
-							description: v.cardholderError.description,
-							retryLabel: v.cardholderError.retry,
-							onRetry: C,
-							className: "ttw:rounded-lg ttw:border ttw:border-border ttw:py-8"
-						}) : /* @__PURE__ */ g(r, {
-							value: b ?? "",
-							onValueChange: x,
-							children: [/* @__PURE__ */ h(o, {
-								id: U,
-								className: "ttw:w-full",
-								children: /* @__PURE__ */ h(s, { placeholder: v.setup.cardholderPlaceholder })
-							}), /* @__PURE__ */ h(i, { children: y.map((e) => /* @__PURE__ */ h(a, {
-								value: e.value,
-								children: e.label
-							}, e.value)) })]
-						})]
-					}),
-					/* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-						children: [/* @__PURE__ */ h(e, {
-							htmlFor: W,
-							children: v.setup.cardFormatLabel
-						}), /* @__PURE__ */ g(r, {
-							value: T ?? "",
-							onValueChange: E,
-							children: [/* @__PURE__ */ h(o, {
-								id: W,
-								className: "ttw:w-full",
-								children: /* @__PURE__ */ h(s, { placeholder: v.setup.cardFormatPlaceholder })
-							}), /* @__PURE__ */ h(i, { children: w.map((e) => /* @__PURE__ */ h(a, {
-								value: e.value,
-								children: e.label
-							}, e.value)) })]
-						})]
-					}),
-					D ? /* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-1.5",
-						children: [/* @__PURE__ */ h(e, {
-							htmlFor: G,
-							children: v.setup.fundingAccountLabel
-						}), j ? /* @__PURE__ */ h(l, {
-							title: v.fundingAccountError.title,
-							description: v.fundingAccountError.description,
-							retryLabel: v.fundingAccountError.retry,
-							onRetry: M,
-							className: "ttw:rounded-lg ttw:border ttw:border-border ttw:py-8"
-						}) : /* @__PURE__ */ g(r, {
-							value: k ?? "",
-							onValueChange: A,
-							children: [/* @__PURE__ */ h(o, {
-								id: G,
-								className: "ttw:w-full",
-								children: /* @__PURE__ */ h(s, { placeholder: v.setup.fundingAccountPlaceholder })
-							}), /* @__PURE__ */ h(i, { children: O.map((e) => /* @__PURE__ */ h(a, {
-								value: e.value,
-								children: e.label
-							}, e.value)) })]
+			children: [
+				/* @__PURE__ */ _("section", {
+					className: "ttw:flex ttw:flex-col ttw:gap-4",
+					children: [
+						/* @__PURE__ */ g("h3", {
+							className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+							children: y.setup.sectionTitle
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+							children: [/* @__PURE__ */ g(e, {
+								htmlFor: K,
+								children: y.setup.cardholderLabel
+							}), C ? /* @__PURE__ */ g(l, {
+								title: y.cardholderError.title,
+								description: y.cardholderError.description,
+								retryLabel: y.cardholderError.retry,
+								onRetry: w,
+								className: "ttw:rounded-lg ttw:border ttw:border-border ttw:py-8"
+							}) : /* @__PURE__ */ _(r, {
+								value: x ?? "",
+								onValueChange: S,
+								children: [/* @__PURE__ */ g(o, {
+									id: K,
+									className: "ttw:w-full",
+									children: /* @__PURE__ */ g(s, { placeholder: y.setup.cardholderPlaceholder })
+								}), /* @__PURE__ */ g(i, { children: b.map((e) => /* @__PURE__ */ g(a, {
+									value: e.value,
+									children: e.label
+								}, e.value)) })]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+							children: [/* @__PURE__ */ g(e, {
+								htmlFor: q,
+								children: y.setup.cardFormatLabel
+							}), /* @__PURE__ */ _(r, {
+								value: E ?? "",
+								onValueChange: D,
+								children: [/* @__PURE__ */ g(o, {
+									id: q,
+									className: "ttw:w-full",
+									children: /* @__PURE__ */ g(s, { placeholder: y.setup.cardFormatPlaceholder })
+								}), /* @__PURE__ */ g(i, { children: T.map((e) => /* @__PURE__ */ g(a, {
+									value: e.value,
+									children: e.label
+								}, e.value)) })]
+							})]
+						}),
+						O ? /* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-1.5",
+							children: [/* @__PURE__ */ g(e, {
+								htmlFor: J,
+								children: y.setup.fundingAccountLabel
+							}), M ? /* @__PURE__ */ g(l, {
+								title: y.fundingAccountError.title,
+								description: y.fundingAccountError.description,
+								retryLabel: y.fundingAccountError.retry,
+								onRetry: N,
+								className: "ttw:rounded-lg ttw:border ttw:border-border ttw:py-8"
+							}) : /* @__PURE__ */ _(r, {
+								value: A ?? "",
+								onValueChange: j,
+								children: [/* @__PURE__ */ g(o, {
+									id: J,
+									className: "ttw:w-full",
+									children: /* @__PURE__ */ g(s, { placeholder: y.setup.fundingAccountPlaceholder })
+								}), /* @__PURE__ */ g(i, { children: k.map((e) => /* @__PURE__ */ g(a, {
+									value: e.value,
+									children: e.label
+								}, e.value)) })]
+							})]
+						}) : null
+					]
+				}),
+				P ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(c, {}), /* @__PURE__ */ _("section", {
+					className: "ttw:flex ttw:flex-col ttw:gap-4",
+					children: [/* @__PURE__ */ _("div", {
+						className: "ttw:flex ttw:flex-col ttw:gap-1",
+						children: [/* @__PURE__ */ g("h3", {
+							className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
+							children: y.mailing.sectionTitle
+						}), /* @__PURE__ */ g("p", {
+							className: "ttw:text-sm ttw:text-muted-foreground",
+							children: y.mailing.sectionDescription
 						})]
-					}) : null
-				]
-			}), N ? /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(c, {}), /* @__PURE__ */ g("section", {
-				className: "ttw:flex ttw:flex-col ttw:gap-4",
-				children: [/* @__PURE__ */ g("div", {
-					className: "ttw:flex ttw:flex-col ttw:gap-1",
-					children: [/* @__PURE__ */ h("h3", {
-						className: "ttw:text-base ttw:font-semibold ttw:text-foreground",
-						children: v.mailing.sectionTitle
-					}), /* @__PURE__ */ h("p", {
-						className: "ttw:text-sm ttw:text-muted-foreground",
-						children: v.mailing.sectionDescription
-					})]
-				}), /* @__PURE__ */ g(t, {
-					value: P ?? "",
-					onValueChange: F,
-					className: "ttw:gap-0 ttw:overflow-hidden ttw:rounded-lg ttw:border ttw:border-border",
-					children: [/* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:border-b ttw:border-border ttw:p-4",
-						children: [/* @__PURE__ */ g("label", {
-							htmlFor: K,
-							className: "ttw:flex ttw:cursor-pointer ttw:items-start ttw:gap-3",
-							children: [/* @__PURE__ */ h(n, {
-								value: u.BusinessAddress,
-								id: K,
-								className: "ttw:mt-0.5"
-							}), /* @__PURE__ */ g("span", {
-								className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-0.5",
-								children: [/* @__PURE__ */ h("span", {
-									className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
-									children: v.mailing.businessTitle
-								}), /* @__PURE__ */ h("span", {
-									className: "ttw:text-sm ttw:text-muted-foreground",
-									children: v.mailing.businessDescription
+					}), /* @__PURE__ */ _(t, {
+						value: F ?? "",
+						onValueChange: I,
+						className: "ttw:gap-0 ttw:overflow-hidden ttw:rounded-lg ttw:border ttw:border-border",
+						children: [/* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-3 ttw:border-b ttw:border-border ttw:p-4",
+							children: [/* @__PURE__ */ _("label", {
+								htmlFor: Y,
+								className: "ttw:flex ttw:cursor-pointer ttw:items-start ttw:gap-3",
+								children: [/* @__PURE__ */ g(n, {
+									value: u.BusinessAddress,
+									id: Y,
+									className: "ttw:mt-0.5"
+								}), /* @__PURE__ */ _("span", {
+									className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-0.5",
+									children: [/* @__PURE__ */ g("span", {
+										className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
+										children: y.mailing.businessTitle
+									}), /* @__PURE__ */ g("span", {
+										className: "ttw:text-sm ttw:text-muted-foreground",
+										children: y.mailing.businessDescription
+									})]
 								})]
-							})]
-						}), L ? /* @__PURE__ */ h("div", {
-							className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3 ttw:py-2 ttw:text-sm ttw:text-foreground",
-							children: I
-						}) : null]
-					}), /* @__PURE__ */ g("div", {
-						className: "ttw:flex ttw:flex-col ttw:gap-0 ttw:p-4",
-						children: [/* @__PURE__ */ g("label", {
-							htmlFor: q,
-							className: "ttw:flex ttw:cursor-pointer ttw:items-start ttw:gap-3",
-							children: [/* @__PURE__ */ h(n, {
-								value: u.DifferentAddress,
-								id: q,
-								className: "ttw:mt-0.5"
-							}), /* @__PURE__ */ g("span", {
-								className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-0.5",
-								children: [/* @__PURE__ */ h("span", {
-									className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
-									children: v.mailing.customTitle
-								}), /* @__PURE__ */ h("span", {
-									className: "ttw:text-sm ttw:text-muted-foreground",
-									children: v.mailing.customDescription
+							}), R ? /* @__PURE__ */ g("div", {
+								className: "ttw:rounded-md ttw:border ttw:border-border ttw:bg-background ttw:px-3 ttw:py-2 ttw:text-sm ttw:text-foreground",
+								children: L
+							}) : null]
+						}), /* @__PURE__ */ _("div", {
+							className: "ttw:flex ttw:flex-col ttw:gap-0 ttw:p-4",
+							children: [/* @__PURE__ */ _("label", {
+								htmlFor: X,
+								className: "ttw:flex ttw:cursor-pointer ttw:items-start ttw:gap-3",
+								children: [/* @__PURE__ */ g(n, {
+									value: u.DifferentAddress,
+									id: X,
+									className: "ttw:mt-0.5"
+								}), /* @__PURE__ */ _("span", {
+									className: "ttw:flex ttw:min-w-0 ttw:flex-1 ttw:flex-col ttw:gap-0.5",
+									children: [/* @__PURE__ */ g("span", {
+										className: "ttw:text-sm ttw:font-medium ttw:text-foreground",
+										children: y.mailing.customTitle
+									}), /* @__PURE__ */ g("span", {
+										className: "ttw:text-sm ttw:text-muted-foreground",
+										children: y.mailing.customDescription
+									})]
 								})]
-							})]
-						}), R ? /* @__PURE__ */ h(f, {
-							values: z,
-							stateOptions: V,
-							onChange: B,
-							labels: v.manualAddress
-						}) : null]
+							}), z ? /* @__PURE__ */ g(p, {
+								values: B,
+								stateOptions: H,
+								onChange: V,
+								labels: y.manualAddress
+							}) : null]
+						})]
 					})]
-				})]
-			})] }) : null]
+				})] }) : null,
+				U ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(c, {}), /* @__PURE__ */ g("section", {
+					className: "ttw:flex ttw:flex-col ttw:gap-4",
+					children: /* @__PURE__ */ g(f, {
+						...W,
+						labels: y.cardControls
+					})
+				})] }) : null
+			]
 		})]
 	});
 }
 //#endregion
-export { _ as SetupView };
+export { v as SetupView };

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

@@ -1,5 +1,6 @@
+import { CARD_CONTROLS_LABELS_EN as e, resolveCardControlsLabels as t } from "./CardControls/labels.js";
 //#region ../../libs/tesouro-embedded-components-react/create-card-widget/ui/dist/lib/CreateCardWidget/labels.js
-var e = {
+var n = {
 	header: {
 		title: "Create a new card",
 		closeAriaLabel: "Close"
@@ -31,6 +32,7 @@ var e = {
 		statePlaceholder: "Select state",
 		zipLabel: "ZIP code"
 	},
+	cardControls: e,
 	preparing: {
 		title: "Preparing your card",
 		description: "This will only take a moment"
@@ -56,47 +58,48 @@ var e = {
 		retry: "Try again"
 	}
 };
-function t(t) {
+function r(e) {
 	return {
+		...n,
 		...e,
-		...t,
 		header: {
-			...e.header,
-			...t?.header
+			...n.header,
+			...e?.header
 		},
 		setup: {
-			...e.setup,
-			...t?.setup
+			...n.setup,
+			...e?.setup
 		},
 		mailing: {
-			...e.mailing,
-			...t?.mailing
+			...n.mailing,
+			...e?.mailing
 		},
 		manualAddress: {
-			...e.manualAddress,
-			...t?.manualAddress
+			...n.manualAddress,
+			...e?.manualAddress
 		},
+		cardControls: t(e?.cardControls),
 		preparing: {
-			...e.preparing,
-			...t?.preparing
+			...n.preparing,
+			...e?.preparing
 		},
 		success: {
-			...e.success,
-			...t?.success
+			...n.success,
+			...e?.success
 		},
 		footer: {
-			...e.footer,
-			...t?.footer
+			...n.footer,
+			...e?.footer
 		},
 		cardholderError: {
-			...e.cardholderError,
-			...t?.cardholderError
+			...n.cardholderError,
+			...e?.cardholderError
 		},
 		fundingAccountError: {
-			...e.fundingAccountError,
-			...t?.fundingAccountError
+			...n.fundingAccountError,
+			...e?.fundingAccountError
 		}
 	};
 }
 //#endregion
-export { e as CREATE_CARD_WIDGET_LABELS_EN, t as resolveCreateCardWidgetLabels };
+export { n as CREATE_CARD_WIDGET_LABELS_EN, r as resolveCreateCardWidgetLabels };

package/dist/libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js

@@ -1,5 +1,5 @@
 //#region ../../libs/tesouro-embedded-components-react/shared/feature/dist/lib/analytics/build-info.js
-var e = "@tesouro/embedded-components-react", t = "0.2.339", n = "cd941d8f81e049ca82872bef5f17e958af0b912b", r = Object.freeze({
+var e = "@tesouro/embedded-components-react", t = "0.2.341", n = "25b767b7f2c24f29927de59062497002149a833f", r = Object.freeze({
 	library_name: e,
 	library_version: t,
 	library_sha: n

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tesouro/embedded-components-react",
-  "version": "0.2.339",
+  "version": "0.2.341",
   "license": "Apache-2.0",
   "type": "module",
   "packageDepSync": {