@thorprovider/blocks 4.1.0 → 4.3.0

package/dist/blocks/designs/customer-profile/components/customer-profile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-profile/components/customer-profile.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect, useId, useMemo, useRef, useState } from 'react'\nimport { buttonVariants, Button, cn } from '@thorprovider/blocks'\n\nimport type {\n  CustomerProfileError,\n  CustomerProfileProps,\n  CustomerProfileSnapshot,\n  ProfileDraft,\n  ProfileErrorCode,\n  SectionId,\n  ValidationErrors,\n  VerificationChannel,\n} from '../contracts'\nimport { FULL_PERMISSIONS, resolveCapabilities, resolveSections } from '../config'\nimport { draftFromSnapshot, isDirty } from '../drafts'\nimport { validateSection } from '../validation'\nimport { ProfileHeader } from './profile-header'\nimport { ProfileSection } from './profile-section'\nimport { ProfileEmpty, ProfileErrorPanel, ProfileSkeleton } from './profile-states'\nimport { SectionEdit, SectionRead } from './section-body'\n\ntype LoadState =\n  | { status: 'loading' }\n  | { status: 'ready'; snapshot: CustomerProfileSnapshot }\n  | { status: 'error'; code: ProfileErrorCode }\n\ntype EditingState = {\n  section: SectionId\n  draft: ProfileDraft\n  baseline: ProfileDraft\n  errors: ValidationErrors\n  status: 'editing' | 'saving' | 'failed'\n}\n\nfunction openSection(snapshot: CustomerProfileSnapshot, section: SectionId): EditingState {\n  const draft = draftFromSnapshot(section, snapshot)\n  return { section, draft, baseline: draft, errors: {}, status: 'editing' }\n}\n\nfunction saveSection(\n  source: CustomerProfileProps['dataSource'],\n  section: SectionId,\n  draft: ProfileDraft,\n): Promise<CustomerProfileSnapshot> {\n  switch (section) {\n    case 'personal':\n      return source.updatePersonal(draft)\n    case 'contact':\n      return source.updateContact(draft)\n    case 'preferences':\n      return source.updatePreferences(draft)\n    case 'professional':\n      return source.updateProfessional(draft)\n    case 'custom':\n      return source.updateCustomFields(draft)\n  }\n}\n\n/**\n * `Mi perfil`: identity, contact, preferences, professional context and the\n * store's own fields, read by default and edited one section at a time.\n *\n * It owns no transport, routing or session: everything arrives through the\n * data source and the callbacks, so it mounts alone or inside the account shell.\n */\nexport function CustomerProfile({\n  dataSource,\n  labels,\n  capabilities: capabilityOverrides,\n  permissions: permissionOverrides,\n  defaultEditing,\n  lang,\n  onManageOrganization,\n  onRequestVerification,\n  onRetry,\n}: CustomerProfileProps) {\n  const [reloadToken, setReloadToken] = useState(0)\n  const [load, setLoad] = useState<LoadState>({ status: 'loading' })\n  const [editing, setEditing] = useState<EditingState | null>(null)\n  const [pendingSection, setPendingSection] = useState<SectionId | null>(null)\n  const [savedSection, setSavedSection] = useState<SectionId | null>(null)\n  const [actionFailed, setActionFailed] = useState(false)\n  const openedDefault = useRef(false)\n  const discardRef = useRef<HTMLButtonElement>(null)\n  const discardTitleId = useId()\n  const discardBodyId = useId()\n\n  const { capabilities } = useMemo(\n    () => resolveCapabilities(capabilityOverrides),\n    [capabilityOverrides],\n  )\n  const permissions = useMemo(\n    () => ({ ...FULL_PERMISSIONS, ...permissionOverrides }),\n    [permissionOverrides],\n  )\n\n  useEffect(() => {\n    const controller = new AbortController()\n    let active = true\n    setLoad({ status: 'loading' })\n\n    dataSource.load({ signal: controller.signal }).then(\n      (snapshot) => {\n        if (active) setLoad({ status: 'ready', snapshot })\n      },\n      (error: CustomerProfileError) => {\n        if (!active || error?.name === 'AbortError') return\n        setLoad({ status: 'error', code: error?.code === 'forbidden' ? 'forbidden' : 'unavailable' })\n      },\n    )\n\n    return () => {\n      active = false\n      controller.abort()\n    }\n  }, [dataSource, reloadToken])\n\n  // A host deep link opens one editor once the snapshot is there.\n  useEffect(() => {\n    if (openedDefault.current || !defaultEditing || load.status !== 'ready') return\n    const descriptor = resolveSections(capabilities, permissions, load.snapshot).find(\n      (section) => section.id === defaultEditing,\n    )\n    if (!descriptor?.editable) return\n    openedDefault.current = true\n    setEditing(openSection(load.snapshot, defaultEditing))\n  }, [defaultEditing, load, capabilities, permissions])\n\n  // The discard prompt is inline; focus goes to the safe choice.\n  useEffect(() => {\n    if (pendingSection) discardRef.current?.focus()\n  }, [pendingSection])\n\n  const sections = load.status === 'ready' ? resolveSections(capabilities, permissions, load.snapshot) : []\n  const readOnly = sections.length > 0 && sections.every((section) => !section.editable)\n\n  const beginEdit = (section: SectionId) => {\n    if (load.status !== 'ready') return\n    if (\n      editing &&\n      editing.section !== section &&\n      isDirty(editing.draft, editing.baseline)\n    ) {\n      setPendingSection(section)\n      return\n    }\n    setSavedSection(null)\n    setActionFailed(false)\n    setEditing(openSection(load.snapshot, section))\n  }\n\n  const discardAndOpen = () => {\n    if (!pendingSection || load.status !== 'ready') return\n    const section = pendingSection\n    setPendingSection(null)\n    setSavedSection(null)\n    setActionFailed(false)\n    setEditing(openSection(load.snapshot, section))\n  }\n\n  const cancelEdit = () => setEditing(null)\n\n  const change = (key: string, value: string | boolean) => {\n    setEditing((current) => {\n      if (!current) return current\n      const errors = { ...current.errors }\n      delete errors[key]\n      return {\n        ...current,\n        draft: { ...current.draft, [key]: value },\n        errors,\n        status: current.status === 'failed' ? 'editing' : current.status,\n      }\n    })\n  }\n\n  const save = async () => {\n    if (!editing || load.status !== 'ready') return\n    const errors = validateSection(editing.section, editing.draft, load.snapshot)\n    if (Object.keys(errors).length > 0) {\n      setEditing({ ...editing, errors, status: 'editing' })\n      return\n    }\n\n    const section = editing.section\n    setEditing({ ...editing, errors: {}, status: 'saving' })\n    try {\n      const snapshot = await saveSection(dataSource, section, editing.draft)\n      setLoad({ status: 'ready', snapshot })\n      setEditing(null)\n      setSavedSection(section)\n    } catch {\n      setEditing((current) => (current ? { ...current, status: 'failed' } : current))\n    }\n  }\n\n  const requestVerification = async (channel: VerificationChannel) => {\n    onRequestVerification?.(channel)\n    if (load.status !== 'ready') return\n    setActionFailed(false)\n    try {\n      const snapshot = await dataSource.requestVerification(channel)\n      setLoad({ status: 'ready', snapshot })\n    } catch {\n      setActionFailed(true)\n    }\n  }\n\n  const retry = () => {\n    openedDefault.current = false\n    setEditing(null)\n    setSavedSection(null)\n    setActionFailed(false)\n    setReloadToken((token) => token + 1)\n    onRetry?.()\n  }\n\n  if (load.status === 'loading') {\n    return (\n      <div lang={lang} className=\"text-foreground\">\n        <ProfileSkeleton label={labels.loading} />\n      </div>\n    )\n  }\n\n  if (load.status === 'error') {\n    return (\n      <div lang={lang} className=\"text-foreground\">\n        <ProfileErrorPanel\n          message={load.code === 'forbidden' ? labels.errors.forbidden : labels.errors.load}\n          retryLabel={labels.errors.retry}\n          onRetry={load.code === 'forbidden' ? undefined : retry}\n        />\n      </div>\n    )\n  }\n\n  const snapshot = load.snapshot\n\n  if (sections.length === 0) {\n    return (\n      <div lang={lang} className=\"text-foreground\">\n        <ProfileEmpty title={labels.empty.title} body={labels.empty.body} />\n      </div>\n    )\n  }\n\n  const incomplete =\n    !snapshot.person.phone ||\n    !snapshot.preferences?.language ||\n    !snapshot.preferences?.currency\n\n  return (\n    <div lang={lang} className=\"space-y-4 text-foreground\">\n      <ProfileHeader\n        person={snapshot.person}\n        accountType={snapshot.accountType}\n        capabilities={capabilities}\n        labels={labels}\n        incomplete={incomplete}\n        readOnly={readOnly}\n      />\n\n      {actionFailed ? (\n        <p role=\"alert\" className=\"text-xs text-destructive\">\n          {labels.errors.save}\n        </p>\n      ) : null}\n\n      {pendingSection ? (\n        <div\n          role=\"alertdialog\"\n          aria-labelledby={discardTitleId}\n          aria-describedby={discardBodyId}\n          className=\"rounded-xl border border-warning/40 bg-warning/10 p-4\"\n        >\n          <h2 id={discardTitleId} className=\"text-sm font-semibold\">\n            {labels.discard.title}\n          </h2>\n          <p id={discardBodyId} className=\"mt-1 text-sm text-muted-foreground\">\n            {labels.discard.body}\n          </p>\n          <div className=\"mt-3 flex flex-wrap gap-2\">\n            <button\n              type=\"button\"\n              ref={discardRef}\n              onClick={() => setPendingSection(null)}\n              className={cn(buttonVariants({ size: 'sm' }))}\n            >\n              {labels.discard.cancel}\n            </button>\n            <button\n              type=\"button\"\n              onClick={discardAndOpen}\n              className={cn(buttonVariants({ size: 'sm', variant: 'outline' }))}\n            >\n              {labels.discard.confirm}\n            </button>\n          </div>\n        </div>\n      ) : null}\n\n      <div className=\"space-y-3\">\n        {sections.map((descriptor) => {\n          const section = descriptor.id\n          const isEditing = editing?.section === section\n          const dirty = isEditing && editing ? isDirty(editing.draft, editing.baseline) : false\n          const saving = editing?.status === 'saving'\n\n          return (\n            <ProfileSection\n              key={section}\n              title={labels.sections[section].title}\n              description={labels.sections[section].description}\n              status={\n                savedSection === section ? (\n                  <p role=\"status\" className=\"text-xs text-muted-foreground\">\n                    {labels.saved}\n                  </p>\n                ) : null\n              }\n              action={\n                descriptor.editable && !isEditing ? (\n                  <Button variant=\"outline\" size=\"sm\" onClick={() => beginEdit(section)}>\n                    {labels.edit}\n                  </Button>\n                ) : null\n              }\n            >\n              {isEditing && editing ? (\n                <form\n                  noValidate\n                  onSubmit={(event) => {\n                    event.preventDefault()\n                    void save()\n                  }}\n                  className=\"space-y-3\"\n                >\n                  {Object.keys(editing.errors).length > 0 ? (\n                    <p role=\"alert\" className=\"text-xs text-destructive\">\n                      {labels.validationSummary}\n                    </p>\n                  ) : null}\n\n                  <SectionEdit\n                    section={section}\n                    snapshot={snapshot}\n                    labels={labels}\n                    capabilities={capabilities}\n                    draft={editing.draft}\n                    errors={editing.errors}\n                    onChange={change}\n                    onManageOrganization={onManageOrganization}\n                    onRequestVerification={onRequestVerification}\n                  />\n\n                  <div className=\"flex flex-wrap items-center gap-2 border-t border-border pt-3\">\n                    <Button type=\"submit\" size=\"sm\" disabled={!dirty || saving}>\n                      {saving ? labels.saving : labels.save}\n                    </Button>\n                    <Button\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      onClick={cancelEdit}\n                      disabled={saving}\n                    >\n                      {labels.cancel}\n                    </Button>\n                    {editing.status === 'failed' ? (\n                      <p role=\"alert\" className=\"text-xs text-destructive\">\n                        {labels.errors.save}\n                      </p>\n                    ) : null}\n                  </div>\n                </form>\n              ) : (\n                <SectionRead\n                  section={section}\n                  snapshot={snapshot}\n                  labels={labels}\n                  capabilities={capabilities}\n                  draft={{}}\n                  errors={{}}\n                  onChange={change}\n                  onManageOrganization={onManageOrganization}\n                  onRequestVerification={requestVerification}\n                />\n              )}\n            </ProfileSection>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","names":["snapshot"]}

package/dist/blocks/designs/customer-profile/components/fields.d.ts

@@ -0,0 +1,62 @@
+import type { ReactNode } from 'react';
+import type { CustomerProfileLabels, VerificationStatus } from '../contracts';
+export type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+/** Status is always text plus tone; colour alone never carries the meaning. */
+export declare function Chip({ label, tone, className, }: {
+    label: string;
+    tone?: Tone;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ReadGrid({ children, columns, className, }: {
+    children: ReactNode;
+    columns?: 1 | 2;
+    className?: string;
+}): import("react").JSX.Element;
+export declare function ReadRow({ label, value, className, }: {
+    label: string;
+    value: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+type FieldBase = {
+    label: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    optionalLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+type TextFieldProps = FieldBase & {
+    value: string;
+    onChange: (value: string) => void;
+    type?: 'text' | 'email' | 'tel' | 'date' | 'number';
+    maxLength?: number;
+    inputMode?: 'text' | 'numeric' | 'tel' | 'email';
+};
+export declare function TextField({ value, onChange, type, maxLength, inputMode, label, error, hint, required, optionalLabel, disabled, className, }: TextFieldProps): import("react").JSX.Element;
+type SelectOption = {
+    value: string;
+    label: string;
+};
+export declare function SelectField({ value, options, onChange, label, error, hint, required, optionalLabel, disabled, emptyLabel, className, }: FieldBase & {
+    value: string;
+    options: SelectOption[];
+    onChange: (value: string) => void;
+    emptyLabel?: string;
+}): import("react").JSX.Element;
+export declare function CheckboxField({ label, description, checked, onChange, error, disabled, className, }: {
+    label: string;
+    description?: string;
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    error?: string;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+/** The verification state is always readable text, never colour alone. */
+export declare function VerificationChip({ status, labels, }: {
+    status: VerificationStatus;
+    labels: CustomerProfileLabels;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=fields.d.ts.map

package/dist/blocks/designs/customer-profile/components/fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/customer-profile/components/fields.tsx"],"names":[],"mappings":"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"}

package/dist/blocks/designs/customer-profile/components/fields.js

@@ -0,0 +1,255 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fields_exports = {};
+__export(fields_exports, {
+  CheckboxField: () => CheckboxField,
+  Chip: () => Chip,
+  ReadGrid: () => ReadGrid,
+  ReadRow: () => ReadRow,
+  SelectField: () => SelectField,
+  TextField: () => TextField,
+  VerificationChip: () => VerificationChip
+});
+module.exports = __toCommonJS(fields_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_blocks = require("@thorprovider/blocks");
+const DOT = {
+  neutral: "bg-muted-foreground",
+  info: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive"
+};
+function Chip({
+  label,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: (0, import_blocks.cn)(
+        "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: (0, import_blocks.cn)("size-1.5 shrink-0 rounded-full", DOT[tone]) }),
+        label
+      ]
+    }
+  );
+}
+function ReadGrid({
+  children,
+  columns = 2,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dl", { className: (0, import_blocks.cn)("grid gap-x-4 gap-y-3", columns === 2 && "sm:grid-cols-2", className), children });
+}
+function ReadRow({
+  label,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_blocks.cn)("min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dt", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("dd", { className: "mt-0.5 text-sm break-words text-foreground", children: value })
+  ] });
+}
+function FieldFrame({
+  id,
+  hintId,
+  errorId,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_blocks.cn)("min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: id, className: "text-xs font-medium text-foreground", children: [
+      label,
+      required ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "text-destructive", children: " *" }) : optionalLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-muted-foreground", children: ` (${optionalLabel})` }) : null
+    ] }),
+    children,
+    hint ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: hintId, className: "mt-1 text-xs text-muted-foreground", children: hint }) : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: errorId, className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+const CONTROL = "mt-1 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60";
+function TextField({
+  value,
+  onChange,
+  type = "text",
+  maxLength,
+  inputMode,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  disabled,
+  className
+}) {
+  const id = (0, import_react.useId)();
+  const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldFrame,
+    {
+      id,
+      hintId,
+      errorId,
+      label,
+      error,
+      hint,
+      required,
+      optionalLabel,
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          id,
+          type,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          maxLength,
+          inputMode,
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-required": required ? true : void 0,
+          "aria-describedby": describedBy,
+          className: CONTROL
+        }
+      )
+    }
+  );
+}
+function SelectField({
+  value,
+  options,
+  onChange,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  disabled,
+  emptyLabel,
+  className
+}) {
+  const id = (0, import_react.useId)();
+  const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    FieldFrame,
+    {
+      id,
+      hintId,
+      errorId,
+      label,
+      error,
+      hint,
+      required,
+      optionalLabel,
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "select",
+        {
+          id,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-required": required ? true : void 0,
+          "aria-describedby": describedBy,
+          className: CONTROL,
+          children: [
+            emptyLabel !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: emptyLabel }) : null,
+            options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      )
+    }
+  );
+}
+function CheckboxField({
+  label,
+  description,
+  checked,
+  onChange,
+  error,
+  disabled,
+  className
+}) {
+  const id = (0, import_react.useId)();
+  const errorId = `${id}-error`;
+  const descriptionId = `${id}-description`;
+  const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_blocks.cn)("min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked,
+          onChange: (event) => onChange(event.target.checked),
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          className: "mt-0.5 size-4 shrink-0 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "block text-sm text-foreground", children: label }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: descriptionId, className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: errorId, className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+const VERIFICATION_TONE = {
+  verified: "success",
+  unverified: "warning",
+  pending: "info",
+  failed: "danger"
+};
+function VerificationChip({
+  status,
+  labels
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Chip, { label: labels.verification[status], tone: VERIFICATION_TONE[status] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxField,
+  Chip,
+  ReadGrid,
+  ReadRow,
+  SelectField,
+  TextField,
+  VerificationChip
+});
+//# sourceMappingURL=fields.js.map

package/dist/blocks/designs/customer-profile/components/fields.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-profile/components/fields.tsx"],"sourcesContent":["import { useId } from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '@thorprovider/blocks'\n\nimport type { CustomerProfileLabels, VerificationStatus } from '../contracts'\n\nexport type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'\n\nconst DOT: Record<Tone, string> = {\n  neutral: 'bg-muted-foreground',\n  info: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-destructive',\n}\n\n/** Status is always text plus tone; colour alone never carries the meaning. */\nexport function Chip({\n  label,\n  tone = 'neutral',\n  className,\n}: {\n  label: string\n  tone?: Tone\n  className?: string\n}) {\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground',\n        className,\n      )}\n    >\n      <span aria-hidden=\"true\" className={cn('size-1.5 shrink-0 rounded-full', DOT[tone])} />\n      {label}\n    </span>\n  )\n}\n\nexport function ReadGrid({\n  children,\n  columns = 2,\n  className,\n}: {\n  children: ReactNode\n  columns?: 1 | 2\n  className?: string\n}) {\n  return (\n    <dl className={cn('grid gap-x-4 gap-y-3', columns === 2 && 'sm:grid-cols-2', className)}>\n      {children}\n    </dl>\n  )\n}\n\nexport function ReadRow({\n  label,\n  value,\n  className,\n}: {\n  label: string\n  value: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn('min-w-0', className)}>\n      <dt className=\"text-xs text-muted-foreground\">{label}</dt>\n      <dd className=\"mt-0.5 text-sm break-words text-foreground\">{value}</dd>\n    </div>\n  )\n}\n\ntype FieldBase = {\n  label: string\n  error?: string\n  hint?: string\n  required?: boolean\n  optionalLabel?: string\n  disabled?: boolean\n  className?: string\n}\n\nfunction FieldFrame({\n  id,\n  hintId,\n  errorId,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  children,\n  className,\n}: FieldBase & {\n  id: string\n  hintId: string\n  errorId: string\n  children: ReactNode\n}) {\n  return (\n    <div className={cn('min-w-0', className)}>\n      <label htmlFor={id} className=\"text-xs font-medium text-foreground\">\n        {label}\n        {required ? (\n          <span aria-hidden=\"true\" className=\"text-destructive\">\n            {' *'}\n          </span>\n        ) : optionalLabel ? (\n          <span className=\"text-muted-foreground\">{` (${optionalLabel})`}</span>\n        ) : null}\n      </label>\n      {children}\n      {hint ? (\n        <p id={hintId} className=\"mt-1 text-xs text-muted-foreground\">\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p id={errorId} className=\"mt-1 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nconst CONTROL =\n  'mt-1 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'\n\ntype TextFieldProps = FieldBase & {\n  value: string\n  onChange: (value: string) => void\n  type?: 'text' | 'email' | 'tel' | 'date' | 'number'\n  maxLength?: number\n  inputMode?: 'text' | 'numeric' | 'tel' | 'email'\n}\n\nexport function TextField({\n  value,\n  onChange,\n  type = 'text',\n  maxLength,\n  inputMode,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  disabled,\n  className,\n}: TextFieldProps) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const hintId = `${id}-hint`\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined\n\n  return (\n    <FieldFrame\n      id={id}\n      hintId={hintId}\n      errorId={errorId}\n      label={label}\n      error={error}\n      hint={hint}\n      required={required}\n      optionalLabel={optionalLabel}\n      className={className}\n    >\n      <input\n        id={id}\n        type={type}\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        maxLength={maxLength}\n        inputMode={inputMode}\n        disabled={disabled}\n        aria-invalid={error ? true : undefined}\n        aria-required={required ? true : undefined}\n        aria-describedby={describedBy}\n        className={CONTROL}\n      />\n    </FieldFrame>\n  )\n}\n\ntype SelectOption = { value: string; label: string }\n\nexport function SelectField({\n  value,\n  options,\n  onChange,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  disabled,\n  emptyLabel,\n  className,\n}: FieldBase & {\n  value: string\n  options: SelectOption[]\n  onChange: (value: string) => void\n  emptyLabel?: string\n}) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const hintId = `${id}-hint`\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined\n\n  return (\n    <FieldFrame\n      id={id}\n      hintId={hintId}\n      errorId={errorId}\n      label={label}\n      error={error}\n      hint={hint}\n      required={required}\n      optionalLabel={optionalLabel}\n      className={className}\n    >\n      <select\n        id={id}\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        disabled={disabled}\n        aria-invalid={error ? true : undefined}\n        aria-required={required ? true : undefined}\n        aria-describedby={describedBy}\n        className={CONTROL}\n      >\n        {emptyLabel !== undefined ? <option value=\"\">{emptyLabel}</option> : null}\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FieldFrame>\n  )\n}\n\nexport function CheckboxField({\n  label,\n  description,\n  checked,\n  onChange,\n  error,\n  disabled,\n  className,\n}: {\n  label: string\n  description?: string\n  checked: boolean\n  onChange: (checked: boolean) => void\n  error?: string\n  disabled?: boolean\n  className?: string\n}) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const descriptionId = `${id}-description`\n  const describedBy =\n    [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(' ') ||\n    undefined\n\n  return (\n    <div className={cn('min-w-0', className)}>\n      <div className=\"flex items-start gap-2\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={checked}\n          onChange={(event) => onChange(event.target.checked)}\n          disabled={disabled}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n        <div className=\"min-w-0\">\n          <label htmlFor={id} className=\"block text-sm text-foreground\">\n            {label}\n          </label>\n          {description ? (\n            <p id={descriptionId} className=\"mt-0.5 text-xs text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n        </div>\n      </div>\n      {error ? (\n        <p id={errorId} className=\"mt-1 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nconst VERIFICATION_TONE: Record<VerificationStatus, Tone> = {\n  verified: 'success',\n  unverified: 'warning',\n  pending: 'info',\n  failed: 'danger',\n}\n\n/** The verification state is always readable text, never colour alone. */\nexport function VerificationChip({\n  status,\n  labels,\n}: {\n  status: VerificationStatus\n  labels: CustomerProfileLabels\n}) {\n  return <Chip label={labels.verification[status]} tone={VERIFICATION_TONE[status]} />\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/customer-profile/components/fields.mjs

@@ -0,0 +1,225 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "@thorprovider/blocks";
+const DOT = {
+  neutral: "bg-muted-foreground",
+  info: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-destructive"
+};
+function Chip({
+  label,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("size-1.5 shrink-0 rounded-full", DOT[tone]) }),
+        label
+      ]
+    }
+  );
+}
+function ReadGrid({
+  children,
+  columns = 2,
+  className
+}) {
+  return /* @__PURE__ */ jsx("dl", { className: cn("grid gap-x-4 gap-y-3", columns === 2 && "sm:grid-cols-2", className), children });
+}
+function ReadRow({
+  label,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: "text-xs text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "mt-0.5 text-sm break-words text-foreground", children: value })
+  ] });
+}
+function FieldFrame({
+  id,
+  hintId,
+  errorId,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "text-xs font-medium text-foreground", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive", children: " *" }) : optionalLabel ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: ` (${optionalLabel})` }) : null
+    ] }),
+    children,
+    hint ? /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-xs text-muted-foreground", children: hint }) : null,
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+const CONTROL = "mt-1 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60";
+function TextField({
+  value,
+  onChange,
+  type = "text",
+  maxLength,
+  inputMode,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  disabled,
+  className
+}) {
+  const id = useId();
+  const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      id,
+      hintId,
+      errorId,
+      label,
+      error,
+      hint,
+      required,
+      optionalLabel,
+      className,
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          maxLength,
+          inputMode,
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-required": required ? true : void 0,
+          "aria-describedby": describedBy,
+          className: CONTROL
+        }
+      )
+    }
+  );
+}
+function SelectField({
+  value,
+  options,
+  onChange,
+  label,
+  error,
+  hint,
+  required,
+  optionalLabel,
+  disabled,
+  emptyLabel,
+  className
+}) {
+  const id = useId();
+  const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsx(
+    FieldFrame,
+    {
+      id,
+      hintId,
+      errorId,
+      label,
+      error,
+      hint,
+      required,
+      optionalLabel,
+      className,
+      children: /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id,
+          value,
+          onChange: (event) => onChange(event.target.value),
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-required": required ? true : void 0,
+          "aria-describedby": describedBy,
+          className: CONTROL,
+          children: [
+            emptyLabel !== void 0 ? /* @__PURE__ */ jsx("option", { value: "", children: emptyLabel }) : null,
+            options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      )
+    }
+  );
+}
+function CheckboxField({
+  label,
+  description,
+  checked,
+  onChange,
+  error,
+  disabled,
+  className
+}) {
+  const id = useId();
+  const errorId = `${id}-error`;
+  const descriptionId = `${id}-description`;
+  const describedBy = [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id,
+          type: "checkbox",
+          checked,
+          onChange: (event) => onChange(event.target.checked),
+          disabled,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": describedBy,
+          className: "mt-0.5 size-4 shrink-0 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: id, className: "block text-sm text-foreground", children: label }),
+        description ? /* @__PURE__ */ jsx("p", { id: descriptionId, className: "mt-0.5 text-xs text-muted-foreground", children: description }) : null
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-xs text-destructive", children: error }) : null
+  ] });
+}
+const VERIFICATION_TONE = {
+  verified: "success",
+  unverified: "warning",
+  pending: "info",
+  failed: "danger"
+};
+function VerificationChip({
+  status,
+  labels
+}) {
+  return /* @__PURE__ */ jsx(Chip, { label: labels.verification[status], tone: VERIFICATION_TONE[status] });
+}
+export {
+  CheckboxField,
+  Chip,
+  ReadGrid,
+  ReadRow,
+  SelectField,
+  TextField,
+  VerificationChip
+};
+//# sourceMappingURL=fields.mjs.map

