@arbor-education/design-system.components 0.0.7 → 0.1.0

package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-// DropdownItemRenderer.tsx
-import { DropdownItem } from './dropdownItem/DropdownItem';
-import { DropdownMultiLineItem } from './dropdownMultiLineItem/DropdownMultiLineItem';
-import {} from '../wrapper/DropdownWrapper';
-export const DropdownItemRenderer = (props) => {
-    const { value, label, header, icon, selected, onSelection } = props;
-    return (header
-        ? (_jsx(DropdownMultiLineItem, { value: value, label: label, header: header, selected: selected, onSelection: onSelection }))
-        : (_jsx(DropdownItem, { value: value, label: label, icon: icon, selected: selected, onSelection: onSelection })));
-};
-//# sourceMappingURL=DropdownItemRenderer.js.map

package/dist/components/formField/inputs/dropdown/items/DropdownItemRenderer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownItemRenderer.js","sourceRoot":"","sources":["../../../../../../src/components/formField/inputs/dropdown/items/DropdownItemRenderer.tsx"],"names":[],"mappings":";AAAA,2BAA2B;AAC3B,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,+CAA+C,CAAC;AACtF,OAAO,EAA8B,MAAM,4BAA4B,CAAC;AAUxE,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAA2B,EAAE,EAAE;IAClE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAEpE,OAAO,CACL,MAAM;QACJ,CAAC,CAAC,CACE,KAAC,qBAAqB,IACpB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH;QACH,CAAC,CAAC,CACE,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CACN,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts

@@ -1,9 +0,0 @@
-import { allowedIcons } from '../../../../../icon/allowedIcons';
-import type { DropdownItemBaseProps } from '../../../../../formField/inputs/dropdown/wrapper/DropdownWrapper';
-export type DropdownItemProps = {
-    value: string;
-    label?: string;
-    icon?: keyof typeof allowedIcons;
-} & DropdownItemBaseProps;
-export declare const DropdownItem: (props: DropdownItemProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DropdownItem.d.ts.map

package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAG5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8DAA8D,CAAC;AAE1G,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;CAClC,GAAG,qBAAqB,CAAC;AAE1B,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAyCpD,CAAC"}

package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { allowedIcons } from '../../../../../icon/allowedIcons';
-import { Icon } from '../../../../../icon/Icon';
-import classNames from 'classnames';
-export const DropdownItem = (props) => {
-    const { label, value, icon, selected = false, onSelection, id } = props;
-    const itemClassNames = classNames('ds-dropdown-item', {
-        'ds-dropdown-item--pressed': selected,
-    });
-    return (_jsx("div", { role: "option", id: id, className: itemClassNames, onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            return onSelection?.(value);
-        }, tabIndex: 0, "aria-selected": selected, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onSelection?.(value);
-            }
-        }, children: _jsxs("div", { className: "ds-dropdown-item--content", children: [icon && (_jsx("span", { className: "ds-dropdown-item--icon", children: _jsx(Icon, { name: icon, size: 16 }) })), _jsx("span", { className: "ds-dropdown-item--label", children: label ? label : value }), selected && (_jsx("span", { className: "ds-dropdown-item--check-icon", children: _jsx(Icon, { name: "check", size: 16 }) }))] }) }));
-};
-//# sourceMappingURL=DropdownItem.js.map

package/dist/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownItem.js","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,UAAU,MAAM,YAAY,CAAC;AASpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IAExE,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,EAAE;QACpD,2BAA2B,EAAE,QAAQ;KACtC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,OAAO,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,EACD,QAAQ,EAAE,CAAC,mBACI,QAAQ,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,YAED,eAAK,SAAS,EAAC,2BAA2B,aACvC,IAAI,IAAI,CACP,eAAM,SAAS,EAAC,wBAAwB,YACtC,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,GAAI,GACzB,CACR,EACD,eAAM,SAAS,EAAC,yBAAyB,YAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAQ,EACvE,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,8BAA8B,YAC5C,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,GAC1B,CACR,IACG,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts

