@aurora-ds/components 0.25.0 → 1.0.0

package/dist/cjs/components/navigation/tabs/Tabs.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { TabsProps } from '@components/navigation/tabs/Tabs.props';
-/**
- * Tabs component for navigation between multiple sections
- */
-declare const Tabs: FC<TabsProps>;
-export default Tabs;

package/dist/cjs/components/navigation/tabs/Tabs.props.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from 'react';
-export type TabsProps = {
-    /** Children TabItem components */
-    children: ReactNode;
-    /** Currently active tab value or index */
-    activeTab?: string | number;
-    /** Width of the tabs container, default 100% */
-    width?: string;
-};
-export type TabsStyleParams = {
-    width?: string;
-};

package/dist/cjs/components/navigation/tabs/Tabs.styles.d.ts

@@ -1,7 +0,0 @@
-import { TabsStyleParams } from '@components/navigation/tabs/Tabs.props';
-/**
- * Tabs styles using createStyles from @aurora-ds/theme
- */
-export declare const TABS_STYLES: {
-    root: (args_0: TabsStyleParams) => string;
-};

package/dist/cjs/components/navigation/tabs/index.d.ts

@@ -1,4 +0,0 @@
-export { default as Tabs } from '@components/navigation/tabs/Tabs.tsx';
-export type { TabsProps } from '@components/navigation/tabs/Tabs.props.ts';
-export { default as TabItem } from '@components/navigation/tabs/tab-item/TabItem.tsx';
-export type { TabItemProps } from '@components/navigation/tabs/tab-item/TabItem.props.ts';

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-import { TabItemProps } from '@components/navigation/tabs/tab-item/TabItem.props.ts';
-/**
- * TabItem component for use inside Tabs
- */
-declare const TabItem: FC<TabItemProps>;
-export default TabItem;

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.props.d.ts

@@ -1,15 +0,0 @@
-import { ReactElement } from 'react';
-export type TabItemProps = {
-    /** Label of the tab */
-    label?: string;
-    /** Start icon of the tab */
-    startIcon?: ReactElement;
-    /** End icon of the tab */
-    endIcon?: ReactElement;
-    /** Optional value associated with the tab */
-    value?: string | number;
-    /** Whether the tab is active */
-    isActive?: boolean;
-    /** Click handler */
-    onClick?: () => void;
-};

package/dist/cjs/components/navigation/tabs/tab-item/TabItem.styles.d.ts

@@ -1,6 +0,0 @@
-/**
- * Tabs styles using createStyles from @aurora-ds/theme
- */
-export declare const TAB_ITEM_STYLES: {
-    tab: (isActive: boolean) => string;
-};

package/dist/cjs/components/overlay/accordion/Accordion.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-import { AccordionProps } from '@components/overlay/accordion/Accordion.props.ts';
-/**
- * Accordion component
- *
- * A collapsible container that can show/hide content.
- * Supports controlled and uncontrolled modes.
- */
-declare const Accordion: FC<AccordionProps>;
-export default Accordion;

package/dist/cjs/components/overlay/accordion/Accordion.props.d.ts

