@expofp/ui 3.21.0

package/README.md

@@ -0,0 +1,30 @@
+# @expofp/ui
+
+Shared **pure, presentational** React components for the ExpoFP SDK. Bundled with the packages that
+depend on it — no separate install.
+
+**Scope rule:** props-in, markup-out components only — no domain logic, no MobX stores, no data
+fetching, no side effects. Nothing here may know about floor plans, booths, exhibitors, or events, or
+import from a domain package. Components receive everything they render via props; stateful wiring
+(Containers) lives in the consuming package. The test: _could it ship in a general-purpose React
+component library unchanged?_ If not, it belongs next to the domain that owns it.
+
+## Styling
+
+Components import their own `.scss`, which expects the SDK's shared SCSS layer (design tokens,
+mixins, icon glyphs) via the `@styles` alias. The published package ships **JS only** — no compiled
+CSS and no `.scss` sources. It is therefore consumed **from source** by `@expofp/floorplan`'s bundler
+(the `@expofp/source` export condition), which compiles the SCSS into its own output. `@expofp/ui` is
+an internal building block and is not intended to be styled standalone from its published `dist`.
+
+`src/styles` (the primitives `_vars`, `_utils`, `main`, `_icons`) and `public/fonts` are the canonical
+home of this layer — `@expofp/floorplan` points its own `@styles` alias here instead of keeping a
+copy. If a third consumer ever needs it, split it into a dedicated `@expofp/styles` package; until
+then, one extra alias hop is simpler than a package with a single dependent.
+
+- Build: `nx build ui`
+- Test (unit): `nx test ui`
+- Test (stories, browser): `nx test-storybook ui`
+- Storybook (dev): `nx storybook ui`
+- Storybook (build): `nx build-storybook ui`
+- Lint: `nx lint ui`

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,20 @@
+import './Alert.scss';
+import React, { type ReactNode } from 'react';
+export type AlertVariant = 'info' | 'warning' | 'error' | 'success' | 'blank';
+export type AlertSize = 'sm' | 'md';
+export type AlertPosition = 'top-right' | 'bottom-right';
+export interface AlertProps {
+    children?: ReactNode;
+    position?: AlertPosition;
+    variant?: AlertVariant;
+    size?: AlertSize;
+    inline?: boolean;
+    showIcon?: boolean;
+    closable?: boolean;
+    title?: string;
+    closeLabel: string;
+    onClose?: () => void;
+}
+declare const Alert: ({ children, position, variant, inline, showIcon, size, closable, title, closeLabel, onClose, }: AlertProps) => React.JSX.Element;
+export default Alert;
+//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './Alert.scss';
+import cn from 'classnames';
+const Alert = ({ children, position, variant = 'info', inline = false, showIcon = true, size = 'md', closable = false, title, closeLabel, onClose, }) => {
+    const alertIcon = () => {
+        switch (variant) {
+            case 'error':
+                return 'icon-close-solid';
+            case 'success':
+                return 'icon-checkmark-solid';
+            case 'warning':
+                return 'icon-warning-solid';
+            default:
+                return 'icon-info-solid';
+        }
+    };
+    return (_jsxs("div", { className: cn('efp-alert', `efp-alert--${variant} efp-alert--${size}`, {
+            'efp-alert--inline': inline,
+            [`efp-alert--${position}`]: position,
+        }), role: variant === 'error' || variant === 'warning' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'warning' ? 'assertive' : 'polite', children: [showIcon && (_jsx("div", { className: "efp-alert__icon", children: _jsx("i", { className: cn(alertIcon()), "aria-hidden": "true" }) })), _jsxs("div", { className: "efp-alert__content", children: [title && _jsx("div", { className: "efp-alert__title", children: title }), children] }), closable && (_jsx("button", { type: "button", className: "efp-alert__close", onClick: onClose, "aria-label": closeLabel, title: closeLabel }))] }));
+};
+export default Alert;

package/dist/Alert/index.d.ts

@@ -0,0 +1,3 @@
+export type { AlertPosition, AlertProps, AlertSize, AlertVariant } from './Alert';
+export { default } from './Alert';
+//# sourceMappingURL=index.d.ts.map