@@ -1,7 +0,0 @@
-import type { DropdownItemBaseProps } from '../../../../../formField/inputs/dropdown/wrapper/DropdownWrapper';
-export type DropdownMultiLineItemProps = {
-    header: string;
-    label: string;
-} & DropdownItemBaseProps;
-export declare const DropdownMultiLineItem: (props: DropdownMultiLineItemProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DropdownMultiLineItem.d.ts.map

package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMultiLineItem.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8DAA8D,CAAC;AAG1G,MAAM,MAAM,0BAA0B,GAAG;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,qBAAqB,CAAC;AAE1B,eAAO,MAAM,qBAAqB,GAAI,OAAO,0BAA0B,4CAqCtE,CAAC"}

package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames'; // Import the classNames utility
-import { Icon } from '../../../../../icon/Icon'; // Import the Icon component
-export const DropdownMultiLineItem = (props) => {
-    const { value, label, header, selected, onSelection, id } = props;
-    const itemClassNames = classNames('ds-dropdown-item', {
-        'ds-dropdown-item--pressed': selected,
-    });
-    return (_jsx("div", { role: "option", id: id, className: itemClassNames, onClick: () => onSelection?.(value), tabIndex: 0, "aria-selected": selected, onKeyDown: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onSelection?.(value);
-            }
-        }, children: _jsxs("div", { className: "ds-dropdown-item-multiline ds-dropdown-item--content", children: [_jsxs("h4", { className: "ds-dropdown-item-multiline--header", children: [header, selected && (_jsx("span", { className: "ds-dropdown-item-multiline--check-icon", children: _jsx(Icon, { name: "check", size: 16 }) }))] }), _jsx("div", { className: "ds-dropdown-item-multiline--content", children: label ? label : value })] }) }));
-};
-//# sourceMappingURL=DropdownMultiLineItem.js.map

package/dist/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMultiLineItem.js","sourceRoot":"","sources":["../../../../../../../src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC,CAAC,gCAAgC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC,CAAC,4BAA4B;AASzE,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACzE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,KAAK,CAAC;IAElE,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,EAAE;QACpD,2BAA2B,EAAE,QAAQ;KACtC,CAAC,CAAC;IAEH,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,cAAc,EACzB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,KAAK,CAAC,EACnC,QAAQ,EAAE,CAAC,mBACI,QAAQ,EACvB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,YAED,eAAK,SAAS,EAAC,sDAAsD,aACnE,cAAI,SAAS,EAAC,oCAAoC,aAC/C,MAAM,EACN,QAAQ,IAAI,CACX,eAAM,SAAS,EAAC,wCAAwC,YACtD,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAE,EAAE,GAAI,GAC1B,CACR,IACE,EACL,cAAK,SAAS,EAAC,qCAAqC,YACjD,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAClB,IACF,GACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts

