@ledgerhq/native-ui 0.7.3 → 0.7.4-monorepo.3

package/{components → lib/components}/cta/Button/index.js

@@ -66,12 +66,12 @@ const ButtonContainer = (props) => {
         iconPosition === "left" && children ? (React.createElement(Text, { variant: ctaTextType[size], fontWeight: "semiBold", color: text.color }, children)) : null));
 };
 const Button = (props) => {
-    const { Icon, children, type = "default" } = props;
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, activeOpacity: 0.5 }),
+    const { Icon, children, type = "default", iconName } = props;
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, activeOpacity: 0.5 }),
         React.createElement(ButtonContainer, Object.assign({}, props, { type: type }))));
 };
 export const PromisableButton = (props) => {
-    const { Icon, children, onPress, type = "main", disabled = false } = props;
+    const { Icon, children, onPress, type = "main", disabled = false, iconName } = props;
     const [spinnerOn, setSpinnerOn] = useState(false);
     const theme = useTheme();
     const onPressHandler = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
@@ -85,7 +85,7 @@ export const PromisableButton = (props) => {
             setSpinnerOn(false);
         }
     }), [onPress]);
-    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: !!Icon && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
+    return (React.createElement(Base, Object.assign({}, props, { type: type, iconButton: (!!Icon || !!iconName) && !children, disabled: disabled || spinnerOn, onPress: onPressHandler }),
         React.createElement(ButtonContainer, Object.assign({}, props, { type: type, hide: spinnerOn })),
         React.createElement(SpinnerContainer, null,
             React.createElement(ActivityIndicator, { color: theme.colors.neutral.c50, animating: spinnerOn }))));

package/lib/components/message/Alert/index.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+declare type AlertType = "info" | "warning" | "error";
+export declare type IconProps = {
+    size?: number;
+    color?: string;
+};
+export declare type IconType = React.ComponentType<IconProps>;
+export interface AlertProps {
+    type?: AlertType;
+    /**
+     * Optional component to replace the default Icon for the given `type` prop.
+     * It will receive a `color: string` and a `size: number` as props.
+     * */
+    Icon?: IconType;
+    title?: string;
+    showIcon?: boolean;
+    children?: React.ReactNode;
+    /**
+     * Alternative to using the `children` prop in order to render something using the value of `textColor`
+     * that is passed as a parameter.
+     */
+    renderContent?: ({ textColor }: {
+        textColor: string;
+    }) => React.ReactNode | null;
+}
+export default function Alert({ type, Icon, title, showIcon, children, renderContent, }: AlertProps): JSX.Element;
+export {};

package/{components → lib/components}/message/Alert/index.js

@@ -1,13 +1,13 @@
 import React from "react";
 import styled, { useTheme } from "styled-components/native";
-import ShieldSecurityMedium from "@ledgerhq/icons-ui/native/ShieldSecurityMedium";
+import InfoMedium from "@ledgerhq/icons-ui/native/InfoMedium";
 import CircledCrossMedium from "@ledgerhq/icons-ui/native/CircledCrossMedium";
 import CircledAlertMedium from "@ledgerhq/icons-ui/native/CircledAlertMedium";
 import Text from "../../Text";
 import { getColor } from "../../../styles";
 import FlexBox from "../../Layout/Flex";
 const icons = {
-    info: ShieldSecurityMedium,
+    info: InfoMedium,
     warning: CircledAlertMedium,
     error: CircledCrossMedium,
 };
