npm - @planetaexo/design-system - Versions diffs - 0.4.5 → 0.4.6 - Mend

@planetaexo/design-system 0.4.5 → 0.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -4530,7 +4530,7 @@ function RegistrationForm({
     {
       onSubmit: handleSubmit,
       noValidate: true,
-      className: cn("flex flex-col gap-10", className),
+      className: cn("rounded-xl border border-border bg-card overflow-hidden", className),
       children: [
         heroImage ? (
           /* ── Hero image (full-width) with centered white logo ─────────── */
@@ -4571,147 +4571,149 @@ function RegistrationForm({
             }
           ) })
         ),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
-        ] }),
-        hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
-          adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
-          ] }),
-          dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
-          ] }),
-          (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
-          ] }),
-          booking && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
+        /* @__PURE__ */ jsxs("div", { className: "px-6 sm:px-8 pt-8 pb-8 flex flex-col gap-10", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground font-ui", children: subtitle != null ? subtitle : L.formSubtitle })
           ] }),
-          traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
-            /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
-          var _a2;
-          return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
-            /* @__PURE__ */ jsx(
-              FieldRenderer,
-              {
-                field,
-                value: current[field.id],
-                onChange: (v) => setField(field.id, v),
-                defaultPhoneCountry,
-                labels: L
-              }
-            ),
-            ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
-          ] }, field.id);
-        }) }),
-        termsEnabled && terms && /* @__PURE__ */ jsxs(FormSection2, { title: L.termsSectionTitle, children: [
-          /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
-          acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked: termsAccepted,
-                required: true,
-                onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
-                className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { children: L.termsAccept })
-          ] }) : /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "radiogroup",
-              "aria-label": L.termsSectionTitle,
-              className: "flex flex-wrap items-center gap-x-6 gap-y-3",
-              children: [
-                /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "radio",
-                      name: "registration-terms-accept",
-                      checked: termsAccepted,
-                      required: true,
-                      onChange: () => setField(TERMS_ACCEPT_KEY, true),
-                      className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
-                    }
-                  ),
-                  L.termsAccept
-                ] }),
-                /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
-                  /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      type: "radio",
-                      name: "registration-terms-accept",
-                      checked: current[TERMS_ACCEPT_KEY] === false,
-                      onChange: () => setField(TERMS_ACCEPT_KEY, false),
-                      className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
-                    }
-                  ),
-                  L.termsDecline
-                ] })
-              ]
-            }
-          )
-        ] }),
-        error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
-        /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            disabled: loading,
-            className: cn(
-              "inline-flex items-center justify-center gap-2 rounded-full px-10 py-3.5",
-              "bg-primary text-primary-foreground font-ui font-semibold text-sm",
-              "transition-colors hover:bg-primary/90 focus-visible:outline-none",
-              "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-              "disabled:pointer-events-none disabled:opacity-60"
-            ),
-            children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs(
-                "svg",
+          hasTripInfo && /* @__PURE__ */ jsx(FormSection2, { title: L.tripInfoSectionTitle, children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-x-6 gap-y-3 text-sm font-ui sm:grid-cols-[max-content_1fr]", children: [
+            adventure && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.adventureLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: adventure.name })
+            ] }),
+            dateRange && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: (adventure == null ? void 0 : adventure.startDate) && (adventure == null ? void 0 : adventure.endDate) ? "Dates" : "Date" }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: dateRange })
+            ] }),
+            (adventure == null ? void 0 : adventure.partnerName) && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.partnerLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground", children: adventure.partnerName })
+            ] }),
+            booking && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.bookingLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-mono tabular-nums", children: booking.id })
+            ] }),
+            traveller && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: L.travellerLabel }),
+              /* @__PURE__ */ jsx("dd", { className: "text-foreground font-medium", children: traveller.fullName })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx(FormSection2, { title: L.detailsSectionTitle, children: sortedFields.map((field) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                FieldRenderer,
                 {
-                  className: "h-4 w-4 animate-spin",
-                  viewBox: "0 0 24 24",
-                  fill: "none",
-                  children: [
+                  field,
+                  value: current[field.id],
+                  onChange: (v) => setField(field.id, v),
+                  defaultPhoneCountry,
+                  labels: L
+                }
+              ),
+              ((_a2 = field.helpText) == null ? void 0 : _a2.trim()) && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground font-ui leading-relaxed", children: field.helpText.trim() })
+            ] }, field.id);
+          }) }),
+          termsEnabled && terms && /* @__PURE__ */ jsxs(FormSection2, { title: L.termsSectionTitle, children: [
+            /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto rounded-lg border border-border bg-muted/30 p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-sm leading-relaxed text-foreground font-ui", children: terms.markdown }) }),
+            acceptControl === "checkbox" ? /* @__PURE__ */ jsxs("label", { className: "flex cursor-pointer items-start gap-2.5 font-ui text-sm text-foreground", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: termsAccepted,
+                  required: true,
+                  onChange: (e) => setField(TERMS_ACCEPT_KEY, e.target.checked),
+                  className: "mt-0.5 h-4 w-4 shrink-0 accent-primary cursor-pointer"
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { children: L.termsAccept })
+            ] }) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "radiogroup",
+                "aria-label": L.termsSectionTitle,
+                className: "flex flex-wrap items-center gap-x-6 gap-y-3",
+                children: [
+                  /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-foreground", children: [
                     /* @__PURE__ */ jsx(
-                      "circle",
+                      "input",
                       {
-                        className: "opacity-25",
-                        cx: "12",
-                        cy: "12",
-                        r: "10",
-                        stroke: "currentColor",
-                        strokeWidth: "4"
+                        type: "radio",
+                        name: "registration-terms-accept",
+                        checked: termsAccepted,
+                        required: true,
+                        onChange: () => setField(TERMS_ACCEPT_KEY, true),
+                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
                     ),
+                    L.termsAccept
+                  ] }),
+                  /* @__PURE__ */ jsxs("label", { className: "flex min-h-9 cursor-pointer items-center gap-2.5 font-ui text-sm text-muted-foreground", children: [
                     /* @__PURE__ */ jsx(
-                      "path",
+                      "input",
                       {
-                        className: "opacity-75",
-                        fill: "currentColor",
-                        d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+                        type: "radio",
+                        name: "registration-terms-accept",
+                        checked: current[TERMS_ACCEPT_KEY] === false,
+                        onChange: () => setField(TERMS_ACCEPT_KEY, false),
+                        className: "h-4 w-4 shrink-0 accent-primary cursor-pointer"
                       }
-                    )
-                  ]
-                }
+                    ),
+                    L.termsDecline
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive font-ui", children: error }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-2", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: loading,
+              className: cn(
+                "inline-flex items-center justify-center gap-2 rounded-full px-10 py-3.5",
+                "bg-primary text-primary-foreground font-ui font-semibold text-sm",
+                "transition-colors hover:bg-primary/90 focus-visible:outline-none",
+                "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                "disabled:pointer-events-none disabled:opacity-60"
               ),
-              L.submitting
-            ] }) : L.submitButton
-          }
-        ) })
+              children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs(
+                  "svg",
+                  {
+                    className: "h-4 w-4 animate-spin",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "circle",
+                        {
+                          className: "opacity-25",
+                          cx: "12",
+                          cy: "12",
+                          r: "10",
+                          stroke: "currentColor",
+                          strokeWidth: "4"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "path",
+                        {
+                          className: "opacity-75",
+                          fill: "currentColor",
+                          d: "M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8h4z"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                L.submitting
+              ] }) : L.submitButton
+            }
+          ) })
+        ] })
       ]
     }
   );
@@ -4779,7 +4781,7 @@ function RegistrationSuccessCard({
     var _a, _b;
     return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
   }).filter((f) => Object.prototype.hasOwnProperty.call(answers, f.id));
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-10", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-border bg-card p-6 sm:p-8 flex flex-col gap-10", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 text-center", children: [
       /* @__PURE__ */ jsx("div", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CircleCheckIcon, { size: 28 }) }),
       /* @__PURE__ */ jsx("h2", { className: "text-2xl font-black uppercase tracking-wide text-foreground font-heading leading-tight", children: title }),