@expofp/ui 3.21.0

package/dist/components/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/components/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/components/Autocomplete/index.js

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

package/dist/components/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/components/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/components/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/components/Badge/index.js

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

package/dist/components/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/components/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/components/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/components/Button/index.js

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

package/dist/components/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/components/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/components/Checkbox/index.d.ts

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

package/dist/components/Checkbox/index.js

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

package/dist/components/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/components/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/components/CheckboxButton/index.d.ts

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

package/dist/components/CheckboxButton/index.js

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

package/dist/components/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/components/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/components/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/components/DownloadList/index.js

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

package/dist/components/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

package/dist/components/Draggable/Draggable.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @eslint-react/exhaustive-deps */
+import { useEffect, useRef, useState } from 'react';
+import { isInteractiveTarget } from '../../shared/interactive';
+const Draggable = ({ children, className, style }) => {
+    const [position, setPosition] = useState({ x: 0, y: 0 });
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+    const draggableRef = useRef(null);
+    const handleMouseDown = (e) => {
+        if (isInteractiveTarget(e.target)) {
+            return;
+        }
+        setIsDragging(true);
+        setDragStart({
+            x: e.clientX - position.x,
+            y: e.clientY - position.y,
+        });
+        e.preventDefault();
+    };
+    const handleMouseMove = (e) => {
+        if (!isDragging)
+            return;
+        const newX = e.clientX - dragStart.x;
+        const newY = e.clientY - dragStart.y;
+        setPosition({ x: newX, y: newY });
+    };
+    const handleMouseUp = () => {
+        endDrag();
+    };
+    const handleTouchStart = (e) => {
+        if (isInteractiveTarget(e.target)) {
+            return;
+        }
+        const touch = e.touches[0];
+        setIsDragging(true);
+        setDragStart({
+            x: touch.clientX - position.x,
+            y: touch.clientY - position.y,
+        });
+    };
+    const handleTouchMove = (e) => {
+        if (!isDragging)
+            return;
+        const touch = e.touches[0];
+        const newX = touch.clientX - dragStart.x;
+        const newY = touch.clientY - dragStart.y;
+        setPosition({ x: newX, y: newY });
+    };
+    const handleTouchEnd = () => {
+        endDrag();
+    };
+    const endDrag = () => {
+        if (!draggableRef.current)
+            return;
+        const rect = draggableRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const limitWidth = rect.width / 4;
+        const limitHeight = rect.height / 4;
+        const hiddenLeft = Math.max(0, 0 - rect.left);
+        const hiddenRight = Math.max(0, rect.right - viewportWidth);
+        const hiddenTop = Math.max(0, 0 - rect.top);
+        const hiddenBottom = Math.max(0, rect.bottom - viewportHeight);
+        const isPartiallyOutX = hiddenLeft > limitWidth || hiddenRight > limitWidth;
+        const isPartiallyOutY = hiddenTop > limitHeight || hiddenBottom > limitHeight;
+        if (isPartiallyOutX || isPartiallyOutY) {
+            setPosition({ x: 0, y: 0 });
+        }
+        setIsDragging(false);
+    };
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        document.addEventListener('touchmove', handleTouchMove, { passive: false });
+        document.addEventListener('touchend', handleTouchEnd);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+            document.removeEventListener('touchmove', handleTouchMove);
+            document.removeEventListener('touchend', handleTouchEnd);
+        };
+    }, [isDragging, dragStart]);
+    return (_jsx("div", { ref: draggableRef, className: className, style: {
+            ...style,
+            transform: `translate(${position.x}px, ${position.y}px)`,
+            cursor: isDragging ? 'grabbing' : 'grab',
+        }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: children }));
+};
+export default Draggable;

package/dist/components/Draggable/index.d.ts

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

package/dist/components/Draggable/index.js

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

package/dist/components/EntityItem/EntityItem.d.ts

@@ -0,0 +1,46 @@
+import './EntityItem.scss';
+import React from 'react';
+export type EntityItemAdditionalInfo = {
+    type: 'location';
+    locationName?: string;
+    hall?: string;
+    level?: string;
+    showLevelLabel?: boolean;
+} | {
+    type: 'text';
+    text: string;
+};
+export interface EntityItemProps {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    icon?: string;
+    typeColor?: string;
+    iconClassName?: string;
+    variant?: 'default' | 'person';
+    titleBadge?: string | number;
+    datetime?: {
+        date?: string;
+        time?: string;
+    };
+    subtitleLabel?: string;
+    additionalInfo?: EntityItemAdditionalInfo[];
+    bookmarked?: boolean;
+    featured?: boolean;
+    visited?: boolean;
+    current?: boolean;
+    heatmapColor?: string;
+    accentBorderColor?: string;
+    hideUserState?: boolean;
+    compactDetails?: boolean;
+    secondaryText?: string;
+    highlight?: string;
+    featuredLabel: string;
+    hallLabel: string;
+    levelLabel: string;
+    onClick?: (id: string) => void;
+}
+declare const EntityItem: ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant, titleBadge, datetime, subtitleLabel, additionalInfo, bookmarked, featured, visited, current, heatmapColor, accentBorderColor, hideUserState, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }: EntityItemProps) => React.JSX.Element;
+export default EntityItem;
+//# sourceMappingURL=EntityItem.d.ts.map

