@proef/common-ui 2.6.4 → 2.6.6

package/dist/esm/v1/primitives/forms/SelectInput/SelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n  value: string\r\n  label: string\r\n  /** Texto pequeno por baixo do rótulo, na lista. */\r\n  description?: string\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n  /** Texto da caixa de pesquisa. */\r\n  search: string\r\n  /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n  searchIn: string\r\n  noResults: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n  search: 'Search…',\r\n  searchIn: 'Search in {label}',\r\n  noResults: 'No results',\r\n}\r\n\r\nexport interface SelectInputProps {\r\n  /** A opção escolhida (controlado). `''` = nenhuma. */\r\n  value?: string\r\n  defaultValue?: string\r\n  /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n  options?: readonly (string | SelectOption)[]\r\n  /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n  children?: React.ReactNode\r\n  /** Recebe o valor escolhido. */\r\n  onValueChange?: (value: string) => void\r\n  /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n  /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n  placeholder?: string\r\n  /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n  placeholderOption?: boolean\r\n  /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n  emptyOption?: string\r\n  /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n  searchable?: boolean\r\n  disabled?: boolean\r\n  required?: boolean\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  id?: string\r\n  /** Nome no formulário (vai num campo escondido). */\r\n  name?: string\r\n  'aria-label'?: string\r\n  'aria-labelledby'?: string\r\n  /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n  variant?: 'field' | 'pill'\r\n  /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n  pillClassName?: string\r\n  /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n  tall?: boolean\r\n  labels?: Partial<SelectInputLabels>\r\n  /** Classes da caixa à volta (ex: a largura). */\r\n  className?: string\r\n  /**\r\n   * Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.\r\n   * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.\r\n   */\r\n  multiple?: boolean\r\n  /** As escolhidas, com `multiple` (controlado). */\r\n  values?: string[]\r\n  defaultValues?: string[]\r\n  /** Recebe as escolhidas, com `multiple`, pela ordem das opções. */\r\n  onValuesChange?: (values: string[]) => void\r\n  /** Com `multiple`: o texto do botão quando estão todas escolhidas (ex: \"Todos os tipos\"). */\r\n  allLabel?: string\r\n}\r\n\r\nconst Check = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"M20 6 9 17l-5-5\" />\r\n  </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n  const out: SelectOption[] = []\r\n  React.Children.forEach(children, (child) => {\r\n    if (!React.isValidElement(child)) return\r\n    const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n    if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n    if (child.type !== 'option') return\r\n    const text = React.Children.toArray(props.children).join('')\r\n    out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n  })\r\n  return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n  {\r\n    value: controlled,\r\n    defaultValue = '',\r\n    options,\r\n    children,\r\n    onValueChange,\r\n    onChange,\r\n    placeholder,\r\n    placeholderOption = true,\r\n    emptyOption,\r\n    searchable,\r\n    disabled = false,\r\n    required,\r\n    invalid,\r\n    id,\r\n    name,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    variant = 'field',\r\n    pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n    tall = false,\r\n    labels,\r\n    className = '',\r\n    multiple = false,\r\n    values: controlledValues,\r\n    defaultValues = [],\r\n    onValuesChange,\r\n    allLabel,\r\n  },\r\n  ref,\r\n) {\r\n  const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n  const field = useField()\r\n  const p = useFloatingPanel('left')\r\n  // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n  // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n  const dialogContainer = useDialogContainer()\r\n  useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n  const [own, setOwn] = useState(defaultValue)\r\n  const value = controlled ?? own\r\n  const [ownValues, setOwnValues] = useState(defaultValues)\r\n  const picked = controlledValues ?? ownValues\r\n\r\n  const list = useMemo<SelectOption[]>(() => {\r\n    const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n    // Na escolha múltipla não há opção vazia: desfazer é desmarcar.\r\n    if (multiple) return base\r\n    const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n    return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n  }, [options, children, emptyOption, placeholder, placeholderOption, multiple])\r\n\r\n  const [query, setQuery] = useState('')\r\n  const withSearch = searchable ?? list.length > 10\r\n  const visible = useMemo(() => {\r\n    const q = query.trim().toLowerCase()\r\n    return q ? list.filter((o) => o.label.toLowerCase().includes(q) || o.description?.toLowerCase().includes(q)) : list\r\n  }, [list, query])\r\n  const [active, setActive] = useState(0)\r\n  const searchRef = useRef<HTMLInputElement>(null)\r\n  const chosen = list.find((o) => o.value === value)\r\n\r\n  // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n  useEffect(() => {\r\n    if (!p.open) return\r\n    setQuery('')\r\n    setActive(Math.max(0, list.findIndex((o) => (multiple ? picked.includes(o.value) : o.value === value))))\r\n    if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n  }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // O item ativo fica sempre à vista ao navegar com o teclado.\r\n  useEffect(() => {\r\n    if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n  }, [active, p.open, p.panelRef])\r\n\r\n  const choose = (o: SelectOption) => {\r\n    if (o.disabled) return\r\n    if (multiple) {\r\n      // Marca ou desmarca, sem fechar; a ordem é a das opções.\r\n      const set = new Set(picked)\r\n      if (set.has(o.value)) set.delete(o.value)\r\n      else set.add(o.value)\r\n      const next = list.filter((x) => set.has(x.value)).map((x) => x.value)\r\n      if (controlledValues === undefined) setOwnValues(next)\r\n      onValuesChange?.(next)\r\n      return\r\n    }\r\n    p.close()\r\n    p.triggerRef.current?.focus()\r\n    if (o.value === value) return\r\n    if (controlled === undefined) setOwn(o.value)\r\n    onValueChange?.(o.value)\r\n    if (onChange) {\r\n      const target = { value: o.value, name } as HTMLSelectElement\r\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n    }\r\n  }\r\n\r\n  const keys = (e: React.KeyboardEvent) => {\r\n    if (!p.open) {\r\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n        e.preventDefault()\r\n        p.setOpen(true)\r\n      }\r\n      return\r\n    }\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.close()\r\n      p.triggerRef.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.min(visible.length - 1, i + 1))\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.max(0, i - 1))\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault()\r\n      setActive(0)\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault()\r\n      setActive(visible.length - 1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const o = visible[active]\r\n      if (o) choose(o)\r\n    } else if (e.key === 'Tab') {\r\n      p.close()\r\n    } else if (!withSearch && e.key.length === 1) {\r\n      // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n      const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n      if (i >= 0) setActive(i)\r\n    }\r\n  }\r\n\r\n  const pill = variant === 'pill'\r\n  const pickedOptions = list.filter((o) => picked.includes(o.value))\r\n  const multiText =\r\n    allLabel && list.length > 0 && pickedOptions.length === list.length ? allLabel : pickedOptions.map((o) => o.label).join(', ')\r\n  const showsPlaceholder = multiple\r\n    ? pickedOptions.length === 0\r\n    : !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n  const buttonText = multiple\r\n    ? showsPlaceholder ? (placeholder ?? '') : multiText\r\n    : showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label\r\n\r\n  return (\r\n    <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n      <button\r\n        ref={p.triggerRef}\r\n        id={id ?? field.id}\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={p.open}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-invalid={invalid || undefined}\r\n        aria-required={(required ?? field.required) || undefined}\r\n        onClick={(e) => {\r\n          // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n          e.stopPropagation()\r\n          p.setOpen((o) => !o)\r\n        }}\r\n        className={\r\n          pill\r\n            ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n            : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n        }\r\n      >\r\n        <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n          {buttonText}\r\n        </span>\r\n        <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n      </button>\r\n      {name && <input type=\"hidden\" name={name} value={multiple ? picked.join(',') : value} />}\r\n      {p.open &&\r\n        createPortal(\r\n          <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n            {withSearch && (\r\n              <div className=\"px-2 pt-0.5 pb-1\">\r\n                <input\r\n                  ref={searchRef}\r\n                  type=\"search\"\r\n                  value={query}\r\n                  onChange={(e) => {\r\n                    setQuery(e.target.value)\r\n                    setActive(0)\r\n                  }}\r\n                  placeholder={L.search}\r\n                  aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n                  className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n                />\r\n              </div>\r\n            )}\r\n            <ul role=\"listbox\" aria-label={ariaLabel} aria-multiselectable={multiple || undefined}>\r\n              {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n              {visible.map((o, i) => {\r\n                const selected = multiple ? picked.includes(o.value) : o.value === value\r\n                return (\r\n                  <li\r\n                    key={o.value || '__empty'}\r\n                    role=\"option\"\r\n                    aria-selected={selected}\r\n                    aria-disabled={o.disabled || undefined}\r\n                    data-index={i}\r\n                    onMouseEnter={() => setActive(i)}\r\n                    onClick={() => choose(o)}\r\n                    className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n                  >\r\n                    <span className=\"min-w-0 flex-1\">\r\n                      <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n                      {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n                    </span>\r\n                    <span className=\"w-4 shrink-0\">{selected && <Check />}</span>\r\n                  </li>\r\n                )\r\n              })}\r\n            </ul>\r\n          </div>,\r\n          dialogContainer ?? document.body,\r\n        )}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}
+{"version":3,"file":"SelectInput.js","sources":["../../../../../../src/v1/primitives/forms/SelectInput/SelectInput.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport { ChevronDownIcon } from '../../../foundations/icons/icons'\r\nimport { fieldBoxClasses, useField } from '../field'\r\nimport Checkbox from '../Checkbox/Checkbox'\r\nimport { PANEL_CLASS, itemClass, useFloatingPanel } from '../../../capabilities/overlay/useFloatingPanel'\r\nimport { useDialogContainer } from '../../../components/overlays/Dialog/Dialog'\r\n\r\nexport interface SelectOption {\r\n  value: string\r\n  label: string\r\n  /** Texto pequeno por baixo do rótulo, na lista. */\r\n  description?: string\r\n  /** Um número à direita da linha, na lista (ex: quantos registos esta opção daria, como nos filtros facetados). */\r\n  count?: number\r\n  disabled?: boolean\r\n}\r\n\r\nexport interface SelectInputLabels {\r\n  /** Texto da caixa de pesquisa. */\r\n  search: string\r\n  /** Nome da caixa de pesquisa para leitores de ecrã; \"{label}\" é o nome do campo. */\r\n  searchIn: string\r\n  noResults: string\r\n  /** Com `selectionActions`: escolhe todas as opções (com pesquisa, só as que ela mostra). */\r\n  selectAll: string\r\n  /** Com `selectionActions` e uma pesquisa escrita: escolhe só as opções do resultado. */\r\n  selectResults: string\r\n  /** Com `selectionActions`: desfaz a escolha. */\r\n  clear: string\r\n  /**\r\n   * Com `multiple`: o texto do botão com mais de uma opção escolhida, em vez dos rótulos separados por vírgula.\r\n   * \"{n}\" é o número de escolhidas (ex: \"{n} selecionados\"). Sem ele, mostram-se os rótulos.\r\n   */\r\n  selectedCount?: string\r\n}\r\n\r\nexport const DEFAULT_SELECT_LABELS: SelectInputLabels = {\r\n  search: 'Search…',\r\n  searchIn: 'Search in {label}',\r\n  noResults: 'No results',\r\n  selectAll: 'Select all',\r\n  selectResults: 'Select all (results)',\r\n  clear: 'Clear',\r\n}\r\n\r\n/** Sem acentos nem maiúsculas: \"Guimarães\" e \"GUIMARAES\" são o mesmo para a pesquisa. */\r\nconst plain = (text: string): string => text.normalize('NFD').replace(/\\p{M}/gu, '').toLowerCase()\r\n\r\nexport interface SelectInputProps {\r\n  /** A opção escolhida (controlado). `''` = nenhuma. */\r\n  value?: string\r\n  defaultValue?: string\r\n  /** As opções: texto simples (valor = rótulo) ou `{ value, label, description }`. */\r\n  options?: readonly (string | SelectOption)[]\r\n  /** Em alternativa a `options`: `<option>` como num `<select>` (compatível com o uso antigo). */\r\n  children?: React.ReactNode\r\n  /** Recebe o valor escolhido. */\r\n  onValueChange?: (value: string) => void\r\n  /** Como no `<select>`: `e.target.value` é o valor escolhido. */\r\n  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void\r\n  /** Texto do botão sem nada escolhido; com `placeholderOption`, também a primeira opção (vazia). */\r\n  placeholder?: string\r\n  /** O `placeholder` é também uma opção (vazia) na lista. Por omissão sim, como no `<select>`. */\r\n  placeholderOption?: boolean\r\n  /** Primeira opção vazia para desfazer a escolha (ex: \"Todas\"). */\r\n  emptyOption?: string\r\n  /** Caixa de pesquisa no topo da lista. Por omissão, só com mais de 10 opções. */\r\n  searchable?: boolean\r\n  disabled?: boolean\r\n  required?: boolean\r\n  /** Marca o campo a vermelho (ex: obrigatório por escolher ao submeter). */\r\n  invalid?: boolean\r\n  id?: string\r\n  /** Nome no formulário (vai num campo escondido). */\r\n  name?: string\r\n  'aria-label'?: string\r\n  'aria-labelledby'?: string\r\n  /** `field` (por omissão): campo. `pill`: etiqueta arredondada (ex: o estado numa linha de tabela). A lista é a mesma. */\r\n  variant?: 'field' | 'pill'\r\n  /** Cores da etiqueta (`pill`), normalmente conforme o valor escolhido; pode trazer contorno (ex: `border border-dashed`). */\r\n  pillClassName?: string\r\n  /** 38px em vez da altura dos controlos (para alinhar com campos de formulários mais altos). */\r\n  tall?: boolean\r\n  labels?: Partial<SelectInputLabels>\r\n  /** Classes da caixa à volta (ex: a largura). */\r\n  className?: string\r\n  /**\r\n   * Escolha múltipla: cada opção leva ✓ e a lista fica aberta a marcar e desmarcar.\r\n   * Usa `values` / `onValuesChange` em vez de `value` / `onValueChange`.\r\n   */\r\n  multiple?: boolean\r\n  /** As escolhidas, com `multiple` (controlado). */\r\n  values?: string[]\r\n  defaultValues?: string[]\r\n  /** Recebe as escolhidas, com `multiple`, pela ordem das opções. */\r\n  onValuesChange?: (values: string[]) => void\r\n  /** Com `multiple`: o texto do botão quando estão todas escolhidas (ex: \"Todos os tipos\"). */\r\n  allLabel?: string\r\n  /**\r\n   * Com `multiple`: no topo da lista, \"Selecionar todos\" (ou \"…(resultado)\", com uma pesquisa escrita — só as\r\n   * opções que ela mostra) e \"Limpar\". Para listas longas, como as dos filtros.\r\n   */\r\n  selectionActions?: boolean\r\n  /**\r\n   * Com `multiple`: cada opção leva a caixa de marcar da biblioteca (`Checkbox`) à esquerda, em vez do visto à\r\n   * direita — o aspeto das listas de filtros. Marcar continua a ser clicar na linha.\r\n   */\r\n  checkboxes?: boolean\r\n}\r\n\r\nconst noop = () => {}\r\n\r\nconst Check = () => (\r\n  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4 shrink-0 text-proef-blue dark:text-sky-300\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2.5} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\r\n    <path d=\"M20 6 9 17l-5-5\" />\r\n  </svg>\r\n)\r\n\r\n/** As `<option>` dos filhos como opções (aceita também `<optgroup>`, achatado). */\r\nfunction optionsFromChildren(children: React.ReactNode): SelectOption[] {\r\n  const out: SelectOption[] = []\r\n  React.Children.forEach(children, (child) => {\r\n    if (!React.isValidElement(child)) return\r\n    const props = child.props as { value?: unknown; children?: React.ReactNode; disabled?: boolean }\r\n    if (child.type === 'optgroup') return out.push(...optionsFromChildren(props.children))\r\n    if (child.type !== 'option') return\r\n    const text = React.Children.toArray(props.children).join('')\r\n    out.push({ value: props.value !== undefined ? String(props.value) : text, label: text, disabled: props.disabled })\r\n  })\r\n  return out\r\n}\r\n\r\n/**\r\n * Lista de escolha: um campo que abre uma lista desenhada pela biblioteca (não a do sistema, que não segue o\r\n * tema nem o aspeto dos portais). A opção escolhida tem ✓; com muitas opções há pesquisa.\r\n *\r\n * Teclado: ↑/↓, Home/End, Enter escolhe, Esc fecha; sem pesquisa, uma letra salta para a opção.\r\n *\r\n * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica ligado à etiqueta\r\n * automaticamente. Clicar não chega a uma linha clicável por baixo (ex: numa tabela).\r\n *\r\n * Usa-se como um `<select>`: `<option>` como filhos e `onChange` com `e.target.value`; `placeholder`\r\n * acrescenta uma primeira opção vazia.\r\n */\r\nconst SelectInput = forwardRef<HTMLButtonElement, SelectInputProps>(function SelectInput(\r\n  {\r\n    value: controlled,\r\n    defaultValue = '',\r\n    options,\r\n    children,\r\n    onValueChange,\r\n    onChange,\r\n    placeholder,\r\n    placeholderOption = true,\r\n    emptyOption,\r\n    searchable,\r\n    disabled = false,\r\n    required,\r\n    invalid,\r\n    id,\r\n    name,\r\n    'aria-label': ariaLabel,\r\n    'aria-labelledby': ariaLabelledBy,\r\n    variant = 'field',\r\n    pillClassName = 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200',\r\n    tall = false,\r\n    labels,\r\n    className = '',\r\n    multiple = false,\r\n    values: controlledValues,\r\n    defaultValues = [],\r\n    onValuesChange,\r\n    allLabel,\r\n    selectionActions = false,\r\n    checkboxes = false,\r\n  },\r\n  ref,\r\n) {\r\n  const L = { ...DEFAULT_SELECT_LABELS, ...labels }\r\n  const field = useField()\r\n  const p = useFloatingPanel('left')\r\n  // Dentro de um Dialog a lista abre na janela: no body ficava por baixo dela (z-200)\r\n  // e o resto da página está inert — a lista abria mas não se via nem se clicava.\r\n  const dialogContainer = useDialogContainer()\r\n  useImperativeHandle(ref, () => p.triggerRef.current as HTMLButtonElement)\r\n\r\n  const [own, setOwn] = useState(defaultValue)\r\n  const value = controlled ?? own\r\n  const [ownValues, setOwnValues] = useState(defaultValues)\r\n  const picked = controlledValues ?? ownValues\r\n\r\n  const list = useMemo<SelectOption[]>(() => {\r\n    const base = options ? options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o)) : optionsFromChildren(children)\r\n    // Na escolha múltipla não há opção vazia: desfazer é desmarcar.\r\n    if (multiple) return base\r\n    const empty = emptyOption ?? (placeholder !== undefined && placeholderOption ? placeholder : undefined)\r\n    return empty !== undefined && !base.some((o) => o.value === '') ? [{ value: '', label: empty }, ...base] : base\r\n  }, [options, children, emptyOption, placeholder, placeholderOption, multiple])\r\n\r\n  const [query, setQuery] = useState('')\r\n  const withSearch = searchable ?? list.length > 10\r\n  const visible = useMemo(() => {\r\n    const q = plain(query.trim())\r\n    return q ? list.filter((o) => plain(o.label).includes(q) || (o.description ? plain(o.description).includes(q) : false)) : list\r\n  }, [list, query])\r\n  const [active, setActive] = useState(0)\r\n  const searchRef = useRef<HTMLInputElement>(null)\r\n  const chosen = list.find((o) => o.value === value)\r\n\r\n  // Ao abrir: limpa a pesquisa e põe o teclado na opção escolhida.\r\n  useEffect(() => {\r\n    if (!p.open) return\r\n    setQuery('')\r\n    setActive(Math.max(0, list.findIndex((o) => (multiple ? picked.includes(o.value) : o.value === value))))\r\n    if (withSearch) setTimeout(() => searchRef.current?.focus(), 0)\r\n  }, [p.open]) // eslint-disable-line react-hooks/exhaustive-deps\r\n\r\n  // O item ativo fica sempre à vista ao navegar com o teclado.\r\n  useEffect(() => {\r\n    if (p.open) p.panelRef.current?.querySelector<HTMLElement>(`[data-index=\"${active}\"]`)?.scrollIntoView?.({ block: 'nearest' })\r\n  }, [active, p.open, p.panelRef])\r\n\r\n  /** Escolhe várias de uma vez (ou nenhuma), pela ordem das opções. */\r\n  const setPicked = (next: string[]) => {\r\n    if (controlledValues === undefined) setOwnValues(next)\r\n    onValuesChange?.(next)\r\n  }\r\n\r\n  const choose = (o: SelectOption) => {\r\n    if (o.disabled) return\r\n    if (multiple) {\r\n      // Marca ou desmarca, sem fechar; a ordem é a das opções.\r\n      const set = new Set(picked)\r\n      if (set.has(o.value)) set.delete(o.value)\r\n      else set.add(o.value)\r\n      const next = list.filter((x) => set.has(x.value)).map((x) => x.value)\r\n      if (controlledValues === undefined) setOwnValues(next)\r\n      onValuesChange?.(next)\r\n      return\r\n    }\r\n    p.close()\r\n    p.triggerRef.current?.focus()\r\n    if (o.value === value) return\r\n    if (controlled === undefined) setOwn(o.value)\r\n    onValueChange?.(o.value)\r\n    if (onChange) {\r\n      const target = { value: o.value, name } as HTMLSelectElement\r\n      onChange({ target, currentTarget: target } as React.ChangeEvent<HTMLSelectElement>)\r\n    }\r\n  }\r\n\r\n  const keys = (e: React.KeyboardEvent) => {\r\n    if (!p.open) {\r\n      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {\r\n        e.preventDefault()\r\n        p.setOpen(true)\r\n      }\r\n      return\r\n    }\r\n    if (e.key === 'Escape') {\r\n      e.preventDefault()\r\n      e.stopPropagation()\r\n      p.close()\r\n      p.triggerRef.current?.focus()\r\n    } else if (e.key === 'ArrowDown') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.min(visible.length - 1, i + 1))\r\n    } else if (e.key === 'ArrowUp') {\r\n      e.preventDefault()\r\n      setActive((i) => Math.max(0, i - 1))\r\n    } else if (e.key === 'Home') {\r\n      e.preventDefault()\r\n      setActive(0)\r\n    } else if (e.key === 'End') {\r\n      e.preventDefault()\r\n      setActive(visible.length - 1)\r\n    } else if (e.key === 'Enter') {\r\n      e.preventDefault()\r\n      const o = visible[active]\r\n      if (o) choose(o)\r\n    } else if (e.key === 'Tab') {\r\n      p.close()\r\n    } else if (!withSearch && e.key.length === 1) {\r\n      // Sem pesquisa: a letra salta para a primeira opção que começa por ela.\r\n      const i = visible.findIndex((o) => o.label.toLowerCase().startsWith(e.key.toLowerCase()))\r\n      if (i >= 0) setActive(i)\r\n    }\r\n  }\r\n\r\n  const pill = variant === 'pill'\r\n  const withBoxes = multiple && checkboxes\r\n  const pickedOptions = list.filter((o) => picked.includes(o.value))\r\n  const multiText =\r\n    allLabel && list.length > 0 && pickedOptions.length === list.length\r\n      ? allLabel\r\n      : L.selectedCount && pickedOptions.length > 1\r\n        ? L.selectedCount.replace('{n}', String(pickedOptions.length))\r\n        : pickedOptions.map((o) => o.label).join(', ')\r\n  const showsPlaceholder = multiple\r\n    ? pickedOptions.length === 0\r\n    : !chosen || (chosen.value === '' && placeholder !== undefined && emptyOption === undefined)\r\n  const buttonText = multiple\r\n    ? showsPlaceholder ? (placeholder ?? '') : multiText\r\n    : showsPlaceholder ? (placeholder ?? chosen?.label ?? '') : chosen?.label\r\n\r\n  return (\r\n    <div className={`relative min-w-0 ${className}`} onKeyDown={keys}>\r\n      <button\r\n        ref={p.triggerRef}\r\n        id={id ?? field.id}\r\n        type=\"button\"\r\n        disabled={disabled}\r\n        aria-haspopup=\"listbox\"\r\n        aria-expanded={p.open}\r\n        aria-label={ariaLabel}\r\n        aria-labelledby={ariaLabelledBy}\r\n        aria-invalid={invalid || undefined}\r\n        aria-required={(required ?? field.required) || undefined}\r\n        onClick={(e) => {\r\n          // Dentro de uma linha clicável (tabelas), abrir a lista não abre a linha.\r\n          e.stopPropagation()\r\n          p.setOpen((o) => !o)\r\n        }}\r\n        className={\r\n          pill\r\n            ? `inline-flex cursor-pointer appearance-none items-center gap-1 rounded-full px-2.5 py-1 text-xs font-bold whitespace-nowrap transition hover:brightness-95 focus:outline-none focus-visible:ring-2 focus-visible:ring-proef-blue disabled:cursor-not-allowed disabled:opacity-50 ${pillClassName}`\r\n            : `flex w-full min-w-0 cursor-pointer appearance-none items-center justify-between gap-2 text-left ${tall ? 'h-[38px]' : 'h-control'} ${fieldBoxClasses}`\r\n        }\r\n      >\r\n        <span className={`truncate ${showsPlaceholder && !pill ? 'text-muted-foreground/70' : ''}`}>\r\n          {buttonText}\r\n        </span>\r\n        <ChevronDownIcon size={14} className={`shrink-0 ${pill ? 'opacity-60' : 'text-muted-foreground'}`} />\r\n      </button>\r\n      {name && <input type=\"hidden\" name={name} value={multiple ? picked.join(',') : value} />}\r\n      {p.open &&\r\n        createPortal(\r\n          <div ref={p.panelRef} style={p.style} className={PANEL_CLASS} onClick={(e) => e.stopPropagation()} onKeyDown={keys}>\r\n            {withSearch && (\r\n              <div className=\"px-2 pt-0.5 pb-1\">\r\n                <input\r\n                  ref={searchRef}\r\n                  type=\"search\"\r\n                  value={query}\r\n                  onChange={(e) => {\r\n                    setQuery(e.target.value)\r\n                    setActive(0)\r\n                  }}\r\n                  placeholder={L.search}\r\n                  aria-label={L.searchIn.replace('{label}', ariaLabel ?? '')}\r\n                  className=\"h-8 w-full rounded-lg border border-slate-300 bg-white px-2.5 text-sm outline-none focus:border-proef-blue dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100\"\r\n                />\r\n              </div>\r\n            )}\r\n            {multiple && selectionActions && (\r\n              <div className=\"flex items-center justify-between px-3 pb-1 text-xs\">\r\n                <button\r\n                  type=\"button\"\r\n                  disabled={!visible.some((o) => !o.disabled)}\r\n                  onClick={() => {\r\n                    const add = visible.filter((o) => !o.disabled).map((o) => o.value)\r\n                    const set = new Set([...picked, ...add])\r\n                    setPicked(list.filter((x) => set.has(x.value)).map((x) => x.value))\r\n                  }}\r\n                  className=\"text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300\"\r\n                >\r\n                  {query.trim() ? L.selectResults : L.selectAll}\r\n                </button>\r\n                <button\r\n                  type=\"button\"\r\n                  disabled={picked.length === 0}\r\n                  onClick={() => setPicked([])}\r\n                  className=\"text-proef-blue hover:underline disabled:opacity-40 dark:text-sky-300\"\r\n                >\r\n                  {L.clear}\r\n                </button>\r\n              </div>\r\n            )}\r\n            <ul role=\"listbox\" aria-label={ariaLabel} aria-multiselectable={multiple || undefined}>\r\n              {visible.length === 0 && <li className=\"px-3 py-2 text-slate-400\">{L.noResults}</li>}\r\n              {visible.map((o, i) => {\r\n                const selected = multiple ? picked.includes(o.value) : o.value === value\r\n                return (\r\n                  <li\r\n                    key={o.value || '__empty'}\r\n                    role=\"option\"\r\n                    aria-selected={selected}\r\n                    aria-disabled={o.disabled || undefined}\r\n                    data-index={i}\r\n                    onMouseEnter={() => setActive(i)}\r\n                    onClick={() => choose(o)}\r\n                    className={`${itemClass(i === active)} ${o.disabled ? 'cursor-not-allowed opacity-50' : ''}`}\r\n                  >\r\n                    {withBoxes && <Checkbox checked={selected} onChange={noop} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />}\r\n                    <span className=\"min-w-0 flex-1\">\r\n                      <span className={`block truncate ${selected ? 'font-semibold' : ''} ${o.value === '' ? 'text-slate-500 dark:text-slate-400' : ''}`}>{o.label}</span>\r\n                      {o.description && <span className=\"block truncate text-[11px] text-slate-500 dark:text-slate-400\">{o.description}</span>}\r\n                    </span>\r\n                    {o.count !== undefined && (\r\n                      <span className=\"shrink-0 text-xs tabular-nums text-slate-500 dark:text-slate-400\">{o.count.toLocaleString()}</span>\r\n                    )}\r\n                    {!withBoxes && <span className=\"w-4 shrink-0\">{selected && <Check />}</span>}\r\n                  </li>\r\n                )\r\n              })}\r\n            </ul>\r\n          </div>,\r\n          dialogContainer ?? document.body,\r\n        )}\r\n    </div>\r\n  )\r\n})\r\n\r\nexport default SelectInput\r\nexport { SelectInput }\r\n"],"names":["SelectInput"],"mappings":"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"}