@@ -1,52 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { ThemeContract } from '@/interfaces';
-export type AccordionProps = {
-    /** Title displayed in the accordion header */
-    title: string;
-    /** Content to show/hide when accordion is expanded */
-    children: ReactNode;
-    /** Whether the accordion is expanded */
-    expanded?: boolean;
-    /** Default expanded state (for uncontrolled mode) */
-    defaultExpanded?: boolean;
-    /** Callback fired when the accordion expands or collapses */
-    onChange?: (expanded: boolean) => void;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Optional icon to display before title */
-    icon?: ReactNode;
-    /** Optional background color */
-    backgroundColor?: keyof ThemeContract['colors'];
-    /** Optional width */
-    width?: CSSProperties['width'];
-    /** Padding for the accordion header */
-    headerPadding?: CSSProperties['padding'];
-    /** Padding for the accordion content */
-    contentPadding?: CSSProperties['padding'];
-    /** Accessibility label for screen readers */
-    ariaLabel?: string;
-    /** ID of element that labels this accordion */
-    ariaLabelledBy?: string;
-    /** ID of element that describes this accordion */
-    ariaDescribedBy?: string;
-    /** ARIA role */
-    role?: string;
-    /** Tab index for keyboard navigation */
-    tabIndex?: number;
-};
-export type AccordionStyleParams = {
-    disabled: boolean;
-    width?: CSSProperties['width'];
-};
-export type AccordionHeaderStyleParams = {
-    disabled: boolean;
-    backgroundColor?: keyof ThemeContract['colors'];
-    headerPadding?: CSSProperties['padding'];
-};
-export type AccordionContentStyleParams = {
-    expanded: boolean;
-    contentPadding?: CSSProperties['padding'];
-};
-export type AccordionIconStyleParams = {
-    expanded: boolean;
-};

package/dist/cjs/components/overlay/accordion/Accordion.styles.d.ts

@@ -1,7 +0,0 @@
-import { AccordionContentStyleParams, AccordionHeaderStyleParams, AccordionIconStyleParams, AccordionStyleParams } from '@components/overlay/accordion/Accordion.props.ts';
-export declare const ACCORDION_STYLES: {
-    root: (args_0: AccordionStyleParams) => string;
-    header: (args_0: AccordionHeaderStyleParams) => string;
-    expandIcon: (args_0: AccordionIconStyleParams) => string;
-    content: (args_0: AccordionContentStyleParams) => string;
-};

package/dist/cjs/components/overlay/accordion/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Accordion } from '@components/overlay/accordion/Accordion.tsx';
-export type { AccordionProps } from '@components/overlay/accordion/Accordion.props.ts';

package/dist/cjs/components/overlay/alert/Alert.d.ts

@@ -1,37 +0,0 @@
-import { FC } from 'react';
-import { AlertProps } from '@components/overlay/alert/Alert.props';
-/**
- * Alert component - Display notifications with different variants
- *
- * **Variants:**
- * - `default`: Standard alert with neutral styling
- * - `info`: Informational alert with blue styling
- * - `warning`: Warning alert with yellow/orange styling
- * - `error`: Error alert with red styling
- * - `success`: Success alert with green styling
- *
- * **Features:**
- * - Auto-dismisses after 3 seconds
- * - Positioned at screen corners
- * - Supports stacking with offsetY
- * - Icon based on variant
- * - Smooth animations
- * - Dynamic height calculation for proper stacking
- *
- * **Accessibility:**
- * - Uses `role="alert"` for screen reader announcements
- * - Error alerts use `aria-live="assertive"` for urgent announcements
- * - Other variants use `aria-live="polite"` to avoid interrupting users
- *
- * @example
- * ```tsx
- * <Alert
- *   text="Operation completed successfully"
- *   variant="success"
- *   position="top-right"
- *   isVisible={true}
- * />
- * ```
- */
-declare const Alert: FC<AlertProps>;
-export { Alert };

package/dist/cjs/components/overlay/alert/Alert.props.d.ts

@@ -1,56 +0,0 @@
-import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
-/**
- * Alert component props
- */
-export interface AlertProps {
-    /**
-     * Text content of the alert
-     */
-    text: string;
-    /**
-     * Variant of the alert determining its color and icon
-     * @default 'default'
-     */
-    variant?: AlertVariant;
-    /**
-     * Position of the alert on screen
-     * @default 'top-right'
-     */
-    position?: AlertPosition;
-    /**
-     * Whether the alert is visible
-     * @default false
-     */
-    isVisible?: boolean;
-    /**
-     * Vertical offset for stacking alerts (in pixels)
-     * @default 0
-     */
-    offsetY?: number;
-    /**
-     * Maximum width of the alert in pixels
-     * @default 300
-     */
-    maxWidth?: number;
-    /**
-     * Unique identifier for the alert
-     * @internal
-     */
-    alertId?: string;
-    /**
-     * Callback when alert height changes
-     * @internal
-     */
-    onHeightChange?: (alertId: string, height: number) => void;
-}
-/**
- * Internal style parameters for Alert component
- * @internal
- */
-export interface AlertStyleParams {
-    variant: AlertVariant;
-    position: AlertPosition;
-    isVisible: boolean;
-    offsetY: number;
-    maxWidth: number;
-}

