@getpara/react-common 2.0.0-alpha.57 → 2.0.0-alpha.59

package/dist/components/WarningBanner.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface WarningBannerProps {
+    children: ReactNode;
+    onClose?: () => void;
+}
+export declare const WarningBanner: ({ children, onClose }: WarningBannerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/WarningBanner.js

@@ -0,0 +1,60 @@
+"use client";
+import "../chunk-GOCCUU3Z.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { CpslIcon } from "@getpara/react-components";
+import { safeStyled } from "../utils/index.js";
+const BannerContainer = safeStyled.div`
+  background: #fffcec;
+  border: 2px solid var(--cpsl-color-utility-yellow);
+  border-radius: 4px;
+  padding: 8px 8px;
+`;
+const Content = safeStyled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: relative;
+`;
+const Text = safeStyled.div`
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--cpsl-color-black);
+  font-weight: 400;
+`;
+const CloseButton = safeStyled.button`
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+`;
+const CloseIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --height: 20px;
+  --width: 20px;
+`;
+const WarningBanner = ({ children, onClose }) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose == null ? void 0 : onClose();
+  };
+  if (!isVisible) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(BannerContainer, { children: /* @__PURE__ */ jsxs(Content, { children: [
+    /* @__PURE__ */ jsx(CloseButton, { onClick: handleClose, "aria-label": "Close warning", children: /* @__PURE__ */ jsx(CloseIcon, { icon: "x" }) }),
+    /* @__PURE__ */ jsx(Text, { children })
+  ] }) });
+};
+export {
+  WarningBanner
+};

package/dist/components/index.d.ts

@@ -6,3 +6,4 @@ export * from './KnownDevices.js';
 export * from './QRCode.js';
 export * from './UserIdentifier.js';
 export * from './NetworkSpeedBanner.js';
+export * from './WarningBanner.js';

package/dist/components/index.js

@@ -7,3 +7,4 @@ export * from "./KnownDevices.js";
 export * from "./QRCode.js";
 export * from "./UserIdentifier.js";
 export * from "./NetworkSpeedBanner.js";
+export * from "./WarningBanner.js";

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@getpara/react-common",
-  "version": "2.0.0-alpha.57",
+  "version": "2.0.0-alpha.59",
   "dependencies": {
-    "@getpara/react-components": "2.0.0-alpha.57",
-    "@getpara/web-sdk": "2.0.0-alpha.57",
+    "@getpara/react-components": "2.0.0-alpha.59",
+    "@getpara/web-sdk": "2.0.0-alpha.59",
     "@moonpay/moonpay-react": "^1.8.3",
     "@ramp-network/ramp-instant-sdk": "^4.0.5",
     "libphonenumber-js": "^1.11.7",
@@ -40,5 +40,5 @@
   ],
   "type": "module",
   "types": "dist/index.d.ts",
-  "gitHead": "6af8b61e587b4c2f3cd0f8d8accc2f0878667552"
+  "gitHead": "e15908ac8eafff6f3b264fffa43742870b14b275"
 }