package/dist/components/EntityItem/EntityItem.js

@@ -0,0 +1,29 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './EntityItem.scss';
+import cn from 'classnames';
+import HighlightText from '../HighlightText';
+const EntityItem = ({ id, title, subtitle, image, icon, typeColor, iconClassName, variant = 'default', titleBadge, datetime, subtitleLabel, additionalInfo = [], bookmarked = false, featured = false, visited, current = false, heatmapColor, accentBorderColor, hideUserState = false, compactDetails, secondaryText, highlight, featuredLabel, hallLabel, levelLabel, onClick, }) => {
+    const hasDatetime = !!(datetime?.date || datetime?.time);
+    const hasSubtitleRow = hasDatetime || !!subtitleLabel || !!subtitle;
+    return (_jsx("div", { role: "button", className: cn('efp-entity-item', {
+            'is-featured': featured,
+            'is-visited': visited,
+            'is-current': current,
+            'has-heatmap': !!heatmapColor,
+            'has-accent': !!accentBorderColor,
+            'is-person': variant === 'person',
+        }), "aria-label": title, tabIndex: 0, "aria-current": current ? 'true' : undefined, onClick: () => onClick?.(id), onKeyDown: (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onClick?.(id);
+            }
+        }, style: {
+            ...(typeColor ? { '--item-type-color': typeColor } : {}),
+            ...(heatmapColor && { '--heatmap-color': heatmapColor }),
+            ...(accentBorderColor &&
+                { '--accent-border-color': accentBorderColor }),
+        }, children: _jsxs("div", { className: "efp-entity-item__body", children: [_jsxs("div", { className: "efp-entity-item__left", children: [_jsx("div", { className: "efp-entity-item__icon", children: icon ? (_jsx("img", { src: icon, alt: title })) : iconClassName ? (_jsx("i", { className: iconClassName, "aria-hidden": "true" })) : null }), !hideUserState && (_jsxs(_Fragment, { children: [visited && (_jsx("div", { className: "efp-entity-item__visited", children: _jsx("i", { className: "icon-checkmark" }) })), bookmarked && (_jsx("i", { className: cn('efp-entity-item__bookmarked', 'icon-bookmark-solid') }))] }))] }), _jsxs("div", { className: "efp-entity-item__right", children: [_jsxs("div", { className: cn('efp-entity-item__content', { 'with-image': image }), children: [_jsxs("div", { className: "efp-entity-item__header", children: [_jsxs("div", { className: "efp-entity-item__title", children: [_jsx(HighlightText, { text: title, highlight: highlight }), secondaryText && (_jsx("div", { className: "efp-entity-item__description", children: _jsx(HighlightText, { text: secondaryText, highlight: highlight }) })), titleBadge !== undefined && _jsx("span", { children: titleBadge })] }), featured && _jsx("div", { className: "efp-entity-item__featured", children: featuredLabel })] }), hasSubtitleRow && (_jsxs("div", { className: "efp-entity-item__subtitle", children: [hasDatetime && (_jsxs("div", { className: "efp-entity-item__datetime", children: [datetime?.date && _jsx("strong", { children: datetime.date }), datetime?.time && _jsx("span", { children: datetime.time })] })), subtitleLabel && _jsx("span", { children: subtitleLabel }), subtitle && _jsx("div", { children: subtitle })] })), !!additionalInfo.length && (_jsx("ul", { className: cn('efp-entity-item__details', {
+                                        'compact-details': compactDetails,
+                                    }), children: additionalInfo.map((info, idx) => (_jsxs("li", { className: "efp-entity-item__details-item", children: [info.type === 'location' && (_jsxs(_Fragment, { children: [info.locationName && (_jsx("div", { className: "efp-entity-item__details-item-booth", children: _jsx(HighlightText, { text: info.locationName, highlight: highlight }) })), info.hall && (_jsxs("div", { children: [hallLabel, "\u00A0", _jsx("span", { children: info.hall })] })), info.level && (_jsxs("div", { children: [info.showLevelLabel && _jsxs("span", { children: [levelLabel, "\u00A0"] }), _jsx("span", { children: info.level })] }))] })), info.type === 'text' && _jsx("span", { children: info.text })] }, idx))) }))] }), image && (_jsx("div", { className: "efp-entity-item__image", children: _jsx("img", { src: image, alt: title }) }))] })] }) }));
+};
+export default EntityItem;

package/dist/components/EntityItem/index.d.ts

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

package/dist/components/EntityItem/index.js

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