@iota/apps-ui-kit 0.0.0-experimental-20250613144451

package/src/lib/components/molecules/input/TextArea.tsx

@@ -0,0 +1,150 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useEffect, useState } from 'react';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
+import {
+    BORDER_CLASSES,
+    INPUT_CLASSES,
+    INPUT_TEXT_CLASSES,
+    INPUT_PLACEHOLDER_CLASSES,
+} from './input.classes';
+import cx from 'classnames';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
+
+type TextAreaProps = Omit<
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+    'cols' | 'resize' | 'className'
+>;
+
+interface TextFieldBaseProps extends TextAreaProps, InputWrapperProps {
+    /**
+     * Shows a label with the text above the input field.
+     */
+    label?: string;
+    /**
+     * Shows a caption with the text below the input field.
+     */
+    caption?: string;
+    /**
+     * Error Message. Overrides the caption.
+     */
+    errorMessage?: string;
+    /**
+     * Amount counter that is shown at the side of the caption text.
+     */
+    amountCounter?: string | number;
+    /**
+     * Shows toggle button to show/hide the content of the input field
+     */
+    isVisibilityToggleEnabled?: boolean;
+    /**
+     * Is the content of the input visible
+     */
+    isContentVisible?: boolean;
+    /**
+     * If true the textarea is resizable vertically
+     */
+    isResizeEnabled?: boolean;
+}
+
+export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(function TextArea(
+    {
+        label,
+        caption,
+        disabled,
+        errorMessage,
+        value,
+        amountCounter,
+        isVisibilityToggleEnabled,
+        isResizeEnabled,
+        required,
+        isContentVisible,
+        ...textareaProps
+    },
+    ref,
+) {
+    const [isInputContentVisible, setIsInputContentVisible] = useState<boolean>(
+        isContentVisible ?? true,
+    );
+
+    useEffect(() => {
+        setIsInputContentVisible(isContentVisible ?? true);
+    }, [isContentVisible]);
+
+    function onToggleButtonClick() {
+        setIsInputContentVisible((prev) => !prev);
+    }
+
+    return (
+        <InputWrapper
+            label={label}
+            caption={caption}
+            disabled={disabled || !isInputContentVisible}
+            errorMessage={errorMessage}
+            amountCounter={amountCounter}
+            required={required}
+        >
+            <div className="relative">
+                <textarea
+                    disabled={disabled || !isInputContentVisible}
+                    required={required}
+                    ref={ref}
+                    className={cx(
+                        'peer block min-h-[50px]',
+                        BORDER_CLASSES,
+                        INPUT_CLASSES,
+                        INPUT_TEXT_CLASSES,
+                        INPUT_PLACEHOLDER_CLASSES,
+                        isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
+                        !isInputContentVisible &&
+                            'not-visible select-none text-transparent dark:text-transparent',
+                    )}
+                    value={isInputContentVisible ? value : ''}
+                    {...textareaProps}
+                />
+                {!isInputContentVisible && (
+                    <div className="absolute left-0 top-0 flex h-full w-full flex-col items-stretch gap-y-2 px-md py-sm peer-[.not-visible]:select-none">
+                        <VisibilityOffBar rows={3} halfWidthRow={3} />
+                    </div>
+                )}
+
+                {isVisibilityToggleEnabled && (
+                    <span className="absolute bottom-4 right-4 flex">
+                        <ButtonUnstyled
+                            onClick={onToggleButtonClick}
+                            className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                            tabIndex={-1}
+                        >
+                            {isInputContentVisible ? <VisibilityOn /> : <VisibilityOff />}
+                        </ButtonUnstyled>
+                    </span>
+                )}
+            </div>
+        </InputWrapper>
+    );
+});
+
+interface VisibilityOffBarProps {
+    rows: number;
+    halfWidthRow?: number;
+}
+
+function VisibilityOffBar({ rows, halfWidthRow }: VisibilityOffBarProps) {
+    return (
+        <>
+            {Array.from({ length: rows }).map((_, index) => {
+                const isHalfWidth = halfWidthRow === index + 1;
+                const width = isHalfWidth ? 'w-1/2' : 'w-full';
+                return (
+                    <div
+                        key={index}
+                        className={`h-2.5 rounded bg-neutral-92/60 dark:bg-neutral-10/60 ${width}`}
+                    />
+                );
+            })}
+        </>
+    );
+}

package/src/lib/components/molecules/input/index.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Input';
+export * from './TextArea';
+
+export * from './input.types';
+export * from './input.enums';