@@ -1,17 +0,0 @@
-import React, { type SelectHTMLAttributes, type ReactNode } from 'react';
-export type DropdownItemBaseProps = {
-    value: string;
-    selected?: boolean;
-    onSelection?: (value: string) => void;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type DropdownWrapperProps = {
-    placeholder?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    errorText?: string;
-    children: ReactNode;
-    onSelectionChange: (value: string[]) => void;
-    dropdownWidth?: string;
-} & SelectHTMLAttributes<HTMLSelectElement>;
-export declare const DropdownWrapper: (props: DropdownWrapperProps) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=DropdownWrapper.d.ts.map

package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownWrapper.d.ts","sourceRoot":"","sources":["../../../../../../src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,KAAK,oBAAoB,EAEzB,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAQf,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC;AAEzC,MAAM,MAAM,oBAAoB,GAAG;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE5C,eAAO,MAAM,eAAe,GAAI,OAAO,oBAAoB,4CAuN1D,CAAC"}

package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js

@@ -1,151 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, cloneElement, useEffect, useRef, useContext, } from 'react';
-import { DropdownButton } from '../../../../formField/inputs/dropdown/buttons/dropdownButton/DropdownButton';
-import { PopupParentContext } from '../../../../../utils/PopupParentContext';
-import { createPortal } from 'react-dom';
-import { getFloatingElementPosition } from '../../../../../utils/getFloatingElementPosition';
-import useResizeObserver from '@react-hook/resize-observer';
-import { useComponentDidMount } from '../../../../../utils/hooks/useComponentDidMount';
-export const DropdownWrapper = (props) => {
-    const { placeholder, disabled, errorText, multiple, children, onSelectionChange, dropdownWidth = '200px', } = props;
-    const [dropdownOpen, setDropdownOpen] = useState(false);
-    const [selected, setSelected] = useState([]);
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    const dropdownFieldRef = useRef(null);
-    const dropdownContentsRef = useRef(null);
-    const [dropdownPosition, setDropdownPosition] = useState(null);
-    useComponentDidMount(() => {
-        const clickListener = (e) => {
-            // Listen for clicks outside the dropdown and close the dropdown
-            if (!(dropdownFieldRef.current?.contains(e.target)
-                || dropdownContentsRef.current?.contains(e.target))) {
-                setDropdownOpen(false);
-            }
-        };
-        document.addEventListener('click', clickListener);
-        return () => {
-            document.removeEventListener('click', clickListener);
-        };
-    });
-    const repositionDropdown = () => {
-        if (dropdownFieldRef.current && dropdownContentsRef.current) {
-            setDropdownPosition(getFloatingElementPosition(dropdownFieldRef.current, dropdownContentsRef.current, {
-                offset: 4,
-                allowHorizontal: false,
-            }));
-        }
-        ;
-    };
-    useResizeObserver(dropdownFieldRef.current, () => {
-        if (dropdownOpen) {
-            repositionDropdown();
-        }
-    });
-    useEffect(() => {
-        const onScroll = (e) => {
-            if (dropdownContentsRef.current?.contains(e.target)) {
-                // Don't reposition on scrolls inside the dropdown contents, so that
-                // dropdowns can scroll internally without affecting anything
-                return;
-            }
-            repositionDropdown();
-        };
-        const onResize = () => {
-            repositionDropdown();
-        };
-        if (dropdownOpen) {
-            // While dropdown was closed, the screen may have been resized, scrolled, and so
-            // positioning twice helps us ensure that the position is accurate.
-            repositionDropdown();
-            setTimeout(() => {
-                repositionDropdown();
-            });
-            document.addEventListener('scroll', onScroll, true);
-            window.addEventListener('resize', onResize);
-        }
-        else {
-            document.removeEventListener('scroll', onScroll, true);
-            window.removeEventListener('resize', onResize);
-        }
-    }, [dropdownOpen]);
-    const popupParentRef = useContext(PopupParentContext);
-    const toggleDropdown = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (!disabled) {
-            setDropdownOpen(!dropdownOpen);
-        }
-    };
-    const handleItemClick = (value) => {
-        if (!multiple) {
-            setSelected([value]);
-            setDropdownOpen(false);
-        }
-        else {
-            setSelected(prev => prev.includes(value) ? prev.filter(sel => sel !== value) : [...prev, value]);
-        }
-    };
-    const handleKeyDown = (e) => {
-        if (!dropdownOpen) {
-            if (e.key === 'ArrowDown' || e.key === 'Enter') {
-                e.preventDefault();
-                setDropdownOpen(true);
-                setFocusedIndex(0);
-            }
-            return;
-        }
-        const items = React.Children.toArray(children).filter(child => React.isValidElement(child));
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                setFocusedIndex(prev => (prev + 1) % items.length);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setFocusedIndex(prev => (prev - 1 + items.length) % items.length);
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (focusedIndex >= 0 && focusedIndex < items.length) {
-                    const item = items[focusedIndex];
-                    handleItemClick(item.props.value);
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                setDropdownOpen(false);
-                break;
-            default:
-                break;
-        }
-    };
-    useEffect(() => {
-        onSelectionChange(selected);
-    }, [selected]);
-    return (_jsxs("div", { className: "ds-dropdown-wrapper", onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": dropdownOpen, "aria-haspopup": "listbox", "aria-disabled": disabled, children: [_jsx(DropdownButton, { label: placeholder ?? '', disabled: disabled, error: !!errorText, pressed: dropdownOpen, onClick: toggleDropdown, ref: dropdownFieldRef }), dropdownOpen && popupParentRef.current && createPortal(_jsx("div", { role: "listbox", id: "dropdownList", className: "ds-dropdown-wrapper--items", "aria-activedescendant": focusedIndex >= 0 ? `dropdown-item-${focusedIndex}` : undefined, ref: dropdownContentsRef, style: {
-                    ...(dropdownWidth
-                        ? { minWidth: `min(100vw, ${dropdownWidth})` }
-                        : {}),
-                    ...(dropdownPosition !== null && typeof dropdownPosition !== 'undefined'
-                        ? {
-                            left: `${dropdownPosition.x}px`,
-                            ...(dropdownPosition.position === 'top'
-                                ? { bottom: dropdownPosition.bottom }
-                                : { top: `${dropdownPosition.y}px` }),
-                            maxWidth: dropdownPosition.maxWidth,
-                            maxHeight: dropdownPosition.maxHeight,
-                            width: dropdownPosition.fixedElementWidth,
-                        }
-                        : {}),
-                }, children: React.Children.map(children, (child, index) => {
-                    if (React.isValidElement(child)) {
-                        return cloneElement(child, {
-                            selected: selected.includes(child.props.value),
-                            onSelection: handleItemClick,
-                            id: `dropdown-item-${index}`,
-                        });
-                    }
-                    return child;
-                }) }), popupParentRef.current)] }));
-};
-//# sourceMappingURL=DropdownWrapper.js.map

