@daimo/pay 1.18.2 → 1.19.0

package/build/connectkit/src/components/Common/CircleTimer.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+
+const CircleTimer = ({
+  total,
+  size = 24,
+  stroke = 3,
+  currentTime,
+  onTimeChange,
+  children
+}) => {
+  const [target, setTarget] = useState(
+    Date.now() + (currentTime ?? total) * 1e3
+  );
+  const [left, setLeft] = useState(currentTime ?? total);
+  useEffect(() => {
+    if (currentTime !== void 0) {
+      setTarget(Date.now() + currentTime * 1e3);
+      setLeft(currentTime);
+    }
+  }, [currentTime]);
+  useEffect(() => {
+    const id = setInterval(() => {
+      const secs = Math.max(0, Math.ceil((target - Date.now()) / 1e3));
+      setLeft(secs);
+      onTimeChange?.(secs);
+      if (secs === 0) clearInterval(id);
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [target, onTimeChange]);
+  const ratio = Math.round(left * 100 / total);
+  const radius = Math.floor((size - stroke) / 2);
+  const circumference = Math.round(2 * 314 * radius / 100);
+  const dashoffset = Math.round(circumference * (100 - ratio) / 100);
+  const color = ratio <= 10 ? "var(--timer-red, #D92D20)" : ratio <= 40 ? "var(--timer-orange, #F79009)" : "var(--timer-green, #12D18E)";
+  const center = Math.round(size / 2);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: `0 0 ${size} ${size}`,
+      width: size,
+      height: size,
+      role: "img",
+      "aria-label": `Timer: ${left}s left of ${total}s`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            stroke: "var(--ck-body-background-secondary, #EEE)",
+            strokeWidth: stroke
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: center,
+            cy: center,
+            r: radius,
+            fill: "transparent",
+            stroke: color,
+            strokeWidth: stroke,
+            strokeDasharray: circumference,
+            strokeDashoffset: dashoffset,
+            strokeLinecap: "round",
+            style: { transition: "stroke-dashoffset 1s linear" },
+            transform: `rotate(-90 ${center} ${center})`
+          }
+        ),
+        children && /* @__PURE__ */ jsx("foreignObject", { x: "0", y: "0", width: size, height: size, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              height: "100%"
+            },
+            children
+          }
+        ) })
+      ]
+    }
+  );
+};
+
+export { CircleTimer as default };
+//# sourceMappingURL=CircleTimer.js.map

package/build/connectkit/src/components/Common/CircleTimer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircleTimer.js","sources":["../../../../../src/components/Common/CircleTimer.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useState } from \"react\";\n\n// CircleTimer – compact circular countdown indicator.\n// Mirrors SquareTimer logic but uses a circle SVG path.\n// All maths intentionally integer-based to avoid float precision loss.\n\nexport type CircleTimerProps = {\n  /** Total seconds in the countdown */\n  total: number;\n  /** Diameter (outer) in px – should be an even integer */\n  size?: number;\n  /** Stroke width in px – integer */\n  stroke?: number;\n  /** Externally controlled seconds left */\n  currentTime?: number;\n  /** Fired each second with updated seconds left */\n  onTimeChange?: (seconds: number) => void;\n  /** Child can be placed at the centre (e.g. an icon) */\n  children?: ReactNode;\n};\n\nconst CircleTimer: React.FC<CircleTimerProps> = ({\n  total,\n  size = 24,\n  stroke = 3,\n  currentTime,\n  onTimeChange,\n  children,\n}) => {\n  // timestamp (ms) when timer ends\n  const [target, setTarget] = useState<number>(\n    Date.now() + (currentTime ?? total) * 1000,\n  );\n\n  const [left, setLeft] = useState<number>(currentTime ?? total);\n\n  // react to external currentTime updates\n  useEffect(() => {\n    if (currentTime !== undefined) {\n      setTarget(Date.now() + currentTime * 1000);\n      setLeft(currentTime);\n    }\n  }, [currentTime]);\n\n  // interval tick\n  useEffect(() => {\n    const id = setInterval(() => {\n      const secs = Math.max(0, Math.ceil((target - Date.now()) / 1000));\n      setLeft(secs);\n      onTimeChange?.(secs);\n      if (secs === 0) clearInterval(id);\n    }, 1000);\n    return () => clearInterval(id);\n  }, [target, onTimeChange]);\n\n  const ratio = Math.round((left * 100) / total); // 0-100\n\n  // Ensure stroke stays within viewBox: use floor to be conservative\n  const radius = Math.floor((size - stroke) / 2);\n  const circumference = Math.round((2 * 314 * radius) / 100); // 2πr, π≈3.14\n  const dashoffset = Math.round((circumference * (100 - ratio)) / 100);\n\n  // colour transition: green → orange → red\n  const color =\n    ratio <= 10\n      ? \"var(--timer-red, #D92D20)\"\n      : ratio <= 40\n        ? \"var(--timer-orange, #F79009)\"\n        : \"var(--timer-green, #12D18E)\";\n\n  const center = Math.round(size / 2);\n\n  return (\n    <svg\n      viewBox={`0 0 ${size} ${size}`}\n      width={size}\n      height={size}\n      role=\"img\"\n      aria-label={`Timer: ${left}s left of ${total}s`}\n    >\n      {/* background circle */}\n      <circle\n        cx={center}\n        cy={center}\n        r={radius}\n        fill=\"transparent\"\n        stroke=\"var(--ck-body-background-secondary, #EEE)\"\n        strokeWidth={stroke}\n      />\n      {/* progress circle */}\n      <circle\n        cx={center}\n        cy={center}\n        r={radius}\n        fill=\"transparent\"\n        stroke={color}\n        strokeWidth={stroke}\n        strokeDasharray={circumference}\n        strokeDashoffset={dashoffset}\n        strokeLinecap=\"round\"\n        style={{ transition: \"stroke-dashoffset 1s linear\" }}\n        transform={`rotate(-90 ${center} ${center})`}\n      />\n      {/* optional child */}\n      {children && (\n        <foreignObject x=\"0\" y=\"0\" width={size} height={size}>\n          <div\n            style={{\n              display: \"flex\",\n              alignItems: \"center\",\n              justifyContent: \"center\",\n              width: \"100%\",\n              height: \"100%\",\n            }}\n          >\n            {children}\n          </div>\n        </foreignObject>\n      )}\n    </svg>\n  );\n};\n\nexport default CircleTimer;\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Common/ConnectorList/index.js