package/dist/cjs/components/overlay/alert/Alert.styles.d.ts

@@ -1,4 +0,0 @@
-import { AlertStyleParams } from '@components/overlay/alert/Alert.props';
-export declare const ALERT_STYLES: {
-    root: (args_0: AlertStyleParams) => string;
-};

package/dist/cjs/components/overlay/alert/index.d.ts

@@ -1,2 +0,0 @@
-export * from '@components/overlay/alert/Alert';
-export type { AlertProps } from '@components/overlay/alert/Alert.props';

package/dist/cjs/components/overlay/alert/utils/getAlertIcon.utils.d.ts

@@ -1,8 +0,0 @@
-import { JSX } from 'react';
-import { AlertVariant } from '@interfaces/alert.types';
-/**
- * Get icon component for alert variant
- * @param variant - Alert variant
- * @returns JSX Element for the icon
- */
-export declare const getAlertIcon: (variant: AlertVariant) => JSX.Element;

package/dist/cjs/components/overlay/alert/utils/getAlertPositionStyles.utils.d.ts

@@ -1,8 +0,0 @@
-import { AlertPosition } from '@interfaces/alert.types';
-/**
- * Get position styles for alert
- * @param position - Alert position
- * @param offsetY - Vertical offset for stacking (in pixels)
- * @returns Object with CSS position styles (top/bottom + left/right)
- */
-export declare const getAlertPositionStyles: (position: AlertPosition, offsetY: number) => Record<string, string>;

package/dist/cjs/components/overlay/alert/utils/getAlertVariantColors.utils.d.ts

@@ -1,14 +0,0 @@
-import { ThemeContract } from '@/interfaces';
-import { AlertVariant } from '@interfaces/alert.types';
-export interface AlertVariantColors {
-    background: string;
-    border: string;
-    iconColor: 'info' | 'warning' | 'error' | 'success' | 'text';
-}
-/**
- * Get colors for alert variants
- * @param theme - Aurora theme
- * @param variant - Alert variant
- * @returns Colors for the variant
- */
-export declare const getAlertVariantColors: (theme: ThemeContract, variant: AlertVariant) => AlertVariantColors;

package/dist/cjs/components/overlay/menu/Menu.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { MenuProps } from '@components/overlay/menu/Menu.props';
-declare const Menu: FC<MenuProps>;
-export default Menu;

package/dist/cjs/components/overlay/menu/Menu.props.d.ts

@@ -1,14 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { AnchorOrigin } from '@hooks/useAnchorPosition.types';
-export type MenuProps = {
-    anchor: HTMLElement | null;
-    onClose: () => void;
-    children: ReactNode;
-    anchorOrigin?: AnchorOrigin;
-    width?: CSSProperties['width'];
-    /**
-     * Désactive l'animation/transition d'apparition du menu
-     * @default false
-     */
-    disableAnimation?: boolean;
-};

package/dist/cjs/components/overlay/menu/Menu.styles.d.ts

@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
-type MenuStyleParams = {
-    isFadingIn: boolean;
-    anchorOrigin: AnchorOrigin;
-    position: AnchorPosition;
-    width?: CSSProperties['width'];
-    disableAnimation?: boolean;
-};
-export declare const MENU_STYLES: {
-    root: (args_0: MenuStyleParams) => string;
-};
-export {};

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { MenuGroupProps } from '@components/overlay/menu/MenuGroup/MenuGroup.props';
-declare const MenuGroup: FC<MenuGroupProps>;
-export default MenuGroup;

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.props.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export type MenuGroupProps = {
-    children: ReactNode;
-};