package/dist/components/formField/inputs/dropdown/wrapper/DropdownWrapper.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownWrapper.js","sourceRoot":"","sources":["../../../../../../src/components/formField/inputs/dropdown/wrapper/DropdownWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAEZ,QAAQ,EAER,YAAY,EACZ,SAAS,EACT,MAAM,EACN,UAAU,GACX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,4EAA4E,CAAC;AAC5G,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAgC,MAAM,kCAAkC,CAAC;AAC5G,OAAO,iBAAiB,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAkBxE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAA2B,EAAE,EAAE;IAC7D,MAAM,EACJ,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,aAAa,GAAG,OAAO,GACxB,GAAG,KAAK,CAAC;IAEV,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAW,EAAE,CAAC,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACzD,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAiC,IAAI,CAAC,CAAC;IAE/F,oBAAoB,CAAC,GAAG,EAAE;QACxB,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACtC,gEAAgE;YAChE,IACE,CAAC,CACC,gBAAgB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;mBACjD,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,CAC3D,EACD,CAAC;gBACD,eAAe,CAAC,KAAK,CAAC,CAAC;YACzB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,gBAAgB,CAAC,OAAO,IAAI,mBAAmB,CAAC,OAAO,EAAE,CAAC;YAC5D,mBAAmB,CACjB,0BAA0B,CACxB,gBAAgB,CAAC,OAAO,EACxB,mBAAmB,CAAC,OAAO,EAC3B;gBACE,MAAM,EAAE,CAAC;gBACT,eAAe,EAAE,KAAK;aACvB,CACF,CACF,CAAC;QACJ,CAAC;QAAA,CAAC;IACJ,CAAC,CAAC;IAEF,iBAAiB,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;QAC/C,IAAI,YAAY,EAAE,CAAC;YACjB,kBAAkB,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAkB,CAAC,CAAC,EAAE,EAAE;YACpC,IAAI,mBAAmB,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC,EAAE,CAAC;gBAC5D,oEAAoE;gBACpE,6DAA6D;gBAC7D,OAAO;YACT,CAAC;YACD,kBAAkB,EAAE,CAAC;QACvB,CAAC,CAAC;QACF,MAAM,QAAQ,GAAkB,GAAG,EAAE;YACnC,kBAAkB,EAAE,CAAC;QACvB,CAAC,CAAC;QAEF,IAAI,YAAY,EAAE,CAAC;YACjB,gFAAgF;YAChF,mEAAmE;YACnE,kBAAkB,EAAE,CAAC;YACrB,UAAU,CAAC,GAAG,EAAE;gBACd,kBAAkB,EAAE,CAAC;YACvB,CAAC,CAAC,CAAC;YAEH,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;YACpD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC9C,CAAC;aACI,CAAC;YACJ,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;YACvD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QACjD,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEtD,MAAM,cAAc,GAAG,CAAC,CAAmB,EAAE,EAAE;QAC7C,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,eAAe,CAAC,CAAC,YAAY,CAAC,CAAC;QACjC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,KAAa,EAAE,EAAE;QACxC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACd,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;YACrB,eAAe,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;aACI,CAAC;YACJ,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,CAC5E,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,CAAsB,EAAE,EAAE;QAC/C,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC/C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,eAAe,CAAC,IAAI,CAAC,CAAC;gBACtB,eAAe,CAAC,CAAC,CAAC,CAAC;YACrB,CAAC;YACD,OAAO;QACT,CAAC;QAED,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAC5D,KAAK,CAAC,cAAc,CAAwB,KAAK,CAAC,CACnD,CAAC;QAEF,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;YACd,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;gBACnD,MAAM;YACR,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;gBAClE,MAAM;YACR,KAAK,OAAO;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,YAAY,IAAI,CAAC,IAAI,YAAY,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;oBACrD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,CAA8C,CAAC;oBAC9E,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;gBACpC,CAAC;gBACD,MAAM;YACR,KAAK,QAAQ;gBACX,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,eAAe,CAAC,KAAK,CAAC,CAAC;gBACvB,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,eACE,SAAS,EAAC,qBAAqB,EAC/B,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,UAAU,mBACA,YAAY,mBACb,SAAS,mBACR,QAAQ,aAGvB,KAAC,cAAc,IACb,KAAK,EAAE,WAAW,IAAI,EAAE,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,CAAC,CAAC,SAAS,EAClB,OAAO,EAAE,YAAY,EACrB,OAAO,EAAE,cAAc,EACvB,GAAG,EAAE,gBAAgB,GACrB,EAED,YAAY,IAAI,cAAc,CAAC,OAAO,IAAI,YAAY,CACrD,cACE,IAAI,EAAC,SAAS,EACd,EAAE,EAAC,cAAc,EACjB,SAAS,EAAC,4BAA4B,2BAEpC,YAAY,IAAI,CAAC,CAAC,CAAC,CAAC,iBAAiB,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,EAEjE,GAAG,EAAE,mBAAmB,EACxB,KAAK,EAAE;oBACL,GAAG,CAAC,aAAa;wBACf,CAAC,CAAC,EAAE,QAAQ,EAAE,cAAc,aAAa,GAAG,EAAE;wBAC9C,CAAC,CAAC,EAAE,CACL;oBACD,GAAG,CAAC,gBAAgB,KAAK,IAAI,IAAI,OAAO,gBAAgB,KAAK,WAAW;wBACtE,CAAC,CAAC;4BACE,IAAI,EAAE,GAAG,gBAAgB,CAAC,CAAC,IAAI;4BAC/B,GAAG,CAAC,gBAAgB,CAAC,QAAQ,KAAK,KAAK;gCACrC,CAAC,CAAC,EAAE,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE;gCACrC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,gBAAgB,CAAC,CAAC,IAAI,EAAE,CACrC;4BACD,QAAQ,EAAE,gBAAgB,CAAC,QAAQ;4BACnC,SAAS,EAAE,gBAAgB,CAAC,SAAS;4BACrC,KAAK,EAAE,gBAAgB,CAAC,iBAAiB;yBAC1C;wBACH,CAAC,CAAC,EAAE,CAAC;iBACR,YAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;oBAC7C,IAAI,KAAK,CAAC,cAAc,CAAwB,KAAK,CAAC,EAAE,CAAC;wBACvD,OAAO,YAAY,CAAC,KAAK,EAAE;4BACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;4BAC9C,WAAW,EAAE,eAAe;4BAC5B,EAAE,EAAE,iBAAiB,KAAK,EAAE;yBAC7B,CAAC,CAAC;oBACL,CAAC;oBACD,OAAO,KAAK,CAAC;gBACf,CAAC,CAAC,GACE,EACN,cAAc,CAAC,OAAO,CACvB,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/src/components/formField/inputs/dropdown/Dropdown.tsx

