@nobak/design-system 1.0.0

package/lib/components/AccountOverview/AccountOverview.js

@@ -0,0 +1,122 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState } from 'react';
+import { Button } from "../../shared/elements/Button/Button";
+import { Text } from "../../shared/elements/Text/Text";
+import { Badge } from "../../shared/elements/Badge/Badge";
+import { Loader } from "../../shared/elements/Loader/Loader";
+import { Icon } from "../../shared/elements/Icon/Icon";
+
+// Types for assets and props
+
+var securityColors = {
+  low: 'bg-alert-400 text-alert-900',
+  medium: 'bg-warning-200 text-warning-900',
+  high: 'bg-positive-200 text-positive-900'
+};
+var securityLabels = {
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High'
+};
+export var AccountOverview = function AccountOverview(_ref) {
+  var publicKey = _ref.publicKey,
+    balances = _ref.balances,
+    isVerified = _ref.isVerified,
+    securityLevel = _ref.securityLevel,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onSend = _ref.onSend,
+    onReceive = _ref.onReceive,
+    onConvert = _ref.onConvert;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    copied = _useState2[0],
+    setCopied = _useState2[1];
+  var handleCopy = function handleCopy() {
+    navigator.clipboard.writeText(publicKey);
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 1500);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full max-w-xl mx-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "bg-white rounded-xl shadow-md p-6 flex flex-col gap-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col md:flex-row md:items-center gap-2 justify-between"
+  }, /*#__PURE__*/React.createElement(Text, {
+    content: "Public Key",
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Text, {
+    content: "".concat(publicKey.slice(0, 6), "...").concat(publicKey.slice(-6)),
+    fontSize: ": "
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "basic",
+    size: "tiny",
+    icon: "copy",
+    text: copied ? 'Copied!' : 'Copy',
+    onClick: handleCopy
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+    content: "Balances",
+    fontSize: ": "
+  }), loading ? /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center justify-center py-4"
+  }, /*#__PURE__*/React.createElement(Loader, null)) : /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap gap-3 mt-2"
+  }, balances.map(function (asset, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: asset.asset_code + idx,
+      className: "flex flex-col items-start bg-neutral-100 rounded-lg px-3 py-2 min-w-[110px]"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "font-mono text-neutral-800 text-[16px]"
+    }, asset.balance), /*#__PURE__*/React.createElement(Badge, {
+      title: asset.asset_code,
+      variant: "primary",
+      size: "small"
+    }));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap gap-3 mt-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    variant: "primary",
+    text: "Send",
+    icon: "arrow-up",
+    onClick: onSend
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "secondary",
+    text: "Receive",
+    icon: "arrow-down",
+    onClick: onReceive
+  }), /*#__PURE__*/React.createElement(Button, {
+    variant: "outline",
+    text: "Convert",
+    icon: "swap",
+    onClick: onConvert
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-wrap gap-3 items-center mt-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2"
+  }, /*#__PURE__*/React.createElement(Badge, {
+    title: isVerified ? 'Verified' : 'Unverified',
+    variant: isVerified ? 'positive' : 'warning',
+    size: "small"
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Account Status",
+    fontSize: ": "
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2 px-2 py-1 rounded-lg ".concat(securityColors[securityLevel])
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "shield",
+    size: 16
+  }), /*#__PURE__*/React.createElement(Text, {
+    content: "Security: ".concat(securityLabels[securityLevel]),
+    fontSize: ": "
+  })))));
+};

