@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/chorus/chorus-web/app/components/date-time-picker.tsx

@@ -0,0 +1,199 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add date-time-picker --directory app
+
+import * as React from 'react'
+import { DatePicker as AriaDatePicker, DateInput, DateSegment, Button, Dialog, I18nProvider } from 'react-aria-components'
+import { AnimatedPopover } from './helpers/animated-popover'
+import { CalendarDateTime, parseDateTime } from '@internationalized/date'
+import { tw } from '../utils/tw'
+import { FormFieldComponents } from './helpers/form-field'
+import { Icon } from './icon'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { CustomCalendar } from './helpers/calendar-month-year-picker'
+import { dateFns, dateTimeFns, type Iso } from 'iso-fns'
+
+export type DateTimePickerProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  placeholder?: string
+  warningMessage?: React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isReadonly?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<Iso.DateTime | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (ISO datetime string e.g. 2024-01-15T09:30:00)
+  value?: Iso.DateTime | null
+  defaultValue?: Iso.DateTime | null
+  onChange?: (value: Iso.DateTime | null) => void
+
+  // Date/Time specific
+  minValue?: Iso.DateTime
+  maxValue?: Iso.DateTime
+  use24Hour?: boolean
+  minuteStep?: number
+  locale?: string
+  shape?: 'rectangle' | 'oval'
+}
+
+export function DateTimePicker(props: DateTimePickerProps) {
+  const hiddenInputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const labelId = React.useId()
+
+  // Internal state for CalendarDateTime
+  const [value, _setValue] = React.useState(() => {
+    try {
+      const startingValue = props.value === undefined ? (props.defaultValue ?? null) : props.value
+      return startingValue ? parseDateTime(startingValue) : null
+    } catch {
+      return null
+    }
+  })
+
+  function setValue(dt: CalendarDateTime | null) {
+    _setValue(dt)
+    if (!dt || dateTimeFns.isValid(dt.toString())) {
+      props.onChange && props.onChange(dt ? (dt.toString() as Iso.DateTime) : null)
+    }
+    commitValidation()
+  }
+
+  // Sync controlled value
+  if (props.value !== undefined) {
+    const currentValueAsIso = value && dateTimeFns.isValid(value.toString()) ? value.toString() : null
+    const propValue = props.value && dateTimeFns.isValid(props.value) ? props.value : null
+    if ((!value || dateTimeFns.isValid(value.toString())) && propValue !== currentValueAsIso) {
+      try {
+        _setValue(propValue ? parseDateTime(propValue) : null)
+      } catch {
+        _setValue(null)
+      }
+    }
+  }
+
+  // Convert min/max values
+  const minDateTime = React.useMemo(() => {
+    if (!props.minValue) return undefined
+    try {
+      return parseDateTime(props.minValue)
+    } catch {
+      return undefined
+    }
+  }, [props.minValue])
+
+  const maxDateTime = React.useMemo(() => {
+    if (!props.maxValue) return undefined
+    try {
+      return parseDateTime(props.maxValue)
+    } catch {
+      return undefined
+    }
+  }, [props.maxValue])
+
+  // Form validation
+  const {
+    validationMessage: validationMessageRaw,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value: value && dateTimeFns.isValid(value.toString()) ? (value.toString() as Iso.DateTime) : null,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        // Focus handled by AriaDatePicker
+      }
+    },
+    hiddenInputRef as React.RefObject<HTMLInputElement>
+  )
+
+  const lessThanMin =
+    props.minValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() < props.minValue : false
+  const greaterThanMax =
+    props.maxValue && value && dateTimeFns.isValid(value.toString()) ? value.toString() > props.maxValue : false
+
+  const validationMessage =
+    validationMessageRaw ||
+    (lessThanMin ? `Cannot be before ${dateTimeFns.format(props.minValue!, 'MM/dd/yyyy h:mm a')}` : '') ||
+    (greaterThanMax ? `Cannot be after ${dateTimeFns.format(props.maxValue!, 'MM/dd/yyyy h:mm a')}` : '')
+
+  const isInvalid = props.isInvalid || validationInvalid || lessThanMin || greaterThanMax
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+
+  return (
+    <I18nProvider locale={props.locale ?? 'en'}>
+      <div className="relative">
+        {/* Hidden input for form submission */}
+        <HeadlessForm.HiddenInput ref={hiddenInputRef} name={props.name} value={value?.toString() ?? ''} form={props.form} />
+
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} labelId={labelId} />
+
+        <AriaDatePicker
+          value={value}
+          aria-labelledby={labelId}
+          aria-describedby={helpTextId}
+          onChange={setValue}
+          minValue={minDateTime}
+          maxValue={maxDateTime}
+          isDisabled={props.isDisabled}
+          isReadOnly={props.isReadonly}
+          isInvalid={isInvalid}
+          isRequired={props.isRequired}
+          granularity="minute"
+          hideTimeZone
+          hourCycle={props.use24Hour ? 24 : 12}
+        >
+          <FormFieldComponents.FieldGroup
+            isDisabled={props.isDisabled}
+            isReadonly={props.isReadonly}
+            isInvalid={isInvalid}
+            hasWarning={hasWarning}
+            shape={props.shape}
+            className="flex"
+          >
+            <DateInput className="flex-1 grow flex px-3 py-2 text-sm">
+              {(segment) => (
+                <DateSegment
+                  segment={segment}
+                  className={tw('px-0.5 tabular-nums outline-none rounded-sm', 'focus:bg-primary-500 focus:text-white')}
+                />
+              )}
+            </DateInput>
+            <Button className="flex items-center px-2 py-2">
+              <Icon name="calendar" className="h-4 w-4 text-neutral-400" />
+            </Button>
+          </FormFieldComponents.FieldGroup>
+
+          <AnimatedPopover>
+            <Dialog>
+              <CustomCalendar value={value} onChange={setValue} minValue={minDateTime} maxValue={maxDateTime} />
+            </Dialog>
+          </AnimatedPopover>
+        </AriaDatePicker>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={validationMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </I18nProvider>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/dialog.tsx

@@ -0,0 +1,114 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add dialog --directory app
+
+import React from 'react'
+import type { To, RelativeRoutingType } from 'react-router'
+import { useNavigate } from 'react-router'
+import { Modal, ModalOverlay, Dialog as AriaDialog, Heading } from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { Button } from './button'
+
+export type DialogProps = {
+  children?: React.ReactNode
+  title?: React.ReactNode
+  isOpen?: boolean
+  close?:
+    | ((isOpen: boolean) => void)
+    | { to: To; replace?: boolean; relative?: RelativeRoutingType; reloadDocument?: boolean }
+  size?: 'xs' | 'sm' | 'lg'
+  className?: string
+  isDismissable?: boolean
+  actions?: React.ReactNode
+}
+
+interface DialogContextValue {
+  close(): void
+}
+
+const DialogContext = React.createContext<DialogContextValue>({ close: () => undefined })
+
+function Dialog_({
+  children,
+  title,
+  isOpen = false,
+  close,
+  size = 'sm',
+  className,
+  isDismissable = false,
+  actions
+}: DialogProps) {
+  const navigate = useNavigate()
+
+  const onOpenChange = close
+    ? typeof close === 'function'
+      ? close
+      : (open: boolean) => {
+          if (!open) navigate(close.to, { replace: close.replace, relative: close.relative })
+        }
+    : undefined
+
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={!isDismissable}
+      className={tw(
+        'fixed inset-0 z-[2000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
+        'transition-opacity duration-300 ease-in-out',
+        'data-[entering]:opacity-0',
+        'data-[exiting]:opacity-0'
+      )}
+    >
+      <Modal
+        className={tw(
+          'w-[calc(100%-4rem)] m-auto',
+          size === 'lg' ? 'max-w-[1080px]' : size === 'xs' ? 'max-w-[400px]' : 'max-w-[640px]',
+          'transition-all duration-300 ease-in-out',
+          'data-[entering]:scale-95 data-[entering]:opacity-0',
+          'data-[exiting]:scale-95 data-[exiting]:opacity-0'
+        )}
+      >
+        <AriaDialog
+          className={tw(
+            'w-full max-h-[calc(100vh-6rem)] bg-white shadow-xl ring-1 ring-black/5 outline-none rounded-xl',
+            'flex flex-col overflow-x-hidden overflow-y-auto',
+            className
+          )}
+        >
+          {({ close }) => (
+            <DialogContext.Provider value={{ close }}>
+              <div className="flex items-start justify-between gap-4 pt-6 px-6">
+                {title ? (
+                  <Heading slot="title" className="flex-1 text-lg font-semibold text-neutral-900">
+                    {title}
+                  </Heading>
+                ) : (
+                  <div />
+                )}
+              </div>
+
+              <div className="flex flex-col gap-3 px-6 pb-6">
+                <div className="">{children}</div>
+                <div className="flex gap-2 items-start">{actions}</div>
+              </div>
+            </DialogContext.Provider>
+          )}
+        </AriaDialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+function CancelButton({ children = 'Cancel' }: { children?: React.ReactNode }) {
+  const context = React.useContext(DialogContext)
+  return (
+    <Button color="neutral" onClick={context.close} variant="soft" shape="oval">
+      {children}
+    </Button>
+  )
+}
+
+export const Dialog = Object.assign(Dialog_, {
+  CancelButton
+})

package/skills/maestro-examples/references/chorus/chorus-web/app/components/enum-chip.tsx

@@ -0,0 +1,33 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add enum-chip --directory app
+
+import * as React from 'react'
+import { Chip, type ChipProps } from './chip'
+import { getColor, stringToNumber } from '../utils/enum-colors'
+
+export type EnumChipProps = {
+  options: string[] | Readonly<string[]>
+  value: string
+  enumLabels?: { [key: string]: string }
+} & Omit<ChipProps, 'children'>
+
+export function EnumChip({ options, enumLabels, value, style, ...props }: EnumChipProps) {
+  const colorIndex = Object.values(options).indexOf(value)
+  const colorSeed = colorIndex >= 0 ? colorIndex : stringToNumber(value)
+  const color = getColor(colorSeed)
+
+  const label = value ? (enumLabels ? enumLabels[value] : value) : ''
+
+  return (
+    <Chip
+      {...props}
+      style={{
+        backgroundColor: `${color}19`,
+        color: color,
+        ...style
+      }}
+    >
+      {label}
+    </Chip>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/file-input.tsx

@@ -0,0 +1,248 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add file-input --directory app
+
+import * as React from 'react'
+import { HeadlessForm } from '@maestro-js/form'
+import type { ValidationFunction, ValidationResult } from '@maestro-js/form'
+import { tw } from '../utils/tw'
+import { formatFileSize, validateFileMaxSize, validateFileType } from '../utils/file-input'
+import { FormFieldComponents } from './helpers/form-field'
+import { HeadlessFileInput } from './headless-file-input'
+import { Icon } from './icon'
+
+export type FileInputProps = {
+  // Form identification
+  name?: string
+  form?: string
+
+  // Display elements
+  label?: React.ReactNode
+  cornerHint?: React.ReactNode
+  helpText?: React.ReactNode
+  warningMessage?: React.ReactNode
+  renderPreview?: (props: FileInputPreviewProps) => React.ReactNode
+
+  // Validation and state
+  isRequired?: boolean
+  isDisabled?: boolean
+  isInvalid?: boolean
+  validate?: ValidationFunction<string | File | null>
+  errorMessage?: React.ReactNode | ((v: ValidationResult) => React.ReactNode)
+
+  // Value management (File object or string URL, held in memory until form submit)
+  value?: string | File | null
+  defaultValue?: string | File | null
+  onChange?: (value: string | File | null, hasError: boolean) => void
+
+  // File specific
+  accept?: string
+  maxSize?: number // in bytes
+}
+
+export interface FileInputPreviewProps {
+  file: File | null
+  fileUrl: string | null
+  isDisabled: boolean
+  onChange(value: string | null | File): unknown
+  inputId: string
+  name: string | undefined
+  accept: string | undefined
+  inputRef: React.Ref<HTMLInputElement>
+  formatFileSize: (bytes: number) => string
+  setDragging: (dragging: boolean) => void
+  maxSize?: number
+}
+
+export function FileInput(props: FileInputProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const helpTextId = React.useId()
+  const inputId = React.useId()
+  const [, setDragging] = React.useState(false)
+
+  // Controlled state management
+  const [value, setValue] = HeadlessForm.useControlledState(props.value, props.defaultValue ?? null, (value) => {
+    if (props.onChange) {
+      props.onChange(value, Boolean(validateFileMaxSize(value, props.maxSize) || validateFileType(value, props.accept)))
+    }
+  })
+
+  const exceededMaxSize = React.useMemo(() => validateFileMaxSize(value, props.maxSize), [value, props.maxSize])
+  const formatNotSupported = React.useMemo(() => validateFileType(value, props.accept), [value, props.accept])
+
+  // Form validation
+  const {
+    validationMessage,
+    isInvalid: validationInvalid,
+    commitValidation
+  } = HeadlessForm.useValidation(
+    {
+      validate: props.validate,
+      value,
+      name: props.name,
+      isRequired: props.isRequired,
+      form: props.form,
+      focus() {
+        inputRef.current?.focus()
+      }
+    },
+    inputRef
+  )
+
+  const isInvalid = props.isInvalid || validationInvalid || Boolean(exceededMaxSize || formatNotSupported)
+  const hasWarning = Boolean(props.warningMessage) && !isInvalid
+  const errorMessage = exceededMaxSize || formatNotSupported || validationMessage
+
+  const FilePreview = props.renderPreview ?? DefaultFileInputFilePreview
+
+  return (
+    <HeadlessFileInput
+      value={value}
+      onChange={(v) => {
+        setValue(v)
+        commitValidation()
+      }}
+    >
+      <div className="relative">
+        <FormFieldComponents.LabelRow label={props.label} cornerHint={props.cornerHint} htmlFor={inputId} />
+
+        <HeadlessFileInput.Preview>
+          {(files) => {
+            const file = files.length !== 0 ? files[0]!.file : null
+            const fileUrl = files.length !== 0 ? files[0]!.fileUrl : null
+
+            return (
+              <div
+                className={tw(
+                  'relative',
+                  hasWarning &&
+                    '[&_.file-preview-border]:border-notice-300 [&_.file-preview-border]:hover:border-notice-400 [&_.file-preview-border]:text-notice-900 [&_.file-preview-border]:placeholder-notice-300 [&_.file-preview-border]:focus-within:border-notice-500 [&_.file-preview-border]:focus-within:ring-notice-500',
+                  isInvalid &&
+                    '[&_.file-preview-border]:border-negative-300 [&_.file-preview-border]:hover:border-negative-400 [&_.file-preview-border]:text-negative-900 [&_.file-preview-border]:placeholder-negative-300 [&_.file-preview-border]:focus-within:border-negative-500 [&_.file-preview-border]:focus-within:ring-negative-500'
+                )}
+              >
+                {FilePreview({
+                  file,
+                  fileUrl,
+                  isDisabled: !!props.isDisabled,
+                  onChange: (v) => {
+                    setValue(v)
+                    commitValidation()
+                  },
+                  inputId,
+                  inputRef,
+                  name: props.name,
+                  accept: props.accept,
+                  formatFileSize,
+                  setDragging,
+                  maxSize: props.maxSize
+                })}
+              </div>
+            )
+          }}
+        </HeadlessFileInput.Preview>
+
+        <FormFieldComponents.FormFieldHelpText
+          id={helpTextId}
+          isInvalid={isInvalid}
+          validationMessage={errorMessage}
+          hasWarning={hasWarning}
+          warningMessage={props.warningMessage}
+          helpText={props.helpText}
+        />
+      </div>
+    </HeadlessFileInput>
+  )
+}
+
+function DragOverContent() {
+  return (
+    <div
+      className="absolute inset-0 p-12 rounded flex items-center justify-center"
+      style={{
+        background: `repeating-linear-gradient(45deg, #e5e7eb, #e5e7eb 20px, #d1d5db 20px, #d1d5db 50px)`
+      }}
+    >
+      <div>
+        <Icon name="cloud-arrow-up" className="h-12 w-12 mx-auto text-gray-400" />
+        <span className="mt-2 block text-sm font-semibold text-gray-900">Upload a File</span>
+      </div>
+    </div>
+  )
+}
+
+export function DefaultFileInputFilePreview({
+  file,
+  isDisabled,
+  onChange,
+  inputId,
+  name,
+  accept,
+  formatFileSize,
+  setDragging,
+  maxSize
+}: FileInputPreviewProps) {
+  return (
+    <>
+      <HeadlessFileInput.DropZone
+        accept={accept}
+        name={name}
+        inputId={inputId}
+        onDragChange={setDragging}
+        disabled={isDisabled}
+      >
+        {({ dragOver }) => (
+          <div
+            className={tw(
+              'file-preview-border relative block w-full rounded-md text-center focus:outline-none focus-within:ring-2 focus-within:ring-primary-500 focus-within:ring-offset-2',
+              'border-2 border-neutral-200 hover:border-neutral-300',
+              file ? '' : 'border-dashed',
+              isDisabled && 'border-neutral-100 cursor-not-allowed'
+            )}
+          >
+            {file ? (
+              <div className="relative text-left">
+                <div className="flex items-center justify-between p-3 rounded">
+                  <div className="flex items-center gap-3">
+                    <Icon name="document" className="h-8 w-8 text-neutral-400" />
+                    <div>
+                      <p className="text-sm font-medium text-neutral-900">{file.name || 'File'}</p>
+                      <p className="text-xs text-neutral-500">{formatFileSize(file.size)}</p>
+                    </div>
+                  </div>
+                </div>
+                {dragOver && <DragOverContent />}
+              </div>
+            ) : dragOver ? (
+              <DragOverContent />
+            ) : (
+              <div className="flex items-center justify-between p-3">
+                <div className="flex items-center gap-3">
+                  <Icon name="cloud-arrow-up" className="h-8 w-8 text-neutral-400" />
+                  <div className="text-left">
+                    <p className="text-sm text-neutral-600 font-medium">Click to upload or drag and drop</p>
+                    <div className="text-xs text-neutral-500 mt-0.5">
+                      {accept && <span>{accept}</span>}
+                      {accept && maxSize && <span> • </span>}
+                      {maxSize && <span>Max: {formatFileSize(maxSize)}</span>}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </HeadlessFileInput.DropZone>
+
+      {file && !isDisabled && (
+        <button
+          type="button"
+          aria-label="Remove file"
+          onClick={() => onChange(null)}
+          className="absolute top-1/2 -translate-y-1/2 right-3 p-1 hover:bg-neutral-50 rounded transition-colors"
+        >
+          <Icon name="x-mark" className="h-5 w-5 text-neutral-500" />
+        </button>
+      )}
+    </>
+  )
+}

package/skills/maestro-examples/references/chorus/chorus-web/app/components/form.tsx

@@ -0,0 +1,106 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add form --directory app
+
+import {
+  type FormProps as ReactRouterFormProps,
+  Form as ReactRouterForm,
+  data,
+  type ClientActionFunctionArgs
+} from 'react-router'
+import { HeadlessForm, type StandardSchema, type ParseFormDataOptions, type ParseFormDataResult } from '@maestro-js/form'
+import { serverOnly$ } from 'vite-env-only/macros'
+
+function _Form({ children, ...props }: ReactRouterFormProps) {
+  return (
+    <HeadlessForm as={ReactRouterForm} {...props}>
+      {children}
+    </HeadlessForm>
+  )
+}
+
+export const Form = Object.assign(_Form, {
+  HiddenInput: HeadlessForm.HiddenInput,
+  HiddenFileInput: HeadlessForm.HiddenFileInput,
+  HiddenSelect: HeadlessForm.HiddenSelect,
+  useControlledState: HeadlessForm.useControlledState,
+  useTopLevelFormValidation: HeadlessForm.useTopLevelFormValidation,
+  useReset: HeadlessForm.useReset,
+  clientSafeParse: HeadlessForm.parseFormDataClientSide,
+  serverSafeParse<T>(
+    schema: StandardSchema<T, T>,
+    formData: FormData | Promise<FormData>,
+    options?: {
+      handleFile: ParseFormDataOptions<T>['handleFile']
+    }
+  ): Promise<ParseFormDataResult<T>> {
+    return HeadlessForm.parseFormData(schema, formData, {
+      ...options,
+      jsonSchemaLibraryOptions: {
+        unrepresentable: 'any',
+        override: (ctx) => {
+          const meta = ctx.zodSchema.meta()
+          const custom = meta?.jsonSchema
+
+          if (custom && typeof custom === 'object') {
+            Object.assign(ctx.jsonSchema, custom)
+          }
+        }
+      }
+    })
+  },
+  validationError: serverOnly$(validationError) as typeof validationError,
+  customValidationError: serverOnly$(customValidationError) as typeof customValidationError,
+  composeValidators: HeadlessForm.composeValidators,
+  FormError
+})
+
+async function validationError(
+  {
+    issues,
+    formData,
+    formId
+  }: {
+    issues: { path?: ((string | number | symbol) | { key: string | number | symbol })[] | undefined; message: string }[]
+    formData: FormData
+    formId?: string | null
+  },
+  init: RequestInit = {}
+) {
+  console.error(issues)
+  return data(
+    {
+      success: false as const,
+      formSubmissionError: {
+        issues: issues.map((i) => ({
+          path: i.path?.map((p) => (p && typeof p === 'object' && 'key' in p ? p.key : p))?.join('.') ?? '',
+          message: i.message
+        })),
+        formId: formId ?? formData.get('__formId')
+      }
+    },
+    { status: 422, ...init }
+  )
+}
+
+async function customValidationError(
+  { message, formData }: { message: string; formData: FormData },
+  init?: number | ResponseInit
+) {
+  console.error(message)
+  return data(
+    {
+      success: false as const,
+      formSubmissionError: {
+        issues: [{ path: '', message: message }],
+        formId: formData.get('__formId')
+      }
+    },
+    { status: typeof init === 'number' ? init : 422, ...(typeof init === 'object' ? init : {}) }
+  )
+}
+
+function FormError({ formId, children }: { formId?: string; children(message: string): React.ReactNode }) {
+  const serverErrors = HeadlessForm.useServerErrors(formId)
+  const formErrors = serverErrors.filter((s) => !s.path)
+  return formErrors.length ? <>{children(formErrors[0]!.message)}</> : null
+}