├── .gitignore
├── README.md
├── package.json
├── packages
    ├── example
    │   ├── .babelrc
    │   ├── .gitignore
    │   ├── README.md
    │   ├── components
    │   │   ├── ClipboardIcon.tsx
    │   │   ├── CloseIcon.tsx
    │   │   ├── CodeIcon.tsx
    │   │   ├── Dialog.tsx
    │   │   ├── Pattern.tsx
    │   │   └── Tooltip.tsx
    │   ├── next.config.js
    │   ├── package.json
    │   ├── pages
    │   │   ├── _app.tsx
    │   │   ├── _document.tsx
    │   │   ├── api
    │   │   │   └── hello.ts
    │   │   └── index.tsx
    │   ├── postcss.config.js
    │   ├── public
    │   │   ├── favicon.ico
    │   │   └── isometric.png
    │   ├── styles
    │   │   └── globals.css
    │   ├── tailwind.config.js
    │   └── tsconfig.json
    └── tailwindcss-bg-patterns
    │   ├── .npmignore
    │   ├── LICENSE
    │   ├── README.md
    │   ├── index.js
    │   └── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_STORE


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h2 align="center">TailwindCSS Background Patterns</h1>
  2 | <p align="center">Inspired by <a href="https://www.magicpattern.design/tools/css-backgrounds" target="_blank" rel="noopener noreferrer">CSS Background Patterns by MagicPattern</a> and used by <a href="https://relayforms.com" target="_blank" rel="noopener noreferrer">RelayForms</a></p>
  3 | 
  4 | <p>
  5 |     <a href="https://www.npmjs.com/package/tailwindcss-bg-patterns"><img src="https://img.shields.io/npm/v/tailwindcss-bg-patterns.svg" alt="Latest Release"></a>
  6 |     <a href="https://www.npmjs.com/package/tailwindcss-bg-patterns"><img src="https://img.shields.io/npm/dt/tailwindcss-bg-patterns.svg" alt="Total Downloads"></a>
  7 |     <a href="https://github.com/thillmann/tailwindcss-bg-patterns/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss-bg-patterns.svg" alt="License"></a>
  8 | </p>
  9 | 
 10 | ---
 11 | 
 12 | ## Demo
 13 | 
 14 | See a live demo of all background patterns here: [Live demo](https://hillmann.cc/tailwindcss-bg-patterns/)
 15 | 
 16 | ## Installation
 17 | 
 18 | Add the `tailwindcss-bg-patterns` plugin to your project:
 19 | 
 20 | ```bash
 21 | # Install using npm
 22 | npm install --save-dev tailwindcss-bg-patterns
 23 | 
 24 | # Install using yarn
 25 | yarn add -D tailwindcss-bg-patterns
 26 | 
 27 | # Install using pnpm
 28 | pnpm add -D tailwindcss-bg-patterns
 29 | ```
 30 | 
 31 | ## Usage
 32 | 
 33 | ```javascript
 34 | // tailwind.config.js
 35 | {
 36 |   theme: { // defaults to these values
 37 |     patterns: {
 38 |         opacities: {
 39 |             100: "1",
 40 |             80: ".80",
 41 |             60: ".60",
 42 |             40: ".40",
 43 |             20: ".20",
 44 |             10: ".10",
 45 |             5: ".05",
 46 |         },
 47 |         sizes: {
 48 |             1: "0.25rem",
 49 |             2: "0.5rem",
 50 |             4: "1rem",
 51 |             6: "1.5rem",
 52 |             8: "2rem",
 53 |             16: "4rem",
 54 |             20: "5rem",
 55 |             24: "6rem",
 56 |             32: "8rem",
 57 |         }
 58 |     }
 59 |   },
 60 |   plugins: [
 61 |     require('tailwindcss-bg-patterns'),
 62 |   ],
 63 | }
 64 | ```
 65 | 
 66 | ## Background Patterns
 67 | 
 68 | Included are the following patterns:
 69 | 
 70 | - Lines (`pattern-lines`)
 71 | - Vertical Lines (`pattern-vertical-lines`)
 72 | - Diagonal Lines (`pattern-diagonal-lines`)
 73 | - Rectangles (`pattern-rectangles`)
 74 | - Rhombus (`pattern-rhombus`)
 75 | - Dots (`pattern-dots`)
 76 | - Boxes (`pattern-boxes`)
 77 | - Cross (`pattern-cross`)
 78 | - Zigzag (`pattern-zigzag`)
 79 | - Zigzag 3D (`pattern-zigzag-3d`)
 80 | - Isometric (`pattern-isometric`)
 81 | - Wavy (`pattern-wavy`)
 82 | - Triangles (`pattern-triangles`)
 83 | - Moon (`pattern-moon`)
 84 | - Paper (`pattern-paper`)
 85 | 
 86 | ## Utilities
 87 | 
 88 | The plugin provides utility classes to control the foreground and background colors (based on your theme colors) as well as opacity and sizing (can be controlled in your theme, too):
 89 | 
 90 | **Opacity**: `pattern-opacity-80` applies opacity of `0.8`
 91 | 
 92 | By default the plugin comes with the following options for opacity: `pattern-opacity-100`, `pattern-opacity-80`, `pattern-opacity-60`, `pattern-opacity-40`, `pattern-opacity-20`, `pattern-opacity-10`, `pattern-opacity-5`x
 93 | 
 94 | **Size**: `pattern-size-8` applies a size of `2rem`
 95 | 
 96 | By default the plugin comes with the following options for size: `pattern-size-1`, `pattern-size-2`, `pattern-size-4`, `pattern-size-6`, `pattern-size-8`, `pattern-size-16`, `pattern-size-20`, `pattern-size-24`, `pattern-size-32`
 97 | 
 98 | **Color**: `pattern-indigo-600` (foreground) and `pattern-bg-white` (background)
 99 | 
100 | Colors will be extracted from your theme.
101 | 
102 | ## Example
103 | 
104 | Applying the isometric background pattern to a div:
105 | 
106 | ```html
107 | <div
108 |   class="w-56 h-56 pattern-isometric pattern-indigo-600 pattern-bg-transparent pattern-opacity-60 pattern-size-8"
109 | ></div>
110 | ```
111 | 
112 | Which results in:
113 | 
114 | ![Isometric Example](/packages/example/public/isometric.png)
115 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-bg-patterns-workspace",
 3 |   "version": "1.0.0",
 4 |   "keywords": [
 5 |     "plugin",
 6 |     "tailwind",
 7 |     "tailwind css",
 8 |     "tailwindcss",
 9 |     "tailwindcss-plugin",
10 |     "css background patterns",
11 |     "background patterns"
12 |   ],
13 |   "repository": "git@github.com:thillmann/tailwind-patterns.git",
14 |   "license": "MIT",
15 |   "author": "Timo Hillmann <timo@hillmann.cc>"
16 | }
17 | 


