@daimo/pay 1.19.2 → 1.19.4

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

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { AnimatePresence } from 'framer-motion';
+import { flattenChildren } from '../../../utils/index.js';
+import FitText from '../FitText/index.js';
+import { Spinner } from '../Spinner/index.js';
+import { ButtonContainer, ButtonContainerInner, IconContainer, DownloadArrow, DownloadArrowInner, Arrow, ArrowLine, ArrowChevron, InnerContainer, SpinnerContainer } from './styles.js';
+
+const transition = {
+  duration: 0.4,
+  ease: [0.175, 0.885, 0.32, 0.98]
+};
+const Button = ({
+  children,
+  variant = "secondary",
+  // unique aspect to how we're handling buttons
+  disabled,
+  icon,
+  iconPosition = "left",
+  roundedIcon,
+  waiting,
+  arrow,
+  download,
+  href,
+  style,
+  onClick
+}) => {
+  const key = typeof children === "string" ? children : flattenChildren(children).join("");
+  const hrefUrl = typeof href === "string" ? href : flattenChildren(href).join("");
+  return /* @__PURE__ */ jsx(
+    ButtonContainer,
+    {
+      as: href ? "a" : void 0,
+      onClick: (event) => {
+        if (!disabled && onClick) onClick(event);
+      },
+      href: hrefUrl || null,
+      target: href && "_blank",
+      rel: href && "noopener noreferrer",
+      disabled,
+      $variant: variant,
+      style,
+      children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
+        /* @__PURE__ */ jsxs(
+          ButtonContainerInner,
+          {
+            initial: { opacity: 0, y: -10 },
+            animate: {
+              opacity: 1,
+              y: -1
+            },
+            exit: {
+              position: "absolute",
+              opacity: 0,
+              y: 10,
+              transition: {
+                ...transition
+              }
+            },
+            transition: {
+              ...transition,
+              delay: 0.2
+            },
+            children: [
+              icon && iconPosition === "left" && /* @__PURE__ */ jsx(IconContainer, { $rounded: roundedIcon, children: icon }),
+              download && /* @__PURE__ */ jsx(DownloadArrow, { children: /* @__PURE__ */ jsx(DownloadArrowInner, { children: /* @__PURE__ */ jsxs(
+                Arrow,
+                {
+                  width: "13",
+                  height: "12",
+                  viewBox: "0 0 13 12",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ArrowLine,
+                      {
+                        stroke: "currentColor",
+                        x1: "1",
+                        y1: "6",
+                        x2: "12",
+                        y2: "6",
+                        strokeWidth: "var(--stroke-width)",
+                        strokeLinecap: "round"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ArrowChevron,
+                      {
+                        stroke: "currentColor",
+                        d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+                        strokeWidth: "var(--stroke-width)",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  ]
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: /* @__PURE__ */ jsx(FitText, { children }) }),
+              icon && iconPosition === "right" && /* @__PURE__ */ jsx(IconContainer, { $rounded: roundedIcon, children: icon }),
+              arrow && /* @__PURE__ */ jsxs(
+                Arrow,
+                {
+                  width: "13",
+                  height: "12",
+                  viewBox: "0 0 13 12",
+                  fill: "none",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      ArrowLine,
+                      {
+                        stroke: "currentColor",
+                        x1: "1",
+                        y1: "6",
+                        x2: "12",
+                        y2: "6",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      ArrowChevron,
+                      {
+                        stroke: "currentColor",
+                        d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314",
+                        strokeWidth: "2",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          },
+          key
+        ),
+        waiting && /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(Spinner, {}) })
+      ] })
+    }
+  );
+};
+
+export { Button as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Button/index.tsx"],"sourcesContent":["import { AnimatePresence } from \"framer-motion\";\nimport React from \"react\";\nimport { flattenChildren } from \"../../../utils\";\nimport FitText from \"../FitText\";\nimport { Spinner } from \"../Spinner\";\nimport {\n  Arrow,\n  ArrowChevron,\n  ArrowLine,\n  ButtonContainer,\n  ButtonContainerInner,\n  DownloadArrow,\n  DownloadArrowInner,\n  IconContainer,\n  InnerContainer,\n  SpinnerContainer,\n} from \"./styles\";\nimport { ButtonProps } from \"./types\";\n\nconst transition = {\n  duration: 0.4,\n  ease: [0.175, 0.885, 0.32, 0.98],\n};\n\nconst Button: React.FC<ButtonProps> = ({\n  children,\n  variant = \"secondary\", // unique aspect to how we're handling buttons\n  disabled,\n  icon,\n  iconPosition = \"left\",\n  roundedIcon,\n  waiting,\n  arrow,\n  download,\n  href,\n  style,\n  onClick,\n}) => {\n  const key =\n    typeof children === \"string\"\n      ? children\n      : flattenChildren(children).join(\"\"); // Need to generate a string for the key so we can automatically animate between content\n\n  const hrefUrl =\n    typeof href === \"string\" ? href : flattenChildren(href).join(\"\"); // Need to have a flat string for the href\n\n  return (\n    <ButtonContainer\n      as={href ? \"a\" : undefined}\n      onClick={(event: any) => {\n        if (!disabled && onClick) onClick(event);\n      }}\n      href={hrefUrl || null}\n      target={href && \"_blank\"}\n      rel={href && \"noopener noreferrer\"}\n      disabled={disabled}\n      $variant={variant}\n      style={style}\n    >\n      <AnimatePresence initial={false}>\n        <ButtonContainerInner\n          key={key}\n          initial={{ opacity: 0, y: -10 }}\n          animate={{\n            opacity: 1,\n            y: -1,\n          }}\n          exit={{\n            position: \"absolute\",\n            opacity: 0,\n            y: 10,\n            transition: {\n              ...transition,\n            },\n          }}\n          transition={{\n            ...transition,\n            delay: 0.2,\n          }}\n        >\n          {icon && iconPosition === \"left\" && (\n            <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>\n          )}\n          {download && (\n            <DownloadArrow>\n              <DownloadArrowInner>\n                <Arrow\n                  width=\"13\"\n                  height=\"12\"\n                  viewBox=\"0 0 13 12\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                >\n                  <ArrowLine\n                    stroke=\"currentColor\"\n                    x1=\"1\"\n                    y1=\"6\"\n                    x2=\"12\"\n                    y2=\"6\"\n                    strokeWidth=\"var(--stroke-width)\"\n                    strokeLinecap=\"round\"\n                  />\n                  <ArrowChevron\n                    stroke=\"currentColor\"\n                    d=\"M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314\"\n                    strokeWidth=\"var(--stroke-width)\"\n                    strokeLinecap=\"round\"\n                  />\n                </Arrow>\n              </DownloadArrowInner>\n            </DownloadArrow>\n          )}\n          <InnerContainer style={{ paddingLeft: arrow ? 6 : 0 }}>\n            <FitText>{children}</FitText>\n          </InnerContainer>\n          {icon && iconPosition === \"right\" && (\n            <IconContainer $rounded={roundedIcon}>{icon}</IconContainer>\n          )}\n          {arrow && (\n            <Arrow\n              width=\"13\"\n              height=\"12\"\n              viewBox=\"0 0 13 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <ArrowLine\n                stroke=\"currentColor\"\n                x1=\"1\"\n                y1=\"6\"\n                x2=\"12\"\n                y2=\"6\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n              <ArrowChevron\n                stroke=\"currentColor\"\n                d=\"M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n              />\n            </Arrow>\n          )}\n        </ButtonContainerInner>\n        {waiting && (\n          <SpinnerContainer>\n            <Spinner />\n          </SpinnerContainer>\n        )}\n      </AnimatePresence>\n    </ButtonContainer>\n  );\n};\nexport default Button;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,287 @@
+import { motion } from 'framer-motion';
+import { css } from 'styled-components';
+import defaultTheme from '../../../constants/defaultTheme.js';
+import styled from '../../../styles/styled/index.js';
+
+const SpinnerContainer = styled(motion.div)`
+  position: absolute;
+  right: 16px;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const Arrow = styled.svg`
+  --x: -3px;
+  --stroke-width: 2;
+  position: relative;
+  top: 1px;
+  left: -0.5px;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 9px;
+  margin-right: 1px;
+  transition: all 100ms ease;
+  transform: translateX(var(--x, -3px));
+  color: currentColor;
+  opacity: 0.4;
+`;
+const ArrowChevron = styled.path``;
+const ArrowLine = styled.line`
+  transition: inherit;
+  transition-property: transform;
+  transform-origin: 90% 50%;
+  transform: scaleX(0.1);
+`;
+const DownloadArrow = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  margin-right: 6px;
+  color: currentColor;
+`;
+const DownloadArrowInner = styled.div`
+  transform: rotate(90deg);
+  ${Arrow} {
+    margin: 0 auto;
+  }
+`;
+const ButtonContainerInner = styled(motion.div)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inset: 0;
+  height: 100%;
+`;
+const ButtonContainer = styled.button`
+
+  ${({ disabled }) => disabled && css`
+      cursor: not-allowed;
+      pointer-events: none;
+      ${InnerContainer} {
+        opacity: 0.4;
+      }
+    `}
+
+  ${({ $variant }) => {
+  if ($variant === "primary") {
+    return css`
+        --color: var(--ck-primary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-primary-button-background,
+          var(--ck-body-background-primary)
+        );
+        --box-shadow: var(--ck-primary-button-box-shadow);
+        --border-radius: var(--ck-primary-button-border-radius);
+        --font-weight: var(--ck-primary-button-font-weight, 500);
+
+        --hover-color: var(--ck-button-primary-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)
+        );
+        --hover-font-weight: var(
+          --ck-primary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+  } else if ($variant === "secondary") {
+    return css`
+        --color: var(--ck-secondary-button-color, var(--ck-body-color));
+        --background: var(
+          --ck-secondary-button-background,
+          var(--ck-body-background-secondary)
+        );
+        --box-shadow: var(--ck-secondary-button-box-shadow);
+        --border-radius: var(--ck-secondary-button-border-radius);
+        --font-weight: var(--ck-secondary-button-font-weight, 500);
+
+        --hover-color: var(--ck-secondary-button-hover-color, var(--color));
+        --hover-background: var(
+          --ck-secondary-button-hover-background,
+          var(--background)
+        );
+        --hover-box-shadow: var(
+          --ck-secondary-button-hover-box-shadow,
+          var(--box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-secondary-button-hover-border-radius,
+          var(--border-radius)
+        );
+        --hover-font-weight: var(
+          --ck-secondary-button-font-weight,
+          var(--font-weight)
+        );
+      `;
+  } else if ($variant === "tertiary") {
+    return css`
+        --color: var(
+          --ck-tertiary-button-color,
+          var(--ck-secondary-button-color)
+        );
+        --background: var(
+          --ck-tertiary-button-background,
+          var(--ck-secondary-button-background)
+        );
+        --box-shadow: var(
+          --ck-tertiary-button-box-shadow,
+          var(--ck-secondary-button-box-shadow)
+        );
+        --border-radius: var(
+          --ck-tertiary-button-border-radius,
+          var(--ck-secondary-button-border-radius)
+        );
+        --font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+
+        --hover-color: var(
+          --button-tertiary-hover-color,
+          var(--ck-tertiary-button-color)
+        );
+        --hover-background: var(
+          --ck-tertiary-button-hover-background,
+          var(--ck-tertiary-button-background)
+        );
+        --hover-box-shadow: var(
+          --ck-tertiary-button-hover-box-shadow,
+          var(--ck-tertiary-button-box-shadow)
+        );
+        --hover-border-radius: var(
+          --ck-tertiary-button-hover-border-radius,
+          var(--ck-tertiary-button-border-radius, var(--border-radius))
+        );
+        --hover-font-weight: var(
+          --ck-tertiary-button-font-weight,
+          var(--ck-secondary-button-font-weight)
+        );
+      `;
+  }
+}}
+
+  appearance: none;
+  cursor: pointer;
+  user-select: none;
+  min-width: fit-content;
+  width: 100%;
+  display:block;
+  text-align: center;
+  height: 48px;
+  margin: 12px 0 0;
+  line-height: 48px;
+  padding: 0 4px;
+  font-size: 16px;
+  font-weight: var(--font-weight,500);
+  text-decoration: none;
+  white-space: nowrap;
+  transition: 100ms ease;
+  transition-property: box-shadow, background-color;
+  color: var(--color);
+  background: var(--background);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  will-change: transform, box-shadow, background-color, color;
+
+  ${DownloadArrow} {
+    ${Arrow} {
+      transform: translateX(0);
+      ${ArrowLine} {
+        transform: none;
+      }
+      ${ArrowChevron} {
+      }
+    }
+  }
+}
+
+  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {
+    &:hover,
+    &:focus-visible {
+      color: var(--ck-accent-text-color, var(--hover-color));
+      background: var(--ck-accent-color, var(--hover-background));
+      border-radius: var(--hover-border-radius);
+      box-shadow: var(--hover-box-shadow);
+
+      ${Arrow} {
+        transform: translateX(0);
+        ${ArrowLine} {
+          transform: none;
+        }
+        ${ArrowChevron} {
+        }
+      }
+      ${DownloadArrow} {
+        ${Arrow} {
+          transform: translateX(var(--x));
+          ${ArrowLine} {
+            transform: scaleX(0.1);
+          }
+          ${ArrowChevron} {
+          }
+        }
+      }
+    }
+    &:active {
+      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));
+    }
+  }
+  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {
+    transition: transform 100ms ease;
+    transform: scale(1);
+    font-size: 17px;
+    &:active {
+    }
+  }
+`;
+const InnerContainer = styled.div`
+  transform: translateZ(0); // Shifting fix
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: calc(100% - 42px);
+  transition: opacity 300ms ease;
+  /*
+  overflow: hidden;
+  text-overflow: ellipsis;
+  */
+`;
+const IconContainer = styled(motion.div)`
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 20px;
+  max-height: 20px;
+  margin: 0 10px;
+  &:first-child {
+    margin-left: 0;
+  }
+  &:last-child {
+    margin-right: 0;
+  }
+  ${(props) => {
+  return props.$rounded && css`
+        overflow: hidden;
+        border-radius: 5px;
+      `;
+}}
+  svg {
+    display: block;
+    position: relative;
+    max-width: 100%;
+    height: auto;
+  }
+`;
+
+export { Arrow, ArrowChevron, ArrowLine, ButtonContainer, ButtonContainerInner, DownloadArrow, DownloadArrowInner, IconContainer, InnerContainer, SpinnerContainer };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../src/components/Common/Button/styles.ts"],"sourcesContent":["import { motion } from \"framer-motion\";\nimport { css } from \"styled-components\";\nimport defaultTheme from \"../../../constants/defaultTheme\";\nimport styled from \"./../../../styles/styled\";\n\nexport const SpinnerContainer = styled(motion.div)`\n  position: absolute;\n  right: 16px;\n  top: 0;\n  bottom: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const Arrow = styled.svg`\n  --x: -3px;\n  --stroke-width: 2;\n  position: relative;\n  top: 1px;\n  left: -0.5px;\n  display: inline-block;\n  vertical-align: middle;\n  margin-left: 9px;\n  margin-right: 1px;\n  transition: all 100ms ease;\n  transform: translateX(var(--x, -3px));\n  color: currentColor;\n  opacity: 0.4;\n`;\nexport const ArrowChevron = styled.path``;\nexport const ArrowLine = styled.line`\n  transition: inherit;\n  transition-property: transform;\n  transform-origin: 90% 50%;\n  transform: scaleX(0.1);\n`;\nexport const DownloadArrow = styled.div`\n  display: inline-block;\n  vertical-align: middle;\n  position: relative;\n  margin-right: 6px;\n  color: currentColor;\n`;\nexport const DownloadArrowInner = styled.div`\n  transform: rotate(90deg);\n  ${Arrow} {\n    margin: 0 auto;\n  }\n`;\n\nexport const ButtonContainerInner = styled(motion.div)`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  inset: 0;\n  height: 100%;\n`;\nexport const ButtonContainer = styled.button<{\n  disabled?: boolean;\n  $variant?: \"primary\" | \"secondary\" | \"tertiary\";\n}>`\n\n  ${({ disabled }) =>\n    disabled &&\n    css`\n      cursor: not-allowed;\n      pointer-events: none;\n      ${InnerContainer} {\n        opacity: 0.4;\n      }\n    `}\n\n  ${({ $variant }) => {\n    if ($variant === \"primary\") {\n      return css`\n        --color: var(--ck-primary-button-color, var(--ck-body-color));\n        --background: var(\n          --ck-primary-button-background,\n          var(--ck-body-background-primary)\n        );\n        --box-shadow: var(--ck-primary-button-box-shadow);\n        --border-radius: var(--ck-primary-button-border-radius);\n        --font-weight: var(--ck-primary-button-font-weight, 500);\n\n        --hover-color: var(--ck-button-primary-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        --hover-font-weight: var(\n          --ck-primary-button-font-weight,\n          var(--font-weight)\n        );\n      `;\n    } else if ($variant === \"secondary\") {\n      return css`\n        --color: var(--ck-secondary-button-color, var(--ck-body-color));\n        --background: var(\n          --ck-secondary-button-background,\n          var(--ck-body-background-secondary)\n        );\n        --box-shadow: var(--ck-secondary-button-box-shadow);\n        --border-radius: var(--ck-secondary-button-border-radius);\n        --font-weight: var(--ck-secondary-button-font-weight, 500);\n\n        --hover-color: var(--ck-secondary-button-hover-color, var(--color));\n        --hover-background: var(\n          --ck-secondary-button-hover-background,\n          var(--background)\n        );\n        --hover-box-shadow: var(\n          --ck-secondary-button-hover-box-shadow,\n          var(--box-shadow)\n        );\n        --hover-border-radius: var(\n          --ck-secondary-button-hover-border-radius,\n          var(--border-radius)\n        );\n        --hover-font-weight: var(\n          --ck-secondary-button-font-weight,\n          var(--font-weight)\n        );\n      `;\n    } else if ($variant === \"tertiary\") {\n      return css`\n        --color: var(\n          --ck-tertiary-button-color,\n          var(--ck-secondary-button-color)\n        );\n        --background: var(\n          --ck-tertiary-button-background,\n          var(--ck-secondary-button-background)\n        );\n        --box-shadow: var(\n          --ck-tertiary-button-box-shadow,\n          var(--ck-secondary-button-box-shadow)\n        );\n        --border-radius: var(\n          --ck-tertiary-button-border-radius,\n          var(--ck-secondary-button-border-radius)\n        );\n        --font-weight: var(\n          --ck-tertiary-button-font-weight,\n          var(--ck-secondary-button-font-weight)\n        );\n\n        --hover-color: var(\n          --button-tertiary-hover-color,\n          var(--ck-tertiary-button-color)\n        );\n        --hover-background: var(\n          --ck-tertiary-button-hover-background,\n          var(--ck-tertiary-button-background)\n        );\n        --hover-box-shadow: var(\n          --ck-tertiary-button-hover-box-shadow,\n          var(--ck-tertiary-button-box-shadow)\n        );\n        --hover-border-radius: var(\n          --ck-tertiary-button-hover-border-radius,\n          var(--ck-tertiary-button-border-radius, var(--border-radius))\n        );\n        --hover-font-weight: var(\n          --ck-tertiary-button-font-weight,\n          var(--ck-secondary-button-font-weight)\n        );\n      `;\n    }\n  }}\n\n  appearance: none;\n  cursor: pointer;\n  user-select: none;\n  min-width: fit-content;\n  width: 100%;\n  display:block;\n  text-align: center;\n  height: 48px;\n  margin: 12px 0 0;\n  line-height: 48px;\n  padding: 0 4px;\n  font-size: 16px;\n  font-weight: var(--font-weight,500);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: 100ms ease;\n  transition-property: box-shadow, background-color;\n  color: var(--color);\n  background: var(--background);\n  border-radius: var(--border-radius);\n  box-shadow: var(--box-shadow);\n  will-change: transform, box-shadow, background-color, color;\n\n  ${DownloadArrow} {\n    ${Arrow} {\n      transform: translateX(0);\n      ${ArrowLine} {\n        transform: none;\n      }\n      ${ArrowChevron} {\n      }\n    }\n  }\n}\n\n  @media only screen and (min-width: ${defaultTheme.mobileWidth + 1}px) {\n    &:hover,\n    &:focus-visible {\n      color: var(--ck-accent-text-color, var(--hover-color));\n      background: var(--ck-accent-color, var(--hover-background));\n      border-radius: var(--hover-border-radius);\n      box-shadow: var(--hover-box-shadow);\n\n      ${Arrow} {\n        transform: translateX(0);\n        ${ArrowLine} {\n          transform: none;\n        }\n        ${ArrowChevron} {\n        }\n      }\n      ${DownloadArrow} {\n        ${Arrow} {\n          transform: translateX(var(--x));\n          ${ArrowLine} {\n            transform: scaleX(0.1);\n          }\n          ${ArrowChevron} {\n          }\n        }\n      }\n    }\n    &:active {\n      box-shadow: var(--ck-secondary-button-active-box-shadow, var(--hover-box-shadow));\n    }\n  }\n  @media only screen and (max-width: ${defaultTheme.mobileWidth}px) {\n    transition: transform 100ms ease;\n    transform: scale(1);\n    font-size: 17px;\n    &:active {\n    }\n  }\n`;\n\nexport const InnerContainer = styled.div`\n  transform: translateZ(0); // Shifting fix\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: calc(100% - 42px);\n  transition: opacity 300ms ease;\n  /*\n  overflow: hidden;\n  text-overflow: ellipsis;\n  */\n`;\n\nexport const IconContainer = styled(motion.div)<{ $rounded?: boolean }>`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  max-width: 20px;\n  max-height: 20px;\n  margin: 0 10px;\n  &:first-child {\n    margin-left: 0;\n  }\n  &:last-child {\n    margin-right: 0;\n  }\n  ${(props) => {\n    return (\n      props.$rounded &&\n      css`\n        overflow: hidden;\n        border-radius: 5px;\n      `\n    );\n  }}\n  svg {\n    display: block;\n    position: relative;\n    max-width: 100%;\n    height: auto;\n  }\n`;\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,141 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { supportedChains } from '@daimo/pay-common';
+import { AnimatePresence } from 'framer-motion';
+import { chainToLogo, UnknownChain } from '../../../assets/chains.js';
+import { useChainIsSupported } from '../../../hooks/useChainIsSupported.js';
+import useIsMounted from '../../../hooks/useIsMounted.js';
+import { ChainContainer, Unsupported, LogoContainer, LoadingContainer } from './styles.js';
+
+const Spinner = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "36",
+    height: "36",
+    viewBox: "0 0 36 36",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          clipRule: "evenodd",
+          d: "M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z",
+          fill: "url(#paint0_linear_1288_1870)"
+        }
+      ),
+      /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+        "linearGradient",
+        {
+          id: "paint0_linear_1288_1870",
+          x1: "2",
+          y1: "19.4884",
+          x2: "16.8752",
+          y2: "33.7485",
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                stopColor: "var(--ck-connectbutton-balance-color,currentColor)",
+                stopOpacity: "0.7"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "stop",
+              {
+                offset: "1",
+                stopColor: "var(--ck-connectbutton-balance-color,currentColor)",
+                stopOpacity: "0"
+              }
+            )
+          ]
+        }
+      ) })
+    ]
+  }
+);
+const Chain = ({
+  id,
+  unsupported: controlledUnsupported,
+  radius = "50%",
+  size = 24
+}) => {
+  const isChainSupported = useChainIsSupported(id);
+  const unsupported = controlledUnsupported ?? !isChainSupported;
+  const chain = supportedChains.find((c) => c.chainId === id);
+  const isMounted = useIsMounted();
+  if (!isMounted)
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: size,
+          height: size
+        }
+      }
+    );
+  return /* @__PURE__ */ jsx(ChainContainer, { size, radius, children: /* @__PURE__ */ jsxs(AnimatePresence, { initial: false, children: [
+    unsupported && /* @__PURE__ */ jsx(
+      Unsupported,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "13",
+            height: "12",
+            viewBox: "0 0 13 12",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z",
+                  fill: "currentColor",
+                  stroke: "var(--ck-body-background, #fff)",
+                  strokeWidth: "1.5"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z",
+                  fill: "white"
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    id ? /* @__PURE__ */ jsx(
+      LogoContainer,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: chain?.chainId ? chainToLogo[chain.chainId] : /* @__PURE__ */ jsx(UnknownChain, {})
+      },
+      `${chain?.chainId}-${chain?.name}-${id}`
+    ) : /* @__PURE__ */ jsx(
+      LoadingContainer,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.3 },
+        children: Spinner
+      },
+      "loading"
+    )
+  ] }) });
+};
+
+export { Chain as default };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/Common/Chain/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { supportedChains } from \"@daimo/pay-common\";\nimport { AnimatePresence } from \"framer-motion\";\nimport { chainToLogo, UnknownChain } from \"../../../assets/chains\";\nimport { useChainIsSupported } from \"../../../hooks/useChainIsSupported\";\nimport useIsMounted from \"../../../hooks/useIsMounted\";\nimport {\n  ChainContainer,\n  LoadingContainer,\n  LogoContainer,\n  Unsupported,\n} from \"./styles\";\n\nconst Spinner = (\n  <svg\n    aria-hidden=\"true\"\n    width=\"36\"\n    height=\"36\"\n    viewBox=\"0 0 36 36\"\n    fill=\"none\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n  >\n    <path\n      fillRule=\"evenodd\"\n      clipRule=\"evenodd\"\n      d=\"M11.3592 30.1654C10.0472 29.4491 8.85718 28.524 7.83713 27.424C6.81708 26.324 5.98425 25.0677 5.36889 23.7054C5.20157 23.335 5.05033 22.9567 4.91578 22.5717C4.51465 21.4237 4.26735 20.2308 4.17794 19.0239C4.16599 18.8626 4.13894 18.7041 4.09809 18.5507C3.85023 17.6197 3.09399 16.8738 2.11531 16.7999C0.975331 16.7138 -0.0310983 17.5702 0.0141657 18.7125C0.0223289 18.9185 0.0340286 19.1243 0.049253 19.3298C0.165374 20.8971 0.486545 22.4464 1.00749 23.9373C1.10424 24.2142 1.20764 24.4884 1.31755 24.7596C2.13617 26.7799 3.31595 28.6371 4.80146 30.239C6.28696 31.841 8.04998 33.1573 10.0029 34.1258C10.2651 34.2558 10.5307 34.3796 10.7995 34.4969C12.247 35.1287 13.7676 35.5656 15.3217 35.7995C15.5255 35.8301 15.7298 35.8573 15.9346 35.881C17.0703 36.0122 18.0001 35.0731 18.0001 33.9299C18.0001 32.9484 17.3133 32.1381 16.4036 31.8208C16.2537 31.7685 16.0977 31.7296 15.9377 31.7056C14.7411 31.5255 13.5702 31.1891 12.4556 30.7026C12.0818 30.5394 11.716 30.3601 11.3592 30.1654Z\"\n      fill=\"url(#paint0_linear_1288_1870)\"\n    />\n\n    <defs>\n      <linearGradient\n        id=\"paint0_linear_1288_1870\"\n        x1=\"2\"\n        y1=\"19.4884\"\n        x2=\"16.8752\"\n        y2=\"33.7485\"\n        gradientUnits=\"userSpaceOnUse\"\n      >\n        <stop\n          stopColor=\"var(--ck-connectbutton-balance-color,currentColor)\"\n          stopOpacity=\"0.7\"\n        />\n        <stop\n          offset=\"1\"\n          stopColor=\"var(--ck-connectbutton-balance-color,currentColor)\"\n          stopOpacity=\"0\"\n        />\n      </linearGradient>\n    </defs>\n  </svg>\n);\n\n/** Icon for an EVM chain, given chain ID. No ID shows a loading spinner. */\nconst Chain: React.FC<{\n  id?: number;\n  unsupported?: boolean;\n  radius?: number | string;\n  size?: number | string;\n}> = ({\n  id,\n  unsupported: controlledUnsupported,\n  radius = \"50%\",\n  size = 24,\n}) => {\n  const isChainSupported = useChainIsSupported(id);\n  const unsupported = controlledUnsupported ?? !isChainSupported;\n\n  const chain = supportedChains.find((c) => c.chainId === id);\n  const isMounted = useIsMounted();\n  if (!isMounted)\n    return (\n      <div\n        style={{\n          width: size,\n          height: size,\n        }}\n      />\n    );\n\n  return (\n    <ChainContainer size={size} radius={radius}>\n      <AnimatePresence initial={false}>\n        {unsupported && (\n          <Unsupported\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n          >\n            <svg\n              width=\"13\"\n              height=\"12\"\n              viewBox=\"0 0 13 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M2.61317 11.2501H9.46246C10.6009 11.2501 11.3256 10.3506 11.3256 9.3549C11.3256 9.05145 11.255 8.73244 11.0881 8.43303L7.65903 2.14708C7.659 2.14702 7.65897 2.14696 7.65893 2.1469C7.65889 2.14682 7.65884 2.14673 7.65879 2.14664C7.31045 1.50746 6.6741 1.17871 6.04 1.17871C5.41478 1.17871 4.763 1.50043 4.41518 2.14968L0.993416 8.43476C0.828865 8.72426 0.75 9.04297 0.75 9.3549C0.75 10.3506 1.47471 11.2501 2.61317 11.2501Z\"\n                fill=\"currentColor\"\n                stroke=\"var(--ck-body-background, #fff)\"\n                strokeWidth=\"1.5\"\n              />\n              <path\n                d=\"M6.03258 7.43916C5.77502 7.43916 5.63096 7.29153 5.62223 7.02311L5.55675 4.96973C5.54802 4.69684 5.74446 4.5 6.02821 4.5C6.3076 4.5 6.51277 4.70131 6.50404 4.9742L6.43856 7.01864C6.42546 7.29153 6.2814 7.43916 6.03258 7.43916ZM6.03258 9.11676C5.7401 9.11676 5.5 8.9065 5.5 8.60677C5.5 8.30704 5.7401 8.09678 6.03258 8.09678C6.32506 8.09678 6.56515 8.30256 6.56515 8.60677C6.56515 8.91097 6.32069 9.11676 6.03258 9.11676Z\"\n                fill=\"white\"\n              />\n            </svg>\n          </Unsupported>\n        )}\n        {id ? (\n          <LogoContainer\n            key={`${chain?.chainId}-${chain?.name}-${id}`}\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n          >\n            {chain?.chainId ? chainToLogo[chain.chainId] : <UnknownChain />}\n          </LogoContainer>\n        ) : (\n          <LoadingContainer\n            key=\"loading\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            transition={{ duration: 0.3 }}\n          >\n            {Spinner}\n          </LoadingContainer>\n        )}\n      </AnimatePresence>\n    </ChainContainer>\n  );\n};\n\nexport default Chain;\n"],"names":[],"mappings":"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"}