@blocklet/payment-react 1.14.21 → 1.14.23

package/es/payment/summary.js

@@ -1,35 +1,43 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
-import { InfoOutlined } from "@mui/icons-material";
+import { HelpOutline } from "@mui/icons-material";
 import { LoadingButton } from "@mui/lab";
-import { Fade, Grow, Stack, Tooltip, Typography, keyframes } from "@mui/material";
-import { BN, fromTokenToUnit } from "@ocap/util";
+import {
+  Box,
+  Divider,
+  Fade,
+  Grow,
+  Stack,
+  Tooltip,
+  Typography,
+  Collapse,
+  IconButton
+} from "@mui/material";
+import { BN, fromTokenToUnit, fromUnitToToken } from "@ocap/util";
 import { useRequest, useSetState } from "ahooks";
 import noop from "lodash/noop";
 import useBus from "use-bus";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { styled } from "@mui/material/styles";
 import Status from "../components/status.js";
 import api from "../libs/api.js";
 import { formatAmount, formatCheckoutHeadlines, getPriceUintAmountByCurrency } from "../libs/util.js";
 import PaymentAmount from "./amount.js";
 import ProductDonation from "./product-donation.js";
 import ProductItem from "./product-item.js";
-const shake = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-  25% {
-    transform: rotate(2deg);
-  }
-  50% {
-    transform: rotate(0eg);
-  }
-  75% {
-    transform: rotate(-2deg);
-  }
-  100% {
-    transform: rotate(0deg);
-  }
-`;
+import Livemode from "../components/livemode.js";
+import { usePaymentContext } from "../contexts/payment.js";
+import { useMobile } from "../hooks/mobile.js";
+const ExpandMore = styled((props) => {
+  const { expand, ...other } = props;
+  return /* @__PURE__ */ jsx(IconButton, { ...other });
+})(({ theme, expand }) => ({
+  transform: !expand ? "rotate(0deg)" : "rotate(180deg)",
+  marginLeft: "auto",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.shortest
+  })
+}));
 async function fetchCrossSell(id) {
   try {
     const { data } = await api.get(`/api/checkout-sessions/${id}/cross-sell`);
@@ -95,12 +103,18 @@ export default function PaymentSummary({
   ...rest
 }) {
   const { t, locale } = useLocaleContext();
-  const [state, setState] = useSetState({ loading: false, shake: false });
+  const { isMobile } = useMobile();
+  const settings = usePaymentContext();
+  const [state, setState] = useSetState({ loading: false, shake: false, expanded: items?.length < 3 });
   const { data, runAsync } = useRequest(
     () => checkoutSessionId ? fetchCrossSell(checkoutSessionId) : Promise.resolve(null)
   );
   const headlines = formatCheckoutHeadlines(items, currency, trialInDays, locale);
   const staking = showStaking ? getStakingSetup(items, currency, billingThreshold) : "0";
+  const totalAmount = fromUnitToToken(
+    new BN(fromTokenToUnit(headlines.actualAmount, currency?.decimal)).add(new BN(staking)).toString(),
+    currency?.decimal
+  );
   useBus(
     "error.REQUIRE_CROSS_SELL",
     () => {
@@ -141,124 +155,180 @@ export default function PaymentSummary({
       setState({ loading: false });
     }
   };
+  const ProductCardList = /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: "cko-product-list",
+      sx: {
+        flex: "0 1 auto",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
+          (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
+            ProductDonation,
+            {
+              item: x,
+              settings: donationSettings,
+              onChange: onChangeAmount,
+              currency
+            },
+            `${x.price_id}-${currency.id}`
+          ) : /* @__PURE__ */ jsx(
+            ProductItem,
+            {
+              item: x,
+              items,
+              trialInDays,
+              currency,
+              onUpsell: handleUpsell,
+              onDownsell: handleDownsell,
+              children: x.cross_sell && /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
+                /* @__PURE__ */ jsx(Typography, {}),
+                /* @__PURE__ */ jsx(
+                  LoadingButton,
+                  {
+                    size: "small",
+                    loadingPosition: "end",
+                    color: "error",
+                    variant: "text",
+                    loading: state.loading,
+                    onClick: handleCancelCrossSell,
+                    children: t("payment.checkout.cross_sell.remove")
+                  }
+                )
+              ] })
+            },
+            `${x.price_id}-${currency.id}`
+          )
+        ) }),
+        data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsx(Stack, { mt: 1, children: /* @__PURE__ */ jsx(
+          ProductItem,
+          {
+            item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
+            items,
+            trialInDays,
+            currency,
+            onUpsell: noop,
+            onDownsell: noop,
+            children: /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
+              /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
+              /* @__PURE__ */ jsx(
+                LoadingButton,
+                {
+                  size: "small",
+                  loadingPosition: "end",
+                  color: crossSellBehavior === "required" ? "info" : "info",
+                  variant: crossSellBehavior === "required" ? "text" : "text",
+                  loading: state.loading,
+                  onClick: handleApplyCrossSell,
+                  children: t("payment.checkout.cross_sell.add")
+                }
+              )
+            ] })
+          }
+        ) }) })
+      ]
+    }
+  );
   return /* @__PURE__ */ jsx(Fade, { in: true, children: /* @__PURE__ */ jsxs(Stack, { className: "cko-product", direction: "column", ...rest, children: [
-    /* @__PURE__ */ jsxs(Stack, { className: "cko-product-summary", direction: "column", alignItems: "flex-start", sx: { mb: { xs: 1, sm: 3 } }, children: [
+    /* @__PURE__ */ jsxs(Box, { display: "flex", alignItems: "center", sx: { mb: 2.5 }, children: [
       /* @__PURE__ */ jsx(
         Typography,
         {
-          className: "cko-ellipsis",
-          component: "div",
-          title: action || headlines.action,
-          sx: { fontWeight: 500, fontSize: "1.15rem", color: "text.secondary" },
-          children: action || headlines.action
+          title: t("payment.checkout.orderSummary"),
+          sx: {
+            color: "text.primary",
+            fontSize: {
+              xs: "18px",
+              md: "24px"
+            },
+            fontWeight: "700",
+            lineHeight: "32px"
+          },
+          children: action || t("payment.checkout.orderSummary")
         }
       ),
-      /* @__PURE__ */ jsx(PaymentAmount, { amount: headlines.amount }),
-      headlines.then && /* @__PURE__ */ jsx(Typography, { component: "div", sx: { fontSize: "0.9rem", color: "text.secondary" }, children: headlines.then })
+      !settings.livemode && /* @__PURE__ */ jsx(Livemode, {})
     ] }),
-    /* @__PURE__ */ jsx(Stack, { spacing: { xs: 1, sm: 2 }, children: items.map(
-      (x) => x.price.custom_unit_amount && onChangeAmount && donationSettings ? /* @__PURE__ */ jsx(
-        ProductDonation,
-        {
-          item: x,
-          settings: donationSettings,
-          onChange: onChangeAmount,
-          currency
-        },
-        `${x.price_id}-${currency.id}`
-      ) : /* @__PURE__ */ jsx(
-        ProductItem,
+    isMobile ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        Stack,
         {
-          item: x,
-          items,
-          trialInDays,
-          currency,
-          onUpsell: handleUpsell,
-          onDownsell: handleDownsell,
-          children: x.cross_sell && /* @__PURE__ */ jsx(
-            LoadingButton,
+          justifyContent: "space-between",
+          flexDirection: "row",
+          alignItems: "center",
+          mb: 1.5,
+          onClick: () => setState({ expanded: !state.expanded }),
+          children: [
+            /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.productListTotal", { total: items.length }) }),
+            /* @__PURE__ */ jsx(ExpandMore, { expand: state.expanded, "aria-expanded": state.expanded, "aria-label": "show more", children: /* @__PURE__ */ jsx(ExpandMoreIcon, {}) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(Collapse, { in: state.expanded || !isMobile, timeout: "auto", unmountOnExit: true, children: ProductCardList })
+    ] }) : ProductCardList,
+    /* @__PURE__ */ jsx(Divider, { sx: { mt: 2.5, mb: 2.5 } }),
+    staking > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.paymentRequired") }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
             {
-              size: "small",
-              loadingPosition: "end",
-              color: "error",
-              variant: "text",
-              loading: state.loading,
-              onClick: handleCancelCrossSell,
-              children: t("payment.checkout.cross_sell.remove")
+              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.stakingConfirm") }),
+              placement: "top",
+              sx: { maxWidth: "150px" },
+              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
             }
           )
-        },
-        `${x.price_id}-${currency.id}`
-      )
-    ) }),
-    data && items.some((x) => x.price_id === data.id) === false && /* @__PURE__ */ jsx(Grow, { in: true, children: /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        direction: "column",
-        alignItems: "flex-end",
-        spacing: 0.5,
-        sx: {
-          border: "1px solid #eee",
-          borderRadius: 1,
-          padding: 1,
-          animation: state.shake ? `${shake} 0.2s 5 ease-in-out` : "none",
-          mt: { xs: 1, sm: 2 }
-        },
-        children: [
+        ] }),
+        /* @__PURE__ */ jsx(Typography, { children: headlines.amount })
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
+          /* @__PURE__ */ jsx(Typography, { sx: { color: "text.secondary" }, children: t("payment.checkout.staking.title") }),
           /* @__PURE__ */ jsx(
-            ProductItem,
+            Tooltip,
             {
-              item: { quantity: 1, price: data, price_id: data.id, cross_sell: true },
-              items,
-              trialInDays,
-              currency,
-              onUpsell: noop,
-              onDownsell: noop
+              title: /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.staking.tooltip") }),
+              placement: "top",
+              sx: { maxWidth: "150px" },
+              children: /* @__PURE__ */ jsx(HelpOutline, { fontSize: "small", sx: { color: "text.lighter" } })
             }
-          ),
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", sx: { width: 1 }, children: [
-            /* @__PURE__ */ jsx(Typography, { children: crossSellBehavior === "required" && /* @__PURE__ */ jsx(Status, { label: t("payment.checkout.required"), color: "info", variant: "outlined", sx: { mr: 1 } }) }),
-            /* @__PURE__ */ jsx(
-              LoadingButton,
-              {
-                size: "small",
-                loadingPosition: "end",
-                color: crossSellBehavior === "required" ? "info" : "info",
-                variant: crossSellBehavior === "required" ? "text" : "text",
-                loading: state.loading,
-                onClick: handleApplyCrossSell,
-                children: t("payment.checkout.cross_sell.add")
-              }
-            )
-          ] })
-        ]
-      }
-    ) }),
-    staking > 0 && /* @__PURE__ */ jsxs(
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Typography, { children: [
+          formatAmount(staking, currency.decimal),
+          " ",
+          currency.symbol
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
       Stack,
       {
-        direction: "row",
+        display: "flex",
         justifyContent: "space-between",
+        flexDirection: "row",
         alignItems: "center",
-        spacing: 1,
-        sx: {
-          border: "1px solid #eee",
-          borderRadius: 1,
-          padding: 1,
-          mt: { xs: 1, sm: 2 }
-        },
+        sx: { width: "100%" },
         children: [
-          /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 0.5, children: [
-            /* @__PURE__ */ jsx(Typography, { children: t("payment.checkout.staking.title") }),
-            /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.staking.tooltip"), placement: "top", sx: { maxWidth: "150px" }, children: /* @__PURE__ */ jsx(InfoOutlined, { fontSize: "small", sx: { color: "text.secondary" } }) })
+          /* @__PURE__ */ jsxs(Box, { className: "base-label", children: [
+            t("common.total"),
+            " "
           ] }),
-          /* @__PURE__ */ jsxs(Typography, { children: [
-            formatAmount(staking, currency.decimal),
-            " ",
-            currency.symbol
-          ] })
+          /* @__PURE__ */ jsx(PaymentAmount, { amount: `${totalAmount} ${currency.symbol}`, sx: { fontSize: "16px" } })
         ]
       }
+    ),
+    headlines.then && headlines.showThen && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        component: "div",
+        sx: { fontSize: "0.9rem", color: "text.lighter", textAlign: "right", margin: "-2px 0 8px" },
+        children: headlines.then
+      }
     )
   ] }) });
 }

package/es/theme/index.css

@@ -0,0 +1,240 @@
+:root {
+  /* Light Theme */
+  /* Color */
+  --backgrounds-bg-base: #ffffff;
+  --backgrounds-bg-base-hover: #f9fafb;
+  --backgrounds-bg-base-pressed: #f3f4f6;
+  --backgrounds-bg-component: #f1f3f5;
+  --backgrounds-bg-component-hover: #e5e7eb;
+  --backgrounds-bg-disabled: #f3f4f6;
+  --backgrounds-bg-field: #f9fafb;
+  --backgrounds-bg-field-hover: #f3f4f6;
+  --backgrounds-bg-glass: #ffffffb8;
+  --backgrounds-bg-highlight: #eff6ff;
+  --backgrounds-bg-highlight-hover: #dbeafe;
+  --backgrounds-bg-interactive: #3b82f6;
+  --backgrounds-bg-interactive-hover: #2563eb;
+  --backgrounds-bg-overlay: #03071266;
+  --backgrounds-bg-subtle: #f9fafb;
+  --backgrounds-bg-subtle-hover: #f3f4f6;
+  --backgrounds-bg-subtle-pressed: #e5e7eb;
+  --backgrounds-bg-switch-off: #e5e7eb;
+  --backgrounds-bg-switch-off-hover: #d1d5db;
+  --buttons-button-danger: #e11d48;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #9f1239;
+  --buttons-button-inverted: #030712;
+  --buttons-button-inverted-hover: #111827;
+  --buttons-button-inverted-pressed: #1f2937;
+  --buttons-button-neutral: #ffffff;
+  --buttons-button-neutral-hover: #f3f4f6;
+  --buttons-button-neutral-pressed: #e5e7eb;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #f3f4f6;
+  --buttons-button-transparent-pressed: #e5e7eb;
+  --foregrounds-fg-base: #030712;
+  --foregrounds-fg-danger: #e11d48;
+  --foregrounds-fg-disabled: #d1d5db;
+  --foregrounds-fg-interactive: #3b82f6;
+  --foregrounds-fg-interactive-hover: #2563eb;
+  --foregrounds-fg-muted: #9ca3af;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #ffffff;
+  --foregrounds-fg-subtle: #4b5563;
+  --others-spacer: #ffffff00;
+  --shadows-card-hover-1: #03071214;
+  --shadows-card-hover-2: #03071214;
+  --shadows-card-hover-3: #0307121a;
+  --shadows-card-rest-1: #03071214;
+  --shadows-card-rest-2: #03071214;
+  --shadows-card-rest-3: #0307120a;
+  --shadows-danger-1: #e11d48;
+  --shadows-error-2: #e11d4826;
+  --shadows-flyout-1: #03071214;
+  --shadows-flyout-2: #03071214;
+  --shadows-interactive-with-active-1: #3b82f6;
+  --shadows-interactive-with-active-2: #3b82f633;
+  --shadows-interactive-with-shadow-1: #1e3a8a80;
+  --shadows-interactive-with-shadow-2: #3b82f6;
+  --shadows-modal-1: #ffffff;
+  --shadows-modal-2: #e5e7eb66;
+  --shadows-modal-3: #03071214;
+  --shadows-modal-4: #03071214;
+  --shadows-modal-5: #03071214;
+  --shadows-switch-background-1: #0307120a;
+  --shadows-switch-background-2: #0307120a;
+  --shadows-switch-background-3: #0307120f;
+  --shadows-switch-background-4: #03071205;
+  --shadows-switch-background-5: #0307120a;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #03071205;
+  --shadows-switch-handle-4: #03071205;
+  --shadows-switch-handle-5: #0307120a;
+  --shadows-switch-handle-6: #0307121f;
+  --shadows-switch-handle-7: #03071214;
+  --shadows-tooltip-1: #03071214;
+  --shadows-tooltip-2: #03071214;
+  --stroke-border-base: #eff1f5;
+  --stroke-border-error: #e11d48;
+  --stroke-border-interactive: #3b82f6;
+  --stroke-border-loud: #030712;
+  --stroke-border-strong: #d1d5db;
+  --stroke-sep: #eff1f5;
+  --tags-tag-blue-bg: #dbeafe;
+  --tags-tag-blue-bg-hover: #bfdbfe;
+  --tags-tag-blue-border: #bfdbfe;
+  --tags-tag-blue-icon: #2563eb;
+  --tags-tag-blue-text: #1d4ed8;
+  --tags-tag-green-bg: #d1fae5;
+  --tags-tag-green-bg-hover: #a7f3d0;
+  --tags-tag-green-border: #a7f3d0;
+  --tags-tag-green-icon: #059669;
+  --tags-tag-green-text: #047857;
+  --tags-tag-neutral-bg: #f3f4f6;
+  --tags-tag-neutral-bg-hover: #e5e7eb;
+  --tags-tag-neutral-border: #e5e7eb;
+  --tags-tag-neutral-icon: #6b7280;
+  --tags-tag-neutral-text: #4b5563;
+  --tags-tag-orange-bg: #fef4c7;
+  --tags-tag-orange-bg-hover: #fde68a;
+  --tags-tag-orange-border: #fde68a;
+  --tags-tag-orange-icon: #d97706;
+  --tags-tag-orange-text: #b45309;
+  --tags-tag-purple-bg: #ede9fe;
+  --tags-tag-purple-bg-hover: #ddd6fe;
+  --tags-tag-purple-border: #ddd6fe;
+  --tags-tag-purple-icon: #7c3aed;
+  --tags-tag-purple-text: #6d28d9;
+  --tags-tag-red-bg: #ffe4e6;
+  --tags-tag-red-bg-hover: #fecdd3;
+  --tags-tag-red-border: #fecdd3;
+  --tags-tag-red-icon: #e11d48;
+  --tags-tag-red-text: #be123c;
+  /* Number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #e5e7eb;
+}
+[data-theme='dark'] {
+  /* Dark Theme */
+  /* Color */
+  --backgrounds-bg-base: #1b1b1f;
+  --backgrounds-bg-base-hover: #27282d;
+  --backgrounds-bg-base-pressed: #2e3035;
+  --backgrounds-bg-component: #27282d;
+  --backgrounds-bg-component-hover: #27282d;
+  --backgrounds-bg-disabled: #27282d;
+  --backgrounds-bg-field: #27282d;
+  --backgrounds-bg-field-hover: #2e3035;
+  --backgrounds-bg-glass: #1b1b1fb8;
+  --backgrounds-bg-highlight: #172554;
+  --backgrounds-bg-highlight-hover: #1e3a8a;
+  --backgrounds-bg-interactive: #60a5fa;
+  --backgrounds-bg-interactive-hover: #60a5fa;
+  --backgrounds-bg-overlay: #18181ab2;
+  --backgrounds-bg-subtle: #18181a;
+  --backgrounds-bg-subtle-hover: #1b1b1f;
+  --backgrounds-bg-subtle-pressed: #27282d;
+  --backgrounds-bg-switch-off: #35373c;
+  --backgrounds-bg-switch-off-hover: #464b50;
+  --buttons-button-danger: #9f1239;
+  --buttons-button-danger-hover: #be123c;
+  --buttons-button-danger-pressed: #e11d48;
+  --buttons-button-inverted: #edeef0;
+  --buttons-button-inverted-hover: #ffffff;
+  --buttons-button-inverted-pressed: #edeef0;
+  --buttons-button-neutral: #27282d;
+  --buttons-button-neutral-hover: #35373c;
+  --buttons-button-neutral-pressed: #3c3f44;
+  --buttons-button-transparent: #ffffff00;
+  --buttons-button-transparent-hover: #27282d;
+  --buttons-button-transparent-pressed: #2e3035;
+  --foregrounds-fg-base: #edeef0;
+  --foregrounds-fg-danger: #fb7185;
+  --foregrounds-fg-disabled: #3c3f44;
+  --foregrounds-fg-interactive: #60a5fa;
+  --foregrounds-fg-interactive-hover: #3b82f6;
+  --foregrounds-fg-muted: #696e77;
+  --foregrounds-fg-on-color: #ffffff;
+  --foregrounds-fg-on-inverted: #0a0a0a;
+  --foregrounds-fg-subtle: #adb1b8;
+  --others-spacer: #ffffff;
+  --shadows-card-hover-1: #ffffff1a;
+  --shadows-card-hover-2: #ffffff29;
+  --shadows-card-hover-3: #00000066;
+  --shadows-card-rest-1: #ffffff1a;
+  --shadows-card-rest-2: #ffffff29;
+  --shadows-card-rest-3: #00000066;
+  --shadows-danger-1: #f43f5e1a;
+  --shadows-error-2: #e11d4840;
+  --shadows-flyout-1: #ffffff1a;
+  --shadows-flyout-2: #00000052;
+  --shadows-interactive-with-active-1: #60a5fa;
+  --shadows-interactive-with-active-2: #3b82f640;
+  --shadows-interactive-with-shadow-1: #dbeafe80;
+  --shadows-interactive-with-shadow-2: #60a5fa;
+  --shadows-modal-1: #171717;
+  --shadows-modal-2: #2e303566;
+  --shadows-modal-3: #ffffff1a;
+  --shadows-modal-4: #00000052;
+  --shadows-modal-5: #00000052;
+  --shadows-switch-background-1: #0000001a;
+  --shadows-switch-background-2: #0000001a;
+  --shadows-switch-background-3: #ffffff29;
+  --shadows-switch-background-4: #0000001a;
+  --shadows-switch-background-5: #00000033;
+  --shadows-switch-handle-1: #ffffff;
+  --shadows-switch-handle-2: #ffffff;
+  --shadows-switch-handle-3: #00000029;
+  --shadows-switch-handle-4: #0000001a;
+  --shadows-switch-handle-5: #0000001a;
+  --shadows-switch-handle-6: #0000001a;
+  --shadows-switch-handle-7: #0000001a;
+  --shadows-tooltip-1: #ffffff1a;
+  --shadows-tooltip-2: #00000052;
+  --stroke-border-base: #2e3035;
+  --stroke-border-error: #f43f5e;
+  --stroke-border-interactive: #60a5fa;
+  --stroke-border-loud: #edeef0;
+  --stroke-border-strong: #35373c;
+  --stroke-sep: #2e3035;
+  --tags-tag-blue-bg: #172554;
+  --tags-tag-blue-bg-hover: #1e2a8a;
+  --tags-tag-blue-border: #1e3a8a;
+  --tags-tag-blue-icon: #1d4ed8;
+  --tags-tag-blue-text: #3b82f6;
+  --tags-tag-green-bg: #022c22;
+  --tags-tag-green-bg-hover: #064e3b;
+  --tags-tag-green-border: #064e3b;
+  --tags-tag-green-icon: #047857;
+  --tags-tag-green-text: #10b981;
+  --tags-tag-neutral-bg: #2e3035;
+  --tags-tag-neutral-bg-hover: #35373c;
+  --tags-tag-neutral-border: #3c3f44;
+  --tags-tag-neutral-icon: #7d828a;
+  --tags-tag-neutral-text: #adb1b8;
+  --tags-tag-orange-bg: #451a03;
+  --tags-tag-orange-bg-hover: #78350f;
+  --tags-tag-orange-border: #78350f;
+  --tags-tag-orange-icon: #b45309;
+  --tags-tag-orange-text: #f59e0b;
+  --tags-tag-purple-bg: #2e1064;
+  --tags-tag-purple-bg-hover: #4c1d95;
+  --tags-tag-purple-border: #3c3f44;
+  --tags-tag-purple-icon: #6d28d9;
+  --tags-tag-purple-text: #8b5cf6;
+  --tags-tag-red-bg: #4c0519;
+  --tags-tag-red-bg-hover: #881337;
+  --tags-tag-red-border: #881337;
+  --tags-tag-red-icon: #f43f5e;
+  --tags-tag-red-text: #ff6369;
+  /* number */
+  --radius-s: 0.25rem;
+  --radius-m: 0.5rem;
+  --radius-l: 0.75rem;
+  --radius-round: 624.9375rem;
+  --stroke-button-secondary-border: #27282d;
+}

package/es/theme/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { typography } from './typography';
+import './index.css';
+import { PaymentThemeOptions } from '../types';
+export { typography };
+export declare function PaymentThemeProvider({ children, theme: customTheme, }: {
+    children: React.ReactNode;
+    theme?: PaymentThemeOptions;
+}): JSX.Element;
+export declare namespace PaymentThemeProvider {
+    var defaultProps: {
+        theme: {};
+    };
+}