{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "customer-information-section",
  "type": "registry:block",
  "title": "Customer information section",
  "description": "Hosted checkout personal information form from customer-information-section.tsx.",
  "dependencies": ["lucide-react", "react-phone-number-input"],
  "files": [
    {
      "path": "components/lomi-ui/customer-information-section.tsx",
      "target": "components/lomi-ui/customer-information-section.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { ArrowRightLeft, Info } from 'lucide-react';\nimport type { Country } from 'react-phone-number-input';\nimport {\n  CheckoutInput,\n  checkoutCustomerFieldClass,\n} from './lib/checkout-input';\nimport { CheckoutPhoneNumberInput } from './lib/checkout-phone-number-input';\nimport { CheckoutWhatsAppNumberInput } from './lib/checkout-whatsapp-number-input';\nimport './lib/checkout-ui.css';\n\nconst INPUT_BORDER = 'clamp(1px, 0.12vw, 1.3px) solid #d1d5db';\n\nfunction cn(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(' ');\n}\n\nexport interface CustomerInformationSectionProps {\n  fullName?: string;\n  email?: string;\n  phoneNumber?: string;\n  whatsappNumber?: string;\n  isDifferentWhatsApp?: boolean;\n  defaultCountry?: Country;\n  isPhoneValid?: boolean;\n  onFullNameChange?: (value: string) => void;\n  onEmailChange?: (value: string) => void;\n  onPhoneNumberChange?: (value?: string) => void;\n  onWhatsAppNumberChange?: (value?: string) => void;\n  onDifferentWhatsAppChange?: (value: boolean) => void;\n  onCountryChange?: (country: string) => void;\n  onPhoneValidationChange?: (isValid: boolean | undefined) => void;\n  title?: string;\n  fullNamePlaceholder?: string;\n  emailPlaceholder?: string;\n  nameTooltip?: string;\n  whatsappDifferentLabel?: string;\n  switchToPhoneTitle?: string;\n  phoneValidationError?: string;\n  className?: string;\n}\n\nexport function CustomerInformationSection({\n  fullName = '',\n  email = '',\n  phoneNumber = '',\n  whatsappNumber = '',\n  isDifferentWhatsApp = false,\n  defaultCountry = 'CI',\n  isPhoneValid = true,\n  onFullNameChange,\n  onEmailChange,\n  onPhoneNumberChange,\n  onWhatsAppNumberChange,\n  onDifferentWhatsAppChange,\n  onCountryChange,\n  onPhoneValidationChange,\n  title = 'Personal information',\n  fullNamePlaceholder = 'Full name',\n  emailPlaceholder = 'Email address',\n  nameTooltip = 'In case we need to contact you about your order.',\n  whatsappDifferentLabel = 'My WhatsApp number is different',\n  switchToPhoneTitle = 'Switch to using phone number',\n  phoneValidationError = 'Please enter a valid phone number for the selected country.',\n  className,\n}: CustomerInformationSectionProps) {\n  const [showNameTooltip, setShowNameTooltip] = React.useState(false);\n\n  const handlePhoneNumberChange = (value: string | undefined) => {\n    onPhoneNumberChange?.(value);\n    if (!isDifferentWhatsApp) {\n      onWhatsAppNumberChange?.(value);\n    }\n  };\n\n  return (\n    <div\n      className={cn(\n        'lomi-checkout-ui customer-information-section space-y-2.5 translate-y-1.5',\n        className,\n      )}\n    >\n      <label className=\"block select-none text-sm font-normal text-gray-700\">\n        {title}\n      </label>\n      <div className=\"customer-information-stack rounded-sm shadow-sm shadow-black/4\">\n        <div className=\"relative\">\n          <CheckoutInput\n            type=\"text\"\n            name=\"fullName\"\n            value={fullName}\n            onChange={(event) => onFullNameChange?.(event.target.value)}\n            placeholder={fullNamePlaceholder}\n            autoComplete=\"name\"\n            required\n            className={cn(\n              checkoutCustomerFieldClass,\n              'input-checkout rounded-tl rounded-tr',\n            )}\n          />\n          <div className=\"absolute inset-y-0 right-0 flex items-center pr-3\">\n            <div className=\"relative hidden md:block\">\n              <button\n                type=\"button\"\n                className=\"outline-none\"\n                aria-label=\"Name field information\"\n                onMouseEnter={() => setShowNameTooltip(true)}\n                onMouseLeave={() => setShowNameTooltip(false)}\n                onFocus={() => setShowNameTooltip(true)}\n                onBlur={() => setShowNameTooltip(false)}\n              >\n                <Info className=\"h-3.5 w-3.5 cursor-pointer text-gray-400 transition-colors hover:text-gray-600\" />\n              </button>\n              {showNameTooltip ? (\n                <div className=\"absolute right-0 top-full z-10 mt-2 max-w-xs rounded-sm border border-gray-200 bg-white p-2 text-xs text-gray-700 shadow-sm\">\n                  {nameTooltip}\n                </div>\n              ) : null}\n            </div>\n            <span className=\"pointer-events-none text-red-500 md:hidden\">\n              *\n            </span>\n          </div>\n        </div>\n\n        <div className=\"-mt-px flex\">\n          <div className=\"relative w-full\">\n            <CheckoutInput\n              id=\"email\"\n              type=\"email\"\n              name=\"email\"\n              value={email}\n              onChange={(event) => onEmailChange?.(event.target.value)}\n              placeholder={emailPlaceholder}\n              autoComplete=\"email\"\n              required\n              className={cn(\n                checkoutCustomerFieldClass,\n                'rounded-none shadow-sm',\n              )}\n            />\n            <span className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-red-500\">\n              *\n            </span>\n          </div>\n        </div>\n\n        <div className=\"-mt-px flex\">\n          <div className=\"box-border w-full rounded-none\">\n            <CheckoutPhoneNumberInput\n              value={phoneNumber}\n              onChange={handlePhoneNumberChange}\n              onCountryChange={onCountryChange}\n              onValidationChange={onPhoneValidationChange}\n              defaultCountry={defaultCountry}\n            />\n          </div>\n        </div>\n\n        {!isDifferentWhatsApp ? (\n          <div className=\"-mt-px flex\">\n            <div\n              className=\"box-border w-full rounded-none bg-white\"\n              style={{ border: INPUT_BORDER }}\n            >\n              <div\n                onMouseDown={() => onDifferentWhatsAppChange?.(true)}\n                className=\"group flex h-10 cursor-pointer items-center justify-between px-3 transition-all duration-200\"\n              >\n                <span className=\"text-xs text-gray-500\">\n                  {whatsappDifferentLabel}\n                </span>\n                <span className=\"flex items-center text-sm text-gray-600 transition-colors duration-200 group-hover:text-gray-900\">\n                  <svg\n                    xmlns=\"http://www.w3.org/2000/svg\"\n                    className=\"ml-1 h-3.5 w-3.5\"\n                    fill=\"none\"\n                    viewBox=\"0 0 24 24\"\n                    stroke=\"currentColor\"\n                    aria-hidden=\"true\"\n                  >\n                    <path\n                      strokeLinecap=\"round\"\n                      strokeLinejoin=\"round\"\n                      strokeWidth={2}\n                      d=\"M9 5l7 7-7 7\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            </div>\n          </div>\n        ) : (\n          <div className=\"-mt-px flex bg-transparent\">\n            <div className=\"relative w-full rounded-none bg-transparent\">\n              <CheckoutWhatsAppNumberInput\n                value={whatsappNumber}\n                onChange={(value) => onWhatsAppNumberChange?.(value)}\n                defaultCountry={defaultCountry}\n              />\n              <div\n                className=\"absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer rounded-[1px] bg-blue-100 p-1.5 transition-colors hover:bg-blue-200\"\n                onMouseDown={() => onDifferentWhatsAppChange?.(false)}\n                title={switchToPhoneTitle}\n              >\n                <ArrowRightLeft className=\"h-3.5 w-3.5 text-blue-600\" />\n              </div>\n            </div>\n          </div>\n        )}\n\n        {isPhoneValid === false &&\n        phoneNumber &&\n        phoneNumber.trim().length >= 7 ? (\n          <p className=\"mt-2 text-xs text-red-600\">{phoneValidationError}</p>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-input.tsx",
      "target": "components/lomi-ui/lib/checkout-input.tsx",
      "type": "registry:component",
      "content": "import * as React from 'react';\n\nfunction cn(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(' ');\n}\n\n/** Mirrors apps/checkout/src/components/ui/input.tsx base field styles. */\nexport const CheckoutInput = React.forwardRef<\n  HTMLInputElement,\n  React.InputHTMLAttributes<HTMLInputElement>\n>(({ className, type, ...props }, ref) => (\n  <input\n    type={type}\n    ref={ref}\n    className={cn(\n      'flex h-10 w-full rounded-r-sm bg-transparent px-3 py-2 text-sm text-gray-900 shadow-sm outline-none transition-all duration-200 placeholder:text-gray-500',\n      className,\n    )}\n    {...props}\n  />\n));\nCheckoutInput.displayName = 'CheckoutInput';\n\n/** Stacked customer form text fields (name, email). */\nexport const checkoutCustomerFieldClass =\n  'border border-gray-300 bg-white placeholder:text-sm focus:bg-white dark:border-gray-300 dark:bg-white dark:text-gray-900 dark:focus:bg-white dark:placeholder:text-gray-500';\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-phone-flag.tsx",
      "target": "components/lomi-ui/lib/checkout-phone-flag.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Phone } from 'lucide-react';\nimport type { FlagProps } from 'react-phone-number-input';\nimport flags from 'react-phone-number-input/flags';\n\nexport function CheckoutPhoneFlag({\n  country,\n  countryName,\n  fallback,\n}: FlagProps & { fallback?: React.ReactNode }) {\n  const mounted = React.useSyncExternalStore(\n    () => () => {},\n    () => true,\n    () => false,\n  );\n  const Flag = flags[country];\n\n  return (\n    <span\n      className=\"checkout-phone-flag inline-flex h-5 w-5 shrink-0 overflow-hidden rounded-sm\"\n      suppressHydrationWarning\n    >\n      {mounted && Flag ? (\n        <Flag title={countryName} />\n      ) : (\n        (fallback ?? <Phone size={16} aria-hidden=\"true\" role=\"presentation\" />)\n      )}\n    </span>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-country-select.tsx",
      "target": "components/lomi-ui/lib/checkout-country-select.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport * as RPNInput from 'react-phone-number-input';\nimport type { FlagProps } from 'react-phone-number-input';\nimport { CheckoutPhoneFlag } from './checkout-phone-flag';\n\nconst INPUT_BORDER = 'clamp(1px, 0.12vw, 1.3px) solid #d1d5db';\n\nexport type CheckoutCountrySelectProps = {\n  disabled?: boolean;\n  value: RPNInput.Country;\n  onChange: (value: RPNInput.Country) => void;\n  options: { label: string; value: RPNInput.Country }[];\n  flagComponent?: React.ComponentType<FlagProps>;\n};\n\n/** Mirrors apps/checkout phone-number-input CountrySelect. */\nexport function CheckoutCountrySelect({\n  disabled,\n  value,\n  onChange,\n  options,\n  flagComponent: FlagComponent = CheckoutPhoneFlag,\n}: CheckoutCountrySelectProps) {\n  return (\n    <div\n      className=\"relative inline-flex items-center self-stretch bg-transparent h-10 pe-2 ps-3 text-foreground transition-colors border-0 shadow-none rounded-l-sm\"\n      style={{ borderRight: INPUT_BORDER }}\n    >\n      <div className=\"inline-flex items-center gap-1\" aria-hidden=\"true\">\n        <FlagComponent country={value} countryName={value} aria-hidden=\"true\" />\n        <span className=\"text-muted-foreground/80\">\n          <ChevronDown size={16} strokeWidth={2} aria-hidden=\"true\" />\n        </span>\n      </div>\n      <select\n        disabled={disabled}\n        value={value || ''}\n        onChange={(event) => onChange(event.target.value as RPNInput.Country)}\n        className=\"absolute inset-0 text-sm opacity-0\"\n        aria-label=\"Select country\"\n        data-lpignore=\"true\"\n      >\n        <option value=\"\" className=\"text-gray-400\">\n          Select country\n        </option>\n        {options\n          .filter((option) => option.value)\n          .map((option) => (\n            <option key={option.value || 'empty'} value={option.value}>\n              {option.label}{' '}\n              {option.value &&\n                `+${RPNInput.getCountryCallingCode(option.value)}`}\n            </option>\n          ))}\n      </select>\n    </div>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-phone-number-input.tsx",
      "target": "components/lomi-ui/lib/checkout-phone-number-input.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as RPNInput from 'react-phone-number-input';\nimport { isValidPhoneNumber } from 'react-phone-number-input';\nimport { CheckoutInput } from './checkout-input';\nimport { CheckoutCountrySelect } from './checkout-country-select';\nimport { CheckoutPhoneFlag } from './checkout-phone-flag';\n\nexport interface CheckoutPhoneNumberInputProps {\n  value: string;\n  onChange: (value: string | undefined) => void;\n  onCountryChange?: (country: string) => void;\n  onValidationChange?: (isValid: boolean | undefined) => void;\n  defaultCountry?: RPNInput.Country;\n}\n\nexport function CheckoutPhoneNumberInput({\n  value,\n  onChange,\n  onCountryChange,\n  onValidationChange,\n  defaultCountry,\n}: CheckoutPhoneNumberInputProps) {\n  const debounceRef = React.useRef<ReturnType<typeof setTimeout>>(undefined);\n  const hasTouchedRef = React.useRef(false);\n\n  const markTouched = React.useCallback(() => {\n    hasTouchedRef.current = true;\n  }, []);\n\n  const validatePhoneNumber = React.useCallback(\n    (phoneValue: string) => {\n      if (phoneValue && phoneValue.trim().length >= 7) {\n        onValidationChange?.(isValidPhoneNumber(phoneValue));\n      } else if (phoneValue && phoneValue.trim().length > 0) {\n        onValidationChange?.(undefined);\n      } else {\n        onValidationChange?.(undefined);\n      }\n    },\n    [onValidationChange],\n  );\n\n  React.useEffect(() => {\n    if (debounceRef.current) {\n      clearTimeout(debounceRef.current);\n    }\n\n    debounceRef.current = setTimeout(() => {\n      const hasMeaningfulValue = Boolean(value && value.trim().length >= 7);\n      if (hasTouchedRef.current || hasMeaningfulValue) {\n        validatePhoneNumber(value);\n      }\n    }, 500);\n\n    return () => {\n      if (debounceRef.current) {\n        clearTimeout(debounceRef.current);\n      }\n    };\n  }, [value, validatePhoneNumber]);\n\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"relative shadow-sm shadow-black/[.04]\">\n        <div className=\"flex w-full rounded-none bg-transparent checkout-phone-shell\">\n          <RPNInput.default\n            className=\"flex w-full\"\n            international\n            defaultCountry={defaultCountry}\n            flagComponent={CheckoutPhoneFlag}\n            countrySelectComponent={CheckoutCountrySelect}\n            inputComponent={PhoneInput}\n            placeholder=\"Phone number\"\n            value={value}\n            onChange={(next) => {\n              markTouched();\n              onChange(next);\n            }}\n            onCountryChange={(countryCode) => {\n              if (countryCode) {\n                markTouched();\n                onCountryChange?.(countryCode);\n              }\n            }}\n            onBlur={() => {\n              markTouched();\n              validatePhoneNumber(value);\n            }}\n            countryCallingCodeEditable\n          />\n        </div>\n        <span className=\"pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-red-500\">\n          *\n        </span>\n      </div>\n    </div>\n  );\n}\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst PhoneInput = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ ...props }, ref) => (\n    <CheckoutInput\n      className=\"rounded-none border-0 bg-transparent focus-visible:ring-0\"\n      ref={ref}\n      {...props}\n      autoComplete=\"tel\"\n      data-lpignore=\"true\"\n      data-form-type=\"other\"\n    />\n  ),\n);\nPhoneInput.displayName = 'PhoneInput';\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-whatsapp-number-input.tsx",
      "target": "components/lomi-ui/lib/checkout-whatsapp-number-input.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport * as RPNInput from 'react-phone-number-input';\nimport type { FlagProps } from 'react-phone-number-input';\nimport flags from 'react-phone-number-input/flags';\nimport { CheckoutInput } from './checkout-input';\nimport { CheckoutCountrySelect } from './checkout-country-select';\nimport { CheckoutPhoneFlag } from './checkout-phone-flag';\n\nfunction WhatsAppIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\" />\n    </svg>\n  );\n}\n\nfunction WhatsAppFlag(props: FlagProps) {\n  const Flag = flags[props.country];\n  if (Flag) {\n    return <CheckoutPhoneFlag {...props} />;\n  }\n  return (\n    <CheckoutPhoneFlag\n      {...props}\n      fallback={<WhatsAppIcon className=\"h-5 w-5 text-green-500\" />}\n    />\n  );\n}\n\nfunction WhatsAppCountrySelect(\n  props: React.ComponentProps<typeof CheckoutCountrySelect>,\n) {\n  return <CheckoutCountrySelect {...props} flagComponent={WhatsAppFlag} />;\n}\n\nexport interface CheckoutWhatsAppNumberInputProps {\n  value: string;\n  onChange: (value: string | undefined) => void;\n  defaultCountry?: RPNInput.Country;\n}\n\nexport function CheckoutWhatsAppNumberInput({\n  value,\n  onChange,\n  defaultCountry,\n}: CheckoutWhatsAppNumberInputProps) {\n  return (\n    <div className=\"whatsapp-input-container\">\n      <div className=\"relative shadow-sm shadow-black/[.04]\">\n        <div className=\"checkout-phone-shell flex w-full rounded-none bg-transparent\">\n          <RPNInput.default\n            className=\"flex w-full\"\n            international\n            defaultCountry={defaultCountry}\n            flagComponent={WhatsAppFlag}\n            countrySelectComponent={WhatsAppCountrySelect}\n            inputComponent={PhoneInput}\n            placeholder=\"WhatsApp number\"\n            value={value}\n            onChange={onChange}\n            smartCaret={false}\n            countryCallingCodeEditable={false}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nconst PhoneInput = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ ...props }, ref) => (\n    <CheckoutInput\n      className=\"rounded-none border-0 bg-transparent focus-visible:ring-0\"\n      ref={ref}\n      {...props}\n      autoComplete=\"tel\"\n      data-lpignore=\"true\"\n      data-form-type=\"other\"\n    />\n  ),\n);\nPhoneInput.displayName = 'PhoneInput';\n"
    },
    {
      "path": "components/lomi-ui/lib/checkout-ui.css",
      "target": "components/lomi-ui/lib/checkout-ui.css",
      "type": "registry:component",
      "content": "/* Hosted checkout parity — mirrors apps/checkout hosted/checkout.css */\n\n.lomi-checkout-ui {\n  color-scheme: light;\n  --border: oklch(0.929 0.013 255.508);\n  --card: oklch(1 0 0);\n  --input-border: clamp(1px, 0.12vw, 1.3px) solid #d1d5db;\n}\n\n.lomi-checkout-ui .border.bg-card {\n  background-color: white !important;\n}\n\n/* Override docs .prose img rules (aspect-ratio 16/9, object-fit cover) */\n.lomi-checkout-ui img {\n  margin: 0 !important;\n  max-width: none !important;\n  aspect-ratio: auto !important;\n  box-shadow: none !important;\n}\n\n.lomi-checkout-ui .border.bg-card img {\n  display: block;\n  object-fit: contain;\n}\n\n/*\n * Stacked customer form — mirrors checkout form [&_*]:!rounded-none\n * then checkout.css re-applies corners on first/last rows only.\n */\n.lomi-checkout-ui .customer-information-stack * {\n  border-radius: 0 !important;\n}\n\n.lomi-checkout-ui input[name='fullName'].rounded-tl.rounded-tr,\n.lomi-checkout-ui input.rounded-tl.rounded-tr {\n  border-top-left-radius: 0.25rem !important;\n  border-top-right-radius: 0.25rem !important;\n  border-bottom-left-radius: 0 !important;\n  border-bottom-right-radius: 0 !important;\n}\n\n.lomi-checkout-ui\n  .customer-information-stack\n  .w-full.rounded-none.box-border.bg-white {\n  border-bottom-left-radius: 0.25rem !important;\n  border-bottom-right-radius: 0.25rem !important;\n}\n\n.lomi-checkout-ui\n  .customer-information-stack\n  .whatsapp-input-container\n  .flex.w-full.rounded-none {\n  border-bottom-left-radius: 0.25rem !important;\n  border-bottom-right-radius: 0.25rem !important;\n}\n\n/* Text/email fields — full border; exclude phone tel inputs */\n.lomi-checkout-ui .customer-information-section input:not(.PhoneInputInput),\n.lomi-checkout-ui .customer-information-section select {\n  border-color: #d1d5db !important;\n  border-style: solid !important;\n  border-width: clamp(1px, 0.12vw, 1.3px) !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.lomi-checkout-ui\n  .customer-information-section\n  input:not(.PhoneInputInput):focus,\n.lomi-checkout-ui\n  .customer-information-section\n  input:not(.PhoneInputInput):focus-visible,\n.lomi-checkout-ui\n  .customer-information-section\n  input:not(.PhoneInputInput):hover:focus,\n.lomi-checkout-ui\n  .customer-information-section\n  input:not(.PhoneInputInput):active:focus,\n.lomi-checkout-ui .customer-information-section select:focus,\n.lomi-checkout-ui .customer-information-section select:focus-visible {\n  border-color: #d1d5db !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n/* Phone / WhatsApp rows — full border like email, stacked with -mt-px */\n.lomi-checkout-ui .customer-information-section .checkout-phone-shell {\n  border: var(--input-border) !important;\n  border-radius: 0 !important;\n  background-color: white !important;\n}\n\n.lomi-checkout-ui .whatsapp-input-container * {\n  box-sizing: border-box;\n}\n\n.lomi-checkout-ui .customer-information-stack .checkout-phone-flag,\n.lomi-checkout-ui .customer-information-stack .checkout-phone-flag svg {\n  border-radius: 0.25rem !important;\n}\n\n/* Phone input — mirrors checkout.css PhoneInput overrides */\n.lomi-checkout-ui .PhoneInput,\n.lomi-checkout-ui .PhoneInput *,\n.lomi-checkout-ui .PhoneInputCountry,\n.lomi-checkout-ui .PhoneInputInput {\n  outline: none !important;\n  box-shadow: none !important;\n  border: none !important;\n  background-color: transparent !important;\n}\n\n.lomi-checkout-ui .PhoneInput .relative.inline-flex.items-center.self-stretch,\n.lomi-checkout-ui .relative.inline-flex.items-center.self-stretch {\n  border-right: var(--input-border) !important;\n}\n\n.lomi-checkout-ui .PhoneInputInput,\n.lomi-checkout-ui .whatsapp-input-container .PhoneInputInput {\n  font-size: 0.875rem !important;\n  line-height: 1.25rem !important;\n  padding: 0.5rem 0.75rem !important;\n}\n\n.lomi-checkout-ui .customer-information-section .PhoneInputInput {\n  padding-right: 1.5rem !important;\n}\n\n.lomi-checkout-ui .whatsapp-input-container input {\n  padding-right: 2.5rem !important;\n}\n\n.lomi-checkout-ui .PhoneInputInput::placeholder,\n.lomi-checkout-ui .whatsapp-input-container .PhoneInputInput::placeholder {\n  font-size: 0.875rem !important;\n  line-height: 1.25rem !important;\n  color: #9ca3af !important;\n}\n\n/* Country flag — w-5 (20px) with rounded-sm */\n.lomi-checkout-ui .checkout-phone-flag {\n  width: 1.25rem !important;\n  height: 1.25rem !important;\n  min-width: 1.25rem;\n  min-height: 1.25rem;\n  overflow: hidden;\n  border-radius: 0.25rem !important;\n}\n\n.lomi-checkout-ui .checkout-phone-flag svg {\n  width: 1.25rem !important;\n  height: 1.25rem !important;\n  display: block;\n  border-radius: 0.25rem !important;\n}\n\n.lomi-checkout-ui .PhoneInput select[aria-label='Select country'],\n.lomi-checkout-ui\n  .whatsapp-input-container\n  select[aria-label='Select country'] {\n  border: none !important;\n}\n\n/* SPI alias inputs outside customer stack */\n.lomi-checkout-ui input[type='text']:not(.PhoneInputInput),\n.lomi-checkout-ui input[type='email']:not(.PhoneInputInput) {\n  border-color: #d1d5db !important;\n  border-style: solid !important;\n  border-width: clamp(1px, 0.12vw, 1.3px) !important;\n  outline: none !important;\n  box-shadow: none !important;\n}\n"
    },
    {
      "path": "components/lomi-ui/demo/customer-information-section-demo.tsx",
      "target": "components/lomi-ui/demo/customer-information-section-demo.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { LomiUiPreview } from '@/components/preview/lomi-ui-preview';\nimport { CustomerInformationSection } from '@/components/lomi-ui/customer-information-section';\n\nexport function CustomerInformationSectionDemo() {\n  const [fullName, setFullName] = React.useState('');\n  const [email, setEmail] = React.useState('');\n  const [phoneNumber, setPhoneNumber] = React.useState('');\n  const [whatsappNumber, setWhatsAppNumber] = React.useState('');\n  const [isDifferentWhatsApp, setIsDifferentWhatsApp] = React.useState(false);\n\n  return (\n    <LomiUiPreview variant=\"checkout\" innerClassName=\"flex justify-center\">\n      <CustomerInformationSection\n        className=\"w-full max-w-sm\"\n        defaultCountry=\"CI\"\n        fullName={fullName}\n        email={email}\n        phoneNumber={phoneNumber}\n        whatsappNumber={whatsappNumber}\n        isDifferentWhatsApp={isDifferentWhatsApp}\n        onFullNameChange={setFullName}\n        onEmailChange={setEmail}\n        onPhoneNumberChange={(value) => setPhoneNumber(value ?? '')}\n        onWhatsAppNumberChange={(value) => setWhatsAppNumber(value ?? '')}\n        onDifferentWhatsAppChange={setIsDifferentWhatsApp}\n      />\n    </LomiUiPreview>\n  );\n}\n"
    }
  ]
}