@iota/apps-ui-kit 0.3.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -30,18 +30,16 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.2.2"
+    "@iota/apps-ui-icons": "0.3.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-onboarding": "^8.1.11",
     "@storybook/blocks": "^7.1.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
-    "@storybook/test": "^8.1.11",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { BadgeType } from './badge.enums';
+import type { BadgeType } from './badge.enums';
 import { BACKGROUND_COLORS, BADGE_TEXT_CLASS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
 interface BadgeProps {

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

@@ -7,18 +7,27 @@ export const BACKGROUND_COLORS = {
     [BadgeType.PrimarySolid]: 'bg-primary-30',
     [BadgeType.Neutral]: 'bg-neutral-92 dark:bg-neutral-12',
     [BadgeType.PrimarySoft]: 'bg-primary-90 dark:bg-primary-10',
+    [BadgeType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [BadgeType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [BadgeType.Error]: 'bg-error-90 dark:bg-error-10',
 };
 
 export const TEXT_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'text-primary-100',
     [BadgeType.Neutral]: 'text-neutral-10 dark:text-neutral-92',
     [BadgeType.PrimarySoft]: 'text-primary-20 dark:text-primary-90',
+    [BadgeType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [BadgeType.Warning]: 'text-warning-10 dark:text-warning-90',
+    [BadgeType.Error]: 'text-error-20 dark:text-error-90',
 };
 
 export const BORDER_COLORS: Record<BadgeType, string> = {
     [BadgeType.PrimarySolid]: 'border-primary-30',
     [BadgeType.Neutral]: 'border-neutral-92 dark:border-neutral-12',
     [BadgeType.PrimarySoft]: 'border-primary-90 dark:border-primary-10',
+    [BadgeType.Success]: 'border-tertiary-90 dark:border-tertiary-10',
+    [BadgeType.Warning]: 'border-warning-90 dark:border-warning-20',
+    [BadgeType.Error]: 'border-error-90 dark:border-error-10',
 };
 
 export const BADGE_TEXT_CLASS = 'text-label-md';

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -5,4 +5,7 @@ export enum BadgeType {
     Neutral = 'neutral',
     PrimarySolid = 'primary-solid',
     PrimarySoft = 'primary-fill',
+    Success = 'success',
+    Warning = 'warning',
+    Error = 'error',
 }

package/src/lib/components/atoms/button/button-variants/ButtonPill.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ButtonHtmlType } from '../button.enums';
-import { ButtonVariantProps } from './buttonVariants.types';
+import type { ButtonVariantProps } from './buttonVariants.types';
 
 export function ButtonPill({
     htmlType = ButtonHtmlType.Button,

package/src/lib/components/atoms/button/button-variants/ButtonUnstyled.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ButtonHtmlType } from '../button.enums';
-import { ButtonVariantProps } from './buttonVariants.types';
+import type { ButtonVariantProps } from './buttonVariants.types';
 import cx from 'classnames';
 
 export function ButtonUnstyled({

package/src/lib/components/atoms/button/button-variants/buttonVariants.types.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ButtonProps } from '../Button';
+import type { ButtonProps } from '../Button';
 
 type ButtonPickedProps = Pick<ButtonProps, 'htmlType' | 'testId'>;
 type PropsFromButtonElement = Omit<React.HTMLProps<HTMLButtonElement>, 'type'>;

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

@@ -20,3 +20,4 @@ export * from './visual-asset-card';
 export * from './loading-indicator';
 export * from './placeholder';
 export * from './skeleton';
+export * from './toggle';

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { InfoBoxStyle, InfoBoxType } from './infoBox.enums';
+import type { InfoBoxType } from './infoBox.enums';
+import { InfoBoxStyle } from './infoBox.enums';
 import { BACKGROUND_COLORS, ICON_COLORS } from './infoBox.classes';
 
 export interface InfoBoxProps {
@@ -17,7 +18,7 @@ export interface InfoBoxProps {
     /**
      * The supporting text of the info box (optional).
      */
-    supportingText?: string;
+    supportingText?: React.ReactNode;
     /**
      * The type of the info box.
      */

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -1,11 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import cx from 'classnames';
 import { Copy, Info } from '@iota/apps-ui-icons';
 import { ValueSize } from './keyValue.enums';
-import { Tooltip, TooltipPosition } from '../tooltip';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
 import { ButtonUnstyled } from '../button';
 
 interface KeyValueProps {

package/src/lib/components/atoms/label-text/LabelText.tsx

@@ -5,7 +5,8 @@ import cx from 'classnames';
 import { LabelTextSize } from './labelText.enums';
 import { LABEL_TEXT_SIZE, SUPPORTING_TEXT_SIZE, TEXT_SIZE } from './labelText.classes';
 import { Info } from '@iota/apps-ui-icons';
-import { TooltipPosition, Tooltip } from '../tooltip';
+import type { TooltipPosition } from '../tooltip';
+import { Tooltip } from '../tooltip';
 
 interface LabelTextProps {
     /**

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowRight } from '@iota/apps-ui-icons';
-import { Button, ButtonSize, ButtonType } from '@/components';
+import { Button, ButtonSize, ButtonType } from '../button';
 
 export interface ListItemProps {
     /**

package/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@iota/apps-ui-icons';
 import { SnackbarType } from './snackbar.enums';
-import { BACKGROUND_COLOR, TEXT_COLOR } from '@/components/atoms/snackbar/snackbar.classes';
+import { BACKGROUND_COLOR, TEXT_COLOR } from './snackbar.classes';
 
 type Renderable = JSX.Element | string | null;
 export interface SnackbarProps {

package/src/lib/components/atoms/toggle/Toggle.tsx

@@ -0,0 +1,140 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useRef } from 'react';
+import { ToggleLabelPosition, ToggleSize } from './toggle.enums';
+import {
+    TOGGLE,
+    TOGGLE_LABEL,
+    TOGGLE_SIZE,
+    TOGGLE_STATES,
+    TOGGLE_THUMB,
+    TOGGLE_THUMB_COLOR,
+    TOGGLE_THUMB_POSITION,
+    TOGGLE_THUMB_SIZE,
+    TOGGLE_CONTAINER,
+} from './toggle.classes';
+import cx from 'classnames';
+
+interface ToggleProps {
+    /**
+     * The label for the toggle.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The state of the toggle (on or off).
+     */
+    isToggled: boolean;
+    /**
+     * Whether the label should be placed before the toggle.
+     */
+    labelPosition?: ToggleLabelPosition;
+    /**
+     * If true, the toggle will be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The callback to call when the toggle state changes.
+     */
+    onChange?: (isToggled: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * The name and id of the toggle input.
+     */
+    name?: string;
+    /**
+     * The size of the toggle.
+     */
+    size?: ToggleSize;
+    /**
+     * The 'data-testid' attribute value (used in e2e tests)
+     */
+    testId?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+    (
+        {
+            label,
+            isToggled,
+            labelPosition = ToggleLabelPosition.Right,
+            isDisabled = false,
+            onChange,
+            name,
+            size = ToggleSize.Default,
+            testId,
+        }: ToggleProps,
+        ref,
+    ) => {
+        const inputRef = useRef<HTMLInputElement | null>(null);
+
+        function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+            const newChecked = e.target.checked;
+            onChange?.(newChecked, e);
+        }
+
+        function assignRefs(element: HTMLInputElement) {
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(element);
+                } else {
+                    ref.current = element;
+                }
+            }
+            inputRef.current = element;
+        }
+
+        const toggleClasses = cx(TOGGLE, {
+            [TOGGLE_STATES.active]: isToggled && !isDisabled,
+            [TOGGLE_STATES.inactive]: !isToggled,
+            [TOGGLE_STATES.disabledActive]: isDisabled && isToggled,
+            [TOGGLE_STATES.disabled]: isDisabled,
+            [TOGGLE_SIZE[size]]: true,
+        });
+
+        const thumbClasses = cx(TOGGLE_THUMB, {
+            [TOGGLE_THUMB_POSITION[size].unchecked]: !isToggled,
+            [TOGGLE_THUMB_POSITION[size].checked]: isToggled,
+            [TOGGLE_THUMB_COLOR.unchecked]: !isToggled,
+            [TOGGLE_THUMB_COLOR.checked]: isToggled,
+            [TOGGLE_THUMB_SIZE[size]]: true,
+        });
+
+        const containerClasses = cx(TOGGLE_CONTAINER, {
+            'flex-row-reverse': labelPosition === ToggleLabelPosition.Left,
+            'cursor-not-allowed': isDisabled,
+        });
+        const labelClasses = cx(TOGGLE_LABEL, {
+            'opacity-40': isDisabled && !isToggled,
+        });
+
+        return (
+            <div className={containerClasses}>
+                <input
+                    id={name}
+                    name={name}
+                    type="checkbox"
+                    className="sr-only"
+                    checked={isToggled}
+                    ref={assignRefs}
+                    disabled={isDisabled}
+                    onChange={handleChange}
+                    data-testid={testId}
+                />
+
+                <span
+                    role="switch"
+                    onClick={() => inputRef.current?.click()}
+                    className={toggleClasses}
+                >
+                    <span className={thumbClasses} />
+                </span>
+
+                {label && (
+                    <label htmlFor={name} className={labelClasses}>
+                        {label}
+                    </label>
+                )}
+            </div>
+        );
+    },
+);

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

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export { Toggle } from './Toggle';
+
+export * from './toggle.enums';

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

@@ -0,0 +1,41 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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',
+    disabled: 'opacity-40 cursor-not-allowed',
+};
+
+export const TOGGLE_SIZE = {
+    [ToggleSize.Small]: 'h-5 w-10',
+    [ToggleSize.Default]: 'h-6 w-12',
+};
+
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB_POSITION = {
+    [ToggleSize.Small]: {
+        unchecked: 'left-1',
+        checked: 'left-8 -translate-x-full',
+    },
+    [ToggleSize.Default]: {
+        unchecked: 'left-1',
+        checked: 'left-10 -translate-x-full',
+    },
+};
+export const TOGGLE_THUMB_COLOR = {
+    unchecked: 'bg-neutral-60',
+    checked: 'bg-white',
+};
+export const TOGGLE_THUMB_SIZE = {
+    [ToggleSize.Small]: 'h-3 w-3',
+    [ToggleSize.Default]: 'h-4 w-4',
+};
+
+export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
+export const TOGGLE_LABEL = 'text-label-lg text-neutral-40 dark:text-neutral-60';

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

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum ToggleSize {
+    Small = 'small',
+    Default = 'default',
+}
+
+export enum ToggleLabelPosition {
+    Left = 'left',
+    Right = 'right',
+}

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

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
 import { TOOLTIP_POSITION } from './tooltip.classes';
@@ -20,11 +20,11 @@ export function Tooltip({
 }: PropsWithChildren<TooltipProps>): React.JSX.Element {
     const tooltipPositionClass = TOOLTIP_POSITION[position];
     return (
-        <div className="group relative inline-block">
+        <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:block group-hover:opacity-100 group-focus:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
+                    '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,
                 )}

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

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
-import { Badge, BadgeType } from '../../atoms';
+import type { BadgeType } from '@/components/atoms';
+import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
 import {
     LockLocked,
     LockUnlocked,
@@ -82,6 +82,14 @@ interface AccountProps {
      * The text of the badge.
      */
     badgeText?: string;
+    /**
+     * The tooltip text of the badge.
+     */
+    badgeTooltipText?: string;
+    /**
+     * The tooltip position of the badge.
+     */
+    badgeTooltipPosition?: TooltipPosition;
 }
 
 export function Account({
@@ -102,6 +110,8 @@ export function Account({
     isSelected,
     isActive,
     showSelected,
+    badgeTooltipText,
+    badgeTooltipPosition = TooltipPosition.Bottom,
 }: AccountProps): React.JSX.Element {
     const Avatar = avatarContent;
 
@@ -122,7 +132,15 @@ export function Account({
                         <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
                             {title}
                         </span>
-                        {badgeType && badgeText && <Badge type={badgeType} label={badgeText} />}
+                        {badgeText && badgeType ? (
+                            badgeTooltipText ? (
+                                <Tooltip text={badgeTooltipText} position={badgeTooltipPosition}>
+                                    <Badge type={badgeType} label={badgeText} />
+                                </Tooltip>
+                            ) : (
+                                <Badge type={badgeType} label={badgeText} />
+                            )
+                        ) : null}
                     </div>
                     <Address
                         text={subtitle}

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

@@ -3,7 +3,7 @@
 
 import cx from 'classnames';
 import { Copy, ArrowTopRight } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 
 interface AddressProps {
     /**

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

@@ -3,7 +3,7 @@
 
 import { ArrowRight } from '@iota/apps-ui-icons';
 import { CardActionType } from './card.enums';
-import { Button, ButtonSize, ButtonType } from '../../atoms/button';
+import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
     title?: string;

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

@@ -1,8 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import cx from 'classnames';
-
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { Tooltip } from '@/components/atoms/tooltip';
+import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
     title: string;
@@ -10,6 +11,8 @@ export type CardBodyProps = {
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;
     isTextTruncated?: boolean;
+    tooltipText?: string;
+    tooltipPosition?: TooltipPosition;
 };
 
 export function CardBody({
@@ -18,6 +21,8 @@ export function CardBody({
     clickableAction,
     icon,
     isTextTruncated,
+    tooltipText,
+    tooltipPosition,
 }: CardBodyProps) {
     const handleActionCardBodyClick = (event: React.MouseEvent) => {
         event?.stopPropagation();
@@ -40,7 +45,13 @@ export function CardBody({
                 >
                     {title}
                 </div>
-                {icon && <div className="flex items-center">{icon}</div>}
+                {tooltipText ? (
+                    <Tooltip text={tooltipText} position={tooltipPosition}>
+                        {icon}
+                    </Tooltip>
+                ) : (
+                    <div className="flex items-center">{icon}</div>
+                )}
                 {clickableAction && (
                     <div onClick={handleActionCardBodyClick} className="flex items-center">
                         {clickableAction}

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

@@ -15,6 +15,7 @@ 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.BgTransparent]: '',
 };
 

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

@@ -10,6 +10,7 @@ export enum CardType {
 export enum ImageType {
     Placeholder = 'placeholder',
     BgSolid = 'bg-solid',
+    BgWhite = 'bg-white',
     BgTransparent = 'bg-transparent',
 }
 

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

@@ -11,7 +11,7 @@ import {
     TEXT_COLOR,
     FOCUS_CLASSES,
 } from './chip.classes';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { Close } from '@iota/apps-ui-icons';
 
 interface ChipProps {

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

@@ -1,9 +1,10 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ReactNode } from 'react';
-import { Tooltip, TooltipPosition } from '../../atoms';
-import { Info } from '@iota/apps-ui-icons';
+import type { ReactNode } from 'react';
+import type { TooltipPosition } from '@/components/atoms';
+import { ButtonUnstyled, Tooltip } from '@/components/atoms';
+import { Copy, Info } from '@iota/apps-ui-icons';
 import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
 import cx from 'classnames';
 import {
@@ -48,6 +49,18 @@ interface DisplayStatsProps {
      * Add icon to the right of the label.
      */
     icon?: React.ReactNode;
+    /**
+     * Text that need to be copied (optional).
+     */
+    copyText?: string;
+    /**
+     * The onCopySuccess event of the KeyValue  (optional).
+     */
+    onCopySuccess?: (e: React.MouseEvent<HTMLButtonElement>, text: string) => void;
+    /**
+     * The onCopyError event of the KeyValue  (optional).
+     */
+    onCopyError?: (e: unknown, text: string) => void;
 }
 
 export function DisplayStats({
@@ -59,6 +72,9 @@ export function DisplayStats({
     type = DisplayStatsType.Default,
     size = DisplayStatsSize.Default,
     icon,
+    copyText,
+    onCopySuccess,
+    onCopyError,
 }: DisplayStatsProps): React.JSX.Element {
     const backgroundClass = BACKGROUND_CLASSES[type];
     const sizeClass = SIZE_CLASSES[size];
@@ -67,6 +83,21 @@ export function DisplayStats({
     const labelClass = LABEL_TEXT_CLASSES[size];
     const supportingLabelTextClass = SUPPORTING_LABEL_TEXT_CLASSES[size];
 
+    async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
+        if (!navigator.clipboard) {
+            return;
+        }
+
+        if (copyText) {
+            try {
+                await navigator.clipboard.writeText(copyText);
+                onCopySuccess?.(event, copyText);
+            } catch (error) {
+                console.error('Failed to copy:', error);
+                onCopyError?.(error, copyText);
+            }
+        }
+    }
     return (
         <div
             className={cx(
@@ -98,6 +129,13 @@ export function DisplayStats({
                         {supportingLabel}
                     </span>
                 )}
+                {copyText && (
+                    <div className="self-center">
+                        <ButtonUnstyled onClick={handleCopyClick}>
+                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                        </ButtonUnstyled>
+                    </div>
+                )}
             </div>
         </div>
     );

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

@@ -3,7 +3,8 @@
 
 import { forwardRef, Fragment, useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
-import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
 import {
     BORDER_CLASSES,
     INPUT_CLASSES,
@@ -12,10 +13,10 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import { InputType } from './input.enums';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { Close, VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
-import { InputPropsByType, NumericFormatInputProps } from './input.types';
+import { ButtonUnstyled } from '@/components/atoms/button';
+import type { InputPropsByType, NumericFormatInputProps } from './input.types';
 import { NumericFormat } from 'react-number-format';
 
 export interface BaseInputProps extends InputWrapperProps {