@@ -0,0 +1,120 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ROUTES } from '../../../constants/routes.js';
+import { useConnect } from '../../../hooks/useConnect.js';
+import { useDaimoPay } from '../../../hooks/useDaimoPay.js';
+import useIsMobile from '../../../hooks/useIsMobile.js';
+import { useLastConnector } from '../../../hooks/useLastConnector.js';
+import { usePayContext } from '../../../hooks/usePayContext.js';
+import { detectBrowser, isBaseAccountConnector, isGeminiConnector } from '../../../utils/index.js';
+import { useWallets, WALLET_ID_OTHER_WALLET, WALLET_ID_MOBILE_WALLETS } from '../../../wallets/useWallets.js';
+import { ScrollArea } from '../ScrollArea/index.js';
+import Alert from '../Alert/index.js';
+import { ConnectorsContainer, ConnectorButton, ConnectorIcon, ConnectorLabel, RecentlyUsedTag, SkeletonIcon, SkeletonLabel } from './styles.js';
+
+const ConnectorList = () => {
+  const context = usePayContext();
+  const { isMobile } = useIsMobile();
+  const wallets = useWallets(isMobile);
+  const { lastConnectorId } = useLastConnector();
+  const { paymentState } = useDaimoPay();
+  const walletsToDisplay = context.options?.hideRecentBadge ? wallets : [
+    // move last used wallet to top of list
+    // using .filter and spread to avoid mutating original array order with .sort
+    ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),
+    ...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id)
+  ];
+  const shouldWaitForHydration = isMobile && !context.paymentState.isDepositFlow;
+  const ready = !shouldWaitForHydration || paymentState === "payment_unpaid";
+  return /* @__PURE__ */ jsxs(ScrollArea, { mobileDirection: "horizontal", children: [
+    walletsToDisplay.length === 0 && /* @__PURE__ */ jsx(Alert, { error: true, children: "No connectors found in ConnectKit config." }),
+    !ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((_, idx) => /* @__PURE__ */ jsx(SkeletonConnectorItem, {}, idx)) }),
+    ready && walletsToDisplay.length > 0 && /* @__PURE__ */ jsx(ConnectorsContainer, { $totalResults: walletsToDisplay.length, children: walletsToDisplay.map((wallet) => /* @__PURE__ */ jsx(
+      ConnectorItem,
+      {
+        wallet,
+        isRecent: wallet.id === lastConnectorId
+      },
+      wallet.id
+    )) })
+  ] });
+};
+const ConnectorItem = ({
+  wallet,
+  isRecent
+}) => {
+  const { isMobile } = useIsMobile();
+  const context = usePayContext();
+  const { connect } = useConnect();
+  const redirectToMoreWallets = isMobile && wallet.id === WALLET_ID_OTHER_WALLET;
+  const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;
+  const redirectToWorld = wallet.id === "world";
+  const shouldConnectImmediately = (detectBrowser() === "safari" || detectBrowser() === "ios") && (isBaseAccountConnector(wallet.connector?.id) || isGeminiConnector(wallet.connector?.id));
+  const onClick = () => {
+    const meta = { event: "connector-list-click", walletId: wallet.id };
+    if (wallet.solanaConnectorName && !isMobile) {
+      const supportsEvm = wallet.connector?.name != null;
+      if (supportsEvm) {
+        context.paymentState.setSelectedWallet(wallet);
+        context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);
+        return;
+      } else {
+        context.setSolanaConnector(wallet.solanaConnectorName);
+        context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);
+        return;
+      }
+    }
+    if (redirectToMoreWallets) {
+      context.setRoute(ROUTES.MOBILECONNECTORS, meta);
+    } else if (redirectToMobileWallets) {
+      if (context.paymentState.isDepositFlow) {
+        context.paymentState.setSelectedWallet(wallet);
+        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
+      } else {
+        context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);
+        context.setRoute(ROUTES.CONNECT, meta);
+      }
+    } else if (redirectToWorld) {
+      if (context.paymentState.isDepositFlow) {
+        context.paymentState.setSelectedWallet(wallet);
+        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
+      } else {
+        context.setPendingConnectorId("world");
+        context.setRoute(ROUTES.CONNECT, meta);
+      }
+    } else if (context.paymentState.isDepositFlow && isMobile && !wallet.connector) {
+      context.paymentState.setSelectedWallet(wallet);
+      context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);
+    } else if (isMobile && wallet.getDaimoPayDeeplink != null && !wallet.connector) {
+      context.paymentState.openInWalletBrowser(wallet);
+    } else {
+      if (shouldConnectImmediately) {
+        connect({ connector: wallet.connector });
+      }
+      context.setPendingConnectorId(wallet.id);
+      context.setRoute(ROUTES.CONNECT, meta);
+    }
+  };
+  return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", onClick, children: [
+    /* @__PURE__ */ jsx(
+      ConnectorIcon,
+      {
+        "data-small": wallet.iconShouldShrink,
+        "data-shape": wallet.iconShape,
+        children: wallet.iconConnector ?? wallet.icon
+      }
+    ),
+    /* @__PURE__ */ jsxs(ConnectorLabel, { children: [
+      isMobile ? wallet.shortName ?? wallet.name : wallet.name,
+      !context.options?.hideRecentBadge && isRecent && /* @__PURE__ */ jsx(RecentlyUsedTag, { children: /* @__PURE__ */ jsx("span", { children: "Recent" }) })
+    ] })
+  ] });
+};
+const SkeletonConnectorItem = () => {
+  return /* @__PURE__ */ jsxs(ConnectorButton, { type: "button", disabled: true, children: [
+    /* @__PURE__ */ jsx(SkeletonIcon, {}),
+    /* @__PURE__ */ jsx(SkeletonLabel, {})
+  ] });
+};
+
+export { ConnectorList as default };
+//# sourceMappingURL=index.js.map