@@ -1,82 +0,0 @@
-import { useEffect, useState } from 'react';
-import { DropdownWrapper } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper';
-import {
-  DropdownItemRenderer,
-  type DropdownOptionsProps,
-} from 'Components/formField/inputs/dropdown/items/DropdownItemRenderer';
-
-export type DropdownInputProps = {
-  placeholder?: string;
-  options: DropdownOptionsProps[];
-  multiple?: boolean;
-  disabled?: boolean;
-  errorText?: string;
-  onSelectionChange: (value: string[]) => void;
-};
-
-export const Dropdown = (props: DropdownInputProps) => {
-  const { options, disabled, multiple, placeholder, errorText, onSelectionChange } = props;
-
-  const [selectedValues, setSelectedValues] = useState<string[]>([]);
-  const [renderedSelectContent, setRenderedSelectContent] = useState('');
-
-  useEffect(() => {
-    onSelectionChange(selectedValues);
-
-    if (selectedValues.length === 0) {
-      setRenderedSelectContent(placeholder ?? 'Select');
-    }
-    else if (selectedValues.length === 1) {
-      const selectedLabel = options.find(option => option.value === selectedValues[0])?.label;
-      if (selectedLabel) setRenderedSelectContent(selectedLabel);
-    }
-    else {
-      setRenderedSelectContent(placeholder ?? `Select (${selectedValues.length})`);
-    }
-  }, [selectedValues, options, placeholder, onSelectionChange]);
-
-  // Flatten grouped options into a single array with headers
-  const UNGROUPED_KEY = 'Ungrouped';
-  const groupedOptions = options.reduce((acc, option) => {
-    const key = option.group ?? UNGROUPED_KEY;
-    if (!acc[key]) acc[key] = [];
-    acc[key].push(option);
-    return acc;
-  }, {} as Record<string, DropdownOptionsProps[]>);
-
-  const flatOptions: (DropdownOptionsProps | { headerLabel: string })[] = [];
-  Object.entries(groupedOptions).forEach(([groupName, groupItems]) => {
-    if (Object.keys(groupedOptions).length > 1) {
-      flatOptions.push({ headerLabel: groupName });
-    }
-    flatOptions.push(...groupItems);
-  });
-
-  return (
-    <DropdownWrapper
-      placeholder={renderedSelectContent}
-      multiple={multiple}
-      errorText={errorText}
-      onSelectionChange={(value: string[]) => setSelectedValues(value)}
-      disabled={disabled}
-    >
-      {flatOptions.map(item =>
-        'headerLabel' in item
-          ? (
-              <h3 key={`${item.headerLabel}-header`} className="ds-dropdown-wrapper--items--header">
-                {item.headerLabel}
-              </h3>
-            )
-          : (
-              <DropdownItemRenderer
-                value={item.value}
-                header={item.header}
-                label={item.label}
-                icon={item.icon}
-                key={item.value}
-              />
-            ),
-      )}
-    </DropdownWrapper>
-  );
-};

