@ssa-ui-kit/templates 2.29.0 → 2.30.0

package/dist/index.js

@@ -4073,92 +4073,6 @@ const KeeperRunsWithLoader = ({
     ...props
   })
 });
-;// ./src/projects/fintech/components/MarginInfo/styles.ts
-
-function MarginInfo_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-
-const Table = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt10"
-} : 0)( true ? {
-  name: "b6wrti",
-  styles: "display:flex;flex-direction:column;width:100%"
-} : 0);
-const TableHeader = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt9"
-} : 0)( true ? {
-  name: "261bi6",
-  styles: "display:flex;flex-direction:row;align-items:center;margin-bottom:5px"
-} : 0);
-const HeaderRow = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt8"
-} : 0)( true ? {
-  name: "1cdny4y",
-  styles: "display:flex;flex-direction:row;gap:16px;flex:1;justify-content:flex-start"
-} : 0);
-const HeaderLabel = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt7"
-} : 0)( true ? {
-  name: "82a6rk",
-  styles: "flex:1"
-} : 0);
-const HeaderCell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt6"
-} : 0)("font-size:14px;font-weight:600;color:", ({
-  theme
-}) => theme.colors.greyDarker, ";flex:1;text-align:left;margin-right:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
-const TableBody = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt5"
-} : 0)( true ? {
-  name: "1xc5zxn",
-  styles: "display:flex;flex-direction:column;gap:6px"
-} : 0);
-const TableRow = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt4"
-} : 0)("display:flex;flex-direction:row;align-items:center;background:", ({
-  theme
-}) => theme.colors.greyLighter, ";border-radius:8px;padding:5px 7px;" + ( true ? "" : 0));
-const RowLabel = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt3"
-} : 0)("font-size:13px;font-weight:600;color:", ({
-  theme
-}) => theme.colors.greyDarker, ";flex:1;" + ( true ? "" : 0));
-const RowCells = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt2"
-} : 0)( true ? {
-  name: "z08xak",
-  styles: "display:flex;flex-direction:row;gap:16px;flex:2;justify-content:flex-start"
-} : 0);
-const Cell = /*#__PURE__*/base_default()("div",  true ? {
-  target: "e1squpxt1"
-} : 0)("font-size:13px;font-weight:400;color:", ({
-  theme
-}) => theme.colors.greyDarker, ";flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0));
-const ButtonsWrapper = /*#__PURE__*/base_default()(core_namespaceObject.Wrapper,  true ? {
-  target: "e1squpxt0"
-} : 0)( true ? {
-  name: "1qxwwz4",
-  styles: "display:flex;flex-direction:row;gap:12px;width:100%;margin-top:auto"
-} : 0);
-const baseButtonStyles = theme => /*#__PURE__*/(0,react_namespaceObject.css)("flex:1;display:flex;justify-content:center;height:34px;font-size:14px;font-weight:500;color:", theme.colors.white, ";border:none;border-radius:8px;cursor:pointer;&:disabled{background:", theme.colors.grey, ";cursor:not-allowed;}&>span,&>*{color:inherit;}" + ( true ? "" : 0),  true ? "" : 0);
-const BorrowButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseButtonStyles(theme), ";background:linear-gradient(\n    247deg,\n    ", theme.colors.blueLighter, " 14.71%,\n    ", theme.colors.blue, " 85.29%\n  );&:hover{background:linear-gradient(\n      247deg,\n      ", theme.colors.blueButtonHoverGradientFrom, " 14.71%,\n      ", theme.colors.blueButtonHoverGradientTo, " 85.29%\n    );box-shadow:0 4px 12px ", theme.colors.blueLighter40, ";}&:active{background:", theme.colors.blueButtonActive, ";}" + ( true ? "" : 0),  true ? "" : 0);
-const RepayButton = theme => /*#__PURE__*/(0,react_namespaceObject.css)(baseButtonStyles(theme), ";background:linear-gradient(\n    99.26deg,\n    ", theme.colors.green, " -7.01%,\n    ", theme.colors.greenLighter, " 92.87%\n  );&:hover{background:linear-gradient(\n      99.26deg,\n      ", theme.colors.greenDark, " -7.01%,\n      ", theme.colors.green, " 92.87%\n    );box-shadow:0 4px 12px ", theme.colors.green40, ";}&:active{background:", theme.colors.greenDark, ";}" + ( true ? "" : 0),  true ? "" : 0);
-const widgetCardStyles =  true ? {
-  name: "1fx6k7",
-  styles: "grid-area:margin-info"
-} : 0;
-const wrapperStyles =  true ? {
-  name: "1fx6k7",
-  styles: "grid-area:margin-info"
-} : 0;
-const headerStyles =  true ? {
-  name: "1ykowef",
-  styles: "margin-bottom:0"
-} : 0;
-const contentStyles =  true ? {
-  name: "4rbiyk",
-  styles: "display:flex;flex-direction:column;max-width:initial;height:100%"
-} : 0;
 ;// ./src/projects/fintech/components/MarginInfo/MarginInfo.tsx
 function MarginInfo_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
@@ -4166,112 +4080,46 @@ function MarginInfo_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to
 
 
 