--------------------------------------------------------------------------------
/packages/example/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["next/babel"],
 3 |   "plugins": [
 4 |     [
 5 |       "prismjs",
 6 |       {
 7 |         "languages": ["markup"],
 8 |         "plugins": ["line-numbers"],
 9 |         "theme": "okaidia",
10 |         "css": true
11 |       }
12 |     ]
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/packages/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/packages/example/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 | 
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 | 
17 | You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
18 | 
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20 | 
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 | 
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 | 
25 | ## Learn More
26 | 
27 | To learn more about Next.js, take a look at the following resources:
28 | 
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 | 
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 | 
34 | ## Deploy on Vercel
35 | 
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 | 
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 | 


--------------------------------------------------------------------------------
/packages/example/components/ClipboardIcon.tsx:
--------------------------------------------------------------------------------
 1 | export function ClipboardIcon(props: JSX.IntrinsicElements["svg"]) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       fill="none"
 6 |       viewBox="0 0 24 24"
 7 |       stroke="currentColor"
 8 |       {...props}
 9 |     >
10 |       <path
11 |         strokeLinecap="round"
12 |         strokeLinejoin="round"
13 |         strokeWidth={2}
14 |         d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 
20 | export function ClipboardCheckIcon(props: JSX.IntrinsicElements["svg"]) {
21 |   return (
22 |     <svg
23 |       xmlns="http://www.w3.org/2000/svg"
24 |       fill="none"
25 |       viewBox="0 0 24 24"
26 |       stroke="currentColor"
27 |       {...props}
28 |     >
29 |       <path
30 |         strokeLinecap="round"
31 |         strokeLinejoin="round"
32 |         strokeWidth={2}
33 |         d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
34 |       />
35 |     </svg>
36 |   );
37 | }
38 | 


--------------------------------------------------------------------------------
/packages/example/components/CloseIcon.tsx:
--------------------------------------------------------------------------------
 1 | export function CloseIcon(props: JSX.IntrinsicElements["svg"]) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       fill="none"
 6 |       viewBox="0 0 24 24"
 7 |       stroke="currentColor"
 8 |       {...props}
 9 |     >
10 |       <path
11 |         strokeLinecap="round"
12 |         strokeLinejoin="round"
13 |         strokeWidth={2}
14 |         d="M6 18L18 6M6 6l12 12"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/packages/example/components/CodeIcon.tsx:
--------------------------------------------------------------------------------
 1 | export function CodeIcon(props: JSX.IntrinsicElements["svg"]) {
 2 |   return (
 3 |     <svg
 4 |       xmlns="http://www.w3.org/2000/svg"
 5 |       fill="none"
 6 |       viewBox="0 0 24 24"
 7 |       stroke="currentColor"
 8 |       {...props}
 9 |     >
10 |       <path
11 |         strokeLinecap="round"
12 |         strokeLinejoin="round"
13 |         strokeWidth={2}
14 |         d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
15 |       />
16 |     </svg>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/packages/example/components/Dialog.tsx:
--------------------------------------------------------------------------------
 1 | import { ReactNode, useEffect, useState } from "react";
 2 | import {
 3 |   DialogOverlay,
 4 |   DialogContent,
 5 |   DialogOverlayProps,
 6 | } from "@reach/dialog";
 7 | import { Transition } from "@headlessui/react";
 8 | import { CloseIcon } from "./CloseIcon";
 9 | 
10 | export function Dialog({
11 |   children,
12 |   "aria-label": ariaLabel,
13 |   isOpen,
14 |   ...props
15 | }: DialogOverlayProps & Pick<JSX.IntrinsicElements["div"], "aria-label">) {
16 |   const [mounted, setMounted] = useState(isOpen);
17 |   useEffect(() => {
18 |     if (isOpen) {
19 |       setMounted(true);
20 |     }
21 |   }, [isOpen]);
22 |   return (
23 |     <DialogOverlay
24 |       className="fixed top-0 left-0 w-full h-full"
25 |       isOpen={mounted}
26 |       {...props}
27 |     >
28 |       <Transition
29 |         show={isOpen}
30 |         appear
31 |         static
32 |         enter="transition ease-out duration-200"
33 |         enterFrom="opacity-0"
34 |         enterTo="opacity-100"
35 |         leave="transition ease-in duration-200"
36 |         leaveFrom="opacity-100"
37 |         leaveTo="opacity-0"
38 |         className="absolute top-0 left-0 w-full h-full bg-gray-900 bg-opacity-25 flex justify-center items-center"
39 |         afterLeave={() => setMounted(false)}
40 |       >
41 |         <div className="relative w-full max-w-3xl">
42 |           <button
43 |             className="absolute -top-10 right-0 text-gray-700 focus:outline-none"
44 |             onClick={props.onDismiss}
45 |           >
46 |             <CloseIcon className="w-8 h-8" />
47 |           </button>
48 |           <DialogContent
49 |             aria-label={ariaLabel}
50 |             className="bg-white w-full shadow-lg rounded-lg p-6 outline-none"
51 |           >
52 |             {children}
53 |           </DialogContent>
54 |         </div>
55 |       </Transition>
56 |     </DialogOverlay>
57 |   );
58 | }
59 | 
60 | export function useDialog(label: string, content: ReactNode) {
61 |   const [open, setOpen] = useState(false);
62 |   const dialog = (
63 |     <Dialog aria-label={label} isOpen={open} onDismiss={() => setOpen(false)}>
64 |       {content}
65 |     </Dialog>
66 |   );
67 |   return [dialog, () => setOpen(true)] as const;
68 | }
69 | 


--------------------------------------------------------------------------------
/packages/example/components/Pattern.tsx:
--------------------------------------------------------------------------------
  1 | import Prism from "prismjs";
  2 | import copy from "copy-to-clipboard";
  3 | import { useEffect, useMemo, useState } from "react";
  4 | import { CodeIcon } from "./CodeIcon";
  5 | import { ClipboardCheckIcon, ClipboardIcon } from "./ClipboardIcon";
  6 | import { useDialog } from "./Dialog";
  7 | import { Tooltip } from "./Tooltip";
  8 | 
  9 | function useCopyToClipboard(text: string, timeout = 2000) {
 10 |   const [copied, setCopied] = useState(false);
 11 |   useEffect(() => {
 12 |     if (copied) {
 13 |       const timer = setTimeout(() => setCopied(false), timeout);
 14 |       return () => clearTimeout(timer);
 15 |     }
 16 |   }, [copied, timeout]);
 17 |   function handleCopy() {
 18 |     const didCopy = copy(text);
 19 |     setCopied(didCopy);
 20 |   }
 21 |   return { copied, handleCopy };
 22 | }
 23 | 
 24 | interface ExampleCodeProps {
 25 |   pattern: string;
 26 |   color: string;
 27 |   colorBg: string;
 28 |   opacity: string;
 29 |   size: string;
 30 | }
 31 | 
 32 | function ExampleCode({
 33 |   pattern,
 34 |   color,
 35 |   colorBg,
 36 |   opacity,
 37 |   size,
 38 | }: ExampleCodeProps) {
 39 |   const htmlString = `<div class="${pattern} ${color} ${colorBg} ${size} ${opacity}"></div>`;
 40 |   const { copied, handleCopy } = useCopyToClipboard(htmlString);
 41 |   const highlightedHtml = useMemo(
 42 |     () => Prism.highlight(htmlString, Prism.languages["markup"], "markup"),
 43 |     [htmlString]
 44 |   );
 45 |   return (
 46 |     <>
 47 |       <div className="relative">
 48 |         <pre className="bg-slate-900 rounded px-6 py-8 whitespace-pre-line">
 49 |           <code dangerouslySetInnerHTML={{ __html: highlightedHtml }} />
 50 |         </pre>
 51 |         <button
 52 |           className="absolute top-2 right-2 px-2 py-1 bg-white hover:bg-gray-100 duration-200 transition-colors rounded-full text-xs focus:outline-none flex"
 53 |           onClick={handleCopy}
 54 |         >
 55 |           {copied ? (
 56 |             <>
 57 |               <ClipboardCheckIcon className="w-4 h-4 mr-1" />
 58 |               Copied
 59 |             </>
 60 |           ) : (
 61 |             <>
 62 |               <ClipboardIcon className="w-4 h-4 mr-1" />
 63 |               Copy Code
 64 |             </>
 65 |           )}
 66 |         </button>
 67 |       </div>
 68 |     </>
 69 |   );
 70 | }
 71 | 
 72 | interface PatternProps {
 73 |   name: string;
 74 |   pattern: string;
 75 |   color: string;
 76 |   colorBg?: string;
 77 |   opacity: string;
 78 |   size: string;
 79 |   className?: string;
 80 |   onClick?: () => void;
 81 | }
 82 | 
 83 | export function Pattern({
 84 |   name,
 85 |   pattern,
 86 |   color,
 87 |   colorBg = "pattern-bg-white",
 88 |   opacity,
 89 |   size,
 90 |   className,
 91 |   onClick,
 92 | }: PatternProps) {
 93 |   const [dialog, openDialog] = useDialog(
 94 |     "code field",
 95 |     <ExampleCode
 96 |       pattern={pattern}
 97 |       color={color}
 98 |       colorBg={colorBg}
 99 |       size={size}
100 |       opacity={opacity}
101 |     />
102 |   );
103 |   return (
104 |     <div
105 |       className={`group shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 duration-200 transition-all rounded overflow-hidden w-full h-56 bg-white relative ${className}`}
106 |       onClick={onClick}
107 |     >
108 |       <div
109 |         className={`absolute top-0 left-0 right-0 bottom-0 ${pattern} ${color} ${opacity} ${size} ${colorBg}`}
110 |       />
111 |       <Tooltip tooltip="Show me a code example">
112 |         <button
113 |           aria-label="Show code"
114 |           className="absolute z-20 flex items-center top-3 right-3 bg-gray-700 rounded-full p-1 opacity-0 group-hover:opacity-100 duration-200 transition-opacity focus:outline-none"
115 |           onClick={openDialog}
116 |         >
117 |           <span className="text-white text-xs mx-1">Code</span>
118 |           <CodeIcon className="w-4 h-4 text-white" />
119 |         </button>
120 |       </Tooltip>
121 |       <div className="absolute top-0 left-0 right-0 bottom-0 flex justify-center items-end">
122 |         <h2 className="text-sm bg-gray-700 text-white rounded-full px-2 mb-3">
123 |           {name}
124 |         </h2>
125 |       </div>
126 |       {dialog}
127 |     </div>
128 |   );
129 | }
130 | 


--------------------------------------------------------------------------------
/packages/example/components/Tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   CSSProperties,
 3 |   PropsWithChildren,
 4 |   ReactNode,
 5 |   cloneElement,
 6 |   isValidElement,
 7 |   useEffect,
 8 |   useState,
 9 | } from "react";
10 | import { Transition } from "@headlessui/react";
11 | import { TooltipPopup, useTooltip } from "@reach/tooltip";
12 | 
13 | const centered = (
14 |   triggerRect?: Partial<DOMRect> | null,
15 |   tooltipRect?: Partial<DOMRect> | null
16 | ) => {
17 |   if (!triggerRect || !tooltipRect) {
18 |     return {};
19 |   }
20 |   const triggerCenter = (triggerRect.left ?? 0) + (triggerRect.width ?? 0) / 2;
21 |   const left = triggerCenter - (tooltipRect.width ?? 0) / 2;
22 |   const maxLeft = window.innerWidth - (tooltipRect.width ?? 0) - 2;
23 |   return {
24 |     left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
25 |     top: (triggerRect.bottom ?? 0) + 8 + window.scrollY,
26 |   } as CSSProperties;
27 | };
28 | 
29 | export function Tooltip({
30 |   children,
31 |   tooltip,
32 |   "aria-label": ariaLabel,
33 | }: PropsWithChildren<{ tooltip: ReactNode; "aria-label"?: string }>) {
34 |   const [triggerProps, tooltipProps, isVisible] = useTooltip();
35 |   const [mounted, setMounted] = useState(isVisible);
36 |   useEffect(() => {
37 |     if (isVisible) {
38 |       setMounted(true);
39 |     }
40 |   }, [isVisible]);
41 |   const handleAnimationLeave = () => setMounted(false);
42 |   return (
43 |     <>
44 |       {isValidElement(children) && cloneElement(children, triggerProps)}
45 |       <TooltipPopup
46 |         {...tooltipProps}
47 |         isVisible={mounted}
48 |         className="absolute z-20"
49 |         label={
50 |           <Transition
51 |             show={isVisible}
52 |             appear
53 |             enter="transition ease-out duration-100"
54 |             enterFrom="transform-gpu opacity-0 scale-95"
55 |             enterTo="transform-gpu opacity-100 scale-100"
56 |             leave="transition ease-in duration-75"
57 |             leaveFrom="transform-gpu opacity-100 scale-100"
58 |             leaveTo="transform-gpu opacity-0 scale-95"
59 |             className="text-xs bg-gray-900 text-gray-100 rounded-full px-2 py-1 max-w-md shadow-sm"
60 |             afterLeave={handleAnimationLeave}
61 |           >
62 |             {tooltip}
63 |           </Transition>
64 |         }
65 |         aria-label={ariaLabel}
66 |         position={centered}
67 |       />
68 |     </>
69 |   );
70 | }
71 | 


--------------------------------------------------------------------------------
/packages/example/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/packages/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@headlessui/react": "^1.7.15",
13 |     "@reach/dialog": "^0.18.0",
14 |     "@reach/tooltip": "^0.18.0",
15 |     "@types/node": "20.3.3",
16 |     "@types/react": "18.2.14",
17 |     "@types/react-dom": "18.2.6",
18 |     "autoprefixer": "10.4.14",
19 |     "copy-to-clipboard": "^3.3.3",
20 |     "next": "13.4.8",
21 |     "postcss": "8.4.24",
22 |     "prismjs": "^1.29.0",
23 |     "react": "18.2.0",
24 |     "react-dom": "18.2.0",
25 |     "tailwindcss": "3.3.2",
26 |     "tailwindcss-bg-patterns": "workspace:*",
27 |     "typescript": "5.1.6"
28 |   },
29 |   "devDependencies": {
30 |     "@types/prismjs": "^1.26.0",
31 |     "babel-plugin-prismjs": "^2.1.0"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/packages/example/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css'
2 | import type { AppProps } from 'next/app'
3 | 
4 | export default function App({ Component, pageProps }: AppProps) {
5 |   return <Component {...pageProps} />
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/example/pages/_document.tsx:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/example/pages/api/hello.ts:
--------------------------------------------------------------------------------
 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 2 | import type { NextApiRequest, NextApiResponse } from 'next'
 3 | 
 4 | type Data = {
 5 |   name: string
 6 | }
 7 | 
 8 | export default function handler(
 9 |   req: NextApiRequest,
10 |   res: NextApiResponse<Data>
11 | ) {
12 |   res.status(200).json({ name: 'John Doe' })
13 | }
14 | 


--------------------------------------------------------------------------------
/packages/example/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import Head from "next/head";
  3 | import { Pattern } from "@/components/Pattern";
  4 | 
  5 | const patterns = [
  6 |   ["Zigzag", "pattern-zigzag"],
  7 |   ["Zigzag 3D", "pattern-zigzag-3d"],
  8 |   ["Boxes", "pattern-boxes"],
  9 |   ["Lines", "pattern-lines"],
 10 |   ["Vertical Lines", "pattern-vertical-lines"],
 11 |   ["Diagonal Lines", "pattern-diagonal-lines"],
 12 |   ["Wavy", "pattern-wavy"],
 13 |   ["Cross", "pattern-cross"],
 14 |   ["Dots", "pattern-dots"],
 15 |   ["Isometric", "pattern-isometric"],
 16 |   ["Rectangles", "pattern-rectangles"],
 17 |   ["Rhombus", "pattern-rhombus"],
 18 |   ["Triangles", "pattern-triangles"],
 19 |   ["Moon", "pattern-moon"],
 20 |   ["Paper", "pattern-paper"],
 21 | ] as const;
 22 | 
 23 | type Pattern = (typeof patterns)[number][1];
 24 | 
 25 | const colors = {
 26 |   Blue: {
 27 |     "50": "pattern-blue-50",
 28 |     "100": "pattern-blue-100",
 29 |     "200": "pattern-blue-200",
 30 |     "300": "pattern-blue-300",
 31 |     "400": "pattern-blue-400",
 32 |     "500": "pattern-blue-500",
 33 |     "600": "pattern-blue-600",
 34 |     "700": "pattern-blue-700",
 35 |     "800": "pattern-blue-800",
 36 |     "900": "pattern-blue-900",
 37 |   },
 38 |   Red: {
 39 |     "50": "pattern-red-50",
 40 |     "100": "pattern-red-100",
 41 |     "200": "pattern-red-200",
 42 |     "300": "pattern-red-300",
 43 |     "400": "pattern-red-400",
 44 |     "500": "pattern-red-500",
 45 |     "600": "pattern-red-600",
 46 |     "700": "pattern-red-700",
 47 |     "800": "pattern-red-800",
 48 |     "900": "pattern-red-900",
 49 |   },
 50 |   Green: {
 51 |     "50": "pattern-green-50",
 52 |     "100": "pattern-green-100",
 53 |     "200": "pattern-green-200",
 54 |     "300": "pattern-green-300",
 55 |     "400": "pattern-green-400",
 56 |     "500": "pattern-green-500",
 57 |     "600": "pattern-green-600",
 58 |     "700": "pattern-green-700",
 59 |     "800": "pattern-green-800",
 60 |     "900": "pattern-green-900",
 61 |   },
 62 |   Yellow: {
 63 |     "50": "pattern-yellow-50",
 64 |     "100": "pattern-yellow-100",
 65 |     "200": "pattern-yellow-200",
 66 |     "300": "pattern-yellow-300",
 67 |     "400": "pattern-yellow-400",
 68 |     "500": "pattern-yellow-500",
 69 |     "600": "pattern-yellow-600",
 70 |     "700": "pattern-yellow-700",
 71 |     "800": "pattern-yellow-800",
 72 |     "900": "pattern-yellow-900",
 73 |   },
 74 |   Purple: {
 75 |     "50": "pattern-purple-50",
 76 |     "100": "pattern-purple-100",
 77 |     "200": "pattern-purple-200",
 78 |     "300": "pattern-purple-300",
 79 |     "400": "pattern-purple-400",
 80 |     "500": "pattern-purple-500",
 81 |     "600": "pattern-purple-600",
 82 |     "700": "pattern-purple-700",
 83 |     "800": "pattern-purple-800",
 84 |     "900": "pattern-purple-900",
 85 |   },
 86 | } as const;
 87 | 
 88 | type Color = keyof typeof colors;
 89 | type ColorHue = keyof (typeof colors)[keyof typeof colors];
 90 | 
 91 | const sizes = {
 92 |   1: "pattern-size-1",
 93 |   2: "pattern-size-2",
 94 |   4: "pattern-size-4",
 95 |   6: "pattern-size-6",
 96 |   8: "pattern-size-8",
 97 |   16: "pattern-size-16",
 98 |   20: "pattern-size-20",
 99 |   24: "pattern-size-24",
100 |   32: "pattern-size-32",
101 | } as const;
102 | 
103 | type Size = keyof typeof sizes;
104 | 
105 | const opacities = {
106 |   5: "pattern-opacity-5",
107 |   10: "pattern-opacity-10",
108 |   20: "pattern-opacity-20",
109 |   40: "pattern-opacity-40",
110 |   60: "pattern-opacity-60",
111 |   80: "pattern-opacity-80",
112 |   100: "pattern-opacity-100",
113 | } as const;
114 | 
115 | type Opacity = keyof typeof opacities;
116 | 
117 | function randomPattern() {
118 |   const random = Math.round(Math.random() * (patterns.length - 1));
119 |   return patterns[random][1];
120 | }
121 | 
122 | export default function Home() {
123 |   const [pattern, setPattern] = useState<Pattern>(randomPattern);
124 |   const [color, setColor] = useState<Color>("Blue");
125 |   const [colorHue, setColorHue] = useState<ColorHue>("600");
126 |   const fullColor = colors[color][colorHue];
127 |   const [opacity, setOpacity] = useState<Opacity>(40);
128 |   const [size, setSize] = useState<Size>(8);
129 |   return (
130 |     <div>
131 |       <div
132 |         className={`${pattern} ${fullColor} ${sizes[size]} pattern-bg-white fixed top-0 left-0 right-0 bottom-0 pattern-opacity-10`}
133 |       />
134 |       <Head>
135 |         <title>Tailwind CSS Background Patterns</title>
136 |         <link rel="icon" href="/tailwindcss-bg-patterns/favicon.ico" />
137 |       </Head>
138 |       <header className="relative flex justify-center py-6 mb-16 text-gray-900 bg-white shadow-md">
139 |         <h1 className={`text-3xl font-bold border-b-4 border-blue-200`}>
140 |           Tailwind CSS Background Patterns
141 |         </h1>
142 |       </header>
143 |       <main className="relative mb-32">
144 |         <div className="grid w-full grid-cols-2 gap-4 px-8 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
145 |           {patterns.map(([name, pattern]) => (
146 |             <Pattern
147 |               key={name}
148 |               name={name}
149 |               pattern={pattern}
150 |               color={fullColor}
151 |               opacity={opacities[opacity]}
152 |               size={sizes[size]}
153 |               onClick={() => setPattern(pattern)}
154 |             />
155 |           ))}
156 |         </div>
157 |       </main>
158 |       <div className="fixed bottom-0 z-40 flex px-12 py-6 mb-8 space-x-8 transform -translate-x-1/2 bg-white rounded-full shadow-lg left-1/2">
159 |         <div>
160 |           <label htmlFor="color" className="block text-sm font-bold">
161 |             Color
162 |           </label>
163 |           <select
164 |             id="color"
165 |             className="text-sm border border-gray-200 rounded bg-gray-50"
166 |             value={color}
167 |             onChange={(ev) => {
168 |               const newColor = ev.currentTarget.value as Color;
169 |               setColor(newColor);
170 |             }}
171 |           >
172 |             {Object.keys(colors).map((key) => (
173 |               <option key={key} value={key}>
174 |                 {key}
175 |               </option>
176 |             ))}
177 |           </select>
178 |           {typeof colors[color] === "object" && (
179 |             <select
180 |               className="text-sm border border-gray-200 rounded bg-gray-50"
181 |               value={colorHue}
182 |               onChange={(ev) => {
183 |                 const newColorHue = ev.currentTarget.value as ColorHue;
184 |                 setColorHue(newColorHue);
185 |               }}
186 |             >
187 |               {Object.keys(colors[color]).map((key) => (
188 |                 <option key={key} value={key}>
189 |                   {key}
190 |                 </option>
191 |               ))}
192 |             </select>
193 |           )}
194 |         </div>
195 |         <div>
196 |           <label htmlFor="opacity" className="block text-sm font-bold">
197 |             Opacity
198 |           </label>
199 |           <input
200 |             id="opacity"
201 |             type="range"
202 |             value={opacity}
203 |             onChange={(ev) => {
204 |               const value = parseInt(ev.target.value);
205 |               const newOpacity = Object.keys(opacities)
206 |                 .map((val) => parseInt(val))
207 |                 .reduce((previous, next) => {
208 |                   const deltaPrev = Math.abs(value - previous);
209 |                   const deltaNext = Math.abs(value - next);
210 |                   return deltaNext < deltaPrev ? next : previous;
211 |                 });
212 |               setOpacity(newOpacity as Opacity);
213 |             }}
214 |             step="5"
215 |             min="5"
216 |             max="100"
217 |           />
218 |         </div>
219 |         <div>
220 |           <label htmlFor="size" className="block text-sm font-bold">
221 |             Size
222 |           </label>
223 |           <input
224 |             id="size"
225 |             type="range"
226 |             value={size}
227 |             onChange={(ev) => {
228 |               const value = parseInt(ev.target.value);
229 |               const newSize = Object.keys(sizes)
230 |                 .map((val) => parseInt(val))
231 |                 .reduce((previous, next) => {
232 |                   const deltaPrev = Math.abs(value - previous);
233 |                   const deltaNext = Math.abs(value - next);
234 |                   return deltaNext < deltaPrev ? next : previous;
235 |                 });
236 |               setSize(newSize as Size);
237 |             }}
238 |             step="1"
239 |             min="1"
240 |             max="32"
241 |           />
242 |         </div>
243 |       </div>
244 |     </div>
245 |   );
246 | }
247 | 


--------------------------------------------------------------------------------
/packages/example/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/packages/example/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thillmann/tailwindcss-bg-patterns/eaed33b3e5cdc24ea960dfa3416970bfeb8339be/packages/example/public/favicon.ico


--------------------------------------------------------------------------------
/packages/example/public/isometric.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thillmann/tailwindcss-bg-patterns/eaed33b3e5cdc24ea960dfa3416970bfeb8339be/packages/example/public/isometric.png


--------------------------------------------------------------------------------
/packages/example/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/packages/example/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 5 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 7 |   ],
 8 |   plugins: [require("tailwindcss-bg-patterns")],
 9 | };
10 | 


--------------------------------------------------------------------------------
/packages/example/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "paths": {
18 |       "@/*": ["./*"]
19 |     }
20 |   },
21 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
22 |   "exclude": ["node_modules"]
23 | }
24 | 