package/src/components/formField/inputs/dropdown/buttons/dropdownButton/DropdownButton.tsx

@@ -1,44 +0,0 @@
-import React, { type RefObject } from 'react';
-import { Icon } from 'Components/icon/Icon';
-import { Button } from 'Components/button/Button';
-
-type DropdownButtonProps = {
-  label: string;
-  disabled?: boolean;
-  error?: boolean;
-  pressed?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  ref?: RefObject<HTMLButtonElement | null>;
-};
-
-export const DropdownButton: React.FC<DropdownButtonProps> = (props: DropdownButtonProps) => {
-  const {
-    label,
-    disabled,
-    error,
-    pressed,
-    onClick,
-    ref,
-  } = props;
-
-  const classNames = [
-    'ds-dropdown-select',
-    pressed ? 'ds-dropdown-select--pressed' : '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <Button
-      error={error}
-      type="dropdown"
-      className={classNames}
-      disabled={disabled}
-      onClick={onClick}
-      ref={ref}
-    >
-      <span>{label}</span>
-      <span className="ds-dropdown-select--icon"><Icon name="chevron-down" /></span>
-    </Button>
-  );
-};

package/src/components/formField/inputs/dropdown/buttons/dropdownButton/dropdownButton.scss

@@ -1,12 +0,0 @@
-.ds-dropdown-select {
-  &--pressed {
-    border: 1px solid var(--button-medium-secondary-default-color-border);
-    background: var(--button-medium-secondary-active-color-background);
-  }
-
-  &--icon {
-    margin-left: var(--spacing-small);
-    display: inline-flex;
-    align-items: center;
-  }
-}

