@merit-systems/echo-react-sdk 1.0.3 → 1.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/echo-react-sdk.umd.js +2 -2
  2. package/dist/echo-react-sdk.umd.js.map +1 -1
  3. package/dist/index.cjs +2 -2
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +269 -296
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -47,7 +47,7 @@ export declare interface EchoSignInProps {
47
47
  children?: React.ReactNode;
48
48
  }
49
49
 
50
- export declare function EchoTokenPurchase({ onPurchaseComplete, onError, className, children, }: EchoTokenPurchaseProps): JSX_2.Element;
50
+ export declare function EchoTokenPurchase({ amount, onPurchaseComplete, onError, className, children, }: EchoTokenPurchaseProps): JSX_2.Element;
51
51
 
52
52
  export declare interface EchoTokenPurchaseProps {
53
53
  amount?: number;
package/dist/index.js CHANGED
@@ -7806,6 +7806,7 @@ const CustomAmountInput = ({
7806
7806
  );
7807
7807
  };
7808
7808
  function EchoTokenPurchase({
7809
+ amount = 100,
7809
7810
  onPurchaseComplete,
7810
7811
  onError,
7811
7812
  className = "",
@@ -7830,7 +7831,7 @@ function EchoTokenPurchase({
7830
7831
  };
7831
7832
  const calculateAvailableSpend = () => {
7832
7833
  var _a2;
7833
- return ((_a2 = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _a2.amountLeft) || 0;
7834
+ return (((_a2 = freeTierBalance == null ? void 0 : freeTierBalance.userSpendInfo) == null ? void 0 : _a2.amountLeft) || 0) + ((balance == null ? void 0 : balance.balance) || 0);
7834
7835
  };
7835
7836
  const handlePurchase = async (purchaseAmount) => {
7836
7837
  if (!isAuthenticated) {
@@ -7926,7 +7927,7 @@ function EchoTokenPurchase({
7926
7927
  onMouseLeave: () => setIsHovered(false),
7927
7928
  children: [
7928
7929
  /* @__PURE__ */ jsx(Logo, { width: 16, height: 16, variant: "light" }),
7929
- /* @__PURE__ */ jsx("span", { children: freeTierBalance && calculateAvailableSpend() > 0 ? formatCurrency(calculateAvailableSpend()) + " Free" : balance ? formatCurrency(balance.balance) : "Purchase Tokens" }),
7930
+ /* @__PURE__ */ jsx("span", { children: formatCurrency(calculateAvailableSpend()) }),
7930
7931
  /* @__PURE__ */ jsxs(
7931
7932
  "svg",
7932
7933
  {
@@ -7952,340 +7953,312 @@ function EchoTokenPurchase({
7952
7953
  }
7953
7954
  );
7954
7955
  };
7955
- const Modal = () => {
7956
- return /* @__PURE__ */ jsx(
7957
- "div",
7958
- {
7959
- style: {
7960
- position: "fixed",
7961
- top: 0,
7962
- left: 0,
7963
- right: 0,
7964
- bottom: 0,
7965
- backgroundColor: "rgba(0, 0, 0, 0.5)",
7966
- display: "flex",
7967
- alignItems: "center",
7968
- justifyContent: "center",
7969
- zIndex: 1e3,
7970
- padding: "16px"
7971
- },
7972
- onClick: (e) => {
7973
- if (e.target === e.currentTarget) {
7974
- closeModal();
7975
- }
7976
- },
7977
- children: /* @__PURE__ */ jsxs(
7978
- "div",
7979
- {
7980
- style: {
7981
- backgroundColor: "#ffffff",
7982
- borderRadius: "12px",
7983
- border: "1px solid #e5e7eb",
7984
- padding: "0",
7985
- width: "100%",
7986
- maxWidth: "450px",
7987
- maxHeight: "90vh",
7988
- overflow: "hidden",
7989
- boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
7990
- fontFamily: "HelveticaNowDisplay, sans-serif",
7991
- display: "flex",
7992
- flexDirection: "column",
7993
- minHeight: "320px"
7994
- },
7995
- children: [
7996
- /* @__PURE__ */ jsx("div", { style: { padding: "16px 16px 0 16px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx(
7997
- "h2",
7998
- {
7999
- style: {
8000
- fontSize: "18px",
8001
- fontWeight: "500",
8002
- color: "#111827",
8003
- margin: 0,
8004
- fontFamily: "HelveticaNowDisplay, sans-serif"
8005
- },
8006
- children: "Credits"
8007
- }
8008
- ) }),
8009
- /* @__PURE__ */ jsxs("div", { style: { padding: "0 16px", marginBottom: "16px" }, children: [
8010
- /* @__PURE__ */ jsx(
8011
- "p",
8012
- {
8013
- style: {
8014
- fontSize: "14px",
8015
- color: "#6b7280",
8016
- margin: "0 0 4px 0",
8017
- fontFamily: "HelveticaNowDisplay, sans-serif"
8018
- },
8019
- children: "Total Available"
8020
- }
8021
- ),
8022
- /* @__PURE__ */ jsx(
8023
- "p",
8024
- {
8025
- style: {
8026
- fontSize: "28px",
8027
- fontWeight: "700",
8028
- color: "#111827",
8029
- margin: "0 0 12px 0",
8030
- fontFamily: "HelveticaNowDisplay, sans-serif"
8031
- },
8032
- children: formatCurrency(
8033
- ((balance == null ? void 0 : balance.balance) || 0) + calculateAvailableSpend()
8034
- )
8035
- }
8036
- ),
8037
- /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
8038
- freeTierBalance && calculateAvailableSpend() > 0 && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "8px" }, children: [
8039
- /* @__PURE__ */ jsxs(
7956
+ const Modal = () => /* @__PURE__ */ jsx(
7957
+ "div",
7958
+ {
7959
+ style: {
7960
+ position: "fixed",
7961
+ top: 0,
7962
+ left: 0,
7963
+ right: 0,
7964
+ bottom: 0,
7965
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
7966
+ display: "flex",
7967
+ alignItems: "center",
7968
+ justifyContent: "center",
7969
+ zIndex: 1e3,
7970
+ padding: "16px"
7971
+ },
7972
+ onClick: (e) => {
7973
+ if (e.target === e.currentTarget) {
7974
+ closeModal();
7975
+ }
7976
+ },
7977
+ children: /* @__PURE__ */ jsxs(
7978
+ "div",
7979
+ {
7980
+ style: {
7981
+ backgroundColor: "#ffffff",
7982
+ borderRadius: "12px",
7983
+ border: "1px solid #e5e7eb",
7984
+ padding: "0",
7985
+ width: "100%",
7986
+ maxWidth: "450px",
7987
+ maxHeight: "90vh",
7988
+ overflow: "hidden",
7989
+ boxShadow: "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
7990
+ fontFamily: "HelveticaNowDisplay, sans-serif",
7991
+ display: "flex",
7992
+ flexDirection: "column",
7993
+ minHeight: "320px"
7994
+ },
7995
+ children: [
7996
+ /* @__PURE__ */ jsx("div", { style: { padding: "24px 24px 0 24px", marginBottom: "24px" }, children: /* @__PURE__ */ jsx(
7997
+ "h2",
7998
+ {
7999
+ style: {
8000
+ fontSize: "18px",
8001
+ fontWeight: "500",
8002
+ color: "#111827",
8003
+ margin: 0,
8004
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8005
+ },
8006
+ children: "Credits"
8007
+ }
8008
+ ) }),
8009
+ /* @__PURE__ */ jsxs(
8010
+ "div",
8011
+ {
8012
+ style: {
8013
+ marginBottom: "24px",
8014
+ padding: "0 24px",
8015
+ flex: "1 1 0%",
8016
+ display: "flex",
8017
+ flexDirection: "column"
8018
+ },
8019
+ children: [
8020
+ freeTierBalance && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "20px" }, children: [
8021
+ /* @__PURE__ */ jsx(
8022
+ "p",
8023
+ {
8024
+ style: {
8025
+ fontSize: "14px",
8026
+ color: "#6b7280",
8027
+ margin: "0 0 4px 0",
8028
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8029
+ },
8030
+ children: "Free Tier Available"
8031
+ }
8032
+ ),
8033
+ /* @__PURE__ */ jsx(
8034
+ "p",
8035
+ {
8036
+ style: {
8037
+ fontSize: "24px",
8038
+ fontWeight: "600",
8039
+ color: "#111827",
8040
+ margin: "0 0 8px 0",
8041
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8042
+ },
8043
+ children: formatCurrency(calculateAvailableSpend())
8044
+ }
8045
+ ),
8046
+ freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs(
8040
8047
  "div",
8041
8048
  {
8042
8049
  style: {
8043
8050
  fontSize: "12px",
8044
8051
  color: "#6b7280",
8045
- fontFamily: "HelveticaNowDisplay, sans-serif",
8046
- display: "flex",
8047
- alignItems: "center",
8048
- gap: "6px",
8049
- marginBottom: "4px"
8052
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8050
8053
  },
8051
8054
  children: [
8055
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: "6px" }, children: [
8056
+ formatCurrency(
8057
+ freeTierBalance.userSpendInfo.amountSpent
8058
+ ),
8059
+ " ",
8060
+ "of",
8061
+ " ",
8062
+ formatCurrency(
8063
+ freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
8064
+ ),
8065
+ " ",
8066
+ "used"
8067
+ ] }),
8052
8068
  /* @__PURE__ */ jsx(
8053
8069
  "div",
8054
8070
  {
8055
8071
  style: {
8056
- width: "6px",
8057
- height: "6px",
8058
- borderRadius: "50%",
8059
- backgroundColor: "#ef4444"
8060
- }
8072
+ width: "100%",
8073
+ height: "4px",
8074
+ backgroundColor: "#f3f4f6",
8075
+ borderRadius: "2px",
8076
+ overflow: "hidden"
8077
+ },
8078
+ children: /* @__PURE__ */ jsx(
8079
+ "div",
8080
+ {
8081
+ style: {
8082
+ width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / freeTierBalance.userSpendInfo.spendLimit * 100)}%`,
8083
+ height: "100%",
8084
+ backgroundColor: "#dc2626"
8085
+ }
8086
+ }
8087
+ )
8061
8088
  }
8062
- ),
8063
- /* @__PURE__ */ jsxs("span", { children: [
8064
- formatCurrency(calculateAvailableSpend()),
8065
- " Free Tier",
8066
- freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: "8px" }, children: [
8067
- formatCurrency(
8068
- freeTierBalance.userSpendInfo.amountSpent
8069
- ),
8070
- " ",
8071
- "of",
8072
- " ",
8073
- formatCurrency(
8074
- freeTierBalance.userSpendInfo.amountLeft + freeTierBalance.userSpendInfo.amountSpent
8075
- ),
8076
- " ",
8077
- "used"
8078
- ] })
8079
- ] })
8089
+ )
8080
8090
  ]
8081
8091
  }
8082
- ),
8083
- freeTierBalance.userSpendInfo && freeTierBalance.userSpendInfo.spendLimit && /* @__PURE__ */ jsx(
8084
- "div",
8085
- {
8086
- style: {
8087
- width: "100%",
8088
- height: "4px",
8089
- backgroundColor: "#e5e7eb",
8090
- borderRadius: "2px",
8091
- overflow: "hidden",
8092
- marginBottom: "4px",
8093
- border: "1px solid #d1d5db"
8094
- },
8095
- children: /* @__PURE__ */ jsx(
8096
- "div",
8097
- {
8098
- style: {
8099
- width: `${Math.min(100, freeTierBalance.userSpendInfo.amountSpent / (freeTierBalance.userSpendInfo.spendLimit || 1) * 100)}%`,
8100
- height: "100%",
8101
- backgroundColor: "#dc2626"
8102
- }
8103
- }
8104
- )
8105
- }
8106
8092
  )
8107
8093
  ] }),
8108
- balance && balance.balance > 0 && /* @__PURE__ */ jsxs(
8094
+ /* @__PURE__ */ jsxs(
8109
8095
  "div",
8110
8096
  {
8111
8097
  style: {
8112
- fontSize: "12px",
8113
- color: "#6b7280",
8114
- fontFamily: "HelveticaNowDisplay, sans-serif",
8115
8098
  display: "flex",
8116
8099
  alignItems: "center",
8117
- gap: "6px"
8100
+ justifyContent: "space-between"
8118
8101
  },
8119
8102
  children: [
8120
- /* @__PURE__ */ jsx(
8121
- "div",
8122
- {
8123
- style: {
8124
- width: "6px",
8125
- height: "6px",
8126
- borderRadius: "50%",
8127
- backgroundColor: "#3b82f6"
8128
- }
8129
- }
8130
- ),
8131
- formatCurrency(balance.balance),
8132
- " Paid Credits"
8133
- ]
8134
- }
8135
- )
8136
- ] })
8137
- ] }),
8138
- /* @__PURE__ */ jsxs(
8139
- "div",
8140
- {
8141
- style: {
8142
- padding: "0 16px 16px 16px",
8143
- borderTop: "1px solid #f3f4f6",
8144
- paddingTop: "16px"
8145
- },
8146
- children: [
8147
- /* @__PURE__ */ jsx(
8148
- "p",
8149
- {
8150
- style: {
8151
- fontSize: "14px",
8152
- color: "#6b7280",
8153
- margin: "0 0 12px 0",
8154
- fontFamily: "HelveticaNowDisplay, sans-serif"
8155
- },
8156
- children: "Add Credits"
8157
- }
8158
- ),
8159
- !showCustomAmount ? /* @__PURE__ */ jsxs(
8160
- "div",
8161
- {
8162
- style: { display: "flex", flexDirection: "column", gap: "8px" },
8163
- children: [
8103
+ /* @__PURE__ */ jsxs("div", { style: { flex: "1 1 0%", minWidth: "0" }, children: [
8164
8104
  /* @__PURE__ */ jsx(
8165
- "button",
8105
+ "p",
8166
8106
  {
8167
- onClick: () => handlePurchase(10),
8168
- disabled: isProcessing,
8169
8107
  style: {
8170
- width: "100%",
8171
- padding: "12px 16px",
8172
- backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8173
- color: "white",
8174
- border: "none",
8175
- borderRadius: "6px",
8176
8108
  fontSize: "14px",
8177
- fontWeight: "600",
8178
- cursor: isProcessing ? "not-allowed" : "pointer",
8179
- transition: "background-color 0.2s ease",
8109
+ color: "#6b7280",
8110
+ margin: "0 0 4px 0",
8180
8111
  fontFamily: "HelveticaNowDisplay, sans-serif"
8181
8112
  },
8182
- onMouseEnter: (e) => {
8183
- if (!isProcessing) {
8184
- e.currentTarget.style.backgroundColor = "#b91c1c";
8185
- }
8186
- },
8187
- onMouseLeave: (e) => {
8188
- if (!isProcessing) {
8189
- e.currentTarget.style.backgroundColor = "#dc2626";
8190
- }
8191
- },
8192
- children: isProcessing ? "Processing..." : "Add $10 Credits"
8113
+ children: "Paid Credits Balance"
8193
8114
  }
8194
8115
  ),
8195
8116
  /* @__PURE__ */ jsx(
8196
- "button",
8117
+ "p",
8197
8118
  {
8198
- onClick: () => setShowCustomAmount(true),
8199
8119
  style: {
8200
- width: "100%",
8201
- padding: "8px 16px",
8202
- fontSize: "14px",
8203
- color: "#6b7280",
8204
- backgroundColor: "transparent",
8205
- border: "1px solid #e5e7eb",
8206
- borderRadius: "6px",
8207
- cursor: "pointer",
8120
+ fontSize: "30px",
8121
+ fontWeight: "700",
8122
+ color: "#111827",
8123
+ margin: 0,
8208
8124
  fontFamily: "HelveticaNowDisplay, sans-serif"
8209
8125
  },
8210
- onMouseEnter: (e) => {
8211
- e.currentTarget.style.color = "#111827";
8212
- e.currentTarget.style.borderColor = "#d1d5db";
8213
- },
8214
- onMouseLeave: (e) => {
8215
- e.currentTarget.style.color = "#6b7280";
8216
- e.currentTarget.style.borderColor = "#e5e7eb";
8217
- },
8218
- children: "Choose different amount"
8126
+ children: balance ? formatCurrency(balance.balance) : "$0.00"
8219
8127
  }
8220
8128
  )
8221
- ]
8222
- }
8223
- ) : /* @__PURE__ */ jsx(
8224
- CustomAmountInput,
8225
- {
8226
- onAddCredits: handlePurchase,
8227
- onCancel: () => setShowCustomAmount(false),
8228
- isProcessing
8229
- }
8230
- )
8231
- ]
8232
- }
8233
- ),
8234
- purchaseError && /* @__PURE__ */ jsx(
8235
- "div",
8236
- {
8237
- style: {
8238
- margin: "0 16px 12px 16px",
8239
- padding: "8px 12px",
8240
- backgroundColor: "#fee2e2",
8241
- color: "#dc2626",
8242
- borderRadius: "6px",
8243
- fontSize: "14px",
8244
- fontFamily: "HelveticaNowDisplay, sans-serif"
8245
- },
8246
- children: purchaseError
8247
- }
8248
- ),
8249
- /* @__PURE__ */ jsx(
8250
- "div",
8251
- {
8252
- style: {
8253
- padding: "12px 16px",
8254
- display: "flex",
8255
- justifyContent: "flex-end",
8256
- borderTop: "1px solid #f3f4f6"
8257
- },
8258
- children: /* @__PURE__ */ jsx(
8259
- "button",
8260
- {
8261
- onClick: closeModal,
8262
- style: {
8263
- padding: "8px 16px",
8264
- backgroundColor: "#f3f4f6",
8265
- color: "#374151",
8266
- border: "none",
8267
- borderRadius: "6px",
8268
- fontSize: "14px",
8269
- cursor: "pointer",
8270
- fontFamily: "HelveticaNowDisplay, sans-serif"
8271
- },
8272
- onMouseEnter: (e) => {
8273
- e.currentTarget.style.backgroundColor = "#e5e7eb";
8274
- },
8275
- onMouseLeave: (e) => {
8276
- e.currentTarget.style.backgroundColor = "#f3f4f6";
8277
- },
8278
- children: "Close"
8129
+ ] }),
8130
+ /* @__PURE__ */ jsx(
8131
+ "div",
8132
+ {
8133
+ style: {
8134
+ display: "flex",
8135
+ flexDirection: "column",
8136
+ alignItems: "flex-end",
8137
+ gap: "12px"
8138
+ },
8139
+ children: !showCustomAmount ? /* @__PURE__ */ jsxs(Fragment, { children: [
8140
+ /* @__PURE__ */ jsx(
8141
+ "button",
8142
+ {
8143
+ onClick: () => handlePurchase(10),
8144
+ disabled: isProcessing,
8145
+ style: {
8146
+ padding: "10px 24px",
8147
+ backgroundColor: isProcessing ? "#9ca3af" : "#dc2626",
8148
+ color: "white",
8149
+ border: "none",
8150
+ borderRadius: "6px",
8151
+ fontSize: "14px",
8152
+ fontWeight: "500",
8153
+ cursor: isProcessing ? "not-allowed" : "pointer",
8154
+ transition: "background-color 0.2s ease",
8155
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8156
+ },
8157
+ onMouseEnter: (e) => {
8158
+ if (!isProcessing) {
8159
+ e.currentTarget.style.backgroundColor = "#b91c1c";
8160
+ }
8161
+ },
8162
+ onMouseLeave: (e) => {
8163
+ if (!isProcessing) {
8164
+ e.currentTarget.style.backgroundColor = "#dc2626";
8165
+ }
8166
+ },
8167
+ children: isProcessing ? "Processing..." : "Add $10 Credits"
8168
+ }
8169
+ ),
8170
+ /* @__PURE__ */ jsx(
8171
+ "button",
8172
+ {
8173
+ onClick: () => setShowCustomAmount(true),
8174
+ style: {
8175
+ fontSize: "14px",
8176
+ color: "#6b7280",
8177
+ backgroundColor: "transparent",
8178
+ border: "none",
8179
+ textDecoration: "underline",
8180
+ cursor: "pointer",
8181
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8182
+ },
8183
+ onMouseEnter: (e) => {
8184
+ e.currentTarget.style.color = "#111827";
8185
+ },
8186
+ onMouseLeave: (e) => {
8187
+ e.currentTarget.style.color = "#6b7280";
8188
+ },
8189
+ children: "Choose different amount"
8190
+ }
8191
+ )
8192
+ ] }) : /* @__PURE__ */ jsx(
8193
+ CustomAmountInput,
8194
+ {
8195
+ onAddCredits: handlePurchase,
8196
+ onCancel: () => setShowCustomAmount(false),
8197
+ isProcessing
8198
+ }
8199
+ )
8200
+ }
8201
+ )
8202
+ ]
8279
8203
  }
8280
8204
  )
8281
- }
8282
- )
8283
- ]
8284
- }
8285
- )
8286
- }
8287
- );
8288
- };
8205
+ ]
8206
+ }
8207
+ ),
8208
+ purchaseError && /* @__PURE__ */ jsx(
8209
+ "div",
8210
+ {
8211
+ style: {
8212
+ margin: "0 24px 16px 24px",
8213
+ padding: "8px 12px",
8214
+ backgroundColor: "#fee2e2",
8215
+ color: "#dc2626",
8216
+ borderRadius: "6px",
8217
+ fontSize: "14px",
8218
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8219
+ },
8220
+ children: purchaseError
8221
+ }
8222
+ ),
8223
+ /* @__PURE__ */ jsx(
8224
+ "div",
8225
+ {
8226
+ style: {
8227
+ padding: "16px 24px 24px 24px",
8228
+ display: "flex",
8229
+ justifyContent: "flex-end",
8230
+ marginTop: "auto"
8231
+ },
8232
+ children: /* @__PURE__ */ jsx(
8233
+ "button",
8234
+ {
8235
+ onClick: closeModal,
8236
+ style: {
8237
+ padding: "8px 16px",
8238
+ backgroundColor: "#f3f4f6",
8239
+ color: "#374151",
8240
+ border: "none",
8241
+ borderRadius: "6px",
8242
+ fontSize: "14px",
8243
+ cursor: "pointer",
8244
+ fontFamily: "HelveticaNowDisplay, sans-serif"
8245
+ },
8246
+ onMouseEnter: (e) => {
8247
+ e.currentTarget.style.backgroundColor = "#e5e7eb";
8248
+ },
8249
+ onMouseLeave: (e) => {
8250
+ e.currentTarget.style.backgroundColor = "#f3f4f6";
8251
+ },
8252
+ children: "Close"
8253
+ }
8254
+ )
8255
+ }
8256
+ )
8257
+ ]
8258
+ }
8259
+ )
8260
+ }
8261
+ );
8289
8262
  return /* @__PURE__ */ jsxs(Fragment, { children: [
8290
8263
  children ? /* @__PURE__ */ jsx(
8291
8264
  "div",