sgod-library-frontend

import React, { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, FormHTMLAttributes } from 'react'; import { Emitter } from 'mitt'; import z from 'zod'; import { ClassValue } from 'clsx'; import { UseFormSetError } from 'react-hook-form'; type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'error'; type ButtonSize = 'sm' | 'md' | 'lg'; interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> { children: ReactNode; variant?: ButtonVariant; size?: ButtonSize; isLoading?: boolean; isFullWidth?: boolean; leftIcon?: ReactNode; rightIcon?: ReactNode; } declare const Button: React.FC<ButtonProps>; interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> { label?: string; error?: string; helperText?: string; size?: 'sm' | 'md' | 'lg'; fullWidth?: boolean; leftIcon?: ReactNode; rightIcon?: ReactNode; isLoading?: boolean; } declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>; interface SkeletonProps { className?: string; width?: string | number; height?: string | number; borderRadius?: string; } declare const Skeleton: React.FC<SkeletonProps>; interface GridProps { children: ReactNode; container?: boolean; item?: boolean; cols?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; xl?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; spacing?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12; justifyContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'; alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline'; direction?: 'row' | 'row-reverse' | 'col' | 'col-reverse'; wrap?: 'wrap' | 'nowrap' | 'wrap-reverse'; className?: string; } declare const Grid: React.FC<GridProps>; type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; type IconVariant = 'outline' | 'solid'; interface IconProps { name: string; size?: IconSize; variant?: IconVariant; color?: string; className?: string; } declare const Icon: React.FC<IconProps>; type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline'; type TypographyAlign = 'inherit' | 'left' | 'center' | 'right' | 'justify'; type TypographyColor = 'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'neutral'; interface TypographyProps { variant?: TypographyVariant; align?: TypographyAlign; color?: TypographyColor; weight?: 'regular' | 'medium' | 'bold'; children: ReactNode; className?: string; component?: React.ElementType; gutterBottom?: boolean; noWrap?: boolean; } declare const Typography: React.FC<TypographyProps>; interface CardProps { children: ReactNode; className?: string; title?: string; subtitle?: string; footer?: ReactNode; elevation?: 'none' | 'sm' | 'md' | 'lg'; bordered?: boolean; rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'; padding?: 'none' | 'sm' | 'md' | 'lg'; } declare const Card: React.FC<CardProps>; interface EmptyStateProps { title: string; description?: string; icon?: ReactNode; action?: { label: string; onClick: () => void; }; className?: string; size?: 'sm' | 'md' | 'lg'; } declare const EmptyState: React.FC<EmptyStateProps>; interface ErrorStateProps { title?: string; message?: string; onRetry?: () => void; onHelp?: () => void; className?: string; icon?: React.ReactNode; } declare const ErrorState: React.FC<ErrorStateProps>; interface FormFieldProps extends InputProps { name: string; children?: ReactNode; } declare const FormField: React.FC<FormFieldProps>; type AlertSeverity = 'info' | 'success' | 'warning' | 'error'; type AlertVariant = 'filled' | 'outlined' | 'standard'; interface AlertProps { severity?: AlertSeverity; variant?: AlertVariant; title?: string; children: ReactNode; className?: string; icon?: boolean | ReactNode; onClose?: () => void; } declare const Alert: React.FC<AlertProps>; interface DataTableColumn<T> { key: keyof T & string; header: string; width?: string; render?: (item: T, index: number) => ReactNode; } interface DataTableProps<T> { columns: DataTableColumn<T>[]; data?: T[]; keyExtractor: (item: T) => string | number; isLoading?: boolean; error?: Error | null; onRetry?: () => void; emptyStateProps?: { title: string; description?: string; icon?: ReactNode; action?: { label: string; onClick: () => void; }; }; className?: string; rowClassName?: string | ((item: T, index: number) => string); } declare function DataTable<T>({ columns, data, keyExtractor, isLoading, error, onRetry, emptyStateProps, className, rowClassName, }: DataTableProps<T>): React.JSX.Element; interface FormProps extends FormHTMLAttributes<HTMLFormElement> { children: ReactNode; onSubmit: (e: React.FormEvent<HTMLFormElement>) => void; isLoading?: boolean; submitLabel?: string; resetLabel?: string; onReset?: () => void; error?: string; success?: string; actionButtons?: ReactNode; alignActions?: 'left' | 'center' | 'right'; } declare const Form: React.FC<FormProps>; type BreakpointKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'; type DeviceType = 'mobile' | 'tablet' | 'desktop'; type FluidSize = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'; declare const FLUID_BREAKPOINTS: { readonly xs: "20rem"; readonly sm: "30rem"; readonly md: "48rem"; readonly lg: "64rem"; readonly xl: "80rem"; readonly '2xl': "96rem"; readonly '3xl': "120rem"; }; declare const TAILWIND_BREAKPOINTS: { readonly xs: 320; readonly sm: 640; readonly md: 768; readonly lg: 1024; readonly xl: 1280; readonly '2xl': 1536; }; declare const createFluidGrid: (config: { type?: "auto-fit" | "auto-fill" | "fixed"; minSize?: FluidSize | string; maxCols?: number; gap?: FluidSize; aspectRatio?: "square" | "video" | "photo" | "auto"; }) => string; declare const createFluidText: (config: { size?: FluidSize; weight?: "normal" | "medium" | "semibold" | "bold"; responsive?: boolean; }) => string; declare const createDisplayText: (config: { size?: "sm" | "md" | "lg" | "xl"; weight?: "bold" | "black"; }) => string; declare const createFluidSpacing: (config: { size?: FluidSize; type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr"; context?: "element" | "container" | "section"; }) => string; declare const createFluidContainer: (config?: { maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "fluid"; padding?: boolean; center?: boolean; }) => string; declare const createFluidCard: (config?: { padding?: FluidSize; shadow?: "sm" | "md" | "lg" | "xl"; rounded?: "sm" | "md" | "lg" | "xl"; border?: boolean; hover?: boolean; }) => string; declare const createViewportGrid: (config: { minWidth?: string; maxCols?: number; gap?: FluidSize; }) => string; declare const createAspectRatioResponsive: (config: { widescreen?: string; standard?: string; mobile?: string; }) => string; declare const fluidPresets: { container: { narrow: string; default: string; wide: string; fullwidth: string; fluid: string; }; typography: { hero: string; title: string; subtitle: string; heading: string; subheading: string; body: string; caption: string; small: string; }; grid: { cards: string; products: string; gallery: string; 'viewport-cards': string; 'viewport-products': string; 'viewport-gallery': string; }; spacing: { section: string; container: string; element: string; sectionMargin: string; elementMargin: string; }; card: { default: string; compact: string; spacious: string; minimal: string; }; }; declare const viewportUtils: { getViewportWidth: () => number; getViewportHeight: () => number; getAspectRatio: () => number; isWidescreen: () => boolean; getDeviceType: () => DeviceType; mediaQuery: (breakpoint: BreakpointKey) => string; }; declare const createResponsiveGrid: (config: { mobile?: number; tablet?: number; desktop?: number; gap?: "sm" | "md" | "lg"; }) => string; declare const createResponsiveSpacing: (config: { mobile?: string; tablet?: string; desktop?: string; type?: "p" | "px" | "py" | "pt" | "pb" | "pl" | "pr" | "m" | "mx" | "my" | "mt" | "mb" | "ml" | "mr"; }) => string; /** * Demo utility functions cho Fluid Responsive Design System * Showcase các tính năng mới: viewport percentages, rem-based breakpoints, fluid scaling */ declare const fluidTypographyExamples: { heroTitle: string; sectionTitle: string; mainHeading: string; subHeading: string; bodyLarge: string; bodyText: string; caption: string; small: string; }; declare const fluidGridExamples: { cardsGrid: string; productsGrid: string; galleryGrid: string; viewportCards: string; viewportProducts: string; viewportGallery: string; }; declare const fluidSpacingExamples: { elementPadding: { small: string; medium: string; large: string; }; containerPadding: { small: string; medium: string; large: string; }; sectionPadding: { small: string; medium: string; large: string; }; }; declare const fluidContainerExamples: { narrow: string; default: string; wide: string; fullwidth: string; fluid: string; }; declare const fluidCardExamples: { compact: string; default: string; spacious: string; withShadow: string; }; declare const responsiveVisibilityExamples: { mobileOnly: string; tabletOnly: string; desktopOnly: string; tabletUp: string; desktopUp: string; hideMobile: string; hideTablet: string; hideDesktop: string; }; declare const usageExamples: { landingPage: { hero: string; title: string; subtitle: string; cta: string; }; cardGrid: { container: string; grid: string; card: string; cardTitle: string; cardBody: string; }; blog: { container: string; title: string; content: string; sidebar: string; }; dashboard: { container: string; statsGrid: string; statCard: string; chartContainer: string; }; }; declare const demoUtils: { getCurrentDevice: () => DeviceType; getViewportInfo: () => { width: number; height: number; aspectRatio: number; isWidescreen: boolean; device: DeviceType; }; createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string; matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean; }; declare const completeExamples: { ecommerce: { container: string; grid: string; productCard: string; productImage: string; productTitle: string; productPrice: string; }; news: { container: string; grid: string; articleCard: string; articleImage: string; articleTitle: string; articleExcerpt: string; articleMeta: string; }; portfolio: { container: string; grid: string; galleryItem: string; galleryImage: string; galleryOverlay: string; }; team: { container: string; grid: string; memberCard: string; memberAvatar: string; memberName: string; memberRole: string; memberBio: string; }; }; declare const fluidResponsiveDemo: { typography: { heroTitle: string; sectionTitle: string; mainHeading: string; subHeading: string; bodyLarge: string; bodyText: string; caption: string; small: string; }; grids: { cardsGrid: string; productsGrid: string; galleryGrid: string; viewportCards: string; viewportProducts: string; viewportGallery: string; }; spacing: { elementPadding: { small: string; medium: string; large: string; }; containerPadding: { small: string; medium: string; large: string; }; sectionPadding: { small: string; medium: string; large: string; }; }; containers: { narrow: string; default: string; wide: string; fullwidth: string; fluid: string; }; cards: { compact: string; default: string; spacious: string; withShadow: string; }; visibility: { mobileOnly: string; tabletOnly: string; desktopOnly: string; tabletUp: string; desktopUp: string; hideMobile: string; hideTablet: string; hideDesktop: string; }; usage: { landingPage: { hero: string; title: string; subtitle: string; cta: string; }; cardGrid: { container: string; grid: string; card: string; cardTitle: string; cardBody: string; }; blog: { container: string; title: string; content: string; sidebar: string; }; dashboard: { container: string; statsGrid: string; statCard: string; chartContainer: string; }; }; utils: { getCurrentDevice: () => DeviceType; getViewportInfo: () => { width: number; height: number; aspectRatio: number; isWidescreen: boolean; device: DeviceType; }; createMediaQuery: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => string; matchesBreakpoint: (breakpoint: keyof typeof FLUID_BREAKPOINTS) => boolean; }; complete: { ecommerce: { container: string; grid: string; productCard: string; productImage: string; productTitle: string; productPrice: string; }; news: { container: string; grid: string; articleCard: string; articleImage: string; articleTitle: string; articleExcerpt: string; articleMeta: string; }; portfolio: { container: string; grid: string; galleryItem: string; galleryImage: string; galleryOverlay: string; }; team: { container: string; grid: string; memberCard: string; memberAvatar: string; memberName: string; memberRole: string; memberBio: string; }; }; presets: { container: { narrow: string; default: string; wide: string; fullwidth: string; fluid: string; }; typography: { hero: string; title: string; subtitle: string; heading: string; subheading: string; body: string; caption: string; small: string; }; grid: { cards: string; products: string; gallery: string; 'viewport-cards': string; 'viewport-products': string; 'viewport-gallery': string; }; spacing: { section: string; container: string; element: string; sectionMargin: string; elementMargin: string; }; card: { default: string; compact: string; spacious: string; minimal: string; }; }; common: { heroSection: string; cardGrid: string; productGrid: string; twoColumnLayout: string; threeColumnLayout: string; }; }; type EventData = string | number | boolean | object | null | undefined; type Events = { [key: string]: EventData; }; declare const eventBus: Emitter<Events>; type EventHandler = (data?: EventData) => void; /** * Hook để đăng ký và huỷ đăng ký sự kiện từ Event Bus * @param event Tên sự kiện cần lắng nghe * @param handler Hàm xử lý khi sự kiện được phát */ declare function useEventBus(event: string, handler: EventHandler): (data?: EventData) => void; declare const LoginBody: z.ZodObject<{ email: z.ZodString; password: z.ZodString; }, "strict", z.ZodTypeAny, { email: string; password: string; }, { email: string; password: string; }>; type LoginBodyType = z.TypeOf<typeof LoginBody>; declare const LoginRes: z.ZodObject<{ data: z.ZodObject<{ accessToken: z.ZodString; refreshToken: z.ZodString; }, "strip", z.ZodTypeAny, { accessToken: string; refreshToken: string; }, { accessToken: string; refreshToken: string; }>; message: z.ZodString; }, "strip", z.ZodTypeAny, { data: { accessToken: string; refreshToken: string; }; message: string; }, { data: { accessToken: string; refreshToken: string; }; message: string; }>; type LoginResType = z.TypeOf<typeof LoginRes>; declare const RefreshTokenBody: z.ZodObject<{ refreshToken: z.ZodString; }, "strict", z.ZodTypeAny, { refreshToken: string; }, { refreshToken: string; }>; type RefreshTokenBodyType = z.TypeOf<typeof RefreshTokenBody>; declare const RefreshTokenRes: z.ZodObject<{ data: z.ZodObject<{ accessToken: z.ZodString; refreshToken: z.ZodString; }, "strip", z.ZodTypeAny, { accessToken: string; refreshToken: string; }, { accessToken: string; refreshToken: string; }>; message: z.ZodString; }, "strip", z.ZodTypeAny, { data: { accessToken: string; refreshToken: string; }; message: string; }, { data: { accessToken: string; refreshToken: string; }; message: string; }>; type RefreshTokenResType = z.TypeOf<typeof RefreshTokenRes>; declare const LogoutBody: z.ZodObject<{ refreshToken: z.ZodString; }, "strict", z.ZodTypeAny, { refreshToken: string; }, { refreshToken: string; }>; type LogoutBodyType = z.TypeOf<typeof LogoutBody>; declare const EVENTS: { USER: { LOGGED_IN: string; LOGGED_OUT: string; UPDATED_PROFILE: string; }; DATA: { UPDATED: string; DELETED: string; CREATED: string; LOADED: string; ERROR: string; }; UI: { THEME_CHANGED: string; LANGUAGE_CHANGED: string; SIDEBAR_TOGGLED: string; MODAL_OPENED: string; MODAL_CLOSED: string; NOTIFICATION_SHOWN: string; }; }; interface AccessTokenPayloadCreate { userId: number; deviceId: number; roleId: number; roleName: string; } interface AccessTokenPayload extends AccessTokenPayloadCreate { exp: number; iat: number; } interface RefreshTokenPayloadCreate { userId: number; } interface RefreshTokenPayload extends RefreshTokenPayloadCreate { exp: number; iat: number; } declare function cn(...inputs: ClassValue[]): string; interface AuthApi { refreshToken: (body: RefreshTokenBodyType) => Promise<RefreshTokenResType>; } declare const handleErrorApi: ({ error, setError, }: { error: any; setError?: UseFormSetError<any>; }) => void; declare const getAccessTokenFromLocalStorage: () => string | null; declare const getRefreshTokenFromLocalStorage: () => string | null; declare const setAccessTokenToLocalStorage: (value: string) => void; declare const setRefreshTokenToLocalStorage: (value: string) => void; declare const removeTokensFromLocalStorage: () => void; declare const checkAndRefreshToken: (param?: { onError?: () => void; onSuccess?: () => void; authApi: AuthApi; }) => Promise<void>; declare const decodeToken: (token: string) => RefreshTokenPayload | AccessTokenPayload; /** * Design System Tokens * Các giá trị cơ bản trong hệ thống thiết kế */ declare const colors: { primary: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; secondary: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; success: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; warning: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; error: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; info: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; neutral: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }; declare const typography: { fontSize: { xs: string; sm: string; base: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; }; fontWeight: { regular: number; medium: number; bold: number; }; lineHeight: { none: number; tight: number; normal: number; relaxed: number; }; letterSpacing: { tighter: string; tight: string; normal: string; wide: string; wider: string; }; fontFamily: { heading: string; body: string; }; }; declare const spacing: { 0: string; 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; 8: string; 10: string; 12: string; 16: string; 20: string; 24: string; 32: string; }; declare const borderRadius: { none: string; sm: string; default: string; md: string; lg: string; xl: string; '2xl': string; full: string; }; declare const shadows: { none: string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; declare const zIndex: { 0: number; 10: number; 20: number; 30: number; 40: number; 50: number; auto: string; dropdown: number; sticky: number; fixed: number; modalBackdrop: number; modal: number; popover: number; tooltip: number; }; declare const transitions: { duration: { 75: string; 100: string; 150: string; 200: string; 300: string; 500: string; 700: string; 1000: string; }; timing: { default: string; linear: string; in: string; out: string; 'in-out': string; }; }; declare const grid: { columns: number; gutter: string; margin: string; }; declare const breakpoints: { xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; declare const iconSizes: { xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; declare const designTokens: { colors: { primary: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; secondary: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; success: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; warning: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; error: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; info: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; neutral: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; }; typography: { fontSize: { xs: string; sm: string; base: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; }; fontWeight: { regular: number; medium: number; bold: number; }; lineHeight: { none: number; tight: number; normal: number; relaxed: number; }; letterSpacing: { tighter: string; tight: string; normal: string; wide: string; wider: string; }; fontFamily: { heading: string; body: string; }; }; spacing: { 0: string; 1: string; 2: string; 3: string; 4: string; 5: string; 6: string; 8: string; 10: string; 12: string; 16: string; 20: string; 24: string; 32: string; }; borderRadius: { none: string; sm: string; default: string; md: string; lg: string; xl: string; '2xl': string; full: string; }; shadows: { none: string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; zIndex: { 0: number; 10: number; 20: number; 30: number; 40: number; 50: number; auto: string; dropdown: number; sticky: number; fixed: number; modalBackdrop: number; modal: number; popover: number; tooltip: number; }; transitions: { duration: { 75: string; 100: string; 150: string; 200: string; 300: string; 500: string; 700: string; 1000: string; }; timing: { default: string; linear: string; in: string; out: string; 'in-out': string; }; }; grid: { columns: number; gutter: string; margin: string; }; breakpoints: { xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; iconSizes: { xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; }; }; declare const TokenType: { readonly AccessToken: "AccessToken"; readonly RefreshToken: "RefreshToken"; }; export { AccessTokenPayload, AccessTokenPayloadCreate, Alert, AlertProps, AlertSeverity, AlertVariant, BreakpointKey, Button, ButtonProps, ButtonSize, ButtonVariant, Card, CardProps, DataTable, DataTableColumn, DataTableProps, DeviceType, EVENTS, EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, FLUID_BREAKPOINTS, FluidSize, Form, FormField, FormFieldProps, FormProps, Grid, GridProps, Icon, IconProps, IconSize, IconVariant, Input, InputProps, LoginBody, LoginBodyType, LoginRes, LoginResType, LogoutBody, LogoutBodyType, RefreshTokenBody, RefreshTokenBodyType, RefreshTokenPayload, RefreshTokenPayloadCreate, RefreshTokenRes, RefreshTokenResType, Skeleton, SkeletonProps, TAILWIND_BREAKPOINTS, TokenType, Typography, TypographyAlign, TypographyColor, TypographyProps, TypographyVariant, borderRadius, breakpoints, checkAndRefreshToken, cn, colors, completeExamples, createAspectRatioResponsive, createDisplayText, createFluidCard, createFluidContainer, createFluidGrid, createFluidSpacing, createFluidText, createResponsiveGrid, createResponsiveSpacing, createViewportGrid, decodeToken, demoUtils, designTokens, eventBus, fluidCardExamples, fluidContainerExamples, fluidGridExamples, fluidPresets, fluidResponsiveDemo, fluidSpacingExamples, fluidTypographyExamples, getAccessTokenFromLocalStorage, getRefreshTokenFromLocalStorage, grid, handleErrorApi, iconSizes, removeTokensFromLocalStorage, responsiveVisibilityExamples, setAccessTokenToLocalStorage, setRefreshTokenToLocalStorage, shadows, spacing, transitions, typography, usageExamples, useEventBus, viewportUtils, zIndex };