package/lib/components/AdminPanel.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button } from "../shared";
+var AdminPanel = function AdminPanel(_ref) {
+  var children = _ref.children,
+    Link = _ref.component,
+    toStatus = _ref.toStatus,
+    toCredentials = _ref.toCredentials,
+    toProfile = _ref.toProfile;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col md:flex-row bg-primary-400 rounded-xl shadow-lg border-primary-700 border"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-6 border-r border-primary-1200 md:w-64 w-full"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pl-4 pr-4 pt-4 border-b border-primary-900"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "pl-4 pr-4 pt-2 border-b border-primary-900"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-p2-light"
+  }, "Servers")), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-2 pl-2 pr-2 pt-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "Network",
+    variant: "basic",
+    size: "small",
+    type: "link",
+    component: Link,
+    to: toStatus
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pl-4 pr-4 pt-2 border-b border-primary-900"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-p2-light"
+  }, "Security")), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-2 pl-2 pr-2 pt-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "Credentials",
+    variant: "basic",
+    size: "small",
+    type: "link",
+    component: Link,
+    to: toCredentials
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pl-4 pr-4 pt-2 border-b border-primary-900"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-p2-light"
+  }, "Settings")), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col space-y-2 pl-2 pr-2 pt-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "Profile",
+    variant: "basic",
+    size: "small",
+    type: "link",
+    component: Link,
+    to: toProfile
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-1 p-4 h-auto items-center justify-center md:h-[600px]"
+  }, children));
+};
+export { AdminPanel };

package/lib/components/AssetExchange/AssetExchange.js

