@bcrumbs.net/bc-ui 0.0.1 → 0.0.2

package/package.json

@@ -1,31 +1,34 @@
 {
   "name": "@bcrumbs.net/bc-ui",
   "description": "The UI components of Bread Crumbs portals",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "keyword": [
     "bcrumbs",
     "bc-ui"
   ],
   "peerDependencies": {
-    "react": "17.0.2",
+    "react": "18.3.1",
     "@emotion/react": "11.5.0",
     "@emotion/styled": "11.3.0",
-    "styled-components": "^4.3.2",
-    "classnames": "^2.3.1",
-    "react-router-dom": "^5.2.0"
+    "@radix-ui/themes": "^3.1.5",
+    "@radix-ui/react-icons": "^1.3.2"
   },
   "dependencies": {
+    "react-date-range": "^2.0.1",
     "react-loader-spinner": "^4.0.0",
     "react-dropzone": "^3.13.4",
     "react-custom-scrollbars": "^4.2.1",
-    "react-tagsinput": "^3.19.0",
     "react-toastify": "^8.2.0",
-    "@tippyjs/react": "^4.1.0"
+    "@tippyjs/react": "^4.1.0",
+    "recharts": "2.1.12"
+  },
+  "devDependencies": {
+    "@types/react-date-range": "^1.4.9"
   },
   "author": {
     "name": "Ahmad Mhaish"
   },
-  "main": "./index.umd.js",
   "module": "./index.esm.js",
-  "typings": "./index.d.ts"
-}
+  "type": "module",
+  "main": "./index.esm.js"
+}

package/{index.d.ts → src/index.d.ts}

@@ -3,6 +3,7 @@ export * from './lib/textbox/bctextbox';
 export * from './lib/dropList/bcdrop-list';
 export * from './lib/checkbox/bccheckbox';
 export * from './lib/navigation/bcnavigation';
+export * from './lib/navigation/types';
 export * from './lib/text/bctext';
 export * from './lib/table/bctable';
 export * from './lib/searchbox/bcsearchbox';
@@ -16,11 +17,33 @@ export * from './lib/addButton/bcadd-button';
 export * from './lib/progress';
 export * from './lib/dropZone';
 export * from './lib/tooltip';
+export * from './lib/layout';
+export * from './lib/line';
+export * from './lib/dropdown';
+export * from './lib/dropdown/types';
+export * from './lib/dropdown/DropdownList';
+export * from './lib/skeleton';
+export * from './lib/seperator';
+export * from './lib/avatar';
+export * from './lib/inputTags';
+export * from './lib/utils';
+export * from './lib/radioButton';
+export * from './lib/charts/pieChart';
+export * from './lib/charts/barLineChart';
+export * from './lib/dateRangePicker';
+export * from './lib/InputWithSuggestions';
+export * from './lib/textArea';
 export * from './lib/button/bcbutton';
+export * from './lib/button/types';
 export * from './lib/block/bcblock';
 export * from './lib/hooks/withEnterAnimation';
 export * from './lib/hooks/useForm';
-export * from './lib/hooks/useForm/fieldsTypes';
 export * from './lib/hooks/useForm/validationConstant';
 export * from './lib/hooks/useInterval';
+export * from './lib/hooks/useUrlState';
+export * from './lib/hooks/useDropdownClickOutside';
+export * from './lib/hooks/usePolling';
+export * from './lib/hooks/useDebounce';
+export * from './lib/hooks/useWindowSize';
+export * from './lib/hooks/useInterval';
 export * from './lib/constants';

package/src/lib/InputWithSuggestions/index.d.ts