package/src/lib/components/molecules/input/input.classes.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const INPUT_CLASSES =
+    'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
+export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
+export const INPUT_PLACEHOLDER_CLASSES =
+    'enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
+export const BORDER_CLASSES =
+    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50 dark:border-neutral-20 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:!border-primary-30 [&:has(input:focus)]:dark:!border-primary-80';
+export const INPUT_NUMBER_CLASSES =
+    '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
+export const LABEL_CLASSES =
+    'flex flex-col gap-y-2 text-label-lg text-neutral-40 dark:text-neutral-60';

package/src/lib/components/molecules/input/input.enums.ts

@@ -0,0 +1,14 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum InputType {
+    Text = 'text',
+    Password = 'password',
+    Number = 'number',
+    NumericFormat = 'numericFormat',
+}
+
+export enum Resize {
+    None = 'none',
+    Vertical = 'vertical',
+}

package/src/lib/components/molecules/input/input.types.ts

@@ -0,0 +1,29 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ComponentProps } from 'react';
+import type { InputType } from '.';
+import type { NumericFormat } from 'react-number-format';
+
+type InputElementProps = Omit<
+    React.ComponentProps<'input'>,
+    'type' | 'className' | 'ref' | 'value' | 'defaultValue'
+>;
+
+type GenericInputProps = {
+    type: InputType.Text | InputType.Password | InputType.Number;
+};
+
+type NumericFormatProps = ComponentProps<typeof NumericFormat>;
+
+export type NumericFormatInputProps = {
+    type: InputType.NumericFormat;
+    suffix?: NumericFormatProps['suffix'];
+    prefix?: NumericFormatProps['prefix'];
+    decimalScale?: NumericFormatProps['decimalScale'];
+    allowNegative?: NumericFormatProps['allowNegative'];
+    thousandSeparator?: NumericFormatProps['thousandSeparator'];
+    onValueChange?: NumericFormatProps['onValueChange'];
+};
+
+export type InputPropsByType = InputElementProps & (NumericFormatInputProps | GenericInputProps);

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -0,0 +1,48 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { NavbarItemHorizontal } from './NavbarItemHorizontal';
+import { NavbarItemVertical } from './NavbarItemVertical';
+import { NavbarItemType } from './navbarItem.enums';
+
+export interface NavbarItemProps {
+    /**
+     * The type of the navbar item.
+     */
+    type?: NavbarItemType;
+
+    /**
+     * The icon of the navbar item.
+     */
+    icon: React.ReactNode;
+    /**
+     * The text of the navbar item.
+     */
+    text?: string;
+    /**
+     * Indicates if the navbar item is selected.
+     */
+    isSelected?: boolean;
+    /**
+     * Indicates if the navbar item has a badge.
+     */
+    hasBadge?: boolean;
+    /**
+     * The onClick event of the navbar item.
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Indicates if the navbar item is disabled.
+     */
+    isDisabled?: boolean;
+}
+
+export function NavbarItem(props: NavbarItemProps): React.JSX.Element {
+    const { type, text } = props;
+
+    if (type === NavbarItemType.Vertical && !!text) {
+        return <NavbarItemVertical {...props} />;
+    }
+
+    return <NavbarItemHorizontal {...props} />;
+}

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    BADGE_WITH_TEXT,
+    BADGE_WITHOUT_TEXT,
+    PADDING_WITH_TEXT,
+    PADDING_WITHOUT_TEXT,
+    SELECTED_BACKGROUND,
+    SELECTED_ICON,
+    SELECTED_TEXT,
+    UNSELECTED_ICON,
+    UNSELECTED_TEXT,
+} from './navbarItem.classes';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
+
+export function NavbarItemHorizontal({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const paddingClasses = text ? PADDING_WITH_TEXT : PADDING_WITHOUT_TEXT;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const badgePositionClasses = text ? BADGE_WITH_TEXT : BADGE_WITHOUT_TEXT;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'inline-flex cursor-pointer flex-col items-center justify-center space-y-1',
+            )}
+        >
+            <div
+                className={cx(
+                    'relative inline-flex rounded-full',
+                    paddingClasses,
+                    backgroundColors,
+                    disabledClasses,
+                )}
+            >
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {hasBadge && (
+                    <div className={cx('absolute', badgePositionClasses)}>
+                        <Badge type={BadgeType.PrimarySolid} />
+                    </div>
+                )}
+            </div>
+            {text && <span className={cx('text-center text-label-md', textClasses)}>{text}</span>}
+        </div>
+    );
+}

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -0,0 +1,54 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+import {
+    SELECTED_BACKGROUND,
+    SELECTED_ICON,
+    SELECTED_TEXT,
+    UNSELECTED_ICON,
+    UNSELECTED_TEXT,
+} from './navbarItem.classes';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
+
+export function NavbarItemVertical({
+    icon,
+    text,
+    isSelected,
+    hasBadge,
+    onClick,
+    isDisabled = false,
+}: Omit<NavbarItemProps, 'type'>): React.JSX.Element {
+    const fillClasses = isSelected ? SELECTED_ICON : UNSELECTED_ICON;
+    const backgroundColors = isSelected && SELECTED_BACKGROUND;
+    const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
+    const disabledClasses = isDisabled
+        ? 'cursor-not-allowed opacity-60'
+        : 'state-layer cursor-pointer ';
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (isDisabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    return (
+        <div
+            onClick={handleClick}
+            className={cx(
+                'relative inline-flex w-full flex-row items-center justify-between rounded-full p-sm',
+                backgroundColors,
+                disabledClasses,
+            )}
+        >
+            <div className="flex items-center gap-3">
+                <div className={cx('inline-flex [&_svg]:h-6 [&_svg]:w-6', fillClasses)}>{icon}</div>
+                {text && (
+                    <span className={cx('text-center text-label-lg', textClasses)}>{text}</span>
+                )}
+            </div>
+            {hasBadge && <Badge type={BadgeType.PrimarySolid} />}
+        </div>
+    );
+}

package/src/lib/components/molecules/navbar-item/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './navbarItem.enums';
+export * from './NavbarItem';

package/src/lib/components/molecules/navbar-item/navbarItem.classes.ts

@@ -0,0 +1,16 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const SELECTED_ICON = 'text-neutral-10 dark:text-neutral-92';
+export const UNSELECTED_ICON = 'text-neutral-40 dark:text-neutral-60';
+
+export const PADDING_WITH_TEXT = 'py-xxs px-sm';
+export const PADDING_WITHOUT_TEXT = 'p-sm';
+
+export const SELECTED_BACKGROUND = 'bg-shader-primary-light-12 dark:bg-shader-primary-dark-12';
+
+export const BADGE_WITH_TEXT = '-top-3 right-3';
+export const BADGE_WITHOUT_TEXT = '-top-1 right-3';
+
+export const SELECTED_TEXT = 'text-neutral-10 dark:text-neutral-92';
+export const UNSELECTED_TEXT = 'text-neutral-60 dark:text-neutral-40';

package/src/lib/components/molecules/navbar-item/navbarItem.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum NavbarItemType {
+    Horizontal = 'horizontal',
+    Vertical = 'vertical',
+}

package/src/lib/components/molecules/search/Search.tsx

@@ -0,0 +1,216 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useEffect, useRef, useState } from 'react';
+import cx from 'classnames';
+import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
+import {
+    BACKGROUND_COLORS,
+    SUGGESTIONS_WRAPPER_STYLE,
+    SEARCH_WRAPPER_STYLE,
+} from './search.classes';
+
+export interface Suggestion {
+    id: string;
+    label: string;
+    supportingText?: string;
+    type?: string;
+}
+
+export interface SearchProps {
+    /**
+     * The value of the search input.
+     */
+    searchValue: string;
+    /**
+     * Callback when the search input value changes.
+     */
+    onSearchValueChange: (value: string) => void;
+    /**
+     * List of suggestions to display (optional).
+     */
+    suggestions?: Suggestion[];
+    /**
+     * Callback when a suggestion is clicked.
+     */
+    onSuggestionClick?: (suggestion: Suggestion) => void;
+    /**
+     * Placeholder text for the search input.
+     */
+    placeholder: string;
+    /**
+     * Are the suggestions loading.
+     */
+    isLoading: boolean;
+    /**
+     * The type of the search bar. Can be 'outlined' or 'filled'.
+     */
+    type?: SearchBarType;
+    /**
+     * Render suggestion.
+     */
+    renderSuggestion?: (suggestion: Suggestion, index: number) => React.ReactNode;
+}
+
+export function Search({
+    searchValue,
+    suggestions,
+    onSearchValueChange,
+    onSuggestionClick,
+    placeholder,
+    isLoading = false,
+    type = SearchBarType.Outlined,
+    renderSuggestion,
+}: SearchProps): React.JSX.Element {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const suggestionsListRef = useRef<HTMLDivElement>(null);
+    const [isSuggestionsVisible, setIsSuggestionsVisible] = useState(true);
+    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+        const value = event.target.value;
+        onSearchValueChange(value);
+    }
+
+    // Hide suggestions on escape key press
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                setIsSuggestionsVisible(false);
+                inputRef.current?.blur();
+            }
+        };
+
+        document.addEventListener('keydown', handler);
+
+        return () => {
+            document.removeEventListener('keydown', handler);
+        };
+    }, []);
+
+    // Hide suggestions on click outside
+    useEffect(() => {
+        const listener = (event: MouseEvent | TouchEvent) => {
+            const el = inputRef?.current;
+            if (!el || el.contains(event?.target as Node)) {
+                return;
+            }
+
+            if (suggestionsListRef.current?.contains(event.target as Node)) {
+                return;
+            }
+            setIsSuggestionsVisible(false);
+        };
+
+        document.addEventListener('click', listener, true);
+        document.addEventListener('touchstart', listener, true);
+
+        return () => {
+            document.removeEventListener('click', listener, true);
+            document.removeEventListener('touchstart', listener, true);
+        };
+    }, [inputRef]);
+
+    const showSuggestions = isSuggestionsVisible && suggestions && suggestions.length > 0;
+
+    const roundedStyleWithSuggestions = showSuggestions
+        ? 'rounded-t-3xl border-b border-b-transparent'
+        : type === SearchBarType.Outlined
+          ? 'rounded-3xl border-b'
+          : 'rounded-full';
+    const searchTypeClass = SEARCH_WRAPPER_STYLE[type];
+    const backgroundColorClass = BACKGROUND_COLORS[type];
+    const suggestionsStyle = SUGGESTIONS_WRAPPER_STYLE[type];
+
+    const handleOnSuggestionClick = (suggestion: Suggestion) => {
+        onSuggestionClick?.(suggestion);
+        onSearchValueChange('');
+        setIsSuggestionsVisible(false);
+        setSelectedIndex(null);
+        inputRef.current?.blur();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+        if (suggestions && suggestions?.length > 0) {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev >= suggestions.length - 1 ? 0 : prev + 1,
+                );
+            } else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                setSelectedIndex((prev) =>
+                    prev === null || prev <= 0 ? suggestions.length - 1 : prev - 1,
+                );
+            } else if (event.key === 'Enter') {
+                event.preventDefault();
+                if (selectedIndex !== null && suggestions[selectedIndex]) {
+                    handleOnSuggestionClick(suggestions[selectedIndex]);
+                } else if (suggestions.length === 1) {
+                    handleOnSuggestionClick(suggestions[0]);
+                }
+            }
+        }
+    };
+
+    return (
+        <div className="relative w-full">
+            <div
+                className={cx(
+                    'flex items-center overflow-hidden px-md py-sm text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6',
+                    roundedStyleWithSuggestions,
+                    searchTypeClass,
+                )}
+            >
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={searchValue}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                    onFocus={() => setIsSuggestionsVisible(true)}
+                    placeholder={placeholder}
+                    className={cx(
+                        'w-full flex-1 outline-none placeholder:text-neutral-40 placeholder:dark:text-neutral-60',
+                        backgroundColorClass,
+                    )}
+                />
+                <SearchIcon />
+            </div>
+            {showSuggestions && renderSuggestion && (
+                <div
+                    ref={suggestionsListRef}
+                    className={cx(
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden bg-neutral-100 dark:bg-neutral-10',
+                        suggestionsStyle,
+                    )}
+                >
+                    <Divider width="w-11/12" />
+                    {isLoading ? (
+                        <div className="px-md py-sm">
+                            <Loader className="animate-spin" />
+                        </div>
+                    ) : (
+                        suggestions.map((suggestion, index) => (
+                            <div
+                                key={suggestion.id}
+                                onClick={() => handleOnSuggestionClick(suggestion)}
+                                onMouseEnter={() => setSelectedIndex(index)}
+                                className={cx(
+                                    'w-full cursor-pointer px-md py-sm',
+                                    selectedIndex === index
+                                        ? 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16'
+                                        : '',
+                                )}
+                            >
+                                {renderSuggestion(suggestion, index)}
+                            </div>
+                        ))
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/src/lib/components/molecules/search/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Search';
+export * from './search.enums';

package/src/lib/components/molecules/search/search.classes.ts

@@ -0,0 +1,20 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SearchBarType } from './search.enums';
+
+export const BACKGROUND_COLORS: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]: 'bg-transparent',
+    [SearchBarType.Filled]: 'bg-neutral-92 dark:bg-neutral-12',
+};
+
+export const SEARCH_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]: 'border-l border-r border-t border-neutral-70 dark:border-neutral-40',
+    [SearchBarType.Filled]: 'bg-neutral-92 dark:bg-neutral-12',
+};
+
+export const SUGGESTIONS_WRAPPER_STYLE: Record<SearchBarType, string> = {
+    [SearchBarType.Outlined]:
+        'rounded-b-3xl border-b border-l border-r border-neutral-70  dark:border-neutral-40',
+    [SearchBarType.Filled]: 'rounded-b-3xl bg-neutral-92 dark:bg-neutral-12',
+};

package/src/lib/components/molecules/search/search.enums.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum SearchBarType {
+    Outlined = 'outlined',
+    Filled = 'filled',
+}