package/dist/esm/v1/primitives/navigation/Steps/Steps.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { CheckIcon } from "../../../foundations/icons/icons.js";
+const DEFAULT_STEPS_LABELS = {
+  done: "done",
+  error: "needs attention",
+  progress: "Step {current} of {total}"
+};
+function Steps({
+  items,
+  value,
+  onChange,
+  free = false,
+  label = "Steps",
+  labels,
+  className = ""
+}) {
+  const L = { ...DEFAULT_STEPS_LABELS, ...labels };
+  const current = items.findIndex((s) => s.id === value);
+  const progress = L.progress.replace("{current}", String(current + 1)).replace("{total}", String(items.length));
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": label, className, children: [
+    /* @__PURE__ */ jsx("p", { className: "m-0 mb-2 text-[10px] font-bold tracking-widest text-muted-foreground uppercase sm:hidden", "aria-hidden": true, children: progress }),
+    /* @__PURE__ */ jsx("ol", { className: "m-0 flex list-none items-center gap-2 p-0", children: items.map((s, i) => {
+      const isCurrent = i === current;
+      const clickable = !!onChange && !isCurrent && (free || !!s.done);
+      const circle = s.error ? "border-incumprido bg-incumprido text-white" : isCurrent ? "border-primary bg-primary text-primary-foreground dark:border-proef-blue dark:bg-proef-blue" : s.done ? "border-proef-turquoise bg-proef-turquoise text-proef-navy" : "border-border bg-card text-muted-foreground";
+      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-extrabold ${circle}`, children: s.error ? "!" : s.done && !isCurrent ? /* @__PURE__ */ jsx(CheckIcon, { size: 14, strokeWidth: 2.6 }) : i + 1 }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: `text-xs font-bold whitespace-nowrap ${isCurrent ? "text-primary dark:text-foreground" : "text-muted-foreground max-sm:sr-only"}`,
+            children: [
+              s.label,
+              s.error && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                " (",
+                L.error,
+                ")"
+              ] }),
+              s.done && !s.error && /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+                " (",
+                L.done,
+                ")"
+              ] })
+            ]
+          }
+        )
+      ] });
+      return /* @__PURE__ */ jsxs("li", { className: `flex min-w-0 items-center gap-2 ${i < items.length - 1 ? "flex-1" : ""}`, "aria-current": isCurrent ? "step" : void 0, children: [
+        clickable ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange(s.id),
+            className: "flex cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent p-0 hover:underline focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none",
+            children: content
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: content }),
+        i < items.length - 1 && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-0.5 min-w-3 flex-1 rounded-full ${s.done ? "bg-proef-turquoise" : "bg-border"}` })
+      ] }, s.id);
+    }) })
+  ] });
+}
+export {
+  DEFAULT_STEPS_LABELS,
+  Steps,
+  Steps as default
+};
+//# sourceMappingURL=Steps.js.map