package/dist/Alert/index.js

@@ -0,0 +1 @@
+export { default } from './Alert';

package/dist/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,21 @@
+import './Autocomplete.scss';
+import React from 'react';
+export interface AutocompleteOptionObject {
+    value: string;
+    label: string;
+}
+export interface AutocompleteProps<T extends AutocompleteOptionObject = AutocompleteOptionObject> {
+    placeholder: string;
+    options: T[];
+    value?: T;
+    showClear?: boolean;
+    onChange?: (value: T | undefined) => void;
+    renderTarget?: HTMLElement | null;
+    noOptionsLabel: string;
+    ariaLabel: string;
+    clearLabel: string;
+    getOptionKey?: (option: T) => string;
+}
+declare const Autocomplete: <T extends AutocompleteOptionObject = AutocompleteOptionObject>({ placeholder, options, value, showClear, onChange, renderTarget, noOptionsLabel, ariaLabel, clearLabel, getOptionKey, }: AutocompleteProps<T>) => React.JSX.Element;
+export default Autocomplete;
+//# sourceMappingURL=Autocomplete.d.ts.map

package/dist/Autocomplete/Autocomplete.js

@@ -0,0 +1,183 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Autocomplete.scss';
+import classNames from 'classnames';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import useOnClickOutside from '../shared/hooks/useOnClickOutside';
+const Autocomplete = ({ placeholder, options, value, showClear = false, onChange, renderTarget = document.body, noOptionsLabel, ariaLabel, clearLabel, getOptionKey = (option) => option.value, }) => {
+    const container = renderTarget;
+    const refAutocomplete = useRef(null);
+    const refSearchInput = useRef(null);
+    const refOptions = useRef(null);
+    const blurTimeoutRef = useRef(null);
+    const listboxId = useId();
+    const getOptionId = (index) => `${listboxId}-option-${index}`;
+    const getOptionLabel = (option) => option.label;
+    const isSameOption = (a, b) => getOptionKey(a) === getOptionKey(b);
+    const findOptionIndexByValue = (searchValue) => options.findIndex((option) => isSameOption(option, searchValue));
+    const findOptionByValue = (searchValue) => options.find((option) => isSameOption(option, searchValue));
+    const [searchText, setSearchText] = useState(null);
+    const [focusOptionIndex, setFocusOptionIndex] = useState(null);
+    const [showOptionsDropdown, setShowOptionsDropdown] = useState(false);
+    const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0, width: 0 });
+    const activeOption = value ? findOptionByValue(value) : undefined;
+    const activeOptionIndex = activeOption ? findOptionIndexByValue(activeOption) : null;
+    const displayValue = searchText ?? (activeOption ? getOptionLabel(activeOption) : '');
+    const filteredOptions = useMemo(() => {
+        if (!searchText)
+            return [];
+        const lower = searchText.toLowerCase();
+        return options.filter((option) => getOptionLabel(option).toLowerCase().includes(lower));
+    }, [searchText, options]);
+    const updateDropdownPosition = () => {
+        if (refAutocomplete.current && showOptionsDropdown) {
+            const rect = refAutocomplete.current.getBoundingClientRect();
+            setDropdownPosition({
+                top: rect.bottom + window.scrollY + 4,
+                left: rect.left + window.scrollX,
+                width: rect.width,
+            });
+        }
+    };
+    useEffect(() => {
+        if (!showOptionsDropdown)
+            return;
+        updateDropdownPosition();
+        window.addEventListener('scroll', updateDropdownPosition, true);
+        window.addEventListener('resize', updateDropdownPosition);
+        return () => {
+            window.removeEventListener('scroll', updateDropdownPosition, true);
+            window.removeEventListener('resize', updateDropdownPosition);
+        };
+    }, [showOptionsDropdown]);
+    useEffect(() => {
+        if (focusOptionIndex === null || !refOptions.current)
+            return;
+        const items = refOptions.current.querySelectorAll('li');
+        items[focusOptionIndex]?.scrollIntoView({ block: 'nearest' });
+    }, [focusOptionIndex]);
+    useOnClickOutside([refAutocomplete, refOptions], () => setShowOptionsDropdown(false), showOptionsDropdown);
+    useEffect(() => {
+        return () => {
+            if (blurTimeoutRef.current)
+                clearTimeout(blurTimeoutRef.current);
+        };
+    }, []);
+    const updateValue = (newValue) => {
+        setSearchText(null);
+        onChange?.(newValue);
+    };
+    const selectOption = (option) => {
+        updateValue(option);
+        setFocusOptionIndex(null);
+        setShowOptionsDropdown(false);
+        refSearchInput.current?.blur();
+    };
+    const clearValue = (setFocus = false) => {
+        updateValue(undefined);
+        setFocusOptionIndex(null);
+        if (setFocus)
+            refSearchInput.current?.focus();
+    };
+    const onFocus = () => {
+        setShowOptionsDropdown(true);
+    };
+    const onBlur = () => {
+        if (blurTimeoutRef.current)
+            clearTimeout(blurTimeoutRef.current);
+        blurTimeoutRef.current = setTimeout(() => {
+            setSearchText(null);
+        }, 200);
+    };
+    const handleEnterKey = () => {
+        if ((!displayValue && focusOptionIndex === null) || (searchText && focusOptionIndex === null)) {
+            return;
+        }
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        if (focusOptionIndex !== null && currentOptions[focusOptionIndex]) {
+            const selectedOption = currentOptions[focusOptionIndex];
+            updateValue(selectedOption);
+        }
+        setFocusOptionIndex(null);
+        setShowOptionsDropdown(false);
+        refSearchInput.current?.blur();
+    };
+    const handleArrowUp = () => {
+        if (!showOptionsDropdown || focusOptionIndex === 0 || focusOptionIndex === null) {
+            return;
+        }
+        setFocusOptionIndex(focusOptionIndex - 1);
+    };
+    const handleArrowDown = () => {
+        if (!showOptionsDropdown) {
+            setFocusOptionIndex(activeOptionIndex ?? 0);
+            setShowOptionsDropdown(true);
+            return;
+        }
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        const nextIndex = focusOptionIndex === null ? 0 : focusOptionIndex + 1;
+        if (nextIndex < currentOptions.length) {
+            setFocusOptionIndex(nextIndex);
+        }
+    };
+    const onKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+                handleEnterKey();
+                break;
+            case 'ArrowUp':
+                handleArrowUp();
+                break;
+            case 'ArrowDown':
+                handleArrowDown();
+                break;
+            case 'Delete':
+                clearValue(true);
+                break;
+            case 'Escape':
+                if (!searchText) {
+                    event.preventDefault();
+                    setShowOptionsDropdown(false);
+                    refSearchInput.current?.blur();
+                }
+                else {
+                    setSearchText(null);
+                    setFocusOptionIndex(activeOptionIndex);
+                }
+                break;
+        }
+    };
+    const onInputChange = (event) => {
+        setSearchText(event.target.value);
+        setShowOptionsDropdown(true);
+        setFocusOptionIndex(null);
+    };
+    const renderOptions = () => {
+        const currentOptions = filteredOptions.length > 0 ? filteredOptions : options;
+        if (searchText && filteredOptions.length === 0) {
+            return _jsx("div", { className: "efp-autocomplete__empty", children: noOptionsLabel });
+        }
+        return (_jsx("ul", { role: "listbox", id: listboxId, children: currentOptions.map((option, index) => {
+                const isFocused = index === focusOptionIndex;
+                const isActive = filteredOptions.length === 0 && index === activeOptionIndex;
+                const className = isFocused ? 'is-focus' : isActive ? 'is-active' : undefined;
+                return (_jsx("li", { id: getOptionId(index), role: "option", "aria-selected": isActive, className: className, onMouseDown: (e) => e.preventDefault(), onClick: () => selectOption(option), children: getOptionLabel(option) }, getOptionKey(option)));
+            }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: refAutocomplete, className: classNames('efp-autocomplete', {
+                    'is-open': showOptionsDropdown,
+                    'with-clear': showOptionsDropdown && showClear,
+                }), children: _jsxs("div", { className: "efp-autocomplete__inner", children: [_jsx("input", { type: "search", className: "efp-autocomplete__input", role: "combobox", "aria-label": ariaLabel, "aria-autocomplete": "list", "aria-expanded": showOptionsDropdown, "aria-controls": showOptionsDropdown ? listboxId : undefined, "aria-activedescendant": showOptionsDropdown && focusOptionIndex !== null
+                                ? getOptionId(focusOptionIndex)
+                                : undefined, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, value: displayValue, placeholder: placeholder, ref: refSearchInput }), showClear && showOptionsDropdown && displayValue && (_jsx("button", { type: "button", className: "efp-autocomplete__clear", "aria-label": clearLabel, onMouseDown: (e) => {
+                                e.preventDefault();
+                                clearValue(true);
+                            } }))] }) }), showOptionsDropdown &&
+                container &&
+                createPortal(_jsx("div", { ref: refOptions, className: "efp-autocomplete-options", style: {
+                        top: `${dropdownPosition.top}px`,
+                        left: `${dropdownPosition.left}px`,
+                        width: `${dropdownPosition.width}px`,
+                    }, children: _jsx("div", { className: "efp-autocomplete-options__scroll", children: renderOptions() }) }), container)] }));
+};
+export default Autocomplete;