@@ -0,0 +1,42 @@
+import React, { ChangeEvent, ReactElement } from 'react';
+import IconType from '../constants/IconType';
+import { AvatarContentProps } from '../avatar';
+import { InputHeight } from '../constants';
+export type SuggestionValue = string | number;
+type SuggestionContent = {
+    icon?: IconType;
+    avatar?: AvatarContentProps;
+    text?: string;
+    description?: string | null;
+    role?: string | null;
+};
+export type Suggestion = {
+    value: SuggestionValue;
+    content: SuggestionContent;
+    hidden?: boolean;
+    hideRightSide?: boolean;
+};
+/**
+ * This component is used to add input with suggestions in the application
+ */
+export type BCInputWithSuggestionsProps = {
+    suggestions: Suggestion[];
+    onChange?: (value?: string) => void;
+    onBlur?: (ev: ChangeEvent<HTMLInputElement>) => void;
+    value?: SuggestionValue;
+    height?: InputHeight;
+    name?: string;
+    dataId?: string | number;
+    placeholder?: string;
+    error?: string;
+    rightSide?: (id: string | number, value: SuggestionValue) => ReactElement;
+    dataTestid?: string;
+    isStringValue?: boolean;
+    appendInput?: (ev?: ChangeEvent<HTMLInputElement>) => void;
+    onDropdownStateChange?: (options: {
+        hidden: boolean;
+    }) => void;
+    onItemPicked?: (item: Suggestion) => void;
+};
+export declare const BCInputWithSuggestions: React.ForwardRefExoticComponent<BCInputWithSuggestionsProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/{lib → src/lib}/addButton/bcadd-button.d.ts

@@ -2,10 +2,11 @@ import { ChangeEvent } from 'react';
 export interface BCAddButtonProps {
     className?: string;
     placeholder?: string;
-    btnContent?: string;
     onChange: (ev: ChangeEvent<HTMLInputElement>) => void;
     value?: string;
     onSubmit: () => void;
     disabled?: boolean;
+    isLoading?: boolean;
+    rtl?: boolean;
 }