@@ -39,11 +39,13 @@ const StyledAlertContainer = styled(FlexBox).attrs((p) => ({
   flex-direction: row;
   align-items: center;
 `;
-export default function Alert({ type = "info", title, showIcon = true, children, }) {
+export default function Alert({ type = "info", Icon, title, showIcon = true, children, renderContent, }) {
     const theme = useTheme();
     const textColor = getColor(theme, alertColors[type || "info"].color);
+    const iconProps = { size: 20, color: textColor };
     return (React.createElement(StyledAlertContainer, { type: type },
-        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, icons[type || "info"]({ size: 20, color: textColor }))),
+        showIcon && !!icons[type] && (React.createElement(StyledIconContainer, null, Icon ? React.createElement(Icon, Object.assign({}, iconProps)) : icons[type || "info"](iconProps))),
         title && (React.createElement(Text, { color: textColor, flexShrink: 1 }, title)),
-        children));
+        children,
+        renderContent && renderContent({ textColor })));
 }

package/lib/components/message/Log/Brackets.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { FlexBoxProps } from "../../Layout/Flex";
+import { ViewStyle } from "react-native";
+declare type BracketProps = {
+    color: string;
+};
+declare type BaseBracketProps = FlexBoxProps & BracketProps & {
+    style?: ViewStyle;
+};
+export declare const Bracket: ({ color, style, mb, mt }: BaseBracketProps) => React.ReactElement;
+export declare const BracketTopLeft: ({ color }: BracketProps) => JSX.Element;
+export declare const BracketTopRight: ({ color }: BracketProps) => JSX.Element;
+export declare const BracketBottomLeft: ({ color }: BracketProps) => JSX.Element;
+export declare const BracketBottomRight: ({ color }: BracketProps) => JSX.Element;
+export {};

package/lib/components/message/Log/Brackets.js

@@ -0,0 +1,29 @@
+import React from "react";
+import styled, { useTheme } from "styled-components/native";
+import { Svg, Path } from "react-native-svg";
+import FlexBox from "../../Layout/Flex";
+import { getColor } from "../../../styles";
+const BracketContainer = styled(FlexBox).attrs({
+    flexDirection: "column",
+    position: "relative",
+    justifyContent: "space-between",
+}) ``;
+export const Bracket = ({ color, style, mb, mt }) => {
+    const theme = useTheme();
+    const fill = getColor(theme, color);
+    return (React.createElement(BracketContainer, { style: style, mb: mb, mt: mt },
+        React.createElement(Svg, { width: "17", height: "10", viewBox: "0 0 17 10" },
+            React.createElement(Path, { d: "M16.8125 0H2.8125H0.8125V2V10H2.8125V2H16.8125V0Z", fill: fill }))));
+};
+export const BracketTopLeft = ({ color }) => {
+    return React.createElement(Bracket, { color: color, mb: "-4px" });
+};
+export const BracketTopRight = ({ color }) => {
+    return React.createElement(Bracket, { color: color, mb: "-4px", style: { transform: [{ scaleX: -1 }] } });
+};
+export const BracketBottomLeft = ({ color }) => {
+    return React.createElement(Bracket, { color: color, mt: "-4px", style: { transform: [{ scaleY: -1 }] } });
+};
+export const BracketBottomRight = ({ color }) => {
+    return React.createElement(Bracket, { color: color, mt: "-4px", style: { transform: [{ scale: -1 }] } });
+};

package/lib/components/message/Log/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { BaseTextProps as TextProps } from "../../Text";
+import { FlexBoxProps } from "../../Layout/Flex";
+export declare type Props = React.PropsWithChildren<FlexBoxProps & {
+    extraTextProps?: TextProps;
+}>;
+declare function Log({ children, extraTextProps }: Props): JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Log>;
+export default _default;

package/lib/components/message/Log/index.js

@@ -0,0 +1,15 @@
+import React, { memo } from "react";
+import Text from "../../Text";
+import Flex from "../../Layout/Flex";
+import { BracketTopLeft, BracketTopRight, BracketBottomLeft, BracketBottomRight } from "./Brackets";
+function Log({ children, extraTextProps }) {
+    return (React.createElement(Flex, { flexDirection: "column" },
+        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+            React.createElement(BracketTopLeft, { color: "neutral.c100" }),
+            React.createElement(BracketTopRight, { color: "neutral.c100" })),
+        React.createElement(Text, Object.assign({ variant: "h2", textTransform: "uppercase", textAlign: "center", color: "neutral.c100", px: "16px" }, extraTextProps), children),
+        React.createElement(Flex, { flexDirection: "row", justifyContent: "space-between" },
+            React.createElement(BracketBottomLeft, { color: "neutral.c100" }),
+            React.createElement(BracketBottomRight, { color: "neutral.c100" }))));
+}
+export default memo(Log);

package/{components → lib/components}/message/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Alert } from "./Alert";
 export { default as Notification } from "./Notification";
+export { default as Log } from "./Log";

package/{components → lib/components}/message/index.js

@@ -1,2 +1,3 @@
 export { default as Alert } from "./Alert";
 export { default as Notification } from "./Notification";
+export { default as Log } from "./Log";

package/{components → lib/components}/styled.js

@@ -6,7 +6,10 @@ const proxyStyled = new Proxy(styled, {
         return styled(target.apply(thisArg, argumentsList)(baseStyles));
     },
     get(target, property) {
-        return styled(target[property].apply(styled, [baseStyles]));
+        if (typeof target[property] === "function") {
+            return styled(target[property].apply(styled, [baseStyles]));
+        }
+        return target[property];
     },
 });
 export default proxyStyled;

package/{components → lib/components}/transitions/Fade.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionProps } from "./types";
 /**
  * A fade-in / fade-out transition changing the opacity of its children based on their status.

package/{components → lib/components}/transitions/Slide.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionProps } from "./types";
 export interface SlideProps extends TransitionProps {
     /**

package/{components → lib/components}/transitions/Transition.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TransitionStatus } from "./index";
 export interface Props {
     /**

package/package.json

@@ -1,24 +1,33 @@
 {
   "name": "@ledgerhq/native-ui",
-  "version": "0.7.3",
-  "description": "Ledger Live - Desktop UI",
+  "version": "0.7.4-monorepo.3",
+  "description": "Ledger Live - Mobile UI",
   "repository": "https://github.com/LedgerHQ/ui",
   "license": "MIT",
   "author": "Ledger Live Team <team-live@ledger.fr>",
+  "main": "lib/index.js",
+  "types": "index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/*",
+        "lib/*/index.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": "./lib/index.js",
+    "./": "./lib/",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "components",
-    "assets",
-    "styles",
-    "helpers",
-    "icons",
-    "index.d.ts",
-    "index.js"
+    "lib/**/*"
   ],
   "dependencies": {
-    "@ledgerhq/icons-ui": "^0.2.3",
-    "@ledgerhq/ui-shared": "^0.1.5",
-    "@types/color": "^3.0.2",
-    "@types/react": "^17.0.37",
+    "@ledgerhq/icons-ui": "^0.2.4-monorepo.3",
+    "@ledgerhq/ui-shared": "^0.1.6-monorepo.3",
+    "@types/color": "^3.0.3",
+    "@types/react": "^17.0.39",
     "@types/react-native": "^0.65.9",
     "@types/styled-components-react-native": "^5.1.3",
     "@types/styled-system": "^5.1.13",
@@ -31,9 +40,105 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-native": "^0.65.0",
-    "react-native-reanimated": "^2.2.4",
+    "react-native": ">=0.64.0",
+    "react-native-reanimated": "^2.4.1",
     "react-native-svg": "^12.1.1",
     "styled-components": "^5.3.3"
-  }
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.4",
+    "@babel/generator": "^7.17.2",
+    "@babel/plugin-proposal-export-namespace-from": "^7.16.0",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/runtime": "^7.17.2",
+    "@emotion/core": "^11.0.0",
+    "@expo/webpack-config": "^0.16.18",
+    "@react-native-community/eslint-config": "^3.0.1",
+    "@storybook/addon-actions": "^6.4.19",
+    "@storybook/addon-backgrounds": "^6.4.19",
+    "@storybook/addon-controls": "^6.4.19",
+    "@storybook/addon-docs": "^6.4.19",
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/addon-knobs": "^6.4.0",
+    "@storybook/addon-links": "^6.4.19",
+    "@storybook/addon-measure": "^6.4.19",
+    "@storybook/addon-ondevice-actions": "^5.3.23",
+    "@storybook/addon-ondevice-knobs": "^5.3.25",
+    "@storybook/addon-outline": "^6.4.19",
+    "@storybook/addon-toolbars": "^6.4.19",
+    "@storybook/addon-viewport": "^6.4.19",
+    "@storybook/addons": "^6.4.19",
+    "@storybook/api": "^6.4.19",
+    "@storybook/components": "^6.4.19",
+    "@storybook/core-events": "^6.4.19",
+    "@storybook/react": "^6.4.19",
+    "@storybook/react-native": "^5.3.25",
+    "@storybook/theming": "^6.4.19",
+    "@svgr/core": "^5.5.0",
+    "@svgr/plugin-jsx": "^5.5.0",
+    "@svgr/plugin-svgo": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-preset-expo": "^9.0.2",
+    "camelcase": "^6.2.1",
+    "eslint": "^8.10.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.29.2",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "expo": "~44.0.0",
+    "expo-asset": "~8.4.6",
+    "expo-cli": "^5",
+    "expo-constants": "~13.0.2",
+    "expo-file-system": "~13.1.3",
+    "expo-font": "^10.0.5",
+    "expo-modules-core": "0.6.5",
+    "expo-status-bar": "~1.2.0",
+    "fs-extra": "^10.0.1",
+    "glob": "^7.2.0",
+    "metro": "^0.67.0",
+    "metro-config": "^0.67.0",
+    "metro-extra-config": "1.0.1-monorepo.3",
+    "metro-minify-uglify": "^0.67.0",
+    "metro-react-native-babel-preset": "^0.67.0",
+    "metro-runtime": "^0.67.0",
+    "metro-transform-worker": "^0.67.0",
+    "prettier": "^2.4.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-native": "0.64.3",
+    "react-native-gesture-handler": "^1.10.3",
+    "react-native-reanimated": "^2.4.1",
+    "react-native-svg": "^12.1.1",
+    "react-native-web": "~0.17.5",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.4.4",
+    "victory": "^35.5.5",
+    "webpack": "^4.46.0"
+  },
+  "scripts": {
+    "android": "expo start --android",
+    "build": "tsc -p tsconfig.prod.json && node scripts/postBuild",
+    "build:storybook": "build-storybook -o web-build",
+    "build:icons": "node -e \"process.env['VERCEL_BUILD'] ? process.exit(1) : process.exit(0)\" || (cd ../icons && npm run build)",
+    "build:web": "npm run build:icons && npm run build:storybook",
+    "watch": "tsc --watch",
+    "clean": "rimraf lib",
+    "eject": "expo eject",
+    "ios": "expo start --ios",
+    "lint": "eslint src storybook --ext .ts,.tsx,.js,.jsx --cache",
+    "lint:fix": "eslint src storybook --ext .ts,.tsx,.js,.jsx --fix --cache",
+    "release": "yarn publish ./lib --access public",
+    "expo": "expo start",
+    "storybook": "start-storybook -p 6006",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "exit 0",
+    "web": "expo start --web"
+  },
+  "readme": "# `@ledgerhq/native-ui`\n\n[![build](https://github.com/LedgerHQ/ui/actions/workflows/native.yml/badge.svg)](https://github.com/LedgerHQ/ui/actions/workflows/native.yml)\n[![npm](https://img.shields.io/npm/v/@ledgerhq/native-ui)](https://www.npmjs.com/package/@ledgerhq/native-ui)\n[![storybook](https://img.shields.io/badge/Storybook-📚-61DBFB)](https://ledger-live-ui-native.vercel.app)\n\n### Design and interface resources for React Native\n\n#### This package contains [React Native](https://reactnative.dev/) components and styles built on top of our design system and used internally at [Ledger](https://www.ledger.com/).\n\n## Reference\n\n**[🔗 Storybook](https://ledger-live-ui-native.vercel.app/)**\n\n## Installation\n\n### Package\n\n```sh\nnpm i @ledgerhq/native-ui\n```\n\n### Peer dependencies\n\n_This library uses the following packages under the hood and relies on them being installed separately to avoid package duplication._\n\n```sh\nnpm i styled-components react-native-reanimated react-native-svg\n```\n\n### Additional setup\n\n**Skip this step if your project is managed by Expo.**\n\nFollow the installation instructions for:\n\n- [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/2.2.0/installation)\n- [react-native-svg](https://github.com/react-native-svg/react-native-svg#installation)\n\n## Usage\n\n### Provider\n\nBefore using the library components, the style provider must be imported and rendered once to provide the components with the right context.\n\n```tsx\nimport { StyleProvider } from \"@ledgerhq/native-ui\";\n\nfunction Root({ children }) {\n  // Selected theme palette can be either \"dark\" or \"light\".\n  return <StyleProvider selectedPalette=\"light\">{children}</StyleProvider>;\n}\n```\n\n### Components\n\nImport the components from `@ledgerhq/native-ui`.\n\n```tsx\nimport { Flex, Text } from \"@ledgerhq/native-ui\";\n\nfunction Hello() {\n  return (\n    <Flex flexDirection=\"column\" alignItems=\"center\">\n      <Text variant=\"h1\" color=\"neutral.c100\">\n        Hello, world!\n      </Text>\n    </Flex>\n  );\n}\n```\n\n### Fonts\n\n#### Using [Expo](https://expo.dev/)\n\n```sh\nexpo install expo-font\n```\n\n```js\nimport { useFonts } from \"expo-font\";\n\n/*\n  A higher-order component that will load and provide Ledger fonts to your app.\n*/\nfunction FontProvider({ children }) {\n  const [fontsLoaded] = useFonts({\n    \"HMAlphaMono-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf\"),\n    \"Inter-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf\"),\n    \"Inter-SemiBold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf\"),\n    \"Inter-Bold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf\"),\n  });\n\n  if (!fontsLoaded) {\n    return null;\n  }\n\n  return children;\n}\n```\n\n#### React Native - Bare\n\nAdd the paths in the `react-native.config.js` file:\n\n```js\nmodule.exports = {\n  assets: [\n    \"node_modules/@ledgerhq/native-ui/lib/assets/fonts/alpha\",\n    \"node_modules/@ledgerhq/native-ui/lib/assets/fonts/inter\",\n  ],\n};\n```\n\nThen run the following command to add the required native code:\n\n```\nnpx react-native link\n```\n\n## Minimal Working Example\n\n[🌍 Hosted here.](https://snack.expo.dev/PG3RFRIAP)\n\n### Expo\n\n```js\nimport React from \"react\";\nimport { StyleProvider, Flex, Switch, Text, Logos } from \"@ledgerhq/native-ui\";\nimport { useTheme } from \"styled-components/native\";\nimport { useFonts } from \"expo-font\";\n\nfunction Logo() {\n  const theme = useTheme();\n  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;\n}\n\nfunction FontProvider({ children }) {\n  const [fontsLoaded] = useFonts({\n    \"HMAlphaMono-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/alpha/HMAlphaMono-Medium.otf\"),\n    \"Inter-Medium\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Medium.otf\"),\n    \"Inter-SemiBold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-SemiBold.otf\"),\n    \"Inter-Bold\": require(\"@ledgerhq/native-ui/lib/assets/fonts/inter/Inter-Bold.otf\"),\n  });\n\n  if (!fontsLoaded) {\n    return null;\n  }\n\n  return children;\n}\n\nexport default function App() {\n  const [palette, setPalette] = React.useState(\"light\");\n  const isLight = palette === \"light\";\n\n  return (\n    <FontProvider>\n      <StyleProvider selectedPalette={palette}>\n        <Flex\n          flex={1}\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          flexDirection=\"column\"\n          backgroundColor=\"neutral.c00\"\n        >\n          <Logo />\n          <Text variant=\"h2\" color=\"neutral.c100\" my={10}>\n            Hello, world!\n          </Text>\n          <Switch\n            checked={isLight}\n            onChange={() => setPalette(() => (isLight ? \"dark\" : \"light\"))}\n          />\n        </Flex>\n      </StyleProvider>\n    </FontProvider>\n  );\n}\n```\n\n### React Native - Bare\n\n```js\nimport React from \"react\";\nimport { StyleProvider } from \"@ledgerhq/native-ui/styles\";\nimport { Flex, Text, Logos, Switch } from \"@ledgerhq/native-ui\";\nimport { useTheme } from \"styled-components/native\";\n\nfunction Logo() {\n  const theme = useTheme();\n  return <Logos.LedgerLiveRegular color={theme.colors.neutral.c100} />;\n}\n\nexport default function App() {\n  const [palette, setPalette] = React.useState(\"light\");\n  const isLight = palette === \"light\";\n\n  return (\n    <StyleProvider selectedPalette={palette}>\n      <Flex\n        flex={1}\n        p={12}\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        flexDirection=\"column\"\n        backgroundColor=\"neutral.c00\"\n      >\n        <Logo />\n        <Text variant=\"h2\" color=\"neutral.c100\" my={10}>\n          Hello, world!\n        </Text>\n        <Switch checked={isLight} onChange={() => setPalette(() => (isLight ? \"dark\" : \"light\"))} />\n      </Flex>\n    </StyleProvider>\n  );\n}\n```\n"
 }

package/components/Loader/ProgressLoader/index.d.ts

@@ -1,13 +0,0 @@
-import React from "react";
-declare type Props = {
-    progress?: number;
-    infinite: boolean;
-    onPress?: () => void;
-    mainColor: string;
-    secondaryColor: string;
-    radius: number;
-    strokeWidth: number;
-    children: React.ReactNode;
-};
-declare const ProgressLoader: ({ progress, infinite, mainColor, secondaryColor, onPress, radius, strokeWidth, children, }: Props) => React.ReactElement;
-export default ProgressLoader;

package/components/message/Alert/index.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-declare type AlertType = "info" | "warning" | "error";
-export interface AlertProps {
-    type?: AlertType;
-    title?: string;
-    showIcon?: boolean;
-    children?: React.ReactNode;
-}
-export default function Alert({ type, title, showIcon, children, }: AlertProps): JSX.Element;
-export {};