@multiplatform.one/web3 5.1.0 → 6.0.1

package/src/connectkit/components/Pages/About/graphics.tsx

@@ -1,24 +1,24 @@
-import { motion, EasingFunction } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { keyframes } from 'styled-components';
+import { motion, EasingFunction } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
+import { keyframes } from "styled-components";
 
 export type Easing =
   | [number, number, number, number]
-  | 'linear'
-  | 'easeIn'
-  | 'easeOut'
-  | 'easeInOut'
-  | 'circIn'
-  | 'circOut'
-  | 'circInOut'
-  | 'backIn'
-  | 'backOut'
-  | 'backInOut'
-  | 'anticipate'
+  | "linear"
+  | "easeIn"
+  | "easeOut"
+  | "easeInOut"
+  | "circIn"
+  | "circOut"
+  | "circInOut"
+  | "backIn"
+  | "backOut"
+  | "backInOut"
+  | "anticipate"
   | EasingFunction;
 
 const pulseAnim = { scale: [0.9, 1.25, 1.6], opacity: [0, 0.11, 0] };
-const pulseTransition = { ease: 'linear', duration: 2, repeat: Infinity };
+const pulseTransition = { ease: "linear", duration: 2, repeat: Infinity };
 
 const Center = styled.div`
   position: absolute;
@@ -65,13 +65,7 @@ const MainCircleInner = styled(motion.div)`
 `;
 
 const Compass = (
-  <svg
-    width="34"
-    height="34"
-    viewBox="0 0 34 34"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M17 34C26.3 34 34 26.2833 34 17C34 7.7 26.2833 0 16.9833 0C7.7 0 0 7.7 0 17C0 26.2833 7.71667 34 17 34ZM9.83333 25.6833C8.68333 26.2333 7.8 25.3333 8.33333 24.2L13.1667 14.3333C13.45 13.75 13.8167 13.3833 14.35 13.1333L24.1833 8.33333C25.4 7.75 26.25 8.65 25.6833 9.81667L20.8833 19.6667C20.6167 20.2 20.2333 20.6 19.6833 20.85L9.83333 25.6833ZM17.0167 19.1333C18.1833 19.1333 19.1333 18.1833 19.1333 17.0167C19.1333 15.85 18.1833 14.9167 17.0167 14.9167C15.8667 14.9167 14.9167 15.85 14.9167 17.0167C14.9167 18.1833 15.8667 19.1333 17.0167 19.1333Z"
       fill="var(--ck-graphic-compass-color, var(--ck-body-color))"
@@ -97,21 +91,15 @@ const Compass = (
 );
 
 const Wallet = ({ inverted = false }) => (
-  <svg
-    width="58"
-    height="50"
-    viewBox="0 0 58 50"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="58" height="50" viewBox="0 0 58 50" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M57.9332 20.3335V42.1113C57.9332 46.4069 54.451 49.8891 50.1555 49.8891H8.15546C3.85991 49.8891 0.377686 46.4069 0.377686 42.1113V25.0002V7.8891C0.377686 3.59355 3.85991 0.111328 8.15546 0.111328H47.0444C48.7626 0.111328 50.1555 1.50422 50.1555 3.22244C50.1555 4.94066 48.7626 6.33355 47.0443 6.33355H9.71102C7.9928 6.33355 6.59991 7.72644 6.59991 9.44466C6.59991 11.1629 7.9928 12.5558 9.71102 12.5558H50.1555C54.451 12.5558 57.9332 16.038 57.9332 20.3335ZM46.2667 34.3337C48.4145 34.3337 50.1556 32.5926 50.1556 30.4448C50.1556 28.297 48.4145 26.5559 46.2667 26.5559C44.1189 26.5559 42.3778 28.297 42.3778 30.4448C42.3778 32.5926 44.1189 34.3337 46.2667 34.3337Z"
       fill={
         inverted
-          ? 'var(--ck-graphic-primary-color, var(--ck-body-background))'
-          : 'var(--ck-graphic-primary-color, var(--ck-body-color))'
+          ? "var(--ck-graphic-primary-color, var(--ck-body-background))"
+          : "var(--ck-graphic-primary-color, var(--ck-body-color))"
       }
     />
     <defs>
@@ -126,15 +114,13 @@ const Wallet = ({ inverted = false }) => (
         <stop
           stopColor={
             inverted
-              ? 'var(--ck-body-color-muted)'
-              : 'var(--ck-body-background-transparent, transparent)'
+              ? "var(--ck-body-color-muted)"
+              : "var(--ck-body-background-transparent, transparent)"
           }
         />
         <stop
           offset="1"
-          stopColor={
-            inverted ? 'var(--ck-body-color)' : 'var(--ck-body-background)'
-          }
+          stopColor={inverted ? "var(--ck-body-color)" : "var(--ck-body-background)"}
         />
       </linearGradient>
     </defs>
@@ -142,13 +128,7 @@ const Wallet = ({ inverted = false }) => (
 );
 
 const Send = (
-  <svg
-    width="41"
-    height="41"
-    viewBox="0 0 41 41"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="41" height="41" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M35.4446 0.839914L2.14484 10.7065C0.0395033 11.3303 -0.632966 13.9786 0.919705 15.5313L7.9624 22.574C9.47585 24.0874 11.8661 24.273 13.5951 23.0114L25.2866 14.4797C25.5558 14.2832 25.9281 14.3121 26.1638 14.5478C26.3998 14.7838 26.4285 15.1567 26.2313 15.426L17.6874 27.0937C16.4213 28.8228 16.6052 31.2168 18.1206 32.7322L25.1811 39.7926C26.7337 41.3453 29.382 40.6728 30.0058 38.5675L39.8724 5.2677C40.6753 2.55794 38.1544 0.037024 35.4446 0.839914Z"
       fill="var(--ck-graphic-secondary-color, white)"
@@ -157,13 +137,7 @@ const Send = (
 );
 
 const Receive = (
-  <svg
-    width="38"
-    height="44"
-    viewBox="0 0 38 44"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="38" height="44" viewBox="0 0 38 44" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       fillRule="evenodd"
       clipRule="evenodd"
@@ -174,7 +148,7 @@ const Receive = (
 );
 
 const Key = ({ ...props }) => {
-  const id = props?.id ?? '';
+  const id = props?.id ?? "";
   return (
     <svg
       {...props}
@@ -241,13 +215,7 @@ const Key = ({ ...props }) => {
 };
 
 const VitalikAddress = (
-  <svg
-    width="131"
-    height="14"
-    viewBox="0 0 131 14"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg width="131" height="14" viewBox="0 0 131 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
       d="M5.74805 13.2549C8.86816 13.2549 10.7227 10.6973 10.7227 6.63672C10.7227 2.57617 8.85059 0.0625 5.74805 0.0625C2.63672 0.0625 0.755859 2.59375 0.755859 6.64551C0.755859 10.7148 2.61914 13.2549 5.74805 13.2549ZM5.74805 11.4004C4.02539 11.4004 3.04102 9.64258 3.04102 6.63672C3.04102 3.68359 4.04297 1.91699 5.74805 1.91699C7.44434 1.91699 8.4375 3.6748 8.4375 6.64551C8.4375 9.65137 7.46191 11.4004 5.74805 11.4004Z"
       fill="var(--ck-body-color)"
@@ -317,27 +285,26 @@ export const SlideOne = ({ layoutId }: Slide) => {
   return (
     <div
       style={{
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <motion.div
-        initial={{ rotate: 90, scale: 0.2, x: '100%' }}
+        initial={{ rotate: 90, scale: 0.2, x: "100%" }}
         animate={{ rotate: 0, scale: 1, x: 0 }}
-        exit={{ rotate: 40, scale: 0.1, x: '70%' }}
+        exit={{ rotate: 40, scale: 0.1, x: "70%" }}
         style={{
           zIndex: 4,
-          position: 'relative',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
+          position: "relative",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
           width: 76,
           height: 76,
-          background: 'var(--ck-graphic-secondary-background, #6366F1)',
-          borderRadius: '50%',
-          boxShadow:
-            'var(--ck-graphic-secondary-box-shadow, 0px 2px 10px rgba(99, 102, 241, 0.3))',
+          background: "var(--ck-graphic-secondary-background, #6366F1)",
+          borderRadius: "50%",
+          boxShadow: "var(--ck-graphic-secondary-box-shadow, 0px 2px 10px rgba(99, 102, 241, 0.3))",
         }}
       >
         {Receive}
@@ -346,20 +313,18 @@ export const SlideOne = ({ layoutId }: Slide) => {
         key={layoutId}
         layoutId={layoutId}
         style={{
-          position: 'relative',
+          position: "relative",
           zIndex: 10,
-          margin: '0 -8px',
+          margin: "0 -8px",
           width: 112,
           height: 112,
         }}
       >
         <MainCircleInner
-          key={'SlideOneInner'}
+          key={"SlideOneInner"}
           style={{
-            background:
-              'var(--ck-graphic-primary-background, var(--ck-body-background))',
-            boxShadow:
-              'var(--ck-graphic-primary-box-shadow, 0px 3px 15px rgba(0, 0, 0, 0.1))',
+            background: "var(--ck-graphic-primary-background, var(--ck-body-background))",
+            boxShadow: "var(--ck-graphic-primary-box-shadow, 0px 3px 15px rgba(0, 0, 0, 0.1))",
           }}
           initial={{
             opacity: 0,
@@ -368,29 +333,28 @@ export const SlideOne = ({ layoutId }: Slide) => {
           exit={{ opacity: 0 }}
         >
           <BgLighten />
-          <motion.div style={{ zIndex: 2, position: 'relative' }}>
+          <motion.div style={{ zIndex: 2, position: "relative" }}>
             <Wallet />
           </motion.div>
         </MainCircleInner>
       </MainCircle>
 
       <motion.div
-        initial={{ rotate: -90, scale: 0.2, x: '-100%' }}
+        initial={{ rotate: -90, scale: 0.2, x: "-100%" }}
         animate={{ rotate: 0, scale: 1, x: 0 }}
-        exit={{ rotate: -40, scale: 0.1, x: '-70%' }}
+        exit={{ rotate: -40, scale: 0.1, x: "-70%" }}
         style={{
           zIndex: 4,
-          position: 'relative',
+          position: "relative",
           width: 76,
           height: 76,
-          background: 'var(--ck-graphic-secondary-background, #3897FB)',
-          borderRadius: '50%',
-          boxShadow:
-            'var(--ck-graphic-secondary-box-shadow, 0px 2px 10px rgba(56, 151, 251, 0.3))',
+          background: "var(--ck-graphic-secondary-background, #3897FB)",
+          borderRadius: "50%",
+          boxShadow: "var(--ck-graphic-secondary-box-shadow, 0px 2px 10px rgba(56, 151, 251, 0.3))",
         }}
       >
         <Center>
-          <div style={{ position: 'relative', left: -2, top: 3 }}>{Send}</div>
+          <div style={{ position: "relative", left: -2, top: 3 }}>{Send}</div>
         </Center>
       </motion.div>
     </div>
@@ -402,7 +366,7 @@ export const SlideTwo = ({ layoutId }: Slide) => {
     <>
       <div
         style={{
-          position: 'relative',
+          position: "relative",
           left: -14,
         }}
       >
@@ -411,7 +375,7 @@ export const SlideTwo = ({ layoutId }: Slide) => {
           layoutId={layoutId}
           style={{
             zIndex: 10,
-            position: 'absolute',
+            position: "absolute",
             left: 15,
             top: 12,
             width: 32,
@@ -419,15 +383,13 @@ export const SlideTwo = ({ layoutId }: Slide) => {
           }}
         >
           <MainCircleInner
-            key={'SlideTwoInner'}
+            key={"SlideTwoInner"}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             style={{
-              background:
-                'var(--ck-graphic-primary-background, var(--ck-body-background))',
-              boxShadow:
-                'var(--ck-graphic-primary-box-shadow, 0px 2px 5px rgba(37, 41, 46, 0.16))',
+              background: "var(--ck-graphic-primary-background, var(--ck-body-background))",
+              boxShadow: "var(--ck-graphic-primary-box-shadow, 0px 2px 5px rgba(37, 41, 46, 0.16))",
             }}
           >
             <Center>
@@ -441,27 +403,23 @@ export const SlideTwo = ({ layoutId }: Slide) => {
           exit={{ scale: 0.2 }}
           style={{
             zIndex: 7,
-            position: 'relative',
-            display: 'flex',
-            alignItems: 'center',
-            padding: '21px 56px',
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            padding: "21px 56px",
             paddingRight: 52,
-            background:
-              'var(--ck-graphic-primary-background, var(--ck-body-background))',
-            boxShadow:
-              'var(--ck-graphic-primary-box-shadow, 0px 2px 9px rgba(0, 0, 0, 0.07))',
-            borderRadius: 'var(--ck-border-radius, 16px)',
+            background: "var(--ck-graphic-primary-background, var(--ck-body-background))",
+            boxShadow: "var(--ck-graphic-primary-box-shadow, 0px 2px 9px rgba(0, 0, 0, 0.07))",
+            borderRadius: "var(--ck-border-radius, 16px)",
           }}
         >
           <BgLighten />
-          <div style={{ position: 'relative', zIndex: 2, top: 1, left: 1 }}>
-            {VitalikAddress}
-          </div>
+          <div style={{ position: "relative", zIndex: 2, top: 1, left: 1 }}>{VitalikAddress}</div>
         </motion.div>
         <motion.div
           style={{
             zIndex: 8,
-            position: 'absolute',
+            position: "absolute",
             top: -16,
             right: -28,
           }}
@@ -481,9 +439,9 @@ export const SlideThree = ({ layoutId }: Slide) => {
   return (
     <>
       <motion.div
-        key={'SlideThree'}
+        key={"SlideThree"}
         style={{
-          position: 'relative',
+          position: "relative",
         }}
       >
         <MainCircle
@@ -492,18 +450,18 @@ export const SlideThree = ({ layoutId }: Slide) => {
           initial={{ rotate: 80 }}
           style={{
             zIndex: 10,
-            position: 'relative',
+            position: "relative",
             width: 128,
             height: 128,
           }}
         >
           <MainCircleInner
-            key={'SlideThreeInner'}
+            key={"SlideThreeInner"}
             initial={{ opacity: 0, rotate: 100 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             style={{
-              overflow: 'hidden',
+              overflow: "hidden",
               background: `var(--ck-graphic-globe-background, radial-gradient(
               82.42% 82.42% at 50% 86.72%,
               rgba(255, 255, 255, 0.2) 0%,
@@ -511,14 +469,14 @@ export const SlideThree = ({ layoutId }: Slide) => {
             ),
             linear-gradient(180deg, #3897FB 0%, #5004F1 100%))`,
               boxShadow:
-                'var(--ck-graphic-globe-box-shadow, 0px -6px 20px rgba(56, 151, 251, 0.23))',
+                "var(--ck-graphic-globe-box-shadow, 0px -6px 20px rgba(56, 151, 251, 0.23))",
             }}
           >
             <SpinContainer
               style={
                 !Boolean(layoutId)
                   ? {
-                      animationPlayState: 'paused',
+                      animationPlayState: "paused",
                     }
                   : undefined
               }
@@ -658,26 +616,22 @@ export const SlideThree = ({ layoutId }: Slide) => {
               animate={Boolean(layoutId) ? pulseAnim : undefined}
               transition={{ ...pulseTransition }}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 inset: 0,
-                borderRadius: '50%',
-                boxShadow:
-                  '0 0 0 2px var(--ck-graphic-globe-lines, rgba(126, 112, 243, 1))',
+                borderRadius: "50%",
+                boxShadow: "0 0 0 2px var(--ck-graphic-globe-lines, rgba(126, 112, 243, 1))",
               }}
             />
             <motion.div
               key="pulseB"