package/dist/esm/v1/primitives/navigation/Steps/Steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.js","sources":["../../../../../../src/v1/primitives/navigation/Steps/Steps.tsx"],"sourcesContent":["import React from 'react'\r\nimport { CheckIcon } from '../../../foundations/icons/icons'\r\n\r\nexport interface StepItem<K extends string = string> {\r\n  id: K\r\n  /** Normalmente texto; aceita JSX. */\r\n  label: React.ReactNode\r\n  /** Passo já feito e válido (✓). */\r\n  done?: boolean\r\n  /** Passo com alguma coisa por corrigir (!). */\r\n  error?: boolean\r\n}\r\n\r\nexport interface StepsLabels {\r\n  /** Acrescentado ao nome de um passo feito, para leitores de ecrã. */\r\n  done: string\r\n  /** Acrescentado ao nome de um passo com erros, para leitores de ecrã. */\r\n  error: string\r\n  /** No telemóvel, por cima do passo atual: \"{current}\" e \"{total}\" são os números. */\r\n  progress: string\r\n}\r\n\r\nexport const DEFAULT_STEPS_LABELS: StepsLabels = {\r\n  done: 'done',\r\n  error: 'needs attention',\r\n  progress: 'Step {current} of {total}',\r\n}\r\n\r\nexport interface StepsProps<K extends string = string> {\r\n  items: StepItem<K>[]\r\n  /** O passo atual. A app guarda este estado. */\r\n  value: K\r\n  /** Sem isto, a barra só mostra onde se está (não se clica). */\r\n  onChange?: (id: K) => void\r\n  /**\r\n   * Todos os passos clicáveis. Por omissão só os já feitos (para voltar atrás); num\r\n   * registo que já existe (editar, consultar) pode fazer sentido saltar para qualquer um.\r\n   */\r\n  free?: boolean\r\n  /** Nome da barra, para leitores de ecrã (ex: \"Atribuição de equipamento\"). */\r\n  label?: string\r\n  labels?: Partial<StepsLabels>\r\n  className?: string\r\n}\r\n\r\n/**\r\n * Barra de passos de um fluxo em várias etapas (ex: Equipamentos → Colaborador →\r\n * Termo → Concluído): onde se está, o que já está feito e o que tem erros.\r\n *\r\n * Fica por cima do conteúdo do passo, numa página ou num\r\n * [Dialog](?path=/docs/v1-components-overlays-dialog--docs). Os botões Seguinte e\r\n * Anterior são da app (normalmente no fundo do passo).\r\n *\r\n * No telemóvel mostra os números e só o nome do passo atual.\r\n *\r\n * Substitui os `Passos` legacy.\r\n */\r\nexport default function Steps<K extends string = string>({\r\n  items,\r\n  value,\r\n  onChange,\r\n  free = false,\r\n  label = 'Steps',\r\n  labels,\r\n  className = '',\r\n}: StepsProps<K>) {\r\n  const L = { ...DEFAULT_STEPS_LABELS, ...labels }\r\n  const current = items.findIndex((s) => s.id === value)\r\n  const progress = L.progress.replace('{current}', String(current + 1)).replace('{total}', String(items.length))\r\n\r\n  return (\r\n    <nav aria-label={label} className={className}>\r\n      <p className=\"m-0 mb-2 text-[10px] font-bold tracking-widest text-muted-foreground uppercase sm:hidden\" aria-hidden>\r\n        {progress}\r\n      </p>\r\n      <ol className=\"m-0 flex list-none items-center gap-2 p-0\">\r\n        {items.map((s, i) => {\r\n          const isCurrent = i === current\r\n          const clickable = !!onChange && !isCurrent && (free || !!s.done)\r\n          const circle = s.error\r\n            ? 'border-incumprido bg-incumprido text-white'\r\n            : isCurrent\r\n              ? 'border-primary bg-primary text-primary-foreground dark:border-proef-blue dark:bg-proef-blue'\r\n              : s.done\r\n                ? 'border-proef-turquoise bg-proef-turquoise text-proef-navy'\r\n                : 'border-border bg-card text-muted-foreground'\r\n          const content = (\r\n            <>\r\n              <span aria-hidden className={`inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full border-2 text-xs font-extrabold ${circle}`}>\r\n                {s.error ? '!' : s.done && !isCurrent ? <CheckIcon size={14} strokeWidth={2.6} /> : i + 1}\r\n              </span>\r\n              <span\r\n                className={`text-xs font-bold whitespace-nowrap ${isCurrent ? 'text-primary dark:text-foreground' : 'text-muted-foreground max-sm:sr-only'}`}\r\n              >\r\n                {s.label}\r\n                {s.error && <span className=\"sr-only\"> ({L.error})</span>}\r\n                {s.done && !s.error && <span className=\"sr-only\"> ({L.done})</span>}\r\n              </span>\r\n            </>\r\n          )\r\n          return (\r\n            <li key={s.id} className={`flex min-w-0 items-center gap-2 ${i < items.length - 1 ? 'flex-1' : ''}`} aria-current={isCurrent ? 'step' : undefined}>\r\n              {clickable ? (\r\n                <button\r\n                  type=\"button\"\r\n                  onClick={() => onChange!(s.id)}\r\n                  className=\"flex cursor-pointer items-center gap-2 rounded-md border-0 bg-transparent p-0 hover:underline focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:outline-none\"\r\n                >\r\n                  {content}\r\n                </button>\r\n              ) : (\r\n                <span className=\"flex items-center gap-2\">{content}</span>\r\n              )}\r\n              {i < items.length - 1 && (\r\n                <span aria-hidden className={`h-0.5 min-w-3 flex-1 rounded-full ${s.done ? 'bg-proef-turquoise' : 'bg-border'}`} />\r\n              )}\r\n            </li>\r\n          )\r\n        })}\r\n      </ol>\r\n    </nav>\r\n  )\r\n}\r\n\r\nexport { Steps }\r\n"],"names":[],"mappings":";;AAsBO,MAAM,uBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,UAAU;AACZ;AA+BA,SAAwB,MAAiC;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AACd,GAAkB;AAChB,QAAM,IAAI,EAAE,GAAG,sBAAsB,GAAG,OAAA;AACxC,QAAM,UAAU,MAAM,UAAU,CAAC,MAAM,EAAE,OAAO,KAAK;AACrD,QAAM,WAAW,EAAE,SAAS,QAAQ,aAAa,OAAO,UAAU,CAAC,CAAC,EAAE,QAAQ,WAAW,OAAO,MAAM,MAAM,CAAC;AAE7G,SACE,qBAAC,OAAA,EAAI,cAAY,OAAO,WACtB,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAE,WAAU,4FAA2F,eAAW,MAChH,UAAA,UACH;AAAA,IACA,oBAAC,QAAG,WAAU,6CACX,gBAAM,IAAI,CAAC,GAAG,MAAM;AACnB,YAAM,YAAY,MAAM;AACxB,YAAM,YAAY,CAAC,CAAC,YAAY,CAAC,cAAc,QAAQ,CAAC,CAAC,EAAE;AAC3D,YAAM,SAAS,EAAE,QACb,+CACA,YACE,gGACA,EAAE,OACA,8DACA;AACR,YAAM,UACJ,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,eAAW,MAAC,WAAW,yGAAyG,MAAM,IACzI,UAAA,EAAE,QAAQ,MAAM,EAAE,QAAQ,CAAC,gCAAa,WAAA,EAAU,MAAM,IAAI,aAAa,IAAA,CAAK,IAAK,IAAI,EAAA,CAC1F;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,uCAAuC,YAAY,sCAAsC,sCAAsC;AAAA,YAEzI,UAAA;AAAA,cAAA,EAAE;AAAA,cACF,EAAE,SAAS,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,gBAAA;AAAA,gBAAG,EAAE;AAAA,gBAAM;AAAA,cAAA,GAAC;AAAA,cACjD,EAAE,QAAQ,CAAC,EAAE,SAAS,qBAAC,QAAA,EAAK,WAAU,WAAU,UAAA;AAAA,gBAAA;AAAA,gBAAG,EAAE;AAAA,gBAAK;AAAA,cAAA,EAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9D,GACF;AAEF,aACE,qBAAC,MAAA,EAAc,WAAW,mCAAmC,IAAI,MAAM,SAAS,IAAI,WAAW,EAAE,IAAI,gBAAc,YAAY,SAAS,QACrI,UAAA;AAAA,QAAA,YACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,SAAU,EAAE,EAAE;AAAA,YAC7B,WAAU;AAAA,YAET,UAAA;AAAA,UAAA;AAAA,QAAA,IAGH,oBAAC,QAAA,EAAK,WAAU,2BAA2B,UAAA,SAAQ;AAAA,QAEpD,IAAI,MAAM,SAAS,yBACjB,QAAA,EAAK,eAAW,MAAC,WAAW,qCAAqC,EAAE,OAAO,uBAAuB,WAAW,GAAA,CAAI;AAAA,MAAA,EAAA,GAb5G,EAAE,EAeX;AAAA,IAEJ,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}