package/build/connectkit/src/components/Common/ConnectorList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/ConnectorList/index.tsx"],"sourcesContent":["import { ROUTES } from \"../../../constants/routes\";\nimport { useConnect } from \"../../../hooks/useConnect\";\nimport { useDaimoPay } from \"../../../hooks/useDaimoPay\";\nimport useIsMobile from \"../../../hooks/useIsMobile\";\nimport { useLastConnector } from \"../../../hooks/useLastConnector\";\nimport { usePayContext } from \"../../../hooks/usePayContext\";\nimport {\n  detectBrowser,\n  isBaseAccountConnector,\n  isGeminiConnector,\n} from \"../../../utils\";\nimport {\n  WALLET_ID_MOBILE_WALLETS,\n  WALLET_ID_OTHER_WALLET,\n  WalletProps,\n  useWallets,\n} from \"../../../wallets/useWallets\";\nimport { ScrollArea } from \"../../Common/ScrollArea\";\nimport Alert from \"../Alert\";\nimport {\n  ConnectorButton,\n  ConnectorIcon,\n  ConnectorLabel,\n  ConnectorsContainer,\n  RecentlyUsedTag,\n  SkeletonIcon,\n  SkeletonLabel,\n} from \"./styles\";\n\nconst ConnectorList = () => {\n  const context = usePayContext();\n  const { isMobile } = useIsMobile();\n\n  const wallets = useWallets(isMobile);\n  const { lastConnectorId } = useLastConnector();\n  const { paymentState } = useDaimoPay();\n\n  const walletsToDisplay = context.options?.hideRecentBadge\n    ? wallets\n    : [\n        // move last used wallet to top of list\n        // using .filter and spread to avoid mutating original array order with .sort\n        ...wallets.filter((wallet) => lastConnectorId === wallet.connector?.id),\n        ...wallets.filter((wallet) => lastConnectorId !== wallet.connector?.id),\n      ];\n\n  // For mobile flow, we need to wait for the order to be hydrated before\n  // we can deeplink to the in-wallet browser.\n  const shouldWaitForHydration =\n    isMobile && !context.paymentState.isDepositFlow;\n  const ready = !shouldWaitForHydration || paymentState === \"payment_unpaid\";\n\n  return (\n    <ScrollArea mobileDirection={\"horizontal\"}>\n      {walletsToDisplay.length === 0 && (\n        <Alert error>No connectors found in ConnectKit config.</Alert>\n      )}\n      {!ready && walletsToDisplay.length > 0 && (\n        <ConnectorsContainer $totalResults={walletsToDisplay.length}>\n          {walletsToDisplay.map((_, idx) => (\n            <SkeletonConnectorItem key={idx} />\n          ))}\n        </ConnectorsContainer>\n      )}\n      {ready && walletsToDisplay.length > 0 && (\n        <ConnectorsContainer $totalResults={walletsToDisplay.length}>\n          {walletsToDisplay.map((wallet) => (\n            <ConnectorItem\n              key={wallet.id}\n              wallet={wallet}\n              isRecent={wallet.id === lastConnectorId}\n            />\n          ))}\n        </ConnectorsContainer>\n      )}\n    </ScrollArea>\n  );\n};\n\nexport default ConnectorList;\n\nconst ConnectorItem = ({\n  wallet,\n  isRecent,\n}: {\n  wallet: WalletProps;\n  isRecent?: boolean;\n}) => {\n  const { isMobile } = useIsMobile();\n  const context = usePayContext();\n  const { connect } = useConnect();\n\n  // The \"Other\" 2x2 connector, goes to the MobileConnectors page.\n  const redirectToMoreWallets =\n    isMobile && wallet.id === WALLET_ID_OTHER_WALLET;\n  const redirectToMobileWallets = wallet.id === WALLET_ID_MOBILE_WALLETS;\n  const redirectToWorld = wallet.id === \"world\";\n\n  // Safari requires opening popup on user gesture, so we connect immediately here\n  const shouldConnectImmediately =\n    (detectBrowser() === \"safari\" || detectBrowser() === \"ios\") &&\n    (isBaseAccountConnector(wallet.connector?.id) ||\n      isGeminiConnector(wallet.connector?.id));\n\n  const onClick = () => {\n    const meta = { event: \"connector-list-click\", walletId: wallet.id };\n\n    // Desktop multi-chain wallet flow: prompt for chain selection.\n    if (wallet.solanaConnectorName && !isMobile) {\n      const supportsEvm = wallet.connector?.name != null;\n      if (supportsEvm) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_CHAIN, meta);\n        return;\n      } else {\n        context.setSolanaConnector(wallet.solanaConnectorName);\n        context.setRoute(ROUTES.SOLANA_CONNECTOR, meta);\n        return;\n      }\n    }\n    if (redirectToMoreWallets) {\n      context.setRoute(ROUTES.MOBILECONNECTORS, meta);\n    } else if (redirectToMobileWallets) {\n      if (context.paymentState.isDepositFlow) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n      } else {\n        context.setPendingConnectorId(WALLET_ID_MOBILE_WALLETS);\n        context.setRoute(ROUTES.CONNECT, meta);\n      }\n    } else if (redirectToWorld) {\n      if (context.paymentState.isDepositFlow) {\n        context.paymentState.setSelectedWallet(wallet);\n        context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n      } else {\n        context.setPendingConnectorId(\"world\");\n        context.setRoute(ROUTES.CONNECT, meta);\n      }\n    } else if (\n      context.paymentState.isDepositFlow &&\n      isMobile &&\n      !wallet.connector\n    ) {\n      context.paymentState.setSelectedWallet(wallet);\n      context.setRoute(ROUTES.SELECT_WALLET_AMOUNT, meta);\n    } else if (\n      isMobile &&\n      wallet.getDaimoPayDeeplink != null &&\n      !wallet.connector\n    ) {\n      context.paymentState.openInWalletBrowser(wallet);\n    } else {\n      if (shouldConnectImmediately) {\n        connect({ connector: wallet.connector! });\n      }\n      context.setPendingConnectorId(wallet.id);\n      context.setRoute(ROUTES.CONNECT, meta);\n    }\n  };\n\n  return (\n    <ConnectorButton type=\"button\" onClick={onClick}>\n      <ConnectorIcon\n        data-small={wallet.iconShouldShrink}\n        data-shape={wallet.iconShape}\n      >\n        {wallet.iconConnector ?? wallet.icon}\n      </ConnectorIcon>\n      <ConnectorLabel>\n        {isMobile ? (wallet.shortName ?? wallet.name) : wallet.name}\n        {!context.options?.hideRecentBadge && isRecent && (\n          <RecentlyUsedTag>\n            <span>Recent</span>\n          </RecentlyUsedTag>\n        )}\n      </ConnectorLabel>\n    </ConnectorButton>\n  );\n};\n\nconst SkeletonConnectorItem = () => {\n  return (\n    <ConnectorButton type=\"button\" disabled>\n      <SkeletonIcon />\n      <SkeletonLabel />\n    </ConnectorButton>\n  );\n};\n"],"names":[],"mappings":"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"}