package/dist/blocks/designs/customer-profile/components/fields.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/blocks/designs/customer-profile/components/fields.tsx"],"sourcesContent":["import { useId } from 'react'\nimport type { ReactNode } from 'react'\nimport { cn } from '@thorprovider/blocks'\n\nimport type { CustomerProfileLabels, VerificationStatus } from '../contracts'\n\nexport type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'danger'\n\nconst DOT: Record<Tone, string> = {\n  neutral: 'bg-muted-foreground',\n  info: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-destructive',\n}\n\n/** Status is always text plus tone; colour alone never carries the meaning. */\nexport function Chip({\n  label,\n  tone = 'neutral',\n  className,\n}: {\n  label: string\n  tone?: Tone\n  className?: string\n}) {\n  return (\n    <span\n      className={cn(\n        'inline-flex max-w-full items-center gap-1.5 rounded-full border border-border bg-background px-2 py-0.5 text-xs whitespace-normal text-foreground',\n        className,\n      )}\n    >\n      <span aria-hidden=\"true\" className={cn('size-1.5 shrink-0 rounded-full', DOT[tone])} />\n      {label}\n    </span>\n  )\n}\n\nexport function ReadGrid({\n  children,\n  columns = 2,\n  className,\n}: {\n  children: ReactNode\n  columns?: 1 | 2\n  className?: string\n}) {\n  return (\n    <dl className={cn('grid gap-x-4 gap-y-3', columns === 2 && 'sm:grid-cols-2', className)}>\n      {children}\n    </dl>\n  )\n}\n\nexport function ReadRow({\n  label,\n  value,\n  className,\n}: {\n  label: string\n  value: ReactNode\n  className?: string\n}) {\n  return (\n    <div className={cn('min-w-0', className)}>\n      <dt className=\"text-xs text-muted-foreground\">{label}</dt>\n      <dd className=\"mt-0.5 text-sm break-words text-foreground\">{value}</dd>\n    </div>\n  )\n}\n\ntype FieldBase = {\n  label: string\n  error?: string\n  hint?: string\n  required?: boolean\n  optionalLabel?: string\n  disabled?: boolean\n  className?: string\n}\n\nfunction FieldFrame({\n  id,\n  hintId,\n  errorId,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  children,\n  className,\n}: FieldBase & {\n  id: string\n  hintId: string\n  errorId: string\n  children: ReactNode\n}) {\n  return (\n    <div className={cn('min-w-0', className)}>\n      <label htmlFor={id} className=\"text-xs font-medium text-foreground\">\n        {label}\n        {required ? (\n          <span aria-hidden=\"true\" className=\"text-destructive\">\n            {' *'}\n          </span>\n        ) : optionalLabel ? (\n          <span className=\"text-muted-foreground\">{` (${optionalLabel})`}</span>\n        ) : null}\n      </label>\n      {children}\n      {hint ? (\n        <p id={hintId} className=\"mt-1 text-xs text-muted-foreground\">\n          {hint}\n        </p>\n      ) : null}\n      {error ? (\n        <p id={errorId} className=\"mt-1 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nconst CONTROL =\n  'mt-1 h-9 w-full rounded-md border border-input bg-background px-3 text-sm text-foreground transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60'\n\ntype TextFieldProps = FieldBase & {\n  value: string\n  onChange: (value: string) => void\n  type?: 'text' | 'email' | 'tel' | 'date' | 'number'\n  maxLength?: number\n  inputMode?: 'text' | 'numeric' | 'tel' | 'email'\n}\n\nexport function TextField({\n  value,\n  onChange,\n  type = 'text',\n  maxLength,\n  inputMode,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  disabled,\n  className,\n}: TextFieldProps) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const hintId = `${id}-hint`\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined\n\n  return (\n    <FieldFrame\n      id={id}\n      hintId={hintId}\n      errorId={errorId}\n      label={label}\n      error={error}\n      hint={hint}\n      required={required}\n      optionalLabel={optionalLabel}\n      className={className}\n    >\n      <input\n        id={id}\n        type={type}\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        maxLength={maxLength}\n        inputMode={inputMode}\n        disabled={disabled}\n        aria-invalid={error ? true : undefined}\n        aria-required={required ? true : undefined}\n        aria-describedby={describedBy}\n        className={CONTROL}\n      />\n    </FieldFrame>\n  )\n}\n\ntype SelectOption = { value: string; label: string }\n\nexport function SelectField({\n  value,\n  options,\n  onChange,\n  label,\n  error,\n  hint,\n  required,\n  optionalLabel,\n  disabled,\n  emptyLabel,\n  className,\n}: FieldBase & {\n  value: string\n  options: SelectOption[]\n  onChange: (value: string) => void\n  emptyLabel?: string\n}) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const hintId = `${id}-hint`\n  const describedBy = [hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined\n\n  return (\n    <FieldFrame\n      id={id}\n      hintId={hintId}\n      errorId={errorId}\n      label={label}\n      error={error}\n      hint={hint}\n      required={required}\n      optionalLabel={optionalLabel}\n      className={className}\n    >\n      <select\n        id={id}\n        value={value}\n        onChange={(event) => onChange(event.target.value)}\n        disabled={disabled}\n        aria-invalid={error ? true : undefined}\n        aria-required={required ? true : undefined}\n        aria-describedby={describedBy}\n        className={CONTROL}\n      >\n        {emptyLabel !== undefined ? <option value=\"\">{emptyLabel}</option> : null}\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    </FieldFrame>\n  )\n}\n\nexport function CheckboxField({\n  label,\n  description,\n  checked,\n  onChange,\n  error,\n  disabled,\n  className,\n}: {\n  label: string\n  description?: string\n  checked: boolean\n  onChange: (checked: boolean) => void\n  error?: string\n  disabled?: boolean\n  className?: string\n}) {\n  const id = useId()\n  const errorId = `${id}-error`\n  const descriptionId = `${id}-description`\n  const describedBy =\n    [description ? descriptionId : null, error ? errorId : null].filter(Boolean).join(' ') ||\n    undefined\n\n  return (\n    <div className={cn('min-w-0', className)}>\n      <div className=\"flex items-start gap-2\">\n        <input\n          id={id}\n          type=\"checkbox\"\n          checked={checked}\n          onChange={(event) => onChange(event.target.checked)}\n          disabled={disabled}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={describedBy}\n          className=\"mt-0.5 size-4 shrink-0 rounded border-input accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\"\n        />\n        <div className=\"min-w-0\">\n          <label htmlFor={id} className=\"block text-sm text-foreground\">\n            {label}\n          </label>\n          {description ? (\n            <p id={descriptionId} className=\"mt-0.5 text-xs text-muted-foreground\">\n              {description}\n            </p>\n          ) : null}\n        </div>\n      </div>\n      {error ? (\n        <p id={errorId} className=\"mt-1 text-xs text-destructive\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  )\n}\n\nconst VERIFICATION_TONE: Record<VerificationStatus, Tone> = {\n  verified: 'success',\n  unverified: 'warning',\n  pending: 'info',\n  failed: 'danger',\n}\n\n/** The verification state is always readable text, never colour alone. */\nexport function VerificationChip({\n  status,\n  labels,\n}: {\n  status: VerificationStatus\n  labels: CustomerProfileLabels\n}) {\n  return <Chip label={labels.verification[status]} tone={VERIFICATION_TONE[status]} />\n}\n"],"mappings":"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","names":[]}

package/dist/blocks/designs/customer-profile/components/personal-section.d.ts

@@ -0,0 +1,4 @@
+import type { SectionViewProps } from './types';
+export declare function PersonalRead({ snapshot, labels }: SectionViewProps): import("react").JSX.Element;
+export declare function PersonalEdit({ labels, draft, errors, onChange }: SectionViewProps): import("react").JSX.Element;
+//# sourceMappingURL=personal-section.d.ts.map

package/dist/blocks/designs/customer-profile/components/personal-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"personal-section.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/designs/customer-profile/components/personal-section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAI/C,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,+BAgBlE;AAED,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,+BAmDjF"}