--------------------------------------------------------------------------------
/packages/tailwindcss-bg-patterns/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | example
3 | .gitignore


--------------------------------------------------------------------------------
/packages/tailwindcss-bg-patterns/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Timo Hillmann
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/packages/tailwindcss-bg-patterns/README.md:
--------------------------------------------------------------------------------
  1 | <h2 align="center">TailwindCSS Background Patterns</h1>
  2 | <p align="center">Inspired by <a href="https://www.magicpattern.design/tools/css-backgrounds" target="_blank" rel="noopener noreferrer">CSS Background Patterns by MagicPattern</a> and used by <a href="https://relayforms.com" target="_blank" rel="noopener noreferrer">RelayForms</a></p>
  3 | 
  4 | <p>
  5 |     <a href="https://www.npmjs.com/package/tailwindcss-bg-patterns"><img src="https://img.shields.io/npm/v/tailwindcss-bg-patterns.svg" alt="Latest Release"></a>
  6 |     <a href="https://www.npmjs.com/package/tailwindcss-bg-patterns"><img src="https://img.shields.io/npm/dt/tailwindcss-bg-patterns.svg" alt="Total Downloads"></a>
  7 |     <a href="https://github.com/thillmann/tailwindcss-bg-patterns/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/tailwindcss-bg-patterns.svg" alt="License"></a>
  8 | </p>
  9 | 
 10 | ---
 11 | 
 12 | ## Demo
 13 | 
 14 | See a live demo of all background patterns here: [Live demo](https://hillmann.cc/tailwindcss-bg-patterns/)
 15 | 
 16 | ## Installation
 17 | 
 18 | Add the `tailwindcss-bg-patterns` plugin to your project:
 19 | 
 20 | ```bash
 21 | # Install using npm
 22 | npm install --save-dev tailwindcss-bg-patterns
 23 | 
 24 | # Install using yarn
 25 | yarn add -D tailwindcss-bg-patterns
 26 | 
 27 | # Install using pnpm
 28 | pnpm add -D tailwindcss-bg-patterns
 29 | ```
 30 | 
 31 | ## Usage
 32 | 
 33 | ```javascript
 34 | // tailwind.config.js
 35 | {
 36 |   theme: { // defaults to these values
 37 |     patterns: {
 38 |         opacity: {
 39 |             100: "1",
 40 |             80: ".80",
 41 |             60: ".60",
 42 |             40: ".40",
 43 |             20: ".20",
 44 |             10: ".10",
 45 |             5: ".05",
 46 |         },
 47 |         size: {
 48 |             1: "0.25rem",
 49 |             2: "0.5rem",
 50 |             4: "1rem",
 51 |             6: "1.5rem",
 52 |             8: "2rem",
 53 |             16: "4rem",
 54 |             20: "5rem",
 55 |             24: "6rem",
 56 |             32: "8rem",
 57 |         }
 58 |     }
 59 |   },
 60 |   plugins: [
 61 |     require('tailwindcss-bg-patterns'),
 62 |   ],
 63 | }
 64 | ```
 65 | 
 66 | ## Background Patterns
 67 | 
 68 | Included are the following patterns:
 69 | 
 70 | - Lines (`pattern-lines`)
 71 | - Vertical Lines (`pattern-vertical-lines`)
 72 | - Diagonal Lines (`pattern-diagonal-lines`)
 73 | - Rectangles (`pattern-rectangles`)
 74 | - Rhombus (`pattern-rhombus`)
 75 | - Dots (`pattern-dots`)
 76 | - Boxes (`pattern-boxes`)
 77 | - Cross (`pattern-cross`)
 78 | - Zigzag (`pattern-zigzag`)
 79 | - Zigzag 3D (`pattern-zigzag-3d`)
 80 | - Isometric (`pattern-isometric`)
 81 | - Wavy (`pattern-wavy`)
 82 | - Triangles (`pattern-triangles`)
 83 | - Moon (`pattern-moon`)
 84 | - Paper (`pattern-paper`)
 85 | 
 86 | ## Utilities
 87 | 
 88 | The plugin provides utility classes to control the foreground and background colors (based on your theme colors) as well as opacity and sizing (can be controlled in your theme, too):
 89 | 
 90 | **Opacity**: `pattern-opacity-80` applies opacity of `0.8`
 91 | 
 92 | By default the plugin comes with the following options for opacity: `pattern-size-100`, `pattern-size-80`, `pattern-size-60`, `pattern-size-40`, `pattern-size-20`, `pattern-size-10`, `pattern-size-5`x
 93 | 
 94 | **Size**: `pattern-size-8` applies a size of `2rem`
 95 | 
 96 | By default the plugin comes with the following options for size: `pattern-size-1`, `pattern-size-2`, `pattern-size-4`, `pattern-size-6`, `pattern-size-8`, `pattern-size-16`, `pattern-size-20`, `pattern-size-24`, `pattern-size-32`
 97 | 
 98 | **Color**: `pattern-indigo-600` (foreground) and `pattern-bg-white` (background)
 99 | 
100 | Colors will be extracted from your theme.
101 | 
102 | ## Example
103 | 
104 | Applying the isometric background pattern to a div:
105 | 
106 | ```html
107 | <div
108 |   class="w-56 h-56 pattern-isometric pattern-indigo-600 pattern-bg-transparent pattern-opacity-60 pattern-size-8"
109 | ></div>
110 | ```
111 | 
112 | Which results in:
113 | 
114 | ![Isometric Example](/packages/example/public/isometric.png)
115 | 


--------------------------------------------------------------------------------
/packages/tailwindcss-bg-patterns/index.js:
--------------------------------------------------------------------------------
  1 | const plugin = require("tailwindcss/plugin");
  2 | 
  3 | const patterns = [
  4 |   {
  5 |     name: "lines",
  6 |     styles: {
  7 |       opacity: "var(--pattern-opacity, 0.4)",
  8 |       backgroundColor: "var(--pattern-bg-color, transparent)",
  9 |       backgroundImage: `linear-gradient(0deg, var(--pattern-bg-color, transparent) 50%, var(--pattern-color) 50%)`,
 10 |       backgroundSize: `var(--pattern-size, 40px) var(--pattern-size, 40px)`,
 11 |     },
 12 |   },
 13 |   {
 14 |     name: "vertical-lines",
 15 |     styles: {
 16 |       opacity: "var(--pattern-opacity, 0.4)",
 17 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 18 |       backgroundImage: `linear-gradient(to right, var(--pattern-color), var(--pattern-color) var(--pattern-size-half, 20px), var(--pattern-bg-color, transparent) var(--pattern-size-half, 20px), var(--pattern-bg-color, transparent))`,
 19 |       backgroundSize: `var(--pattern-size, 40px) var(--pattern-size, 40px)`,
 20 |     },
 21 |   },
 22 |   {
 23 |     name: "dots",
 24 |     styles: {
 25 |       opacity: "var(--pattern-opacity, 0.4)",
 26 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 27 |       backgroundImage: `radial-gradient(var(--pattern-color) calc(var(--pattern-size, 40px) * 0.1), var(--pattern-bg-color) calc(var(--pattern-size, 40px) * 0.1))`,
 28 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
 29 |     },
 30 |   },
 31 |   {
 32 |     name: "rhombus",
 33 |     styles: {
 34 |       opacity: "var(--pattern-opacity, 0.4)",
 35 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 36 |       backgroundImage: `linear-gradient(135deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(225deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(315deg, var(--pattern-color) 25%, var(--pattern-bg-color) 25%)`,
 37 |       backgroundPosition:
 38 |         "var(--pattern-size, 40px) 0, var(--pattern-size, 40px) 0, 0 0, 0 0",
 39 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
 40 |       backgroundRepeat: "repeat",
 41 |     },
 42 |   },
 43 |   {
 44 |     name: "cross",
 45 |     styles: {
 46 |       opacity: "var(--pattern-opacity, 0.4)",
 47 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 48 |       background: `radial-gradient(circle, transparent 20%, var(--pattern-bg-color) 20%, var(--pattern-bg-color) 80%, transparent 80%, transparent), radial-gradient(circle, transparent 20%, var(--pattern-bg-color) 20%, var(--pattern-bg-color) 80%, transparent 80%, transparent) var(--pattern-size-half, 20px) var(--pattern-size-half, 20px), linear-gradient(var(--pattern-color) calc(var(--pattern-size, 40px) * 0.04), transparent calc(var(--pattern-size, 40px) * 0.04)) 0 calc(var(--pattern-size, 40px) * -0.02), linear-gradient(90deg, var(--pattern-color) calc(var(--pattern-size, 40px) * 0.04), var(--pattern-bg-color) calc(var(--pattern-size, 100px) * 0.04)) calc(var(--pattern-size, 40px) * -0.02) 0`,
 49 |       backgroundSize: `var(--pattern-size, 40px) var(--pattern-size, 20px), var(--pattern-size, 40px) var(--pattern-size, 20px), var(--pattern-size-half, 20px) var(--pattern-size-half, 20px), var(--pattern-size-half, 20px) var(--pattern-size-half, 20px)`,
 50 |     },
 51 |   },
 52 |   {
 53 |     name: "wavy",
 54 |     styles: {
 55 |       opacity: "var(--pattern-opacity, 0.4)",
 56 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 57 |       backgroundImage:
 58 |         "repeating-radial-gradient( circle at 0 0, transparent 0, var(--pattern-bg-color, transparent) var(--pattern-size, 40px) ), repeating-linear-gradient( var(--pattern-color-55), var(--pattern-color) )",
 59 |     },
 60 |   },
 61 |   {
 62 |     name: "zigzag",
 63 |     styles: {
 64 |       opacity: "var(--pattern-opacity, 0.4)",
 65 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 66 |       backgroundImage:
 67 |         "linear-gradient(135deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(225deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%), linear-gradient(315deg, var(--pattern-color) 25%, var(--pattern-bg-color, transparent) 25%)",
 68 |       backgroundPosition:
 69 |         "var(--pattern-size-half, 20px) 0, var(--pattern-size-half, 20px) 0, 0 0, 0 0",
 70 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
 71 |       backgroundRepeat: "repeat",
 72 |     },
 73 |   },
 74 |   {
 75 |     name: "zigzag-3d",
 76 |     styles: {
 77 |       opacity: "var(--pattern-opacity, 0.4)",
 78 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 79 |       background:
 80 |         "linear-gradient(135deg, var(--pattern-color-55) 25%, transparent 25%) calc(var(--pattern-size, 40px) * -0.5) 0/ var(--pattern-size, 40px) var(--pattern-size, 40px), linear-gradient(225deg, var(--pattern-color) 25%, transparent 25%) calc(var(--pattern-size, 40px) * -0.5) 0/ var(--pattern-size, 40px) var(--pattern-size, 40px), linear-gradient(315deg, var(--pattern-color-55) 25%, transparent 25%) 0px 0/ var(--pattern-size, 40px) var(--pattern-size, 40px), linear-gradient(45deg, var(--pattern-color) 25%, var(--pattern-bg-color) 25%) 0px 0/ var(--pattern-size, 40px) var(--pattern-size, 40px)",
 81 |     },
 82 |   },
 83 |   {
 84 |     name: "isometric",
 85 |     styles: {
 86 |       opacity: "var(--pattern-opacity, 0.4)",
 87 |       backgroundColor: "var(--pattern-bg-color, transparent)",
 88 |       backgroundImage:
 89 |         "linear-gradient(30deg, var(--pattern-color) 12%, transparent 12.5%, transparent 87%, var(--pattern-color) 87.5%, var(--pattern-color)), linear-gradient(150deg, var(--pattern-color) 12%, transparent 12.5%, transparent 87%, var(--pattern-color) 87.5%, var(--pattern-color)), linear-gradient(30deg, var(--pattern-color) 12%, transparent 12.5%, transparent 87%, var(--pattern-color) 87.5%, var(--pattern-color)), linear-gradient(150deg, var(--pattern-color) 12%, transparent 12.5%, transparent 87%, var(--pattern-color) 87.5%, var(--pattern-color)), linear-gradient(60deg, var(--pattern-color-77) 25%, transparent 25.5%, transparent 75%, var(--pattern-color-77) 75%, var(--pattern-color-77)), linear-gradient(60deg, var(--pattern-color-77) 25%, transparent 25.5%, transparent 75%, var(--pattern-color-77) 75%, var(--pattern-color-77))",
 90 |       backgroundSize:
 91 |         "var(--pattern-size, 40px) calc(var(--pattern-size, 40px) * 1.75)",
 92 |       backgroundPosition:
 93 |         "0 0, 0 0, var(--pattern-size-half, 20px) calc(var(--pattern-size, 40px) * 0.875), var(--pattern-size-half, 20px) calc(var(--pattern-size, 40px) * 0.875), 0 0, var(--pattern-size-half, 20px) calc(var(--pattern-size, 40px) * 0.875)",
 94 |     },
 95 |   },
 96 |   {
 97 |     name: "boxes",
 98 |     styles: {
 99 |       opacity: "var(--pattern-opacity, 0.4)",
100 |       backgroundColor: "var(--pattern-bg-color, transparent)",
101 |       backgroundImage:
102 |         "linear-gradient(var(--pattern-color) calc(var(--pattern-size, 40px) * 0.1), transparent calc(var(--pattern-size, 40px) * 0.1)), linear-gradient(to right, var(--pattern-color) calc(var(--pattern-size, 40px) * 0.1), var(--pattern-bg-color, transparent) calc(var(--pattern-size, 40px) * 0.1))",
103 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
104 |     },
105 |   },
106 |   {
107 |     name: "rectangles",
108 |     styles: {
109 |       opacity: "var(--pattern-opacity, 0.4)",
110 |       backgroundColor: "var(--pattern-bg-color, transparent)",
111 |       backgroundImage:
112 |         "repeating-linear-gradient(45deg, var(--pattern-color) 25%, transparent 25%, transparent 75%, var(--pattern-color) 75%, var(--pattern-color)), repeating-linear-gradient(45deg, var(--pattern-color) 25%, var(--pattern-bg-color, transparent) 25%, var(--pattern-bg-color, transparent) 75%, var(--pattern-color) 75%, var(--pattern-color))",
113 |       backgroundPosition:
114 |         "0 0, var(--pattern-size-half, 20px) var(--pattern-size-half, 20px)",
115 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
116 |     },
117 |   },
118 |   {
119 |     name: "diagonal-lines",
120 |     styles: {
121 |       opacity: "var(--pattern-opacity, 0.4)",
122 |       backgroundColor: "var(--pattern-bg-color, transparent)",
123 |       background:
124 |         "repeating-linear-gradient( 45deg, var(--pattern-color), var(--pattern-color) calc(var(--pattern-size, 40px) * 0.2), var(--pattern-bg-color, transparent) calc(var(--pattern-size, 40px) * 0.2), var(--pattern-bg-color) var(--pattern-size, 40px) )",
125 |     },
126 |   },
127 |   {
128 |     name: "triangles",
129 |     styles: {
130 |       opacity: "var(--pattern-opacity, 0.4)",
131 |       backgroundColor: "var(--pattern-bg-color, transparent)",
132 |       backgroundImage: "linear-gradient(45deg, var(--pattern-color) 50%, var(--pattern-bg-color, transparent) 50%)",
133 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
134 |     },
135 |   },
136 |   {
137 |     name: "moon",
138 |     styles: {
139 |       opacity: "var(--pattern-opacity, 0.4)",
140 |       backgroundColor: "var(--pattern-bg-color, transparent)",
141 |       backgroundImage: "radial-gradient( ellipse farthest-corner at var(--pattern-size, 40px) var(--pattern-size, 40px), var(--pattern-color), var(--pattern-color) 50%, var(--pattern-bg-color, transparent) 50%)",
142 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px)",
143 |     },
144 |   },
145 |   {
146 |     name: "paper",
147 |     styles: {
148 |       opacity: "var(--pattern-opacity, 0.4)",
149 |       backgroundColor: "var(--pattern-bg-color, transparent)",
150 |       backgroundImage: "linear-gradient(var(--pattern-color) calc(var(--pattern-size, 40px) * 0.04), transparent calc(var(--pattern-size, 40px) * 0.04)), linear-gradient(90deg, var(--pattern-color) calc(var(--pattern-size, 40px) * 0.04), transparent calc(var(--pattern-size, 40px) * 0.04)), linear-gradient(var(--pattern-color) calc(var(--pattern-size, 40px) * 0.02), transparent calc(var(--pattern-size, 40px) * 0.02)), linear-gradient(90deg, var(--pattern-color) 2px, var(--pattern-bg-color, transparent) calc(var(--pattern-size, 40px) * 0.02))",
151 |       backgroundSize: "var(--pattern-size, 40px) var(--pattern-size, 40px), var(--pattern-size, 40px) var(--pattern-size, 40px), calc(var(--pattern-size, 40px) * 0.2) calc(var(--pattern-size, 40px) * 0.2), calc(var(--pattern-size, 40px) * 0.2) calc(var(--pattern-size, 40px) * 0.2)",
152 |       backgroundPosition: "calc(var(--pattern-size, 40px) * -0.04) calc(var(--pattern-size, 40px) * -0.04), calc(var(--pattern-size, 40px) * -0.04) calc(var(--pattern-size, 40px) * -0.04), calc(var(--pattern-size, 40px) * -0.02) calc(var(--pattern-size, 40px) * -0.02), calc(var(--pattern-size, 40px) * -0.02) calc(var(--pattern-size, 40px) * -0.02)",
153 |     },
154 |   },
155 | ];
156 | 
157 | const defaultOpacities = {
158 |   100: "1",
159 |   80: ".80",
160 |   60: ".60",
161 |   40: ".40",
162 |   20: ".20",
163 |   10: ".10",
164 |   5: ".05",
165 | };
166 | 
167 | const defaultSizes = {
168 |   1: "0.25rem",
169 |   2: "0.5rem",
170 |   4: "1rem",
171 |   6: "1.5rem",
172 |   8: "2rem",
173 |   16: "4rem",
174 |   20: "5rem",
175 |   24: "6rem",
176 |   32: "8rem",
177 | };
178 | 
179 | module.exports = plugin(function ({ addComponents, addUtilities, theme }) {
180 |   const colors = theme("colors", {});
181 |   const allColors = Object.keys(colors).map((key) => ({
182 |     name: key,
183 |     values: colors[key],
184 |   }));
185 |   const opacities = theme("patterns.opacity", defaultOpacities);
186 |   const sizes = theme("patterns.size", defaultSizes);
187 | 
188 |   let utilities = {};
189 |   let components = {};
190 | 
191 |   allColors.forEach(({ name, values }) => {
192 |     if (typeof values === "object") {
193 |       Object.keys(values).forEach((value) => {
194 |         utilities[`.pattern-${name}-${value}`] = {
195 |           "--pattern-color": values[value],
196 |           "--pattern-color-55": values[value] + "55",
197 |           "--pattern-color-77": values[value] + "77",
198 |         };
199 |         utilities[`.pattern-bg-${name}-${value}`] = {
200 |           "--pattern-bg-color": values[value],
201 |         };
202 |       });
203 |     } else {
204 |       utilities[`.pattern-${name}`] = {
205 |         "--pattern-color": values,
206 |       };
207 |       utilities[`.pattern-bg-${name}`] = {
208 |         "--pattern-bg-color": values,
209 |       };
210 |     }
211 |   });
212 | 
213 |   Object.keys(opacities).forEach((opacity) => {
214 |     utilities[`.pattern-opacity-${opacity}`] = {
215 |       "--pattern-opacity": opacities[opacity],
216 |     };
217 |   });
218 | 
219 |   Object.keys(sizes).forEach((size) => {
220 |     utilities[`.pattern-size-${size}`] = {
221 |       "--pattern-size": sizes[size],
222 |       "--pattern-size-half": `calc(${sizes[size]} / 2)`,
223 |     };
224 |   });
225 | 
226 |   patterns.forEach(({ name: patternName, styles }) => {
227 |     components[`.pattern-${patternName}`] = styles;
228 |   });
229 | 
230 |   addUtilities(utilities);
231 |   addComponents(components);
232 | });
233 | 