package/build/connectkit/src/components/Common/ConnectorList/styles.js

@@ -0,0 +1,344 @@
+import { keyframes, css } from 'styled-components';
+import styled from '../../../styles/styled/index.js';
+import { motion } from 'framer-motion';
+
+const Shimmer = keyframes`
+  0%{ transform: translate(-100%) rotate(-45deg); }
+  100%{ transform: translate(100%) rotate(-80deg); }
+`;
+const Pulse = keyframes`
+  0%   { opacity: 0.6; }
+  50%  { opacity: 1;   }
+  100% { opacity: 0.6; }
+`;
+const ConnectorButton = styled(motion.button)`
+  display: block;
+  text-decoration: none;
+`;
+const ConnectorLabel = styled(motion.span)``;
+const ConnectorIcon = styled(motion.div)``;
+const SkeletonIcon = styled.div`
+  ${(p) => p.$mobile ? css`
+          position: relative;
+          margin: 0 auto;
+          width: 60px;
+          height: 60px;
+        ` : css`
+          position: absolute;
+          right: 20px;
+          width: 32px;
+          height: 32px;
+        `}
+  border-radius: 22.5%;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${Pulse} 1.5s ease-in-out infinite;
+`;
+const SkeletonLabel = styled.div`
+  ${(p) => p.$mobile ? css`
+          width: 60px;
+          height: 12px;
+          margin: 10px auto 0;
+        ` : css`
+          width: 100px;
+          height: 16px;
+        `}
+  border-radius: 8px;
+  background-color: rgba(0, 0, 0, 0.1);
+  animation: ${Pulse} 1.5s ease-in-out infinite;
+`;
+const styles = {
+  desktop: {
+    ConnectorButton: css`
+      cursor: pointer;
+      user-select: none;
+      position: relative;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      width: 100%;
+      height: 64px;
+      font-size: 17px;
+      font-weight: var(--ck-primary-button-font-weight, 500);
+      line-height: 20px;
+      text-align: var(--ck-body-button-text-align, left);
+      transition: 180ms ease;
+      transition-property: background, color, box-shadow, transform, opacity;
+      will-change: transform, box-shadow, background-color, color, opacity;
+
+      --fallback-color: var(--ck-primary-button-color);
+      --fallback-background: var(--ck-primary-button-background);
+      --fallback-box-shadow: var(--ck-primary-button-box-shadow);
+      --fallback-border-radius: var(--ck-primary-button-border-radius);
+
+      --color: var(--ck-primary-button-color, var(--fallback-color));
+      --background: var(
+        --ck-primary-button-background,
+        var(--fallback-background)
+      );
+      --box-shadow: var(
+        --ck-primary-button-box-shadow,
+        var(--fallback-box-shadow)
+      );
+      --border-radius: var(
+        --ck-primary-button-border-radius,
+        var(--fallback-border-radius)
+      );
+
+      --hover-color: var(--ck-primary-button-hover-color, var(--color));
+      --hover-background: var(
+        --ck-primary-button-hover-background,
+        var(--background)
+      );
+      --hover-box-shadow: var(
+        --ck-primary-button-hover-box-shadow,
+        var(--box-shadow)
+      );
+      --hover-border-radius: var(
+        --ck-primary-button-hover-border-radius,
+        var(--border-radius)
+      );
+
+      --active-color: var(--ck-primary-button-active-color, var(--hover-color));
+      --active-background: var(
+        --ck-primary-button-active-background,
+        var(--hover-background)
+      );
+      --active-box-shadow: var(
+        --ck-primary-button-active-box-shadow,
+        var(--hover-box-shadow)
+      );
+      --active-border-radius: var(
+        --ck-primary-button-active-border-radius,
+        var(--hover-border-radius)
+      );
+
+      color: var(--color);
+      background: var(--background);
+      box-shadow: var(--box-shadow);
+      border-radius: var(--border-radius);
+
+      &:disabled {
+        transition: 180ms ease;
+        opacity: 0.4;
+      }
+
+      --bg: var(--background);
+      &:not(:disabled) {
+        &:hover {
+          color: var(--hover-color);
+          background: var(--hover-background);
+          box-shadow: var(--hover-box-shadow);
+          border-radius: var(--hover-border-radius);
+          --bg: var(--hover-background, var(--background));
+        }
+        &:focus-visible {
+          transition-duration: 100ms;
+          color: var(--hover-color);
+          background: var(--hover-background);
+          box-shadow: var(--hover-box-shadow);
+          border-radius: var(--hover-border-radius);
+          --bg: var(--hover-background, var(--background));
+        }
+        &:active {
+          color: var(--active-color);
+          background: var(--active-background);
+          box-shadow: var(--active-box-shadow);
+          border-radius: var(--active-border-radius);
+          --bg: var(--active-background, var(--background));
+        }
+      }
+    `,
+    ConnectorLabel: css`
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding: 2px 0;
+      padding-right: 38px;
+    `,
+    ConnectorIcon: css`
+      position: absolute;
+      right: 20px;
+      width: 32px;
+      height: 32px;
+      overflow: hidden;
+      svg,
+      img {
+        display: block;
+        position: relative;
+        pointer-events: none;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+      }
+
+      &[data-shape="squircle"] {
+        border-radius: 22.5%;
+      }
+      &[data-shape="circle"] {
+        border-radius: 100%;
+      }
+      &[data-shape="square"] {
+        border-radius: 0;
+      }
+    `
+  },
+  mobile: {
+    ConnectorButton: css`
+      text-align: center;
+      background: none;
+      max-width: 100%;
+      overflow: hidden;
+    `,
+    ConnectorLabel: css`
+      display: block;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      overflow: hidden;
+      padding: 10px 0 0;
+      color: var(--ck-body-color);
+      font-size: 13px;
+      line-height: 15px;
+      font-weight: 500;
+      opacity: 0.75;
+    `,
+    ConnectorIcon: css`
+      position: relative;
+      margin: 0 auto;
+      width: 60px;
+      height: 60px;
+      overflow: hidden;
+      svg,
+      img {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: auto;
+      }
+      &[data-small="true"] {
+        svg,
+        img {
+          transform: scale(0.8);
+        }
+      }
+
+      &[data-shape="squircle"] {
+        border-radius: 22.5%;
+        &:before {
+          content: "";
+          z-index: -1;
+          position: absolute;
+          inset: 0;
+          border-radius: inherit;
+          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);
+        }
+      }
+      &[data-shape="circle"] {
+        border-radius: 100%;
+      }
+      &[data-shape="square"] {
+        border-radius: 0;
+      }
+    `
+  }
+};
+const RecentlyUsedTag = styled(motion.span)`
+  position: relative;
+  top: var(--ck-recent-badge-top-offset, 0.5px);
+  display: inline-block;
+  padding: 10px 7px;
+  line-height: 0;
+  font-size: 13px;
+  font-weight: 400;
+  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));
+  color: var(
+    --ck-recent-badge-color,
+    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))
+  );
+  background: var(--ck-recent-badge-background, transparent);
+  overflow: hidden;
+  span {
+    display: inline-block;
+    position: relative;
+  }
+  &:before {
+    z-index: 1;
+    content: "";
+    position: absolute;
+    inset: 0;
+    opacity: 0.4;
+    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);
+    border-radius: inherit;
+  }
+  &:after {
+    z-index: 2;
+    content: "";
+    position: absolute;
+    inset: -10%;
+    top: -110%;
+    aspect-ratio: 1/1;
+    opacity: 0.7;
+    background: linear-gradient(
+      170deg,
+      transparent 10%,
+      var(--ck-recent-badge-background, var(--bg)) 50%,
+      transparent 90%
+    );
+    animation: ${Shimmer} 2s linear infinite;
+  }
+`;
+const ConnectorsContainer = styled.div`
+  transition: opacity 300ms ease;
+  min-width: fit-content;
+
+  ${(props) => props.$disabled && css`
+      pointer-events: none;
+      opacity: 0.4;
+    `}
+
+  ${(props) => !props.$mobile ? css`
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+
+          ${ConnectorButton} {
+            ${styles.desktop.ConnectorButton}
+            ${ConnectorLabel} {
+              ${styles.desktop.ConnectorLabel}
+            }
+            ${ConnectorIcon} {
+              ${styles.desktop.ConnectorIcon}
+            }
+          }
+        ` : css`
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-around;
+          gap: 22px 6px;
+          //margin: 0px -10px -20px;
+          padding: 14px 0px 28px;
+
+          ${ConnectorButton} {
+            flex-shrink: 0;
+            width: 80px;
+            ${styles.mobile.ConnectorButton}
+            ${ConnectorLabel} {
+              ${styles.mobile.ConnectorLabel}
+              ${RecentlyUsedTag} {
+                display: none;
+                width: fit-content;
+                margin: 0 auto;
+              }
+            }
+            ${ConnectorIcon} {
+              ${styles.mobile.ConnectorIcon}
+            }
+          }
+        `}
+`;
+
+export { ConnectorButton, ConnectorIcon, ConnectorLabel, ConnectorsContainer, Pulse, RecentlyUsedTag, SkeletonIcon, SkeletonLabel };
+//# sourceMappingURL=styles.js.map