package/dist/cjs/components/overlay/menu/MenuGroup/MenuGroup.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const MENU_GROUP_STYLES: {
-    root: string;
-};

package/dist/cjs/components/overlay/menu/MenuGroup/index.d.ts

@@ -1,2 +0,0 @@
-export { default as MenuGroup } from './MenuGroup.tsx';
-export type { MenuGroupProps } from './MenuGroup.props';

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.d.ts

@@ -1,4 +0,0 @@
-import { FC } from 'react';
-import { MenuItemProps } from '@components/overlay/menu/MenuItem/MenuItem.props';
-declare const MenuItem: FC<MenuItemProps>;
-export default MenuItem;

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.props.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-import { ThemeContract } from '@/interfaces';
-export type MenuItemProps = {
-    label: string;
-    icon?: ReactNode;
-    onClick: () => void;
-    textColor?: keyof ThemeContract['colors'];
-    iconColor?: keyof ThemeContract['colors'];
-    /** If true, the menu item is highlighted as active */
-    active?: boolean;
-};
-export type MenuItemStyleParams = {
-    active: boolean;
-};

package/dist/cjs/components/overlay/menu/MenuItem/MenuItem.styles.d.ts

@@ -1,4 +0,0 @@
-import { MenuItemStyleParams } from '@components/overlay/menu/MenuItem/MenuItem.props';
-export declare const MENU_ITEM_STYLES: {
-    root: (args_0: MenuItemStyleParams) => string;
-};

package/dist/cjs/components/overlay/menu/MenuItem/index.d.ts

@@ -1,2 +0,0 @@
-export { default as MenuItem } from './MenuItem.tsx';
-export type { MenuItemProps } from './MenuItem.props';

package/dist/cjs/components/overlay/menu/index.d.ts

@@ -1,6 +0,0 @@
-export { default as Menu } from './Menu';
-export type { MenuProps } from './Menu.props';
-export { MenuGroup } from './MenuGroup';
-export type { MenuGroupProps } from './MenuGroup/MenuGroup.props';
-export { MenuItem } from './MenuItem';
-export type { MenuItemProps } from './MenuItem/MenuItem.props';

package/dist/cjs/components/overlay/modal/Modal.d.ts

@@ -1,28 +0,0 @@
-import { FC } from 'react';
-import { ModalProps } from '@components/overlay/modal/Modal.props';
-/**
- * Modal component
- *
- * An overlay dialog for focused interactions.
- *
- * **Accessibility:**
- * - Uses `role="dialog"` and `aria-modal="true"` for screen readers
- * - `aria-labelledby` links to the modal title
- * - Focus is trapped inside the modal while it is open
- * - Focus returns to the triggering element when closed
- * - Escape key closes the modal
- *
- * @example
- * ```tsx
- * <Modal
- *   isOpen={isOpen}
- *   onClose={() => setIsOpen(false)}
- *   label="Confirm deletion"
- *   action={{ label: 'Delete', onClick: handleDelete }}
- * >
- *   <Text>Are you sure you want to delete this item?</Text>
- * </Modal>
- * ```
- */
-declare const Modal: FC<ModalProps>;
-export default Modal;

package/dist/cjs/components/overlay/modal/Modal.props.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-import { ButtonProps } from '@/components';
-export type ModalProps = {
-    isOpen: boolean;
-    onClose: () => void;
-    label: string;
-    children: ReactNode;
-    isForm?: boolean;
-    action?: ButtonProps;
-};

package/dist/cjs/components/overlay/modal/Modal.styles.d.ts

@@ -1,4 +0,0 @@
-export declare const MODAL_STYLES: {
-    background: (isFadingIn: boolean) => string;
-    content: (isFadingIn: boolean) => string;
-};

package/dist/cjs/components/overlay/modal/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Modal } from '@components/overlay/modal/Modal.tsx';
-export type { ModalProps } from '@components/overlay/modal/Modal.props.ts';

