@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":["import React, {\n    useId,\n    useState,\n    useRef,\n    useEffect,\n    useInsertionEffect,\n    useLayoutEffect,\n    useCallback,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport BaseFormComponent, { type RequiredIndicator, useFormFieldIds } from './BaseFormComponent';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CloseIcon from './CustomIcons/CloseIcon';\nimport FieldMessage from './FieldMessage';\nimport LoadingInput from './LoadingInput';\nimport Spinner from './Spinner';\nimport Tooltip from './Tooltip';\nimport { CONTROL_TEXT_SIZE, CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport {\n    PANEL_VIEWPORT_PADDING_PX,\n    computePanelGeometry,\n    isContentSizedPanel,\n    isTriggerOffscreen,\n    rectSignature,\n} from './dropdownPanelPosition';\nimport { DROPDOWN_TRIGGER_ATTR, type DropdownTone, getTriggerVisual } from './dropdownTriggerStyle';\nimport { pushEscapeLayer } from './escapeLayers';\nimport { ensureDropdownPanelStyles } from './optionRowStyles';\nimport { overlayIdentity } from './portalOverlay';\nimport { useTopLayer } from './topLayer';\n\nexport type { DropdownTone };\n\nexport interface DropdownItem {\n    id: string;\n    label: string;\n    icon?: React.ReactNode;\n    /** Alternate label shown in the closed trigger when selected (falls back to `label`). */\n    triggerLabel?: string;\n    /** Items sharing a `group` render under a section header, in first-seen order. */\n    group?: string;\n    subtitle?: string;\n    rightSideText?: string;\n    rightSideTextVariant?: 'muted' | 'primary';\n    rightSideTextAlignment?: 'left' | 'right';\n}\n\ninterface DropdownBaseProps {\n    label?: string;\n    hint?: string;\n    tooltip?: string;\n    name: FieldPath<FieldValues> | string;\n    loading?: boolean;\n    menuLoading?: boolean;\n    items: DropdownItem[];\n    onItemSelected?: (id?: string) => void;\n    defaultValue?: string;\n    /** Controlled selection. When set, the trigger always reflects this id and the component\n     *  keeps no selection state of its own. Pass it with `onItemSelected`. */\n    value?: string;\n    disabled?: boolean;\n    error?: boolean;\n    /** `pending` marks a value the user still has to supply. Outranks open and selection. */\n    tone?: DropdownTone;\n    className?: string;\n    formControl?: Control<FieldValues, unknown>;\n    description?: string;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    helperText?: React.ReactNode;\n    placeholder?: string;\n    subtitleLayout?: SubtitleLayout;\n    /** Adds a clear control to the trigger, reported as `onItemSelected(undefined)`. */\n    clearable?: boolean;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbar chips; 'small' (28px) beside a title. */\n    size?: DropdownSize;\n    /** Fills the container instead of sizing to content, and matches the panel to the trigger. */\n    fullWidth?: boolean;\n    /** Names the trigger from the light DOM, where `htmlFor` cannot reach into the shadow root. */\n    id?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\n/**\n * The search trigger is a single-line text input with nowhere for a second line, so\n * `showSubtitleInTrigger` is rejected alongside `search` rather than silently ignored.\n */\ntype DropdownTriggerModeProps =\n    | {\n          search?: false;\n          /** Promotes the selected item's `subtitle` into the closed trigger, beneath the value. */\n          showSubtitleInTrigger?: boolean;\n      }\n    | { search: true; showSubtitleInTrigger?: never };\n\nexport type DropdownProps = DropdownBaseProps & DropdownTriggerModeProps;\n\n/**\n * Matches Button and the Figma component library: 28 / 32 / 42px. These names moved up a\n * tier in 0.71 — what was `xsmall`/`small`/`medium` is now `small`/`medium`/`large`.\n */\nexport type DropdownSize = 'small' | 'medium' | 'large';\n\nexport type SubtitleLayout = 'inline' | 'stacked';\n\n// Floating-panel positioning constants. Behavioural margins, not visual\n// design tokens — they govern how close the portaled panel can sit to the\n// trigger and to the viewport edges. If a theme spacing scale lands later,\n// these become the single point of override.\n\nconst PANEL_MESSAGE_STYLE: React.CSSProperties = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    padding: '24px 16px',\n    color: 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n};\n\n// Figma pins the option's inline annotation at 11px on every tier — unlike the label,\n// it does not ride the ladder (Item Large 68:2617, Item Medium 2343:2134).\nconst ANNOTATION_FONT_SIZE = 'var(--malachite-font-size-xsmall, 11px)';\n\nconst OPTION_SELECTOR = '[data-dropdown-option]';\n\nconst panelOptions = (panel: HTMLElement | null): HTMLElement[] =>\n    Array.from(panel?.querySelectorAll<HTMLElement>(OPTION_SELECTOR) ?? []);\n\nconst matchesSearch = (item: DropdownItem, query: string) => {\n    const q = query.toLowerCase();\n    const labelMatches = item.label.toLowerCase().includes(q);\n    const subtitleMatches = item.subtitle ? item.subtitle.toLowerCase().includes(q) : false;\n    const rightSideTextMatches = item.rightSideText\n        ? item.rightSideText.toLowerCase().includes(q)\n        : false;\n    return labelMatches || subtitleMatches || rightSideTextMatches;\n};\n\nconst TRIGGER_SIZE_HEIGHT: Record<DropdownSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)]',\n    large: 'h-[var(--malachite-control-height-large,42px)]',\n};\n\nconst TRIGGER_SIZE_CLASSES: Record<DropdownSize, string> = {\n    small: `${TRIGGER_SIZE_HEIGHT.small} px-2.5 py-1.5 ${CONTROL_TEXT_SIZE_CLASS.small}`,\n    medium: `${TRIGGER_SIZE_HEIGHT.medium} px-3 py-1.5 ${CONTROL_TEXT_SIZE_CLASS.medium}`,\n    large: `${TRIGGER_SIZE_HEIGHT.large} px-4 py-2.5 ${CONTROL_TEXT_SIZE_CLASS.large}`,\n};\n\nconst TRIGGER_SIZE_STACKED_CLASSES: Record<DropdownSize, string> = {\n    small: `min-h-[var(--malachite-control-height-small,28px)] px-2.5 py-1.5 ${CONTROL_TEXT_SIZE_CLASS.small}`,\n    medium: `min-h-[var(--malachite-control-height-medium,32px)] px-3 py-1.5 ${CONTROL_TEXT_SIZE_CLASS.medium}`,\n    large: `min-h-[var(--malachite-control-height-large,42px)] px-4 py-2.5 ${CONTROL_TEXT_SIZE_CLASS.large}`,\n};\n\nconst CLEAR_OFFSET_CLASSES: Record<DropdownSize, string> = {\n    small: 'right-[26px] size-4',\n    medium: 'right-[30px] size-4',\n    large: 'right-[38px] size-4',\n};\n\nconst CLEAR_STACKED_TOP_CLASSES: Record<DropdownSize, string> = {\n    small: 'top-[calc(var(--malachite-control-height-small,28px)/2)] -translate-y-1/2',\n    medium: 'top-[calc(var(--malachite-control-height-medium,32px)/2)] -translate-y-1/2',\n    large: 'top-[calc(var(--malachite-control-height-large,42px)/2)] -translate-y-1/2',\n};\n\n// Radius tracks the tier in Figma: 10 / 12 / 14. Only 12 has a --malachite-radius-* rung.\nconst TRIGGER_SIZE_RADIUS: Record<DropdownSize, string> = {\n    small: 'rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'rounded-xl',\n    large: 'rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst NEVER = () => false;\n\ntype TruncatedTriggerLines = 'value' | 'subtitle' | 'both';\n\n// Portaled to document.body, outside the shadow root: styling here has to be inline.\nconst TOOLTIP_LINES_STYLE: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n};\n\nconst triggerTooltipText = (\n    lines: TruncatedTriggerLines,\n    valueText: React.ReactNode,\n    subtitle: React.ReactNode,\n): React.ReactNode => {\n    if (lines === 'value') {\n        return valueText;\n    }\n    if (lines === 'subtitle') {\n        return subtitle;\n    }\n    return (\n        <span style={TOOLTIP_LINES_STYLE}>\n            <span>{valueText}</span>\n            <span>{subtitle}</span>\n        </span>\n    );\n};\n\nconst ValueRow: React.FC<{ wrap: boolean; id?: string; children: React.ReactNode }> = ({\n    wrap,\n    id,\n    children,\n}) =>\n    wrap ? (\n        <span id={id} className=\"min-w-0 flex items-center gap-2\">\n            {children}\n        </span>\n    ) : (\n        <>{children}</>\n    );\n\nconst LabelRow: React.FC<{ row: boolean; children: React.ReactNode }> = ({ row, children }) =>\n    row ? (\n        <span style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>\n            {children}\n        </span>\n    ) : (\n        <>{children}</>\n    );\n\ninterface DropdownTriggerProps {\n    isOpen: boolean;\n    onClick: () => void;\n    selectedItem: DropdownItem | undefined;\n    hasClear?: boolean;\n    onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    clearLabel?: string;\n    disabled?: boolean;\n    error?: boolean;\n    tone?: DropdownTone;\n    placeholder?: string;\n    search?: boolean;\n    showSubtitleInTrigger?: boolean;\n    searchQuery?: string;\n    onSearchChange?: (value: string) => void;\n    onFocusOpen?: () => void;\n    /** ArrowDown on the trigger: opens the menu, or steps into it if already open. */\n    onArrowDown?: () => void;\n    size?: DropdownSize;\n    controlId: string;\n    labelId?: string;\n    describedBy?: string;\n    required?: boolean;\n    ariaLabel?: string;\n    ariaLabelledBy?: string;\n    /** A caller-supplied id means an external `<label for>` may be naming the control. */\n    hasCallerId?: boolean;\n}\n\nconst DropdownTrigger = React.forwardRef<HTMLElement, DropdownTriggerProps>(\n    (\n        {\n            isOpen,\n            onClick,\n            selectedItem,\n            disabled = false,\n            error = false,\n            tone,\n            placeholder,\n            search = false,\n            showSubtitleInTrigger = false,\n            searchQuery = '',\n            onSearchChange,\n            onFocusOpen,\n            onArrowDown,\n            size = 'large',\n            hasClear = false,\n            onClear,\n            clearLabel,\n            controlId,\n            labelId,\n            describedBy,\n            required = false,\n            ariaLabel,\n            ariaLabelledBy,\n            hasCallerId = false,\n        },\n        forwardedRef,\n    ) => {\n        const stacked = showSubtitleInTrigger && !search && !!selectedItem?.subtitle;\n        const sizeClasses = stacked\n            ? TRIGGER_SIZE_STACKED_CLASSES[size]\n            : TRIGGER_SIZE_CLASSES[size];\n        const sizeRadius = TRIGGER_SIZE_RADIUS[size];\n        const valueId = `${controlId}-value`;\n        const subtitleId = `${controlId}-subtitle`;\n        // aria-labelledby outranks aria-label in the accessible-name algorithm, so the\n        // generated label+value pair has to be dropped for a caller's aria-label to apply.\n        // Named off nothing, the button takes its name from every descendant — the subtitle\n        // included, which `aria-describedby` then repeats. Naming it off the value alone fixes\n        // that, but only where nothing else already names the control.\n        const namesItself = !labelId && !ariaLabel && !hasCallerId && stacked;\n        const labelledBy =\n            ariaLabelledBy ??\n            (labelId && !ariaLabel ? `${labelId} ${valueId}` : undefined) ??\n            (namesItself ? valueId : undefined);\n\n        const handleArrowDown = (event: React.KeyboardEvent): void => {\n            if (event.key !== 'ArrowDown') {\n                return;\n            }\n            event.preventDefault();\n            onArrowDown?.();\n        };\n\n        const valueTextRef = useRef<HTMLSpanElement>(null);\n        const subtitleTextRef = useRef<HTMLSpanElement>(null);\n        const triggerVisual = getTriggerVisual({ disabled, error, tone, open: isOpen });\n        const showValueLabel = !isOpen && !!selectedItem;\n        const valueText = selectedItem?.triggerLabel ?? selectedItem?.label;\n        const triggerSubtitle = stacked ? selectedItem?.subtitle : undefined;\n        const isValueTruncated = () => {\n            const el = valueTextRef.current;\n            return !!el && el.scrollWidth > el.clientWidth;\n        };\n        const isSubtitleTruncated = () => {\n            const el = subtitleTextRef.current;\n            return !!el && el.scrollWidth > el.clientWidth;\n        };\n\n        // A tooltip reads its text at render, but which line is cut off is only knowable on\n        // hover — so the one measurement pass that decides whether to show also records what\n        // to say. The initial value never shows: untruncated, the tooltip refuses to open.\n        const [truncatedLines, setTruncatedLines] = useState<TruncatedTriggerLines>('subtitle');\n        const measureTruncatedLines = () => {\n            const value = isValueTruncated();\n            const subtitle = isSubtitleTruncated();\n            if (!value && !subtitle) {\n                return false;\n            }\n            setTruncatedLines(value && subtitle ? 'both' : value ? 'value' : 'subtitle');\n            return true;\n        };\n\n        if (search && !disabled) {\n            return (\n                <div\n                    ref={forwardedRef as React.Ref<HTMLDivElement>}\n                    className={`\n                relative w-full ${sizeClasses} ${sizeRadius}\n                border border-solid\n                transition-all duration-200\n                flex items-center\n            `}\n                    style={triggerVisual}\n                    {...{ [DROPDOWN_TRIGGER_ATTR]: '' }}\n                    onClick={(e) => e.stopPropagation()}\n                >\n                    {selectedItem?.icon && (\n                        <span className=\"flex shrink-0 items-center justify-center pr-2\">\n                            {selectedItem.icon}\n                        </span>\n                    )}\n                    <Tooltip text={valueText} shouldShow={isValueTruncated} isShrinkable fill>\n                        <div className=\"relative flex-1 flex items-center\">\n                            {showValueLabel && (\n                                <span\n                                    aria-hidden=\"true\"\n                                    className=\"absolute inset-0 flex items-center pointer-events-none\"\n                                >\n                                    <span\n                                        ref={valueTextRef}\n                                        className=\"min-w-0 block truncate text-[length:inherit]\n                                        text-[var(--malachite-text-primary)]\"\n                                    >\n                                        {valueText}\n                                    </span>\n                                </span>\n                            )}\n                            <input\n                                id={controlId}\n                                type=\"text\"\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                aria-invalid={error || undefined}\n                                aria-required={required || undefined}\n                                aria-describedby={describedBy}\n                                value={isOpen ? searchQuery : (selectedItem?.label ?? '')}\n                                onChange={(e) => {\n                                    e.stopPropagation();\n                                    onSearchChange?.(e.target.value);\n                                    if (!isOpen) {\n                                        onClick();\n                                    }\n                                }}\n                                onFocus={() => {\n                                    onFocusOpen?.();\n                                }}\n                                onKeyDown={handleArrowDown}\n                                placeholder={placeholder ?? 'Select Field'}\n                                className={`flex-1 bg-transparent outline-none\n                            text-[length:inherit] font-normal\n                            placeholder:text-[var(--malachite-text-dimmed)] ${\n                                showValueLabel\n                                    ? 'text-transparent'\n                                    : 'text-[var(--malachite-text-primary)]'\n                            }`}\n                            />\n                        </div>\n                    </Tooltip>\n                    {hasClear && (\n                        <button\n                            type=\"button\"\n                            aria-label={clearLabel}\n                            onClick={onClear}\n                            className=\"flex shrink-0 items-center justify-center pl-2 cursor-pointer\n                                bg-transparent border-none p-0 text-[var(--malachite-text-placeholder)]\n                                hover:text-[var(--malachite-text-primary)] transition-colors\n                                rounded-full focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2\"\n                        >\n                            <CloseIcon size={13} />\n                        </button>\n                    )}\n                    <div className=\"flex items-center justify-center pl-2\">\n                        {/* Mouse-only affordance: the input beside it already opens the menu on\n                            click and focus, so this stays out of the tab order to avoid a\n                            duplicate stop — but it must still be a button, not a click-handling\n                            span, so it is exposed and activatable rather than invisible. */}\n                        <button\n                            type=\"button\"\n                            tabIndex={-1}\n                            aria-label={isOpen ? 'Close options' : 'Open options'}\n                            onClick={(e) => {\n                                e.stopPropagation();\n                                onClick();\n                            }}\n                            className=\"flex items-center justify-center cursor-pointer bg-transparent border-none p-0\"\n                        >\n                            <CaretDownIcon\n                                size={13}\n                                style={{\n                                    color: isOpen\n                                        ? 'var(--malachite-text-primary, rgb(10, 10, 10))'\n                                        : 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n                                    transition: 'transform 0.2s ease, color 0.2s ease',\n                                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n                                }}\n                            />\n                        </button>\n                    </div>\n                </div>\n            );\n        }\n\n        const trigger = (\n            <button\n                ref={forwardedRef as React.Ref<HTMLButtonElement>}\n                id={controlId}\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-labelledby={labelledBy}\n                aria-invalid={error || undefined}\n                aria-required={required || undefined}\n                aria-describedby={\n                    [describedBy, triggerSubtitle ? subtitleId : undefined]\n                        .filter(Boolean)\n                        .join(' ') || undefined\n                }\n                onClick={(e) => {\n                    e.stopPropagation();\n                    onClick();\n                }}\n                onKeyDown={handleArrowDown}\n                disabled={disabled}\n                style={triggerVisual}\n                {...{ [DROPDOWN_TRIGGER_ATTR]: '' }}\n                className={`\n                relative w-full ${sizeClasses} ${sizeRadius}\n                border border-solid\n                transition-all duration-200\n                flex ${stacked ? 'items-start' : 'items-center'} gap-3\n                cursor-pointer\n                disabled:cursor-not-allowed\n            `}\n            >\n                {/* Spans: <button> takes phrasing content only. */}\n                <span\n                    id={triggerSubtitle ? undefined : valueId}\n                    className={`text-left flex-1 min-w-0 flex ${\n                        triggerSubtitle ? 'flex-col gap-1' : 'items-center gap-2'\n                    }`}\n                >\n                    {selectedItem ? (\n                        <>\n                            <ValueRow wrap={!!triggerSubtitle} id={valueId}>\n                                {selectedItem.icon && (\n                                    <span className=\"flex items-center justify-center shrink-0\">\n                                        {selectedItem.icon}\n                                    </span>\n                                )}\n                                <Tooltip\n                                    text={valueText}\n                                    shouldShow={triggerSubtitle ? NEVER : isValueTruncated}\n                                    triggerAs={triggerSubtitle ? 'span' : 'div'}\n                                    isShrinkable\n                                >\n                                    <span\n                                        ref={valueTextRef}\n                                        className={`min-w-0 block truncate text-[length:inherit] ${\n                                            disabled\n                                                ? 'text-[var(--malachite-text-placeholder)]'\n                                                : 'text-[var(--malachite-text-primary)]'\n                                        }`}\n                                    >\n                                        {valueText}\n                                    </span>\n                                </Tooltip>\n                            </ValueRow>\n                            {triggerSubtitle && (\n                                <span\n                                    id={subtitleId}\n                                    ref={subtitleTextRef}\n                                    className=\"min-w-0 block truncate text-[length:var(--malachite-font-size-xsmall,11px)] text-[var(--malachite-text-secondary,rgb(123,123,123))] leading-normal\"\n                                >\n                                    {triggerSubtitle}\n                                </span>\n                            )}\n                        </>\n                    ) : (\n                        <span\n                            className={`flex-1 min-w-0 truncate text-[length:inherit] ${\n                                disabled\n                                    ? 'text-[var(--malachite-text-placeholder)]'\n                                    : 'text-[var(--malachite-text-dimmed)]'\n                            }`}\n                        >\n                            {placeholder ?? 'Select Field'}\n                        </span>\n                    )}\n                </span>\n                {hasClear && <span aria-hidden=\"true\" className=\"shrink-0 w-4\" />}\n                <span className=\"flex items-center justify-center shrink-0\">\n                    <CaretDownIcon\n                        size={13}\n                        style={{\n                            color: isOpen\n                                ? 'var(--malachite-text-primary, rgb(10, 10, 10))'\n                                : 'var(--malachite-text-placeholder, rgb(187, 187, 187))',\n                            transition: 'transform 0.2s ease, color 0.2s ease',\n                            transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',\n                        }}\n                    />\n                </span>\n            </button>\n        );\n\n        // The button is what takes focus, so the tooltip wraps it rather than a line inside:\n        // mounted on a line it could only ever open with a pointer, and nested tooltips opened\n        // together on hover. Its text is already in the trigger's name and description, so it\n        // repeats it visually only. `fill`, not `isShrinkable`, whose `overflow: hidden` would\n        // clip the error ring the button paints outside its border box.\n        // Gated on the prop, not on there being a subtitle to show: keyed off the selection the\n        // wrapper would appear on the first choice, remounting the button `focusTrigger` has\n        // just handed focus back to and dropping the keyboard user at <body>.\n        return showSubtitleInTrigger && !search ? (\n            <Tooltip\n                text={triggerTooltipText(truncatedLines, valueText, triggerSubtitle)}\n                shouldShow={triggerSubtitle ? measureTruncatedLines : NEVER}\n                fill\n                describesTrigger={false}\n            >\n                {trigger}\n            </Tooltip>\n        ) : (\n            trigger\n        );\n    },\n);\nDropdownTrigger.displayName = 'DropdownTrigger';\n\ninterface DropdownItemComponentProps {\n    item: DropdownItem;\n    selected: boolean;\n    subtitleLayout: SubtitleLayout;\n    onItemSelected: (item: DropdownItem) => void;\n}\n\nconst DropdownItemComponent = ({\n    item,\n    selected,\n    subtitleLayout,\n    onItemSelected,\n}: DropdownItemComponentProps) => {\n    const textColor = selected\n        ? 'var(--malachite-accent-foreground, rgb(2, 122, 66))'\n        : 'var(--malachite-text-primary, rgb(10, 10, 10))';\n    const stacked = subtitleLayout === 'stacked' && !!item.subtitle;\n    const optionId = `mal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}`;\n    const optionLabelId = `${optionId}-label`;\n    const optionSubtitleId = `${optionId}-subtitle`;\n    const subtitleRef = useRef<HTMLSpanElement>(null);\n    const isSubtitleTruncated = () => {\n        const el = subtitleRef.current;\n        return !!el && el.scrollWidth > el.clientWidth + 1;\n    };\n\n    // Default to muted so right-side metadata (e.g. category tags) de-emphasises\n    // against the primary item label. Consumers can opt back in with 'primary'.\n    const rightSideTextColor =\n        item.rightSideTextVariant === 'primary'\n            ? 'var(--malachite-text-right-side-text-primary, rgb(10, 10, 10))'\n            : 'var(--malachite-text-right-side-text-muted, rgb(123, 123, 123))';\n\n    const rightSideJustify = item.rightSideTextAlignment === 'left' ? 'flex-start' : 'flex-end';\n\n    const option = (\n        // `role=\"option\"` would be invalid — nothing here declares a `listbox`, and an\n        // orphaned option is dropped from the a11y tree. `aria-current`, not\n        // `aria-pressed`: these are one-of-many choices, not toggles. tabIndex={-1}\n        // because the portaled panel is outside the trigger's tab order; DropdownPanel\n        // focuses an option on open and arrow keys move between them.\n        <button\n            type=\"button\"\n            data-dropdown-option=\"\"\n            data-selected={selected}\n            aria-current={selected || undefined}\n            // Unnamed, the option takes its name from everything inside it — a sentence-length\n            // subtitle included.\n            aria-labelledby={item.subtitle ? optionLabelId : undefined}\n            aria-describedby={item.subtitle ? optionSubtitleId : undefined}\n            tabIndex={-1}\n            onClick={(e) => {\n                e.stopPropagation();\n                onItemSelected(item);\n            }}\n            className=\"malachite-dropdown-option\"\n            style={{\n                minHeight: 38,\n                borderRadius: 8,\n                display: 'flex',\n                alignItems: 'center',\n                padding: 10,\n                gap: 12,\n                cursor: 'pointer',\n                transition: 'background-color 120ms ease',\n                // Reset the UA button chrome. Background is deliberately absent — see PANEL_RULES.\n                width: '100%',\n                border: 'none',\n                textAlign: 'left',\n                font: 'inherit',\n                color: 'inherit',\n            }}\n        >\n            {/* Spans: <button> takes phrasing content only. `minWidth: 0` so a long,\n                unwrappable subtitle ellipsises instead of stretching the option. */}\n            <span\n                style={{\n                    flex: 1,\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 12,\n                    ...(stacked ? { minWidth: 0 } : {}),\n                }}\n            >\n                <span style={{ flex: 1, display: 'block', ...(stacked ? { minWidth: 0 } : {}) }}>\n                    <span\n                        style={\n                            stacked\n                                ? { display: 'flex', flexDirection: 'column', gap: 2 }\n                                : { display: 'flex', alignItems: 'center', gap: 8 }\n                        }\n                    >\n                        <LabelRow row={stacked && !!item.icon}>\n                            {item.icon && (\n                                <span\n                                    style={{\n                                        display: 'flex',\n                                        alignItems: 'center',\n                                        justifyContent: 'center',\n                                        flexShrink: 0,\n                                    }}\n                                >\n                                    {item.icon}\n                                </span>\n                            )}\n                            <span\n                                id={item.subtitle ? optionLabelId : undefined}\n                                style={{\n                                    fontWeight: 400,\n                                    color: textColor,\n                                    whiteSpace: 'nowrap',\n                                    overflow: 'hidden',\n                                    textOverflow: 'ellipsis',\n                                    minWidth: 0,\n                                }}\n                            >\n                                {item.label}\n                            </span>\n                        </LabelRow>\n                        {item.subtitle &&\n                            (stacked ? (\n                                <span\n                                    id={optionSubtitleId}\n                                    ref={subtitleRef}\n                                    style={{\n                                        fontSize: ANNOTATION_FONT_SIZE,\n                                        fontWeight: 400,\n                                        lineHeight: 1.4,\n                                        color: selected\n                                            ? textColor\n                                            : 'var(--malachite-text-dimmed, rgb(161, 161, 161))',\n                                        whiteSpace: 'nowrap',\n                                        overflow: 'hidden',\n                                        textOverflow: 'ellipsis',\n                                    }}\n                                >\n                                    {item.subtitle}\n                                </span>\n                            ) : (\n                                <>\n                                    <span\n                                        style={{\n                                            fontSize: ANNOTATION_FONT_SIZE,\n                                            fontWeight: 400,\n                                            color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n                                            flexShrink: 0,\n                                        }}\n                                    >\n                                        |\n                                    </span>\n                                    <span\n                                        id={optionSubtitleId}\n                                        style={{\n                                            fontSize: ANNOTATION_FONT_SIZE,\n                                            fontWeight: 400,\n                                            color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n                                            whiteSpace: 'nowrap',\n                                            overflow: 'hidden',\n                                            textOverflow: 'ellipsis',\n                                            minWidth: 0,\n                                        }}\n                                    >\n                                        {item.subtitle}\n                                    </span>\n                                </>\n                            ))}\n                    </span>\n                </span>\n                <span\n                    style={{\n                        // Reserved only when there is something to put there: an empty slot\n                        // still holding its width truncates the label and subtitle early.\n                        minWidth: item.rightSideText\n                            ? 'var(--malachite-text-right-side-text-min-width, 80px)'\n                            : 0,\n                        flexShrink: 1,\n                        display: 'flex',\n                        justifyContent: rightSideJustify,\n                    }}\n                >\n                    {item.rightSideText && (\n                        <span\n                            style={{\n                                fontSize: 'var(--malachite-text-right-side-text-font-size, 12px)',\n                                fontWeight: 400,\n                                color: rightSideTextColor,\n                                whiteSpace: 'nowrap',\n                                overflow: 'hidden',\n                                textOverflow: 'ellipsis',\n                                minWidth: 0,\n                            }}\n                        >\n                            {item.rightSideText}\n                        </span>\n                    )}\n                </span>\n            </span>\n        </button>\n    );\n\n    // Focus lands on the option itself, and focusin does not reach a descendant, so a keyboard\n    // user could never open a tooltip mounted inside it.\n    return stacked ? (\n        <Tooltip\n            text={item.subtitle}\n            shouldShow={isSubtitleTruncated}\n            isShrinkable\n            describesTrigger={false}\n        >\n            {option}\n        </Tooltip>\n    ) : (\n        option\n    );\n};\n\ninterface DropdownPanelProps {\n    items: DropdownItem[];\n    onItemSelected: (item?: DropdownItem) => void;\n    selectedItem: DropdownItem | undefined;\n    menuLoading?: boolean;\n    emptyMessage: string;\n    /** Focus an option on open. False in search mode, where the input keeps focus. */\n    autoFocus: boolean;\n    /** Panel has been measured. It renders `visibility: hidden` until then, and a\n     *  hidden element cannot take focus, so open-time focus has to wait for this. */\n    positioned: boolean;\n    /** Close the panel and hand focus back to the trigger. */\n    onDismiss: () => void;\n    subtitleLayout: SubtitleLayout;\n    size: DropdownSize;\n}\n\nconst DropdownPanel = React.forwardRef<\n    HTMLDivElement,\n    DropdownPanelProps & { style?: React.CSSProperties }\n>((props, ref) => {\n    const {\n        items,\n        onItemSelected,\n        selectedItem,\n        menuLoading,\n        emptyMessage,\n        autoFocus,\n        positioned,\n        onDismiss,\n        subtitleLayout,\n        size,\n        style,\n    } = props;\n    const panelRef = useRef<HTMLDivElement | null>(null);\n\n    // The panel only mounts while open, so no condition. useInsertionEffect, not layout:\n    // it runs before the DOM mutation, so the rules are in place before the rows are inserted.\n    useInsertionEffect(() => {\n        ensureDropdownPanelStyles();\n    }, []);\n\n    useTopLayer(panelRef, true);\n\n    // Start on the selected option so Enter re-confirms the current value. Not keyed on\n    // `items`: re-running as the filtered list changes would yank focus back to the top.\n    useEffect(() => {\n        if (!autoFocus || !positioned) {\n            return;\n        }\n        const options = panelOptions(panelRef.current);\n        const selected = options.find((option) => option.dataset.selected === 'true');\n        // Falls back to the panel: with no options nothing else can hold focus, and Tab-dismiss\n        // only fires from inside it.\n        (selected ?? options[0] ?? panelRef.current)?.focus();\n    }, [autoFocus, positioned]);\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>): void => {\n        // The panel is portaled to document.body, so the browser's next tab stop bears no\n        // relation to the trigger. Dismissing restores trigger focus so Tab resumes there.\n        if (event.key === 'Tab') {\n            onDismiss();\n            return;\n        }\n        const options = panelOptions(panelRef.current);\n        if (options.length === 0) {\n            return;\n        }\n        const current = options.indexOf(document.activeElement as HTMLElement);\n        const target = {\n            ArrowDown: current + 1,\n            ArrowUp: current - 1,\n            Home: 0,\n            End: options.length - 1,\n        }[event.key];\n        if (target === undefined) {\n            return;\n        }\n        event.preventDefault();\n        options[Math.min(Math.max(target, 0), options.length - 1)]?.focus();\n    };\n\n    // Inline styles, not Tailwind: this portals into document.body, outside the\n    // Shadow DOM the malachite stylesheet is adopted into.\n    return (\n        <div\n            ref={(node) => {\n                panelRef.current = node;\n                if (typeof ref === 'function') {\n                    ref(node);\n                } else if (ref) {\n                    ref.current = node;\n                }\n            }}\n            {...overlayIdentity('dropdown')}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            style={{\n                background: 'var(--malachite-card-background, rgb(255, 255, 255))',\n                border: '1px solid var(--malachite-card-border, rgb(232, 232, 232))',\n                borderRadius: 12,\n                boxShadow: '0px 2px 5px 0px rgba(0, 0, 0, 0.1)',\n                maxHeight: 400,\n                overflow: 'hidden',\n                fontSize: CONTROL_TEXT_SIZE[size],\n                ...style,\n            }}\n        >\n            {menuLoading ? (\n                <div style={PANEL_MESSAGE_STYLE}>\n                    <Spinner size=\"xxxsmall\" />\n                    <span>Loading…</span>\n                </div>\n            ) : items.length === 0 ? (\n                <div style={PANEL_MESSAGE_STYLE}>{emptyMessage}</div>\n            ) : (\n                <div\n                    style={{\n                        display: 'flex',\n                        flexDirection: 'column',\n                        gap: 4,\n                        padding: 4,\n                        maxHeight: 400,\n                        overflowY: 'auto',\n                        scrollbarWidth: 'thin',\n                        scrollbarColor:\n                            'var(--malachite-text-placeholder, rgb(187, 187, 187)) transparent',\n                    }}\n                >\n                    {items.map((item, index) => {\n                        const prev = items[index - 1];\n                        const showGroupHeader =\n                            !!item.group && (!prev || prev.group !== item.group);\n                        return (\n                            <div key={item.id} style={{ flexShrink: 0 }}>\n                                {showGroupHeader && (\n                                    <div\n                                        style={{\n                                            padding: '6px 10px 4px',\n                                            fontSize: 12,\n                                            fontWeight: 500,\n                                            color: 'var(--malachite-text-secondary, rgb(123, 123, 123))',\n                                            textTransform: 'none',\n                                            userSelect: 'none',\n                                        }}\n                                    >\n                                        {item.group}\n                                    </div>\n                                )}\n                                <DropdownItemComponent\n                                    item={item}\n                                    onItemSelected={onItemSelected}\n                                    subtitleLayout={subtitleLayout}\n                                    selected={item.id === selectedItem?.id || false}\n                                />\n                            </div>\n                        );\n                    })}\n                </div>\n            )}\n        </div>\n    );\n});\nDropdownPanel.displayName = 'DropdownPanel';\n\nexport const Dropdown = ({\n    items,\n    onItemSelected,\n    defaultValue,\n    value,\n    disabled = false,\n    error,\n    tone,\n    label,\n    hint,\n    tooltip,\n    name,\n    required = false,\n    requiredIndicator,\n    loading,\n    menuLoading,\n    formControl,\n    description,\n    helperText,\n    placeholder,\n    search = false,\n    showSubtitleInTrigger = false,\n    subtitleLayout = 'inline',\n    clearable = false,\n    size = 'large',\n    fullWidth = false,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n}: DropdownProps) => {\n    const { controlId, labelId, descriptionId, hintId, helperTextId } = useFormFieldIds({\n        id,\n        label,\n        description,\n        hint,\n        helperText: true,\n    });\n    const [isOpen, setIsOpen] = useState(false);\n    // The id, never the resolved item: a cached object goes stale when `items` is rebuilt.\n    const [ownValue, setOwnValue] = useState(defaultValue);\n    const selectedId = value ?? ownValue;\n    const selectedItem = items.find((item) => item.id === selectedId);\n    const showClear = clearable && selectedId !== undefined && selectedId !== '' && !disabled;\n    const triggerIsStacked = showSubtitleInTrigger && !search && !!selectedItem?.subtitle;\n    const clearLabel = `Clear ${label ?? placeholder ?? 'selection'}`;\n\n    // `defaultValue` only seeds the state, so a later change has to be pushed in.\n    const lastDefaultValueRef = useRef(defaultValue);\n    useEffect(() => {\n        if (lastDefaultValueRef.current === defaultValue) {\n            return;\n        }\n        lastDefaultValueRef.current = defaultValue;\n        setOwnValue(defaultValue);\n    }, [defaultValue]);\n    const [searchQuery, setSearchQuery] = useState('');\n    // Search mode only: set when the panel is opened by ArrowDown, so focus follows the\n    // user into the list on mount instead of staying in the input.\n    const [focusPanelOnOpen, setFocusPanelOnOpen] = useState(false);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const triggerRef = useRef<HTMLElement>(null);\n    const panelRef = useRef<HTMLDivElement>(null);\n    const [panelPosition, setPanelPosition] = useState<{\n        top: number;\n        left: number;\n        width: number;\n        openUp: boolean;\n    } | null>(null);\n\n    const reopenOnFocusRef = useRef(true);\n\n    // In search mode the trigger is a wrapper div; the focusable part is the input.\n    const focusTrigger = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) {\n            return;\n        }\n        (trigger instanceof HTMLButtonElement\n            ? trigger\n            : trigger.querySelector<HTMLElement>('input')\n        )?.focus();\n    }, []);\n\n    const handleClear = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n            setOwnValue(undefined);\n            // The resolver is told the empty this form started the field at; the public\n            // callback keeps reporting `undefined` whatever shape that is.\n            reportSelectionRef.current?.(reportEmptyRef.current);\n            onItemSelected?.(undefined);\n\n            if (search) {\n                reopenOnFocusRef.current = false;\n            }\n            focusTrigger();\n        },\n        [onItemSelected, search, focusTrigger],\n    );\n\n    const sizeRef = useRef(size);\n    const fullWidthRef = useRef(fullWidth);\n    const updatePanelPosition = useCallback(() => {\n        const trigger = triggerRef.current;\n        if (!trigger) return;\n\n        setPanelPosition(\n            computePanelGeometry({\n                triggerRect: trigger.getBoundingClientRect(),\n                panelWidth: panelRef.current?.offsetWidth ?? 0,\n                panelHeight: panelRef.current?.offsetHeight ?? 0,\n                size: sizeRef.current,\n                fullWidth: fullWidthRef.current,\n                viewportWidth: window.innerWidth,\n                viewportHeight: window.innerHeight,\n            }),\n        );\n    }, []);\n\n    // Before the next frame, or `followTrigger` writes geometry off stale values and\n    // `lastRect` stops it correcting. An open panel is remeasured here rather than left to\n    // that loop, which only fires when the trigger's own rect moves.\n    useLayoutEffect(() => {\n        sizeRef.current = size;\n        fullWidthRef.current = fullWidth;\n        if (isOpen) {\n            updatePanelPosition();\n        }\n    }, [size, fullWidth, isOpen, updatePanelPosition]);\n\n    useEffect(() => {\n        if (!isOpen) {\n            setPanelPosition(null);\n            setFocusPanelOnOpen(false);\n            return;\n        }\n        updatePanelPosition();\n        const handleClickOutside = (event: MouseEvent) => {\n            const path = event.composedPath();\n            const trigger = dropdownRef.current;\n            const panel = panelRef.current;\n            const inTrigger = !!trigger && path.includes(trigger);\n            const inPanel = !!panel && path.includes(panel);\n            if (!inTrigger && !inPanel) {\n                setIsOpen(false);\n                if (search) {\n                    setSearchQuery('');\n                }\n                // Closing unmounts whatever option held focus, so the focusout the wrapper\n                // below listens for never fires. Clicking away from an open menu is the one\n                // way of leaving the field that has to report the blur itself.\n                reportBlurRef.current?.();\n            }\n        };\n        // ESC via the shared layer stack: closes only the topmost overlay. Focus is\n        // restored explicitly — unmounting the option it sits on would drop it to <body>.\n        const popEscapeLayer = pushEscapeLayer(() => {\n            setIsOpen(false);\n            if (search) {\n                setSearchQuery('');\n            }\n            focusTrigger();\n        });\n        const handleScrollOrResize = () => updatePanelPosition();\n\n        // `scroll` is not composed: a window listener never hears a scroller inside a\n        // consumer's shadow root, so the trigger's rect is tracked instead.\n        let frame = 0;\n        let lastRect = '';\n        const followTrigger = () => {\n            const trigger = triggerRef.current;\n            if (trigger) {\n                const rect = trigger.getBoundingClientRect();\n\n                if (isTriggerOffscreen(rect, window.innerWidth, window.innerHeight)) {\n                    setIsOpen(false);\n                    if (search) {\n                        setSearchQuery('');\n                    }\n                    return;\n                }\n\n                const signature = rectSignature(rect);\n                if (signature !== lastRect) {\n                    lastRect = signature;\n                    updatePanelPosition();\n                }\n            }\n            frame = requestAnimationFrame(followTrigger);\n        };\n        frame = requestAnimationFrame(followTrigger);\n\n        document.addEventListener('mousedown', handleClickOutside);\n        window.addEventListener('scroll', handleScrollOrResize, true);\n        window.addEventListener('resize', handleScrollOrResize);\n        return () => {\n            cancelAnimationFrame(frame);\n            document.removeEventListener('mousedown', handleClickOutside);\n            popEscapeLayer();\n            window.removeEventListener('scroll', handleScrollOrResize, true);\n            window.removeEventListener('resize', handleScrollOrResize);\n        };\n    }, [isOpen, search, updatePanelPosition, focusTrigger]);\n\n    // Re-measure once the panel paints so open-up/down uses its real height.\n    useLayoutEffect(() => {\n        if (isOpen && panelRef.current) {\n            updatePanelPosition();\n        }\n    }, [isOpen, updatePanelPosition]);\n\n    const reportSelectionRef = useRef<((value: unknown) => void) | undefined>(undefined);\n    const reportBlurRef = useRef<(() => void) | undefined>(undefined);\n    const reportEmptyRef = useRef<unknown>('');\n\n    const handleItemSelected = (item?: DropdownItem) => {\n        setOwnValue(item?.id);\n        reportSelectionRef.current?.(item?.id ?? reportEmptyRef.current);\n        setIsOpen(false);\n        if (search) {\n            setSearchQuery('');\n            // Focus returns to the search input, whose focus handler would reopen the panel.\n            reopenOnFocusRef.current = false;\n        }\n        onItemSelected?.(item?.id);\n        focusTrigger();\n    };\n\n    const dismissPanel = () => {\n        setIsOpen(false);\n        if (search) {\n            setSearchQuery('');\n        }\n        focusTrigger();\n    };\n\n    // ArrowDown is the \"take me into the list\" gesture. When it also opens the panel the\n    // intent carries over to the mount, so it doesn't cost a second press in search mode.\n    const enterPanel = () => {\n        const first = panelOptions(panelRef.current)[0];\n        if (first) {\n            first.focus();\n            return;\n        }\n        setFocusPanelOnOpen(true);\n        setIsOpen(true);\n    };\n\n    const visibleItems =\n        search && searchQuery ? items.filter((item) => matchesSearch(item, searchQuery)) : items;\n\n    return (\n        <BaseFormComponent\n            fullWidth={fullWidth}\n            label={label}\n            hint={hint}\n            tooltip={tooltip}\n            name={name}\n            required={required}\n            requiredIndicator={requiredIndicator}\n            loading={loading}\n            formControl={formControl}\n            description={description}\n            controlId={controlId}\n            labelId={labelId}\n            descriptionId={descriptionId}\n            hintId={hintId}\n            loadingComponent={\n                <LoadingInput\n                    heightClass={TRIGGER_SIZE_HEIGHT[size]}\n                    helperText={!!helperText}\n                    helperTextMarginTop\n                />\n            }\n        >\n            {({ error: fieldError, message, onFieldChange, onFieldBlur, emptyValue }) => {\n                reportSelectionRef.current = onFieldChange;\n                reportBlurRef.current = onFieldBlur;\n                reportEmptyRef.current = emptyValue;\n                const isError = error ?? fieldError;\n                // `error={false}` opts out of the resolver entirely, message included: a screen\n                // that has dealt with the rejection its own way would otherwise keep reporting it.\n                // The message is its own line rather than a replacement for the helper text,\n                // matching Input and TextArea: a field that explains what it wants still has to\n                // say why what was chosen was rejected.\n                const errorMessage = error === false ? undefined : message;\n                const errorMessageId = `${helperTextId}-error`;\n                const describedBy =\n                    [\n                        descriptionId,\n                        hintId,\n                        helperText ? helperTextId : undefined,\n                        errorMessage ? errorMessageId : undefined,\n                    ]\n                        .filter(Boolean)\n                        .join(' ') || undefined;\n\n                return (\n                    <>\n                        <div\n                            ref={dropdownRef}\n                            className={`relative w-full`}\n                            // Only leaving the field altogether is a blur `mode: 'onBlur'` should\n                            // hear. The panel is portaled to the body, so containment has to be\n                            // asked of it separately — otherwise opening the menu reads as\n                            // leaving, and the form validates before anything has been chosen.\n                            onBlur={(event) => {\n                                const next = event.relatedTarget as Node | null;\n                                const staysInField =\n                                    event.currentTarget.contains(next) ||\n                                    panelRef.current?.contains(next) === true;\n\n                                if (!staysInField) {\n                                    reportBlurRef.current?.();\n                                }\n                            }}\n                        >\n                            {showClear && !search && (\n                                <button\n                                    type=\"button\"\n                                    onClick={handleClear}\n                                    aria-label={clearLabel}\n                                    className={`absolute ${\n                                        triggerIsStacked\n                                            ? CLEAR_STACKED_TOP_CLASSES[size]\n                                            : 'top-1/2 -translate-y-1/2'\n                                    } z-10 flex items-center\n                            justify-center rounded-full text-[var(--malachite-text-placeholder)]\n                            hover:text-[var(--malachite-text-primary)] transition-colors\n                            focus-visible:[outline:2px_solid_var(--malachite-text-primary)] focus-visible:outline-offset-2 ${CLEAR_OFFSET_CLASSES[size]}`}\n                                >\n                                    <CloseIcon size={13} />\n                                </button>\n                            )}\n                            <DropdownTrigger\n                                hasClear={showClear}\n                                onClear={handleClear}\n                                clearLabel={clearLabel}\n                                ref={triggerRef as React.Ref<HTMLElement>}\n                                isOpen={isOpen}\n                                onClick={() => !disabled && setIsOpen(!isOpen)}\n                                selectedItem={selectedItem}\n                                disabled={disabled}\n                                error={isError}\n                                tone={tone}\n                                placeholder={placeholder}\n                                search={search}\n                                showSubtitleInTrigger={showSubtitleInTrigger}\n                                searchQuery={searchQuery}\n                                onSearchChange={setSearchQuery}\n                                onFocusOpen={() => {\n                                    if (!reopenOnFocusRef.current) {\n                                        reopenOnFocusRef.current = true;\n                                        return;\n                                    }\n                                    setIsOpen(true);\n                                }}\n                                onArrowDown={() => {\n                                    if (!disabled) {\n                                        enterPanel();\n                                    }\n                                }}\n                                size={size}\n                                controlId={controlId}\n                                hasCallerId={!!id}\n                                labelId={labelId}\n                                describedBy={describedBy}\n                                required={required}\n                                ariaLabel={ariaLabel}\n                                ariaLabelledBy={ariaLabelledBy}\n                            />\n                            {isOpen &&\n                                createPortal(\n                                    <DropdownPanel\n                                        ref={panelRef}\n                                        style={{\n                                            position: 'fixed',\n                                            top: panelPosition?.top ?? 0,\n                                            left: panelPosition?.left ?? 0,\n                                            width: isContentSizedPanel(size, fullWidth)\n                                                ? 'auto'\n                                                : panelPosition?.width,\n                                            maxWidth: isContentSizedPanel(size, fullWidth)\n                                                ? `calc(100vw - ${PANEL_VIEWPORT_PADDING_PX * 2}px)`\n                                                : undefined,\n                                            visibility: panelPosition ? 'visible' : 'hidden',\n                                            opacity: panelPosition ? 1 : 0,\n                                        }}\n                                        items={visibleItems}\n                                        onItemSelected={handleItemSelected}\n                                        selectedItem={selectedItem}\n                                        menuLoading={menuLoading}\n                                        emptyMessage={\n                                            items.length === 0\n                                                ? 'No options available'\n                                                : 'No results found'\n                                        }\n                                        subtitleLayout={subtitleLayout}\n                                        size={size}\n                                        autoFocus={!search || focusPanelOnOpen}\n                                        positioned={panelPosition !== null}\n                                        onDismiss={dismissPanel}\n                                    />,\n                                    document.body,\n                                )}\n                        </div>\n                        {helperText && (\n                            <div\n                                id={helperTextId}\n                                className=\"mt-1 text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]\"\n                            >\n                                {helperText}\n                            </div>\n                        )}\n                        <FieldMessage id={errorMessageId} message={errorMessage} spaced />\n                    </>\n                );\n            }}\n        </BaseFormComponent>\n    );\n};\n\nexport default Dropdown;\n"],"names":["PANEL_MESSAGE_STYLE","ANNOTATION_FONT_SIZE","OPTION_SELECTOR","panelOptions","panel","matchesSearch","item","query","q","labelMatches","subtitleMatches","rightSideTextMatches","TRIGGER_SIZE_HEIGHT","TRIGGER_SIZE_CLASSES","CONTROL_TEXT_SIZE_CLASS","TRIGGER_SIZE_STACKED_CLASSES","CLEAR_OFFSET_CLASSES","CLEAR_STACKED_TOP_CLASSES","TRIGGER_SIZE_RADIUS","NEVER","TOOLTIP_LINES_STYLE","triggerTooltipText","lines","valueText","subtitle","jsxs","jsx","ValueRow","wrap","id","children","Fragment","LabelRow","row","DropdownTrigger","React","isOpen","onClick","selectedItem","disabled","error","tone","placeholder","search","showSubtitleInTrigger","searchQuery","onSearchChange","onFocusOpen","onArrowDown","size","hasClear","onClear","clearLabel","controlId","labelId","describedBy","required","ariaLabel","ariaLabelledBy","hasCallerId","forwardedRef","stacked","sizeClasses","sizeRadius","valueId","subtitleId","namesItself","labelledBy","handleArrowDown","event","valueTextRef","useRef","subtitleTextRef","triggerVisual","getTriggerVisual","showValueLabel","triggerSubtitle","isValueTruncated","el","isSubtitleTruncated","truncatedLines","setTruncatedLines","useState","measureTruncatedLines","value","DROPDOWN_TRIGGER_ATTR","e","Tooltip","CloseIcon","CaretDownIcon","trigger","DropdownItemComponent","selected","subtitleLayout","onItemSelected","textColor","optionId","useId","optionLabelId","optionSubtitleId","subtitleRef","rightSideTextColor","rightSideJustify","option","DropdownPanel","props","ref","items","menuLoading","emptyMessage","autoFocus","positioned","onDismiss","style","panelRef","useInsertionEffect","ensureDropdownPanelStyles","useTopLayer","useEffect","options","_a","handleKeyDown","current","target","node","overlayIdentity","CONTROL_TEXT_SIZE","Spinner","index","prev","showGroupHeader","Dropdown","defaultValue","label","hint","tooltip","name","requiredIndicator","loading","formControl","description","helperText","clearable","fullWidth","descriptionId","hintId","helperTextId","useFormFieldIds","setIsOpen","ownValue","setOwnValue","selectedId","showClear","triggerIsStacked","lastDefaultValueRef","setSearchQuery","focusPanelOnOpen","setFocusPanelOnOpen","dropdownRef","triggerRef","panelPosition","setPanelPosition","reopenOnFocusRef","focusTrigger","useCallback","handleClear","reportSelectionRef","reportEmptyRef","sizeRef","fullWidthRef","updatePanelPosition","computePanelGeometry","_b","useLayoutEffect","handleClickOutside","path","inTrigger","inPanel","reportBlurRef","popEscapeLayer","pushEscapeLayer","handleScrollOrResize","frame","lastRect","followTrigger","rect","isTriggerOffscreen","signature","rectSignature","handleItemSelected","dismissPanel","enterPanel","first","visibleItems","BaseFormComponent","LoadingInput","fieldError","message","onFieldChange","onFieldBlur","emptyValue","isError","errorMessage","errorMessageId","next","createPortal","isContentSizedPanel","PANEL_VIEWPORT_PADDING_PX","FieldMessage"],"mappings":"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"}

package/dist/components/FieldBlock.js

@@ -0,0 +1,25 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import o from "./Spacer.js";
+import t from "./Typography/Text.js";
+const l = (e) => e != null && e !== !1 && e !== !0 && e !== "", x = ({
+  label: e,
+  badge: s,
+  action: r,
+  helperText: c,
+  children: a,
+  className: d = "",
+  style: n
+}) => /* @__PURE__ */ i("div", { className: d, style: n, children: /* @__PURE__ */ m(o, { direction: "vertical", size: 6, align: "stretch", fullWidth: !0, children: [
+  (l(e) || l(s) || l(r)) && /* @__PURE__ */ m("div", { className: "flex items-center gap-1.5 px-2", children: [
+    l(e) && /* @__PURE__ */ i(t, { size: "xsmall", color: "primary", fontWeight: "semi-bold", children: e }),
+    l(s) && /* @__PURE__ */ i("span", { className: "flex items-center", children: s }),
+    l(r) && /* @__PURE__ */ i("span", { className: "ml-auto flex", children: r })
+  ] }),
+  /* @__PURE__ */ i("div", { className: "px-2", children: a }),
+  l(c) && /* @__PURE__ */ i("div", { className: "px-2", children: /* @__PURE__ */ i(t, { size: "small", color: "dimmed", children: c }) })
+] }) });
+export {
+  x as FieldBlock,
+  x as default
+};
+//# sourceMappingURL=FieldBlock.js.map

package/dist/components/FieldBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldBlock.js","sources":["../../src/components/FieldBlock.tsx"],"sourcesContent":["import React from 'react';\nimport Spacer from './Spacer';\nimport Text from './Typography/Text';\n\nexport interface FieldBlockProps {\n    label?: string;\n    /** Sits beside the label — a count, a status. */\n    badge?: React.ReactNode;\n    /** Sits at the far end of the label row — a copy button, a link. */\n    action?: React.ReactNode;\n    helperText?: React.ReactNode;\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n// `{cond && <Badge/>}` yields `false` when cond is false, and React paints it as nothing —\n// counted as present it opens an empty label row and the gap above it. `0` is a real badge.\nconst present = (node: React.ReactNode): boolean =>\n    node !== undefined && node !== null && node !== false && node !== true && node !== '';\n\n/**\n * Something a form has to show but does not ask for — a computed list, a generated value —\n * wearing a field's anatomy: label, content, helper text, on a field's metrics.\n */\nexport const FieldBlock: React.FC<FieldBlockProps> = ({\n    label,\n    badge,\n    action,\n    helperText,\n    children,\n    className = '',\n    style,\n}) => (\n    <div className={className} style={style}>\n        <Spacer direction=\"vertical\" size={6} align=\"stretch\" fullWidth>\n            {(present(label) || present(badge) || present(action)) && (\n                <div className=\"flex items-center gap-1.5 px-2\">\n                    {present(label) && (\n                        <Text size=\"xsmall\" color=\"primary\" fontWeight=\"semi-bold\">\n                            {label}\n                        </Text>\n                    )}\n                    {present(badge) && <span className=\"flex items-center\">{badge}</span>}\n                    {present(action) && <span className=\"ml-auto flex\">{action}</span>}\n                </div>\n            )}\n            <div className=\"px-2\">{children}</div>\n            {present(helperText) && (\n                <div className=\"px-2\">\n                    <Text size=\"small\" color=\"dimmed\">\n                        {helperText}\n                    </Text>\n                </div>\n            )}\n        </Spacer>\n    </div>\n);\n\nexport default FieldBlock;\n"],"names":["present","node","FieldBlock","label","badge","action","helperText","children","className","style","jsx","jsxs","Spacer","Text"],"mappings":";;;AAkBA,MAAMA,IAAU,CAACC,MACSA,KAAS,QAAQA,MAAS,MAASA,MAAS,MAAQA,MAAS,IAM1EC,IAAwC,CAAC;AAAA,EAClD,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAAF,GAAsB,OAAAC,GACvB,UAAA,gBAAAE,EAACC,GAAA,EAAO,WAAU,YAAW,MAAM,GAAG,OAAM,WAAU,WAAS,IACzD,UAAA;AAAA,GAAAZ,EAAQG,CAAK,KAAKH,EAAQI,CAAK,KAAKJ,EAAQK,CAAM,MAChD,gBAAAM,EAAC,OAAA,EAAI,WAAU,kCACV,UAAA;AAAA,IAAAX,EAAQG,CAAK,KACV,gBAAAO,EAACG,GAAA,EAAK,MAAK,UAAS,OAAM,WAAU,YAAW,aAC1C,UAAAV,EAAA,CACL;AAAA,IAEHH,EAAQI,CAAK,uBAAM,QAAA,EAAK,WAAU,qBAAqB,UAAAA,GAAM;AAAA,IAC7DJ,EAAQK,CAAM,uBAAM,QAAA,EAAK,WAAU,gBAAgB,UAAAA,EAAA,CAAO;AAAA,EAAA,GAC/D;AAAA,EAEJ,gBAAAK,EAAC,OAAA,EAAI,WAAU,QAAQ,UAAAH,EAAA,CAAS;AAAA,EAC/BP,EAAQM,CAAU,KACf,gBAAAI,EAAC,SAAI,WAAU,QACX,UAAA,gBAAAA,EAACG,GAAA,EAAK,MAAK,SAAQ,OAAM,UACpB,aACL,EAAA,CACJ;AAAA,EAAA,CAER,EAAA,CACJ;"}

package/dist/components/FieldGroup.js

@@ -0,0 +1,23 @@
+import { jsx as o } from "react/jsx-runtime";
+const d = {
+  small: "gap-5",
+  medium: "gap-10",
+  large: "gap-[60px]"
+}, s = ({
+  children: r,
+  gap: e = "medium",
+  className: l = "",
+  style: a
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: `flex flex-col items-stretch w-full pl-5 border-l-2 border-solid border-[var(--malachite-card-border,rgb(232,232,232))] ${d[e]} ${l}`.trim(),
+    style: a,
+    children: r
+  }
+);
+export {
+  s as FieldGroup,
+  s as default
+};
+//# sourceMappingURL=FieldGroup.js.map

package/dist/components/FieldGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldGroup.js","sources":["../../src/components/FieldGroup.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FieldGroupGap = 'small' | 'medium' | 'large';\n\nexport interface FieldGroupProps {\n    children: React.ReactNode;\n    gap?: FieldGroupGap;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst GAP_CLASSES: Record<FieldGroupGap, string> = {\n    small: 'gap-5',\n    medium: 'gap-10',\n    large: 'gap-[60px]',\n};\n\n/**\n * Fields that follow from an answer given above them — the credentials a chosen\n * authentication type asks for, say — drawn as its children: indented, with a rule down the side.\n */\nexport const FieldGroup: React.FC<FieldGroupProps> = ({\n    children,\n    gap = 'medium',\n    className = '',\n    style,\n}) => (\n    <div\n        className={`flex flex-col items-stretch w-full pl-5 border-l-2 border-solid border-[var(--malachite-card-border,rgb(232,232,232))] ${GAP_CLASSES[gap]} ${className}`.trim()}\n        style={style}\n    >\n        {children}\n    </div>\n);\n\nexport default FieldGroup;\n"],"names":["GAP_CLASSES","FieldGroup","children","gap","className","style","jsx"],"mappings":";AAWA,MAAMA,IAA6C;AAAA,EAC/C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAMaC,IAAwC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,OAAAC;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,0HAA0HN,EAAYG,CAAG,CAAC,IAAIC,CAAS,GAAG,KAAA;AAAA,IACrK,OAAAC;AAAA,IAEC,UAAAH;AAAA,EAAA;AACL;"}

package/dist/components/FieldMessage.js

@@ -0,0 +1,15 @@
+import { jsx as l } from "react/jsx-runtime";
+const i = "text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]", s = ({ id: e, message: t, spaced: a = !1 }) => /* @__PURE__ */ l(
+  "div",
+  {
+    id: e,
+    "aria-live": "polite",
+    className: t ? `${a ? "mt-1 " : ""}${i}` : "absolute",
+    children: t
+  }
+);
+export {
+  s as FieldMessage,
+  s as default
+};
+//# sourceMappingURL=FieldMessage.js.map

package/dist/components/FieldMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldMessage.js","sources":["../../src/components/FieldMessage.tsx"],"sourcesContent":["import type React from 'react';\n\nconst MESSAGE_CLASSES =\n    'text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]';\n\ninterface FieldMessageProps {\n    id?: string;\n    message?: string;\n    /** The controls that sit their message under a helper line need the gap; `Input` does not. */\n    spaced?: boolean;\n}\n\n/**\n * A field's validation message. The live region is mounted whether or not there is anything\n * to say, because a region inserted with its text already inside it is not a mutation and\n * screen readers stay silent — which would lose the first rejection, the one that matters.\n * Out of flow while empty, so a flex parent's `gap` reserves no space beside it.\n */\nexport const FieldMessage: React.FC<FieldMessageProps> = ({ id, message, spaced = false }) => (\n    <div\n        id={id}\n        // Polite rather than assertive: the message is also the field's description via\n        // aria-describedby, and an interrupting region says it a second time.\n        aria-live=\"polite\"\n        className={message ? `${spaced ? 'mt-1 ' : ''}${MESSAGE_CLASSES}` : 'absolute'}\n    >\n        {message}\n    </div>\n);\n\nexport default FieldMessage;\n"],"names":["MESSAGE_CLASSES","FieldMessage","id","message","spaced","jsx"],"mappings":";AAEA,MAAMA,IACF,oIAeSC,IAA4C,CAAC,EAAE,IAAAC,GAAI,SAAAC,GAAS,QAAAC,IAAS,SAC9E,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,IAAAH;AAAA,IAGA,aAAU;AAAA,IACV,WAAWC,IAAU,GAAGC,IAAS,UAAU,EAAE,GAAGJ,CAAe,KAAK;AAAA,IAEnE,UAAAG;AAAA,EAAA;AACL;"}

package/dist/components/Flex.js

@@ -0,0 +1,45 @@
+import { jsx as v } from "react/jsx-runtime";
+import { FlexDirection as r, FlexAlign as g, FlexJustify as h, FlexGapSize as e } from "./flexTypes.js";
+const y = (t) => {
+  switch (t) {
+    case e.XSmall:
+      return 8;
+    case e.Small:
+      return 12;
+    case e.Medium:
+      return 24;
+    case e.Large:
+      return 36;
+  }
+}, z = ({
+  justify: t = h.Center,
+  align: o = g.Center,
+  gapSize: i,
+  direction: a = r.Horizontal,
+  fullHeight: n = !1,
+  grow: s = !1,
+  shrink: c = !1,
+  wrap: f = !1,
+  width: d,
+  id: x,
+  children: u,
+  className: m = ""
+}) => {
+  const l = i ? y(i) : void 0, p = {
+    display: "flex",
+    flexDirection: a === r.Vertical ? "column" : "row",
+    flexWrap: f ? "wrap" : void 0,
+    justifyContent: t,
+    alignItems: o,
+    gap: l ? `${l}px` : void 0,
+    height: n ? "100%" : void 0,
+    flex: s ? 1 : void 0,
+    minWidth: c ? 0 : void 0,
+    width: d || void 0
+  };
+  return /* @__PURE__ */ v("div", { id: x, className: m, style: p, children: u });
+};
+export {
+  z as default
+};
+//# sourceMappingURL=Flex.js.map

package/dist/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from 'react';\nimport { FlexAlign, FlexDirection, FlexGapSize, FlexJustify } from './flexTypes';\n\n\n\n\n\ninterface FlexProps {\n    justify?: FlexJustify;\n    align?: FlexAlign;\n    gapSize?: FlexGapSize;\n    direction?: FlexDirection;\n    fullHeight?: boolean;\n    grow?: boolean;\n    shrink?: boolean;\n    wrap?: boolean;\n    width?: string;\n    id?: string;\n    children?: React.ReactNode;\n    className?: string;\n}\n\nconst getGapSize = (size: FlexGapSize): number => {\n    switch (size) {\n        case FlexGapSize.XSmall:\n            return 8;\n        case FlexGapSize.Small:\n            return 12;\n        case FlexGapSize.Medium:\n            return 24;\n        case FlexGapSize.Large:\n            return 36;\n    }\n};\n\nconst Flex: React.FC<FlexProps> = ({\n    justify = FlexJustify.Center,\n    align = FlexAlign.Center,\n    gapSize,\n    direction = FlexDirection.Horizontal,\n    fullHeight = false,\n    grow = false,\n    shrink = false,\n    wrap = false,\n    width,\n    id,\n    children,\n    className = '',\n}) => {\n    const gapSizeValue = gapSize ? getGapSize(gapSize) : undefined;\n\n    // Convert direction to CSS flex-direction\n    const flexDirection = direction === FlexDirection.Vertical ? 'column' : 'row';\n\n    const baseStyle: React.CSSProperties = {\n        display: 'flex',\n        flexDirection,\n        flexWrap: wrap ? 'wrap' : undefined,\n        justifyContent: justify,\n        alignItems: align,\n        gap: gapSizeValue ? `${gapSizeValue}px` : undefined,\n        height: fullHeight ? '100%' : undefined,\n        flex: grow ? 1 : undefined,\n        minWidth: shrink ? 0 : undefined,\n        width: width || undefined,\n    };\n\n    return (\n        <div id={id} className={className} style={baseStyle}>\n            {children}\n        </div>\n    );\n};\n\nexport default Flex;\n"],"names":["getGapSize","size","FlexGapSize","Flex","justify","FlexJustify","align","FlexAlign","gapSize","direction","FlexDirection","fullHeight","grow","shrink","wrap","width","id","children","className","gapSizeValue","baseStyle"],"mappings":";;AAsBA,MAAMA,IAAa,CAACC,MAA8B;AAC9C,UAAQA,GAAA;AAAA,IACJ,KAAKC,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,IACX,KAAKA,EAAY;AACb,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAA4B,CAAC;AAAA,EAC/B,SAAAC,IAAUC,EAAY;AAAA,EACtB,OAAAC,IAAQC,EAAU;AAAA,EAClB,SAAAC;AAAA,EACA,WAAAC,IAAYC,EAAc;AAAA,EAC1B,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,QAAAC,IAAS;AAAA,EACT,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAeX,IAAUR,EAAWQ,CAAO,IAAI,QAK/CY,IAAiC;AAAA,IACnC,SAAS;AAAA,IACT,eAJkBX,MAAcC,EAAc,WAAW,WAAW;AAAA,IAKpE,UAAUI,IAAO,SAAS;AAAA,IAC1B,gBAAgBV;AAAA,IAChB,YAAYE;AAAA,IACZ,KAAKa,IAAe,GAAGA,CAAY,OAAO;AAAA,IAC1C,QAAQR,IAAa,SAAS;AAAA,IAC9B,MAAMC,IAAO,IAAI;AAAA,IACjB,UAAUC,IAAS,IAAI;AAAA,IACvB,OAAOE,KAAS;AAAA,EAAA;AAGpB,2BACK,OAAA,EAAI,IAAAC,GAAQ,WAAAE,GAAsB,OAAOE,GACrC,UAAAH,GACL;AAER;"}

package/dist/components/FooterLinks.js

@@ -0,0 +1,88 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import s from "../assets/logo-stackone-desaturated.png.js";
+import n from "./Spacer.js";
+import r from "./Typography/LinkText.js";
+const h = ({
+  fullWidth: o = !1,
+  showDocsSupport: i = !1
+}) => /* @__PURE__ */ t(
+  n,
+  {
+    direction: "horizontal",
+    size: 10,
+    fullWidth: o,
+    justifyContent: o ? "space-between" : void 0,
+    align: "center",
+    children: [
+      /* @__PURE__ */ e(r, { href: "https://www.stackone.com", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ e(
+        "img",
+        {
+          src: s,
+          width: 16,
+          alt: "StackOne Logo",
+          style: {
+            opacity: 1,
+            marginLeft: "5px"
+          }
+        }
+      ) }),
+      i ? /* @__PURE__ */ t(n, { direction: "horizontal", size: 10, children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            href: "https://docs.stackone.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            color: "dimmed",
+            fontSize: "sm",
+            padding: !0,
+            showLeftBorder: !o,
+            showRightBorder: !0,
+            children: "Docs"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            href: "https://www.stackone.com/",
+            rel: "noopener noreferrer",
+            target: "_blank",
+            color: "dimmed",
+            fontSize: "sm",
+            children: "Support"
+          }
+        )
+      ] }) : /* @__PURE__ */ t(n, { direction: "horizontal", size: 10, children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            href: "https://www.stackone.com/terms/end-customer-terms",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            color: "dimmed",
+            fontSize: "sm",
+            padding: !0,
+            showLeftBorder: !o,
+            showRightBorder: !0,
+            children: "Terms"
+          }
+        ),
+        /* @__PURE__ */ e(
+          r,
+          {
+            href: "https://www.stackone.com/terms/privacy-policy",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            color: "dimmed",
+            fontSize: "sm",
+            children: "Privacy"
+          }
+        )
+      ] })
+    ]
+  }
+);
+export {
+  h as default
+};
+//# sourceMappingURL=FooterLinks.js.map

package/dist/components/FooterLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterLinks.js","sources":["../../src/components/FooterLinks.tsx"],"sourcesContent":["import React from 'react';\nimport StackOneLogoDesaturated from '../assets/logo-stackone-desaturated.png';\nimport Spacer from './Spacer';\nimport LinkText from './Typography/LinkText';\n\ninterface FooterLinksProps {\n    fullWidth?: boolean;\n    showDocsSupport?: boolean;\n}\n\nconst FooterLinks: React.FC<FooterLinksProps> = ({\n    fullWidth = false,\n    showDocsSupport = false,\n}) => {\n    const renderLinks = () => {\n        if (showDocsSupport) {\n            return (\n                <Spacer direction=\"horizontal\" size={10}>\n                    <LinkText\n                        href=\"https://docs.stackone.com\"\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        color=\"dimmed\"\n                        fontSize=\"sm\"\n                        padding={true}\n                        showLeftBorder={!fullWidth}\n                        showRightBorder={true}\n                    >\n                        Docs\n                    </LinkText>\n                    <LinkText\n                        href=\"https://www.stackone.com/\"\n                        rel=\"noopener noreferrer\"\n                        target=\"_blank\"\n                        color=\"dimmed\"\n                        fontSize=\"sm\"\n                    >\n                        Support\n                    </LinkText>\n                </Spacer>\n            );\n        }\n\n        return (\n            <Spacer direction=\"horizontal\" size={10}>\n                <LinkText\n                    href=\"https://www.stackone.com/terms/end-customer-terms\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    color=\"dimmed\"\n                    fontSize=\"sm\"\n                    padding={true}\n                    showLeftBorder={!fullWidth}\n                    showRightBorder={true}\n                >\n                    Terms\n                </LinkText>\n                <LinkText\n                    href=\"https://www.stackone.com/terms/privacy-policy\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    color=\"dimmed\"\n                    fontSize=\"sm\"\n                >\n                    Privacy\n                </LinkText>\n            </Spacer>\n        );\n    };\n\n    return (\n        <Spacer\n            direction=\"horizontal\"\n            size={10}\n            fullWidth={fullWidth}\n            justifyContent={fullWidth ? 'space-between' : undefined}\n            align=\"center\"\n        >\n            <LinkText href=\"https://www.stackone.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n                <img\n                    src={StackOneLogoDesaturated}\n                    width={16}\n                    alt=\"StackOne Logo\"\n                    style={{\n                        opacity: 1,\n                        marginLeft: '5px',\n                    }}\n                />\n            </LinkText>\n            {renderLinks()}\n        </Spacer>\n    );\n};\n\nexport default FooterLinks;\n"],"names":["FooterLinks","fullWidth","showDocsSupport","jsxs","Spacer","jsx","LinkText","StackOneLogoDesaturated"],"mappings":";;;;AAUA,MAAMA,IAA0C,CAAC;AAAA,EAC7C,WAAAC,IAAY;AAAA,EACZ,iBAAAC,IAAkB;AACtB,MA0DQ,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,WAAU;AAAA,IACV,MAAM;AAAA,IACN,WAAAH;AAAA,IACA,gBAAgBA,IAAY,kBAAkB;AAAA,IAC9C,OAAM;AAAA,IAEN,UAAA;AAAA,MAAA,gBAAAI,EAACC,KAAS,MAAK,4BAA2B,QAAO,UAAS,KAAI,uBAC1D,UAAA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,KAAKE;AAAA,UACL,OAAO;AAAA,UACP,KAAI;AAAA,UACJ,OAAO;AAAA,YACH,SAAS;AAAA,YACT,YAAY;AAAA,UAAA;AAAA,QAChB;AAAA,MAAA,GAER;AAAA,MAzEAL,IAEI,gBAAAC,EAACC,GAAA,EAAO,WAAU,cAAa,MAAM,IACjC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,UAAS;AAAA,YACT,SAAS;AAAA,YACT,gBAAgB,CAACL;AAAA,YACjB,iBAAiB;AAAA,YACpB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,OAAM;AAAA,YACN,UAAS;AAAA,YACZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GACJ,IAKJ,gBAAAH,EAACC,GAAA,EAAO,WAAU,cAAa,MAAM,IACjC,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,UAAS;AAAA,YACT,SAAS;AAAA,YACT,gBAAgB,CAACL;AAAA,YACjB,iBAAiB;AAAA,YACpB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,UAAS;AAAA,YACZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,GACJ;AAAA,IAuBa;AAAA,EAAA;AAAA;"}

package/dist/components/FooterNav.js

@@ -0,0 +1,19 @@
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import s from "react";
+const r = "text-[13px] font-medium no-underline text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-secondary)]", d = ({ links: c, className: o = "" }) => /* @__PURE__ */ t("nav", { className: `flex items-center justify-center gap-[8px] ${o}`, children: c.map((e, a) => /* @__PURE__ */ l(s.Fragment, { children: [
+  a > 0 && /* @__PURE__ */ t("span", { className: "text-[13px] text-[var(--malachite-card-border)]", children: "•" }),
+  e.href ? /* @__PURE__ */ t("a", { href: e.href, onClick: e.onClick, className: r, children: e.label }) : /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: e.onClick,
+      className: `${r} bg-transparent border-0 cursor-pointer`,
+      children: e.label
+    }
+  )
+] }, `${a}-${e.label}`)) });
+export {
+  d as FooterNav,
+  d as default
+};
+//# sourceMappingURL=FooterNav.js.map

package/dist/components/FooterNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterNav.js","sources":["../../src/components/FooterNav.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface FooterNavLink {\n    label: string;\n    href?: string;\n    onClick?: () => void;\n}\n\nexport interface FooterNavProps {\n    links: FooterNavLink[];\n    className?: string;\n}\n\nconst ITEM_CLASSES =\n    'text-[13px] font-medium no-underline text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-secondary)]';\n\nconst FooterNav: React.FC<FooterNavProps> = ({ links, className = '' }) => (\n    <nav className={`flex items-center justify-center gap-[8px] ${className}`}>\n        {links.map((link, index) => (\n            <React.Fragment key={`${index}-${link.label}`}>\n                {index > 0 && (\n                    <span className=\"text-[13px] text-[var(--malachite-card-border)]\">•</span>\n                )}\n                {link.href ? (\n                    <a href={link.href} onClick={link.onClick} className={ITEM_CLASSES}>\n                        {link.label}\n                    </a>\n                ) : (\n                    <button\n                        type=\"button\"\n                        onClick={link.onClick}\n                        className={`${ITEM_CLASSES} bg-transparent border-0 cursor-pointer`}\n                    >\n                        {link.label}\n                    </button>\n                )}\n            </React.Fragment>\n        ))}\n    </nav>\n);\n\nexport default FooterNav;\nexport { FooterNav };\n"],"names":["ITEM_CLASSES","FooterNav","links","className","link","index","jsxs","React","jsx"],"mappings":";;AAaA,MAAMA,IACF,8HAEEC,IAAsC,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,GAAA,wBAC7D,OAAA,EAAI,WAAW,8CAA8CA,CAAS,IAClE,YAAM,IAAI,CAACC,GAAMC,MACd,gBAAAC,EAACC,EAAM,UAAN,EACI,UAAA;AAAA,EAAAF,IAAQ,KACL,gBAAAG,EAAC,QAAA,EAAK,WAAU,mDAAkD,UAAA,KAAC;AAAA,EAEtEJ,EAAK,OACF,gBAAAI,EAAC,KAAA,EAAE,MAAMJ,EAAK,MAAM,SAASA,EAAK,SAAS,WAAWJ,GACjD,UAAAI,EAAK,OACV,IAEA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAASJ,EAAK;AAAA,MACd,WAAW,GAAGJ,CAAY;AAAA,MAEzB,UAAAI,EAAK;AAAA,IAAA;AAAA,EAAA;AACV,EAAA,GAfa,GAAGC,CAAK,IAAID,EAAK,KAAK,EAiB3C,CACH,EAAA,CACL;"}

package/dist/components/Form.js

@@ -0,0 +1,26 @@
+import { jsx as f } from "react/jsx-runtime";
+const c = ({ children: r, onFinish: t, className: s = "" }) => /* @__PURE__ */ f(
+  "form",
+  {
+    onSubmit: (e) => {
+      if (e.preventDefault(), t) {
+        const o = new FormData(e.currentTarget), a = {};
+        for (const [m, n] of o.entries())
+          a[m] = n;
+        t(a);
+      }
+    },
+    className: `malachite-form space-y-4 ${s}`,
+    style: {
+      fontFamily: '"Inter", system-ui, -apple-system, sans-serif',
+      fontSize: "14px",
+      lineHeight: "1.5",
+      width: "100%"
+    },
+    children: r
+  }
+);
+export {
+  c as default
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../src/components/Form.tsx"],"sourcesContent":["import React from 'react';\nimport { type FieldValues, type UseFormReturn } from 'react-hook-form';\n\ninterface FormProps {\n    children: React.ReactNode;\n    onFinish?: (data: FieldValues) => void;\n    formInstance?: UseFormReturn<FieldValues>;\n    defaultValues?: FieldValues;\n    className?: string;\n}\n\n// Simple form component that doesn't use hooks - relies on native form submission\nconst Form: React.FC<FormProps> = ({ children, onFinish, className = '' }) => {\n    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n        event.preventDefault();\n\n        if (onFinish) {\n            // Extract form data without using react-hook-form\n            const formData = new FormData(event.currentTarget);\n            const data: FieldValues = {};\n\n            for (const [key, value] of formData.entries()) {\n                data[key] = value;\n            }\n\n            onFinish(data);\n        }\n    };\n\n    return (\n        <form\n            onSubmit={handleSubmit}\n            className={`malachite-form space-y-4 ${className}`}\n            style={{\n                fontFamily: '\"Inter\", system-ui, -apple-system, sans-serif',\n                fontSize: '14px',\n                lineHeight: '1.5',\n                width: '100%',\n            }}\n        >\n            {children}\n        </form>\n    );\n};\n\nexport default Form;\n"],"names":["Form","children","onFinish","className","jsx","event","formData","data","key","value"],"mappings":";AAYA,MAAMA,IAA4B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,IAAY,SAkB7D,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,UAlBa,CAACC,MAA4C;AAG9D,UAFAA,EAAM,eAAA,GAEFH,GAAU;AAEV,cAAMI,IAAW,IAAI,SAASD,EAAM,aAAa,GAC3CE,IAAoB,CAAA;AAE1B,mBAAW,CAACC,GAAKC,CAAK,KAAKH,EAAS;AAChC,UAAAC,EAAKC,CAAG,IAAIC;AAGhB,QAAAP,EAASK,CAAI;AAAA,MACjB;AAAA,IACJ;AAAA,IAKQ,WAAW,4BAA4BJ,CAAS;AAAA,IAChD,OAAO;AAAA,MACH,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,IAGV,UAAAF;AAAA,EAAA;AAAA;"}

package/dist/components/FormItem.js

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useRef as l } from "react";
+import { Controller as p } from "react-hook-form";
+import { emptyValueOf as i, renderFormItemChildren as c } from "./formItemState.js";
+const v = ({ control: a, name: u, children: s }) => {
+  const o = l("");
+  return /* @__PURE__ */ m(
+    p,
+    {
+      control: a,
+      name: u,
+      render: ({ field: r, fieldState: e }) => {
+        var t;
+        e.isDirty || (o.current = i(r.value));
+        const n = {
+          error: !!e.error,
+          message: (t = e.error) == null ? void 0 : t.message,
+          onFieldChange: r.onChange,
+          onFieldBlur: r.onBlur,
+          emptyValue: o.current,
+          value: r.value
+        };
+        return /* @__PURE__ */ m("div", { "data-field-name": r.name, "data-has-error": n.error, children: c(s, n) });
+      }
+    }
+  );
+};
+export {
+  v as FormItem,
+  v as default
+};
+//# sourceMappingURL=FormItem.js.map

package/dist/components/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sources":["../../src/components/FormItem.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { type Control, Controller, type FieldPath, type FieldValues } from 'react-hook-form';\nimport {\n    type FieldErrorState,\n    type FormItemChildren,\n    emptyValueOf,\n    renderFormItemChildren,\n} from './formItemState';\n\ninterface FormItemProps {\n    control: Control<FieldValues, unknown>;\n    name: FieldPath<FieldValues>;\n    children: FormItemChildren;\n}\n\nexport const FormItem: React.FC<FormItemProps> = ({ control, name, children }) => {\n    // A pristine field is still showing this form's default for it, which is the only place\n    // the shape the form uses for \"empty\" is observable. Re-read while pristine rather than\n    // once: `reset()` and async defaults change that shape long after the first render.\n    const emptyValueRef = useRef<unknown>('');\n\n    return (\n        <Controller\n            control={control}\n            name={name}\n            render={({ field, fieldState }) => {\n                if (!fieldState.isDirty) {\n                    emptyValueRef.current = emptyValueOf(field.value);\n                }\n                const state: FieldErrorState = {\n                    error: !!fieldState.error,\n                    message: fieldState.error?.message,\n                    onFieldChange: field.onChange,\n                    onFieldBlur: field.onBlur,\n                    emptyValue: emptyValueRef.current,\n                    value: field.value,\n                };\n\n                return (\n                    <div data-field-name={field.name} data-has-error={state.error}>\n                        {renderFormItemChildren(children, state)}\n                    </div>\n                );\n            }}\n        />\n    );\n};\n\nexport default FormItem;\n"],"names":["FormItem","control","name","children","emptyValueRef","useRef","jsx","Controller","field","fieldState","emptyValueOf","state","_a","renderFormItemChildren"],"mappings":";;;;AAeO,MAAMA,IAAoC,CAAC,EAAE,SAAAC,GAAS,MAAAC,GAAM,UAAAC,QAAe;AAI9E,QAAMC,IAAgBC,EAAgB,EAAE;AAExC,SACI,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,SAAAN;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,GAAO,YAAAC,QAAiB;;AAC/B,QAAKA,EAAW,YACZL,EAAc,UAAUM,EAAaF,EAAM,KAAK;AAEpD,cAAMG,IAAyB;AAAA,UAC3B,OAAO,CAAC,CAACF,EAAW;AAAA,UACpB,UAASG,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,UAC3B,eAAeJ,EAAM;AAAA,UACrB,aAAaA,EAAM;AAAA,UACnB,YAAYJ,EAAc;AAAA,UAC1B,OAAOI,EAAM;AAAA,QAAA;AAGjB,eACI,gBAAAF,EAAC,OAAA,EAAI,mBAAiBE,EAAM,MAAM,kBAAgBG,EAAM,OACnD,UAAAE,EAAuBV,GAAUQ,CAAK,EAAA,CAC3C;AAAA,MAER;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

package/dist/components/FormSectionHeading.js

@@ -0,0 +1,20 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Divider as m } from "./Divider.js";
+const d = ({
+  children: a,
+  rule: t = !0,
+  level: r = 3,
+  className: i = "",
+  style: n = {}
+}) => {
+  const s = `h${r}`;
+  return /* @__PURE__ */ l("div", { className: `flex items-center gap-2 w-full px-2 ${i}`.trim(), style: n, children: [
+    /* @__PURE__ */ e(s, { className: "m-0 whitespace-nowrap shrink-0 text-[length:var(--malachite-font-size-small,13px)] font-normal leading-[1.6] text-[var(--malachite-text-secondary,rgb(123,123,123))]", children: a }),
+    t && /* @__PURE__ */ e("div", { className: "flex-auto min-w-0", children: /* @__PURE__ */ e(m, {}) })
+  ] });
+};
+export {
+  d as FormSectionHeading,
+  d as default
+};
+//# sourceMappingURL=FormSectionHeading.js.map

package/dist/components/FormSectionHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormSectionHeading.js","sources":["../../src/components/FormSectionHeading.tsx"],"sourcesContent":["import React from 'react';\nimport Divider from './Divider';\n\nexport type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\nexport interface FormSectionHeadingProps {\n    children: React.ReactNode;\n    /** The rule that runs from the label to the edge of the section. */\n    rule?: boolean;\n    /** Where the section sits in the page's heading hierarchy. */\n    level?: FormSectionHeadingLevel;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\n/**\n * Names a group of fields in a form and rules off the space beside it. Quieter than\n * `Typography.FormSectionTitle`, which titles a form rather than dividing one.\n */\nexport const FormSectionHeading: React.FC<FormSectionHeadingProps> = ({\n    children,\n    rule = true,\n    level = 3,\n    className = '',\n    style = {},\n}) => {\n    const HeadingTag: `h${FormSectionHeadingLevel}` = `h${level}`;\n\n    return (\n        <div className={`flex items-center gap-2 w-full px-2 ${className}`.trim()} style={style}>\n            <HeadingTag className=\"m-0 whitespace-nowrap shrink-0 text-[length:var(--malachite-font-size-small,13px)] font-normal leading-[1.6] text-[var(--malachite-text-secondary,rgb(123,123,123))]\">\n                {children}\n            </HeadingTag>\n            {rule && (\n                <div className=\"flex-auto min-w-0\">\n                    <Divider />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default FormSectionHeading;\n"],"names":["FormSectionHeading","children","rule","level","className","style","HeadingTag","jsxs","jsx","Divider"],"mappings":";;AAmBO,MAAMA,IAAwD,CAAC;AAAA,EAClE,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAA4C,IAAIH,CAAK;AAE3D,SACI,gBAAAI,EAAC,SAAI,WAAW,uCAAuCH,CAAS,GAAG,QAAQ,OAAAC,GACvE,UAAA;AAAA,IAAA,gBAAAG,EAACF,GAAA,EAAW,WAAU,wKACjB,UAAAL,EAAA,CACL;AAAA,IACCC,KACG,gBAAAM,EAAC,OAAA,EAAI,WAAU,qBACX,UAAA,gBAAAA,EAACC,KAAQ,EAAA,CACb;AAAA,EAAA,GAER;AAER;"}