@lightsparkdev/ui 0.0.6 → 0.0.8

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 (125) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/{chunk-JYWYEOM6.js → chunk-2JM7UTAZ.js} +18 -5
  3. package/dist/{chunk-UO6U7AYM.js → chunk-2YB7653N.js} +1 -1
  4. package/dist/{chunk-RTUZVKPK.js → chunk-36C653MV.js} +1 -1
  5. package/dist/{chunk-IQFU7CM5.js → chunk-4KWTXZRY.js} +1 -1
  6. package/dist/{chunk-CLU2FRJZ.js → chunk-55OQPFLF.js} +1 -1
  7. package/dist/{chunk-3CZOYF3X.js → chunk-6FHLZM6N.js} +2 -2
  8. package/dist/{chunk-K7D7A34K.js → chunk-744FBGRP.js} +1 -1
  9. package/dist/{chunk-FKETYVPP.js → chunk-76Q4BK35.js} +87 -43
  10. package/dist/{chunk-NGS4OSWT.js → chunk-BAO4T4G5.js} +1 -1
  11. package/dist/{chunk-NH25O7PC.js → chunk-CW3W2VTZ.js} +1 -1
  12. package/dist/{chunk-G2PZZFJL.js → chunk-DAVVD7YE.js} +10 -10
  13. package/dist/{chunk-VBWTKANQ.js → chunk-FN5PM3HQ.js} +6 -6
  14. package/dist/{chunk-RFGKH3R6.js → chunk-HNVQIY5U.js} +0 -8
  15. package/dist/{chunk-I74XQIVV.js → chunk-MAMSU2XB.js} +3 -3
  16. package/dist/chunk-NRXJA2PM.js +67 -0
  17. package/dist/{chunk-M56R3RJ7.js → chunk-OGSDZTHM.js} +7 -3
  18. package/dist/chunk-SZVMKB4E.js +222 -0
  19. package/dist/chunk-U6XT5JKC.js +25 -0
  20. package/dist/{chunk-WWFDI534.js → chunk-UWN53KLJ.js} +13 -6
  21. package/dist/{chunk-TAI352I3.js → chunk-VE7J2N47.js} +1 -1
  22. package/dist/{chunk-NZJCJJH5.js → chunk-VHW2KROZ.js} +1 -1
  23. package/dist/{chunk-N2RDQJQ5.js → chunk-WTO7C7WA.js} +1 -1
  24. package/dist/{chunk-23SR7TFO.js → chunk-XAZ6NZ6I.js} +1 -1
  25. package/dist/chunk-YPB5SA65.js +163 -0
  26. package/dist/{chunk-SVQELXFK.js → chunk-Z5TPS2BO.js} +1 -1
  27. package/dist/{chunk-T33SBHYI.js → chunk-ZSUX6RLD.js} +3 -1
  28. package/dist/{chunk-2WYVO6B2.js → chunk-ZYHA6MJC.js} +1 -1
  29. package/dist/components/Badge.cjs +1332 -0
  30. package/dist/components/Badge.d.cts +10 -0
  31. package/dist/components/Badge.d.ts +10 -0
  32. package/dist/components/Badge.js +13 -0
  33. package/dist/components/Button.cjs +197 -83
  34. package/dist/components/Button.d.cts +3 -1
  35. package/dist/components/Button.d.ts +3 -1
  36. package/dist/components/Button.js +8 -7
  37. package/dist/components/ButtonRow.cjs +212 -82
  38. package/dist/components/ButtonRow.d.cts +6 -2
  39. package/dist/components/ButtonRow.d.ts +6 -2
  40. package/dist/components/ButtonRow.js +14 -11
  41. package/dist/components/Collapsible.cjs +0 -30
  42. package/dist/components/Collapsible.js +4 -5
  43. package/dist/components/ContentTable.cjs +0 -30
  44. package/dist/components/ContentTable.js +3 -4
  45. package/dist/components/CopyToClipboardButton.cjs +123 -41
  46. package/dist/components/CopyToClipboardButton.js +6 -5
  47. package/dist/components/CurrencyAmount.cjs +0 -30
  48. package/dist/components/CurrencyAmount.js +3 -4
  49. package/dist/components/FileInput.cjs +1945 -0
  50. package/dist/components/FileInput.d.cts +21 -0
  51. package/dist/components/FileInput.d.ts +21 -0
  52. package/dist/components/FileInput.js +113 -0
  53. package/dist/components/Icon.cjs +0 -30
  54. package/dist/components/Icon.js +2 -3
  55. package/dist/components/LightTooltip.cjs +1414 -0
  56. package/dist/components/LightTooltip.d.cts +9 -0
  57. package/dist/components/LightTooltip.d.ts +9 -0
  58. package/dist/components/LightTooltip.js +12 -0
  59. package/dist/components/LightboxImage.cjs +1 -1
  60. package/dist/components/LightboxImage.js +2 -2
  61. package/dist/components/LightsparkProvider.cjs +3 -33
  62. package/dist/components/LightsparkProvider.js +3 -4
  63. package/dist/components/Loading.cjs +0 -30
  64. package/dist/components/Loading.js +3 -4
  65. package/dist/components/Modal.cjs +208 -114
  66. package/dist/components/Modal.js +12 -11
  67. package/dist/components/Pill.cjs +1703 -0
  68. package/dist/components/Pill.d.cts +19 -0
  69. package/dist/components/Pill.d.ts +19 -0
  70. package/dist/components/Pill.js +16 -0
  71. package/dist/components/ProgressBar.cjs +0 -32
  72. package/dist/components/ProgressBar.js +2 -3
  73. package/dist/components/SecretContainer.cjs +124 -42
  74. package/dist/components/SecretContainer.js +7 -6
  75. package/dist/components/TextIconAligner.cjs +0 -30
  76. package/dist/components/TextIconAligner.js +3 -4
  77. package/dist/components/UnstyledButton.cjs +0 -30
  78. package/dist/components/UnstyledButton.js +2 -3
  79. package/dist/components/documentation/AnchorLinkHeader.cjs +0 -32
  80. package/dist/components/documentation/AnchorLinkHeader.js +3 -4
  81. package/dist/components/documentation/index.cjs +0 -32
  82. package/dist/components/documentation/index.js +3 -4
  83. package/dist/components/index.cjs +608 -327
  84. package/dist/components/index.d.cts +5 -1
  85. package/dist/components/index.d.ts +5 -1
  86. package/dist/components/index.js +37 -25
  87. package/dist/icons/Copy.cjs +4 -3
  88. package/dist/icons/Copy.js +4 -3
  89. package/dist/icons/Download.cjs +22 -11
  90. package/dist/icons/Download.js +23 -12
  91. package/dist/icons/Upload.cjs +22 -11
  92. package/dist/icons/Upload.js +23 -12
  93. package/dist/icons/index.cjs +0 -30
  94. package/dist/icons/index.js +2 -3
  95. package/dist/router.cjs +7 -3
  96. package/dist/router.js +1 -1
  97. package/dist/styles/common.cjs +0 -32
  98. package/dist/styles/common.d.cts +1 -5
  99. package/dist/styles/common.d.ts +1 -5
  100. package/dist/styles/common.js +1 -4
  101. package/dist/styles/fields.cjs +65 -34
  102. package/dist/styles/fields.d.cts +8 -2
  103. package/dist/styles/fields.d.ts +8 -2
  104. package/dist/styles/fields.js +28 -164
  105. package/dist/styles/fonts/typography/Article.cjs +0 -30
  106. package/dist/styles/fonts/typography/Article.js +6 -7
  107. package/dist/styles/fonts/typography/index.cjs +0 -30
  108. package/dist/styles/fonts/typography/index.js +11 -12
  109. package/dist/styles/fonts/typographyTokens.d.cts +4 -1
  110. package/dist/styles/fonts/typographyTokens.d.ts +4 -1
  111. package/dist/styles/global.cjs +3 -33
  112. package/dist/styles/global.js +2 -3
  113. package/dist/styles/type.cjs +0 -30
  114. package/dist/styles/type.js +2 -3
  115. package/dist/styles/utils.cjs +0 -30
  116. package/dist/styles/utils.js +2 -3
  117. package/dist/styles/z-index.cjs +1 -1
  118. package/dist/styles/z-index.d.cts +1 -1
  119. package/dist/styles/z-index.d.ts +1 -1
  120. package/dist/styles/z-index.js +1 -1
  121. package/dist/types/index.d.cts +2 -0
  122. package/dist/types/index.d.ts +2 -0
  123. package/dist/utils/toReactNodes.cjs +7 -3
  124. package/dist/utils/toReactNodes.js +2 -2
  125. package/package.json +5 -4
