@lessly/ui 2.3.0 → 3.0.0

package/dist/index.d.ts

@@ -3146,10 +3146,10 @@ interface BeneficialOwnerPayload {
 /** The submit payload — snake_case, exactly as the organization-creation endpoint takes it. */
 interface OrganizationOnboardingPayload {
     name: string;
-    legal_name?: string;
-    owner_name?: string;
-    country_of_incorporation?: string;
-    residency_country?: string;
+    legal_name: string;
+    owner_name: string;
+    country_of_incorporation: string;
+    residency_country: string;
     beneficial_owners: BeneficialOwnerPayload[];
     /** Only present when no listed owner holds a controlling share. */
     ownership_confirmed?: boolean;
@@ -3163,10 +3163,6 @@ interface OrganizationOnboardingDefaults {
     beneficial_owners?: BeneficialOwnerPayload[];
 }
 interface OrganizationOnboardingFormProps {
-    /** Makes the country of incorporation mandatory. Mirrors the server-side requirement the
-     *  consumer is configured for. The ownership confirmation is required whenever it is shown,
-     *  independently of this flag. */
-    requireSanctionsFields: boolean;
     onSubmit: (payload: OrganizationOnboardingPayload) => void;
     defaultValues?: OrganizationOnboardingDefaults;
     /** Disables the submit button and swaps its label while the caller's request is in flight. */
@@ -3186,7 +3182,7 @@ interface OrganizationOnboardingFormProps {
  * new organization. Presentational and self-contained — it never calls an API and never
  * navigates; the caller wraps it in its own dialog and handles the outcome of `onSubmit`.
  */
-declare function OrganizationOnboardingForm({ requireSanctionsFields, onSubmit, defaultValues, submitting, serverError, violations, countries, submitLabel, onCancel, className, }: OrganizationOnboardingFormProps): React$1.JSX.Element;
+declare function OrganizationOnboardingForm({ onSubmit, defaultValues, submitting, serverError, violations, countries, submitLabel, onCancel, className, }: OrganizationOnboardingFormProps): React$1.JSX.Element;
 
 /**
  * The width steps a trailing cell may take, as literal classes. A width is picked from this map and

package/dist/index.js

@@ -6781,10 +6781,20 @@ var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
 import { jsx as jsx98, jsxs as jsxs65 } from "react/jsx-runtime";
 var CONTROLLER_SHARE_PCT = 50;
 var MAX_BENEFICIAL_OWNERS = 50;
+var REQUIRED_FIELD_LABELS = {
+  name: "Organization name",
+  legalName: "Legal name",
+  ownerName: "Owner name",
+  countryOfIncorporation: "Country of incorporation",
+  residencyCountry: "Country of residency"
+};
 var OWNERSHIP_CONFIRMATION_MESSAGE = "Please confirm the ownership details by ticking the box";
 function isOwnershipViolation(violation) {
   return /ownership[_\s-]?confirmed/i.test(violation);
 }
+function RequiredMark() {
+  return /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" });
+}
 function parseShare(raw) {
   if (!/^\d{1,3}$/.test(raw.trim())) return null;
   const n = Number(raw);
@@ -6802,7 +6812,6 @@ function initialRows(owners) {
   }));
 }
 function OrganizationOnboardingForm({
-  requireSanctionsFields,
   onSubmit,
   defaultValues,
   submitting,
@@ -6827,6 +6836,7 @@ function OrganizationOnboardingForm({
   );
   const [ownershipConfirmed, setOwnershipConfirmed] = React83.useState(false);
   const [confirmationAttempted, setConfirmationAttempted] = React83.useState(false);
+  const [requiredAttempted, setRequiredAttempted] = React83.useState(false);
   const nextKeyRef = React83.useRef(owners.length);
   const submittingRef = React83.useRef(false);
   const trimmed = name.trim();
@@ -6840,9 +6850,16 @@ function OrganizationOnboardingForm({
     (share) => share !== null && share >= CONTROLLER_SHARE_PCT
   );
   const needsOwnershipConfirmation = !hasController;
-  const missingCountry = requireSanctionsFields && countryOfIncorporation === "";
+  const missingRequired = [
+    [trimmed, REQUIRED_FIELD_LABELS.name],
+    [legalName.trim(), REQUIRED_FIELD_LABELS.legalName],
+    [ownerName.trim(), REQUIRED_FIELD_LABELS.ownerName],
+    [countryOfIncorporation, REQUIRED_FIELD_LABELS.countryOfIncorporation],
+    [residencyCountry, REQUIRED_FIELD_LABELS.residencyCountry]
+  ].filter(([value]) => value === "").map(([, label]) => label);
   const missingConfirmation = needsOwnershipConfirmation && !ownershipConfirmed;
-  const canSubmit = trimmed !== "" && ownersValid && !missingCountry && !submitting;
+  const canSubmit = ownersValid && !submitting;
+  const showRequiredError = requiredAttempted && missingRequired.length > 0;
   const ownershipViolations = needsOwnershipConfirmation ? (violations ?? []).filter(isOwnershipViolation) : [];
   const otherViolations = (violations ?? []).filter(
     (violation) => !ownershipViolations.includes(violation)
@@ -6861,7 +6878,8 @@ function OrganizationOnboardingForm({
   const handleSubmit = (event) => {
     event.preventDefault();
     if (!canSubmit || submittingRef.current) return;
-    if (missingConfirmation) {
+    if (missingRequired.length > 0 || missingConfirmation) {
+      setRequiredAttempted(true);
       setConfirmationAttempted(true);
       return;
     }
@@ -6873,10 +6891,10 @@ function OrganizationOnboardingForm({
     }));
     onSubmit({
       name: trimmed,
-      ...legalName.trim() !== "" ? { legal_name: legalName.trim() } : {},
-      ...ownerName.trim() !== "" ? { owner_name: ownerName.trim() } : {},
-      ...countryOfIncorporation !== "" ? { country_of_incorporation: countryOfIncorporation } : {},
-      ...residencyCountry !== "" ? { residency_country: residencyCountry } : {},
+      legal_name: legalName.trim(),
+      owner_name: ownerName.trim(),
+      country_of_incorporation: countryOfIncorporation,
+      residency_country: residencyCountry,
       beneficial_owners: beneficialOwners,
       // Only meaningful — and only collected — when the list shows no controlling owner.
       ...needsOwnershipConfirmation ? { ownership_confirmed: ownershipConfirmed } : {}
@@ -6898,7 +6916,7 @@ function OrganizationOnboardingForm({
   const countryField = (params) => /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
     /* @__PURE__ */ jsxs65(Label2, { htmlFor: params.id, children: [
       params.label,
-      params.required && /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" })
+      /* @__PURE__ */ jsx98(RequiredMark, {})
     ] }),
     /* @__PURE__ */ jsx98(
       Select,
@@ -6915,7 +6933,10 @@ function OrganizationOnboardingForm({
   ] });
   return /* @__PURE__ */ jsxs65("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
     /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx98(Label2, { htmlFor: "create-org-name", children: "Organization name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-name", children: [
+        REQUIRED_FIELD_LABELS.name,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6928,7 +6949,10 @@ function OrganizationOnboardingForm({
       )
     ] }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx98(Label2, { htmlFor: "create-org-legal-name", children: "Legal name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-legal-name", children: [
+        REQUIRED_FIELD_LABELS.legalName,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6941,7 +6965,10 @@ function OrganizationOnboardingForm({
       )
     ] }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx98(Label2, { htmlFor: "create-org-owner-name", children: "Owner name" }),
+      /* @__PURE__ */ jsxs65(Label2, { htmlFor: "create-org-owner-name", children: [
+        REQUIRED_FIELD_LABELS.ownerName,
+        /* @__PURE__ */ jsx98(RequiredMark, {})
+      ] }),
       /* @__PURE__ */ jsx98(
         Input,
         {
@@ -6955,17 +6982,15 @@ function OrganizationOnboardingForm({
     ] }),
     countryField({
       id: "create-org-country",
-      label: "Country of incorporation",
+      label: REQUIRED_FIELD_LABELS.countryOfIncorporation,
       value: countryOfIncorporation,
-      onChange: setCountryOfIncorporation,
-      required: requireSanctionsFields
+      onChange: setCountryOfIncorporation
     }),
     countryField({
       id: "create-org-residency",
-      label: "Country of residency",
+      label: REQUIRED_FIELD_LABELS.residencyCountry,
       value: residencyCountry,
-      onChange: setResidencyCountry,
-      required: false
+      onChange: setResidencyCountry
     }),
     /* @__PURE__ */ jsxs65("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsxs65("div", { className: "flex items-center justify-between", children: [
@@ -7071,7 +7096,7 @@ function OrganizationOnboardingForm({
             className: "text-xs font-regular leading-snug",
             children: [
               "I confirm the ownership structure above is complete and correct",
-              /* @__PURE__ */ jsx98("span", { className: "text-text-danger", children: " *" })
+              /* @__PURE__ */ jsx98(RequiredMark, {})
             ]
           }
         )
@@ -7086,7 +7111,8 @@ function OrganizationOnboardingForm({
         }
       )
     ] }),
-    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs65(InlineError, { children: [
+    showRequiredError && /* @__PURE__ */ jsx98(InlineError, { "data-testid": "create-org-required-error", children: missingRequired.length === 1 ? `${missingRequired[0]} is required` : `These fields are required: ${missingRequired.join(", ")}` }),
+    (serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs65(InlineError, { "data-testid": "create-org-server-error", children: [
       serverError,
       otherViolations.length > 0 && /* @__PURE__ */ jsx98("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx98("li", { children: violation }, violation)) })
     ] }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",
@@ -50,7 +50,8 @@
     "build-site": "pnpm build && vite build --config site/vite.config.ts",
     "test-site": "node --test site/*.test.mjs",
     "test-site-app": "vitest run --config site/vitest.config.ts",
-    "gen-changelog": "node site/scripts/gen-changelog.mjs"
+    "gen-changelog": "node site/scripts/gen-changelog.mjs",
+    "build:email-logo": "tsx scripts/build-email-logo.mts"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -111,6 +112,9 @@
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
     "@eslint/js": "^9.39.5",
+    "@react-email/components": "^0.5.6",
+    "@react-email/render": "^1.3.2",
+    "@resvg/resvg-js": "^2.6.2",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/blocks": "8.6.18",
     "@storybook/react": "^8.6.18",