package/dist/Autocomplete/index.d.ts

@@ -0,0 +1,3 @@
+export type { AutocompleteOptionObject, AutocompleteProps } from './Autocomplete';
+export { default } from './Autocomplete';
+//# sourceMappingURL=index.d.ts.map

package/dist/Autocomplete/index.js

@@ -0,0 +1 @@
+export { default } from './Autocomplete';

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,14 @@
+import './Badge.scss';
+import React, { type ReactNode } from 'react';
+export type BadgeVariant = 'primary' | 'primary-light' | 'lightgray' | 'gray' | 'ghost' | 'orange' | 'location';
+export interface BadgeProps {
+    children?: ReactNode;
+    variant?: BadgeVariant;
+    size?: 'xs' | 'md' | 'lg';
+    noMargins?: boolean;
+    rounded?: boolean;
+    inline?: boolean;
+}
+declare const Badge: ({ children, variant, size, noMargins, rounded, inline, }: BadgeProps) => React.JSX.Element;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/Badge/Badge.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
+import './Badge.scss';
+import cn from 'classnames';
+const Badge = ({ children, variant = 'ghost', size = 'lg', noMargins, rounded, inline, }) => {
+    return (_jsx("div", { className: cn({
+            'efp-badge': true,
+            [`efp-badge--${variant}`]: true,
+            [`efp-badge--${size}`]: true,
+            'is-no-margin': noMargins,
+            'is-rounded': rounded,
+            'is-inline': inline,
+        }), children: children }));
+};
+export default Badge;