@@ -56,6 +56,7 @@ __export(fields_exports, {
56
56
  fieldWidth: () => fieldWidth,
57
57
  formButtonTopMargin: () => formButtonTopMargin,
58
58
  formButtonTopMarginStyle: () => formButtonTopMarginStyle,
59
+ inputBlockStyle: () => inputBlockStyle,
59
60
  inputSpacingPx: () => inputSpacingPx,
60
61
  labelStyle: () => labelStyle,
61
62
  maxFieldWidth: () => maxFieldWidth,
@@ -1286,40 +1287,17 @@ function hexToRGB(hex) {
1286
1287
  // src/styles/common.tsx
1287
1288
  var import_react4 = require("@emotion/react");
1288
1289
  var import_styled = __toESM(require("@emotion/styled"), 1);
1289
- var import_react_tooltip = require("react-tooltip");
1290
-
1291
- // src/styles/z-index.tsx
1292
- var z = {
1293
- card: 1,
1294
- fieldError: 1,
1295
- textInput: 2,
1296
- select: 3,
1297
- selectFocused: 4,
1298
- walletActionPreviewTopGradient: 1,
1299
- headerContainer: 99,
1300
- smBanner: 99,
1301
- headerTop: 100,
1302
- navMenu: 100,
1303
- smNavMenu: 100,
1304
- navAction: 101,
1305
- smNavAction: 100,
1306
- // keep under navDropdown
1307
- tooltip: 160,
1308
- notificationBanner: 170,
1309
- qrReaderVideo: 180,
1310
- qrReaderOverlay: 181,
1311
- modalOverlay: 190,
1312
- modalContainer: 191,
1313
- dropdown: 192,
1314
- toast: 200
1315
- };
1316
-
1317
- // src/styles/common.tsx
1318
1290
  var rootFontSizePx = 12;
1319
1291
  var rootFontSizeRems = rootFontSizePx / 16;
1320
1292
  var standardContentInsetPx = 32;
1321
1293
  var standardContentInsetMdPx = 24;
1322
1294
  var standardContentInsetSmPx = 16;
1295
+ var standardBorderRadius = (radius) => {
1296
+ const borderRadiusPx = Array.isArray(radius) ? radius.map((r) => `${r}px`).join(" ") : `${radius}px`;
1297
+ return `
1298
+ border-radius: ${borderRadiusPx};
1299
+ `;
1300
+ };
1323
1301
  var smContentInset = import_react4.css`
1324
1302
  ${bp.sm(`
1325
1303
  margin-left: auto;
@@ -1360,9 +1338,32 @@ var Subtext = import_styled.default.div`
1360
1338
  var darkGradientBg = import_react4.css`
1361
1339
  background: ${darkGradient};
1362
1340
  `;
1363
- var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
1364
- z-index: ${z.modalOverlay};
1365
- `;
1341
+
1342
+ // src/styles/z-index.tsx
1343
+ var z = {
1344
+ card: 1,
1345
+ fieldError: 1,
1346
+ textInput: 2,
1347
+ select: 3,
1348
+ selectFocused: 4,
1349
+ walletActionPreviewTopGradient: 1,
1350
+ headerContainer: 99,
1351
+ smBanner: 99,
1352
+ headerTop: 100,
1353
+ navMenu: 100,
1354
+ smNavMenu: 100,
1355
+ navAction: 101,
1356
+ smNavAction: 100,
1357
+ // keep under navDropdown
1358
+ notificationBanner: 170,
1359
+ qrReaderVideo: 180,
1360
+ qrReaderOverlay: 181,
1361
+ modalOverlay: 190,
1362
+ modalContainer: 191,
1363
+ dropdown: 192,
1364
+ tooltip: 193,
1365
+ toast: 200
1366
+ };
1366
1367
 
1367
1368
  // src/styles/fields.tsx
1368
1369
  var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
@@ -1376,6 +1377,25 @@ var formButtonTopMarginStyle = import_react5.css`
1376
1377
  var standardBorderColor = ({ theme }) => import_react5.css`
1377
1378
  border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
1378
1379
  `;
1380
+ var inputBlockStyle = ({
1381
+ theme,
1382
+ hasValue,
1383
+ hasError
1384
+ }) => import_react5.css`
1385
+ ${subtext({ theme })}
1386
+ ${standardBorderColor({ theme })}
1387
+ ${standardBorderRadius(8)}
1388
+ background-color: ${theme.bg};
1389
+ border-width: 2px;
1390
+ display: flex;
1391
+ align-items: center;
1392
+ justify-content: center;
1393
+ flex-direction: column;
1394
+ position: relative;
1395
+ cursor: pointer;
1396
+ padding: 52.5px;
1397
+ ${hasError ? `border-style: solid; border-color: ${colors.danger}; border-width: 2px;` : hasValue ? `border-style: solid; border-color: ${theme.info};` : `border-style: dashed;`}
1398
+ `;
1379
1399
  var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
1380
1400
  var textInputColor = ({ theme }) => theme.text;
1381
1401
  var textInputFontWeight = 600;
@@ -1458,7 +1478,8 @@ var aboveFieldError = ({
1458
1478
  var inputSubtextSeconds = 0.25;
1459
1479
  function InputSubtext({
1460
1480
  text,
1461
- hasError = false
1481
+ hasError = false,
1482
+ tooltipId
1462
1483
  }) {
1463
1484
  const timeoutRef = (0, import_react6.useRef)(null);
1464
1485
  const [subtext2, setSubtext] = (0, import_react6.useState)(text);
@@ -1477,7 +1498,15 @@ function InputSubtext({
1477
1498
  }, inputSubtextSeconds * 1e3);
1478
1499
  }
1479
1500
  }, [text]);
1480
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(StyledInputSubtext, { visible, hasError, children: subtext2 });
1501
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
1502
+ StyledInputSubtext,
1503
+ {
1504
+ visible,
1505
+ hasError,
1506
+ cursorPointer: Boolean(tooltipId),
1507
+ children: tooltipId ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-tooltip-id": tooltipId, children: subtext2 }) : subtext2
1508
+ }
1509
+ );
1481
1510
  }
1482
1511
  var StyledInputSubtext = import_styled2.default.div`
1483
1512
  margin-top: ${({ visible }) => visible ? "8px" : "0px"};
@@ -1491,6 +1520,7 @@ var StyledInputSubtext = import_styled2.default.div`
1491
1520
  opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
1492
1521
  margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
1493
1522
  color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
1523
+ cursor: ${({ cursorPointer }) => cursorPointer ? "pointer" : "auto"};
1494
1524
  `;
1495
1525
  var labelStyle = ({
1496
1526
  theme,
@@ -1527,6 +1557,7 @@ var LabelDiv = import_styled2.default.div`
1527
1557
  fieldWidth,
1528
1558
  formButtonTopMargin,
1529
1559
  formButtonTopMarginStyle,
1560
+ inputBlockStyle,
1530
1561
  inputSpacingPx,
1531
1562
  labelStyle,
1532
1563
  maxFieldWidth,
@@ -12,6 +12,10 @@ declare const inputSpacingPx = 24;
12
12
  declare const formButtonTopMargin = "32px";
13
13
  declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
14
14
  declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
15
+ declare const inputBlockStyle: ({ theme, hasValue, hasError, }: WithTheme<{
16
+ hasValue: boolean;
17
+ hasError: boolean;
18
+ }>) => _emotion_react.SerializedStyles;
15
19
  declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
16
20
  declare const textInputColor: ({ theme }: ThemeProp) => string;
17
21
  declare const textInputFontWeight = 600;
@@ -33,9 +37,10 @@ declare const FieldError: _emotion_styled.StyledComponent<{
33
37
  declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
34
38
  hasError: boolean;
35
39
  }>) => _emotion_react.SerializedStyles;
36
- declare function InputSubtext({ text, hasError, }: {
40
+ declare function InputSubtext({ text, hasError, tooltipId, }: {
37
41
  text?: string | undefined;
38
42
  hasError?: boolean;
43
+ tooltipId?: string | undefined;
39
44
  }): _emotion_react_jsx_runtime.JSX.Element;
40
45
  declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
41
46
  theme?: _emotion_react.Theme;
@@ -43,6 +48,7 @@ declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
43
48
  } & {
44
49
  hasError: boolean;
45
50
  visible: boolean;
51
+ cursorPointer: boolean;
46
52
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
47
53
  declare const labelStyle: ({ theme, hasError, }: WithTheme<{
48
54
  hasError?: boolean;
@@ -60,4 +66,4 @@ declare const LabelDiv: _emotion_styled.StyledComponent<{
60
66
  hasError?: boolean;
61
67
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
62
68
 
63
- export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
69
+ export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputBlockStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
@@ -12,6 +12,10 @@ declare const inputSpacingPx = 24;
12
12
  declare const formButtonTopMargin = "32px";
13
13
  declare const formButtonTopMarginStyle: _emotion_react.SerializedStyles;
14
14
  declare const standardBorderColor: ({ theme }: ThemeProp) => _emotion_react.SerializedStyles;
15
+ declare const inputBlockStyle: ({ theme, hasValue, hasError, }: WithTheme<{
16
+ hasValue: boolean;
17
+ hasError: boolean;
18
+ }>) => _emotion_react.SerializedStyles;
15
19
  declare const textInputPlaceholderColor: ({ theme }: ThemeProp) => string;
16
20
  declare const textInputColor: ({ theme }: ThemeProp) => string;
17
21
  declare const textInputFontWeight = 600;
@@ -33,9 +37,10 @@ declare const FieldError: _emotion_styled.StyledComponent<{
33
37
  declare const aboveFieldError: ({ theme, hasError, }: WithTheme<{
34
38
  hasError: boolean;
35
39
  }>) => _emotion_react.SerializedStyles;
36
- declare function InputSubtext({ text, hasError, }: {
40
+ declare function InputSubtext({ text, hasError, tooltipId, }: {
37
41
  text?: string | undefined;
38
42
  hasError?: boolean;
43
+ tooltipId?: string | undefined;
39
44
  }): _emotion_react_jsx_runtime.JSX.Element;
40
45
  declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
41
46
  theme?: _emotion_react.Theme;
@@ -43,6 +48,7 @@ declare const StyledInputSubtext: _emotion_styled.StyledComponent<{
43
48
  } & {
44
49
  hasError: boolean;
45
50
  visible: boolean;
51
+ cursorPointer: boolean;
46
52
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
47
53
  declare const labelStyle: ({ theme, hasError, }: WithTheme<{
48
54
  hasError?: boolean;
@@ -60,4 +66,4 @@ declare const LabelDiv: _emotion_styled.StyledComponent<{
60
66
  hasError?: boolean;
61
67
  }, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
62
68
 
63
- export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
69
+ export { FieldError, InputSubtext, Label, LabelDiv, StyledInputSubtext, aboveFieldError, fieldWidth, formButtonTopMargin, formButtonTopMarginStyle, inputBlockStyle, inputSpacingPx, labelStyle, maxFieldWidth, standardBorderColor, textInputBorderColor, textInputBorderColorFocused, textInputBorderRadiusPx, textInputColor, textInputFontWeight, textInputPadding, textInputPaddingPx, textInputPlaceholderColor, textInputStyle };
@@ -1,171 +1,34 @@
1
1
  import {
2
- subtext
3
- } from "../chunk-RFGKH3R6.js";
4
- import {
5
- themeOr
6
- } from "../chunk-2VBDEO6M.js";
2
+ FieldError,
3
+ InputSubtext,
4
+ Label,
5
+ LabelDiv,
6
+ StyledInputSubtext,
7
+ aboveFieldError,
8
+ fieldWidth,
9
+ formButtonTopMargin,
10
+ formButtonTopMarginStyle,
11
+ inputBlockStyle,
12
+ inputSpacingPx,
13
+ labelStyle,
14
+ maxFieldWidth,
15
+ standardBorderColor,
16
+ textInputBorderColor,
17
+ textInputBorderColorFocused,
18
+ textInputBorderRadiusPx,
19
+ textInputColor,
20
+ textInputFontWeight,
21
+ textInputPadding,
22
+ textInputPaddingPx,
23
+ textInputPlaceholderColor,
24
+ textInputStyle
25
+ } from "../chunk-SZVMKB4E.js";
26
+ import "../chunk-55OQPFLF.js";
27
+ import "../chunk-HNVQIY5U.js";
28
+ import "../chunk-2VBDEO6M.js";
7
29
  import "../chunk-E4EXM4SY.js";
8
30
  import "../chunk-JSGRNWSB.js";
9
- import {
10
- z
11
- } from "../chunk-CLU2FRJZ.js";
12
31
  import "../chunk-CIGAQ47A.js";
13
-
14
- // src/styles/fields.tsx
15
- import { css } from "@emotion/react";
16
- import styled from "@emotion/styled";
17
- import { useLayoutEffect, useRef, useState } from "react";
18
- import { jsx } from "@emotion/react/jsx-runtime";
19
- var maxFieldWidth = "100%";
20
- var fieldWidth = "100%";
21
- var inputSpacingPx = 24;
22
- var formButtonTopMargin = "32px";
23
- var formButtonTopMarginStyle = css`
24
- margin-top: ${formButtonTopMargin};
25
- `;
26
- var standardBorderColor = ({ theme }) => css`
27
- border-color: ${themeOr(theme.c1Neutral, theme.mcNeutral)({ theme })};
28
- `;
29
- var textInputPlaceholderColor = ({ theme }) => theme.c4Neutral;
30
- var textInputColor = ({ theme }) => theme.text;
31
- var textInputFontWeight = 600;
32
- var textInputBorderRadiusPx = 8;
33
- var textInputPaddingPx = 12;
34
- var textInputPadding = `${textInputPaddingPx}px`;
35
- var textInputBorderColor = ({ theme }) => themeOr(theme.c1Neutral, theme.c3Neutral)({ theme });
36
- var textInputBorderColorFocused = ({ theme }) => themeOr(theme.hcNeutral, theme.hcNeutral)({ theme });
37
- var textInputStyle = ({
38
- theme,
39
- disabled,
40
- hasError,
41
- paddingLeftPx,
42
- paddingRightPx
43
- }) => {
44
- var _a;
45
- return css`
46
- border-radius: ${textInputBorderRadiusPx}px;
47
- background-color: ${disabled ? theme.vlcNeutral : theme.bg};
48
- cursor: ${disabled ? "not-allowed" : "auto"};
49
- box-sizing: border-box;
50
- font-weight: ${textInputFontWeight};
51
-
52
- position: relative;
53
- z-index: ${z.textInput};
54
- font-family: ${(_a = theme.typography) == null ? void 0 : _a.fontFamilies.main};
55
- padding: ${textInputPaddingPx - (hasError ? 1 : 0)}px;
56
- ${paddingLeftPx ? `padding-left: ${paddingLeftPx - (hasError ? 1 : 0)}px;` : ""}
57
- ${paddingRightPx ? `padding-right: ${paddingRightPx - (hasError ? 1 : 0)}px;` : ""}
58
- border-style: solid;
59
- border-width: ${hasError ? "2" : "1"}px;
60
- border-color: ${hasError ? theme.danger : textInputBorderColor({ theme })};
61
- line-height: 22px;
62
- outline: none;
63
- /* Use low contrast by default. Some fields, eg login, need high contrast simply
64
- because of quirks with default autofill styles. Clicking in to an autofilled value
65
- does not change the color of the text, it just uses the default field color */
66
- color: ${textInputColor({ theme })};
67
- font-size: 14px;
68
- width: ${fieldWidth};
69
- max-width: ${maxFieldWidth};
70
- text-overflow: ellipsis;
71
- &:focus,
72
- &:active {
73
- border-color: ${textInputBorderColorFocused({ theme })};
74
- border-width: 2px;
75
- color: ${textInputColor({ theme })};
76
- padding: ${textInputPaddingPx - 1}px;
77
- ${paddingLeftPx ? `padding-left: ${paddingLeftPx - 1}px;` : ""}
78
- ${paddingRightPx ? `padding-right: ${paddingRightPx - 1}px;` : ""}
79
- }
80
-
81
- &::placeholder {
82
- color: ${textInputPlaceholderColor({ theme })};
83
- }
84
-
85
- &:focus::placeholder {
86
- color: ${textInputPlaceholderColor({ theme })};
87
- }
88
- `;
89
- };
90
- var FieldError = styled.div`
91
- background-color: rgba(242, 239, 255, 1);
92
- padding: 16px 16px 8px;
93
- margin-top: -8px;
94
- border-radius: 0 0 8px 8px;
95
- position: relative;
96
- z-index: ${z.fieldError};
97
- `;
98
- var aboveFieldError = ({
99
- theme,
100
- hasError
101
- }) => css`
102
- ${hasError ? "border: none !important" : ""};
103
- background-color: ${theme.bg};
104
- position: relative;
105
- z-index: ${z.fieldError + 1};
106
- ${hasError && "box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 1px 4px rgba(0, 0, 0, 0.1);"}
107
- `;
108
- var inputSubtextSeconds = 0.25;
109
- function InputSubtext({
110
- text,
111
- hasError = false
112
- }) {
113
- const timeoutRef = useRef(null);
114
- const [subtext2, setSubtext] = useState(text);
115
- const [visible, setVisible] = useState(Boolean(text));
116
- useLayoutEffect(() => {
117
- if (text) {
118
- setSubtext(text);
119
- setVisible(true);
120
- if (timeoutRef.current) {
121
- clearTimeout(timeoutRef.current);
122
- }
123
- } else {
124
- setVisible(false);
125
- timeoutRef.current = setTimeout(() => {
126
- setSubtext(void 0);
127
- }, inputSubtextSeconds * 1e3);
128
- }
129
- }, [text]);
130
- return /* @__PURE__ */ jsx(StyledInputSubtext, { visible, hasError, children: subtext2 });
131
- }
132
- var StyledInputSubtext = styled.div`
133
- margin-top: ${({ visible }) => visible ? "8px" : "0px"};
134
- margin-left: ${({ visible }) => visible ? "8px" : "0px"};
135
- font-size: 12px;
136
- font-size: ${({ visible }) => visible ? "12px" : "0px"};
137
- opacity: ${({ visible }) => visible ? "1" : "0"};
138
- overflow: hidden;
139
- transition:
140
- font-size ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
141
- opacity ${inputSubtextSeconds * 0.8}s cubic-bezier(0.25, 0.87, 0.56, 1.23),
142
- margin ${inputSubtextSeconds}s cubic-bezier(0.25, 0.87, 0.56, 1.23);
143
- color: ${({ hasError, theme }) => hasError ? theme.danger : theme.text};
144
- `;
145
- var labelStyle = ({
146
- theme,
147
- hasError
148
- }) => css`
149
- color: ${hasError ? theme.danger : theme.text};
150
- font-size: 14px;
151
- display: flex;
152
- justify-content: space-between;
153
- align-items: center;
154
- & + * {
155
- margin-top: 12px;
156
- }
157
- * ~ & {
158
- margin-top: 40px;
159
- }
160
- `;
161
- var Label = styled.label`
162
- ${subtext}
163
- ${labelStyle}
164
- `;
165
- var LabelDiv = styled.div`
166
- ${subtext}
167
- ${labelStyle}
168
- `;
169
32
  export {
170
33
  FieldError,
171
34
  InputSubtext,
@@ -176,6 +39,7 @@ export {
176
39
  fieldWidth,
177
40
  formButtonTopMargin,
178
41
  formButtonTopMarginStyle,
42
+ inputBlockStyle,
179
43
  inputSpacingPx,
180
44
  labelStyle,
181
45
  maxFieldWidth,
@@ -59,7 +59,6 @@ var import_styled2 = __toESM(require("@emotion/styled"), 1);
59
59
  // src/styles/common.tsx
60
60
  var import_react4 = require("@emotion/react");
61
61
  var import_styled = __toESM(require("@emotion/styled"), 1);
62
- var import_react_tooltip = require("react-tooltip");
63
62
 
64
63
  // src/styles/breakpoints.tsx
65
64
  var import_react = require("@emotion/react");
@@ -1277,32 +1276,6 @@ function hexToRGB(hex) {
1277
1276
  ] : [0, 0, 0];
1278
1277
  }
1279
1278
 
1280
- // src/styles/z-index.tsx
1281
- var z = {
1282
- card: 1,
1283
- fieldError: 1,
1284
- textInput: 2,
1285
- select: 3,
1286
- selectFocused: 4,
1287
- walletActionPreviewTopGradient: 1,
1288
- headerContainer: 99,
1289
- smBanner: 99,
1290
- headerTop: 100,
1291
- navMenu: 100,
1292
- smNavMenu: 100,
1293
- navAction: 101,
1294
- smNavAction: 100,
1295
- // keep under navDropdown
1296
- tooltip: 160,
1297
- notificationBanner: 170,
1298
- qrReaderVideo: 180,
1299
- qrReaderOverlay: 181,
1300
- modalOverlay: 190,
1301
- modalContainer: 191,
1302
- dropdown: 192,
1303
- toast: 200
1304
- };
1305
-
1306
1279
  // src/styles/common.tsx
1307
1280
  var rootFontSizePx = 12;
1308
1281
  var rootFontSizeRems = rootFontSizePx / 16;
@@ -1355,9 +1328,6 @@ var Subtext = import_styled.default.div`
1355
1328
  var darkGradientBg = import_react4.css`
1356
1329
  background: ${darkGradient};
1357
1330
  `;
1358
- var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
1359
- z-index: ${z.modalOverlay};
1360
- `;
1361
1331
 
1362
1332
  // src/components/ContentTable.tsx
1363
1333
  var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
@@ -1,23 +1,22 @@
1
1
  "use client";
2
2
  import {
3
3
  Article
4
- } from "../../../chunk-VBWTKANQ.js";
4
+ } from "../../../chunk-FN5PM3HQ.js";
5
5
  import "../../../chunk-FHNYQLMF.js";
6
- import "../../../chunk-LD5LZXUP.js";
7
6
  import "../../../chunk-BCFRW7CV.js";
8
7
  import "../../../chunk-QGGOMPHZ.js";
8
+ import "../../../chunk-LD5LZXUP.js";
9
9
  import "../../../chunk-4TFRLWCC.js";
10
10
  import "../../../chunk-YMNSXZ5D.js";
11
11
  import "../../../chunk-3XSQV5U4.js";
12
- import "../../../chunk-UO6U7AYM.js";
13
- import "../../../chunk-K7D7A34K.js";
14
- import "../../../chunk-NZJCJJH5.js";
12
+ import "../../../chunk-2YB7653N.js";
13
+ import "../../../chunk-744FBGRP.js";
14
+ import "../../../chunk-VHW2KROZ.js";
15
15
  import "../../../chunk-LAMQKQU3.js";
16
- import "../../../chunk-RFGKH3R6.js";
16
+ import "../../../chunk-HNVQIY5U.js";
17
17
  import "../../../chunk-2VBDEO6M.js";
18
18
  import "../../../chunk-E4EXM4SY.js";
19
19
  import "../../../chunk-JSGRNWSB.js";
20
- import "../../../chunk-CLU2FRJZ.js";
21
20
  import "../../../chunk-CIGAQ47A.js";
22
21
  export {
23
22
  Article
@@ -70,7 +70,6 @@ var import_styled2 = __toESM(require("@emotion/styled"), 1);
70
70
  // src/styles/common.tsx
71
71
  var import_react4 = require("@emotion/react");
72
72
  var import_styled = __toESM(require("@emotion/styled"), 1);
73
- var import_react_tooltip = require("react-tooltip");
74
73
 
75
74
  // src/styles/breakpoints.tsx
76
75
  var import_react = require("@emotion/react");
@@ -1288,32 +1287,6 @@ function hexToRGB(hex) {
1288
1287
  ] : [0, 0, 0];
1289
1288
  }
1290
1289
 
1291
- // src/styles/z-index.tsx
1292
- var z = {
1293
- card: 1,
1294
- fieldError: 1,
1295
- textInput: 2,
1296
- select: 3,
1297
- selectFocused: 4,
1298
- walletActionPreviewTopGradient: 1,
1299
- headerContainer: 99,
1300
- smBanner: 99,
1301
- headerTop: 100,
1302
- navMenu: 100,
1303
- smNavMenu: 100,
1304
- navAction: 101,
1305
- smNavAction: 100,
1306
- // keep under navDropdown
1307
- tooltip: 160,
1308
- notificationBanner: 170,
1309
- qrReaderVideo: 180,
1310
- qrReaderOverlay: 181,
1311
- modalOverlay: 190,
1312
- modalContainer: 191,
1313
- dropdown: 192,
1314
- toast: 200
1315
- };
1316
-
1317
1290
  // src/styles/common.tsx
1318
1291
  var rootFontSizePx = 12;
1319
1292
  var rootFontSizeRems = rootFontSizePx / 16;
@@ -1366,9 +1339,6 @@ var Subtext = import_styled.default.div`
1366
1339
  var darkGradientBg = import_react4.css`
1367
1340
  background: ${darkGradient};
1368
1341
  `;
1369
- var StyledTooltip = (0, import_styled.default)(import_react_tooltip.Tooltip)`
1370
- z-index: ${z.modalOverlay};
1371
- `;
1372
1342
 
1373
1343
  // src/components/ContentTable.tsx
1374
1344
  var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
@@ -1,3 +1,6 @@
1
+ import {
2
+ BodyStrong
3
+ } from "../../../chunk-LN7MMOXE.js";
1
4
  import {
2
5
  Label
3
6
  } from "../../../chunk-OO5UJRAW.js";
@@ -12,36 +15,32 @@ import {
12
15
  } from "../../../chunk-RBYRXBPI.js";
13
16
  import {
14
17
  Article
15
- } from "../../../chunk-VBWTKANQ.js";
18
+ } from "../../../chunk-FN5PM3HQ.js";
16
19
  import {
17
20
  Title
18
21
  } from "../../../chunk-FHNYQLMF.js";
19
- import {
20
- Body
21
- } from "../../../chunk-LD5LZXUP.js";
22
- import {
23
- BodyStrong
24
- } from "../../../chunk-LN7MMOXE.js";
25
22
  import {
26
23
  Code
27
24
  } from "../../../chunk-BCFRW7CV.js";
28
25
  import {
29
26
  Display
30
27
  } from "../../../chunk-QGGOMPHZ.js";
28
+ import {
29
+ Body
30
+ } from "../../../chunk-LD5LZXUP.js";
31
31
  import {
32
32
  Headline
33
33
  } from "../../../chunk-4TFRLWCC.js";
34
34
  import "../../../chunk-YMNSXZ5D.js";
35
35
  import "../../../chunk-3XSQV5U4.js";
36
- import "../../../chunk-UO6U7AYM.js";
37
- import "../../../chunk-K7D7A34K.js";
38
- import "../../../chunk-NZJCJJH5.js";
36
+ import "../../../chunk-2YB7653N.js";
37
+ import "../../../chunk-744FBGRP.js";
38
+ import "../../../chunk-VHW2KROZ.js";
39
39
  import "../../../chunk-LAMQKQU3.js";
40
- import "../../../chunk-RFGKH3R6.js";
40
+ import "../../../chunk-HNVQIY5U.js";
41
41
  import "../../../chunk-2VBDEO6M.js";
42
42
  import "../../../chunk-E4EXM4SY.js";
43
43
  import "../../../chunk-JSGRNWSB.js";
44
- import "../../../chunk-CLU2FRJZ.js";
45
44
  import "../../../chunk-CIGAQ47A.js";
46
45
  export {
47
46
  Article,
@@ -23,7 +23,10 @@ declare enum TokenSize {
23
23
  Small = "Small"
24
24
  }
25
25
  declare const getTypography: (customFontFamilies?: FontFamilies) => {
26
- fontFamilies: FontFamilies;
26
+ fontFamilies: {
27
+ main: string;
28
+ code: string;
29
+ };
27
30
  lineHeights: {
28
31
  UmaDocs: {
29
32
  "5xl": string;
@@ -23,7 +23,10 @@ declare enum TokenSize {
23
23
  Small = "Small"
24
24
  }
25
25
  declare const getTypography: (customFontFamilies?: FontFamilies) => {
26
- fontFamilies: FontFamilies;
26
+ fontFamilies: {
27
+ main: string;
28
+ code: string;
29
+ };
27
30
  lineHeights: {
28
31
  UmaDocs: {
29
32
  "5xl": string;