-export declare const BCAddButton: ({ className, placeholder, value, onSubmit, onChange, }: BCAddButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BCAddButton: ({ className, placeholder, value, onSubmit, onChange, isLoading, rtl }: BCAddButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/avatar/index.d.ts

@@ -0,0 +1,19 @@
+import Color from '../constants/Color';
+export declare enum AvatarSize {
+    S = 28,
+    M = 36,
+    L = 42,
+    XXL = 72
+}
+export type AvatarContentProps = {
+    url?: string | null;
+    text?: string;
+    color?: string;
+    textColor?: Color;
+};
+export type AvatarProps = AvatarContentProps & {
+    size?: AvatarSize;
+    className?: string;
+    showTooltip?: boolean;
+};
+export declare function BCAvatar({ url, text, color, size, className, textColor, showTooltip, }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/button/bcbutton.d.ts

@@ -0,0 +1,24 @@
+import { LegacyRef, MouseEvent, ReactElement } from 'react';
+import { ButtonSize } from '../constants';
+export interface BCButtonProps {
+    className?: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onSubClick?: (key: string) => void;
+    text: string | ReactElement;
+    text2?: string;
+    type?: 'button' | 'submit' | 'reset' | undefined;
+    disabled?: boolean;
+    loading?: boolean;
+    icon?: string | ReactElement;
+    hasDropList?: boolean;
+    refProp?: LegacyRef<HTMLButtonElement>;
+    onClick2?: () => void;
+    buttonSize?: ButtonSize;
+    buttonType?: 'primary-btn' | 'sec-btn' | 'rounded-btn';
+    loadingIconPath?: string;
+}
+export interface BCButtonState {
+    showDropdown: boolean;
+}
+export declare const BCButton: ({ className, onClick, text, disabled, loading, icon, refProp, hasDropList, onClick2, text2, type, buttonSize, buttonType, loadingIconPath, }: BCButtonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCButton;

package/src/lib/button/types.d.ts

@@ -0,0 +1,19 @@
+export declare enum HTMLButtonType {
+    BUTTON = "button",
+    SUBMIT = "submit"
+}
+export declare enum ButtonType {
+    DARK = "dark",
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    GHOST = "ghost",
+    DANGER = "danger",
+    DANGER_LIGHT = "dangerLight",
+    GREEN = "green",
+    BURNING_ORANGE = "burningOrange",
+    COLD_FUSION = "coldFusion",
+    COLD_FUSION01 = "coldFusion01",
+    DAGOBAH_FOREST = "dagobahForest",
+    WHITE = "white",
+    BORDERED_WHITE = "bordered_white"
+}

package/src/lib/charts/barLineChart/index.d.ts

@@ -0,0 +1,28 @@
+import { XAxisProps, YAxisProps, TooltipProps } from 'recharts';
+import { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
+import { ContentType, Formatter } from 'recharts/types/component/DefaultLegendContent';
+import { BarPropsType, LineProps } from './types';
+interface IProps {
+    data: any[];
+    percentage?: number;
+    xAxisProps: XAxisProps;
+    tooltipProps?: TooltipProps<ValueType, NameType>;
+    lineProps?: LineProps;
+    barProps: BarPropsType;
+    yAxisProps?: YAxisProps;
+    endYaxisProps?: YAxisProps;
+    height?: number;
+    legendProps?: {
+        content?: ContentType;
+        formatter?: Formatter;
+    };
+    primaryColor?: string;
+    secondaryColor?: string;
+    barColor?: string;
+    rtl?: boolean;
+    showGrid?: boolean;
+    showYAxis?: boolean;
+    showLegend?: boolean;
+}
+export declare function BCBarLineChart({ data, percentage, tooltipProps, xAxisProps, lineProps, barProps, yAxisProps, endYaxisProps, height, legendProps, primaryColor, secondaryColor, barColor, rtl, showGrid, showYAxis, showLegend }: IProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/charts/barLineChart/types.d.ts

@@ -0,0 +1,10 @@
+import { DataKey } from "recharts/types/util/types";
+import { LineProps as RechartsLineProps } from "recharts";
+export type AxisPropType = "number" | "category" | undefined;
+export type LineProps = RechartsLineProps & {
+    ref?: undefined;
+};
+export type BarPropsType = {
+    dataKey: DataKey<any>;
+    fill?: string;
+};

package/src/lib/charts/pieChart/index.d.ts

@@ -0,0 +1,12 @@
+type DataPropsType = {
+    value: number;
+    color?: string;
+    offset?: number;
+};
+type MiniPiePropsType = {
+    data: DataPropsType[];
+    width?: number;
+    height?: number;
+};
+export declare function BCMiniPie({ data, width, height }: MiniPiePropsType): import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/src/lib/constants/BoxShadow.d.ts

@@ -0,0 +1,6 @@
+export declare const BoxShadow: {
+    S: string;
+    M: string;
+    L: string;
+};
+export default BoxShadow;

package/src/lib/constants/Color.d.ts

@@ -0,0 +1,73 @@
+export declare enum Color {
+    INHERIT = "inherit",
+    PRIMARY = "#006466",
+    PRIMARY_LIGHTER = "#95D5B2",
+    PRIMARY_DARKER = "#065A60",
+    SECONDARY = "#4e4f4f",
+    SECONDARY_LIGHT = "#9b9b9b",
+    SECONDARY_LIGHT_HOVER = "#191919",
+    LIGHT_COLOR = "#ccdbd5",
+    DANGER_COLOR = "#b52e2e",
+    SUCCESS_COLOR = "#2eb583",
+    CONTROLS_COLOR = "#fff",
+    FONT_COLOR = "#000",
+    ACCENT10 = "rgba(89, 111, 255, 0.1)",
+    PRIMARY90 = "rgba(0, 100, 102, 0.9)",
+    PRIMARY80 = "rgba(0, 100, 102, 0.8)",
+    PRIMARY60 = "rgba(0, 100, 102, 0.6)",
+    PRIMARY40 = "rgba(0, 100, 102, 0.4)",
+    PRIMARY30 = "rgba(0, 100, 102, 0.3)",
+    PRIMARY20 = "rgba(0, 100, 102, 0.2)",
+    PRIMARY10 = "rgba(0, 100, 102, 0.1)",
+    PRIMARY05 = "rgba(0, 100, 102, 0.05)",
+    PRIMARY_LIGHTER90 = "rgba(149, 213, 178, 0.9)",
+    PRIMARY_LIGHTER80 = "rgba(149, 213, 178, 0.8)",
+    PRIMARY_LIGHTER60 = "rgba(149, 213, 178, 0.6)",
+    PRIMARY_LIGHTER40 = "rgba(149, 213, 178, 0.4)",
+    PRIMARY_LIGHTER30 = "rgba(149, 213, 178, 0.3)",
+    PRIMARY_LIGHTER20 = "rgba(149, 213, 178, 0.2)",
+    PRIMARY_LIGHTER10 = "rgba(149, 213, 178, 0.1)",
+    PRIMARY_LIGHTER05 = "rgba(149, 213, 178, 0.05)",
+    SECONDARY90 = "rgb(106, 107, 131, 0.9)",
+    SECONDARY80 = "rgb(106, 107, 131, 0.8)",
+    SECONDARY70 = "rgb(106, 107, 131, 0.7)",
+    SECONDARY60 = "rgb(106, 107, 131, 0.6)",
+    SECONDARY50 = "rgb(106, 107, 131, 0.5)",
+    SECONDARY40 = "rgb(106, 107, 131, 0.4)",
+    SECONDARY30 = "rgb(106, 107, 131, 0.3)",
+    SECONDARY20 = "rgb(106, 107, 131, 0.2)",
+    SECONDARY10 = "rgb(106, 107, 131, 0.1)",
+    SECONDARY05 = "rgb(106, 107, 131, 0.05)",
+    GREY_LIGHT_BORDER = "#e4e4e4",
+    GREY_BORDER = "#D9D9D9",
+    GREY_TEXT_COLOR = "#727272",
+    PRIMARY_DARKER80 = "rgb(6, 90, 96, 0.8)",
+    DAGOBAH_FOREST = "#003333",
+    CHROME_ORANGE = "#FF9900",
+    CHROME_ORANGE20 = "rgba(255, 153, 0, 0.2)",
+    RED_HOT_HOOD = "#FF3300",
+    MR_WOLF = "#330033",
+    RED_HOT_HOOD50 = "rgba(255,51,0,0.5)",
+    COLD_FUSION = "#6666FF",
+    BLUEBERRY = "#330066",
+    HOT_MAGENTA = "#FF3366",
+    BURNING_ORANGE = "#FF6600",
+    LEMON_YELLOW = "#FFCC00",
+    LASER_YELLOW = "#FFFF00",
+    KRYPTONITE_GREEN = "#CCFF00",
+    GREEN = "#66FF66",
+    DARK_GREEN = "#148643",
+    CRAZY_CYAN = "#66FFFF",
+    EXOPLANET_BLUE = "#66CCFF",
+    DARK_BLUE = "#457578",
+    LIGHT_BLUE = "#e0f3e8",
+    PURPLE = "#9999FF",
+    PURPLE_RAIN = "#9966FF",
+    VIOLET = "#CC66FF",
+    AEROSMITH_PINK = "#FF66FF",
+    WARNING_DOWNLOAD = "rgba(255, 153, 0, 0.1)",
+    GREY_WHITE = "#f0f1f5",
+    SLIDER_DOT = "#dededf",
+    ASSETS_PLAN_COLOR = "#35354C"
+}
+export default Color;

package/src/lib/constants/Droplist.d.ts

@@ -0,0 +1,7 @@
+export interface BCDropListOptionsType {
+    icon?: string;
+    text: string;
+    styleClass?: string;
+    value: string;
+    note?: string;
+}

package/src/lib/constants/DroplistSizes.d.ts

@@ -0,0 +1,14 @@
+export declare enum DropdownSize {
+    S = "S",
+    M = "M",
+    L = "L",
+    XL = "XL"
+}
+export declare enum DropdownListWidth {
+    XXS = 90,
+    XS = 120,
+    S = 190,
+    M = 220,
+    L = 240,
+    XL = 360
+}

package/{lib → src/lib}/constants/IconType.d.ts

@@ -3,12 +3,12 @@ export declare enum IconType {
     color = "color",
     colorPalette = "colorPalette",
     group = "group",
-    user = "user",
+    user = "fa fa-user-circle-o",
     users = "users",
     folderMinus = "folderMinus",
     folderPlus = "folderPlus",
     close = "fa fa-times",
-    chevronDown = "chevronDown",
+    chevronDown = "fa fa-chevron-down",
     chevronUpSmall = "chevronUpSmall",
     chevronDownSmall = "chevronDownSmall",
     userPlus = "userPlus",
@@ -24,14 +24,14 @@ export declare enum IconType {
     checkmarkUnchecked = "checkmarkUnchecked",
     checkmarkUncheckedEmpty = "checkmarkUncheckedEmpty",
     checkmark = "checkmark",
-    chevronRightSmall = "chevronRightSmall",
-    chevronLeftRight = "chevronLeftRight",
+    chevronRightSmall = "fa fa-chevron-right",
+    chevronLeftRight = "fa fa-chevron-left",
     back = "back",
     name = "name",
     flag = "flag",
     globe = "globe",
     search = "search",
-    settings = "settings",
+    settings = "fa fa-sliders",
     grid = "grid",
     columns = "columns",
     set = "set",
@@ -48,7 +48,7 @@ export declare enum IconType {
     share1 = "share1",
     share2 = "share2",
     chevronLeft = "chevronLeft",
-    help = "help",
+    help = "fa fa-question-circle",
     mail = "mail",
     upload = "upload",
     menu = "menu",
@@ -144,7 +144,7 @@ export declare enum IconType {
     pauseWithCircle = "pauseWithCircle",
     replay = "replay",
     chevronRight = "chevronRight",
-    feed = "feed",
+    feedback = "fa fa-comment",
     list = "list",
     repeat = "repeat",
     refreshccw = "refreshccw",
@@ -182,6 +182,12 @@ export declare enum IconType {
     plus = "fa fa-plus-square-o",
     image = "fa fa-file-image-o",
     externalLink = "fa fa-external-link",
-    link = "fa fa-link"
+    link = "fa fa-link",
+    logout = "fa fa-sign-out",
+    roadmap = "fa fa-road",
+    changelog = "fa fa-refresh",
+    timeoutline = "fa fa-clock-o",
+    profile = "fa fa-user",
+    tags = "fa fa-tags"
 }
 export default IconType;

package/src/lib/constants/InputHeight.d.ts

@@ -0,0 +1,16 @@
+export declare enum InputHeight {
+    M = "M",
+    L = "L",
+    XL = "XL"
+}
+export declare const HeightValues: {
+    M: {
+        height: string;
+    };
+    L: {
+        height: string;
+    };
+    XL: {
+        height: string;
+    };
+};

package/{lib → src/lib}/constants/LineHeight.d.ts

@@ -1,7 +1,7 @@
 export declare const LineHeight: {
     10: string;
     12: string;
-    16: string;
+    14: string;
     18: string;
     22: string;
     26: string;

package/src/lib/constants/LogoSize.d.ts

@@ -0,0 +1,6 @@
+export declare enum LogoSize {
+    S = 18,
+    M = 36,
+    XL = 72
+}
+export default LogoSize;

package/{lib → src/lib}/constants/TextSize.d.ts

@@ -1,7 +1,7 @@
 export declare enum TextSize {
     XXS = 10,
     XS = 12,
-    S = 16,
+    S = 14,
     M = 18,
     L = 22,
     XL = 26,

package/{lib → src/lib}/constants/index.d.ts

@@ -8,3 +8,7 @@ export * from './TextStyle';
 export * from './TextWeight';
 export * from './WhiteSpace';
 export * from './ButtonSize';
+export * from './DroplistSizes';
+export * from './LogoSize';
+export * from './Droplist';
+export * from './InputHeight';

package/src/lib/dateRangePicker/StaticRanges.d.ts

@@ -0,0 +1,3 @@
+import { StaticRange } from 'react-date-range';
+declare const staticRanges: StaticRange[];
+export default staticRanges;

package/src/lib/dateRangePicker/StyledDateRange.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DateRangePicker } from 'react-date-range';
+import 'react-date-range/dist/styles.css';
+import 'react-date-range/dist/theme/default.css';
+declare const StyledDateRange: import("@emotion/styled").StyledComponent<import("react-date-range").DateRangePickerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {
+    ref?: import("react").Ref<DateRangePicker> | undefined;
+}>;
+export default StyledDateRange;

package/src/lib/dateRangePicker/index.d.ts

@@ -0,0 +1,30 @@
+import { Locale } from 'date-fns';
+export type Range = {
+    startDate?: Date;
+    endDate?: Date;
+    color?: string;
+    key?: string;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    showDateDisplay?: boolean;
+    label?: string;
+};
+export declare enum DateRangePosition {
+    START = "start",
+    END = "end"
+}
+export type DateRangePickerPropsType = {
+    className?: string;
+    buttonClassName?: string;
+    onApply: (range: Range) => void;
+    range: Range;
+    minDate?: Date;
+    maxDate?: Date;
+    position?: DateRangePosition;
+    withoutIcon?: boolean;
+    withChevron?: boolean;
+    disabled?: boolean;
+    locale?: Locale;
+    rtl?: boolean;
+};
+export declare function BCDateRangePicker({ className, onApply, range, minDate, maxDate, position, buttonClassName, withoutIcon, withChevron, disabled, locale, rtl, }: DateRangePickerPropsType): import("@emotion/react/jsx-runtime").JSX.Element;

package/src/lib/dropList/bcdrop-list.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { ButtonSize, BCDropListOptionsType } from '../constants';
+export interface BCDropListProps {
+    className?: string;
+    selected?: string;
+    options: BCDropListOptionsType[];
+    onSelectOption: (value?: string) => void;
+    noEmpty?: boolean;
+    emptyText?: string;
+    placeholder?: string;
+    buttonSize?: ButtonSize;
+    rtl?: boolean;
+    icon?: React.ReactNode;
+}
+export declare const BCDropList: ({ className, selected, options, onSelectOption, noEmpty, placeholder, emptyText, buttonSize, rtl, icon, }: BCDropListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default BCDropList;

package/src/lib/dropdown/DropdownList/DropdownListItem/index.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { TooltipPlacement } from '../../../tooltip';
+import { DropdownSize } from '../../../constants';
+export declare const SizeValues: {
+    S: {
+        height: number;
+        padding: string;
+        marginBottom: number;
+    };
+    M: {
+        height: number;
+        padding: string;
+        marginBottom: number;
+    };
+    L: {
+        height: number;
+        padding: string;
+        marginBottom: number;
+    };
+    XL: {
+        height: number;
+        padding: string;
+        marginBottom: number;
+    };
+};
+export type DropDownItemStyleProps = {
+    value: string | number;
+    selected?: boolean;
+    tmpSelected?: boolean;
+    size: DropdownSize;
+    disabled?: boolean;
+    itemAsLink?: boolean;
+    borderRadius?: number;
+    disableHover?: boolean;
+    hideBackgroundColorOnSelected?: boolean;
+};
+export type DropDownItemProps = {
+    value: string | number;
+    children?: React.ReactElement[];
+    selected?: boolean;
+    disabled?: boolean;
+    tooltipText?: string;
+    tooltipTextPlacement?: TooltipPlacement;
+    tmpSelected?: boolean;
+    size: DropdownSize;
+    onClick?: (value: string | number) => void;
+    onMouseDown?: (value: string | number, e: React.MouseEvent) => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    itemAsLink?: boolean;
+    className?: string;
+    showTooltipOnDisabled?: boolean;
+    borderRadius?: number;
+    getRef?: (ref: HTMLDivElement | null) => void;
+    hideBackgroundColorOnSelected?: boolean;
+};
+export declare function DropdownListItem({ value, children, size, onClick, onMouseDown, onMouseEnter, onMouseLeave, selected, disabled, tmpSelected, itemAsLink, tooltipText, className, tooltipTextPlacement, showTooltipOnDisabled, borderRadius, hideBackgroundColorOnSelected, getRef, }: DropDownItemProps): import("@emotion/react/jsx-runtime").JSX.Element;