package/src/components/formField/inputs/dropdown/dropdown.scss

@@ -1,24 +0,0 @@
-
-.ds-dropdown {
-  select {
-    display: flex;
-    padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-medium);
-    justify-content: space-between;
-    align-items: center;
-    flex-shrink: 0;
-    border-radius: var(--border-radius-small);
-    background: var(--button-medium-secondary-default-color-background);
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--color-brand-500);
-      background: var(--button-medium-secondary-default-color-background);
-    }
-
-    &:hover {
-      border: 1px solid var(--color-grey-500);
-      background: var(--color-mono-white);
-      cursor: pointer;
-    }
-  }
-}

package/src/components/formField/inputs/dropdown/items/DropdownItemRenderer.tsx

@@ -1,38 +0,0 @@
-// DropdownItemRenderer.tsx
-import { DropdownItem } from './dropdownItem/DropdownItem';
-import { DropdownMultiLineItem } from './dropdownMultiLineItem/DropdownMultiLineItem';
-import { type DropdownItemBaseProps } from '../wrapper/DropdownWrapper';
-import type { allowedIcons } from 'Components/icon/allowedIcons';
-
-export type DropdownOptionsProps = {
-  label: string;
-  header?: string;
-  group?: string;
-  icon?: keyof typeof allowedIcons;
-} & DropdownItemBaseProps;
-
-export const DropdownItemRenderer = (props: DropdownOptionsProps) => {
-  const { value, label, header, icon, selected, onSelection } = props;
-
-  return (
-    header
-      ? (
-          <DropdownMultiLineItem
-            value={value}
-            label={label}
-            header={header}
-            selected={selected}
-            onSelection={onSelection}
-          />
-        )
-      : (
-          <DropdownItem
-            value={value}
-            label={label}
-            icon={icon}
-            selected={selected}
-            onSelection={onSelection}
-          />
-        )
-  );
-};

package/src/components/formField/inputs/dropdown/items/dropdownItem/DropdownItem.tsx

