@deframe-sdk/components 0.1.14 → 0.1.15

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/index.d.mts +9 -5
  2. package/dist/index.d.ts +9 -5
  3. package/dist/index.js +72 -34
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +72 -34
  6. package/dist/index.mjs.map +1 -1
  7. package/dist/styles.css +58 -114
  8. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -236,10 +236,6 @@ declare function Link({ children, href, className, target, disabled, prefetch: _
236
236
  */
237
237
  declare function Title({ variant, className, ...props }: TextHeadingProps): react_jsx_runtime.JSX.Element;
238
238
 
239
- interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
240
- as?: keyof React$1.JSX.IntrinsicElements;
241
- variantClass?: string;
242
- }
243
239
  /**
244
240
  * Base Text component used internally by other text variants.
245
241
  * Handles tag selection, base font, and class merging.
@@ -249,14 +245,22 @@ declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAtt
249
245
  interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
250
246
  variant?: 'accent-large' | 'accent-medium' | 'accent-small';
251
247
  as?: keyof React$1.JSX.IntrinsicElements;
248
+ disabled?: boolean;
252
249
  }
253
250
  interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
254
- variant?: '[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]' | '[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]' | '[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]' | 'text-large' | 'text-medium' | 'text-small';
251
+ variant?: 'text-large' | 'text-medium' | 'text-small';
255
252
  as?: keyof React$1.JSX.IntrinsicElements;
253
+ disabled?: boolean;
256
254
  }
257
255
  interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
258
256
  variant?: 'h-large' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
259
257
  as?: keyof React$1.JSX.IntrinsicElements;
258
+ disabled?: boolean;
259
+ }
260
+ interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
261
+ as?: keyof React$1.JSX.IntrinsicElements;
262
+ variantClass?: string;
263
+ disabled?: boolean;
260
264
  }
261
265
  interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
262
266
  href: string;
package/dist/index.d.ts CHANGED
@@ -236,10 +236,6 @@ declare function Link({ children, href, className, target, disabled, prefetch: _
236
236
  */
237
237
  declare function Title({ variant, className, ...props }: TextHeadingProps): react_jsx_runtime.JSX.Element;
238
238
 
239
- interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
240
- as?: keyof React$1.JSX.IntrinsicElements;
241
- variantClass?: string;
242
- }
243
239
  /**
244
240
  * Base Text component used internally by other text variants.
245
241
  * Handles tag selection, base font, and class merging.
@@ -249,14 +245,22 @@ declare const Text: React$1.ForwardRefExoticComponent<TextProps & React$1.RefAtt
249
245
  interface TextAccentProps extends React$1.HTMLAttributes<HTMLElement> {
250
246
  variant?: 'accent-large' | 'accent-medium' | 'accent-small';
251
247
  as?: keyof React$1.JSX.IntrinsicElements;
248
+ disabled?: boolean;
252
249
  }
253
250
  interface TextBodyProps extends React$1.HTMLAttributes<HTMLElement> {
254
- variant?: '[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]' | '[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]' | '[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]' | 'text-large' | 'text-medium' | 'text-small';
251
+ variant?: 'text-large' | 'text-medium' | 'text-small';
255
252
  as?: keyof React$1.JSX.IntrinsicElements;
253
+ disabled?: boolean;
256
254
  }
257
255
  interface TextHeadingProps extends React$1.HTMLAttributes<HTMLElement> {
258
256
  variant?: 'h-large' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
259
257
  as?: keyof React$1.JSX.IntrinsicElements;
258
+ disabled?: boolean;
259
+ }
260
+ interface TextProps extends React$1.HTMLAttributes<HTMLElement> {
261
+ as?: keyof React$1.JSX.IntrinsicElements;
262
+ variantClass?: string;
263
+ disabled?: boolean;
260
264
  }
261
265
  interface LinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
262
266
  href: string;
package/dist/index.js CHANGED
@@ -189,14 +189,14 @@ function PrimaryButton(_a) {
189
189
  /** enabled state */
190
190
  enabled: [
191
191
  "hover:opacity-90",
192
- "text-[var(--deframe-widget-color-text-primary)]",
192
+ "text-[color:var(--deframe-widget-color-text-inverse)]",
193
193
  "bg-[var(--deframe-widget-color-brand-primary)]",
194
194
  "border-[color:var(--deframe-widget-color-border-primary)]",
195
195
  "cursor-pointer"
196
196
  ].join(" "),
