var Component=(()=>{var p=Object.create;var a=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var C=(h,i)=>()=>(i||h((i={exports:{}}).exports,i),i.exports),D=(h,i)=>{for(var l in i)a(h,l,{get:i[l],enumerable:!0})},k=(h,i,l,e)=>{if(i&&typeof i=="object"||typeof i=="function")for(let n of g(i))!A.call(h,n)&&n!==l&&a(h,n,{get:()=>i[n],enumerable:!(e=F(i,n))||e.enumerable});return h};var B=(h,i,l)=>(l=h!=null?p(y(h)):{},k(i||!h||!h.__esModule?a(l,"default",{value:h,enumerable:!0}):l,h)),o=h=>k(a({},"__esModule",{value:!0}),h);var r=C((b,d)=>{d.exports=_jsx_runtime});var u={};D(u,{default:()=>f,frontmatter:()=>E});var s=B(r()),E={title:"Day 2 - Mastering Framer Motion"};function c(h){let i=Object.assign({h1:"h1",a:"a",figure:"figure",figcaption:"figcaption",pre:"pre",code:"code",span:"span"},h.components),{Tabs:l,Tab:e,ComponentPreview:n}=i;return n||t("ComponentPreview",!0),e||t("Tab",!0),l||t("Tabs",!0),(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(i.h1,{id:"day-2---mastering-framer-motion",children:(0,s.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#day-2---mastering-framer-motion",children:"Day 2 - Mastering Framer Motion"})}),` `,(0,s.jsxs)(l,{id:"day-2",children:[(0,s.jsx)(e,{label:"Preview",children:(0,s.jsx)(n,{name:"framer-motion-day-2"})}),(0,s.jsx)(e,{label:"Code",children:(0,s.jsxs)(i.figure,{"data-rehype-pretty-code-figure":"",children:[(0,s.jsx)(i.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"github-light-default github-dark-dimmed",children:"components/day-1.tsx"}),(0,s.jsx)(i.pre,{tabIndex:"0","data-language":"tsx","data-theme":"github-light-default github-dark-dimmed",children:(0,s.jsxs)(i.code,{"data-line-numbers":"","data-language":"tsx","data-theme":"github-light-default github-dark-dimmed",style:{display:"grid"},"data-line-numbers-max-digits":"2",children:[(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"use client"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:";"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" React, { useState } "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "react"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:";"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"import"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" { AnimatePresence, MotionConfig, motion } "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"from"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "framer-motion"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:";"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"export"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" default"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" function"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#DCBDFB"},children:" Day2"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#953800","--shiki-dark":"#F69D50"},children:"() "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" const"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" ["}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:"toggle"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:", "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:"setToggle"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"] "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#DCBDFB"},children:" useState"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:"false"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:");"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" return"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" ("})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"h-screen max-h-[696px] w-full max-w-[561px] rounded-[14px] bg-[#0D0D0D] p-3 shadow-[0px_8px_66px_19px_rgba(0,0,0,0.28)]"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex h-full w-full flex-col rounded-2xl border border-[#4E4E4E]"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex grow items-center justify-center"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" {"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#768390"},children:"/* Toggle */"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"MotionConfig"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" transition"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" duration: "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:"0.4"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" type: "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"tween"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" ease: "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"easeInOut"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" >"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"AnimatePresence"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" initial"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:"false"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"motion.button"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:"`relative isolate flex h-[172px] w-[332px] items-center rounded-full p-2 ${"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"toggle"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" ?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "justify-end"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "justify-start"}`'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" initial"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" backgroundColor: "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"#272727"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" boxShadow: "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"0px 0px 19.8px 0px rgba(0, 0, 0, 0.35) inset"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" animate"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{ backgroundColor: toggle "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#ffffff"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#272727"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" onClick"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"() "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"=>"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#8250DF","--shiki-dark":"#DCBDFB"},children:" setToggle"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"("}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"!"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"toggle)"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" >"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"motion.div"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"absolute left-0 -z-10 flex w-full justify-between text-4xl font-medium tracking-[0.0475rem]"'})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" animate"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{ color: toggle "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#797979"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#A2A2A2"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" >"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"span"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex w-full justify-center"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">ON"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"span"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex w-full justify-center"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">OFF"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" {"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#6E7781","--shiki-dark":"#768390"},children:"/* Main circle */"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"motion.div"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" layout"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex aspect-square h-full rounded-full border-2 p-2 shadow-[0px_12px_43px_0px_rgba(0,0,0,0.70)]"'})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" animate"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" backgroundColor: toggle "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#ffffff"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#363636"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" borderColor: toggle "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#D8D8D8"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#535353"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" >"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"motion.div"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"h-full w-full rounded-full"'})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" animate"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"={"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"{"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" color: toggle "}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#D6D6D6"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "#464646"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" boxShadow: toggle"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" ?"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "2px 80px 72.5px -31px rgba(0, 0, 0, 0.2) inset, 0px 4px 13.4px 0px rgba(0, 0, 0, 0.43)"'})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:" :"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:' "2px 80px 72.5px -31px rgba(0, 0, 0, 0.49) inset, 0px 4px 13.4px 0px rgba(0, 0, 0, 0.43)"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:","})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" }"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"}"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" >"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"div"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"flex h-[196px] items-center justify-center border-t border-[#4e4e4e]"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" <"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#116329","--shiki-dark":"#8DDB8C"},children:"h2"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0550AE","--shiki-dark":"#6CB6FF"},children:" className"}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#CF222E","--shiki-dark":"#F47067"},children:"="}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#0A3069","--shiki-dark":"#96D0FF"},children:'"text-3xl font-medium tracking-[-0.0175rem] text-white"'}),(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:">"})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" Skeuomorphic Toggle"})}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsxs)(i.span,{"data-line":"",children:[(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" "})]}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:" );"})}),` `,(0,s.jsx)(i.span,{"data-line":"",children:(0,s.jsx)(i.span,{style:{"--shiki-light":"#1F2328","--shiki-dark":"#ADBAC7"},children:"}"})})]})})]})})]})]})}function m(h={}){let{wrapper:i}=h.components||{};return i?(0,s.jsx)(i,Object.assign({},h,{children:(0,s.jsx)(c,h)})):c(h)}var f=m;function t(h,i){throw new Error("Expected "+(i?"component":"object")+" `"+h+"` to be defined: you likely forgot to import, pass, or provide it.")}return o(u);})(); ;return Component;