package/build/connectkit/src/components/Common/ConnectorList/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/ConnectorList/styles.ts"],"sourcesContent":["import { css, keyframes } from \"styled-components\";\nimport styled from \"../../../styles/styled\";\n\nimport { motion } from \"framer-motion\";\n\nconst Shimmer = keyframes`\n  0%{ transform: translate(-100%) rotate(-45deg); }\n  100%{ transform: translate(100%) rotate(-80deg); }\n`;\n\nexport const Pulse = keyframes`\n  0%   { opacity: 0.6; }\n  50%  { opacity: 1;   }\n  100% { opacity: 0.6; }\n`;\n\nexport const ConnectorButton = styled(motion.button)`\n  display: block;\n  text-decoration: none;\n`;\nexport const ConnectorLabel = styled(motion.span)``;\nexport const ConnectorIcon = styled(motion.div)``;\n\nexport const SkeletonIcon = styled.div<{ $mobile?: boolean }>`\n  ${(p: { $mobile?: boolean }) =>\n    p.$mobile\n      ? css`\n          position: relative;\n          margin: 0 auto;\n          width: 60px;\n          height: 60px;\n        `\n      : css`\n          position: absolute;\n          right: 20px;\n          width: 32px;\n          height: 32px;\n        `}\n  border-radius: 22.5%;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${Pulse} 1.5s ease-in-out infinite;\n`;\n\nexport const SkeletonLabel = styled.div<{ $mobile?: boolean }>`\n  ${(p: { $mobile?: boolean }) =>\n    p.$mobile\n      ? css`\n          width: 60px;\n          height: 12px;\n          margin: 10px auto 0;\n        `\n      : css`\n          width: 100px;\n          height: 16px;\n        `}\n  border-radius: 8px;\n  background-color: rgba(0, 0, 0, 0.1);\n  animation: ${Pulse} 1.5s ease-in-out infinite;\n`;\n\n// This is a bit of a hack to not share styles between mobile and desktop\nconst styles = {\n  desktop: {\n    ConnectorButton: css`\n      cursor: pointer;\n      user-select: none;\n      position: relative;\n      display: flex;\n      align-items: center;\n      padding: 0 20px;\n      width: 100%;\n      height: 64px;\n      font-size: 17px;\n      font-weight: var(--ck-primary-button-font-weight, 500);\n      line-height: 20px;\n      text-align: var(--ck-body-button-text-align, left);\n      transition: 180ms ease;\n      transition-property: background, color, box-shadow, transform, opacity;\n      will-change: transform, box-shadow, background-color, color, opacity;\n\n      --fallback-color: var(--ck-primary-button-color);\n      --fallback-background: var(--ck-primary-button-background);\n      --fallback-box-shadow: var(--ck-primary-button-box-shadow);\n      --fallback-border-radius: var(--ck-primary-button-border-radius);\n\n      --color: var(--ck-primary-button-color, var(--fallback-color));\n      --background: var(\n        --ck-primary-button-background,\n        var(--fallback-background)\n      );\n      --box-shadow: var(\n        --ck-primary-button-box-shadow,\n        var(--fallback-box-shadow)\n      );\n      --border-radius: var(\n        --ck-primary-button-border-radius,\n        var(--fallback-border-radius)\n      );\n\n      --hover-color: var(--ck-primary-button-hover-color, var(--color));\n      --hover-background: var(\n        --ck-primary-button-hover-background,\n        var(--background)\n      );\n      --hover-box-shadow: var(\n        --ck-primary-button-hover-box-shadow,\n        var(--box-shadow)\n      );\n      --hover-border-radius: var(\n        --ck-primary-button-hover-border-radius,\n        var(--border-radius)\n      );\n\n      --active-color: var(--ck-primary-button-active-color, var(--hover-color));\n      --active-background: var(\n        --ck-primary-button-active-background,\n        var(--hover-background)\n      );\n      --active-box-shadow: var(\n        --ck-primary-button-active-box-shadow,\n        var(--hover-box-shadow)\n      );\n      --active-border-radius: var(\n        --ck-primary-button-active-border-radius,\n        var(--hover-border-radius)\n      );\n\n      color: var(--color);\n      background: var(--background);\n      box-shadow: var(--box-shadow);\n      border-radius: var(--border-radius);\n\n      &:disabled {\n        transition: 180ms ease;\n        opacity: 0.4;\n      }\n\n      --bg: var(--background);\n      &:not(:disabled) {\n        &:hover {\n          color: var(--hover-color);\n          background: var(--hover-background);\n          box-shadow: var(--hover-box-shadow);\n          border-radius: var(--hover-border-radius);\n          --bg: var(--hover-background, var(--background));\n        }\n        &:focus-visible {\n          transition-duration: 100ms;\n          color: var(--hover-color);\n          background: var(--hover-background);\n          box-shadow: var(--hover-box-shadow);\n          border-radius: var(--hover-border-radius);\n          --bg: var(--hover-background, var(--background));\n        }\n        &:active {\n          color: var(--active-color);\n          background: var(--active-background);\n          box-shadow: var(--active-box-shadow);\n          border-radius: var(--active-border-radius);\n          --bg: var(--active-background, var(--background));\n        }\n      }\n    `,\n    ConnectorLabel: css`\n      display: flex;\n      align-items: center;\n      gap: 9px;\n      width: 100%;\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      padding: 2px 0;\n      padding-right: 38px;\n    `,\n    ConnectorIcon: css`\n      position: absolute;\n      right: 20px;\n      width: 32px;\n      height: 32px;\n      overflow: hidden;\n      svg,\n      img {\n        display: block;\n        position: relative;\n        pointer-events: none;\n        overflow: hidden;\n        width: 100%;\n        height: 100%;\n      }\n\n      &[data-shape=\"squircle\"] {\n        border-radius: 22.5%;\n      }\n      &[data-shape=\"circle\"] {\n        border-radius: 100%;\n      }\n      &[data-shape=\"square\"] {\n        border-radius: 0;\n      }\n    `,\n  },\n  mobile: {\n    ConnectorButton: css`\n      text-align: center;\n      background: none;\n      max-width: 100%;\n      overflow: hidden;\n    `,\n    ConnectorLabel: css`\n      display: block;\n      text-overflow: ellipsis;\n      max-width: 100%;\n      overflow: hidden;\n      padding: 10px 0 0;\n      color: var(--ck-body-color);\n      font-size: 13px;\n      line-height: 15px;\n      font-weight: 500;\n      opacity: 0.75;\n    `,\n    ConnectorIcon: css`\n      position: relative;\n      margin: 0 auto;\n      width: 60px;\n      height: 60px;\n      overflow: hidden;\n      svg,\n      img {\n        display: block;\n        position: relative;\n        width: 100%;\n        height: auto;\n      }\n      &[data-small=\"true\"] {\n        svg,\n        img {\n          transform: scale(0.8);\n        }\n      }\n\n      &[data-shape=\"squircle\"] {\n        border-radius: 22.5%;\n        &:before {\n          content: \"\";\n          z-index: -1;\n          position: absolute;\n          inset: 0;\n          border-radius: inherit;\n          box-shadow: inset 0 0 0 1px var(--ck-body-background-tertiary);\n        }\n      }\n      &[data-shape=\"circle\"] {\n        border-radius: 100%;\n      }\n      &[data-shape=\"square\"] {\n        border-radius: 0;\n      }\n    `,\n  },\n};\n\nexport const RecentlyUsedTag = styled(motion.span)`\n  position: relative;\n  top: var(--ck-recent-badge-top-offset, 0.5px);\n  display: inline-block;\n  padding: 10px 7px;\n  line-height: 0;\n  font-size: 13px;\n  font-weight: 400;\n  border-radius: var(--ck-recent-badge-border-radius, var(--border-radius));\n  color: var(\n    --ck-recent-badge-color,\n    var(--ck-accent-color, var(--ck-body-color-muted, currentColor))\n  );\n  background: var(--ck-recent-badge-background, transparent);\n  overflow: hidden;\n  span {\n    display: inline-block;\n    position: relative;\n  }\n  &:before {\n    z-index: 1;\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    opacity: 0.4;\n    box-shadow: var(--ck-recent-badge-box-shadow, inset 0 0 0 1px currentColor);\n    border-radius: inherit;\n  }\n  &:after {\n    z-index: 2;\n    content: \"\";\n    position: absolute;\n    inset: -10%;\n    top: -110%;\n    aspect-ratio: 1/1;\n    opacity: 0.7;\n    background: linear-gradient(\n      170deg,\n      transparent 10%,\n      var(--ck-recent-badge-background, var(--bg)) 50%,\n      transparent 90%\n    );\n    animation: ${Shimmer} 2s linear infinite;\n  }\n`;\n\nexport const ConnectorsContainer = styled.div<{\n  $mobile?: boolean;\n  $disabled?: boolean;\n  $totalResults?: number;\n}>`\n  transition: opacity 300ms ease;\n  min-width: fit-content;\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      pointer-events: none;\n      opacity: 0.4;\n    `}\n\n  ${(props) =>\n    !props.$mobile\n      ? css`\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n\n          ${ConnectorButton} {\n            ${styles.desktop.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.desktop.ConnectorLabel}\n            }\n            ${ConnectorIcon} {\n              ${styles.desktop.ConnectorIcon}\n            }\n          }\n        `\n      : css`\n          display: flex;\n          align-items: flex-start;\n          justify-content: space-around;\n          gap: 22px 6px;\n          //margin: 0px -10px -20px;\n          padding: 14px 0px 28px;\n\n          ${ConnectorButton} {\n            flex-shrink: 0;\n            width: 80px;\n            ${styles.mobile.ConnectorButton}\n            ${ConnectorLabel} {\n              ${styles.mobile.ConnectorLabel}\n              ${RecentlyUsedTag} {\n                display: none;\n                width: fit-content;\n                margin: 0 auto;\n              }\n            }\n            ${ConnectorIcon} {\n              ${styles.mobile.ConnectorIcon}\n            }\n          }\n        `}\n`;\n"],"names":[],"mappings":"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"}