package/dist/cjs/constants/animations.d.ts

@@ -1 +0,0 @@
-export declare const shimmerAnimation: string;

package/dist/cjs/constants/globalConstants.d.ts

@@ -1,5 +0,0 @@
-export declare const BUTTON_SIZE = 36;
-export declare const ALERT_MAX_WIDTH = 320;
-export declare const MENU_ITEM_SIZE = 32;
-export declare const DRAWER_ITEM_HEIGHT = 32;
-export declare const DEFAULT_TRANSITION_DURATION_MS = 150;

package/dist/cjs/hooks/index.d.ts

@@ -1,7 +0,0 @@
-export { useAlert, AlertProvider } from '@hooks/useAlert.tsx';
-export type { ShowAlertOptions, AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
-export { useAnchorPosition } from '@hooks/useAnchorPosition';
-export type { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
-export { useClickOutside } from '@hooks/useClickOutside';
-export { useTransitionRender } from '@hooks/useTransitionRender';
-export type { UseTransitionRenderReturnType } from '@hooks/useTransitionRender.types';

package/dist/cjs/hooks/useAlert.d.ts

@@ -1,23 +0,0 @@
-import { FC } from 'react';
-import { AlertContextValue, AlertProviderProps } from '@hooks/useAlert.types';
-/**
- * Alert Provider Component
- * Manages alert queue and renders alerts in a portal
- */
-declare const AlertProvider: FC<AlertProviderProps>;
-/**
- * Hook to access alert functionality
- *
- * @example
- * ```tsx
- * const { showAlert } = useAlert()
- *
- * showAlert({
- *   text: 'Operation completed',
- *   variant: 'success',
- *   position: 'top-right'
- * })
- * ```
- */
-declare const useAlert: () => AlertContextValue;
-export { AlertProvider, useAlert };

package/dist/cjs/hooks/useAlert.types.d.ts

@@ -1,56 +0,0 @@
-import { AlertPosition, AlertVariant } from '@interfaces/alert.types';
-/**
- * Alert item in the queue
- */
-export interface AlertItem {
-    id: string;
-    text: string;
-    variant: AlertVariant;
-    position: AlertPosition;
-    timestamp: number;
-    maxWidth: number;
-}
-/**
- * Options for showing an alert
- */
-export interface ShowAlertOptions {
-    /**
-     * Text content of the alert
-     */
-    text: string;
-    /**
-     * Variant of the alert
-     * @default 'default'
-     */
-    variant?: AlertVariant;
-    /**
-     * Position of the alert on screen
-     * @default 'top-right'
-     */
-    position?: AlertPosition;
-    /**
-     * Duration before auto-dismiss in milliseconds
-     * @default 3000
-     */
-    duration?: number;
-    /**
-     * Maximum width of the alert in pixels
-     * @default 300
-     */
-    maxWidth?: number;
-}
-/**
- * Alert context value
- */
-export interface AlertContextValue {
-    /**
-     * Show an alert
-     */
-    showAlert: (options: ShowAlertOptions) => void;
-}
-/**
- * Alert provider props
- */
-export interface AlertProviderProps {
-    children: React.ReactNode;
-}

package/dist/cjs/hooks/useAnchorPosition.d.ts

@@ -1,17 +0,0 @@
-import { RefObject } from 'react';
-import { AnchorOrigin, AnchorPosition } from '@hooks/useAnchorPosition.types';
-type UseAnchorPositionParams = {
-    anchor: HTMLElement | null;
-    menuRef: RefObject<HTMLDivElement | null>;
-    anchorOrigin?: AnchorOrigin;
-    isVisible: boolean;
-};
-/**
- * Hook pour calculer la position d'un élément par rapport à son ancre
- * @param anchor - Élément HTML servant d'ancre
- * @param menuRef - Référence vers l'élément à positionner
- * @param anchorOrigin - Origine de l'ancrage ('left' ou 'right')
- * @param isVisible - Si l'élément est visible (pour recalculer la position)
- */
-export declare const useAnchorPosition: ({ anchor, menuRef, anchorOrigin, isVisible }: UseAnchorPositionParams) => AnchorPosition;
-export {};

package/dist/cjs/hooks/useAnchorPosition.types.d.ts

@@ -1,5 +0,0 @@
-export type AnchorPosition = {
-    top: number;
-    left: number;
-} | null;
-export type AnchorOrigin = 'left' | 'right';

package/dist/cjs/hooks/useClickOutside.d.ts

@@ -1,8 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Gestion d'un click en dehors d'un ou plusieurs éléments
- * @param refs Tableau de références à écouter
- * @param onClickOutside Callback si clic à l'extérieur
- * @param shouldTrigger Activation du comportement
- */
-export declare const useClickOutside: (refs: RefObject<HTMLElement | null>[], onClickOutside: () => void, shouldTrigger?: boolean) => void;

package/dist/cjs/hooks/useTransitionRender.d.ts

@@ -1,7 +0,0 @@
-import { UseTransitionRenderReturnType } from '@hooks/useTransitionRender.types';
-/**
- * Hook pour gérer les animations de transition lors des renders
- * @param isOpen - État d'ouverture
- * @param duration - Durée de la transition en ms
- */
-export declare const useTransitionRender: (isOpen: boolean, duration?: number) => UseTransitionRenderReturnType;

package/dist/cjs/hooks/useTransitionRender.types.d.ts

@@ -1,4 +0,0 @@
-export type UseTransitionRenderReturnType = {
-    isVisible: boolean;
-    isFadingIn: boolean;
-};

package/dist/cjs/index.d.ts

@@ -1,6 +0,0 @@
-export * from '@components/index';
-export * from '@hooks/index';
-export { defaultTheme } from '@/theme/defaultTheme';
-export type { Theme } from '@/theme/theme.types';
-export type { ThemeContract, ThemeColorContract, ThemeSpacingContract, ThemeRadiusContract, ThemeFontSizeContract, ThemeFontWeightContract, ThemeLineHeightContract, ThemeOpacityContract, ThemeShadowsContract, ThemeTransitionContract, ThemeBreakpointsContract, ThemeZIndexContract, } from '@interfaces/theme.contracts';
-import '@styles/globals.css';

package/dist/cjs/interfaces/alert.types.d.ts

@@ -1,8 +0,0 @@
-/**
- * Alert variant types
- */
-export type AlertVariant = 'default' | 'info' | 'warning' | 'error' | 'success';
-/**
- * Alert position types
- */
-export type AlertPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';

package/dist/cjs/interfaces/avatar.types.d.ts

@@ -1,2 +0,0 @@
-/** Avatar size variants */
-export type AvatarSize = 'small' | 'medium' | 'large';

package/dist/cjs/interfaces/button.types.d.ts

@@ -1,36 +0,0 @@
-import { ThemeContract } from '@/interfaces';
-export type ButtonVariants = 'contained' | 'outlined' | 'text' | 'destructive' | 'link';
-export type IconButtonVariants = Exclude<ButtonVariants, 'link'>;
-export type IconButtonSizes = 'small' | 'medium' | 'large';
-export type ButtonVariantStyle = {
-    default: {
-        backgroundColor: string;
-        color: string;
-        border: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        textUnderlineOffset?: string;
-    };
-    hover: {
-        backgroundColor: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        textUnderlineOffset?: string;
-    };
-    pressed: {
-        backgroundColor: string;
-        textDecoration?: string;
-        textDecorationColor?: string;
-        color?: string;
-        textUnderlineOffset?: string;
-    };
-    disabled: {
-        color: string;
-        cursor: string;
-        backgroundColor: string;
-        borderColor?: string;
-        textDecoration?: string;
-        textUnderlineOffset?: string;
-    };
-    textColor: keyof ThemeContract['colors'];
-};