197
197
  /** disabled state */
198
198
  disabled: [
199
- "text-[var(--deframe-widget-color-text-primary-disabled)]",
199
+ "text-[color:var(--deframe-widget-color-text-inverse-disabled)]",
200
200
  "bg-[var(--deframe-widget-color-brand-primary-disabled)]",
201
201
  "border-[color:var(--deframe-widget-color-border-primary-disabled)]",
202
202
  "cursor-not-allowed"
@@ -252,7 +252,7 @@ function SecondaryButton(_a) {
252
252
  ].join(" ");
253
253
  const stateClasses = {
254
254
  enabled: [
255
- "text-[color:var(--deframe-widget-color-brand-secondary)]",
255
+ "text-[color:var(--deframe-widget-color-text-secondary)]",
256
256
  "border-[color:var(--deframe-widget-color-border-secondary)]",
257
257
  "hover:opacity-90",
258
258
  "cursor-pointer"
@@ -312,7 +312,7 @@ function TertiaryButton(_a) {
312
312
  ].join(" ");
313
313
  const stateClasses = {
314
314
  enabled: [
315
- "text-[color:var(--deframe-widget-color-brand-tertiary)]",
315
+ "text-[color:var(--deframe-widget-color-text-tertiary)]",
316
316
  "hover:opacity-90",
317
317
  "cursor-pointer"
318
318
  ].join(" "),
@@ -439,12 +439,12 @@ function Link(_a) {
439
439
  ].join(" ");
440
440
  const stateClasses = {
441
441
  enabled: [
442
- "text-[color:var(--deframe-widget-color-brand-primary)]",
442
+ "text-[color:var(--deframe-widget-color-text-highlight)]",
443
443
  "underline",
444
444
  "cursor-pointer"
445
445
  ].join(" "),
446
446
  disabled: [
447
- "text-[var(--deframe-widget-color-brand-primary-disabled)]",
447
+ "text-[color:var(--deframe-widget-color-text-highlight-disabled)]",
448
448
  "cursor-not-allowed",
449
449
  "pointer-events-none"
450
450
  ].join(" ")
@@ -906,25 +906,35 @@ var Text = React6__namespace.forwardRef(
906
906
  var _b = _a, {
907
907
  children,
908
908
  as: Component = "p",
909
+ disabled = false,
909
910
  className = ""
910
911
  } = _b, props = __objRest(_b, [
911
912
  "children",
912
913
  "as",
914
+ "disabled",
913
915
  "className"
914
916
  ]);
915
917
  const baseClasses = [
916
918
  "[font-family:var(--deframe-widget-font-family)]",
917
919
  "[font-size:var(--deframe-widget-font-size-md)]",
918
920
  "[line-height:var(--deframe-widget-font-leading-md)]",
919
- "[font-weight:var(--deframe-widget-font-weight-regular)]",
920
- "text-[color:var(--deframe-widget-color-text-primary)]"
921
+ "[font-weight:var(--deframe-widget-font-weight-regular)]"
921
922
  ].join(" ");
922
- const textClasses = tailwindMerge.twMerge(baseClasses, className);
923
+ const stateClasses = {
924
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
925
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
926
+ };
927
+ const textClasses = tailwindMerge.twMerge(
928
+ baseClasses,
929
+ stateClasses[disabled ? "disabled" : "enabled"],
930
+ className
931
+ );
923
932
  return React6__namespace.createElement(
924
933
  Component,
925
934
  __spreadValues({
926
935
  ref,
927
- className: textClasses
936
+ className: textClasses,
937
+ "aria-disabled": disabled || void 0
928
938
  }, props),
929
939
  children
930
940
  );
@@ -937,10 +947,12 @@ var TextAccent = React6__namespace.forwardRef(
937
947
  var _b = _a, {
938
948
  as = "span",
939
949
  variant = "accent-medium",
950
+ disabled = false,
940
951
  className = ""
941
952
  } = _b, props = __objRest(_b, [
942
953
  "as",
943
954
  "variant",
955
+ "disabled",
944
956
  "className"
945
957
  ]);
946
958
  const accentVariants = {
@@ -960,8 +972,16 @@ var TextAccent = React6__namespace.forwardRef(
960
972
  "[font-weight:var(--deframe-widget-font-weight-semibold)]"
961
973
  ].join(" ")
962
974
  };
975
+ const stateClasses = {
976
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
977
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
978
+ };
963
979
  const variantClass = accentVariants[variant];
964
- const accentClasses = tailwindMerge.twMerge(variantClass, className);
980
+ const accentClasses = tailwindMerge.twMerge(
981
+ variantClass,
982
+ stateClasses[disabled ? "disabled" : "enabled"],
983
+ className
984
+ );
965
985
  return /* @__PURE__ */ jsxRuntime.jsx(
966
986
  Text_default,
967
987
  __spreadValues({
@@ -969,7 +989,8 @@ var TextAccent = React6__namespace.forwardRef(
969
989
  as,
970
990
  className: accentClasses,
971
991
  "data-slot": "text-accent",
972
- "data-test-id": "text-accent"
992
+ "data-test-id": "text-accent",
993
+ "aria-disabled": disabled || void 0
973
994
  }, props)
974
995
  );
975
996
  }
@@ -980,18 +1001,15 @@ var TextBody = React6__namespace.forwardRef(
980
1001
  var _b = _a, {
981
1002
  as = "p",
982
1003
  variant = "text-medium",
1004
+ disabled = false,
983
1005
  className = ""
984
1006
  } = _b, props = __objRest(_b, [
985
1007
  "as",
986
1008
  "variant",
1009
+ "disabled",
987
1010
  "className"
988
1011
  ]);
989
1012
  const bodyVariants = {
990
- "[font-size:var(--deframe-widget-font-size-lg)] [line-height:var(--deframe-widget-font-leading-lg)]": [
991
- "[font-size:var(--deframe-widget-font-size-lg)]",
992
- "[line-height:var(--deframe-widget-font-leading-lg)]",
993
- "[font-weight:var(--deframe-widget-font-weight-regular)]"
994
- ].join(" "),
995
1013
  "text-large": [
996
1014
  "[font-size:var(--deframe-widget-font-size-lg)]",
997
1015
  "[line-height:var(--deframe-widget-font-leading-lg)]",
@@ -1008,8 +1026,16 @@ var TextBody = React6__namespace.forwardRef(
1008
1026
  "[font-weight:var(--deframe-widget-font-weight-regular)]"
1009
1027
  ].join(" ")
1010
1028
  };
1029
+ const stateClasses = {
1030
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1031
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1032
+ };
1011
1033
  const variantClass = bodyVariants[variant];
1012
- const bodyClasses = tailwindMerge.twMerge(variantClass, className);
1034
+ const bodyClasses = tailwindMerge.twMerge(
1035
+ variantClass,
1036
+ stateClasses[disabled ? "disabled" : "enabled"],
1037
+ className
1038
+ );
1013
1039
  return /* @__PURE__ */ jsxRuntime.jsx(
1014
1040
  Text_default,
1015
1041
  __spreadValues({
@@ -1017,7 +1043,8 @@ var TextBody = React6__namespace.forwardRef(
1017
1043
  as,
1018
1044
  className: bodyClasses,
1019
1045
  "data-slot": "text-body",
1020
- "data-test-id": "text-body"
1046
+ "data-test-id": "text-body",
1047
+ "aria-disabled": disabled || void 0
1021
1048
  }, props)
1022
1049
  );
1023
1050
  }
@@ -1028,10 +1055,12 @@ var TextHeading = React6__namespace.forwardRef(
1028
1055
  var _b = _a, {
1029
1056
  as,
1030
1057
  variant = "h2",
1058
+ disabled = false,
1031
1059
  className = ""
1032
1060
  } = _b, props = __objRest(_b, [
1033
1061
  "as",
1034
1062
  "variant",
1063
+ "disabled",
1035
1064
  "className"
1036
1065
  ]);
1037
1066
  const headingVariants = {
@@ -1066,8 +1095,16 @@ var TextHeading = React6__namespace.forwardRef(
1066
1095
  "[font-weight:var(--deframe-widget-font-weight-bold)]"
1067
1096
  ].join(" ")
1068
1097
  };
1098
+ const stateClasses = {
1099
+ enabled: "text-[color:var(--deframe-widget-color-text-primary)]",
1100
+ disabled: "text-[color:var(--deframe-widget-color-text-primary-disabled)]"
1101
+ };
1069
1102
  const variantClass = headingVariants[variant];
1070
- const headingClasses = tailwindMerge.twMerge(variantClass, className);
1103
+ const headingClasses = tailwindMerge.twMerge(
1104
+ variantClass,
1105
+ stateClasses[disabled ? "disabled" : "enabled"],
1106
+ className
1107
+ );
1071
1108
  return /* @__PURE__ */ jsxRuntime.jsx(
1072
1109
  Text_default,
1073
1110
  __spreadValues({
@@ -1075,7 +1112,8 @@ var TextHeading = React6__namespace.forwardRef(
1075
1112
  as: variant === "h-large" ? "h1" : variant,
1076
1113
  className: headingClasses,
1077
1114
  "data-slot": "text-heading",
1078
- "data-test-id": "text-heading"
1115
+ "data-test-id": "text-heading",
1116
+ "aria-disabled": disabled || void 0
1079
1117
  }, props)
1080
1118
  );
1081
1119
  }
@@ -1594,7 +1632,7 @@ function BannerNotificationMessage(_a) {
1594
1632
  return /* @__PURE__ */ jsxRuntime.jsx(
1595
1633
  TextBody,
1596
1634
  __spreadValues({
1597
- variant: "[font-size:var(--deframe-widget-font-size-md)] [line-height:var(--deframe-widget-font-leading-md)]",
1635
+ variant: "text-medium",
1598
1636
  "data-slot": "banner-notification-message",
1599
1637
  "data-test-id": "banner-notification-message",
1600
1638
  className: tailwindMerge.twMerge("text-inherit", className)
@@ -1900,7 +1938,7 @@ var SummaryDetails = ({
1900
1938
  /* @__PURE__ */ jsxRuntime.jsx(
1901
1939
  TextBody,
1902
1940
  {
1903
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1941
+ variant: "text-small",
1904
1942
  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-tertiary)]", item.labelClassName),
1905
1943
  children: item.label
1906
1944
  }
@@ -1908,7 +1946,7 @@ var SummaryDetails = ({
1908
1946
  typeof item.value === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
1909
1947
  TextBody,
1910
1948
  {
1911
- variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]",
1949
+ variant: "text-small",
1912
1950
  className: tailwindMerge.twMerge("text-[color:var(--deframe-widget-color-text-primary)] [font-weight:var(--deframe-widget-font-weight-medium)]", item.valueClassName),
1913
1951
  children: item.value
1914
1952
  }
@@ -2604,7 +2642,7 @@ var SwapNetworkSelectorView = ({
2604
2642
  }) => {
2605
2643
  const baseClasses = "flex flex-row items-center gap-[var(--deframe-widget-size-gap-xs)]";
2606
2644
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": testId, className: tailwindMerge.twMerge(baseClasses, className), children: [
2607
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2645
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "tracking-wide text-[color:var(--deframe-widget-color-text-tertiary)]", children: directionLabel }),
2608
2646
  /* @__PURE__ */ jsxRuntime.jsxs(
2609
2647
  "button",
2610
2648
  {
@@ -2629,7 +2667,7 @@ var SwapQuoteHeaderView = ({
2629
2667
  }) => {
2630
2668
  const baseClasses = "border-b border-[color:var(--deframe-widget-color-border-secondary)] pb-[var(--deframe-widget-size-padding-y-sm)]";
2631
2669
  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-quote-header", className: tailwindMerge.twMerge(baseClasses, className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
2632
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2670
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "[font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-secondary)] inline-flex items-center", children: label }),
2633
2671
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-md)]", children: timerElement })
2634
2672
  ] }) });
2635
2673
  };
@@ -2698,7 +2736,7 @@ var SwapOutputAmountView = ({
2698
2736
  className
2699
2737
  }) => {
2700
2738
  const baseClasses = "[font-size:var(--deframe-widget-font-size-xxl)] [line-height:var(--deframe-widget-font-leading-xxl)] [font-weight:var(--deframe-widget-font-weight-extrabold)] text-right w-full min-w-[120px] text-[color:var(--deframe-widget-color-text-primary)]";
2701
- return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2739
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "swap-flow-output-amount", className: tailwindMerge.twMerge(baseClasses, className), children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TextBody, { as: "span", variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary-disabled)] inline-flex items-center", children: loadingElement != null ? loadingElement : searchingQuoteLabel }) : displayOutput });
2702
2740
  };
2703
2741
  var SwapQuoteErrorsView = ({
2704
2742
  hasQuoteError,
@@ -2853,7 +2891,7 @@ var ChooseAStrategyActionsheetView = ({
2853
2891
  /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: assetName, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
2854
2892
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { className: "gap-[var(--deframe-widget-size-gap-xs)]", children: [
2855
2893
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: resolvedYieldLabel }),
2856
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: Badge })
2894
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: Badge })
2857
2895
  ] }),
2858
2896
  /* @__PURE__ */ jsxRuntime.jsx(ListItemRightSide, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-center items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
2859
2897
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[color:var(--deframe-widget-color-state-success)]", children: [
@@ -2888,7 +2926,7 @@ var StrategyDetailsView = ({
2888
2926
  /* @__PURE__ */ jsxRuntime.jsx("img", { "data-test-id": "strategy-logo", src: logoUrl, alt: title, className: "w-20 h-20 rounded-[var(--deframe-widget-size-radius-full)]" }),
2889
2927
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h5", children: title })
2890
2928
  ] }),
2891
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }),
2929
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }),
2892
2930
  /* @__PURE__ */ jsxRuntime.jsx(
2893
2931
  SummaryDetails,
2894
2932
  {
@@ -2981,7 +3019,7 @@ var SearchEmptyState = ({
2981
3019
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 bg-[var(--deframe-widget-color-bg-tertiary)] rounded-[var(--deframe-widget-size-radius-full)] flex justify-center items-center", children: /* @__PURE__ */ jsxRuntime.jsx(md.MdOutlineSearchOff, { className: "w-10 h-10 text-[color:var(--deframe-widget-color-text-tertiary)]" }) }),
2982
3020
  /* @__PURE__ */ jsxRuntime.jsx(TextHeading, { variant: "h3", children: title })
2983
3021
  ] }),
2984
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: description }) })
3022
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-stretch text-center", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: description }) })
2985
3023
  ] }) });