@@ -0,0 +1,189 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useEffect } from 'react';
+import { Form } from "../../shared/components/forms/Form/Form";
+import { Button } from "../../shared/elements/Button/Button";
+// Placeholder for ExchangeRateCard
+var ExchangeRateCard = function ExchangeRateCard(_ref) {
+  var rate = _ref.rate,
+    loading = _ref.loading;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-50 border p-3 rounded mb-3 flex items-center justify-between"
+  }, loading ? /*#__PURE__*/React.createElement("span", {
+    className: "text-neutral-400"
+  }, "Loading rate...") : /*#__PURE__*/React.createElement("span", null, "Exchange Rate: ", /*#__PURE__*/React.createElement("b", null, rate)));
+};
+var EXAMPLE_ASSETS = [{
+  code: 'XLM',
+  issuer: '',
+  balance: '1000'
+}, {
+  code: 'USDC',
+  issuer: 'GA...USDC',
+  balance: '250'
+}, {
+  code: 'BTC',
+  issuer: 'GA...BTC',
+  balance: '0.05'
+}];
+export var AssetExchange = function AssetExchange() {
+  var _useState = useState(EXAMPLE_ASSETS[0].code),
+    _useState2 = _slicedToArray(_useState, 2),
+    sourceAsset = _useState2[0],
+    setSourceAsset = _useState2[1];
+  var _useState3 = useState(EXAMPLE_ASSETS[1].code),
+    _useState4 = _slicedToArray(_useState3, 2),
+    destAsset = _useState4[0],
+    setDestAsset = _useState4[1];
+  var _useState5 = useState(''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    amount = _useState6[0],
+    setAmount = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    converted = _useState8[0],
+    setConverted = _useState8[1];
+  var _useState9 = useState(''),
+    _useState0 = _slicedToArray(_useState9, 2),
+    rate = _useState0[0],
+    setRate = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    loadingRate = _useState10[0],
+    setLoadingRate = _useState10[1];
+  var _useState11 = useState('0.5'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    slippage = _useState12[0],
+    setSlippage = _useState12[1];
+  var _useState13 = useState('0.00001'),
+    _useState14 = _slicedToArray(_useState13, 2),
+    fee = _useState14[0],
+    setFee = _useState14[1];
+  var _useState15 = useState(''),
+    _useState16 = _slicedToArray(_useState15, 2),
+    impact = _useState16[0],
+    setImpact = _useState16[1];
+  var _useState17 = useState(null),
+    _useState18 = _slicedToArray(_useState17, 2),
+    preview = _useState18[0],
+    setPreview = _useState18[1];
+
+  // Simulate fetching exchange rate
+  useEffect(function () {
+    if (sourceAsset === destAsset) {
+      setRate('1.00');
+      setConverted(amount);
+      setImpact('0');
+      return;
+    }
+    setLoadingRate(true);
+    setTimeout(function () {
+      // Fake rates for demo
+      var fakeRate = sourceAsset === 'XLM' && destAsset === 'USDC' ? 0.99 : 0.00002;
+      setRate(fakeRate.toString());
+      setConverted(amount ? (parseFloat(amount) * fakeRate).toFixed(6) : '');
+      setImpact((parseFloat(slippage) * 0.01).toFixed(4));
+      setLoadingRate(false);
+    }, 600);
+  }, [sourceAsset, destAsset, amount, slippage]);
+
+  // Simulate fee estimation
+  useEffect(function () {
+    setFee('0.00001');
+  }, [amount, sourceAsset, destAsset]);
+  var handlePreview = function handlePreview() {
+    if (!amount || !converted || !rate) return;
+    setPreview({
+      sourceAsset: sourceAsset,
+      destAsset: destAsset,
+      amount: amount,
+      converted: converted,
+      rate: rate,
+      slippage: slippage,
+      fee: fee,
+      impact: impact
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full max-w-lg mx-auto bg-white rounded-xl shadow-md p-6 mt-4 flex flex-col gap-6"
+  }, /*#__PURE__*/React.createElement(Form, {
+    fields: [{
+      field: {
+        type: 'select',
+        label: 'From',
+        value: sourceAsset,
+        onChange: function onChange(e) {
+          return setSourceAsset(e.target.value);
+        },
+        options: EXAMPLE_ASSETS.map(function (a) {
+          return {
+            label: "".concat(a.code).concat(a.issuer ? ': ' + a.issuer.slice(0, 6) + '...)' : ''),
+            value: a.code
+          };
+        })
+      }
+    }, {
+      field: {
+        type: 'select',
+        label: ': ',
+        value: destAsset,
+        onChange: function onChange(e) {
+          return setDestAsset(e.target.value);
+        },
+        options: EXAMPLE_ASSETS.map(function (a) {
+          return {
+            label: "".concat(a.code).concat(a.issuer ? ', ' + a.issuer.slice(0, 6) + '...)' : ''),
+            value: a.code
+          };
+        })
+      }
+    }, {
+      field: {
+        type: 'text',
+        label: 'Amount',
+        value: amount,
+        onChange: function onChange(e) {
+          return setAmount(e.target.value);
+        },
+        placeholder: '0.00'
+      }
+    }, {
+      field: {
+        type: 'text',
+        label: 'Slippage Tolerance (%)',
+        value: slippage,
+        onChange: function onChange(e) {
+          return setSlippage(e.target.value);
+        },
+        placeholder: '0.5'
+      }
+    }],
+    onSubmit: handlePreview,
+    submitLabel: "Preview Exchange"
+  }), /*#__PURE__*/React.createElement(ExchangeRateCard, {
+    rate: rate,
+    loading: loadingRate
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col gap-2 text-sm"
+  }, /*#__PURE__*/React.createElement("div", null, "Converted Amount: ", /*#__PURE__*/React.createElement("span", {
+    className: "font-mono"
+  }, converted, " ", destAsset)), /*#__PURE__*/React.createElement("div", null, "Slippage Impact: ", /*#__PURE__*/React.createElement("span", {
+    className: "font-mono"
+  }, impact)), /*#__PURE__*/React.createElement("div", null, "Estimated Fee: ", /*#__PURE__*/React.createElement("span", {
+    className: "font-mono"
+  }, fee, " XLM"))), preview && /*#__PURE__*/React.createElement("div", {
+    className: "bg-neutral-100 border rounded p-4 mt-2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "font-bold mb-2"
+  }, "Order Preview"), /*#__PURE__*/React.createElement("div", null, "From: ", amount, " ", sourceAsset), /*#__PURE__*/React.createElement("div", null, "To: ", converted, " ", destAsset), /*#__PURE__*/React.createElement("div", null, "Rate: ", rate), /*#__PURE__*/React.createElement("div", null, "Slippage: ", slippage, "%"), /*#__PURE__*/React.createElement("div", null, "Fee: ", fee, " XLM"), /*#__PURE__*/React.createElement("div", null, "Impact: ", impact), /*#__PURE__*/React.createElement(Button, {
+    text: "Confirm Exchange",
+    variant: "primary",
+    onClick: function onClick() {
+      return alert('Exchange confirmed!');
+    }
+  })));
+};

package/lib/components/AuthenticationFlow.js

@@ -0,0 +1,216 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import React, { useState, useEffect, useRef } from 'react';
+import { Form } from "../shared";
+import { Button } from "../shared/elements/Button";
+// SecurityLevelIndicator and BiometricPrompt are not found in the codebase, so we will create simple placeholders for them.
+
+// Placeholder for SecurityLevelIndicator
+var SecurityLevelIndicator = function SecurityLevelIndicator(_ref) {
+  var level = _ref.level;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mb-4 p-2 rounded text-white ".concat(level === 'high' ? 'bg-red-600' : level === 'medium' ? 'bg-yellow-600' : 'bg-green-600')
+  }, "Security Level: ", level.charAt(0).toUpperCase() + level.slice(1));
+};
+
+// Placeholder for BiometricPrompt
+var BiometricPrompt = function BiometricPrompt(_ref2) {
+  var onAuthenticate = _ref2.onAuthenticate,
+    error = _ref2.error;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center gap-2 my-4"
+  }, /*#__PURE__*/React.createElement(Button, {
+    text: "Use Biometric",
+    variant: "secondary",
+    onClick: onAuthenticate
+  }), error && /*#__PURE__*/React.createElement("span", {
+    className: "text-red-500 text-xs"
+  }, error));
+};
+
+// Password strength checker
+function getPasswordStrength(password) {
+  if (password.length > 11 && /[A-Z]/.test(password) && /[0-9]/.test(password) && /[^A-Za-z0-9]/.test(password)) return 'strong';
+  if (password.length > 7 && /[A-Z]/.test(password) && /[0-9]/.test(password)) return 'medium';
+  return 'weak';
+}
+
+// Session timeout in seconds
+var SESSION_TIMEOUT = 300; // 5 minutes
+
+export var AuthenticationFlow = function AuthenticationFlow(_ref3) {
+  var riskLevel = _ref3.riskLevel,
+    twoFactorEnabled = _ref3.twoFactorEnabled,
+    biometricSupported = _ref3.biometricSupported,
+    onAuthenticated = _ref3.onAuthenticated;
+  var _useState = useState('password'),
+    _useState2 = _slicedToArray(_useState, 2),
+    step = _useState2[0],
+    setStep = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    password = _useState4[0],
+    setPassword = _useState4[1];
+  var _useState5 = useState('weak'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    passwordStrength = _useState6[0],
+    setPasswordStrength = _useState6[1];
+  var _useState7 = useState(''),
+    _useState8 = _slicedToArray(_useState7, 2),
+    passwordError = _useState8[0],
+    setPasswordError = _useState8[1];
+  var _useState9 = useState(''),
+    _useState0 = _slicedToArray(_useState9, 2),
+    otp = _useState0[0],
+    setOtp = _useState0[1];
+  var _useState1 = useState(''),
+    _useState10 = _slicedToArray(_useState1, 2),
+    otpError = _useState10[0],
+    setOtpError = _useState10[1];
+  var _useState11 = useState(''),
+    _useState12 = _slicedToArray(_useState11, 2),
+    biometricError = _useState12[0],
+    setBiometricError = _useState12[1];
+  var _useState13 = useState(SESSION_TIMEOUT),
+    _useState14 = _slicedToArray(_useState13, 2),
+    sessionTime = _useState14[0],
+    setSessionTime = _useState14[1];
+  var timerRef = useRef(null);
+
+  // Update password strength
+  useEffect(function () {
+    setPasswordStrength(getPasswordStrength(password));
+  }, [password]);
+
+  // Session timeout logic
+  useEffect(function () {
+    if (step === 'done') return;
+    if (sessionTime === 0) {
+      setStep('password');
+      setPassword('');
+      setOtp('');
+      setPasswordError('Session timed out. Please authenticate again.');
+      setSessionTime(SESSION_TIMEOUT);
+      return;
+    }
+    timerRef.current = setTimeout(function () {
+      return setSessionTime(function (t) {
+        return t - 1;
+      });
+    }, 1000);
+    return function () {
+      return timerRef.current && clearTimeout(timerRef.current);
+    };
+  }, [sessionTime, step]);
+
+  // Handle password submission
+  var handlePasswordSubmit = function handlePasswordSubmit(e) {
+    e.preventDefault();
+    if (riskLevel === 'high' && passwordStrength !== 'strong') {
+      setPasswordError('Password must be strong for high-risk actions.');
+      return;
+    }
+    if (passwordStrength === 'weak') {
+      setPasswordError('Password is too weak.');
+      return;
+    }
+    setPasswordError('');
+    if (biometricSupported && riskLevel === 'low') {
+      setStep('biometric');
+    } else if (twoFactorEnabled && riskLevel !== 'low') {
+      setStep('2fa');
+    } else {
+      authenticateSuccess();
+    }
+  };
+
+  // Handle OTP submission
+  var handleOtpSubmit = function handleOtpSubmit(e) {
+    e.preventDefault();
+    if (otp.length !== 6 || !/^[0-9]{6}$/.test(otp)) {
+      setOtpError('Invalid code.');
+      return;
+    }
+    setOtpError('');
+    authenticateSuccess();
+  };
+
+  // Handle biometric authentication
+  var handleBiometric = function handleBiometric() {
+    // Simulate biometric success/failure
+    var success = Math.random() > 0.2;
+    if (success) {
+      setBiometricError('');
+      authenticateSuccess();
+    } else {
+      setBiometricError('Biometric authentication failed. Try again or use password.');
+    }
+  };
+
+  // On successful authentication
+  var authenticateSuccess = function authenticateSuccess() {
+    setStep('done');
+    onAuthenticated('session-token-' + Date.now());
+  };
+
+  // Render security level indicator
+  var renderSecurityIndicator = function renderSecurityIndicator() {
+    return /*#__PURE__*/React.createElement(SecurityLevelIndicator, {
+      level: riskLevel
+    });
+  };
+
+  // Render session timer
+  var renderSessionTimer = function renderSessionTimer() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "text-xs text-neutral-500 mb-2"
+    }, "Session expires in ", Math.floor(sessionTime / 60), ":", (sessionTime % 60).toString().padStart(2, '0'));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "w-full max-w-md mx-auto bg-white rounded-xl shadow-md p-6 mt-4 flex flex-col gap-4"
+  }, renderSecurityIndicator(), renderSessionTimer(), step === 'password' && /*#__PURE__*/React.createElement(Form, {
+    fields: [{
+      field: {
+        type: 'password',
+        label: 'Password',
+        value: password,
+        onChange: function onChange(e) {
+          return setPassword(e.target.value);
+        },
+        error: passwordError,
+        placeholder: 'Enter your password'
+      }
+    }],
+    onSubmit: handlePasswordSubmit,
+    submitLabel: "Continue"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt-2"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "text-xs font-semibold ".concat(passwordStrength === 'strong' ? 'text-green-700' : passwordStrength === 'medium' ? 'text-yellow-700' : 'text-red-700')
+  }, "Strength: ", passwordStrength))), step === '2fa' && /*#__PURE__*/React.createElement(Form, {
+    fields: [{
+      field: {
+        type: 'text',
+        label: '2FA Code',
+        value: otp,
+        onChange: function onChange(e) {
+          return setOtp(e.target.value);
+        },
+        error: otpError,
+        placeholder: 'Enter 6-digit code',
+        maxLength: 6
+      }
+    }],
+    onSubmit: handleOtpSubmit,
+    submitLabel: "Verify"
+  }), step === 'biometric' && /*#__PURE__*/React.createElement(BiometricPrompt, {
+    onAuthenticate: handleBiometric,
+    error: biometricError
+  }), step === 'done' && /*#__PURE__*/React.createElement("div", {
+    className: "text-green-700 font-semibold text-center"
+  }, "Authenticated!"));
+};