@iota/apps-ui-kit 0.5.1 → 0.7.0

package/src/lib/components/atoms/secondary-text/SecondaryText.tsx

@@ -15,10 +15,11 @@ interface SecondaryTextProps {
 }
 
 export function SecondaryText({ children, hasErrorStyles }: SecondaryTextProps) {
-    const ERROR_STYLES = 'group-[.errored]:text-error-30 dark:group-[.errored]:text-error-80';
+    const ERROR_STYLES =
+        'group-[.errored]:w-full group-[.errored]:secondary-text-error-color group-[.errored]:bg-error-surface group-[.errored]:rounded-xl group-[.errored]:py-1 group-[.errored]:px-2';
     return (
         <p
-            className={cx('text-label-lg text-neutral-40  dark:text-neutral-60 ', {
+            className={cx('secondary-text-color text-label-lg', {
                 [ERROR_STYLES]: hasErrorStyles,
             })}
         >

package/src/lib/components/atoms/skeleton/Skeleton.tsx

@@ -36,9 +36,7 @@ export function Skeleton({
                 widthClass,
                 heightClass,
                 isRounded && 'rounded-full',
-                hasSecondaryColors
-                    ? 'bg-neutral-80 dark:bg-neutral-10'
-                    : 'bg-neutral-90 dark:bg-neutral-12',
+                hasSecondaryColors ? 'skeleton-secondary-bg' : 'skeleton-bg',
             )}
         >
             {children}

package/src/lib/components/atoms/snackbar/snackbar.classes.ts

@@ -4,15 +4,15 @@
 import { SnackbarType } from './snackbar.enums';
 
 export const TEXT_COLOR: Record<SnackbarType, string> = {
-    [SnackbarType.Default]: 'text-neutral-10 dark:text-neutral-92',
-    [SnackbarType.Error]: 'text-error-20 dark:text-error-90',
-    [SnackbarType.Warning]: 'text-warning-10 dark:text-warning-90',
-    [SnackbarType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [SnackbarType.Default]: 'text-on-default',
+    [SnackbarType.Error]: 'text-on-error',
+    [SnackbarType.Warning]: 'text-on-warning',
+    [SnackbarType.Success]: 'text-on-success',
 };
 
 export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
-    [SnackbarType.Default]: 'bg-primary-90 dark:bg-primary-10',
-    [SnackbarType.Error]: 'bg-error-90 dark:bg-error-10',
-    [SnackbarType.Warning]: 'bg-warning-90 dark:bg-warning-20',
-    [SnackbarType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [SnackbarType.Default]: 'bg-default-surface',
+    [SnackbarType.Error]: 'bg-error-surface',
+    [SnackbarType.Warning]: 'bg-warning-surface',
+    [SnackbarType.Success]: 'bg-success-surface',
 };

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -6,9 +6,9 @@ import { ToggleSize } from './toggle.enums';
 export const TOGGLE = 'relative inline-flex items-center p-xxs border rounded-full cursor-pointer';
 
 export const TOGGLE_STATES = {
-    active: 'bg-primary-30 border-primary-30',
-    inactive: 'bg-primary-100 dark:bg-neutral-6 border-neutral-70 dark:border-neutral-40',
-    disabledActive: 'bg-neutral-70 border-neutral-70',
+    active: 'toggle-bg-active toggle-border-active',
+    inactive: 'toggle-bg-inactive toggle-border-inactive',
+    disabledActive: 'toggle-bg-disabled-active toggle-border-disabled-active',
     disabled: 'opacity-40 cursor-not-allowed',
 };
 
@@ -29,8 +29,8 @@ export const TOGGLE_THUMB_POSITION = {
     },
 };
 export const TOGGLE_THUMB_COLOR = {
-    unchecked: 'bg-neutral-60',
-    checked: 'bg-white',
+    unchecked: 'toggle-thumb-color',
+    checked: 'toggle-thumb-color-checked',
 };
 export const TOGGLE_THUMB_SIZE = {
     [ToggleSize.Small]: 'h-3 w-3',
@@ -38,4 +38,4 @@ export const TOGGLE_THUMB_SIZE = {
 };
 
 export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
-export const TOGGLE_LABEL = 'text-label-lg text-neutral-40 dark:text-neutral-60';
+export const TOGGLE_LABEL = 'text-label-lg toggle-label-color';

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -1,37 +1,139 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { useRef, useState, useLayoutEffect } from 'react';
 import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
-import { TOOLTIP_POSITION } from './tooltip.classes';
 
 interface TooltipProps {
     text: string;
     position?: TooltipPosition;
     maxWidth?: string;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
 }
 
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
     maxWidth = 'max-w-[200px]',
+    offset = 8,
+    openDelay = 0,
+    closeDelay = 100,
     children,
-}: PropsWithChildren<TooltipProps>): React.JSX.Element {
-    const tooltipPositionClass = TOOLTIP_POSITION[position];
+}: PropsWithChildren<TooltipProps>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+    const openTimer = useRef<ReturnType<typeof setTimeout>>();
+    const closeTimer = useRef<ReturnType<typeof setTimeout>>();
+
+    const clearTimers = () => {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+    };
+
+    const open = () => {
+        clearTimers();
+        openTimer.current = setTimeout(() => setVisible(true), openDelay);
+    };
+
+    const close = () => {
+        clearTimers();
+        closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+
+        const pos = {
+            [TooltipPosition.Top]: {
+                top: rect.top - offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, -100%)',
+            },
+            [TooltipPosition.Bottom]: {
+                top: rect.bottom + offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, 0)',
+            },
+            [TooltipPosition.Left]: {
+                top: rect.top + rect.height / 2,
+                left: rect.left - offset,
+                transform: 'translate(-100%, -50%)',
+            },
+            [TooltipPosition.Right]: {
+                top: rect.top + rect.height / 2,
+                left: rect.right + offset,
+                transform: 'translate(0, -50%)',
+            },
+        }[position];
+
+        setCoords({ top: pos.top, left: pos.left });
+        tooltipRef.current!.style.transform = pos.transform;
+    }, [visible, position, offset]);
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+        const update = () => {
+            const rect = triggerRef.current?.getBoundingClientRect();
+            if (!rect) return;
+            setCoords((prev) => ({ ...prev, left: rect.left + rect.width / 2 }));
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [visible]);
+
+    // z-[9999999999]: needed because we must exceed the popup’s ≈2 147 483 647 z-index;
+    // otherwise the tooltip renders but stays invisible inside a Chrome extension
+    const base = 'z-[9999999999] w-max rounded p-xs tooltip-bg tooltip-text-color';
+
     return (
-        <div className="group/tooltip relative inline-block">
-            {children}
+        <>
             <div
-                className={cx(
-                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover/tooltip:block group-hover/tooltip:opacity-100 group-focus/tooltip:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
-                    tooltipPositionClass,
-                    maxWidth,
-                )}
-                role="tooltip"
+                ref={triggerRef}
+                className="inline-block cursor-pointer"
+                onMouseEnter={open}
+                onFocus={open}
+                onMouseLeave={close}
+                onBlur={close}
             >
-                <p className="w-full break-words">{text}</p>
+                {children}
             </div>
-        </div>
+
+            {visible &&
+                createPortal(
+                    <div
+                        ref={tooltipRef}
+                        role="tooltip"
+                        style={{
+                            position: 'fixed',
+                            top: coords.top,
+                            left: coords.left,
+                            transition: 'opacity .15s ease',
+                            opacity: 1,
+                        }}
+                        className={cx(base, maxWidth)}
+                        onMouseEnter={open}
+                        onMouseLeave={close}
+                    >
+                        <p className="w-full break-words">{text}</p>
+                    </div>,
+                    document.body,
+                )}
+        </>
     );
 }