2986
3024
  };
2987
3025
  var CollapsibleSection = ({
@@ -3016,7 +3054,7 @@ var CollapsibleSection = ({
3016
3054
  children: [
3017
3055
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { className: "text-[color:var(--deframe-widget-color-text-primary-dark)] [font-weight:var(--deframe-widget-font-weight-medium)]", children: title }) }),
3018
3056
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
3019
- subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: subtitle }),
3057
+ subtitle && /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: subtitle }),
3020
3058
  /* @__PURE__ */ jsxRuntime.jsx(
3021
3059
  framerMotion.motion.svg,
3022
3060
  {
@@ -4051,7 +4089,7 @@ var ChooseAnAssetSwapView = ({
4051
4089
  ] }),
4052
4090
  searchValue && displayedTokens.length === 0 && !isFetching ? /* @__PURE__ */ jsxRuntime.jsx(SearchEmptyState, { title: labels.searchEmptyTitle, description: labels.searchEmptyDescription }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)] w-full mt-[var(--deframe-widget-size-gap-md)] overflow-y-auto flex-1 min-h-0", children: [
4053
4091
  isFetching && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center items-center w-full py-[var(--deframe-widget-size-padding-y-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-xs)]", children: [
4054
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4092
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-secondary)]", children: labels.searchingText }),
4055
4093
  /* @__PURE__ */ jsxRuntime.jsx(LoadingDots, {})
4056
4094
  ] }) }),
4057
4095
  displayedTokens.map((token, index) => {
@@ -4071,11 +4109,11 @@ var ChooseAnAssetSwapView = ({
4071
4109
  /* @__PURE__ */ jsxRuntime.jsx(ListItemLeftSide, { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: token.logoURI || "", alt: token.name, className: "w-10 h-10 rounded-[var(--deframe-widget-size-radius-full)]" }) }),
4072
4110
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemContent, { children: [
4073
4111
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: token.name }),
4074
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: token.symbol })
4112
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: token.symbol })
4075
4113
  ] }),
4076
4114
  /* @__PURE__ */ jsxRuntime.jsxs(ListItemRightSide, { children: [
4077
4115
  /* @__PURE__ */ jsxRuntime.jsx(TextBody, { children: formattedBalance }),
4078
- /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "[font-size:var(--deframe-widget-font-size-sm)] [line-height:var(--deframe-widget-font-leading-sm)]", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4116
+ /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: formatCurrencyValue(Number(balance == null ? void 0 : balance.amountInUSD) || 0) })
4079
4117
  ] })
4080
4118
  ]
4081
4119
  },