package/dist/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export type { BadgeProps, BadgeVariant } from './Badge';
+export { default } from './Badge';
+//# sourceMappingURL=index.d.ts.map

package/dist/Badge/index.js

@@ -0,0 +1 @@
+export { default } from './Badge';

package/dist/Button/Button.d.ts

@@ -0,0 +1,30 @@
+import './Button.scss';
+import React, { type ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'gray' | 'gray-border' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonTarget = '_self' | '_blank' | '_parent';
+interface ButtonOwnProps {
+    children?: ReactNode;
+    inline?: boolean;
+    text?: string;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    target?: ButtonTarget;
+    ariaLabel?: string;
+    withBadge?: boolean;
+    /** Whether the button should have a round/circular shape */
+    round?: boolean;
+}
+type ButtonAsButton = ButtonOwnProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof ButtonOwnProps> & {
+    link?: undefined;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+type ButtonAsLink = ButtonOwnProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof ButtonOwnProps> & {
+    link: string;
+    ref?: React.Ref<HTMLAnchorElement>;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsLink;
+declare const Button: (props: ButtonProps) => React.JSX.Element;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Button.scss';
+import cn from 'classnames';
+// `if (props.link)` alone doesn't narrow the union for TS; this predicate does.
+const isLinkProps = (props) => props.link != null;
+const processLabel = (label) => {
+    const parts = label.split(/(#\d+#)/);
+    const badgeMatch = /#(\d+)#/.exec(label);
+    const badgeValue = badgeMatch ? badgeMatch[1] : null;
+    return {
+        content: parts.map((part, index) => {
+            if (/#\d+#/.exec(part)) {
+                return (_jsx("div", { className: "efp-button-badge", children: badgeValue }, index));
+            }
+            return _jsx("span", { children: part }, index);
+        }),
+    };
+};
+const Button = (props) => {
+    const { children, inline = false, text, disabled = false, variant = 'primary', size = 'lg', target = '_self', ariaLabel, title, withBadge = false, round, } = props;
+    const content = children ?? text;
+    const { content: processedContent } = withBadge && typeof content === 'string' ? processLabel(content) : { content };
+    const commonClassNames = cn('efp-button', `efp-button--${variant}`, `efp-button--${size}`, {
+        'efp-button--inline': inline,
+        'is-disabled': disabled,
+        'efp-button--round': round,
+    }, props.className);
+    if (isLinkProps(props)) {
+        const { link, className: _className, onClick, ...rest } = props;
+        const onKeyDown = (event) => {
+            if (disabled || event.key !== ' ')
+                return;
+            event.preventDefault();
+            event.currentTarget.click();
+        };
+        return (_jsx("a", { ...rest, href: disabled ? undefined : link, className: commonClassNames, target: target, rel: "noopener noreferrer", onClick: disabled ? undefined : onClick, onKeyDown: onKeyDown, "aria-label": ariaLabel || undefined, title: title || ariaLabel || (typeof content === 'string' ? content : undefined), role: "button", "aria-disabled": disabled, tabIndex: disabled ? -1 : 0, children: processedContent }));
+    }
+    const { className: _className, ...rest } = props;
+    return (_jsx("button", { type: "button", ...rest, className: commonClassNames, disabled: disabled, "aria-label": ariaLabel || undefined, title: title || ariaLabel || (typeof content === 'string' ? content : undefined), children: processedContent }));
+};
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1,3 @@
+export type { ButtonProps, ButtonSize, ButtonTarget, ButtonVariant } from './Button';
+export { default } from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/Button/index.js

@@ -0,0 +1 @@
+export { default } from './Button';

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,19 @@
+import './Checkbox.scss';
+import React from 'react';
+interface CheckboxBase {
+    name?: string;
+    value: boolean;
+    indeterminate?: boolean;
+    size?: 'sm' | 'md';
+    onChange: (value: boolean) => void;
+}
+export type CheckboxProps = (CheckboxBase & {
+    label: string;
+    ariaLabel?: string;
+}) | (CheckboxBase & {
+    label?: undefined;
+    ariaLabel: string;
+});
+declare const Checkbox: ({ name, value, label, ariaLabel, size, indeterminate, onChange, }: CheckboxProps) => React.JSX.Element;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './Checkbox.scss';
+import classNames from 'classnames';
+import { useEffect, useId, useRef } from 'react';
+const Checkbox = ({ name, value, label, ariaLabel, size = 'md', indeterminate = false, onChange, }) => {
+    const id = useId();
+    const checkboxRef = useRef(null);
+    useEffect(() => {
+        if (checkboxRef.current) {
+            checkboxRef.current.indeterminate = indeterminate;
+        }
+    }, [indeterminate]);
+    return (_jsxs("div", { className: classNames({
+            'efp-checkbox': true,
+            [`efp-checkbox--${size}`]: true,
+        }), children: [_jsx("input", { ref: checkboxRef, type: "checkbox", id: id, name: name, checked: value, "aria-label": ariaLabel, onChange: () => onChange(!value) }), _jsx("label", { htmlFor: id, children: label })] }));
+};
+export default Checkbox;

package/dist/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxProps } from './Checkbox';
+export { default } from './Checkbox';
+//# sourceMappingURL=index.d.ts.map

package/dist/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from './Checkbox';

package/dist/CheckboxButton/CheckboxButton.d.ts

@@ -0,0 +1,12 @@
+import './CheckboxButton.scss';
+import React from 'react';
+export interface CheckboxButtonProps {
+    checked: boolean;
+    label?: string;
+    ariaLabel?: string;
+    className?: string;
+    onClick: () => void;
+}
+declare const CheckboxButton: ({ checked, label, ariaLabel, className, onClick }: CheckboxButtonProps) => React.JSX.Element;
+export default CheckboxButton;
+//# sourceMappingURL=CheckboxButton.d.ts.map

package/dist/CheckboxButton/CheckboxButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
+import './CheckboxButton.scss';
+import cn from 'classnames';
+import { useState } from 'react';
+const CheckboxButton = ({ checked, label, ariaLabel, className, onClick }) => {
+    const [animateIcon, setAnimateIcon] = useState(false);
+    const handleClick = () => {
+        setAnimateIcon(true);
+        onClick();
+        setTimeout(() => {
+            setAnimateIcon(false);
+        }, 320);
+    };
+    return (_jsxs("button", { type: "button", role: "checkbox", "aria-checked": checked, "aria-label": ariaLabel ?? (label ? undefined : 'Toggle'), className: cn('efp-checkbox-button', className, { 'efp-checkbox-button--checked': checked }), onClick: handleClick, children: [_jsx("div", { className: cn('efp-checkbox-button__inner', {
+                    'efp-checkbox-button__inner--animate': animateIcon,
+                }) }), label && _jsx("span", { className: "efp-checkbox-button__label", children: label })] }));
+};
+export default CheckboxButton;

package/dist/CheckboxButton/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckboxButtonProps } from './CheckboxButton';
+export { default } from './CheckboxButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/CheckboxButton/index.js

@@ -0,0 +1 @@
+export { default } from './CheckboxButton';

package/dist/DownloadList/DownloadList.d.ts

@@ -0,0 +1,15 @@
+import './DownloadList.scss';
+export interface DownloadItem {
+    fileName: string;
+    path: string;
+}
+export interface DownloadListProps {
+    list: DownloadItem[];
+    /** Section heading (e.g. a localized "Read More"). */
+    title: string;
+    /** Builds the per-item download link accessible name from its file name. */
+    downloadLabel: (fileName: string) => string;
+}
+declare function DownloadList({ list, title, downloadLabel }: DownloadListProps): import("react").JSX.Element;
+export default DownloadList;
+//# sourceMappingURL=DownloadList.d.ts.map

package/dist/DownloadList/DownloadList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './DownloadList.scss';
+function DownloadListItem({ fileName, path, downloadLabel }) {
+    return (_jsxs("a", { className: "efp-download-list__item", href: path, download: true, target: "_blank", rel: "noopener noreferrer", "aria-label": downloadLabel(fileName), children: [_jsx("div", { className: "efp-download-list__item-icon", children: _jsx("i", { className: "icon-file-solid", "aria-hidden": "true" }) }), _jsx("div", { className: "efp-download-list__item-name", children: _jsx("span", { children: fileName }) }), _jsx("div", { className: "efp-download-list__item-download", children: _jsx("i", { className: "icon-download", "aria-hidden": "true" }) })] }));
+}
+function DownloadList({ list, title, downloadLabel }) {
+    return (_jsxs("div", { className: "efp-download-list", children: [_jsx("div", { className: "efp-download-list__title font-medium", children: title }), _jsx("ul", { className: "efp-download-list__list", children: list.map((item) => (_jsx("li", { children: _jsx(DownloadListItem, { fileName: item.fileName, path: item.path, downloadLabel: downloadLabel }) }, item.path))) })] }));
+}
+export default DownloadList;

package/dist/DownloadList/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './DownloadList';
+export type { DownloadListProps, DownloadItem } from './DownloadList';
+//# sourceMappingURL=index.d.ts.map

package/dist/DownloadList/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable simple-import-sort/exports */
+export { default } from './DownloadList';

package/dist/Draggable/Draggable.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface DraggableProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Draggable: ({ children, className, style }: DraggableProps) => React.JSX.Element;
+export default Draggable;
+//# sourceMappingURL=Draggable.d.ts.map