--------------------------------------------------------------------------------
/packages/tailwindcss-bg-patterns/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tailwindcss-bg-patterns",
 3 |   "version": "0.3.0",
 4 |   "keywords": [
 5 |     "plugin",
 6 |     "tailwind",
 7 |     "tailwind css",
 8 |     "tailwindcss",
 9 |     "tailwindcss-plugin",
10 |     "css background patterns",
11 |     "background patterns"
12 |   ],
13 |   "repository": "git@github.com:thillmann/tailwind-patterns.git",
14 |   "license": "MIT",
15 |   "author": "Timo Hillmann <timo@hillmann.cc>",
16 |   "main": "index.js",
17 |   "scripts": {},
18 |   "devDependencies": {
19 |     "tailwindcss": "3.3.2"
20 |   },
21 |   "peerDependencies": {
22 |     "tailwindcss": ">2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pnpm-lock.yaml:
--------------------------------------------------------------------------------
   1 | lockfileVersion: '6.0'
   2 | 
   3 | settings:
   4 |   autoInstallPeers: true
   5 |   excludeLinksFromLockfile: false
   6 | 
   7 | importers:
   8 | 
   9 |   .: {}
  10 | 
  11 |   packages/example:
  12 |     dependencies:
  13 |       '@headlessui/react':
  14 |         specifier: ^1.7.15
  15 |         version: 1.7.15(react-dom@18.2.0)(react@18.2.0)
  16 |       '@reach/dialog':
  17 |         specifier: ^0.18.0
  18 |         version: 0.18.0(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
  19 |       '@reach/tooltip':
  20 |         specifier: ^0.18.0
  21 |         version: 0.18.0(react-dom@18.2.0)(react@18.2.0)
  22 |       '@types/node':
  23 |         specifier: 20.3.3
  24 |         version: 20.3.3
  25 |       '@types/react':
  26 |         specifier: 18.2.14
  27 |         version: 18.2.14
  28 |       '@types/react-dom':
  29 |         specifier: 18.2.6
  30 |         version: 18.2.6
  31 |       autoprefixer:
  32 |         specifier: 10.4.14
  33 |         version: 10.4.14(postcss@8.4.24)
  34 |       copy-to-clipboard:
  35 |         specifier: ^3.3.3
  36 |         version: 3.3.3
  37 |       next:
  38 |         specifier: 13.4.8
  39 |         version: 13.4.8(react-dom@18.2.0)(react@18.2.0)
  40 |       postcss:
  41 |         specifier: 8.4.24
  42 |         version: 8.4.24
  43 |       prismjs:
  44 |         specifier: ^1.29.0
  45 |         version: 1.29.0
  46 |       react:
  47 |         specifier: 18.2.0
  48 |         version: 18.2.0
  49 |       react-dom:
  50 |         specifier: 18.2.0
  51 |         version: 18.2.0(react@18.2.0)
  52 |       tailwindcss:
  53 |         specifier: 3.3.2
  54 |         version: 3.3.2
  55 |       tailwindcss-bg-patterns:
  56 |         specifier: workspace:*
  57 |         version: link:../tailwindcss-bg-patterns
  58 |       typescript:
  59 |         specifier: 5.1.6
  60 |         version: 5.1.6
  61 |     devDependencies:
  62 |       '@types/prismjs':
  63 |         specifier: ^1.26.0
  64 |         version: 1.26.0
  65 |       babel-plugin-prismjs:
  66 |         specifier: ^2.1.0
  67 |         version: 2.1.0(prismjs@1.29.0)
  68 | 
  69 |   packages/tailwindcss-bg-patterns:
  70 |     devDependencies:
  71 |       tailwindcss:
  72 |         specifier: 3.3.2
  73 |         version: 3.3.2
  74 | 
  75 | packages:
  76 | 
  77 |   /@alloc/quick-lru@5.2.0:
  78 |     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
  79 |     engines: {node: '>=10'}
  80 | 
  81 |   /@babel/runtime@7.22.6:
  82 |     resolution: {integrity: sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==}
  83 |     engines: {node: '>=6.9.0'}
  84 |     dependencies:
  85 |       regenerator-runtime: 0.13.11
  86 |     dev: false
  87 | 
  88 |   /@headlessui/react@1.7.15(react-dom@18.2.0)(react@18.2.0):
  89 |     resolution: {integrity: sha512-OTO0XtoRQ6JPB1cKNFYBZv2Q0JMqMGNhYP1CjPvcJvjz8YGokz8oAj89HIYZGN0gZzn/4kk9iUpmMF4Q21Gsqw==}
  90 |     engines: {node: '>=10'}
  91 |     peerDependencies:
  92 |       react: ^16 || ^17 || ^18
  93 |       react-dom: ^16 || ^17 || ^18
  94 |     dependencies:
  95 |       client-only: 0.0.1
  96 |       react: 18.2.0
  97 |       react-dom: 18.2.0(react@18.2.0)
  98 |     dev: false
  99 | 
 100 |   /@jridgewell/gen-mapping@0.3.3:
 101 |     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
 102 |     engines: {node: '>=6.0.0'}
 103 |     dependencies:
 104 |       '@jridgewell/set-array': 1.1.2
 105 |       '@jridgewell/sourcemap-codec': 1.4.15
 106 |       '@jridgewell/trace-mapping': 0.3.18
 107 | 
 108 |   /@jridgewell/resolve-uri@3.1.0:
 109 |     resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
 110 |     engines: {node: '>=6.0.0'}
 111 | 
 112 |   /@jridgewell/set-array@1.1.2:
 113 |     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
 114 |     engines: {node: '>=6.0.0'}
 115 | 
 116 |   /@jridgewell/sourcemap-codec@1.4.14:
 117 |     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
 118 | 
 119 |   /@jridgewell/sourcemap-codec@1.4.15:
 120 |     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 121 | 
 122 |   /@jridgewell/trace-mapping@0.3.18:
 123 |     resolution: {integrity: sha512-w+niJYzMHdd7USdiH2U6869nqhD2nbfZXND5Yp93qIbEmnDNk7PD48o+YchRVpzMU7M6jVCbenTR7PA1FLQ9pA==}
 124 |     dependencies:
 125 |       '@jridgewell/resolve-uri': 3.1.0
 126 |       '@jridgewell/sourcemap-codec': 1.4.14
 127 | 
 128 |   /@next/env@13.4.8:
 129 |     resolution: {integrity: sha512-twuSf1klb3k9wXI7IZhbZGtFCWvGD4wXTY2rmvzIgVhXhs7ISThrbNyutBx3jWIL8Y/Hk9+woytFz5QsgtcRKQ==}
 130 |     dev: false
 131 | 
 132 |   /@next/swc-darwin-arm64@13.4.8:
 133 |     resolution: {integrity: sha512-MSFplVM4dTWOuKAUv0XR9gY7AWtMSBu9os9f+kp+s5rWhM1I2CdR3obFttd6366nS/W/VZxbPM5oEIdlIa46zA==}
 134 |     engines: {node: '>= 10'}
 135 |     cpu: [arm64]
 136 |     os: [darwin]
 137 |     requiresBuild: true
 138 |     dev: false
 139 |     optional: true
 140 | 
 141 |   /@next/swc-darwin-x64@13.4.8:
 142 |     resolution: {integrity: sha512-Reox+UXgonon9P0WNDE6w85DGtyBqGitl/ryznOvn6TvfxEaZIpTgeu3ZrJLU9dHSMhiK7YAM793mE/Zii2/Qw==}
 143 |     engines: {node: '>= 10'}
 144 |     cpu: [x64]
 145 |     os: [darwin]
 146 |     requiresBuild: true
 147 |     dev: false
 148 |     optional: true
 149 | 
 150 |   /@next/swc-linux-arm64-gnu@13.4.8:
 151 |     resolution: {integrity: sha512-kdyzYvAYtqQVgzIKNN7e1rLU8aZv86FDSRqPlOkKZlvqudvTO0iohuTPmnEEDlECeBM6qRPShNffotDcU/R2KA==}
 152 |     engines: {node: '>= 10'}
 153 |     cpu: [arm64]
 154 |     os: [linux]
 155 |     requiresBuild: true
 156 |     dev: false
 157 |     optional: true
 158 | 
 159 |   /@next/swc-linux-arm64-musl@13.4.8:
 160 |     resolution: {integrity: sha512-oWxx4yRkUGcR81XwbI+T0zhZ3bDF6V1aVLpG+C7hSG50ULpV8gC39UxVO22/bv93ZlcfMY4zl8xkz9Klct6dpQ==}
 161 |     engines: {node: '>= 10'}
 162 |     cpu: [arm64]
 163 |     os: [linux]
 164 |     requiresBuild: true
 165 |     dev: false
 166 |     optional: true
 167 | 
 168 |   /@next/swc-linux-x64-gnu@13.4.8:
 169 |     resolution: {integrity: sha512-anhtvuO6eE9YRhYnaEGTfbpH3L5gT/9qPFcNoi6xS432r/4DAtpJY8kNktqkTVevVIC/pVumqO8tV59PR3zbNg==}
 170 |     engines: {node: '>= 10'}
 171 |     cpu: [x64]
 172 |     os: [linux]
 173 |     requiresBuild: true
 174 |     dev: false
 175 |     optional: true
 176 | 
 177 |   /@next/swc-linux-x64-musl@13.4.8:
 178 |     resolution: {integrity: sha512-aR+J4wWfNgH1DwCCBNjan7Iumx0lLtn+2/rEYuhIrYLY4vnxqSVGz9u3fXcgUwo6Q9LT8NFkaqK1vPprdq+BXg==}
 179 |     engines: {node: '>= 10'}
 180 |     cpu: [x64]
 181 |     os: [linux]
 182 |     requiresBuild: true
 183 |     dev: false
 184 |     optional: true
 185 | 
 186 |   /@next/swc-win32-arm64-msvc@13.4.8:
 187 |     resolution: {integrity: sha512-OWBKIrJwQBTqrat0xhxEB/jcsjJR3+diD9nc/Y8F1mRdQzsn4bPsomgJyuqPVZs6Lz3K18qdIkvywmfSq75SsQ==}
 188 |     engines: {node: '>= 10'}
 189 |     cpu: [arm64]
 190 |     os: [win32]
 191 |     requiresBuild: true
 192 |     dev: false
 193 |     optional: true
 194 | 
 195 |   /@next/swc-win32-ia32-msvc@13.4.8:
 196 |     resolution: {integrity: sha512-agiPWGjUndXGTOn4ChbKipQXRA6/UPkywAWIkx7BhgGv48TiJfHTK6MGfBoL9tS6B4mtW39++uy0wFPnfD0JWg==}
 197 |     engines: {node: '>= 10'}
 198 |     cpu: [ia32]
 199 |     os: [win32]
 200 |     requiresBuild: true
 201 |     dev: false
 202 |     optional: true
 203 | 
 204 |   /@next/swc-win32-x64-msvc@13.4.8:
 205 |     resolution: {integrity: sha512-UIRKoByVKbuR6SnFG4JM8EMFlJrfEGuUQ1ihxzEleWcNwRMMiVaCj1KyqfTOW8VTQhJ0u8P1Ngg6q1RwnIBTtw==}
 206 |     engines: {node: '>= 10'}
 207 |     cpu: [x64]
 208 |     os: [win32]
 209 |     requiresBuild: true
 210 |     dev: false
 211 |     optional: true
 212 | 
 213 |   /@nodelib/fs.scandir@2.1.5:
 214 |     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
 215 |     engines: {node: '>= 8'}
 216 |     dependencies:
 217 |       '@nodelib/fs.stat': 2.0.5
 218 |       run-parallel: 1.2.0
 219 | 
 220 |   /@nodelib/fs.stat@2.0.5:
 221 |     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
 222 |     engines: {node: '>= 8'}
 223 | 
 224 |   /@nodelib/fs.walk@1.2.8:
 225 |     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
 226 |     engines: {node: '>= 8'}
 227 |     dependencies:
 228 |       '@nodelib/fs.scandir': 2.1.5
 229 |       fastq: 1.15.0
 230 | 
 231 |   /@reach/auto-id@0.18.0(react-dom@18.2.0)(react@18.2.0):
 232 |     resolution: {integrity: sha512-XwY1IwhM7mkHZFghhjiqjQ6dstbOdpbFLdggeke75u8/8icT8uEHLbovFUgzKjy9qPvYwZIB87rLiR8WdtOXCg==}
 233 |     peerDependencies:
 234 |       react: ^16.8.0 || 17.x
 235 |       react-dom: ^16.8.0 || 17.x
 236 |     dependencies:
 237 |       '@reach/utils': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 238 |       react: 18.2.0
 239 |       react-dom: 18.2.0(react@18.2.0)
 240 |     dev: false
 241 | 
 242 |   /@reach/dialog@0.18.0(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
 243 |     resolution: {integrity: sha512-hWhzmBK8VJj+yf6OivFqHFZIV4q9TISZrkPaglKE5oFYtrr75lxWjrBTA+BshL0r/FfKodvNtdT8yq4vj/6Gcw==}
 244 |     peerDependencies:
 245 |       react: ^16.8.0 || 17.x
 246 |       react-dom: ^16.8.0 || 17.x
 247 |     dependencies:
 248 |       '@reach/polymorphic': 0.18.0(react@18.2.0)
 249 |       '@reach/portal': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 250 |       '@reach/utils': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 251 |       react: 18.2.0
 252 |       react-dom: 18.2.0(react@18.2.0)
 253 |       react-focus-lock: 2.5.2(@types/react@18.2.14)(react@18.2.0)
 254 |       react-remove-scroll: 2.4.3(@types/react@18.2.14)(react@18.2.0)
 255 |     transitivePeerDependencies:
 256 |       - '@types/react'
 257 |     dev: false
 258 | 
 259 |   /@reach/observe-rect@1.2.0:
 260 |     resolution: {integrity: sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==}
 261 |     dev: false
 262 | 
 263 |   /@reach/polymorphic@0.18.0(react@18.2.0):
 264 |     resolution: {integrity: sha512-N9iAjdMbE//6rryZZxAPLRorzDcGBnluf7YQij6XDLiMtfCj1noa7KyLpEc/5XCIB/EwhX3zCluFAwloBKdblA==}
 265 |     peerDependencies:
 266 |       react: ^16.8.0 || 17.x
 267 |     dependencies:
 268 |       react: 18.2.0
 269 |     dev: false
 270 | 
 271 |   /@reach/portal@0.18.0(react-dom@18.2.0)(react@18.2.0):
 272 |     resolution: {integrity: sha512-TImozRapd576ofRk30Le2L3lRTFXF1p47B182wnp5eMTdZa74JX138BtNGEPJFOyrMaVmguVF8SSwZ6a0fon1Q==}
 273 |     peerDependencies:
 274 |       react: ^16.8.0 || 17.x
 275 |       react-dom: ^16.8.0 || 17.x
 276 |     dependencies:
 277 |       '@reach/utils': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 278 |       react: 18.2.0
 279 |       react-dom: 18.2.0(react@18.2.0)
 280 |     dev: false
 281 | 
 282 |   /@reach/rect@0.18.0(react-dom@18.2.0)(react@18.2.0):
 283 |     resolution: {integrity: sha512-Xk8urN4NLn3F70da/DtByMow83qO6DF6vOxpLjuDBqud+kjKgxAU9vZMBSZJyH37+F8mZinRnHyXtlLn5njQOg==}
 284 |     peerDependencies:
 285 |       react: ^16.8.0 || 17.x
 286 |       react-dom: ^16.8.0 || 17.x
 287 |     dependencies:
 288 |       '@reach/observe-rect': 1.2.0
 289 |       '@reach/utils': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 290 |       react: 18.2.0
 291 |       react-dom: 18.2.0(react@18.2.0)
 292 |     dev: false
 293 | 
 294 |   /@reach/tooltip@0.18.0(react-dom@18.2.0)(react@18.2.0):
 295 |     resolution: {integrity: sha512-yugoTmTjB3qoMk/nUvcnw99MqpyE2TQMOXE29qnQhSqHriRwQhfftjXlTAGTSzsUJmbyms3A/1gQW0X61kjFZw==}
 296 |     peerDependencies:
 297 |       react: ^16.8.0 || 17.x
 298 |       react-dom: ^16.8.0 || 17.x
 299 |     dependencies:
 300 |       '@reach/auto-id': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 301 |       '@reach/polymorphic': 0.18.0(react@18.2.0)
 302 |       '@reach/portal': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 303 |       '@reach/rect': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 304 |       '@reach/utils': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 305 |       '@reach/visually-hidden': 0.18.0(react-dom@18.2.0)(react@18.2.0)
 306 |       react: 18.2.0
 307 |       react-dom: 18.2.0(react@18.2.0)
 308 |     dev: false
 309 | 
 310 |   /@reach/utils@0.18.0(react-dom@18.2.0)(react@18.2.0):
 311 |     resolution: {integrity: sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==}
 312 |     peerDependencies:
 313 |       react: ^16.8.0 || 17.x
 314 |       react-dom: ^16.8.0 || 17.x
 315 |     dependencies:
 316 |       react: 18.2.0
 317 |       react-dom: 18.2.0(react@18.2.0)
 318 |     dev: false
 319 | 
 320 |   /@reach/visually-hidden@0.18.0(react-dom@18.2.0)(react@18.2.0):
 321 |     resolution: {integrity: sha512-NsJ3oeHJtPc6UOeV6MHMuzQ5sl1ouKhW85i3C0S7VM+klxVlYScBZ2J4UVnWB50A2c+evdVpCnld2YeuyYYwBw==}
 322 |     peerDependencies:
 323 |       react: ^16.8.0 || 17.x || 18.x
 324 |       react-dom: ^16.8.0 || 17.x || 18.x
 325 |     dependencies:
 326 |       '@reach/polymorphic': 0.18.0(react@18.2.0)
 327 |       react: 18.2.0
 328 |       react-dom: 18.2.0(react@18.2.0)
 329 |     dev: false
 330 | 
 331 |   /@swc/helpers@0.5.1:
 332 |     resolution: {integrity: sha512-sJ902EfIzn1Fa+qYmjdQqh8tPsoxyBz+8yBKC2HKUxyezKJFwPGOn7pv4WY6QuQW//ySQi5lJjA/ZT9sNWWNTg==}
 333 |     dependencies:
 334 |       tslib: 2.6.0
 335 |     dev: false
 336 | 
 337 |   /@types/node@20.3.3:
 338 |     resolution: {integrity: sha512-wheIYdr4NYML61AjC8MKj/2jrR/kDQri/CIpVoZwldwhnIrD/j9jIU5bJ8yBKuB2VhpFV7Ab6G2XkBjv9r9Zzw==}
 339 |     dev: false
 340 | 
 341 |   /@types/prismjs@1.26.0:
 342 |     resolution: {integrity: sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ==}
 343 |     dev: true
 344 | 
 345 |   /@types/prop-types@15.7.5:
 346 |     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
 347 |     dev: false
 348 | 
 349 |   /@types/react-dom@18.2.6:
 350 |     resolution: {integrity: sha512-2et4PDvg6PVCyS7fuTc4gPoksV58bW0RwSxWKcPRcHZf0PRUGq03TKcD/rUHe3azfV6/5/biUBJw+HhCQjaP0A==}
 351 |     dependencies:
 352 |       '@types/react': 18.2.14
 353 |     dev: false
 354 | 
 355 |   /@types/react@18.2.14:
 356 |     resolution: {integrity: sha512-A0zjq+QN/O0Kpe30hA1GidzyFjatVvrpIvWLxD+xv67Vt91TWWgco9IvrJBkeyHm1trGaFS/FSGqPlhyeZRm0g==}
 357 |     dependencies:
 358 |       '@types/prop-types': 15.7.5
 359 |       '@types/scheduler': 0.16.3
 360 |       csstype: 3.1.2
 361 |     dev: false
 362 | 
 363 |   /@types/scheduler@0.16.3:
 364 |     resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==}
 365 |     dev: false
 366 | 
 367 |   /any-promise@1.3.0:
 368 |     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
 369 | 
 370 |   /anymatch@3.1.3:
 371 |     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
 372 |     engines: {node: '>= 8'}
 373 |     dependencies:
 374 |       normalize-path: 3.0.0
 375 |       picomatch: 2.3.1
 376 | 
 377 |   /arg@5.0.2:
 378 |     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 379 | 
 380 |   /autoprefixer@10.4.14(postcss@8.4.24):
 381 |     resolution: {integrity: sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==}
 382 |     engines: {node: ^10 || ^12 || >=14}
 383 |     hasBin: true
 384 |     peerDependencies:
 385 |       postcss: ^8.1.0
 386 |     dependencies:
 387 |       browserslist: 4.21.9
 388 |       caniuse-lite: 1.0.30001512
 389 |       fraction.js: 4.2.0
 390 |       normalize-range: 0.1.2
 391 |       picocolors: 1.0.0
 392 |       postcss: 8.4.24
 393 |       postcss-value-parser: 4.2.0
 394 |     dev: false
 395 | 
 396 |   /babel-plugin-prismjs@2.1.0(prismjs@1.29.0):
 397 |     resolution: {integrity: sha512-ehzSKYfeAz4U78zi/sfwsjDPlq0LvDKxNefcZTJ/iKBu+plsHsLqZhUeGf1+82LAcA35UZGbU6ksEx2Utphc/g==}
 398 |     peerDependencies:
 399 |       prismjs: ^1.18.0
 400 |     dependencies:
 401 |       prismjs: 1.29.0
 402 |     dev: true
 403 | 
 404 |   /balanced-match@1.0.2:
 405 |     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 406 | 
 407 |   /binary-extensions@2.2.0:
 408 |     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
 409 |     engines: {node: '>=8'}
 410 | 
 411 |   /brace-expansion@1.1.11:
 412 |     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 413 |     dependencies:
 414 |       balanced-match: 1.0.2
 415 |       concat-map: 0.0.1
 416 | 
 417 |   /braces@3.0.2:
 418 |     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
 419 |     engines: {node: '>=8'}
 420 |     dependencies:
 421 |       fill-range: 7.0.1
 422 | 
 423 |   /browserslist@4.21.9:
 424 |     resolution: {integrity: sha512-M0MFoZzbUrRU4KNfCrDLnvyE7gub+peetoTid3TBIqtunaDJyXlwhakT+/VkvSXcfIzFfK/nkCs4nmyTmxdNSg==}
 425 |     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
 426 |     hasBin: true
 427 |     dependencies:
 428 |       caniuse-lite: 1.0.30001512
 429 |       electron-to-chromium: 1.4.450
 430 |       node-releases: 2.0.12
 431 |       update-browserslist-db: 1.0.11(browserslist@4.21.9)
 432 |     dev: false
 433 | 
 434 |   /busboy@1.6.0:
 435 |     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
 436 |     engines: {node: '>=10.16.0'}
 437 |     dependencies:
 438 |       streamsearch: 1.1.0
 439 |     dev: false
 440 | 
 441 |   /camelcase-css@2.0.1:
 442 |     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
 443 |     engines: {node: '>= 6'}
 444 | 
 445 |   /caniuse-lite@1.0.30001512:
 446 |     resolution: {integrity: sha512-2S9nK0G/mE+jasCUsMPlARhRCts1ebcp2Ji8Y8PWi4NDE1iRdLCnEPHkEfeBrGC45L4isBx5ur3IQ6yTE2mRZw==}
 447 |     dev: false
 448 | 
 449 |   /chokidar@3.5.3:
 450 |     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
 451 |     engines: {node: '>= 8.10.0'}
 452 |     dependencies:
 453 |       anymatch: 3.1.3
 454 |       braces: 3.0.2
 455 |       glob-parent: 5.1.2
 456 |       is-binary-path: 2.1.0
 457 |       is-glob: 4.0.3
 458 |       normalize-path: 3.0.0
 459 |       readdirp: 3.6.0
 460 |     optionalDependencies:
 461 |       fsevents: 2.3.2
 462 | 
 463 |   /client-only@0.0.1:
 464 |     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 465 |     dev: false
 466 | 
 467 |   /commander@4.1.1:
 468 |     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
 469 |     engines: {node: '>= 6'}
 470 | 
 471 |   /concat-map@0.0.1:
 472 |     resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
 473 | 
 474 |   /copy-to-clipboard@3.3.3:
 475 |     resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
 476 |     dependencies:
 477 |       toggle-selection: 1.0.6
 478 |     dev: false
 479 | 
 480 |   /cssesc@3.0.0:
 481 |     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
 482 |     engines: {node: '>=4'}
 483 |     hasBin: true
 484 | 
 485 |   /csstype@3.1.2:
 486 |     resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==}
 487 |     dev: false
 488 | 
 489 |   /detect-node-es@1.1.0:
 490 |     resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
 491 |     dev: false
 492 | 
 493 |   /didyoumean@1.2.2:
 494 |     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 495 | 
 496 |   /dlv@1.1.3:
 497 |     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
 498 | 
 499 |   /electron-to-chromium@1.4.450:
 500 |     resolution: {integrity: sha512-BLG5HxSELlrMx7dJ2s+8SFlsCtJp37Zpk2VAxyC6CZtbc+9AJeZHfYHbrlSgdXp6saQ8StMqOTEDaBKgA7u1sw==}
 501 |     dev: false
 502 | 
 503 |   /escalade@3.1.1:
 504 |     resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
 505 |     engines: {node: '>=6'}
 506 |     dev: false
 507 | 
 508 |   /fast-glob@3.3.0:
 509 |     resolution: {integrity: sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==}
 510 |     engines: {node: '>=8.6.0'}
 511 |     dependencies:
 512 |       '@nodelib/fs.stat': 2.0.5
 513 |       '@nodelib/fs.walk': 1.2.8
 514 |       glob-parent: 5.1.2
 515 |       merge2: 1.4.1
 516 |       micromatch: 4.0.5
 517 | 
 518 |   /fastq@1.15.0:
 519 |     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
 520 |     dependencies:
 521 |       reusify: 1.0.4
 522 | 
 523 |   /fill-range@7.0.1:
 524 |     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
 525 |     engines: {node: '>=8'}
 526 |     dependencies:
 527 |       to-regex-range: 5.0.1
 528 | 
 529 |   /focus-lock@0.9.2:
 530 |     resolution: {integrity: sha512-YtHxjX7a0IC0ZACL5wsX8QdncXofWpGPNoVMuI/nZUrPGp6LmNI6+D5j0pPj+v8Kw5EpweA+T5yImK0rnWf7oQ==}
 531 |     engines: {node: '>=10'}
 532 |     dependencies:
 533 |       tslib: 2.6.0
 534 |     dev: false
 535 | 
 536 |   /fraction.js@4.2.0:
 537 |     resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==}
 538 |     dev: false
 539 | 
 540 |   /fs.realpath@1.0.0:
 541 |     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 542 | 
 543 |   /fsevents@2.3.2:
 544 |     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
 545 |     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
 546 |     os: [darwin]
 547 |     requiresBuild: true
 548 |     optional: true
 549 | 
 550 |   /function-bind@1.1.1:
 551 |     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
 552 | 
 553 |   /get-nonce@1.0.1:
 554 |     resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
 555 |     engines: {node: '>=6'}
 556 |     dev: false
 557 | 
 558 |   /glob-parent@5.1.2:
 559 |     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
 560 |     engines: {node: '>= 6'}
 561 |     dependencies:
 562 |       is-glob: 4.0.3
 563 | 
 564 |   /glob-parent@6.0.2:
 565 |     resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
 566 |     engines: {node: '>=10.13.0'}
 567 |     dependencies:
 568 |       is-glob: 4.0.3
 569 | 
 570 |   /glob-to-regexp@0.4.1:
 571 |     resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==}
 572 |     dev: false
 573 | 
 574 |   /glob@7.1.6:
 575 |     resolution: {integrity: sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==}
 576 |     dependencies:
 577 |       fs.realpath: 1.0.0
 578 |       inflight: 1.0.6
 579 |       inherits: 2.0.4
 580 |       minimatch: 3.1.2
 581 |       once: 1.4.0
 582 |       path-is-absolute: 1.0.1
 583 | 
 584 |   /graceful-fs@4.2.11:
 585 |     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 586 |     dev: false
 587 | 
 588 |   /has@1.0.3:
 589 |     resolution: {integrity: sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==}
 590 |     engines: {node: '>= 0.4.0'}
 591 |     dependencies:
 592 |       function-bind: 1.1.1
 593 | 
 594 |   /inflight@1.0.6:
 595 |     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
 596 |     dependencies:
 597 |       once: 1.4.0
 598 |       wrappy: 1.0.2
 599 | 
 600 |   /inherits@2.0.4:
 601 |     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 602 | 
 603 |   /invariant@2.2.4:
 604 |     resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==}
 605 |     dependencies:
 606 |       loose-envify: 1.4.0
 607 |     dev: false
 608 | 
 609 |   /is-binary-path@2.1.0:
 610 |     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
 611 |     engines: {node: '>=8'}
 612 |     dependencies:
 613 |       binary-extensions: 2.2.0
 614 | 
 615 |   /is-core-module@2.12.1:
 616 |     resolution: {integrity: sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==}
 617 |     dependencies:
 618 |       has: 1.0.3
 619 | 
 620 |   /is-extglob@2.1.1:
 621 |     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
 622 |     engines: {node: '>=0.10.0'}
 623 | 
 624 |   /is-glob@4.0.3:
 625 |     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
 626 |     engines: {node: '>=0.10.0'}
 627 |     dependencies:
 628 |       is-extglob: 2.1.1
 629 | 
 630 |   /is-number@7.0.0:
 631 |     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
 632 |     engines: {node: '>=0.12.0'}
 633 | 
 634 |   /jiti@1.19.1:
 635 |     resolution: {integrity: sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==}
 636 |     hasBin: true
 637 | 
 638 |   /js-tokens@4.0.0:
 639 |     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 640 |     dev: false
 641 | 
 642 |   /lilconfig@2.1.0:
 643 |     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
 644 |     engines: {node: '>=10'}
 645 | 
 646 |   /lines-and-columns@1.2.4:
 647 |     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 648 | 
 649 |   /loose-envify@1.4.0:
 650 |     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
 651 |     hasBin: true
 652 |     dependencies:
 653 |       js-tokens: 4.0.0
 654 |     dev: false
 655 | 
 656 |   /merge2@1.4.1:
 657 |     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
 658 |     engines: {node: '>= 8'}
 659 | 
 660 |   /micromatch@4.0.5:
 661 |     resolution: {integrity: sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==}
 662 |     engines: {node: '>=8.6'}
 663 |     dependencies:
 664 |       braces: 3.0.2
 665 |       picomatch: 2.3.1
 666 | 
 667 |   /minimatch@3.1.2:
 668 |     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 669 |     dependencies:
 670 |       brace-expansion: 1.1.11
 671 | 
 672 |   /mz@2.7.0:
 673 |     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 674 |     dependencies:
 675 |       any-promise: 1.3.0
 676 |       object-assign: 4.1.1
 677 |       thenify-all: 1.6.0
 678 | 
 679 |   /nanoid@3.3.6:
 680 |     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
 681 |     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
 682 |     hasBin: true
 683 | 
 684 |   /next@13.4.8(react-dom@18.2.0)(react@18.2.0):
 685 |     resolution: {integrity: sha512-lxUjndYKjZHGK3CWeN2RI+/6ni6EUvjiqGWXAYPxUfGIdFGQ5XoisrqAJ/dF74aP27buAfs8MKIbIMMdxjqSBg==}
 686 |     engines: {node: '>=16.8.0'}
 687 |     hasBin: true
 688 |     peerDependencies:
 689 |       '@opentelemetry/api': ^1.1.0
 690 |       fibers: '>= 3.1.0'
 691 |       react: ^18.2.0
 692 |       react-dom: ^18.2.0
 693 |       sass: ^1.3.0
 694 |     peerDependenciesMeta:
 695 |       '@opentelemetry/api':
 696 |         optional: true
 697 |       fibers:
 698 |         optional: true
 699 |       sass:
 700 |         optional: true
 701 |     dependencies:
 702 |       '@next/env': 13.4.8
 703 |       '@swc/helpers': 0.5.1
 704 |       busboy: 1.6.0
 705 |       caniuse-lite: 1.0.30001512
 706 |       postcss: 8.4.14
 707 |       react: 18.2.0
 708 |       react-dom: 18.2.0(react@18.2.0)
 709 |       styled-jsx: 5.1.1(react@18.2.0)
 710 |       watchpack: 2.4.0
 711 |       zod: 3.21.4
 712 |     optionalDependencies:
 713 |       '@next/swc-darwin-arm64': 13.4.8
 714 |       '@next/swc-darwin-x64': 13.4.8
 715 |       '@next/swc-linux-arm64-gnu': 13.4.8
 716 |       '@next/swc-linux-arm64-musl': 13.4.8
 717 |       '@next/swc-linux-x64-gnu': 13.4.8
 718 |       '@next/swc-linux-x64-musl': 13.4.8
 719 |       '@next/swc-win32-arm64-msvc': 13.4.8
 720 |       '@next/swc-win32-ia32-msvc': 13.4.8
 721 |       '@next/swc-win32-x64-msvc': 13.4.8
 722 |     transitivePeerDependencies:
 723 |       - '@babel/core'
 724 |       - babel-plugin-macros
 725 |     dev: false
 726 | 
 727 |   /node-releases@2.0.12:
 728 |     resolution: {integrity: sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==}
 729 |     dev: false
 730 | 
 731 |   /normalize-path@3.0.0:
 732 |     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
 733 |     engines: {node: '>=0.10.0'}
 734 | 
 735 |   /normalize-range@0.1.2:
 736 |     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
 737 |     engines: {node: '>=0.10.0'}
 738 |     dev: false
 739 | 
 740 |   /object-assign@4.1.1:
 741 |     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
 742 |     engines: {node: '>=0.10.0'}
 743 | 
 744 |   /object-hash@3.0.0:
 745 |     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
 746 |     engines: {node: '>= 6'}
 747 | 
 748 |   /once@1.4.0:
 749 |     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 750 |     dependencies:
 751 |       wrappy: 1.0.2
 752 | 
 753 |   /path-is-absolute@1.0.1:
 754 |     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
 755 |     engines: {node: '>=0.10.0'}
 756 | 
 757 |   /path-parse@1.0.7:
 758 |     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 759 | 
 760 |   /picocolors@1.0.0:
 761 |     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 762 | 
 763 |   /picomatch@2.3.1:
 764 |     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
 765 |     engines: {node: '>=8.6'}
 766 | 
 767 |   /pify@2.3.0:
 768 |     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
 769 |     engines: {node: '>=0.10.0'}
 770 | 
 771 |   /pirates@4.0.6:
 772 |     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
 773 |     engines: {node: '>= 6'}
 774 | 
 775 |   /postcss-import@15.1.0(postcss@8.4.24):
 776 |     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
 777 |     engines: {node: '>=14.0.0'}
 778 |     peerDependencies:
 779 |       postcss: ^8.0.0
 780 |     dependencies:
 781 |       postcss: 8.4.24
 782 |       postcss-value-parser: 4.2.0
 783 |       read-cache: 1.0.0
 784 |       resolve: 1.22.2
 785 | 
 786 |   /postcss-js@4.0.1(postcss@8.4.24):
 787 |     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
 788 |     engines: {node: ^12 || ^14 || >= 16}
 789 |     peerDependencies:
 790 |       postcss: ^8.4.21
 791 |     dependencies:
 792 |       camelcase-css: 2.0.1
 793 |       postcss: 8.4.24
 794 | 
 795 |   /postcss-load-config@4.0.1(postcss@8.4.24):
 796 |     resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
 797 |     engines: {node: '>= 14'}
 798 |     peerDependencies:
 799 |       postcss: '>=8.0.9'
 800 |       ts-node: '>=9.0.0'
 801 |     peerDependenciesMeta:
 802 |       postcss:
 803 |         optional: true
 804 |       ts-node:
 805 |         optional: true
 806 |     dependencies:
 807 |       lilconfig: 2.1.0
 808 |       postcss: 8.4.24
 809 |       yaml: 2.3.1
 810 | 
 811 |   /postcss-nested@6.0.1(postcss@8.4.24):
 812 |     resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
 813 |     engines: {node: '>=12.0'}
 814 |     peerDependencies:
 815 |       postcss: ^8.2.14
 816 |     dependencies:
 817 |       postcss: 8.4.24
 818 |       postcss-selector-parser: 6.0.13
 819 | 
 820 |   /postcss-selector-parser@6.0.13:
 821 |     resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
 822 |     engines: {node: '>=4'}
 823 |     dependencies:
 824 |       cssesc: 3.0.0
 825 |       util-deprecate: 1.0.2
 826 | 
 827 |   /postcss-value-parser@4.2.0:
 828 |     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 829 | 
 830 |   /postcss@8.4.14:
 831 |     resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
 832 |     engines: {node: ^10 || ^12 || >=14}
 833 |     dependencies:
 834 |       nanoid: 3.3.6
 835 |       picocolors: 1.0.0
 836 |       source-map-js: 1.0.2
 837 |     dev: false
 838 | 
 839 |   /postcss@8.4.24:
 840 |     resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
 841 |     engines: {node: ^10 || ^12 || >=14}
 842 |     dependencies:
 843 |       nanoid: 3.3.6
 844 |       picocolors: 1.0.0
 845 |       source-map-js: 1.0.2
 846 | 
 847 |   /prismjs@1.29.0:
 848 |     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
 849 |     engines: {node: '>=6'}
 850 | 
 851 |   /prop-types@15.8.1:
 852 |     resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==}
 853 |     dependencies:
 854 |       loose-envify: 1.4.0
 855 |       object-assign: 4.1.1
 856 |       react-is: 16.13.1
 857 |     dev: false
 858 | 
 859 |   /queue-microtask@1.2.3:
 860 |     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 861 | 
 862 |   /react-clientside-effect@1.2.6(react@18.2.0):
 863 |     resolution: {integrity: sha512-XGGGRQAKY+q25Lz9a/4EPqom7WRjz3z9R2k4jhVKA/puQFH/5Nt27vFZYql4m4NVNdUvX8PS3O7r/Zzm7cjUlg==}
 864 |     peerDependencies:
 865 |       react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
 866 |     dependencies:
 867 |       '@babel/runtime': 7.22.6
 868 |       react: 18.2.0
 869 |     dev: false
 870 | 
 871 |   /react-dom@18.2.0(react@18.2.0):
 872 |     resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
 873 |     peerDependencies:
 874 |       react: ^18.2.0
 875 |     dependencies:
 876 |       loose-envify: 1.4.0
 877 |       react: 18.2.0
 878 |       scheduler: 0.23.0
 879 |     dev: false
 880 | 
 881 |   /react-focus-lock@2.5.2(@types/react@18.2.14)(react@18.2.0):
 882 |     resolution: {integrity: sha512-WzpdOnEqjf+/A3EH9opMZWauag7gV0BxFl+EY4ElA4qFqYsUsBLnmo2sELbN5OC30S16GAWMy16B9DLPpdJKAQ==}
 883 |     peerDependencies:
 884 |       react: ^16.8.0 || ^17.0.0
 885 |     dependencies:
 886 |       '@babel/runtime': 7.22.6
 887 |       focus-lock: 0.9.2
 888 |       prop-types: 15.8.1
 889 |       react: 18.2.0
 890 |       react-clientside-effect: 1.2.6(react@18.2.0)
 891 |       use-callback-ref: 1.3.0(@types/react@18.2.14)(react@18.2.0)
 892 |       use-sidecar: 1.1.2(@types/react@18.2.14)(react@18.2.0)
 893 |     transitivePeerDependencies:
 894 |       - '@types/react'
 895 |     dev: false
 896 | 
 897 |   /react-is@16.13.1:
 898 |     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 899 |     dev: false
 900 | 
 901 |   /react-remove-scroll-bar@2.3.4(@types/react@18.2.14)(react@18.2.0):
 902 |     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
 903 |     engines: {node: '>=10'}
 904 |     peerDependencies:
 905 |       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
 906 |       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 907 |     peerDependenciesMeta:
 908 |       '@types/react':
 909 |         optional: true
 910 |     dependencies:
 911 |       '@types/react': 18.2.14
 912 |       react: 18.2.0
 913 |       react-style-singleton: 2.2.1(@types/react@18.2.14)(react@18.2.0)
 914 |       tslib: 2.6.0
 915 |     dev: false
 916 | 
 917 |   /react-remove-scroll@2.4.3(@types/react@18.2.14)(react@18.2.0):
 918 |     resolution: {integrity: sha512-lGWYXfV6jykJwbFpsuPdexKKzp96f3RbvGapDSIdcyGvHb7/eqyn46C7/6h+rUzYar1j5mdU+XECITHXCKBk9Q==}
 919 |     engines: {node: '>=8.5.0'}
 920 |     peerDependencies:
 921 |       '@types/react': ^16.8.0 || ^17.0.0
 922 |       react: ^16.8.0 || ^17.0.0
 923 |     peerDependenciesMeta:
 924 |       '@types/react':
 925 |         optional: true
 926 |     dependencies:
 927 |       '@types/react': 18.2.14
 928 |       react: 18.2.0
 929 |       react-remove-scroll-bar: 2.3.4(@types/react@18.2.14)(react@18.2.0)
 930 |       react-style-singleton: 2.2.1(@types/react@18.2.14)(react@18.2.0)
 931 |       tslib: 1.14.1
 932 |       use-callback-ref: 1.3.0(@types/react@18.2.14)(react@18.2.0)
 933 |       use-sidecar: 1.1.2(@types/react@18.2.14)(react@18.2.0)
 934 |     dev: false
 935 | 
 936 |   /react-style-singleton@2.2.1(@types/react@18.2.14)(react@18.2.0):
 937 |     resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==}
 938 |     engines: {node: '>=10'}
 939 |     peerDependencies:
 940 |       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
 941 |       react: ^16.8.0 || ^17.0.0 || ^18.0.0
 942 |     peerDependenciesMeta:
 943 |       '@types/react':
 944 |         optional: true
 945 |     dependencies:
 946 |       '@types/react': 18.2.14
 947 |       get-nonce: 1.0.1
 948 |       invariant: 2.2.4
 949 |       react: 18.2.0
 950 |       tslib: 2.6.0
 951 |     dev: false
 952 | 
 953 |   /react@18.2.0:
 954 |     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
 955 |     engines: {node: '>=0.10.0'}
 956 |     dependencies:
 957 |       loose-envify: 1.4.0
 958 |     dev: false
 959 | 
 960 |   /read-cache@1.0.0:
 961 |     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
 962 |     dependencies:
 963 |       pify: 2.3.0
 964 | 
 965 |   /readdirp@3.6.0:
 966 |     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
 967 |     engines: {node: '>=8.10.0'}
 968 |     dependencies:
 969 |       picomatch: 2.3.1
 970 | 
 971 |   /regenerator-runtime@0.13.11:
 972 |     resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==}
 973 |     dev: false
 974 | 
 975 |   /resolve@1.22.2:
 976 |     resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
 977 |     hasBin: true
 978 |     dependencies:
 979 |       is-core-module: 2.12.1
 980 |       path-parse: 1.0.7
 981 |       supports-preserve-symlinks-flag: 1.0.0
 982 | 
 983 |   /reusify@1.0.4:
 984 |     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
 985 |     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
 986 | 
 987 |   /run-parallel@1.2.0:
 988 |     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 989 |     dependencies:
 990 |       queue-microtask: 1.2.3
 991 | 
 992 |   /scheduler@0.23.0:
 993 |     resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}
 994 |     dependencies:
 995 |       loose-envify: 1.4.0
 996 |     dev: false
 997 | 
 998 |   /source-map-js@1.0.2:
 999 |     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