-
-const MarginInfo = ({
+var MarginInfo_ref =  true ? {
+  name: "1fx6k7",
+  styles: "grid-area:margin-info"
+} : 0;
+const MarginInfoWithLoader = ({
+  isFetching,
   multiplier,
-  base,
-  quote,
-  baseBorrowed,
-  baseInterestRate,
-  baseTotalInterest,
-  quoteBorrowed,
-  quoteInterestRate,
-  quoteTotalInterest,
-  showInterestRate = false,
-  disableBorrow = false,
-  disableRepay = false,
-  onBorrow,
-  onRepay
+  ...props
 }) => {
+  const theme = (0,react_namespaceObject.useTheme)();
   const {
     t
   } = useTranslation();
-  const theme = (0,react_namespaceObject.useTheme)();
-  const title = multiplier ? `${t('marginInfo.title')} (x${multiplier})` : t('marginInfo.title');
-  return (0,jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ClassNames, {
-    children: ({
-      css
-    }) => (0,jsx_runtime_namespaceObject.jsxs)(WidgetCard, {
-      title: title,
-      css: widgetCardStyles,
-      wrapperClassName: css(wrapperStyles),
-      headerClassName: css(headerStyles),
-      contentClassName: css(contentStyles),
-      children: [(0,jsx_runtime_namespaceObject.jsxs)(Table, {
-        children: [(0,jsx_runtime_namespaceObject.jsx)(TableHeader, {
-          children: (0,jsx_runtime_namespaceObject.jsxs)(HeaderRow, {
-            children: [(0,jsx_runtime_namespaceObject.jsx)(HeaderLabel, {}), (0,jsx_runtime_namespaceObject.jsx)(HeaderCell, {
-              children: base
-            }), (0,jsx_runtime_namespaceObject.jsx)(HeaderCell, {
-              children: quote
-            })]
+  const baseTitle = t('marginInfo.title');
+  const title = multiplier ? `${baseTitle} (x${multiplier})` : baseTitle;
+  return (0,jsx_runtime_namespaceObject.jsx)(WithWidgetLoader, {
+    title: 'marginInfo.title',
+    css: MarginInfo_ref,
+    isFetching: isFetching,
+    children: (0,jsx_runtime_namespaceObject.jsx)(react_namespaceObject.ClassNames, {
+      children: ({
+        css
+      }) => (0,jsx_runtime_namespaceObject.jsx)("div", {
+        css: css({
+          gridArea: 'margin-info'
+        }),
+        children: (0,jsx_runtime_namespaceObject.jsx)(widgets_namespaceObject.MarginInfo, {
+          ...props,
+          title: title,
+          headerClassName: css({
+            marginBottom: 0,
+            [theme.mediaQueries.md]: {
+              marginBottom: '0'
+            }
           })
-        }), (0,jsx_runtime_namespaceObject.jsxs)(TableBody, {
-          children: [(0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
-            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
-              children: "Borrowed"
-            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
-              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: baseBorrowed
-              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: quoteBorrowed
-              })]
-            })]
-          }), showInterestRate && (0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
-            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
-              children: "Interest Rate"
-            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
-              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: baseInterestRate
-              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: quoteInterestRate
-              })]
-            })]
-          }), (0,jsx_runtime_namespaceObject.jsxs)(TableRow, {
-            children: [(0,jsx_runtime_namespaceObject.jsx)(RowLabel, {
-              children: "Total Interest"
-            }), (0,jsx_runtime_namespaceObject.jsxs)(RowCells, {
-              children: [(0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: baseTotalInterest
-              }), (0,jsx_runtime_namespaceObject.jsx)(Cell, {
-                children: quoteTotalInterest
-              })]
-            })]
-          })]
-        })]
-      }), (0,jsx_runtime_namespaceObject.jsxs)(ButtonsWrapper, {
-        children: [(0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
-          variant: "custom",
-          css: BorrowButton(theme),
-          onClick: onBorrow,
-          isDisabled: disableBorrow || !onBorrow,
-          text: "Borrow"
-        }), (0,jsx_runtime_namespaceObject.jsx)(core_namespaceObject.Button, {
-          variant: "custom",
-          css: RepayButton(theme),
-          onClick: onRepay,
-          isDisabled: disableRepay || !onRepay,
-          text: "Repay"
-        })]
-      })]
+        })
+      })
     })
   });
 };
-var MarginInfo_ref =  true ? {
-  name: "1fx6k7",
-  styles: "grid-area:margin-info"
-} : 0;
-const MarginInfoWithLoader = ({
-  isFetching,
-  ...props
-}) => (0,jsx_runtime_namespaceObject.jsx)(WithWidgetLoader, {
-  title: 'marginInfo.title',
-  css: MarginInfo_ref,
-  isFetching: isFetching,
-  children: (0,jsx_runtime_namespaceObject.jsx)(MarginInfo, {
-    ...props
-  })
-});
 ;// ./src/projects/fintech/pages/BotPage/components/InformationTab/styles.ts
 
 const infoCardWrapper = theme => /*#__PURE__*/(0,react_namespaceObject.css)("position:relative;display:flex;flex-direction:column;align-items:flex-start;width:max-content;min-width:100%;background:", theme.colors.greyLighter, ";padding:4px 10px;border-radius:6px;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:none;user-select:none;&::before{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;box-shadow:0 10px 40px 0 ", theme.colors.greyShadow, ";content:'';}&:active{background:", theme.colors.white, ";&::before{border-radius:6px;box-shadow:0 10px 40px 0 ", theme.colors.greyShadow24, ";}}" + ( true ? "" : 0),  true ? "" : 0);