@@ -1,53 +0,0 @@
-import { allowedIcons } from 'Components/icon/allowedIcons';
-import { Icon } from 'Components/icon/Icon';
-import classNames from 'classnames';
-import type { DropdownItemBaseProps } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper';
-
-export type DropdownItemProps = {
-  value: string;
-  label?: string;
-  icon?: keyof typeof allowedIcons;
-} & DropdownItemBaseProps;
-
-export const DropdownItem = (props: DropdownItemProps) => {
-  const { label, value, icon, selected = false, onSelection, id } = props;
-
-  const itemClassNames = classNames('ds-dropdown-item', {
-    'ds-dropdown-item--pressed': selected,
-  });
-
-  return (
-    <div
-      role="option"
-      id={id}
-      className={itemClassNames}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        return onSelection?.(value);
-      }}
-      tabIndex={0} // Ensure the item is focusable
-      aria-selected={selected}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onSelection?.(value);
-        }
-      }}
-    >
-      <div className="ds-dropdown-item--content">
-        {icon && (
-          <span className="ds-dropdown-item--icon">
-            <Icon name={icon} size={16} />
-          </span>
-        )}
-        <span className="ds-dropdown-item--label">{label ? label : value}</span>
-        {selected && (
-          <span className="ds-dropdown-item--check-icon">
-            <Icon name="check" size={16} />
-          </span>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/components/formField/inputs/dropdown/items/dropdownItem/dropdownItem.scss

@@ -1,62 +0,0 @@
-
-.ds-dropdown-item {
-  display: flex;
-  padding: var(--form-dropdown-form-drop-item-spacing-vertical)
-  var(--form-dropdown-form-drop-item-spacing-horizontal);
-  align-items: center;
-  border-radius: var(--form-dropdown-form-drop-item-radius);
-  background: var(--form-dropdown-form-drop-item-default-color-background);
-  cursor: pointer;
-  color: var(--form-dropdown-form-drop-item-default-color-text);
-
-  /* typography/body/p1-regular */
-  font-family: var(--type-body-p-family);
-  font-size: var(--type-body-p-size);
-  font-style: normal;
-  font-weight: var(--type-body-p-weight);
-  line-height: 150%;
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 3px var(--color-brand-500);
-    background: var(--button-medium-secondary-default-color-background);
-  }
-
-  &:hover {
-    background: var(--form-dropdown-form-drop-item-hover-color-background);
-  }
-
-  &--pressed {
-    background: var(--form-dropdown-form-drop-item-active-color-background);
-    color: var(--form-dropdown-form-drop-item-active-color-text);
-  }
-
-  &--content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-  }
-
-  &--icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 8px;
-  }
-
-  &--check-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 8px;
-  }
-
-  &--label {
-    flex: 1;
-  }
-
-  &--check {
-    margin-left: auto;
-  }
-}

package/src/components/formField/inputs/dropdown/items/dropdownMultiLineItem/DropdownMultiLineItem.tsx

@@ -1,48 +0,0 @@
-import classNames from 'classnames'; // Import the classNames utility
-import { Icon } from 'Components/icon/Icon'; // Import the Icon component
-import type { DropdownItemBaseProps } from 'Components/formField/inputs/dropdown/wrapper/DropdownWrapper'; // Import the base props type
-
-// Define or import the DropdownMultiLineItemProps type
-export type DropdownMultiLineItemProps = {
-  header: string;
-  label: string;
-} & DropdownItemBaseProps;
-
-export const DropdownMultiLineItem = (props: DropdownMultiLineItemProps) => {
-  const { value, label, header, selected, onSelection, id } = props;
-
-  const itemClassNames = classNames('ds-dropdown-item', {
-    'ds-dropdown-item--pressed': selected,
-  });
-
-  return (
-    <div
-      role="option"
-      id={id}
-      className={itemClassNames}
-      onClick={() => onSelection?.(value)}
-      tabIndex={0} // Ensure focusability
-      aria-selected={selected}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onSelection?.(value);
-        }
-      }}
-    >
-      <div className="ds-dropdown-item-multiline ds-dropdown-item--content">
-        <h4 className="ds-dropdown-item-multiline--header">
-          {header}
-          {selected && (
-            <span className="ds-dropdown-item-multiline--check-icon">
-              <Icon name="check" size={16} />
-            </span>
-          )}
-        </h4>
-        <div className="ds-dropdown-item-multiline--content">
-          {label ? label : value}
-        </div>
-      </div>
-    </div>
-  );
-};