@odigos/ui-kit 0.0.2

package/.prettierrc

@@ -0,0 +1,13 @@
+{
+  "tabWidth": 2,
+  "printWidth": 200,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "parser": "typescript"
+}

package/CHANGELOG.md

@@ -0,0 +1,26 @@
+# Changelog
+
+## [0.0.2](https://github.com/odigos-io/ui-kit/compare/ui-kit-v0.0.1...ui-kit-v0.0.2) (2025-03-13)
+
+
+### Features
+
+* add "utils" lib ([c0b5f64](https://github.com/odigos-io/ui-kit/commit/c0b5f64a18964f55129832db19c9b5610c14f726))
+* add all icons ([6bbbb5a](https://github.com/odigos-io/ui-kit/commit/6bbbb5a43568796f50b77699c9e1c62ed00bab8a))
+* add components lib ([d1f283c](https://github.com/odigos-io/ui-kit/commit/d1f283c10498b4c73234ae2db03063eb35537d18))
+* add containers from lib ([a74e765](https://github.com/odigos-io/ui-kit/commit/a74e76566df5f31d0a80022c1604b7c3c5b20e4a))
+* add missing types from utils lib ([d53b8b7](https://github.com/odigos-io/ui-kit/commit/d53b8b79b723bcda5bff4e73152172bb5a203853))
+* add some icons ([51caa2b](https://github.com/odigos-io/ui-kit/commit/51caa2bc983d1292dc47ede313dd7acf92378f04))
+* add theme lib ([db76d6e](https://github.com/odigos-io/ui-kit/commit/db76d6e52df911a7fd8d6c5da977793e20bba68e))
+* add types and stores from containers lib ([4e99609](https://github.com/odigos-io/ui-kit/commit/4e996099f33403f6cbc4c2f48e8e691c65f157ce))
+* add types from utils lib ([f97b768](https://github.com/odigos-io/ui-kit/commit/f97b7685491e52fcdeae5b252c8ddedb03e6d478))
+* init root files ([c5e4f06](https://github.com/odigos-io/ui-kit/commit/c5e4f0670e93cb9b3d24b360f9b712629fea1eb6))
+* init workflows ([ecd8517](https://github.com/odigos-io/ui-kit/commit/ecd8517f75956133745c205c47c08037485196a0))
+
+
+### Bug Fixes
+
+* import ([482ab76](https://github.com/odigos-io/ui-kit/commit/482ab76e7a964e1a85bf43323ece0d46efa84920))
+* readme ([9f0b1a7](https://github.com/odigos-io/ui-kit/commit/9f0b1a725ceab7113c74eb492c99d0f0d44da0aa))
+* storybook category ([abf5e5f](https://github.com/odigos-io/ui-kit/commit/abf5e5f96b11c35194af0fe918662d252899afd8))
+* storybook error ([867dc9f](https://github.com/odigos-io/ui-kit/commit/867dc9f9cec8eb4c533eaf7448dd4e8624b50fb6))

package/README.md

@@ -0,0 +1,62 @@
+# Odigos UI Kit
+
+This library contains directories shared across multiple Odigos UIs, available import paths are:
+- components
+- constants
+- containers
+- functions
+- hooks
+- icons
+- store
+- theme
+- types
+
+## Installation
+
+Using **npm**:
+
+```shell
+npm i @odigos/ui-kit
+```
+
+Using **yarn**:
+
+```shell
+yarn add @odigos/ui-kit
+```
+
+## Usage
+
+Wrap your app with the theme provider:
+
+```tsx
+import Theme from '@odigos/ui-kit/theme'
+
+const AppProviders = () => {
+  return (
+    <Theme.Provider>
+      <App />
+    </Theme.Provider>
+  )
+}
+```
+
+Import anything else you'd need:
+
+```tsx
+import Theme from '@odigos/ui-kit/theme'
+import { Text } from '@odigos/ui-kit/components'
+import { useDarkMode } from '@odigos/ui-kit/store'
+import { ToggleDarkMode } from '@odigos/ui-kit/containers'
+
+const App = () => {
+  const { darkMode } = useDarkMode()
+
+  return (
+    <div>
+      <ToggleDarkMode />
+      <Text>{darkMode ? 'it is dark in here' : 'it is light in here'}</Text>
+    </div>
+  )
+}
+```

package/lib/components/auto-complete-input/auto-complete-input.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type AutocompleteInputProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<AutocompleteInputProps>;
+};
+export default _default;
+export declare const Default: StoryFn<AutocompleteInputProps>;

package/lib/components/auto-complete-input/index.d.ts

@@ -0,0 +1,19 @@
+import { type FC, type InputHTMLAttributes, type CSSProperties } from 'react';
+import type { SVG } from '@/types';
+interface Option {
+    type?: string;
+    label: string;
+    description?: string;
+    icon?: SVG;
+    items?: Option[];
+}
+interface AutocompleteInputProps extends InputHTMLAttributes<HTMLInputElement> {
+    options: Option[];
+    placeholder?: string;
+    selectedOption?: Option;
+    onOptionSelect?: (option?: Option) => void;
+    style?: CSSProperties;
+    disabled?: boolean;
+}
+declare const AutocompleteInput: FC<AutocompleteInputProps>;
+export { AutocompleteInput, type AutocompleteInputProps };

package/lib/components/badge/badge.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { type BadgeProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<BadgeProps>;
+};
+export default _default;
+export declare const Default: StoryObj<BadgeProps>;
+export declare const DefaultFilled: StoryObj<BadgeProps>;
+export declare const StatusSuccess: StoryObj<BadgeProps>;
+export declare const StatusError: StoryObj<BadgeProps>;
+export declare const StatusWarn: StoryObj<BadgeProps>;

package/lib/components/badge/index.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode, type FC } from 'react';
+import { NOTIFICATION_TYPE } from '@/types';
+interface BadgeProps {
+    label: string | number | ReactNode;
+    filled?: boolean;
+    status?: NOTIFICATION_TYPE;
+    withIcon?: boolean;
+    onClick?: () => void;
+}
+declare const Badge: FC<BadgeProps>;
+export { Badge, type BadgeProps };

package/lib/components/button/button.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type ButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<ButtonProps>;
+};
+export default _default;
+export declare const Default: StoryFn<ButtonProps>;

package/lib/components/button/index.d.ts

@@ -0,0 +1,6 @@
+import { type ButtonHTMLAttributes, FC } from 'react';
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning';
+}
+declare const Button: FC<ButtonProps>;
+export { Button, type ButtonProps };

package/lib/components/cancel-warning/cancel-warning.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type CancelWarningProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<CancelWarningProps>;
+};
+export default _default;
+export declare const Default: StoryFn<CancelWarningProps>;

package/lib/components/cancel-warning/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CancelWarningProps {
+    isOpen: boolean;
+    noOverlay?: boolean;
+    name?: string;
+    onApprove: () => void;
+    onDeny: () => void;
+}
+declare const CancelWarning: React.FC<CancelWarningProps>;
+export { CancelWarning, type CancelWarningProps };

package/lib/components/checkbox/checkbox.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type CheckboxProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<CheckboxProps>;
+};
+export default _default;
+export declare const Default: StoryFn<CheckboxProps>;

package/lib/components/checkbox/index.d.ts

@@ -0,0 +1,15 @@
+import { type CSSProperties, type FC } from 'react';
+interface CheckboxProps {
+    title?: string;
+    titleColor?: CSSProperties['color'];
+    tooltip?: string;
+    value?: boolean;
+    partiallyChecked?: boolean;
+    onChange?: (value: boolean) => void;
+    disabled?: boolean;
+    style?: CSSProperties;
+    errorMessage?: string;
+    allowPropagation?: boolean;
+}
+declare const Checkbox: FC<CheckboxProps>;
+export { Checkbox, type CheckboxProps };

package/lib/components/code/code.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type CodeProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<CodeProps>;
+};
+export default _default;
+export declare const Default: StoryFn<CodeProps>;

package/lib/components/code/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+interface CodeProps {
+    language: string;
+    code: string;
+    flatten?: boolean;
+    pretty?: boolean;
+}
+declare const Code: FC<CodeProps>;
+export { Code, type CodeProps };
+export * from './toggle-code-component/index';

package/lib/components/code/toggle-code-component/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface ToggleCodeComponentProps {
+    isPrettyMode: boolean;
+    setIsPrettyMode: (isPrettyMode: boolean) => void;
+}
+declare const ToggleCodeComponent: FC<ToggleCodeComponentProps>;
+export { ToggleCodeComponent, type ToggleCodeComponentProps };

package/lib/components/condition-details/condition-details.stories.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { type ConditionDetailsProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<ConditionDetailsProps>;
+};
+export default _default;
+export declare const MixedConditions: StoryObj<ConditionDetailsProps>;
+export declare const SuccessConditions: StoryObj<ConditionDetailsProps>;
+export declare const DisabledConditions: StoryObj<ConditionDetailsProps>;
+export declare const ErrorConditions: StoryObj<ConditionDetailsProps>;
+export declare const WarningConditions: StoryObj<ConditionDetailsProps>;
+export declare const LoadingConditions: StoryObj<ConditionDetailsProps>;

package/lib/components/condition-details/index.d.ts

@@ -0,0 +1,10 @@
+import { type FC } from 'react';
+import { type Condition } from '@/types';
+interface ConditionDetailsProps {
+    conditions: Condition[];
+    headerLabelError?: string;
+    headerLabelWarning?: string;
+    headerLabelSuccess?: string;
+}
+declare const ConditionDetails: FC<ConditionDetailsProps>;
+export { ConditionDetails, type ConditionDetailsProps };

package/lib/components/data-card/data-card-fields/index.d.ts

@@ -0,0 +1,24 @@
+import { type FC } from 'react';
+declare enum DATA_CARD_FIELD_TYPES {
+    CODE = "code",
+    TABLE = "table",
+    BADGE = "badge",
+    LOADER = "loader",
+    DIVIDER = "divider",
+    MONITORS = "monitors",
+    COPY_TEXT = "copy-text",
+    DESCRIBE_ROW = "describe-row",
+    ACTIVE_STATUS = "active-status",
+    POD_CONTAINER = "pod-container",
+    SOURCE_CONTAINER = "source-container"
+}
+interface DataCardFieldsProps {
+    data: {
+        type?: DATA_CARD_FIELD_TYPES;
+        title?: string;
+        tooltip?: string;
+        value?: string | Record<string, any>;
+    }[];
+}
+declare const DataCardFields: FC<DataCardFieldsProps>;
+export { DataCardFields, type DataCardFieldsProps, DATA_CARD_FIELD_TYPES };

package/lib/components/data-card/data-card.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { StoryObj } from '@storybook/react';
+import { type DataCardProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DataCardProps>;
+};
+export default _default;
+export declare const Containers: StoryObj<DataCardProps>;
+export declare const DescribePod: StoryObj<DataCardProps>;

package/lib/components/data-card/index.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode, type FC } from 'react';
+import { DataCardFields, type DataCardFieldsProps, DATA_CARD_FIELD_TYPES } from './data-card-fields';
+interface DataCardProps {
+    title?: string;
+    titleBadge?: string | number;
+    description?: string;
+    action?: ReactNode | (() => ReactNode);
+    withExtend?: boolean;
+    data: DataCardFieldsProps['data'];
+}
+declare const DataCard: FC<DataCardProps>;
+export { DataCard, type DataCardProps, DataCardFields, type DataCardFieldsProps, DATA_CARD_FIELD_TYPES };

package/lib/components/data-tab/data-tab.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type DataTabProps } from '.';
+import type { StoryFn } from '@storybook/react';
+declare const _default: {
+    title: string;
+    component: React.FC<DataTabProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DataTabProps>;

package/lib/components/data-tab/index.d.ts

@@ -0,0 +1,28 @@
+import { type FC, type ReactNode } from 'react';
+import type { SVG } from '@/types';
+import { NOTIFICATION_TYPE, SIGNAL_TYPE } from '@/types';
+interface DataTabProps {
+    title: string;
+    subTitle?: string;
+    icon?: SVG;
+    icons?: SVG[];
+    iconSrc?: string;
+    iconSrcs?: string[];
+    hoverText?: string;
+    status?: NOTIFICATION_TYPE;
+    faded?: boolean;
+    monitors?: SIGNAL_TYPE[];
+    monitorsWithLabels?: boolean;
+    isActive?: boolean;
+    withCheckbox?: boolean;
+    isCheckboxDisabled?: boolean;
+    isChecked?: boolean;
+    onCheckboxChange?: (value: boolean) => void;
+    withExtend?: boolean;
+    isExtended?: boolean;
+    renderExtended?: () => ReactNode;
+    renderActions?: () => ReactNode;
+    onClick?: () => void;
+}
+declare const DataTab: FC<DataTabProps>;
+export { DataTab, type DataTabProps };

package/lib/components/delete-warning/delete-warning.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DeleteWarningProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DeleteWarningProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DeleteWarningProps>;

package/lib/components/delete-warning/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ENTITY_TYPES } from '@/types';
+interface DeleteWarningProps {
+    isOpen: boolean;
+    noOverlay?: boolean;
+    name?: string;
+    type?: ENTITY_TYPES;
+    isLastItem?: boolean;
+    onApprove: () => void;
+    onDeny: () => void;
+}
+declare const DeleteWarning: React.FC<DeleteWarningProps>;
+export { DeleteWarning, type DeleteWarningProps };

package/lib/components/describe-row/describe-row.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DescribeRowProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DescribeRowProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DescribeRowProps>;

package/lib/components/describe-row/index.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import { NOTIFICATION_TYPE } from '@/types';
+interface DescribeRowProps {
+    title?: string;
+    subTitle?: string;
+    tooltip?: string;
+    value?: {
+        text?: string;
+        status?: NOTIFICATION_TYPE | 'transitioning';
+    };
+}
+declare const DescribeRow: FC<DescribeRowProps>;
+export { DescribeRow, type DescribeRowProps };

package/lib/components/divider/divider.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DividerProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DividerProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DividerProps>;

package/lib/components/divider/index.d.ts

@@ -0,0 +1,11 @@
+import { type FC } from 'react';
+import { NOTIFICATION_TYPE } from '@/types';
+interface DividerProps {
+    orientation?: 'horizontal' | 'vertical';
+    type?: NOTIFICATION_TYPE;
+    thickness?: number;
+    length?: string;
+    margin?: string;
+}
+declare const Divider: FC<DividerProps>;
+export { Divider, type DividerProps };

package/lib/components/docs-button/docs-button.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DocsButtonProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DocsButtonProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DocsButtonProps>;

package/lib/components/docs-button/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import { type ButtonProps } from '../button';
+interface DocsButtonProps {
+    endpoint?: string;
+    variant?: ButtonProps['variant'];
+}
+declare const DocsButton: FC<DocsButtonProps>;
+export { DocsButton, type DocsButtonProps };

package/lib/components/drawer/drawer-footer/index.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import { type ButtonProps } from '../../button';
+interface DrawerFooterProps {
+    isOpen: boolean;
+    leftButtons?: (ButtonProps & {
+        'data-id': string;
+    })[];
+    rightButtons?: (ButtonProps & {
+        'data-id': string;
+    })[];
+}
+declare const DrawerFooter: FC<DrawerFooterProps>;
+export { DrawerFooter, type DrawerFooterProps };

package/lib/components/drawer/drawer-header/index.d.ts

@@ -0,0 +1,22 @@
+import { type FC, type ReactNode } from 'react';
+import type { SVG } from '@/types';
+import { type ButtonProps } from '../../button';
+interface DrawerHeaderProps {
+    onClose: () => void;
+    icon?: SVG;
+    iconSrc?: string;
+    title?: string;
+    titleTooltip?: string;
+    replaceTitleWith?: () => ReactNode;
+    actionButtons?: (ButtonProps & {
+        'data-id': string;
+    })[];
+    tabs?: {
+        label: string;
+        icon?: SVG;
+        onClick: () => void;
+        selected?: boolean;
+    }[];
+}
+declare const DrawerHeader: FC<DrawerHeaderProps>;
+export { DrawerHeader, type DrawerHeaderProps };

package/lib/components/drawer/drawer.stories.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { type DrawerProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DrawerProps>;
+};
+export default _default;
+export declare const Default: StoryObj<DrawerProps>;
+export declare const WithTabs: StoryObj<DrawerProps>;

package/lib/components/drawer/index.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode, type FC } from 'react';
+import { DrawerHeader, DrawerHeaderProps } from './drawer-header';
+import { DrawerFooter, DrawerFooterProps } from './drawer-footer';
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    closeOnEscape?: boolean;
+    position?: 'right' | 'left';
+    width?: string;
+    children: ReactNode;
+    header: Omit<DrawerHeaderProps, 'onClose'>;
+    footer: DrawerFooterProps;
+}
+declare const Drawer: FC<DrawerProps>;
+export { Drawer, type DrawerProps, DrawerHeader, type DrawerHeaderProps, DrawerFooter, type DrawerFooterProps };

package/lib/components/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type DropdownProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<DropdownProps>;
+};
+export default _default;
+export declare const Default: StoryFn<DropdownProps>;

package/lib/components/dropdown/index.d.ts

@@ -0,0 +1,21 @@
+import { type FC } from 'react';
+interface DropdownOption {
+    id?: string | null;
+    value?: string | null;
+}
+interface DropdownProps {
+    title?: string;
+    tooltip?: string;
+    placeholder?: string;
+    options: DropdownOption[];
+    value?: DropdownOption | DropdownOption[];
+    onSelect?: (option: DropdownOption) => void;
+    onDeselect?: (option: DropdownOption) => void;
+    isMulti?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    showSearch?: boolean;
+    errorMessage?: string;
+}
+declare const Dropdown: FC<DropdownProps>;
+export { Dropdown, type DropdownProps, type DropdownOption };

package/lib/components/extend-arrow/extend-arrow.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type ExtendArrowProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<ExtendArrowProps>;
+};
+export default _default;
+export declare const Default: StoryFn<ExtendArrowProps>;

package/lib/components/extend-arrow/index.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+interface ExtendArrowProps {
+    extend: boolean;
+    size?: number;
+    align?: 'left' | 'right' | 'center';
+}
+declare const ExtendArrow: FC<ExtendArrowProps>;
+export { ExtendArrow, type ExtendArrowProps };

package/lib/components/fade-loader/fade-loader.stories.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { StoryFn } from '@storybook/react';
+import { type FadeLoaderProps } from '.';
+declare const _default: {
+    title: string;
+    component: React.FC<FadeLoaderProps>;
+};
+export default _default;
+export declare const Default: StoryFn<FadeLoaderProps>;

package/lib/components/fade-loader/helpers/animation.d.ts

@@ -0,0 +1 @@
+export declare const createAnimation: (loaderName: string, frames: string, suffix: string) => string;

package/lib/components/fade-loader/helpers/unitConverter.d.ts

@@ -0,0 +1,22 @@
+interface LengthObject {
+    value: number;
+    unit: string;
+}
+/**
+ * If size is a number, append px to the value as default unit.
+ * If size is a string, validate against list of valid units.
+ * If unit is valid, return size as is.
+ * If unit is invalid, console warn issue, replace with px as the unit.
+ *
+ * @param {(number | string)} size
+ * @return {LengthObject} LengthObject
+ */
+export declare function parseLengthAndUnit(size: number | string): LengthObject;
+/**
+ * Take value as an input and return valid css value
+ *
+ * @param {(number | string)} value
+ * @return {string} valid css value
+ */
+export declare function cssValue(value: number | string): string;
+export {};

package/lib/components/fade-loader/index.d.ts

@@ -0,0 +1,10 @@
+import { type CSSProperties, type DetailedHTMLProps, type FC, type HTMLAttributes } from 'react';
+interface FadeLoaderProps extends DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
+    loading?: boolean;
+    color?: string;
+    scale?: number;
+    speedMultiplier?: number;
+    cssOverride?: CSSProperties;
+}
+declare const FadeLoader: FC<FadeLoaderProps>;
+export { FadeLoader, type FadeLoaderProps };