package/src/lib/components/atoms/video/Video.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from 'react';
+import { VIDEO_AUTOPLAY_FLAGS, VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS } from './video.constants';
+
+export interface VideoProps {
+    /**
+     * Whether the video should autoplay.
+     */
+    isAutoPlayEnabled?: boolean;
+    /**
+     * If the video controls should be disabled.
+     */
+    disableControls?: boolean;
+}
+
+export const Video = forwardRef<
+    HTMLVideoElement,
+    React.ComponentPropsWithoutRef<'video'> & VideoProps
+>(({ width = '100%', height = 'auto', isAutoPlayEnabled, disableControls, ...props }, ref) => {
+    const videoProps = isAutoPlayEnabled
+        ? disableControls
+            ? VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS
+            : VIDEO_AUTOPLAY_FLAGS
+        : { preload: 'metadata', autoPlay: false };
+
+    return (
+        <video ref={ref} width={width} height={height} {...videoProps} {...props}>
+            Your browser does not support the video tag.
+        </video>
+    );
+});

package/src/lib/components/atoms/video/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Video';

package/src/lib/components/atoms/video/video.constants.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const VIDEO_AUTOPLAY_FLAGS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: true,
+    controlsList: 'nodownload',
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};
+
+export const VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: false,
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};

package/src/lib/components/molecules/account/Account.tsx

