@iota/apps-ui-kit 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -37,11 +37,9 @@
     "@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/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/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 {

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/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,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import cx from 'classnames';
-
-import { ReactNode } from 'react';
-import { Tooltip, TooltipPosition } from '../../atoms';
+import type { ReactNode } from 'react';
+import { Tooltip } from '@/components/atoms/tooltip';
+import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
     title: string;

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 {

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
 

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

@@ -2,7 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { forwardRef, useEffect, useState } from 'react';
-import { InputWrapper, InputWrapperProps } from './InputWrapper';
+import type { InputWrapperProps } from './InputWrapper';
+import { InputWrapper } from './InputWrapper';
 import {
     BORDER_CLASSES,
     INPUT_CLASSES,
@@ -10,7 +11,7 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
 
 type TextAreaProps = Omit<

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

@@ -1,9 +1,9 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ComponentProps } from 'react';
-import { InputType } from '.';
-import { NumericFormat } from 'react-number-format';
+import type { ComponentProps } from 'react';
+import type { InputType } from '.';
+import type { NumericFormat } from 'react-number-format';
 
 type InputElementProps = Omit<
     React.ComponentProps<'input'>,

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

@@ -13,8 +13,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemHorizontal({
     icon,

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

@@ -9,8 +9,8 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
-import { NavbarItemProps } from './NavbarItem';
+import { Badge, BadgeType } from '@/components/atoms';
+import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemVertical({
     icon,

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

@@ -4,7 +4,8 @@
 import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
-import { Divider, SearchBarType } from '@/components';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
 import {
     BACKGROUND_COLORS,
     SUGGESTIONS_WRAPPER_STYLE,
@@ -43,10 +44,6 @@ export interface SearchProps {
      * Are the suggestions loading.
      */
     isLoading: boolean;
-    /**
-     * Callback when a key is pressed.
-     */
-    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     /**
      * The type of the search bar. Can be 'outlined' or 'filled'.
      */
@@ -64,7 +61,6 @@ export function Search({
     onSuggestionClick,
     placeholder,
     isLoading = false,
-    onKeyDown,
     type = SearchBarType.Outlined,
     renderSuggestion,
 }: SearchProps): React.JSX.Element {
@@ -157,9 +153,6 @@ export function Search({
                 }
             }
         }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
     };
 
     return (

package/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
 import cx from 'classnames';
 import { SegmentedButtonType } from './segmentedButton.enums';
-import { ButtonSegmentType } from '../../atoms';
+import { ButtonSegmentType } from '@/components/atoms';
 
 interface SegmentedButtonProps {
     /**

package/src/lib/components/molecules/select/Select.tsx

@@ -5,10 +5,9 @@ import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
 import { forwardRef, useEffect, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
-import { ButtonUnstyled } from '../../atoms/button';
-import { ListItem } from '../../atoms';
+import { ListItem, ButtonUnstyled } from '@/components/atoms';
 import { DropdownPosition } from '../dropdown';
 import { SelectSize } from './select.enums';
 

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -1,8 +1,8 @@
 // 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 { Placeholder } from '../../atoms';
+import { Placeholder } from '@/components/atoms';
 
 interface TableCellBaseProps {
     /**

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -3,7 +3,7 @@
 
 import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Checkbox } from '@/lib';
+import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
 export interface TableHeaderCellProps {

package/src/lib/components/molecules/title/Title.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Tooltip, TooltipPosition } from '../../atoms';
+import type { TooltipPosition } from '@/components/atoms';
+import { Tooltip } from '@/components/atoms';
 import { Info } from '@iota/apps-ui-icons';
 import { TitleSize } from './titleSize.enums';
 import cx from 'classnames';

package/src/lib/components/organisms/accordion/Accordion.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 { ArrowDown } from '@iota/apps-ui-icons';
-import { Button, ButtonType } from '@/lib';
+import { Button, ButtonType } from '@/components/atoms';
 import { ICON_STYLE } from './accordion.classes';
 
 export interface AccordionHeaderProps {

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -9,7 +9,26 @@ import { Close } from '@iota/apps-ui-icons';
 import { useEffect, useState } from 'react';
 import { DialogPosition } from './dialog.enums';
 
-const Dialog = RadixDialog.Root;
+const Dialog = ({
+    open,
+    onOpenChange,
+    children,
+    ...props
+}: React.ComponentPropsWithoutRef<typeof RadixDialog.Root>) => {
+    const handleOpenChange = (isOpen: boolean) => {
+        const isMouseOverToast = document.querySelector('.toast-layer:hover');
+        if (!isOpen && isMouseOverToast) {
+            return;
+        }
+        onOpenChange?.(isOpen);
+    };
+
+    return (
+        <RadixDialog.Root open={open} onOpenChange={handleOpenChange} {...props}>
+            {children}
+        </RadixDialog.Root>
+    );
+};
 const DialogTrigger = RadixDialog.Trigger;
 const DialogClose = RadixDialog.Close;
 

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -3,7 +3,8 @@
 
 import cx from 'classnames';
 import { IotaLogoMark, MenuIcon } from '@iota/apps-ui-icons';
-import { NavbarItem, NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import type { NavbarItemProps } from '@/components/molecules/navbar-item/NavbarItem';
+import { NavbarItem } from '@/components/molecules/navbar-item/NavbarItem';
 
 export type NavbarItemWithId = NavbarItemProps & { id: string };
 

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -3,8 +3,9 @@
 
 import { ArrowBack } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Button, ButtonType, NavbarItem, NavbarItemType } from '@/components';
-import { NavbarProps } from './Navbar';
+import { Button, ButtonType } from '@/components/atoms';
+import { NavbarItem, NavbarItemType } from '@/components/molecules';
+import type { NavbarProps } from './Navbar';
 
 export function NavbarSlideout({
     items,

package/src/lib/components/organisms/table/Table.tsx

@@ -1,18 +1,12 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { PropsWithChildren, ReactNode } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import cx from 'classnames';
 import { TableProvider, useTableContext } from './TableContext';
-import {
-    Button,
-    ButtonProps,
-    ButtonSize,
-    ButtonType,
-    Checkbox,
-    TableCellBase,
-    TableHeaderCell,
-} from '@/lib';
+import type { ButtonProps } from '@/components/atoms';
+import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
+import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
 
 export interface TablePaginationOptions {

package/src/lib/components/organisms/table/TableContext.tsx

@@ -1,7 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { createContext, PropsWithChildren, useContext } from 'react';
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
 
 export interface TableProviderProps {
     /**

package/src/lib/tailwind/base.presets.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss';
 import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
 import {
     CUSTOM_FONT_SIZES,

package/src/lib/tailwind/constants/fontSizes.constants.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ThemeConfig } from 'tailwindcss/types/config';
+import type { ThemeConfig } from 'tailwindcss/types/config';
 
 type TailwindFontSize = ThemeConfig['fontSize'];