-              initial={
-                !Boolean(layoutId) ? { scale: 1.2, opacity: 0.25 } : undefined
-              }
+              initial={!Boolean(layoutId) ? { scale: 1.2, opacity: 0.25 } : undefined}
               animate={Boolean(layoutId) ? pulseAnim : undefined}
               transition={{ ...pulseTransition, delay: 0.5 }}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 inset: 0,
-                borderRadius: '50%',
-                boxShadow:
-                  '0 0 0 2px var(--ck-graphic-globe-lines, rgba(126, 112, 243, 1))',
+                borderRadius: "50%",
+                boxShadow: "0 0 0 2px var(--ck-graphic-globe-lines, rgba(126, 112, 243, 1))",
               }}
             />
           </motion.div>
@@ -689,25 +643,23 @@ export const SlideThree = ({ layoutId }: Slide) => {
           exit={{ zIndex: 3, scale: 0.2, y: -25, x: 15 }}
           style={{
             zIndex: 12,
-            borderRadius: '50%',
-            position: 'absolute',
+            borderRadius: "50%",
+            position: "absolute",
             bottom: -4,
             right: -4,
             width: 54,
             height: 54,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             padding: 13,
-            background:
-              'var(--ck-graphic-compass-background, var(--ck-body-background))',
-            boxShadow:
-              'var(--ck-graphic-compass-box-shadow, 0px 2px 9px rgba(0, 0, 0, 0.15))',
+            background: "var(--ck-graphic-compass-background, var(--ck-body-background))",
+            boxShadow: "var(--ck-graphic-compass-box-shadow, 0px 2px 9px rgba(0, 0, 0, 0.15))",
           }}
         >
           <BgLighten />
           <motion.div
-            style={{ zIndex: 2, position: 'absolute' }}
+            style={{ zIndex: 2, position: "absolute" }}
             initial={{ rotate: -170 }}
             animate={{ rotate: 0 }}
             exit={{
@@ -715,7 +667,7 @@ export const SlideThree = ({ layoutId }: Slide) => {
               transition: { duration: 0 }, // needed to avoid AnimatePresence taking too long to unmount the animation which causes issues on page close
             }}
             transition={{
-              type: 'spring',
+              type: "spring",
               stiffness: 6,
               damping: 0.9,
               mass: 0.2,

package/src/connectkit/components/Pages/About/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
 import {
   ImageContainer,
   ImageContainerInner,
@@ -8,22 +8,22 @@ import {
   Slide,
   Dots,
   Dot,
-} from './styles';
+} from "./styles";
 
 import {
   PageContent,
   ModalBody,
   ModalContent,
   ModalH1,
-} from '../../Common/Modal/styles';
+  Button,
+  OrDivider,
+  useLocales,
+  FitText,
+  useContext,
+} from "@multiplatform.one/connectkit";
 
-import Button from '../../Common/Button';
-import { Easing, SlideOne, SlideThree, SlideTwo } from './graphics';
-import { AnimatePresence, MotionConfig } from 'framer-motion';
-import { OrDivider } from '../../Common/Modal';
-import useLocales from '../../../hooks/useLocales';
-import FitText from '../../Common/FitText';
-import { useContext } from '../../ConnectKit';
+import { Easing, SlideOne, SlideThree, SlideTwo } from "./graphics";
+import { AnimatePresence, MotionConfig } from "framer-motion";
 
 const About: React.FC = () => {
   const locales = useLocales({
@@ -31,8 +31,7 @@ const About: React.FC = () => {
   });
   const context = useContext();
 
-  const ctaUrl =
-    context.options?.ethereumOnboardingUrl ?? locales.aboutScreen_ctaUrl;
+  const ctaUrl = context.options?.ethereumOnboardingUrl ?? locales.aboutScreen_ctaUrl;
 
   const [ready, setReady] = useState(true);
   const [slider, setSlider] = useState(0);
@@ -53,7 +52,7 @@ const About: React.FC = () => {
   const isSwipe = () => {
     if (sliderRef.current) {
       const { overflow } = getComputedStyle(sliderRef.current);
-      return overflow !== 'visible';
+      return overflow !== "visible";
     }
     return false;
   };
@@ -118,33 +117,21 @@ const About: React.FC = () => {
   const sliderRef = useRef<any>(null);
   useEffect(() => {
     if (!sliderRef.current) return;
-    sliderRef.current.addEventListener('scroll', onScroll);
-    sliderRef.current.addEventListener('touchmove', onTouchMove);
-    sliderRef.current.addEventListener('touchend', onTouchEnd);
+    sliderRef.current.addEventListener("scroll", onScroll);
+    sliderRef.current.addEventListener("touchmove", onTouchMove);
+    sliderRef.current.addEventListener("touchend", onTouchEnd);
     return () => {
       if (!sliderRef.current) return;
-      sliderRef.current.removeEventListener('scroll', onScroll);
-      sliderRef.current.removeEventListener('touchmove', onTouchMove);
-      sliderRef.current.removeEventListener('touchend', onTouchEnd);
+      sliderRef.current.removeEventListener("scroll", onScroll);
+      sliderRef.current.removeEventListener("touchmove", onTouchMove);
+      sliderRef.current.removeEventListener("touchend", onTouchEnd);
     };
   }, [sliderRef]);
 
   const graphics: React.ReactNode[] = [
-    <SlideOne
-      layoutId={'graphicCircle'}
-      duration={animationDuration}
-      ease={animationEase}
-    />,
-    <SlideTwo
-      layoutId={'graphicCircle'}
-      duration={animationDuration}
-      ease={animationEase}
-    />,
-    <SlideThree
-      layoutId={'graphicCircle'}
-      duration={animationDuration}
-      ease={animationEase}
-    />,
+    <SlideOne layoutId={"graphicCircle"} duration={animationDuration} ease={animationEase} />,
+    <SlideTwo layoutId={"graphicCircle"} duration={animationDuration} ease={animationEase} />,
+    <SlideThree layoutId={"graphicCircle"} duration={animationDuration} ease={animationEase} />,
   ];
 
   const mobileGraphics: React.ReactNode[] = [
@@ -156,8 +143,8 @@ const About: React.FC = () => {
   // Adjust height of ModalBody to fit content based on language
   const slideHeight = (() => {
     switch (context.options?.language) {
-      case 'en-US':
-      case 'zh-CN':
+      case "en-US":
+      case "zh-CN":
         return 64;
       default:
         return 84;
@@ -201,20 +188,14 @@ const About: React.FC = () => {
               ease: animationEase,
             }}
           >
-            <AnimatePresence
-              initial={false}
-              onExitComplete={() => setReady(true)}
-            >
+            <AnimatePresence initial={false} onExitComplete={() => setReady(true)}>
               {graphics.map(
                 (g, i) =>
                   slider === i && (
-                    <ImageContainerInner
-                      key={i}
-                      style={{ position: 'absolute' }}
-                    >
+                    <ImageContainerInner key={i} style={{ position: "absolute" }}>
                       {g}
                     </ImageContainerInner>
-                  )
+                  ),
               )}
             </AnimatePresence>
           </MotionConfig>
@@ -229,14 +210,10 @@ const About: React.FC = () => {
                       duration: 0,
                     }}
                   >
-                    <ImageContainerInner>
-                      {mobileGraphics[i]}
-                    </ImageContainerInner>
+                    <ImageContainerInner>{mobileGraphics[i]}</ImageContainerInner>
                   </MotionConfig>
                 </MobileImageContainer>
-                <ModalContent style={{ gap: 8, paddingBottom: 0 }}>
-                  {s}
-                </ModalContent>
+                <ModalContent style={{ gap: 8, paddingBottom: 0 }}>{s}</ModalContent>
               </Slide>
             ))}
           </AnimatePresence>

package/src/connectkit/components/Pages/About/styles.ts

@@ -1,7 +1,7 @@
-import { motion } from 'framer-motion';
-import styled from './../../../styles/styled';
-import { css } from 'styled-components';
-import defaultTheme from '../../../constants/defaultTheme';
+import { motion } from "framer-motion";
+import { styled } from "@multiplatform.one/connectkit";
+import { css } from "styled-components";
+import { defaultTheme } from "@multiplatform.one/connectkit";
 
 const imageHeight = 208;
 
@@ -117,14 +117,16 @@ export const Dot = styled.button<{ $active: boolean }>`
     }
   }
   &:before {
-    content: '';
+    content: "";
     display: block;
     width: 16px;
     height: 3px;
     opacity: 0.12;
     border-radius: 4px;
     background: var(--ck-accent-color, var(--ck-body-color));
-    transition: transform 200ms ease, opacity 180ms ease;
+    transition:
+      transform 200ms ease,
+      opacity 180ms ease;
   }
   ${(props) =>
     props.$active