@@ -129,7 +129,7 @@ export function Account({
                 <Avatar isLocked={isLocked} />
                 <div className="flex flex-col items-start py-xs">
                     <div className="flex items-center space-x-2">
-                        <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
+                        <span className="account-title-color font-inter text-title-md">
                             {title}
                         </span>
                         {badgeText && badgeType ? (
@@ -153,7 +153,7 @@ export function Account({
                 </div>
             </div>
             <div className="z-10 ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
-                <div className="flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex [&_svg]:text-neutral-40 [&_svg]:dark:text-neutral-60">
+                <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex">
                     {onOptionsClick && (
                         <ButtonUnstyled onClick={onOptionsClick}>
                             <MoreHoriz />
@@ -180,9 +180,9 @@ export function Account({
                 {showSelected && (
                     <ButtonUnstyled>
                         {isSelected ? (
-                            <CheckmarkFilled className="h-5 w-5 text-primary-30 dark:text-primary-80" />
+                            <CheckmarkFilled className="account-check-active-color h-5 w-5" />
                         ) : (
-                            <RadioOff className="h-5 w-5 text-neutral-40 dark:text-neutral-60" />
+                            <RadioOff className="account-check-inactive-color h-5 w-5" />
                         )}
                     </ButtonUnstyled>
                 )}

package/src/lib/components/molecules/address/Address.tsx

@@ -78,7 +78,7 @@ export function Address({
     }
 
     return (
-        <div className="group flex flex-row items-center gap-1 text-neutral-40 dark:text-neutral-60">
+        <div className="address-text-color group flex flex-row items-center gap-1">
             <span className={cx('font-inter text-body-sm')}>{text}</span>
             {isCopyable && (
                 <ButtonUnstyled

package/src/lib/components/molecules/asset-media-renderer/AssetMediaRenderer.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { VisualAssetType } from '../visual-asset-card/visualAssetCard.enums';
+import { Video, ImageWithFallback, Image } from '../../atoms';
+import type { VideoProps } from '../../atoms';
+
+export interface AssetMediaRendererProps extends VideoProps {
+    /**
+     * The source of the media to be displayed.
+     */
+    src: string;
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType: VisualAssetType;
+    /**
+     * Alt text for the image..
+     */
+    altText?: string;
+    /**
+     * Whether to show a fallback image if the main image fails to load.
+     */
+    showFallback?: boolean;
+}
+
+export function AssetMediaRenderer({
+    src,
+    isAutoPlayEnabled,
+    assetType,
+    altText: alt,
+    showFallback,
+    disableControls,
+}: AssetMediaRendererProps): React.JSX.Element {
+    if (assetType === VisualAssetType.Video) {
+        return (
+            <Video
+                src={src}
+                isAutoPlayEnabled={isAutoPlayEnabled}
+                disableControls={disableControls}
+            />
+        );
+    }
+
+    if (showFallback) {
+        return <ImageWithFallback src={src} alt={alt} />;
+    }
+
+    return <Image src={src} alt={alt} />;
+}

package/src/lib/components/molecules/asset-media-renderer/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AssetMediaRenderer';

package/src/lib/components/molecules/card/CardAction.tsx

@@ -37,7 +37,7 @@ export function CardAction({
         return (
             <div
                 onClick={handleActionClick}
-                className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="card-action-link-color shrink-0 [&_svg]:h-5 [&_svg]:w-5"
             >
                 {icon ? icon : <ArrowRight />}
             </div>
@@ -48,12 +48,10 @@ export function CardAction({
         return (
             <div className="shrink-0 text-right">
                 {title && (
-                    <div className="font-inter text-label-md text-neutral-10 dark:text-neutral-92">
-                        {title}
-                    </div>
+                    <div className="card-action-title-color font-inter text-label-md">{title}</div>
                 )}
                 {subtitle && (
-                    <div className="font-inter text-label-sm text-neutral-60 dark:text-neutral-40">
+                    <div className="card-action-subtitle-color font-inter text-label-sm">
                         {subtitle}
                     </div>
                 )}

package/src/lib/components/molecules/card/CardBody.tsx

@@ -39,12 +39,13 @@ export function CardBody({
                 })}
             >
                 <div
-                    className={cx('font-inter text-title-md text-neutral-10 dark:text-neutral-92', {
+                    className={cx('card-body-title-color font-inter text-title-md', {
                         truncate: isTextTruncated,
                     })}
                 >
                     {title}
                 </div>
+
                 {tooltipText ? (
                     <Tooltip text={tooltipText} position={tooltipPosition}>
                         {icon}
@@ -60,7 +61,7 @@ export function CardBody({
             </div>
             {subtitle && (
                 <div
-                    className={cx('font-inter text-body-md text-neutral-40 dark:text-neutral-60', {
+                    className={cx('card-body-subtitle-color font-inter text-body-md', {
                         truncate: isTextTruncated,
                     })}
                 >

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

@@ -14,8 +14,8 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
     [ImageType.Placeholder]: '',
-    [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
-    [ImageType.BgWhite]: 'bg-white dark:bg-neutral-6',
+    [ImageType.BgSolid]: 'card-image-bg-solid',
+    [ImageType.BgWhite]: 'card-image-bg-white',
     [ImageType.BgTransparent]: '',
 };
 
@@ -23,5 +23,5 @@ export const CARD_TYPE_CLASSES: Record<CardType, string> = {
     [CardType.Default]: 'border border-transparent',
     [CardType.Outlined]:
         'border border-shader-neutral-light-8 dark:border-shader-primary-dark-8 p-xs',
-    [CardType.Filled]: 'border border-transparent bg-neutral-96 dark:bg-neutral-10 p-xs',
+    [CardType.Filled]: 'border border-transparent card-filled-bg p-xs',
 };

package/src/lib/components/molecules/chip/Chip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { ChipState } from './chip.enums';
+import { ChipSize, ChipState } from './chip.enums';
 import {
     BORDER_CLASSES,
     BACKGROUND_CLASSES,
@@ -51,6 +51,10 @@ interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
 }
 
 export function Chip({
@@ -63,6 +67,7 @@ export function Chip({
     leadingElement,
     trailingElement,
     disabled,
+    size = ChipSize.Default,
 }: ChipProps) {
     const chipState = selected ? ChipState.Selected : ChipState.Default;
     return (
@@ -89,7 +94,9 @@ export function Chip({
                 )}
             >
                 {avatar ?? leadingElement}
-                <span className="text-body-md">{label}</span>
+                <span className={cx(size === ChipSize.Small ? 'text-label-md' : 'text-body-md')}>
+                    {label}
+                </span>
                 {trailingElement}
                 {showClose && (
                     <ButtonUnstyled

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

@@ -7,7 +7,7 @@ export const ROUNDED_CLASS = 'rounded-full';
 
 export const BACKGROUND_CLASSES: Record<ChipState, string> = {
     [ChipState.Default]: 'bg-transparent',
-    [ChipState.Selected]: 'bg-primary-90 dark:bg-primary-10',
+    [ChipState.Selected]: 'chip-bg-selected',
 };
 
 const STATE_LAYER_OUTLINE =
@@ -19,14 +19,14 @@ const STATE_LAYER_BG_CLASSES =
 export const STATE_LAYER_CLASSES = `${STATE_LAYER_OUTLINE} ${STATE_LAYER_BG_CLASSES}`;
 
 export const BORDER_CLASSES: Record<ChipState, string> = {
-    [ChipState.Default]: 'border-neutral-70 dark:border-neutral-40',
+    [ChipState.Default]: 'chip-border-default',
     [ChipState.Selected]: 'border-transparent',
 };
 
 export const TEXT_COLOR: Record<ChipState, string> = {
-    [ChipState.Default]: 'text-neutral-40 dark:text-neutral-60',
-    [ChipState.Selected]: 'text-neutral-10 dark:text-neutral-92',
+    [ChipState.Default]: 'chip-text-default',
+    [ChipState.Selected]: 'chip-text-selected',
 };
 
 export const FOCUS_CLASSES =
-    'focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-primary-30 focus-visible:outline-none dark:focus-visible:shadow-primary-80';
+    'focus-visible:shadow-[0_0_0_2px] focus-visible:chip-focus-ring focus-visible:outline-none';

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

@@ -5,3 +5,8 @@ export enum ChipState {
     Default = 'default',
     Selected = 'selected',
 }
+
+export enum ChipSize {
+    Small = 'small',
+    Default = 'default',
+}

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

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './Chip';
+export * from './chip.enums';

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -120,7 +120,7 @@ export function DisplayStats({
                         </Tooltip>
                     )}
                 </div>
-                {icon && <span className="text-neutral-10 dark:text-neutral-92">{icon}</span>}
+                {icon && <span className="display-stats-icon-color">{icon}</span>}
             </div>
             <div className="flex w-full flex-row items-baseline gap-xxs">
                 <span className={cx('break-all', valueClass)}>{value}</span>
@@ -132,7 +132,7 @@ export function DisplayStats({
                 {copyText && (
                     <div className="self-center">
                         <ButtonUnstyled onClick={handleCopyClick}>
-                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                            <Copy className="display-stats-copy-icon-color" />
                         </ButtonUnstyled>
                     </div>
                 )}

package/src/lib/components/molecules/display-stats/displayStats.classes.ts

@@ -4,15 +4,15 @@
 import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
 
 export const BACKGROUND_CLASSES: Record<DisplayStatsType, string> = {
-    [DisplayStatsType.Default]: 'bg-neutral-96 dark:bg-neutral-10',
-    [DisplayStatsType.Highlight]: 'bg-primary-30 dark:bg-primary-80',
-    [DisplayStatsType.Secondary]: 'bg-secondary-90 dark:bg-secondary-10',
+    [DisplayStatsType.Default]: 'display-stats-bg-default',
+    [DisplayStatsType.Highlight]: 'display-stats-bg-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-bg-secondary',
 };
 
 export const TEXT_CLASSES: Record<DisplayStatsType, string> = {
-    [DisplayStatsType.Default]: 'text-neutral-10 dark:text-neutral-92',
-    [DisplayStatsType.Highlight]: 'text-neutral-100 dark:text-primary-10',
-    [DisplayStatsType.Secondary]: 'text-neutral-10 dark:text-neutral-92',
+    [DisplayStatsType.Default]: 'display-stats-text-default',
+    [DisplayStatsType.Highlight]: 'display-stats-text-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-text-secondary',
 };
 
 export const SIZE_CLASSES: Record<DisplayStatsSize, string> = {

package/src/lib/components/molecules/dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@
 
 export function Dropdown({ children }: React.PropsWithChildren): React.JSX.Element {
     return (
-        <ul className="list-none rounded-lg border border-neutral-80 bg-neutral-100 py-xs dark:border-neutral-20 dark:bg-neutral-6">
+        <ul className="dropdown-bg dropdown-border-color list-none rounded-lg border py-xs">
             {children}
         </ul>
     );

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

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './address';
+export * from './asset-media-renderer';
 export * from './chip';
 export * from './segmented-button';
 export * from './title';
@@ -15,3 +16,4 @@ export * from './table-header-cell';
 export * from './search';
 export * from './card';
 export * from './display-stats';
+export * from './visual-asset-card';

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

@@ -115,9 +115,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
                 onClick={focusOnInput}
                 ref={inputWrapperRef}
             >
-                {leadingIcon && (
-                    <span className="text-neutral-10 dark:text-neutral-92">{leadingIcon}</span>
-                )}
+                {leadingIcon && <span className="input-icon-color">{leadingIcon}</span>}
                 <InputElement
                     {...inputProps}
                     inputRef={forwardRef}
@@ -223,7 +221,7 @@ function InputTrailingElement({
     if (showClearInput) {
         return (
             <ButtonUnstyled
-                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 onClick={onClearInput}
                 tabIndex={-1}
             >
@@ -234,7 +232,7 @@ function InputTrailingElement({
         return (
             <ButtonUnstyled
                 onClick={onToggleButtonClick}
-                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 tabIndex={-1}
             >
                 {isContentVisible ? <VisibilityOn /> : <VisibilityOff />}