1000 |     engines: {node: '>=0.10.0'}
1001 | 
1002 |   /streamsearch@1.1.0:
1003 |     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
1004 |     engines: {node: '>=10.0.0'}
1005 |     dev: false
1006 | 
1007 |   /styled-jsx@5.1.1(react@18.2.0):
1008 |     resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
1009 |     engines: {node: '>= 12.0.0'}
1010 |     peerDependencies:
1011 |       '@babel/core': '*'
1012 |       babel-plugin-macros: '*'
1013 |       react: '>= 16.8.0 || 17.x.x || ^18.0.0-0'
1014 |     peerDependenciesMeta:
1015 |       '@babel/core':
1016 |         optional: true
1017 |       babel-plugin-macros:
1018 |         optional: true
1019 |     dependencies:
1020 |       client-only: 0.0.1
1021 |       react: 18.2.0
1022 |     dev: false
1023 | 
1024 |   /sucrase@3.32.0:
1025 |     resolution: {integrity: sha512-ydQOU34rpSyj2TGyz4D2p8rbktIOZ8QY9s+DGLvFU1i5pWJE8vkpruCjGCMHsdXwnD7JDcS+noSwM/a7zyNFDQ==}
1026 |     engines: {node: '>=8'}
1027 |     hasBin: true
1028 |     dependencies:
1029 |       '@jridgewell/gen-mapping': 0.3.3
1030 |       commander: 4.1.1
1031 |       glob: 7.1.6
1032 |       lines-and-columns: 1.2.4
1033 |       mz: 2.7.0
1034 |       pirates: 4.0.6
1035 |       ts-interface-checker: 0.1.13
1036 | 
1037 |   /supports-preserve-symlinks-flag@1.0.0:
1038 |     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
1039 |     engines: {node: '>= 0.4'}
1040 | 
1041 |   /tailwindcss@3.3.2:
1042 |     resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
1043 |     engines: {node: '>=14.0.0'}
1044 |     hasBin: true
1045 |     dependencies:
1046 |       '@alloc/quick-lru': 5.2.0
1047 |       arg: 5.0.2
1048 |       chokidar: 3.5.3
1049 |       didyoumean: 1.2.2
1050 |       dlv: 1.1.3
1051 |       fast-glob: 3.3.0
1052 |       glob-parent: 6.0.2
1053 |       is-glob: 4.0.3
1054 |       jiti: 1.19.1
1055 |       lilconfig: 2.1.0
1056 |       micromatch: 4.0.5
1057 |       normalize-path: 3.0.0
1058 |       object-hash: 3.0.0
1059 |       picocolors: 1.0.0
1060 |       postcss: 8.4.24
1061 |       postcss-import: 15.1.0(postcss@8.4.24)
1062 |       postcss-js: 4.0.1(postcss@8.4.24)
1063 |       postcss-load-config: 4.0.1(postcss@8.4.24)
1064 |       postcss-nested: 6.0.1(postcss@8.4.24)
1065 |       postcss-selector-parser: 6.0.13
1066 |       postcss-value-parser: 4.2.0
1067 |       resolve: 1.22.2
1068 |       sucrase: 3.32.0
1069 |     transitivePeerDependencies:
1070 |       - ts-node
1071 | 
1072 |   /thenify-all@1.6.0:
1073 |     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
1074 |     engines: {node: '>=0.8'}
1075 |     dependencies:
1076 |       thenify: 3.3.1
1077 | 
1078 |   /thenify@3.3.1:
1079 |     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
1080 |     dependencies:
1081 |       any-promise: 1.3.0
1082 | 
1083 |   /to-regex-range@5.0.1:
1084 |     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
1085 |     engines: {node: '>=8.0'}
1086 |     dependencies:
1087 |       is-number: 7.0.0
1088 | 
1089 |   /toggle-selection@1.0.6:
1090 |     resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
1091 |     dev: false
1092 | 
1093 |   /ts-interface-checker@0.1.13:
1094 |     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
1095 | 
1096 |   /tslib@1.14.1:
1097 |     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
1098 |     dev: false
1099 | 
1100 |   /tslib@2.6.0:
1101 |     resolution: {integrity: sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA==}
1102 |     dev: false
1103 | 
1104 |   /typescript@5.1.6:
1105 |     resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==}
1106 |     engines: {node: '>=14.17'}
1107 |     hasBin: true
1108 |     dev: false
1109 | 
1110 |   /update-browserslist-db@1.0.11(browserslist@4.21.9):
1111 |     resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
1112 |     hasBin: true
1113 |     peerDependencies:
1114 |       browserslist: '>= 4.21.0'
1115 |     dependencies:
1116 |       browserslist: 4.21.9
1117 |       escalade: 3.1.1
1118 |       picocolors: 1.0.0
1119 |     dev: false
1120 | 
1121 |   /use-callback-ref@1.3.0(@types/react@18.2.14)(react@18.2.0):
1122 |     resolution: {integrity: sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==}
1123 |     engines: {node: '>=10'}
1124 |     peerDependencies:
1125 |       '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0
1126 |       react: ^16.8.0 || ^17.0.0 || ^18.0.0
1127 |     peerDependenciesMeta:
1128 |       '@types/react':
1129 |         optional: true
1130 |     dependencies:
1131 |       '@types/react': 18.2.14
1132 |       react: 18.2.0
1133 |       tslib: 2.6.0
1134 |     dev: false
1135 | 
1136 |   /use-sidecar@1.1.2(@types/react@18.2.14)(react@18.2.0):
1137 |     resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
1138 |     engines: {node: '>=10'}
1139 |     peerDependencies:
1140 |       '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0
1141 |       react: ^16.8.0 || ^17.0.0 || ^18.0.0
1142 |     peerDependenciesMeta:
1143 |       '@types/react':
1144 |         optional: true
1145 |     dependencies:
1146 |       '@types/react': 18.2.14
1147 |       detect-node-es: 1.1.0
1148 |       react: 18.2.0
1149 |       tslib: 2.6.0
1150 |     dev: false
1151 | 
1152 |   /util-deprecate@1.0.2:
1153 |     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
1154 | 
1155 |   /watchpack@2.4.0:
1156 |     resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==}
1157 |     engines: {node: '>=10.13.0'}
1158 |     dependencies:
1159 |       glob-to-regexp: 0.4.1
1160 |       graceful-fs: 4.2.11
1161 |     dev: false
1162 | 
1163 |   /wrappy@1.0.2:
1164 |     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
1165 | 
1166 |   /yaml@2.3.1:
1167 |     resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
1168 |     engines: {node: '>= 14'}
1169 | 
1170 |   /zod@3.21.4:
1171 |     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
1172 |     dev: false
1173 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - "packages/*"
3 | 


--------------------------------------------------------------------------------