{"version":3,"file":"static/chunks/3165-e42b65fc73837ddd.js","mappings":"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","sources":["webpack://_N_E/./src/components/ButtonPoofy/ButtonPoofy.tsx","webpack://_N_E/./src/components/ButtonPoofy/index.ts","webpack://_N_E/./src/components/CodeSnippet/CodeSnippetProvider.tsx","webpack://_N_E/./src/components/CodeSnippet/SnippetJuggler.tsx","webpack://_N_E/./src/components/CodeSnippet/CopyButton.tsx","webpack://_N_E/./src/components/CodeSnippet/WithCopyButton.tsx","webpack://_N_E/./src/components/ColorModeContainer/ColorModeContainer.tsx","webpack://_N_E/./src/components/ColorModeContainer/index.ts","webpack://_N_E/./src/components/Term/Term.tsx","webpack://_N_E/./src/components/Term/index.ts","webpack://_N_E/./src/components/Controls/New.tsx","webpack://_N_E/./src/components/Controls/ControlWrapper.tsx","webpack://_N_E/./src/components/Controls/DottedControlBackground.tsx","webpack://_N_E/./src/components/Controls/SliderControl.tsx","webpack://_N_E/./src/components/Controls/ValuePreview.tsx","webpack://_N_E/./src/components/FadeIn/FadeIn.tsx","webpack://_N_E/./src/components/FadeIn/index.ts","webpack://_N_E/./src/components/Goodies/shared/SaleSuperheader.js","webpack://_N_E/./src/components/Goodies/shared/GeneratorHeader.js","webpack://_N_E/./src/components/Goodies/shared/GeneratorNewsletterSignup.tsx","webpack://_N_E/./src/components/InPortal/InPortal.tsx","webpack://_N_E/./src/components/InPortal/index.ts","webpack://_N_E/./src/components/JericaMascot/JericaMascot.tsx","webpack://_N_E/./src/components/JericaMascot/index.ts","webpack://_N_E/./src/components/Logo/Logo.tsx","webpack://_N_E/./src/components/Logo/index.ts","webpack://_N_E/./src/components/MaxWidthWrapper/MaxWidthWrapper.tsx","webpack://_N_E/./src/components/MaxWidthWrapper/index.ts","webpack://_N_E/./src/components/OverscrollColor/OverscrollColor.tsx","webpack://_N_E/./src/components/OverscrollColor/index.ts","webpack://_N_E/./src/components/Paragraph/Paragraph.tsx","webpack://_N_E/./src/components/Paragraph/index.ts","webpack://_N_E/./src/components/SiteFooter/FooterLink.tsx","webpack://_N_E/./src/components/SiteFooter/FooterCategoryList.tsx","webpack://_N_E/./src/components/SiteFooter/SiteFooter.tsx","webpack://_N_E/./src/components/SiteFooter/index.ts","webpack://_N_E/./src/components/Slider/Slider.tsx","webpack://_N_E/./src/components/Slider/index.ts","webpack://_N_E/./src/components/Spicy/Spicy.tsx","webpack://_N_E/./src/components/Spicy/index.ts","webpack://_N_E/./src/components/ConfettiGeyser/index.ts","webpack://_N_E/./src/components/SubscribeGeyser/SubscribeGeyser.tsx","webpack://_N_E/./src/components/SubscribeGeyser/index.ts","webpack://_N_E/./src/components/TextInput/TextInput.tsx","webpack://_N_E/./src/components/TextInput/index.ts","webpack://_N_E/./src/components/Tooltip/index.ts","webpack://_N_E/./src/helpers/category.helpers.ts","webpack://_N_E/./src/hooks/use-bounding-box.ts","webpack://_N_E/./src/hooks/use-has-hydrated.ts","webpack://_N_E/./src/hooks/use-window-dimensions.ts","webpack://_N_E/./src/components/ButtonPoofy/ButtonPoofy.linaria.module.css","webpack://_N_E/./src/components/CodeSnippet/AnnotatedContainer.linaria.module.css","webpack://_N_E/./src/components/CodeSnippet/CodeWrapper.linaria.module.css","webpack://_N_E/./src/components/CodeSnippet/CopyButton.linaria.module.css","webpack://_N_E/./src/components/CodeSnippet/SnippetJuggler.linaria.module.css","webpack://_N_E/./src/components/CodeSnippet/WithCopyButton.linaria.module.css","webpack://_N_E/./src/components/Controls/ControlWrapper.linaria.module.css","webpack://_N_E/./src/components/Controls/DottedControlBackground.linaria.module.css","webpack://_N_E/./src/components/Controls/New.linaria.module.css","webpack://_N_E/./src/components/Controls/ValuePreview.linaria.module.css","webpack://_N_E/./src/components/FadeIn/FadeIn.linaria.module.css","webpack://_N_E/./src/components/Goodies/shared/GeneratorHeader.linaria.module.css","webpack://_N_E/./src/components/Goodies/shared/GeneratorNewsletterSignup.linaria.module.css","webpack://_N_E/./src/components/Goodies/shared/SaleSuperheader.linaria.module.css","webpack://_N_E/./src/components/JericaMascot/JericaMascot.linaria.module.css","webpack://_N_E/./src/components/Paragraph/Paragraph.linaria.module.css","webpack://_N_E/./src/components/Slider/Slider.linaria.module.css","webpack://_N_E/./src/components/Spicy/Spicy.linaria.module.css","webpack://_N_E/./src/components/Term/Term.linaria.module.css","webpack://_N_E/./src/components/TextInput/TextInput.linaria.module.css"],"sourcesContent":["import * as React from 'react';\nimport { styled } from '@linaria/react';\n\nfunction ButtonPoofy({\n  children,\n  ...delegated\n}: React.HTMLAttributes<HTMLButtonElement>) {\n  return (\n    <Button {...delegated}>\n      <ButtonContent>{children}</ButtonContent>\n    </Button>\n  );\n}\n\nconst Button = styled.button`\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 6px;\n  color: white;\n  font-weight: var(--font-weight-medium);\n  font-size: 1.125rem;\n  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);\n  background: linear-gradient(\n    15deg,\n    var(--poofy-dark, hsl(210deg 30% 10%)),\n    var(--poofy-light, hsl(250deg 40% 35%))\n  );\n\n  &:focus-visible {\n    outline-color: var(--color-primary);\n    outline-offset: 4px;\n  }\n\n  &:disabled,\n  &[data-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    top: 2px;\n    left: 6px;\n    right: 6px;\n    height: 20%;\n    background: linear-gradient(\n      hsl(0deg 0% 100% / 0.3),\n      hsl(0deg 0% 100% / 0)\n    );\n    border-radius: 20px;\n    border-top-left-radius: 20px 14px;\n    border-bottom-left-radius: 100px 30px;\n    border-top-right-radius: 20px 14px;\n    border-bottom-right-radius: 100px 30px;\n    pointer-events: none;\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    bottom: 0px;\n    left: 0;\n    right: 0;\n    height: 30%;\n    background: linear-gradient(\n      hsl(0deg 0% 0% / 0),\n      hsl(0deg 0% 0% / 0.17)\n    );\n    border-radius: 0px 0px 4px 4px;\n    pointer-events: none;\n  }\n\n  &:active {\n    filter: brightness(90%);\n  }\n\n  &:active:before {\n    top: 0;\n    left: 0;\n    right: 0;\n    height: 30%;\n    background: linear-gradient(\n      hsl(0deg 0% 0% / 0.17),\n      hsl(0deg 0% 0% / 0)\n    );\n    border-radius: 4px 4px 0px 0px;\n  }\n\n  &:active:after {\n    top: revert;\n    left: 2px;\n    right: 2px;\n    bottom: 2px;\n    height: 20%;\n    background: linear-gradient(\n      hsl(0deg 0% 100% / 0),\n      hsl(0deg 0% 100% / 0.3)\n    );\n    border-radius: 20px;\n    border-bottom-left-radius: 10px 14px;\n    border-top-left-radius: 100px 30px;\n    border-bottom-right-radius: 10px 14px;\n    border-top-right-radius: 100px 30px;\n  }\n`;\n\nconst ButtonContent = styled.span`\n  ${Button}:active & {\n    transform: scale(0.9);\n  }\n`;\n\nexport default ButtonPoofy;\n","export { default } from './ButtonPoofy';\n","/*\n  When I use SnippetJuggler, the component is owned by a Server Component, and there's no way to pass dynamic props through, to change the code.\n\n  We expect this provider to wrap around SnippetJuggler, and to provide the correct code and language.\n*/\nimport * as React from 'react';\n\nimport type { ContextValues } from './CodeSnippet.types';\n\nexport const CodeSnippetContext = React.createContext<ContextValues>({\n  code: '',\n  lang: '',\n});\n\ninterface Props extends ContextValues {\n  children: React.ReactNode;\n}\n\nfunction CodeSnippetProvider({ code, lang, children }: Props) {\n  return (\n    <CodeSnippetContext.Provider value={{ code, lang }}>\n      {children}\n    </CodeSnippetContext.Provider>\n  );\n}\n\nexport default React.memo(CodeSnippetProvider);\n","/*\n  Shiki is nice and simple inside Server Components, but what if the code snippet is interactive?\n\n  Essentially what we want to do is render two things:\n  1. The server-rendered snippet.\n  2. A client-only snippet that gets swapped in after hydration.\n\n  The tricky thing is that we can't do the swap right after hydration. Shiki’s `highlighter` is asynchronous, it takes some time to load. And even then, if we swap RIGHT after it loads, we'll see a flicker as the UI disappears while the highlighter works.\n\n  So, we create a CSS grid with a single cell, and we assign both the server snippet and the client snippet to this cell. The client snippet receives an `onMount` callback, which it calls after the client snippet is genuinely ready to be displayed (see `ClientOnlySnippet` for info about that).\n\n  We lazy-load ClientOnlySnippet to avoid doing unnecessary work during the SSR, and to speed up Time To Interactive.\n*/\n'use client';\n\nimport * as React from 'react';\nimport { styled } from '@linaria/react';\nimport dynamic from 'next/dynamic';\n\nimport { ColorMode } from '@/constants';\n\nimport type {\n  SingleAnnotation,\n  MultipleAnnotations,\n} from '@/components/CodeSnippet/CodeSnippet.types';\n\nconst LazyClientOnlySnippet = dynamic(\n  () => import('./ClientOnlySnippet'),\n  { ssr: false }\n);\n\nfunction SnippetJuggler({\n  serverSnippet,\n  ...delegated\n}: {\n  serverSnippet: React.ReactNode;\n  lockedToColorMode?: ColorMode | false;\n  includeContentStyles?: boolean;\n  omitCopyButton?: boolean;\n  highlight?: SingleAnnotation | MultipleAnnotations;\n}) {\n  const [mounted, setMounted] = React.useState(false);\n\n  return (\n    <Grid>\n      {mounted ? null : <Child>{serverSnippet}</Child>}\n      <Child\n        style={{\n          opacity: mounted ? 1 : 0,\n          pointerEvents: mounted ? 'auto' : 'none',\n        }}\n      >\n        <LazyClientOnlySnippet\n          {...delegated}\n          onMount={() => setMounted(true)}\n        />\n      </Child>\n    </Grid>\n  );\n}\n\nconst Grid = styled.div`\n  display: grid;\n`;\n\nconst Child = styled.div`\n  grid-area: 1 / 1;\n`;\n\nexport default SnippetJuggler;\n","'use client';\n\nimport * as React from 'react';\nimport { styled } from '@linaria/react';\nimport { useSpring, animated } from 'react-spring';\nimport { Clipboard, Check } from 'lucide-react';\n\nimport useBoop from '@/hooks/use-boop';\nimport useHasHydrated from '@/hooks/use-has-hydrated';\n\nimport {\n  InfoAside,\n  WarningAside,\n  SuccessAside,\n} from '@/components/Aside';\nimport VisuallyHidden from '@/components/VisuallyHidden';\nimport Spinner from '@/components/Spinner';\n\nimport AnnotatedContainer from './AnnotatedContainer';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  handleCopy: (copyId: number) => void;\n}\n\nfunction CopyButton({ handleCopy, ...delegated }: Props) {\n  const [copyId, setCopyId] = React.useState<number | null>(null);\n  const [rotation, setRotation] = React.useState(0);\n  const [wrapperStyle, wrapperTrigger] = useBoop({ scale: 1.05 });\n\n  const hasHydrated = useHasHydrated();\n\n  const style = useSpring({\n    transform: `rotate(${rotation}deg)`,\n    config: {\n      tension: 300,\n      friction: 10,\n    },\n  });\n\n  const timeoutId = React.useRef<number>();\n\n  React.useEffect(() => {\n    if (!copyId) {\n      return;\n    }\n\n    // let timeoutId: number;\n    timeoutId.current = window.setTimeout(() => {\n      setCopyId(null);\n    }, 3000);\n\n    return () => {\n      if (timeoutId.current) {\n        window.clearTimeout(timeoutId.current);\n      }\n    };\n  }, [copyId]);\n\n  return (\n    <Wrapper\n      {...delegated}\n      onMouseDown={() => {\n        setRotation(10);\n      }}\n      onMouseEnter={wrapperTrigger}\n      onClick={() => {\n        const newCopyId = Date.now();\n        handleCopy(newCopyId);\n        setRotation(-10);\n\n        window.setTimeout(() => {\n          setRotation(0);\n        }, 150);\n\n        window.setTimeout(() => {\n          setCopyId(newCopyId);\n        }, 0);\n      }}\n    >\n      <IconOuterWrapper style={wrapperStyle}>\n        <IconWrapper style={style}>\n          {/* We never want there to be confusion around whether the app is interactive or not. Render a spinner which will be replaced after hydration */}\n          {hasHydrated ? (\n            <Clipboard size={24} />\n          ) : (\n            <Spinner size={24} />\n          )}\n          <CheckWrapper\n            style={{\n              opacity: copyId ? 1 : 0,\n              transform: copyId ? 'scale(1)' : 'scale(0)',\n            }}\n          >\n            <Check size={12} strokeWidth={4} />\n          </CheckWrapper>\n          <HiddenText>Copy to clipboard</HiddenText>\n        </IconWrapper>\n      </IconOuterWrapper>\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled.button`\n  position: sticky;\n  z-index: 2;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: var(--copy-button-size);\n  height: var(--copy-button-size);\n  /*\n    --copy-button-sticky-top is used when this code snippet is rendered on a page with a sticky header (eg. within blog posts). It ensures the button appears to stack below the header. It's set in CodeWrapper.\n    --copy-button-margin is the buffer between the copy button and the edge of the snippet. It's defined in CodeWrapper, since it's also used there for some calculations.\n  */\n  top: calc(\n    var(--copy-button-sticky-top, 0px) + var(--copy-button-margin)\n  );\n  transform: translateX(calc(var(--copy-button-margin) * -1));\n  margin-block: var(--copy-button-margin);\n  margin-left: auto;\n  margin-right: 0;\n  border: 1px solid;\n  color: var(--color-gray-800);\n  border-radius: 5px;\n  opacity: 0;\n  transition: opacity 250ms;\n  transition-delay: 1000ms;\n\n  ${AnnotatedContainer}:hover &,\n  &:focus-visible {\n    opacity: 1;\n    transition-delay: 0ms;\n  }\n\n  /*\n    The color mode can be set in two ways:\n    • The global page-level value, on the <html> tag\n    • A local value, on this element via data-locked-to-color-mode\n\n    This complicated selector ensures that we prioritize the local value, while still following the global value otherwise\n  */\n  html[data-color-mode='light']\n    &:not([data-locked-to-color-mode='dark']),\n  &[data-locked-to-color-mode='light'] {\n    background: var(--color-info-300);\n    border-color: var(--color-info-100);\n  }\n  html[data-color-mode='dark']\n    &:not([data-locked-to-color-mode='light']),\n  &[data-locked-to-color-mode='dark'] {\n    background: var(--color-background);\n    border-color: var(--color-gray-200);\n  }\n\n  html[data-color-mode='dark'] ${InfoAside} & {\n    border-color: var(--color-info-300);\n    background: var(--color-info-200);\n  }\n  html[data-color-mode='dark'] ${WarningAside} & {\n    border-color: var(--color-warning-300);\n    background: var(--color-warning-200);\n  }\n  html[data-color-mode='dark'] ${SuccessAside} & {\n    border-color: var(--color-success-300);\n    background: var(--color-success-200);\n  }\n\n  html[data-color-mode='light'] ${InfoAside} & {\n    border-color: var(--color-info-200);\n    background: var(--color-info-300);\n  }\n  html[data-color-mode='light'] ${WarningAside} & {\n    border-color: var(--color-warning-200);\n    background: var(--color-warning-300);\n  }\n  html[data-color-mode='light'] ${SuccessAside} & {\n    border-color: var(--color-success-200);\n    background: var(--color-success-300);\n  }\n`;\n\nconst IconOuterWrapper = styled(animated.span)`\n  display: block;\n  will-change: transform;\n`;\n\nconst IconWrapper = styled(animated.span)`\n  display: block;\n  will-change: transform;\n  transform-origin: 50% 20%;\n\n  svg {\n    display: block;\n  }\n`;\n\nconst CheckWrapper = styled.span`\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 2px;\n  bottom: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: hsl(180deg 100% 30%);\n  color: oklch(0.59 0.14 194.88);\n  transition:\n    opacity 500ms,\n    transform 650ms;\n  transition-delay: 200ms;\n`;\n\nconst HiddenText = styled(VisuallyHidden)`\n  /* If the user wants to copy the code by selecting all of the stuff inside, we don't want them to also copy the “Copy to clipboard” hidden text: */\n  user-select: none;\n`;\n\nexport default CopyButton;\n","'use client';\n\nimport * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport { ColorMode } from '@/constants';\nimport { copyToClipboard } from '@/utils';\nimport useInterval from '@/hooks/use-interval';\n\nimport CopyButton from './CopyButton';\n\ninterface Props {\n  code: string;\n  lockedToColorMode?: ColorMode | false;\n  children: React.ReactNode;\n}\n\nfunction WithCopyButton({\n  code,\n  lockedToColorMode,\n  children,\n}: Props) {\n  const [copyIds, setCopyIds] = React.useState<Array<number>>([]);\n\n  // Clean up old copy IDs, to prevent infinite memory buildup.\n  useInterval(() => {\n    if (copyIds.length === 0) {\n      return;\n    }\n\n    setCopyIds((currentValue) => {\n      return currentValue.filter((id) => Date.now() - id < 5000);\n    });\n  }, 5000);\n\n  const handleCopy = React.useCallback(() => {\n    copyToClipboard(code);\n    setCopyIds((currentValue) => [...currentValue, Date.now()]);\n  }, [code]);\n\n  return (\n    <>\n      <CopyButton\n        handleCopy={handleCopy}\n        data-locked-to-color-mode={lockedToColorMode}\n      />\n\n      {children}\n\n      {copyIds.map((id) => (\n        <CopyEffectWrapper key={id}>\n          <CopyEffect data-locked-to-color-mode={lockedToColorMode} />\n        </CopyEffectWrapper>\n      ))}\n    </>\n  );\n}\n\nconst CopyEffectWrapper = styled.div`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n  overflow: clip;\n  pointer-events: none;\n`;\n\nconst CopyEffect = styled.div`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    to right,\n    transparent 30%,\n    var(--copy-color) 48%,\n    var(--copy-color) 52%,\n    transparent 70%\n  );\n  animation:\n    copy 800ms both ease-in-out,\n    fadeInOut 1000ms ease-in-out both;\n  will-change: transform;\n  mix-blend-mode: var(--blend-mode);\n\n  /*\n    The color mode can be set in two ways:\n    • The global page-level value, on the <html> tag\n    • A local value, on this element via data-locked-to-color-mode\n\n    This complicated selector ensures that we prioritize the local value, while still following the global value otherwise\n  */\n  html[data-color-mode='light']\n    &:not([data-locked-to-color-mode='dark']),\n  &[data-locked-to-color-mode='light'] {\n    --copy-color: hsl(0deg 0% 100% / 0.75);\n    --blend-mode: overlay;\n  }\n  html[data-color-mode='dark']\n    &:not([data-locked-to-color-mode='light']),\n  &[data-locked-to-color-mode='dark'] {\n    --copy-color: hsl(210deg 15% 60% / 0.2);\n    --blend-mode: lighten;\n  }\n\n  @keyframes copy {\n    0% {\n      transform: translateX(-50%);\n    }\n    100% {\n      transform: translateX(50%);\n    }\n  }\n  @keyframes fadeInOut {\n    0% {\n      opacity: 0;\n    }\n    20% {\n      opacity: 1;\n    }\n    60% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n`;\n\nexport default WithCopyButton;\n","/**\n  This component allows us to create pockets of DOM that apply a specific color mode, regardless of the user's settings. For example, <Playground> should always be dark.\n\n  NOTE: Unlike ColorModeContainer in Course Platform, this one doesn’t inherit the default value from context. That's because it would lead to a FOUC: the context value isn't known during the initial SSR render. If I want a chunk of the site to be colored based on the global color mode preference, I should use the LIGHT_COLORS_CSS / DARK_COLORS_CSS strings. See `/app/email/[emailSlug]/page.tsx` for an example (the Content styled component).\n*/\n\nimport * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport {\n  LIGHT_COLORS_CSS,\n  DARK_COLORS_CSS,\n  LIGHT_COLORS,\n  ColorMode,\n} from '@/constants';\n\nexport interface Props extends React.HTMLAttributes<HTMLDivElement> {\n  colorMode: ColorMode;\n  // For light containers In Dark Mode, we set the background to --color-adaptive-white instead of the standard white, to make it easier on the eyes. Sometimes, though, this causes contrast issues with other elements. We can disable this behavior by setting useAdaptiveColors to false.\n  useAdaptiveColors?: boolean;\n  forwardedAs?: React.ElementType;\n}\n\nfunction ColorModeContainer(\n  {\n    colorMode,\n    useAdaptiveColors = true,\n    forwardedAs = 'div',\n    ...delegated\n  }: Props,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const Wrapper = colorMode === 'light' ? LightWrapper : DarkWrapper;\n\n  return (\n    <Wrapper\n      ref={ref}\n      as={forwardedAs}\n      data-use-adaptive-colors={String(useAdaptiveColors)}\n      {...delegated}\n    />\n  );\n}\n\nexport const LightWrapper = styled.div`\n  ${LIGHT_COLORS_CSS}\n  color: var(--color-text);\n  background: var(--color-background);\n  border-radius: 4px;\n  color-scheme: light;\n\n  /* The default background for our paper cards in Dark Mode is the “adaptive white” offwhite (specified below). In some cases, we *want* it to use the same white as Light Mode. This variable allows for that: */\n  --color-original-white: ${LIGHT_COLORS['--color-background']};\n\n  --selection-background-color: hsl(50deg 100% 78%);\n  --selection-text-color: black;\n\n  /*\n    When displaying a light-colored section in dark mode, we don't want to overwrite \"adaptive\" colors. These colors are intended to soften contrast, and so it would be harsh to have true white in dark mode.\n  */\n  html[data-color-mode='dark'] &[data-use-adaptive-colors='true'] {\n    --color-adaptive-white: inherit !important;\n    --color-background: var(--color-adaptive-white);\n  }\n`;\n\nexport const DarkWrapper = styled.div`\n  ${DARK_COLORS_CSS}\n  color: var(--color-text);\n  background: var(--color-background);\n  border-radius: 4px;\n  color-scheme: dark;\n\n  --selection-background-color: hsl(250deg 20% 60% / 0.35);\n  --selection-text-color: white;\n`;\n\nexport default React.forwardRef<HTMLDivElement, Props>(\n  ColorModeContainer\n);\n","export {\n  default,\n  LightWrapper,\n  DarkWrapper,\n} from './ColorModeContainer';\nexport type { Props } from './ColorModeContainer';\n","import React from 'react';\nimport { styled } from '@linaria/react';\n\nimport { BREAKPOINTS } from '@/constants';\n\nimport Tooltip from '@/components/Tooltip';\nimport {\n  InfoAside,\n  SuccessAside,\n  WarningAside,\n} from '@/components/Aside/Aside';\n\ninterface Props {\n  definition: string;\n  children: React.ReactNode;\n}\n\nconst Term = ({ definition, children }: Props) => {\n  return (\n    <Tooltip\n      content={<ContentWrapper>{definition}</ContentWrapper>}\n      direction=\"n\"\n    >\n      <Wrapper>\n        {children}\n        <Trigger>?</Trigger>\n      </Wrapper>\n    </Tooltip>\n  );\n};\n\nconst Wrapper = styled.span`\n  display: inline-block;\n  cursor: help;\n  padding-right: 2px;\n\n  /* On iOS, bafflingly, the asterisk can only be tapped once. After that, it keeps trying to select it, and then opening the iOS selection tooltip in front of ours. Solve this by making the asterisk unselectable on smaller windows. */\n  @media ${BREAKPOINTS.mdAndSmaller} {\n    user-select: none;\n  }\n`;\n\nconst Trigger = styled.span`\n  display: inline-block;\n  font-size: 0.65em;\n  font-weight: var(--font-weight-bold);\n  color: var(--color-secondary);\n  transform: translate(10%, -30%);\n\n  /*\n    When definitions are used within asides, we want to overwrite the colors. Honestly there's not a lot of method to the madness here, I'm just picking colors that look best across light/dark.\n  */\n  html[data-color-mode='light'] ${InfoAside} & {\n    color: var(--color-primary);\n  }\n  html[data-color-mode='light'] ${SuccessAside} & {\n    color: var(--color-success-500);\n    /* Same color, but brighter / richer */\n    color: oklch(0.52 0.22 146.29);\n  }\n  html[data-color-mode='dark'] ${InfoAside} & {\n    color: var(--color-info-700);\n  }\n  html[data-color-mode='dark'] ${SuccessAside} &,\n  html[data-color-mode='dark'] ${WarningAside} & {\n    color: var(--color-primary);\n  }\n`;\n\nconst ContentWrapper = styled.span`\n  --color-primary: black;\n  display: block;\n  font-size: 1rem;\n  line-height: 1.5;\n`;\n\nexport default Term;\n","export { default } from './Term';\n","import React from 'react';\nimport { styled } from '@linaria/react';\n\nfunction New(props: React.HTMLAttributes<HTMLElement>) {\n  return <Wrapper {...props}>New</Wrapper>;\n}\n\nconst Wrapper = styled.sup`\n  display: inline-block;\n  font-size: 0.6em;\n  transform: translateY(-0.3em);\n  color: hsl(276deg 70% 75%);\n  text-transform: uppercase;\n  font-weight: var(--font-weight-bold);\n`;\n\nexport default New;\n","import React from 'react';\nimport { styled } from '@linaria/react';\nimport Term from '@/components/Term';\nimport New from './New';\n\nexport interface Props {\n  id: string;\n  label: string;\n  labelAs?: 'label' | 'span';\n  definition?: string;\n  gridArea?: string;\n  cornerContents?: React.ReactNode;\n  inline?: boolean;\n  style?: React.CSSProperties;\n  disabled?: boolean;\n  isNew?: boolean;\n  children?: React.ReactNode;\n}\n\nfunction ControlWrapper({\n  id,\n  label,\n  labelAs = 'label',\n  definition,\n  // TypeScript is unhappy if we pass `undefined` to a CSS variable\n  gridArea = '',\n  cornerContents,\n  inline,\n  style = {},\n  disabled,\n  isNew,\n  children,\n}: Props) {\n  const Wrapper = inline ? InlineWrapper : StackedWrapper;\n\n  return (\n    <Wrapper style={{ '--grid-area': gridArea, ...style }}>\n      <Header style={{ opacity: disabled ? 0.65 : 1 }}>\n        <Label\n          as={labelAs}\n          htmlFor={labelAs === 'label' ? id : undefined}\n        >\n          {definition ? (\n            <Term definition={definition}>{label}</Term>\n          ) : (\n            label\n          )}\n          :{isNew && <New style={{ transform: 'translateX(3px)' }} />}\n        </Label>\n        {/*\n          Some controls, like SliderControl, will add the current\n          value in this corner. Others, like ToggleControl, will\n          put the actual control here.\n        */}\n        {cornerContents}\n      </Header>\n      <ChildWrapper style={{ flex: inline ? 1 : undefined }}>\n        {children}\n      </ChildWrapper>\n    </Wrapper>\n  );\n}\n\nconst StackedWrapper = styled.div`\n  grid-area: var(--grid-area);\n  font-size: 1rem;\n`;\n\nconst InlineWrapper = styled(StackedWrapper)`\n  display: flex;\n  align-items: baseline;\n  gap: 16px;\n`;\n\nconst Header = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  margin-bottom: 4px;\n`;\n\nconst Label = styled.label`\n  font-weight: var(--font-weight-medium);\n  user-select: none;\n`;\n\nconst ChildWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 1.625rem;\n`;\n\nexport default ControlWrapper;\n","// NOTE: This component assumes it's being rendered in a square. Haven't tested how it would work in a rectangle.\n\nimport React from 'react';\nimport { styled } from '@linaria/react';\nimport { range } from '@/utils';\n\ninterface Props extends React.SVGProps<SVGSVGElement> {\n  numOfRows?: number;\n  numOfCols?: number;\n  axisLines?: boolean;\n}\n\nfunction DottedControlBackground({\n  numOfRows = 12,\n  numOfCols = 12,\n  axisLines,\n  ...delegated\n}: Props) {\n  const viewBoxSize = 200;\n\n  const dots = range(numOfRows - 1).map((rowIndex) =>\n    range(numOfCols - 1).map((colIndex) => {\n      // If we're in the very middle of the grid, we want to skip\n      // the circles, since we'll draw axis lines there.\n      const isMiddleRow = rowIndex === numOfRows / 2 - 1;\n      const isMiddleCol = colIndex === numOfCols / 2 - 1;\n\n      if (axisLines && (isMiddleRow || isMiddleCol)) {\n        return null;\n      }\n\n      return (\n        <circle\n          key={colIndex}\n          cx={viewBoxSize * ((colIndex + 1) / numOfCols)}\n          cy={viewBoxSize * ((rowIndex + 1) / numOfRows)}\n          r={1}\n          fill=\"var(--dot-color, var(--color-gray-300))\"\n          fillOpacity=\"var(--dot-opacity, 0.5)\"\n        />\n      );\n    })\n  );\n\n  return (\n    <Svg viewBox=\"0 0 200 200\" {...delegated}>\n      {axisLines && (\n        <>\n          <Axis\n            x1={0}\n            y1={viewBoxSize / 2}\n            x2={viewBoxSize}\n            y2={viewBoxSize / 2}\n          />\n          <Axis\n            x1={viewBoxSize / 2}\n            y1={0}\n            x2={viewBoxSize / 2}\n            y2={viewBoxSize}\n          />\n        </>\n      )}\n      <g>{dots}</g>\n    </Svg>\n  );\n}\n\nconst Svg = styled.svg`\n  display: block;\n  overflow: visible;\n  width: 100%;\n  height: 100%;\n  border: 3px solid var(--border-color, var(--color-gray-300));\n  border-radius: 6px;\n`;\n\nconst Axis = styled.line`\n  stroke: var(--axis-color, var(--color-gray-100));\n  stroke-width: 2px;\n`;\n\nexport default React.memo(DottedControlBackground);\n","import React from 'react';\n\nimport Slider, { Props as SliderProps } from '@/components/Slider';\n\nimport ControlWrapper from './ControlWrapper';\nimport ValuePreview from './ValuePreview';\n\nexport interface Props extends SliderProps {\n  id: string;\n  label: string;\n  value: number;\n  setValue: (value: number) => void;\n  definition?: string;\n  previewRenderer?: (value: string | number) => React.ReactNode;\n  gridArea?: string;\n  wrapperStyle?: React.CSSProperties;\n  disabled?: boolean;\n  onChange?: (value: number) => void;\n}\n\nfunction SliderControl({\n  id,\n  label,\n  value,\n  setValue,\n  definition,\n  previewRenderer,\n  gridArea,\n  wrapperStyle,\n  disabled,\n  onChange,\n  ...delegated\n}: Props) {\n  return (\n    <ControlWrapper\n      id={id}\n      label={label}\n      definition={definition}\n      gridArea={gridArea}\n      style={wrapperStyle}\n      disabled={disabled}\n      cornerContents={\n        <ValuePreview value={value} renderer={previewRenderer} />\n      }\n    >\n      <Slider\n        id={id}\n        value={value}\n        disabled={disabled}\n        {...delegated}\n        onChange={(val) => {\n          setValue(val);\n\n          if (typeof onChange === 'function') {\n            onChange(val);\n          }\n        }}\n      />\n    </ControlWrapper>\n  );\n}\n\nexport default SliderControl;\n","import React from 'react';\nimport { styled } from '@linaria/react';\n\ninterface Props {\n  value: string | number;\n  renderer?: (value: string | number) => React.ReactNode;\n}\n\nfunction ValuePreview({ value, renderer }: Props) {\n  return (\n    <Wrapper>\n      {typeof renderer === 'function' ? renderer(value) : value}\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled.span`\n  font-size: 0.875rem;\n  color: var(--color-gray-800);\n`;\n\nexport default ValuePreview;\n","import React from 'react';\nimport { styled } from '@linaria/react';\n\ninterface Props extends React.HTMLAttributes<HTMLDivElement> {\n  duration?: number;\n  delay?: number;\n  children: React.ReactNode;\n}\n\nconst FadeIn = ({\n  duration = 333,\n  delay = 0,\n  children,\n  ...delegated\n}: Props) => {\n  return (\n    <Wrapper\n      {...delegated}\n      style={{\n        ...(delegated.style || {}),\n        animationDuration: duration + 'ms',\n        animationDelay: delay + 'ms',\n      }}\n    >\n      {children}\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div`\n  @media (prefers-reduced-motion: no-preference) {\n    animation-name: fadeIn;\n    animation-fill-mode: backwards;\n  }\n`;\n\nexport default FadeIn;\n","export { default } from './FadeIn';\n","import React from 'react';\nimport { styled } from '@linaria/react';\nimport { X } from 'lucide-react';\n\nimport VisuallyHidden from '@/components/VisuallyHidden';\nimport Spicy from '@/components/Spicy';\n\nconst SaleSuperheader = ({}) => {\n  const [isDismissed, setIsDismissed] = React.useState(false);\n\n  if (isDismissed) {\n    return null;\n  }\n\n  return (\n    <Wrapper>\n      <Side></Side>\n      <Link\n        href=\"https://www.joyforjs.com\"\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n      >\n        <Text>\n          <strong>\n            Introducing the “Joy for JavaScript Developers” bundle!\n          </strong>{' '}\n          Save 50% during the Black Friday sale.\n        </Text>\n      </Link>\n      <Side>\n        <CloseBtn\n          onClick={(ev) => {\n            ev.stopPropagation();\n            setIsDismissed(true);\n          }}\n        >\n          <X />\n          <VisuallyHidden>Dismiss</VisuallyHidden>\n        </CloseBtn>\n      </Side>\n    </Wrapper>\n  );\n};\n\nconst Wrapper = styled.div`\n  --height: 3rem;\n  --shadow-color: 213deg 52% 1%;\n  /* prettier-ignore */\n  --shadow-elevation-high:\n    0px 0.6px 0.6px hsl(var(--shadow-color) / 0.1),\n    0px 2.1px 2px -0.5px hsl(var(--shadow-color) / 0.1),\n    0.1px 4.4px 4.1px -1.1px hsl(var(--shadow-color) / 0.1),\n    0.1px 8.3px 7.7px -1.6px hsl(var(--shadow-color) / 0.1),\n    0.2px 15.1px 14px -2.2px hsl(var(--shadow-color) / 0.12),\n    0.4px 25.9px 24.1px -2.7px hsl(var(--shadow-color) / 0.14),\n    0.7px 41.8px 38.9px -3.3px hsl(var(--shadow-color) / 0.16),\n    1px 63.8px 59.3px -3.8px hsl(var(--shadow-color) / 0.2);\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  display: flex;\n  gap: 24px;\n  justify-content: space-between;\n  align-items: center;\n  min-height: var(--height);\n  background: linear-gradient(\n    -3deg,\n    hsl(40deg 100% 50%),\n    hsl(55deg 100% 65%)\n  );\n  color: black;\n  box-shadow:\n    0px 1px 2px hsl(210deg 30% 8% / 0.1),\n    0px 2px 4px hsl(210deg 30% 8% / 0.1),\n    0px 4px 8px hsl(210deg 30% 8% / 0.1),\n    0px 8px 16px hsl(210deg 30% 8% / 0.1),\n    0px 16px 32px hsl(210deg 30% 8% / 0.1);\n  box-shadow: var(--shadow-elevation-high);\n  animation: fadeIn 950ms 1000ms both cubic-bezier(0.1, 0.78, 0.42, 1);\n`;\n\nconst Side = styled.div`\n  flex-basis: var(--height);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  aspect-ratio: 1 / 1;\n`;\n\nconst Link = styled.a`\n  line-height: 1.6;\n  flex: 1;\n  padding: 8px 0px;\n  color: inherit;\n  text-decoration: none;\n  text-align: center;\n`;\n\nconst Text = styled.span`\n  display: inline-block;\n  animation: wipeIn 1200ms both cubic-bezier(0.27, 0.2, 0.2, 1);\n  animation-delay: 1500ms;\n\n  @keyframes wipeIn {\n    from {\n      clip-path: polygon(-5% 0%, -5% 0%, 0% 100%, -5% 100%);\n    }\n    to {\n      clip-path: polygon(0% 0%, 100% 0%, 105% 100%, 0% 100%);\n    }\n  }\n`;\n\nconst CloseBtn = styled.button`\n  color: black;\n`;\n\nexport default SaleSuperheader;\n","import { styled } from '@linaria/react';\n\nimport { DARK_COLORS } from '@/constants';\n\nimport Logo from '@/components/Logo';\nimport Link from '@/components/Link';\nimport MaxWidthWrapper from '@/components/MaxWidthWrapper';\n\nimport SaleSuperheader from './SaleSuperheader';\n\nconst IS_HAVING_SALE = false;\n\nconst GeneratorHeader = ({ maxWidth, blogPostHref }) => {\n  return (\n    <>\n      {IS_HAVING_SALE && <SaleSuperheader />}\n      <Wrapper>\n        <InnerWrapper maxWidth={maxWidth}>\n          <Logo />\n          <BlogPostLink href={blogPostHref}>\n            Read the Blog Post\n          </BlogPostLink>\n        </InnerWrapper>\n      </Wrapper>\n    </>\n  );\n};\n\nconst Wrapper = styled.header`\n  border-bottom: 1px solid var(--color-gray-200);\n`;\n\nconst InnerWrapper = styled(MaxWidthWrapper)`\n  --color-primary: ${DARK_COLORS['--color-tertiary']};\n  display: flex;\n  justify-content: space-between;\n  align-items: baseline;\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n  /*\n    HACK: For some reason, MaxWidthWrapper has a z-index??\n    It's causing problems with the Gradient Generator's\n    color picker, showing up under the header.\n    Unsetting it here:\n  */\n  z-index: unset;\n`;\n\nconst BlogPostLink = styled(Link)`\n  font-size: 1rem;\n  text-decoration: none;\n  color: white;\n  font-weight: var(--font-weight-medium);\n\n  &:hover {\n    text-decoration: underline;\n    text-underline-offset: 1px;\n  }\n`;\n\nexport default GeneratorHeader;\n","import * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport {\n  useNewsletterSignup,\n  useConfetti,\n} from '@/helpers/newsletter.helpers';\n\nimport MaxWidthWrapper from '@/components/MaxWidthWrapper';\nimport TextInput from '@/components/TextInput';\nimport JericaMascot from '@/components/JericaMascot';\nimport Spinner from '@/components/Spinner';\nimport Paragraph from '@/components/Paragraph';\nimport Spicy from '@/components/Spicy';\nimport ButtonPoofy from '@/components/ButtonPoofy';\nimport SubscribeGeyser from '@/components/SubscribeGeyser';\nimport SubscribeError from '@/components/SubscribeError';\n\nfunction GeneratorNewsletterSignup() {\n  const successRef = React.useRef<HTMLDivElement>(null);\n\n  const {\n    confettiStatus,\n    handleLoadConfetti,\n    handleTriggerConfetti,\n  } = useConfetti();\n\n  const {\n    status,\n    emailFields,\n    error,\n    numOfEncounteredErrors,\n    emailId,\n    honeypotElem,\n    handleSubmit,\n  } = useNewsletterSignup({\n    tags: ['primaryNewsletter'],\n    formName: 'primaryNewsletter',\n    callbacks: {\n      onStart: handleLoadConfetti,\n      onSuccess: handleTriggerConfetti,\n    },\n  });\n\n  React.useEffect(() => {\n    if (status === 'success') {\n      successRef.current?.scrollIntoView();\n    }\n  }, [status]);\n\n  return (\n    <Wrapper maxWidth={624}>\n      <SubscribeGeyser status={confettiStatus} mode=\"burst\" />\n      <StyledJerica\n        colorModeOverride=\"dark\"\n        mood={status === 'success' ? 'very-happy' : 'happy'}\n      />\n      {status === 'success' ? (\n        <SuccessWrapper ref={successRef}>\n          <Title>Brilliant! You’ve been subscribed. 🎉</Title>\n          <Description>\n            In a few moments, you’ll receive a welcome email\n            containing a collection of some of my most popular free\n            content.\n          </Description>\n          <Description>Welcome aboard!</Description>\n        </SuccessWrapper>\n      ) : (\n        <>\n          <Title>\n            A front-end web development newsletter that sparks joy ✨\n          </Title>\n          <Description>\n            My main focus right now is teaching front-end developers\n            how to do cool stuff. My personal newsletter is sent once\n            every few weeks, and includes{' '}\n            <Spicy>bonus subscriber-only content</Spicy>.\n          </Description>\n          <Description>\n            No spam, no nonsense. Unsubscribe at any time.\n          </Description>\n          <Form onSubmit={handleSubmit}>\n            {honeypotElem}\n\n            <InputWrapper>\n              <EmailLabel htmlFor={emailId}>\n                Your email address:\n              </EmailLabel>\n\n              <EmailInput id={emailId} {...emailFields} />\n            </InputWrapper>\n\n            <SubmitButton data-disabled={status === 'submitting'}>\n              {status === 'submitting' ? <Spinner /> : 'Subscribe!'}\n            </SubmitButton>\n          </Form>\n\n          <ErrorWrapper>\n            <ErrorMessage\n              error={error}\n              errorMinHeight=\"5.0625rem\"\n              numOfEncounteredErrors={numOfEncounteredErrors}\n              status={status}\n            />\n          </ErrorWrapper>\n        </>\n      )}\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled(MaxWidthWrapper)`\n  /* Make sure to sit in front of the absolutely-positioned Slopes background */\n  position: relative;\n  margin-bottom: 8rem;\n\n  /* prettier-ignore */\n  filter:\n    drop-shadow(0px 1px 2px hsl(210deg 40% 6% / 0.4))\n    drop-shadow(0px 4px 8px hsl(210deg 40% 6% / 0.4));\n`;\n\nconst StyledJerica = styled(JericaMascot)`\n  position: absolute;\n  top: 36px;\n  left: 0;\n  transform: translateX(calc(-100% - 24px));\n  transition: transform 300ms;\n\n  @media (max-width: 57rem) {\n    transform: translateX(calc(-100% - 48px)) rotate(40deg);\n  }\n  @media (max-width: 51rem) {\n    display: none;\n  }\n`;\n\nconst Title = styled.h2`\n  max-width: 36rem;\n  font-size: calc(28 / 16 * 1rem);\n  margin-bottom: 1.5rem;\n  line-height: 1.5;\n  text-wrap: pretty;\n`;\nconst Description = styled(Paragraph)``;\n\nconst Form = styled.form`\n  display: flex;\n  align-items: flex-end;\n  gap: 16px;\n  margin-top: 4rem;\n\n  @media (max-width: 25rem) {\n    flex-direction: column;\n    align-items: stretch;\n  }\n`;\n\nconst InputWrapper = styled.div`\n  flex: 1;\n`;\n\nconst EmailLabel = styled.label`\n  display: block;\n  margin-bottom: 4px;\n  font-size: 1.125rem;\n  font-weight: var(--font-weight-medium);\n`;\n\nconst EmailInput = styled(TextInput)`\n  display: block;\n  width: 100%;\n  height: 3rem;\n  font-size: 1.125rem;\n  outline-offset: 0px;\n\n  &:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  &::placeholder {\n    color: hsl(260deg 100% 90% / 0.75);\n  }\n`;\nconst SubmitButton = styled(ButtonPoofy)`\n  --poofy-dark: hsl(230deg 50% 24%);\n  --poofy-light: hsl(260deg 80% 40%);\n  min-width: 9rem;\n  height: 3rem;\n\n  @media (max-width: 25rem) {\n    height: 4rem;\n    margin-left: -2px;\n    margin-right: -2px;\n  }\n`;\n\nconst ErrorMessage = styled(SubscribeError)`\n  --color-primary: hsl(340deg 100% 80%);\n\n  display: block;\n  padding: 16px;\n  border-radius: 6px;\n  background: hsl(340deg 100% 40%);\n\n  p {\n    font-size: 1rem;\n    text-align: center;\n    color: white;\n\n    &:not(:last-child) {\n      margin-bottom: 0.5em;\n    }\n  }\n`;\n\nconst ErrorWrapper = styled.div`\n  margin-top: 2rem;\n  /*\n    Prevent layout shift when error first appears.\n    This is a bit redundant with errorMinHeight, but this way, we won't even have that first layout shift.\n  */\n  min-height: 5.0625rem;\n`;\n\nconst SuccessWrapper = styled.div`\n  animation: fadeIn 1250ms;\n  min-height: 23.875rem;\n  scroll-margin-top: 64px;\n`;\n\nexport default GeneratorNewsletterSignup;\n","import * as React from 'react';\nimport ReactDOM from 'react-dom';\n\ninterface Props {\n  id?: string;\n  children: React.ReactNode;\n  parent?: HTMLElement;\n}\n\nconst InPortal = ({ id, children, parent }: Props) => {\n  const [hostElement, setHostElement] =\n    React.useState<Element | null>(null);\n\n  React.useEffect(() => {\n    const actualParent = parent || document.body;\n\n    const elm = id\n      ? document.querySelector(`#${id}`)\n      : document.createElement('div');\n\n    if (!elm) {\n      return;\n    }\n\n    setHostElement(elm);\n\n    if (!id) {\n      actualParent.appendChild(elm);\n    }\n\n    return () => {\n      if (!id) {\n        // In localhost, this error often masks other errors when a hot reload occurs. We'll wrap it in a try/catch to prevent this.\n        try {\n          actualParent.removeChild(elm);\n        } catch (err) {\n          // Swallow it.\n        }\n      }\n    };\n  }, [parent, id]);\n\n  if (!hostElement) {\n    return null;\n  }\n\n  return ReactDOM.createPortal(children, hostElement);\n};\n\nexport default React.memo(InPortal);\n","export { default } from './InPortal';\n","'use client';\n\nimport React from 'react';\nimport { styled } from '@linaria/react';\n\nimport { UserPreferencesContext } from '@/components/UserPreferencesProvider';\nimport FadeIn from '@/components/FadeIn';\n\n// I have other moods, but I need to fix the dark mode images before I can use them. See instructions in /images/josh/__README.md\nexport type Mood = 'happy' | 'sad' | 'very-happy' | 'heart-eyes';\n\nexport interface Props extends React.HTMLAttributes<HTMLDivElement> {\n  colorModeOverride?: 'light' | 'dark';\n  mood?: Mood;\n  fadeDuration?: number;\n  fadeDelay?: number;\n}\n\nfunction JericaMascot({\n  colorModeOverride,\n  mood = 'happy',\n  fadeDuration = 600,\n  fadeDelay = 200,\n  ...delegated\n}: Props) {\n  const isUsingGlobalColorMode = !colorModeOverride;\n\n  const { colorMode: globalColorMode } = React.useContext(\n    UserPreferencesContext\n  );\n\n  const colorMode = colorModeOverride || globalColorMode;\n\n  return (\n    <Wrapper duration={fadeDuration} delay={fadeDelay} {...delegated}>\n      <DarkLayer>\n        <picture>\n          <source\n            type=\"image/webp\"\n            srcSet=\"/images/josh/josh-happy-dark.webp\"\n          />\n          <MascotBase\n            alt=\"\"\n            loading=\"lazy\"\n            src=\"/images/josh/josh-happy-dark.png\"\n          />\n        </picture>\n        {mood !== 'happy' && (\n          <picture>\n            <source\n              type=\"image/webp\"\n              srcSet={`/images/josh/head-${mood}-dark.webp`}\n            />\n            <Head\n              loading=\"lazy\"\n              src={`/images/josh/head-${mood}-dark.png`}\n              alt=\"\"\n            />\n          </picture>\n        )}\n      </DarkLayer>\n      <LightLayer\n        data-use-global-color-mode={isUsingGlobalColorMode}\n        style={{ '--opacity': colorMode === 'dark' ? 0 : 1 }}\n      >\n        <picture>\n          <source\n            type=\"image/webp\"\n            srcSet=\"/images/josh/josh-happy-light.webp\"\n          />\n          <MascotBase\n            alt=\"\"\n            loading=\"lazy\"\n            src=\"/images/josh/josh-happy-light.png\"\n          />\n        </picture>\n        {mood !== 'happy' && (\n          <picture>\n            <source\n              type=\"image/webp\"\n              srcSet={`/images/josh/head-${mood}-light.webp`}\n            />\n            <Head\n              src={`/images/josh/head-${mood}-light.png`}\n              loading=\"lazy\"\n              alt=\"\"\n            />\n          </picture>\n        )}\n      </LightLayer>\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled(FadeIn)`\n  position: relative;\n`;\n\nconst DarkLayer = styled.div`\n  position: relative;\n`;\n\nconst LightLayer = styled.div`\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: var(--opacity);\n  transition: opacity calc(var(--color-swap-duration) + 500ms)\n    var(--color-swap-timing-function);\n\n  /*\n    Ok there's some tricky business here.\n    When this component first renders on the server, we don't know what the user’s chosen color mode is. If we specify an override, we don't care, but otherwise, we'll read the global color value from the HTML tag. That way, the correct mascot is shown from the very first paint.\n  */\n  html[data-color-mode='light'] &[data-use-global-color-mode='true'] {\n    opacity: 1;\n  }\n  html[data-color-mode='dark'] &[data-use-global-color-mode='true'] {\n    opacity: 0;\n  }\n`;\n\nconst MascotBase = styled.img`\n  display: block;\n  top: 0;\n  left: 0;\n  width: 137.5px;\n  height: 232px;\n  user-select: none;\n  pointer-events: none;\n`;\n\nconst Head = styled.img`\n  position: absolute;\n  display: block;\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  /* Dragging the face off is SUPER creepy */\n  user-select: none;\n  pointer-events: none;\n`;\n\nexport default JericaMascot;\n","export { default } from './JericaMascot';\n","import * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport Link from '@/components/Link';\n\ninterface Props extends React.HTMLAttributes<HTMLAnchorElement> {\n  animated?: boolean;\n}\n\nconst Logo = ({ animated, ...delegated }: Props) => {\n  const GivenName = animated ? GivenNameAnimated : GivenNameBase;\n  const Initial = animated ? InitialAnimated : InitialBase;\n  const FamilyName = animated ? FamilyNameAnimated : FamilyNameBase;\n  const LilCaret = animated ? LilCaretAnimated : LilCaretBase;\n\n  return (\n    <Wrapper href=\"/\" {...delegated}>\n      <GivenName>Jerica</GivenName>\n      <InitialWrapper>\n        <Initial\n          width=\"0.875rem\"\n          height=\"0.75rem\"\n          viewBox=\"0 0 14 12\"\n          fill=\"none\"\n        >\n          <Path\n            d=\"M1.83685 4.19021C2.50472 5.35898 3.23081 6.5572 3.80331 7.77375C4.05248 8.30325 4.35843 9.36185 4.81149 9.75018C5.73454 10.5414 6.29678 10.273 6.76796 9.06143C7.13194 8.12547 7.20283 7.08915 7.54655 6.12672C7.91111 5.10596 9.23909 6.70274 9.78252 7.06503C10.3171 7.42139 13.574 9.528 12.8869 7.60406C12.6687 6.99301 12.6107 6.33922 12.4777 5.70748C12.3451 5.07774 12.1099 4.28137 12.0784 3.65119C12.0399 2.88207 11.719 2.12838 11.719 1.3154\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </Initial>\n\n        <LilCaret\n          width=\"0.5625rem\"\n          height=\"0.625rem\"\n          viewBox=\"0 0 9 10\"\n          fill=\"none\"\n        >\n          <Path\n            d=\"M1 9C2.23995 7.12464 3.87268 5.18927 4.17593 2.59926C4.22017 2.22137 4.11111 0.731563 4.11111 1.04233C4.11111 1.49132 4.41831 2.03152 4.55761 2.40705C4.98522 3.55977 5.31447 4.69324 5.92593 5.70352C6.43274 6.54092 7.08081 7.96204 8 7.96204\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </LilCaret>\n        <Invisible>W</Invisible>\n      </InitialWrapper>\n      <FamilyName>Lancaster</FamilyName>\n    </Wrapper>\n  );\n};\n\nconst INITIAL_DELAY = 750;\nconst SCOOCH_DURATION = 300;\nconst UNDER_DRAW_DURATION = 150;\nconst W_DRAW_DURATION = 600;\n\nconst UNDER_PATH_LENGTH = 18;\nconst W_PATH_LENGTH = 26;\n\nconst Wrapper = styled(Link)`\n  display: inline-flex;\n  font-size: 1.5rem;\n  letter-spacing: -0.0625rem;\n  padding: 0;\n  text-decoration: none;\n  color: var(--color-primary);\n`;\n\nconst GivenNameBase = styled.span`\n  display: inline-block;\n  font-weight: var(--font-weight-medium);\n`;\n\nconst GivenNameAnimated = styled(GivenNameBase)`\n  @media (prefers-reduced-motion: no-preference) {\n    animation: scoochLeft ${SCOOCH_DURATION}ms ${INITIAL_DELAY}ms\n      cubic-bezier(0.27, 0.22, 0.44, 1.03) both;\n  }\n\n  @keyframes scoochLeft {\n    from {\n      transform: translateX(6px);\n    }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst FamilyNameBase = styled.span`\n  display: inline-block;\n  font-weight: var(--font-weight-medium);\n`;\n\nconst FamilyNameAnimated = styled(FamilyNameBase)`\n  @media (prefers-reduced-motion: no-preference) {\n    animation: scoochRight ${SCOOCH_DURATION}ms\n      ${INITIAL_DELAY + SCOOCH_DURATION * 0.25}ms\n      cubic-bezier(0.27, 0.22, 0.44, 1.03) both;\n  }\n\n  @keyframes scoochRight {\n    from {\n      transform: translateX(-6px);\n    }\n    to {\n      transform: translateX(0);\n    }\n  }\n`;\n\nconst LilCaretBase = styled.svg`\n  position: absolute;\n  left: 6px;\n  bottom: 0;\n`;\n\nconst LilCaretAnimated = styled(LilCaretBase)`\n  @media (prefers-reduced-motion: no-preference) {\n    & path {\n      stroke-dasharray: ${UNDER_PATH_LENGTH};\n      stroke-dashoffset: ${UNDER_PATH_LENGTH};\n      animation: selfDraw ${UNDER_DRAW_DURATION}ms\n        ${INITIAL_DELAY + SCOOCH_DURATION}ms both;\n    }\n  }\n\n  @keyframes selfDraw {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n`;\n\nconst InitialBase = styled.svg`\n  position: absolute;\n  left: 2px;\n  top: -1px;\n`;\n\nconst InitialAnimated = styled(InitialBase)`\n  @media (prefers-reduced-motion: no-preference) {\n    & path {\n      stroke-dasharray: ${W_PATH_LENGTH};\n      stroke-dashoffset: ${W_PATH_LENGTH};\n      animation: selfDraw ${W_DRAW_DURATION}ms\n        ${INITIAL_DELAY + SCOOCH_DURATION + UNDER_DRAW_DURATION}ms\n        both cubic-bezier(0.27, 0.22, 0.44, 1.03);\n    }\n  }\n\n  @keyframes selfDraw {\n    to {\n      stroke-dashoffset: 0;\n    }\n  }\n`;\n\nconst Path = styled.path`\n  stroke: var(--color-gray-700);\n`;\n\nconst InitialWrapper = styled.span`\n  display: inline-block;\n  position: relative;\n  width: 18px;\n`;\n\nconst Invisible = styled.span`\n  opacity: 0;\n`;\n\nexport default Logo;\n","export { default } from './Logo';\n","import * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport { HEADER_WIDTH } from '@/constants';\n\nexport interface Props {\n  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;\n  maxWidth?: number | string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n}\n\nfunction MaxWidthWrapper({\n  as = 'div',\n  maxWidth,\n  style = {},\n  children,\n  ...delegated\n}: Props) {\n  if (typeof maxWidth === 'undefined') {\n    maxWidth = `${HEADER_WIDTH}rem`;\n  } else if (typeof maxWidth === 'number') {\n    // Historically, I’ve specified the maximum width in pixels, and I'm too lazy to find and update all of the spots where I've specified them. We’ll divide by 16 to convert to rems:\n    maxWidth = `${maxWidth / 16}rem`;\n  }\n\n  return (\n    <Wrapper\n      as={as}\n      style={{ '--max-width': maxWidth, ...style }}\n      {...delegated}\n    >\n      {children}\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled.div`\n  width: 100%;\n  max-width: var(--max-width);\n  margin-inline: auto;\n  padding-inline: var(--viewport-padding);\n`;\n\nexport default MaxWidthWrapper;\n","export { default } from './MaxWidthWrapper';\nexport type { Props } from './MaxWidthWrapper';\n","/*\n  This component works by changing the background color of the <html> element, so that when the user tries to scroll beyond the page bounds, the correct color is shown.\n\n  It only sets a single color for both top and bottom, because the alternative is a flickery mess.\n\n  This *could* be a custom hook, but then the parent component would need to become a Client Component, and I generally want to manage overscroll colors at the page level. So I'm keeping it as a component for now.\n*/\n'use client';\n\nimport * as React from 'react';\n\nimport { useColorMode } from '@/components/UserPreferencesProvider';\n\ninterface Props {\n  color?: string;\n  lightColor?: string;\n  darkColor?: string;\n}\n\nfunction OverscrollColor({ color, lightColor, darkColor }: Props) {\n  const colorMode = useColorMode();\n\n  React.useEffect(() => {\n    let actualColor = color;\n    if (colorMode === 'light' && lightColor) {\n      actualColor = lightColor;\n    } else if (colorMode === 'dark' && darkColor) {\n      actualColor = darkColor;\n    }\n\n    if (!actualColor) {\n      return;\n    }\n\n    document.documentElement.style.setProperty(\n      'background',\n      actualColor\n    );\n  }, [color, lightColor, darkColor, colorMode]);\n\n  // When the component unmounts, unset the background color\n  React.useEffect(() => {\n    return () => {\n      document.documentElement.style.removeProperty('background');\n    };\n  }, []);\n\n  return null;\n}\n\nexport default OverscrollColor;\n","export { default } from './OverscrollColor';\n","import { styled } from '@linaria/react';\n\nimport { BREAKPOINTS } from '@/constants';\n\nimport { BaseWrapper as AsideWrapper } from '@/components/Aside';\nimport { Wrapper as BlockquoteWrapper } from '@/components/Blockquote';\nimport { Wrapper as TweetWrapper } from '@/components/FakeTweet';\n\nexport default styled.p`\n  font-size: var(--paragraph-font-size-override, 1.125rem);\n  margin-bottom: 1.25em;\n\n  ${AsideWrapper} & {\n    font-size: 1rem;\n\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  ${BlockquoteWrapper} & {\n    @media ${BREAKPOINTS.mdAndLarger} {\n      text-wrap: balance;\n      text-align: center;\n    }\n  }\n\n  ${TweetWrapper} & {\n    font-size: 1rem;\n  }\n`;\n","export { default } from './Paragraph';\n","import { styled } from '@linaria/react';\n\nimport { BREAKPOINTS } from '@/constants';\n\nimport Link from '@/components/Link';\n\nconst FooterLink = styled(Link)`\n  position: relative;\n  color: inherit;\n  display: block;\n  text-decoration: none;\n\n  /* Increase touch target on smaller screens */\n  @media (max-width: 67.125rem) {\n    padding-block: 4px;\n  }\n\n  /* On larger screens, we don't want to increase the block size, but we do want to increase the tap target size */\n  @media (min-width: 67.125rem) {\n    padding-block: 2px;\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: -4px;\n    }\n  }\n\n  &:hover {\n    font-weight: var(--font-weight-medium);\n    color: var(--color-text);\n  }\n`;\n\nexport default FooterLink;\n","import { styled } from '@linaria/react';\n\nimport { CATEGORIES } from '@/helpers/category.helpers';\n\nimport FooterLink from './FooterLink';\n\nfunction CategoryList() {\n  return (\n    <TwoColumnList>\n      {CATEGORIES.map((category) => {\n        return (\n          <li key={category.slug}>\n            <FooterLink\n              href={`/${category.slug}`}\n              translate={category.translate}\n            >\n              {category.name}\n            </FooterLink>\n          </li>\n        );\n      })}\n    </TwoColumnList>\n  );\n}\n\nconst TwoColumnList = styled.ul`\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 8px;\n  padding: 0;\n  list-style-type: none;\n\n  li {\n    text-align: left;\n  }\n`;\n\nexport default CategoryList;\n","import React from 'react';\nimport { styled } from '@linaria/react';\n\nimport MaxWidthWrapper, {\n  Props as MaxWidthWrapperProps,\n} from '@/components/MaxWidthWrapper';\nimport Logo from '@/components/Logo';\nimport Link from '@/components/Link';\nimport IconRSS from '@/components/Icons/IconRSS';\nimport IconSearch from '@/components/Icons/IconSearch';\nimport IconColorMode from '@/components/Icons/IconColorMode';\nimport IconSpeaker from '@/components/Icons/IconSpeaker';\nimport IconBluesky from '@/components/Icons/IconBluesky';\n\nimport Affirmation from './Affirmation';\nimport CategoryList from './FooterCategoryList';\nimport FooterLink from './FooterLink';\nimport IconLink from './IconLink';\nimport NewsletterForm from './FooterNewsletterForm';\n\ninterface Props extends MaxWidthWrapperProps {\n  includeColorThemeToggle?: boolean;\n  includeNewsletterSignup?: boolean;\n}\n\nfunction SiteFooter({\n  includeColorThemeToggle,\n  includeNewsletterSignup,\n  ...delegated\n}: Props) {\n  const Wrapper = includeNewsletterSignup\n    ? WrapperWithEmailSignup\n    : WrapperWithoutEmailSignup;\n\n  return (\n    <Wrapper {...delegated}>\n      <Intro\n        style={{\n          // when we're rendering without the email signup, do some optical alignment to create the illustion of baseline alignment.\n          transform: 'translateY(-0.5rem)',\n        }}\n      >\n        <Logo />\n        <StyledAffirmation />\n      </Intro>\n      {includeNewsletterSignup && <StyledNewsletterForm />}\n      <Links>\n        <Cats>\n          <MiniHeading>Browse By Category</MiniHeading>\n          <CategoryList />\n        </Cats>\n        <Courses>\n          <MiniHeading>Interactive Courses</MiniHeading>\n          <LinkList>\n            <li>\n              <FooterLink href={`https://stan.store/jrclancaster`}>\n                CSS for JavaScript Devs\n              </FooterLink>\n            </li>\n            <li>\n              <FooterLink href={`https://joyofreact.com/`}>\n                The Joy of React\n              </FooterLink>\n            </li>\n          </LinkList>\n        </Courses>\n        <Misc>\n          <MiniHeading>General</MiniHeading>\n          <LinkList>\n            <li>\n              <FooterLink href=\"/about-josh\">About Jerica</FooterLink>\n            </li>\n            <li>\n              <FooterLink href=\"/blog/how-i-built-my-blog-v2\">\n                About This Blog\n              </FooterLink>\n            </li>\n            <li>\n              <FooterLink href=\"/contact\">Contact</FooterLink>\n            </li>\n          </LinkList>\n        </Misc>\n        <Social>\n          <IconSearch size={20} />\n          <IconSpeaker size={20} />\n          {includeColorThemeToggle && <IconColorMode size={20} />}\n          <IconRSS size={20} />\n          <IconBluesky />\n          <IconLink\n            alt=\"Jerica's Github profile\"\n            href=\"https://github.com/joshwcomeau/\"\n            icon=\"github\"\n          />\n          <IconLink\n            alt=\"Jerica's LinkedIn profile\"\n            href=\"https://www.linkedin.com/in/joshwcomeau/\"\n            icon=\"linkedin\"\n          />\n        </Social>\n      </Links>\n      <Legal>\n        <Copyright>\n          © 2018-present Jericaua Lancaster. All Rights Reserved.\n        </Copyright>\n        <LegalLinksList>\n          <LegalListItem>\n            <LegalLink href=\"https://courses.joshwcomeau.com/terms\">\n              Terms of Use\n            </LegalLink>\n          </LegalListItem>\n          <LegalListItem>\n            <LegalLink href=\"https://courses.joshwcomeau.com/privacy\">\n              Privacy Policy\n            </LegalLink>\n          </LegalListItem>\n          <LegalListItem>\n            <LegalLink href=\"https://courses.joshwcomeau.com/code-of-conduct\">\n              Code of Conduct\n            </LegalLink>\n          </LegalListItem>\n        </LegalLinksList>\n      </Legal>\n    </Wrapper>\n  );\n}\n\nconst BaseWrapper = styled(MaxWidthWrapper)`\n  /* Needs to use Positioned Layout to sit above decorative clouds */\n  --icon-hover-color: var(--color-text);\n  position: relative;\n  display: grid;\n  grid-template-columns: 24rem 1fr;\n  gap: 32px 96px;\n  justify-content: space-between;\n  align-items: end;\n  padding-bottom: 40px;\n  font-size: 0.875rem;\n\n  @media (max-width: 55rem) {\n    grid-template-columns: 22rem 1fr;\n    gap: 32px 32px;\n  }\n\n  @media (max-width: 48rem) {\n    grid-template-columns: 1fr;\n    justify-content: revert;\n    align-items: revert;\n  }\n`;\n\nconst WrapperWithoutEmailSignup = styled(BaseWrapper)`\n  grid-template-areas:\n    'intro links'\n    'legal links';\n\n  @media (max-width: 48rem) {\n    grid-template-areas:\n      'intro'\n      'links'\n      'legal';\n  }\n`;\n\nconst WrapperWithEmailSignup = styled(BaseWrapper)`\n  grid-template-areas:\n    'intro links'\n    'email links'\n    'legal links';\n\n  @media (max-width: 48rem) {\n    grid-template-areas:\n      'intro'\n      'email'\n      'links'\n      'legal';\n  }\n`;\n\nconst Intro = styled.div`\n  grid-area: intro;\n`;\n\nconst StyledNewsletterForm = styled(NewsletterForm)`\n  grid-area: email;\n`;\n\nconst StyledAffirmation = styled(Affirmation)`\n  margin-top: 8px;\n`;\n\nconst Links = styled.div`\n  grid-area: links;\n  display: grid;\n  grid-template-areas:\n    'cats courses misc'\n    'cats social social';\n  grid-template-columns: 10rem 10rem 6.5rem;\n  justify-content: space-between;\n  gap: 16px 64px;\n\n  @media (max-width: 67.125rem) {\n    grid-template-areas:\n      'courses misc'\n      'social social';\n    grid-template-columns: 10rem 6.5rem;\n    justify-content: end;\n  }\n\n  @media (max-width: 48rem) {\n    justify-content: start;\n    grid-template-columns: 10rem 1fr;\n    gap: 32px 32px;\n    /* On tablets, the footer looks too sparse if it stretches to fill the entire space. Shrink to fill a normal-looking amount of space. */\n    max-width: 20.625rem;\n  }\n\n  @media (max-width: 28rem) {\n    /* On larger iphones, the artificial truncation of 'max-width' feels awkward, since there's only a tiny bit more space on the right than on the left. Undo the clamp. */\n    max-width: revert;\n  }\n\n  @media (max-width: 21rem) {\n    grid-template-areas:\n      'courses'\n      'misc'\n      'social';\n    grid-template-columns: 1fr;\n  }\n`;\n\nconst Cats = styled.div`\n  grid-area: cats;\n\n  @media (max-width: 67.125rem) {\n    display: none;\n  }\n`;\nconst Courses = styled.div`\n  grid-area: courses;\n`;\nconst Misc = styled.div`\n  grid-area: misc;\n`;\nconst Social = styled.div`\n  grid-area: social;\n  display: flex;\n  width: 100%;\n  justify-content: space-between;\n  color: var(--secondary-text);\n  transform: translateY(40%);\n\n  @media (max-width: 21rem) {\n    justify-content: space-between;\n    gap: 0px;\n  }\n`;\n\nconst MiniHeading = styled.h2`\n  display: block;\n  margin: 0;\n  margin-bottom: 0.5rem;\n  padding-bottom: 0.5rem;\n  font-size: inherit;\n  font-weight: var(--font-weight-medium);\n  text-transform: uppercase;\n  color: var(--secondary-text);\n\n  @media (max-width: 21rem) {\n    text-align: center;\n  }\n\n  ${Misc} & {\n    text-align: right;\n\n    @media (max-width: 21rem) {\n      text-align: center;\n    }\n  }\n`;\n\nconst LinkList = styled.ul`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 0;\n  list-style-type: none;\n\n  @media (max-width: 21rem) {\n    text-align: center;\n  }\n\n  ${Misc} & {\n    text-align: right;\n\n    @media (max-width: 21rem) {\n      text-align: center;\n    }\n  }\n`;\n\nconst Legal = styled.div`\n  grid-area: legal;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  margin-top: 16px;\n  color: var(--secondary-text);\n  font-size: 0.75rem;\n`;\nconst Copyright = styled.p`\n  display: block;\n  margin: 0;\n`;\nconst LegalLinksList = styled.ul`\n  display: flex;\n  gap: 16px;\n  padding: 0;\n  list-style-type: none;\n`;\nconst LegalListItem = styled.li`\n  position: relative;\n`;\n\nconst LegalLink = styled(Link)`\n  color: inherit;\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n`;\n\nexport default SiteFooter;\n","export { default } from './SiteFooter';\n","import * as React from 'react';\nimport { styled } from '@linaria/react';\n\nimport { BREAKPOINTS, THUMB_FOCUS_GRADIENT } from '@/constants';\n\nimport {\n  InfoAside,\n  WarningAside,\n  SuccessAside,\n} from '@/components/Aside';\n\n// I'm defining my own `onChange` prop which does *not* work like the one built into inputs. I need to omit it from `InputHTMLAttributes`, and provide my own below.\ntype InputWithoutOnChange = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'onChange'\n>;\n\nexport interface Props extends InputWithoutOnChange {\n  value: number;\n  onChange?: (value: number) => void;\n  handleSize?: number;\n  trackSize?: number;\n  backgroundColor?: string;\n  handleColor?: string;\n  handleFocusColor?: string;\n}\n\nconst Slider = React.forwardRef(function Slider(\n  {\n    value,\n    onChange,\n    handleSize = 16,\n    trackSize = 3,\n    backgroundColor = 'var(--color-background)',\n    handleColor = 'var(--color-gray-900)',\n    handleFocusColor = THUMB_FOCUS_GRADIENT,\n    style = {},\n    ...delegated\n  }: Props,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <Input\n      ref={ref}\n      style={{\n        ...style,\n        '--handle-color': handleColor,\n        '--handle-focus-color': handleFocusColor,\n        '--background-color': backgroundColor,\n        '--base-handle-size': handleSize + 'px',\n        '--track-size': trackSize + 'px',\n      }}\n      type=\"range\"\n      value={value}\n      onChange={(ev) => {\n        if (typeof onChange === 'function') {\n          onChange(Number(ev.target.value));\n        }\n      }}\n      {...delegated}\n    />\n  );\n});\n\nconst Input = styled.input`\n  display: block;\n  width: 100%;\n  background: transparent;\n  appearance: none;\n  outline-offset: 6px;\n  outline-color: var(--color-text);\n  cursor: pointer;\n  --handle-size: var(--base-handle-size);\n\n  @media ${BREAKPOINTS.smAndSmaller} {\n    --handle-size: calc(var(--base-handle-size) * 1.5);\n  }\n\n  &::-webkit-slider-thumb {\n    appearance: none;\n    height: var(--handle-size);\n    width: var(--handle-size);\n    border-radius: 50px;\n    background: var(--handle-color);\n    cursor: grab;\n    transform: translateY(calc(-50% + (var(--track-size) / 2)));\n    outline: 2px solid var(--background-color);\n\n    &:active {\n      cursor: grabbing;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n\n    &::-webkit-slider-thumb {\n      cursor: not-allowed;\n\n      &:active {\n        cursor: not-allowed;\n      }\n    }\n  }\n\n  &:focus::-webkit-slider-thumb {\n    background: var(--handle-focus-color);\n  }\n\n  /* In Light Mode, the golden gradient doesn't have enough contrast. */\n  html[data-color-mode='light'] &:focus::-webkit-slider-thumb {\n    background: var(--handle-color);\n  }\n\n  &::-webkit-slider-runnable-track {\n    width: calc(100% - var(--handle-size));\n    height: var(--track-size);\n    background-color: var(--color-gray-300);\n    border-radius: calc(var(--track-size) / 2);\n    margin: calc(var(--handle-size) / 2);\n    margin-left: 0;\n    margin-right: 0;\n\n    ${InfoAside} & {\n      background-color: var(--color-info-400);\n    }\n    ${WarningAside} & {\n      background-color: var(--color-warning-400);\n    }\n    ${SuccessAside} & {\n      background-color: var(--color-success-400);\n    }\n  }\n\n  &::-moz-range-track {\n    width: calc(100% - var(--handle-size));\n    height: var(--track-size);\n    background-color: var(--color-gray-300);\n    border-radius: calc(var(--track-size) / 2);\n    margin: calc(var(--handle-size) / 2);\n    margin-left: 0;\n    margin-right: 0;\n  }\n`;\n\nexport default Slider;\n","export { default } from './Slider';\nexport type { Props } from './Slider';\n","import { styled } from '@linaria/react';\n\ninterface Props extends React.HTMLAttributes<HTMLSpanElement> {\n  color?: string;\n  children: React.ReactNode;\n}\n\nfunction Spicy({\n  color = 'inherit',\n  children,\n  style = {},\n  ...delegated\n}: Props) {\n  return (\n    <Wrapper style={{ color, ...style }} {...delegated}>\n      {children}\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled.em`\n  font-family: var(--font-family-spicy);\n  letter-spacing: -0.25px;\n  font-style: normal;\n  font-weight: 400;\n`;\n\nexport default Spicy;\n","export { default } from './Spicy';\n","'use client';\n\nimport dynamic from 'next/dynamic';\n\nconst ConfettiGeyser = dynamic(\n  () =>\n    import('./ConfettiGeyser').catch((err) => {\n      // If the internet connection is lost, we won’t be able to load the ConfettiGeyser component, but that’s fine.\n      return { default: () => null };\n    }),\n  {\n    ssr: false,\n  }\n);\n\nexport default ConfettiGeyser;\n","import * as React from 'react';\n\nimport useInterval from '@/hooks/use-interval';\nimport useWindowDimensions from '@/hooks/use-window-dimensions';\nimport type { ConfettiStatus } from '@/helpers/newsletter.helpers';\n\nimport ConfettiGeyser from '@/components/ConfettiGeyser';\nimport InPortal from '@/components/InPortal';\n\ntype Mode = 'burst' | 'stream' | 'preload';\n\ninterface Props {\n  status: ConfettiStatus;\n  mode: Mode;\n}\n\n// Subscribe Geysers have two modes:\n// - Burst: A big burst of confetti that slowly tapers to 0\n// - Stream: A constant stream of moderate confetti\nfunction SubscribeGeyser({ status, mode = 'burst' }: Props) {\n  const windowDimensions = useWindowDimensions();\n\n  const [burstConcentration, setBurstConcentration] =\n    React.useState(100);\n\n  // In portrait orientations (mostly mobile), we want to fire straight up from the bottom of the screen.\n  const isPortrait =\n    typeof windowDimensions.width === 'number' &&\n    typeof windowDimensions.height === 'number' &&\n    windowDimensions.width < windowDimensions.height;\n\n  const geyserPosition: [number, number] = React.useMemo(() => {\n    if (\n      typeof windowDimensions.width !== 'number' ||\n      typeof windowDimensions.height !== 'number'\n    ) {\n      // Should never actually be used:\n      return [0, 1000];\n    }\n\n    if (isPortrait) {\n      return [windowDimensions.width / 2, windowDimensions.height];\n    } else {\n      return [0, Math.min(700, windowDimensions.height)];\n    }\n  }, [isPortrait, windowDimensions.width, windowDimensions.height]);\n\n  const intervalDuration =\n    burstConcentration > 0 && status === 'active' && mode === 'burst'\n      ? 250\n      : null;\n\n  useInterval(() => {\n    let newConcentration = burstConcentration * 0.7 - 1;\n\n    if (newConcentration < 1) {\n      newConcentration = 0;\n    }\n\n    setBurstConcentration(newConcentration);\n  }, intervalDuration);\n\n  let concentration;\n  if (status === 'inert') {\n    // The `ConfettiGeyser` component is lazy-loaded, meaning that it’s only downloaded when it’s rendered. When `status` is \"inert\", we won’t render it.\n    return null;\n  } else if (status === 'preload') {\n    // When the user submits the form, the status switches to \"preload\", and we’ll render the ConfettiGeyser, but with 0 concentration (so no visible confetti yet).\n    concentration = 0;\n  } else {\n    // We know at this point that the confetti is running, so we’ll set the confetti based on the mode. In burst, it starts high and falls to 0. In stream, it stays constant.\n    concentration = mode === 'burst' ? burstConcentration : 16;\n  }\n\n  return (\n    <InPortal>\n      <ConfettiGeyser\n        position={geyserPosition}\n        enableCollisions={false}\n        airFriction={0.04}\n        velocity={30}\n        angularVelocity={0.6}\n        angle={isPortrait ? -90 : -45}\n        spread={5}\n        volatility={0.6}\n        concentration={concentration}\n      />\n    </InPortal>\n  );\n}\n\nexport default SubscribeGeyser;\n","export { default } from './SubscribeGeyser';\n","import * as React from 'react';\nimport { styled } from '@linaria/react';\n\ninterface Props extends React.HTMLAttributes<HTMLInputElement> {\n  wrapperProps?: React.HTMLAttributes<HTMLDivElement>;\n}\n\nfunction TextInput({ wrapperProps, ...delegated }: Props) {\n  return (\n    <Wrapper {...wrapperProps}>\n      <Input {...delegated} />\n      <Border />\n    </Wrapper>\n  );\n}\n\nconst Wrapper = styled.div`\n  --inset-by: 2px;\n\n  position: relative;\n  /* When this is placed in a flex container, we probably want it to grow. If not, override with 'wrapperProps.style' */\n  flex-grow: 1;\n`;\n\nconst Input = styled.input`\n  width: 100%;\n  height: 3rem;\n  padding: 0;\n  padding-inline: var(--inset-by);\n  margin-inline: calc(var(--inset-by) * -1);\n  border: none;\n  /* Border isn't visible, but it affects focus outline */\n  border-radius: 2px;\n  font-size: inherit;\n  background: transparent;\n  color: var(--color-text);\n\n  &:focus-visible {\n    outline-color: var(--color-primary);\n    outline-offset: 4px;\n  }\n`;\n\nconst Border = styled.div`\n  position: absolute;\n  left: calc(var(--inset-by) * -1);\n  right: calc(var(--inset-by) * -1);\n  bottom: 0;\n  width: 100%;\n  height: 4px;\n  background: var(--color-text);\n  border-radius: 4px 4px 10px 10px;\n  transform: scaleY(0.5);\n  transform-origin: bottom center;\n  transition: transform 400ms;\n\n  ${Wrapper}:has(${Input}:focus) & {\n    transform: scaleY(1);\n    transition: transform 250ms;\n  }\n`;\n\nexport default TextInput;\n","export { default } from './TextInput';\n","export { default, Popover } from './Tooltip';\n","import type { Category } from '@/types/content.types';\n\n// A hardcoded list of categories.\n// Sorted in preferential order. Certain contexts might only\n// include a subset (eg. mobile nav), and it should be taken\n// from the top.\nexport const CATEGORIES: Array<Category> = [\n  { name: 'CSS', slug: 'css', translate: 'no' },\n  { name: 'React', slug: 'react', translate: 'no' },\n  { name: 'Animation', slug: 'animation', translate: 'yes' },\n  { name: 'JavaScript', slug: 'javascript', translate: 'no' },\n  { name: 'Career', slug: 'career', translate: 'yes' },\n  { name: 'Next.js', slug: 'nextjs', translate: 'no' },\n  { name: 'General', slug: 'blog', translate: 'yes' },\n] as const;\n\nexport const SNIPPET_CATEGORIES: Array<Category> = [\n  { name: 'JavaScript', slug: 'javascript', translate: 'no' },\n  { name: 'HTML & CSS', slug: 'html', translate: 'yes' },\n  {\n    name: 'React Component',\n    slug: 'react-components',\n    translate: 'no',\n  },\n  { name: 'React Hook', slug: 'react-hooks', translate: 'no' },\n];\n\n// This category is used when an article has no category (eg. meta\n// posts).\nexport const DEFAULT_CATEGORY_SLUG = 'blog';\n\nexport type CategorySlug =\n  | (typeof CATEGORIES)[number]['slug']\n  | typeof DEFAULT_CATEGORY_SLUG;\n\nexport type SnippetCategorySlug =\n  (typeof SNIPPET_CATEGORIES)[number]['slug'];\n\nexport const getFormattedName = (\n  categorySlug: CategorySlug | SnippetCategorySlug\n): string => {\n  // We have one pseudo-category, 'blog', for \"meta\" posts, and stuff that doesn't fit anywhere else. It isn't included in CATEGORIES because it isn't listed as a category.\n  if (categorySlug === 'blog') {\n    return '';\n  }\n\n  const ALL_CATS = [...CATEGORIES, ...SNIPPET_CATEGORIES];\n\n  const category = ALL_CATS.find((cat) => cat.slug === categorySlug);\n\n  return category?.name || '';\n};\n","import * as React from 'react';\n\nimport { debounce, throttle } from '@/utils';\n\nconst useBoundingBox = (\n  ref: React.RefObject<HTMLElement | SVGSVGElement>,\n  scrollDebounce = 80,\n  resizeThrottle = 60\n): DOMRect | null => {\n  const [box, setBox] = React.useState<DOMRect | null>(null);\n\n  React.useEffect(() => {\n    // NOTE: This will happen if the element is conditionally rendered and NOT part of the initial render. A better version of this hook should somehow handle this case. For now, the hook just doesn't work (I think?).\n    if (!ref.current) {\n      return;\n    }\n\n    // Wait a sec before calculating the initial value.\n    window.setTimeout(() => {\n      if (!ref.current) {\n        return;\n      }\n\n      setBox(getAugmentedBox(ref.current.getBoundingClientRect()));\n    }, 200);\n\n    function update() {\n      const newBox = ref.current?.getBoundingClientRect();\n\n      if (newBox) {\n        setBox(getAugmentedBox(newBox));\n      }\n    }\n\n    const handleScroll = scrollDebounce\n      ? debounce(update, scrollDebounce)\n      : update;\n    const handleResize = resizeThrottle\n      ? throttle(update, resizeThrottle)\n      : update;\n\n    window.addEventListener('scroll', handleScroll);\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      window.removeEventListener('scroll', handleScroll);\n      window.removeEventListener('resize', handleResize);\n    };\n  }, [ref, resizeThrottle, scrollDebounce]);\n\n  return box;\n};\n\n/*\n  DOMRects have some confusing things:\n  - `bottom` and `right` are measured from the top/left, rather than the bottom/right\n  - `x` and `y` are equivalent to `left` and `top`, rather than the center of the box\n\n  This function tweaks these properties to be more useful. `right` is the distance between the right edge of the box and the right edge of the viewport. `x` is the X position of the box’s center.\n\n  Rather than adding new properties, I'm overwriting existing ones. That way I can keep using the DOMRect type.\n*/\nfunction getAugmentedBox(box: DOMRect | null): DOMRect | null {\n  if (!box) {\n    return null;\n  }\n\n  const scrollbarWidth =\n    window.innerWidth - document.documentElement.clientWidth;\n\n  return {\n    top: box.top,\n    left: box.left,\n    right: window.innerWidth - box.right - scrollbarWidth,\n    bottom: window.innerHeight - box.bottom,\n    height: box.height,\n    width: box.width,\n    x: box.left + box.width / 2,\n    y: box.top + box.height / 2,\n    toJSON() {\n      return this;\n    },\n  };\n}\n\nexport default useBoundingBox;\n","import React from 'react';\n\nexport default function useHasHydrated() {\n  const [hasHydrated, setHasHydrated] = React.useState(false);\n\n  React.useEffect(() => {\n    setHasHydrated(true);\n  }, []);\n\n  return hasHydrated;\n}\n","/*\n  This hook provides responsive window dimensions.\n\n  SPECIAL THING: by default, window.innerWidth is always in pixels, and doesn't change as the user scales up their default font size. This isn't useful; if the user cranks their default font size to 32px, the window essentially shrinks by half, but `window.innerWidth` doesn't change.\n  This hook solves for this. The values it returns are in pixels, but scaled based on the user’s default font size.\n*/\nimport React from 'react';\n\nimport { throttle } from '@/utils';\n\ninterface WindowDimensions {\n  width: number | undefined;\n  height: number | undefined;\n  clientWidth: number | undefined;\n}\n\nconst useWindowDimensionsInRems = () => {\n  const [windowDimensions, setWindowDimensions] =\n    React.useState<WindowDimensions>({\n      width: undefined,\n      height: undefined,\n      clientWidth: undefined,\n    });\n\n  React.useEffect(() => {\n    const calculatorElement = document.createElement('div');\n    calculatorElement.style.fontSize = '1rem';\n\n    document.body.appendChild(calculatorElement);\n\n    const fontSize = parseFloat(\n      window.getComputedStyle(calculatorElement).fontSize\n    );\n\n    const ratio = 16 / fontSize;\n\n    setWindowDimensions({\n      width: window.innerWidth * ratio,\n      height: window.innerHeight * ratio,\n      clientWidth: document.documentElement.clientWidth * ratio,\n    });\n\n    const handleResize = throttle(() => {\n      setWindowDimensions({\n        width: window.innerWidth * ratio,\n        height: window.innerHeight * ratio,\n        clientWidth: document.documentElement.clientWidth * ratio,\n      });\n    }, 250);\n\n    window.addEventListener('resize', handleResize);\n\n    return () => {\n      // Hm so weirdly, sometimes the `calculatorElement` is already removed from the DOM by the time this cleanup function runs. So we wrap this in a try/catch to prevent errors.\n      try {\n        document.body.removeChild(calculatorElement);\n        window.removeEventListener('resize', handleResize);\n      } catch (err) {}\n    };\n  }, []);\n\n  return windowDimensions;\n};\n\nexport default useWindowDimensionsInRems;\n","// extracted by mini-css-extract-plugin\nmodule.exports = {\"bhgdr3i\":\"bhgdr3i\",\"b16w56qw\":\"b16w56qw\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"ae97emi\":\"ae97emi\",\"line\":\"line\",\"b1btlj5u\":\"b1btlj5u\",\"highlighted\":\"highlighted\",\"i6el1g6\":\"i6el1g6\",\"wcnkszl\":\"wcnkszl\",\"shfe3ke\":\"shfe3ke\",\"faded\":\"faded\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"c1qvfy1x\":\"c1qvfy1x\",\"shiki\":\"shiki\",\"coaxrjn\":\"coaxrjn\",\"b1btlj5u\":\"b1btlj5u\",\"i6el1g6\":\"i6el1g6\",\"wcnkszl\":\"wcnkszl\",\"shfe3ke\":\"shfe3ke\",\"qpn37d3\":\"qpn37d3\",\"w1ey322x\":\"w1ey322x\",\"w19zxykk\":\"w19zxykk\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wqxmqd2\":\"wqxmqd2\",\"ae97emi\":\"ae97emi\",\"i6el1g6\":\"i6el1g6\",\"wcnkszl\":\"wcnkszl\",\"shfe3ke\":\"shfe3ke\",\"i1htlkn0\":\"i1htlkn0\",\"i14jtb2i\":\"i14jtb2i\",\"c6am5ut\":\"c6am5ut\",\"haso6lc\":\"haso6lc\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"gvjoyup\":\"gvjoyup\",\"c132w1ct\":\"c132w1ct\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"c1vmthmn\":\"c1vmthmn\",\"c1dh3hvu\":\"c1dh3hvu\",\"copy-c1dh3hvu\":\"copy-c1dh3hvu\",\"fadeInOut-c1dh3hvu\":\"fadeInOut-c1dh3hvu\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"s4h798d\":\"s4h798d\",\"ilxzy3j\":\"ilxzy3j\",\"h1pypve8\":\"h1pypve8\",\"lpsyt9t\":\"lpsyt9t\",\"cg5mgxb\":\"cg5mgxb\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"s876rwi\":\"s876rwi\",\"aalvasc\":\"aalvasc\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wf2imp2\":\"wf2imp2\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"w1194iyg\":\"w1194iyg\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wv8ehy8\":\"wv8ehy8\",\"fadeIn\":\"fadeIn\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"w1b166fz\":\"w1b166fz\",\"ihs8yku\":\"ihs8yku\",\"b18m03jc\":\"b18m03jc\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wup9zre\":\"wup9zre\",\"s1qjvckb\":\"s1qjvckb\",\"t1wf50ed\":\"t1wf50ed\",\"fj4hdur\":\"fj4hdur\",\"iyyfa9f\":\"iyyfa9f\",\"ek7ax7u\":\"ek7ax7u\",\"e1wb5unx\":\"e1wb5unx\",\"s1x6z5pj\":\"s1x6z5pj\",\"e1d1c636\":\"e1d1c636\",\"e9wm5pd\":\"e9wm5pd\",\"s12x4g16\":\"s12x4g16\",\"fadeIn\":\"fadeIn\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"w1vqmtc6\":\"w1vqmtc6\",\"fadeIn\":\"fadeIn\",\"sgswk91\":\"sgswk91\",\"l1h05ptj\":\"l1h05ptj\",\"tes9ynh\":\"tes9ynh\",\"wipeIn-tes9ynh\":\"wipeIn-tes9ynh\",\"c1ky9rpr\":\"c1ky9rpr\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wvm4gg4\":\"wvm4gg4\",\"d1qadnsl\":\"d1qadnsl\",\"l1enswin\":\"l1enswin\",\"mr2l5ys\":\"mr2l5ys\",\"hjm134z\":\"hjm134z\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"prg881n\":\"prg881n\",\"b1btlj5u\":\"b1btlj5u\",\"w12kxl7t\":\"w12kxl7t\",\"w9k8ad0\":\"w9k8ad0\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"i1i8zjy7\":\"i1i8zjy7\",\"i6el1g6\":\"i6el1g6\",\"wcnkszl\":\"wcnkszl\",\"shfe3ke\":\"shfe3ke\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"w10oesj0\":\"w10oesj0\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"w4pilfo\":\"w4pilfo\",\"t4hbmw3\":\"t4hbmw3\",\"i6el1g6\":\"i6el1g6\",\"shfe3ke\":\"shfe3ke\",\"wcnkszl\":\"wcnkszl\",\"c1fvuxyj\":\"c1fvuxyj\"};","// extracted by mini-css-extract-plugin\nmodule.exports = {\"wvuivf2\":\"wvuivf2\",\"i11tjibc\":\"i11tjibc\",\"butfw2g\":\"butfw2g\"};"],"names":["Button","styled","name","class","propsAsIs","ButtonContent","ButtonPoofy","delegated","children","CodeSnippetContext","React","code","lang","CodeSnippetProvider","Provider","value","LazyClientOnlySnippet","dynamic","ssr","Grid","Child","SnippetJuggler","serverSnippet","mounted","setMounted","opacity","pointerEvents","Wrapper","IconOuterWrapper","animated","span","IconWrapper","CheckWrapper","HiddenText","VisuallyHidden","CopyButton","handleCopy","copyId","setCopyId","rotation","setRotation","wrapperStyle","wrapperTrigger","useBoop","scale","hasHydrated","useHasHydrated","style","useSpring","transform","config","tension","friction","timeoutId","current","window","setTimeout","clearTimeout","newCopyId","Date","now","CopyEffectWrapper","CopyEffect","WithCopyButton","lockedToColorMode","copyIds","setCopyIds","Array","useInterval","length","currentValue","filter","id","copyToClipboard","map","LightWrapper","DarkWrapper","ColorModeContainer","ref","Props","colorMode","useAdaptiveColors","String","Trigger","ContentWrapper","Term","definition","props","New","StackedWrapper","InlineWrapper","_exp","Header","Label","ChildWrapper","ControlWrapper","label","labelAs","gridArea","cornerContents","inline","disabled","isNew","flex","undefined","Svg","Axis","DottedControlBackground","numOfRows","numOfCols","axisLines","dots","range","colIndex","rowIndex","isMiddleCol","viewBoxSize","SliderControl","setValue","previewRenderer","onChange","ValuePreview","renderer","Slider","val","FadeIn","duration","delay","animationDelay","InnerWrapper","MaxWidthWrapper","BlogPostLink","Link","GeneratorHeader","maxWidth","blogPostHref","StyledJerica","_exp2","JericaMascot","Title","Description","Paragraph","Form","InputWrapper","EmailLabel","EmailInput","TextInput","SubmitButton","ErrorMessage","_exp6","ErrorWrapper","SuccessWrapper","GeneratorNewsletterSignup","successRef","HTMLDivElement","confettiStatus","handleLoadConfetti","handleTriggerConfetti","useConfetti","status","emailFields","error","numOfEncounteredErrors","emailId","honeypotElem","handleSubmit","useNewsletterSignup","tags","formName","callbacks","onStart","onSuccess","scrollIntoView","InPortal","parent","hostElement","setHostElement","actualParent","document","body","elm","querySelector","createElement","appendChild","removeChild","err","ReactDOM","DarkLayer","LightLayer","MascotBase","Head","colorModeOverride","mood","fadeDuration","fadeDelay","globalColorMode","UserPreferencesContext","GivenNameBase","GivenNameAnimated","FamilyNameBase","FamilyNameAnimated","_exp5","LilCaretBase","LilCaretAnimated","_exp8","InitialBase","InitialAnimated","_exp13","Path","InitialWrapper","Invisible","Logo","as","HEADER_WIDTH","OverscrollColor","color","lightColor","darkColor","useColorMode","actualColor","documentElement","setProperty","removeProperty","FooterLink","TwoColumnList","CategoryList","CATEGORIES","category","translate","slug","BaseWrapper","WrapperWithoutEmailSignup","WrapperWithEmailSignup","_exp3","Intro","StyledNewsletterForm","NewsletterForm","StyledAffirmation","Affirmation","Links","Cats","Courses","Misc","Social","MiniHeading","LinkList","Legal","Copyright","LegalLinksList","LegalListItem","LegalLink","SiteFooter","includeColorThemeToggle","includeNewsletterSignup","handleSize","trackSize","backgroundColor","handleColor","handleFocusColor","THUMB_FOCUS_GRADIENT","Number","ev","Input","Spicy","ConfettiGeyser","catch","default","SubscribeGeyser","concentration","windowDimensions","useWindowDimensions","burstConcentration","setBurstConcentration","isPortrait","width","height","geyserPosition","Math","min","newConcentration","intervalDuration","mode","position","enableCollisions","airFriction","velocity","angularVelocity","angle","spread","volatility","Border","wrapperProps","getAugmentedBox","box","scrollbarWidth","innerWidth","clientWidth","top","left","right","bottom","innerHeight","x","y","toJSON","scrollDebounce","useBoundingBox","resizeThrottle","setBox","update","newBox","getBoundingClientRect","handleScroll","debounce","handleResize","throttle","addEventListener","removeEventListener","setHasHydrated","setWindowDimensions","useWindowDimensionsInRems","calculatorElement","fontSize","ratio","parseFloat","getComputedStyle"],"sourceRoot":"","ignoreList":[]}